/* BuddyBoss Hashtag Generator - Modern Light Theme */

:root {
    --bbhg-primary: #0ea5e9;
    --bbhg-primary-dark: #0284c7;
    --bbhg-primary-light: #38bdf8;
    --bbhg-accent: #06b6d4;
    --bbhg-success: #10b981;
    --bbhg-warning: #f59e0b;
    --bbhg-error: #ef4444;
    --bbhg-dark: #0f172a;
    --bbhg-gray-900: #1e293b;
    --bbhg-gray-800: #334155;
    --bbhg-gray-700: #475569;
    --bbhg-gray-600: #64748b;
    --bbhg-gray-500: #94a3b8;
    --bbhg-gray-400: #cbd5e1;
    --bbhg-gray-300: #e2e8f0;
    --bbhg-gray-200: #f1f5f9;
    --bbhg-gray-100: #f8fafc;
    --bbhg-white: #ffffff;
    --bbhg-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --bbhg-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --bbhg-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --bbhg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --bbhg-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --bbhg-radius: 10px;
    --bbhg-radius-sm: 6px;
    --bbhg-radius-lg: 16px;
    --bbhg-radius-xl: 20px;
    
    /* Platform colors */
    --bbhg-youtube: #FF0000;
    --bbhg-google: #4285F4;
    --bbhg-reddit: #FF4500;
    --bbhg-lemmy: #00D25B;
    --bbhg-mastodon: #6364FF;
    --bbhg-github: #181717;
    --bbhg-hackernews: #FF6600;
    --bbhg-medium: #00AB6C;
    --bbhg-devto: #0A0A0A;
    --bbhg-pinterest: #E60023;
    --bbhg-tumblr: #35465C;
    --bbhg-dribbble: #EA4C89;
    --bbhg-stackoverflow: #F48024;
    --bbhg-producthunt: #DA552F;
    --bbhg-flickr: #0063DC;
    --bbhg-codepen: #1E1F26;
    --bbhg-behance: #1769FF;
    --bbhg-unsplash: #111111;
    --bbhg-lobsters: #AC130D;
    --bbhg-hashnode: #2962FF;
    
    /* New platform colors */
    --bbhg-bluesky: #0085FF;
    --bbhg-threads: #000000;
    --bbhg-pixelfed: #FF6B6B;
    --bbhg-minds: #FED12F;
    --bbhg-cohost: #83254F;
    --bbhg-imgur: #1BB76E;
    --bbhg-instagram: #E4405F;
    --bbhg-knowyourmeme: #19B354;
    --bbhg-urbandictionary: #1D2439;
    --bbhg-genius: #FFFF64;
    --bbhg-billboard: #D31F26;
    --bbhg-imdb: #F5C518;
    --bbhg-twitch: #9146FF;
    --bbhg-spotify: #1DB954;
}

/* Reset */
.bbhg-modal *, .bbhg-modal *::before, .bbhg-modal *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global button focus reset - removes default browser yellow/blue outlines */
.bbhg-modal button,
.bbhg-modal [type="button"],
.bbhg-event-modal button,
.bbhg-event-modal [type="button"],
.bbhg-day-popup-overlay button,
.bbhg-day-popup-overlay [type="button"] {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.bbhg-modal button:focus,
.bbhg-modal [type="button"]:focus,
.bbhg-event-modal button:focus,
.bbhg-event-modal [type="button"]:focus,
.bbhg-day-popup-overlay button:focus,
.bbhg-day-popup-overlay [type="button"]:focus {
    outline: none;
}

/* ================================
   Trigger Button
   ================================ */
.bbhg-composer-trigger {
    margin: 16px 0;
}

.bbhg-open-generator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    border: none !important;
    outline: none !important;
    padding: 14px 32px;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px -3px rgba(14, 165, 233, 0.4), 0 8px 25px -5px rgba(6, 182, 212, 0.3);
    min-width: 220px;
    justify-content: center;
}

.bbhg-open-generator:focus {
    outline: none !important;
    border: none !important;
}

.bbhg-open-generator:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -3px rgba(14, 165, 233, 0.5), 0 12px 30px -5px rgba(6, 182, 212, 0.4);
}

.bbhg-open-generator:hover .bbhg-arrow {
    animation: none;
    transform: translateX(6px);
}

.bbhg-open-generator svg {
    width: 18px;
    height: 18px;
}

.bbhg-open-generator .bbhg-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform 0.3s ease;
    animation: bbhg-arrow-bounce 1.2s ease-in-out infinite;
}

.bbhg-open-generator .bbhg-arrow svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

@keyframes bbhg-arrow-bounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(6px);
    }
}

/* Inline button - keep compact */
.bbhg-composer-trigger.bbhg-inline .bbhg-open-generator {
    min-width: auto;
    padding: 10px 20px;
}

/* ================================
   Modal Overlay
   ================================ */
.bbhg-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bbhg-modal-overlay.active {
    display: flex;
}

/* ================================
   Modal Container
   ================================ */
.bbhg-modal {
    position: relative;
    width: 100%;
    max-width: 780px;
    max-height: 90vh;
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-xl);
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
    overflow: hidden;
    box-shadow: var(--bbhg-shadow-xl), 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.bbhg-modal-overlay.active .bbhg-modal {
    transform: scale(1) translateY(0);
}

.bbhg-modal-handle {
    display: none;
}

/* ================================
   Modal Header
   ================================ */
.bbhg-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--bbhg-gray-100) 0%, var(--bbhg-white) 100%);
    border-bottom: 1px solid var(--bbhg-gray-200);
    position: relative;
    z-index: 10002;
}

.bbhg-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-logo {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-radius: var(--bbhg-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-logo-icon {
    color: white;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.bbhg-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbhg-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin: 0;
    line-height: 1.2;
}

.bbhg-modal-subtitle {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-modal-close {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2937;
    transition: all 0.2s;
    flex-shrink: 0;
}

.bbhg-modal-close:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-dark);
}

.bbhg-modal-close svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke-width: 2.5;
}

/* Header Actions Container */
.bbhg-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ================================
   Header Filter Tabs
   ================================ */
.bbhg-header-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-lg);
    margin-left: auto;
    margin-right: 16px;
}

.bbhg-header-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-header-filter svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    flex-shrink: 0;
}

.bbhg-header-filter:hover {
    color: var(--bbhg-gray-800);
    background: var(--bbhg-white);
}

.bbhg-header-filter.active {
    background: var(--bbhg-white);
    color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-header-filter.active svg {
    stroke: var(--bbhg-primary);
}

/* Mobile Filter Dropdown (hidden by default) */
.bbhg-header-filters-mobile {
    display: none;
}

.bbhg-filter-dropdown {
    position: relative;
    width: 100%;
}

.bbhg-filter-dropdown-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-filter-dropdown-btn:hover {
    border-color: var(--bbhg-primary);
}

.bbhg-filter-dropdown-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.bbhg-filter-dropdown-btn svg.bbhg-filter-dropdown-chevron {
    flex-shrink: 0;
}

.bbhg-filter-dropdown-btn.open svg.bbhg-filter-dropdown-chevron {
    transform: rotate(180deg);
}

.bbhg-filter-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    box-shadow: var(--bbhg-shadow-lg);
    z-index: 100;
    display: none;
    overflow: hidden;
}

.bbhg-filter-dropdown-menu.open {
    display: block;
}

.bbhg-filter-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.bbhg-filter-dropdown-item:hover {
    background: var(--bbhg-gray-100);
}

/* Hide currently selected item from dropdown (shown in button already) */
.bbhg-filter-dropdown-item.active {
    display: none;
}

.bbhg-filter-dropdown-item svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* SVG in dropdown button label */
.bbhg-filter-dropdown-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-filter-dropdown-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Hide filter text on smaller screens, show only icons */
@media (max-width: 900px) {
    .bbhg-header-filter span {
        display: none;
    }
    
    .bbhg-header-filter {
        padding: 8px 10px;
    }
    
    .bbhg-header-filters {
        margin-right: 12px;
    }
}

/* Stack header on mobile - use dropdown */
@media (max-width: 600px) {
    .bbhg-modal-header {
        flex-wrap: wrap;
        gap: 12px;
        padding: 16px;
    }
    
    /* Hide desktop filters, show mobile dropdown */
    .bbhg-header-filters {
        display: none;
    }
    
    .bbhg-header-filters-mobile {
        display: block;
        order: 3;
        width: 100%;
        margin: 0;
    }
}

/* Very small screens - ensure dropdown stays compact */
@media (max-width: 380px) {
    .bbhg-filter-dropdown-btn {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-filter-dropdown-item {
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* Fullscreen Button */
.bbhg-modal-fullscreen {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    display: none; /* Hidden by default, shown on desktop */
    align-items: center;
    justify-content: center;
    color: #1f2937;
    transition: all 0.2s;
    flex-shrink: 0;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.bbhg-modal-fullscreen:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-dark);
}

.bbhg-modal-fullscreen svg {
    width: 18px;
    height: 18px;
    display: block;
    pointer-events: none;
}

/* Show fullscreen button only on desktop */
@media (min-width: 769px) {
    .bbhg-modal-fullscreen {
        display: flex;
    }
}

/* Fullscreen Mode Styles */
.bbhg-modal-overlay.bbhg-fullscreen {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
}

.bbhg-modal-overlay.bbhg-fullscreen .bbhg-modal {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    transform: none !important;
}

.bbhg-modal-overlay.bbhg-fullscreen .bbhg-modal-body {
    max-height: calc(100vh - 80px) !important;
    height: calc(100vh - 80px) !important;
}

.bbhg-modal-overlay.bbhg-fullscreen .bbhg-fullscreen-expand {
    display: none !important;
}

.bbhg-modal-overlay.bbhg-fullscreen .bbhg-fullscreen-collapse {
    display: block !important;
}

/* ================================
   Desktop: Fullscreen by Default
   ================================ */
@media (min-width: 1024px) {
    /* Make modal fullscreen by default on desktop */
    .bbhg-modal-overlay {
        padding: 0 !important;
        align-items: stretch !important;
        justify-content: stretch !important;
    }
    
    .bbhg-modal-overlay .bbhg-modal {
        max-width: 100% !important;
        max-height: 100% !important;
        width: 100vw !important;
        height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
        transform: none !important;
    }
    
    .bbhg-modal-overlay.active .bbhg-modal {
        transform: none !important;
    }
    
    .bbhg-modal-body {
        max-height: calc(100vh - 80px) !important;
        height: calc(100vh - 80px) !important;
        padding: 8px 32px 32px !important;
    }
    
    /* Hide fullscreen button on desktop since it's already fullscreen */
    .bbhg-modal-fullscreen {
        display: none !important;
    }
    
    /* Wider header padding on desktop fullscreen */
    .bbhg-modal-header {
        padding: 20px 32px;
    }
    
    /* Adjust tab slider for fullscreen */
    .bbhg-tabs-slider {
        padding: 0 8px;
    }
    
    /* Better grid layouts in fullscreen */
    .bbhg-discover-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 20px;
    }
    
    /* Wider content containers */
    .bbhg-content-section,
    .bbhg-trends-container,
    .bbhg-cards-grid {
        max-width: 100%;
    }
    
    /* Better card sizing in fullscreen */
    .bbhg-discover-card,
    .bbhg-trend-card,
    .bbhg-insight-card {
        min-height: auto;
    }
    
    /* Optimize AI chat in fullscreen */
    .bbhg-ai-chat {
        max-height: calc(100vh - 200px);
    }
    
    /* Better hashtag grid spacing */
    .bbhg-hashtag-grid,
    .bbhg-hashtags-grid {
        gap: 12px;
    }
    
    /* Improve tab slider visibility */
    .bbhg-tabs-slider {
        max-width: 100%;
    }
    
    /* Better trending cards grid */
    .bbhg-trending-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
    }
    
    /* Better news/insights layout */
    .bbhg-news-grid,
    .bbhg-insights-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }
    
    /* Hooks and other feature grids */
    .bbhg-hooks-grid,
    .bbhg-features-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 20px;
    }
    
    /* Form containers in fullscreen */
    .bbhg-form-section,
    .bbhg-input-section {
        max-width: 800px;
        margin: 0 auto;
    }
    
    /* Results containers take full width */
    .bbhg-results-section,
    .bbhg-output-section {
        max-width: 100%;
    }
}

/* Large desktop screens - even more space */
@media (min-width: 1440px) {
    .bbhg-modal-body {
        padding: 8px 48px 48px !important;
    }
    
    .bbhg-modal-header {
        padding: 24px 48px;
    }
    
    .bbhg-discover-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 24px;
    }
    
    /* Three column layout for trends */
    .bbhg-trends-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Better card sizing */
    .bbhg-discover-card {
        padding: 24px 20px;
    }
    
    .bbhg-discover-card-icon {
        font-size: 36px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    .bbhg-modal-body {
        padding: 8px 64px 64px !important;
    }
    
    .bbhg-modal-header {
        padding: 28px 64px;
    }
    
    .bbhg-discover-grid {
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 28px;
    }
    
    /* Four column layout for trends on ultra-wide */
    .bbhg-trends-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .bbhg-hashtag-grid,
    .bbhg-hashtags-grid {
        gap: 16px;
    }
}

/* ================================
   Modal Body
   ================================ */
.bbhg-modal-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: visible;
    padding: 0 24px 24px;
    padding-top: 4px;
    -webkit-overflow-scrolling: touch;
    background: var(--bbhg-white);
}

/* ================================
   Tab Search Bar
   ================================ */
.bbhg-tab-search-bar {
    position: relative;
    padding: 8px 0 12px !important;
    margin: 0 !important;
    overflow: visible;
    width: 100%;
    flex: none;
    z-index: 15;
}
/* Search bar slider: stacks vertically, full width */
.bbhg-slider-container:not(.bbhg-tabs-slider) {
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    gap: 0;
    overflow: visible;
    position: relative;
    z-index: 15;
}
.bbhg-tab-search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 12px !important;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    overflow: visible;
}
.bbhg-tab-search-bar.bbhg-search-active .bbhg-tab-search-inner {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139,92,246,0.12);
    background: #fff;
}
.bbhg-tab-search-icon {
    width: 16px;
    height: 16px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: color 0.2s;
}
.bbhg-tab-search-bar.bbhg-search-active .bbhg-tab-search-icon {
    color: #8b5cf6;
}
.bbhg-tab-search-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    color: #1e293b !important;
    outline: none !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 100%;
    display: block;
}
.bbhg-tab-search-input::placeholder { color: #94a3b8; }
.bbhg-tab-search-clear {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.2s;
}
.bbhg-tab-search-clear:hover { color: #ef4444; }
.bbhg-tab-search-clear svg { width: 14px; height: 14px; }
.bbhg-tab-search-results {
    position: absolute;
    top: calc(100% - 2px);
    left: 0; right: 0;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    max-height: 280px;
    overflow-y: auto;
    z-index: 9999;
}
.bbhg-search-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.bbhg-search-result-item:last-child { border-bottom: none; }
.bbhg-search-result-item:hover, .bbhg-search-result-item.bbhg-search-focused {
    background: #f5f3ff;
}
.bbhg-search-result-icon {
    font-size: 18px;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}
.bbhg-search-result-label {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    flex: 1;
}
.bbhg-search-result-label mark {
    background: none;
    color: #8b5cf6;
    font-weight: 700;
}
.bbhg-search-result-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 8px;
    color: #fff;
}
.bbhg-search-no-results {
    padding: 18px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}

/* ================================
   Main Tabs - Slidable
   ================================ */

/* Slider Container with Arrows */
.bbhg-slider-container.bbhg-tabs-slider {
    display: flex;
    align-items: center;
    position: sticky;
    top: -1px;
    background: var(--bbhg-white);
    z-index: 10;
    padding: 4px 0 6px !important;
    margin-top: 0;
    gap: 8px;
    overflow: visible;
}

/* Add a pseudo-element to cover badges when scrolling */
.bbhg-slider-container.bbhg-tabs-slider::before {
    content: '';
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: var(--bbhg-white);
    z-index: -1;
}

.bbhg-slider-arrow {
    display: none; /* Hidden by default, shown on desktop */
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border: none;
    background: var(--bbhg-gray-100);
    border-radius: 50%;
    cursor: pointer;
    color: #1f2937;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 15;
    pointer-events: auto;
}

.bbhg-slider-arrow:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
}

.bbhg-slider-arrow:active {
    transform: scale(0.95);
}

.bbhg-slider-arrow svg {
    width: 16px;
    height: 16px;
}

.bbhg-slider-arrow.hidden {
    opacity: 0.4;
    cursor: default;
}

/* Arrows should ALWAYS be clickable on desktop - remove pointer-events restriction */
@media (min-width: 769px) {
    .bbhg-slider-arrow {
        display: flex;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .bbhg-slider-arrow.hidden {
        opacity: 0.4;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    
    .bbhg-slider-arrow.hidden:hover {
        opacity: 0.6;
        background: var(--bbhg-gray-200);
    }
}

.bbhg-main-tabs-wrapper {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    padding-top: 0;
    margin-top: 0;
}

.bbhg-main-tabs-wrapper::-webkit-scrollbar {
    display: none;
}

.bbhg-tabs {
    display: flex;
    gap: 4px;
    overflow: visible;
}

.bbhg-tabs-slidable {
    min-width: max-content;
    padding-right: 20px;
    padding-top: 8px;
}

.bbhg-tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    white-space: nowrap;
}

.bbhg-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
}

.bbhg-tab.active {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-tab svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.5;
}

/* Tab Badge Styles */
.bbhg-tab-with-badge {
    position: relative;
}

.bbhg-tab-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 8px;
    line-height: 1.2;
}

.bbhg-tab-badge-new {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

/* Different colors for each NEW badge */
.bbhg-tab-badge-algorithm {
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

.bbhg-tab-badge-suggest {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(245, 158, 11, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

.bbhg-tab-badge-growth {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

.bbhg-tab-badge-calendar {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

.bbhg-tab-badge-entertainment {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

.bbhg-tab-badge-live {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

/* Hide tab badges in mobile landscape mode */
@media screen and (max-width: 900px) and (orientation: landscape) {
    .bbhg-tab-badge,
    .bbhg-tab-badge-new,
    .bbhg-tab-badge-algorithm,
    .bbhg-tab-badge-suggest,
    .bbhg-tab-badge-growth,
    .bbhg-tab-badge-calendar,
    .bbhg-tab-badge-entertainment,
    .bbhg-tab-badge-live,
    .bbhg-tab-badge-ai,
    .bbhg-tab-badge-audio,
    .bbhg-tab-badge-forecast,
    .bbhg-tab-badge-predictor {
        display: none !important;
    }
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Predictor HOT Badge */
.bbhg-tab-badge.bbhg-tab-badge-predictor,
.bbhg-tab-badge-predictor {
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.5);
    animation: hotBadgePulse 1.5s ease-in-out infinite;
}

@keyframes hotBadgePulse {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(249, 115, 22, 0.5);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(249, 115, 22, 0.7);
    }
}

/* ================================
   Tab Panels
   ================================ */
.bbhg-tab-panel {
    display: none;
}

.bbhg-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Discover panel is always visible — no animation flicker */
#bbhg-panel-discover.active {
    animation: none;
}

/* Active section panels shown below discover get a top separator */
.bbhg-tab-panel.active:not(#bbhg-panel-discover) {
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--bbhg-gray-200, #e5e7eb);
}

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

/* ================================
   Section Fullscreen Mode
   ================================ */
.bbhg-section-expand-btn {
    position: absolute !important;
    top: 20px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 5 !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s !important;
    opacity: 0.6;
}
.bbhg-tab-panel.active .bbhg-section-expand-btn:hover {
    background: #f5f3ff !important;
    color: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    opacity: 1;
}
.bbhg-tab-panel { position: relative; }

/* Hide header, search, tabs in section fullscreen */
.bbhg-modal-overlay.bbhg-section-fs .bbhg-modal-header,
.bbhg-modal-overlay.bbhg-section-fs .bbhg-slider-container {
    display: none !important;
}
.bbhg-modal-overlay.bbhg-section-fs .bbhg-modal-body {
    padding-top: 56px !important;
}
.bbhg-modal-overlay.bbhg-section-fs .bbhg-tab-panel.active {
    animation: none !important;
    border-top: none !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
.bbhg-modal-overlay.bbhg-section-fs .bbhg-section-expand-btn {
    display: none !important;
}

/* Floating back bar */
#bbhg-section-fs-bar {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 52px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    gap: 12px;
    z-index: 10002;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    margin: 0 !important;
}
#bbhg-section-fs-back {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    background: none !important;
    border: none !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    cursor: pointer !important;
    color: #8b5cf6 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    transition: background 0.2s !important;
    white-space: nowrap;
}
#bbhg-section-fs-back:hover { background: #f5f3ff !important; }
#bbhg-section-fs-title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: #1e293b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#bbhg-section-fs-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    color: #64748b !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s !important;
}
#bbhg-section-fs-close:hover {
    background: #fee2e2 !important;
    color: #ef4444 !important;
}
.bbhg-modal-overlay:not(.bbhg-section-fs) #bbhg-section-fs-bar {
    display: none !important;
}

/* ================================
   Generate Panel
   ================================ */
.bbhg-generate-card {
    background: linear-gradient(135deg, var(--bbhg-gray-100) 0%, var(--bbhg-white) 100%);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    padding: 24px;
}

.bbhg-generate-header {
    margin-bottom: 8px;
}

.bbhg-generate-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-dark);
    line-height: 1.2;
}

.bbhg-generate-hint {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 16px;
    font-weight: 500;
}

.bbhg-input-wrapper {
    display: flex;
    gap: 12px;
}

.bbhg-analyzer-input {
    flex: 1;
    padding: 16px 20px;
    border: 2px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-dark);
    background: var(--bbhg-white);
    transition: all 0.2s;
    font-weight: 500;
}

.bbhg-analyzer-input:focus {
    outline: none;
    border-color: var(--bbhg-primary);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.bbhg-analyzer-input::placeholder {
    color: #1f2937;
    font-weight: 400;
}

.bbhg-analyze-btn {
    width: 56px;
    height: 56px;
    border: none;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-radius: var(--bbhg-radius);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-analyze-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.5);
}

.bbhg-analyze-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.bbhg-analyze-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke-width: 2.5;
}

/* ================================
   Tab-Style Filters
   ================================ */
.bbhg-filter-section {
    margin-bottom: 0;
    position: relative;
}

/* Last filter section gets bottom margin for spacing before content */
#bbhg-panel-trending .bbhg-filter-section:last-of-type {
    margin-bottom: 20px;
}

/* Fade effect on right edge of scrollable platform filters */
.bbhg-filter-section::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    background: linear-gradient(to left, var(--bbhg-gray-100), transparent);
    pointer-events: none;
    border-radius: 0 0 var(--bbhg-radius) 0;
    z-index: 1;
}

/* Hide filter label in trending panel for seamless bar look */
#bbhg-panel-trending .bbhg-filter-label {
    display: none;
}

.bbhg-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bbhg-filter-label svg {
    width: 14px;
    height: 14px;
}

/* Tab-style pills container - horizontal scroll */
.bbhg-tab-filters {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    background: var(--bbhg-gray-100);
    border-radius: 0 0 var(--bbhg-radius) var(--bbhg-radius);
    padding: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox - hide scrollbar */
}

/* When filter section has a visible label above it, reset top corners */
.bbhg-filter-label:not([style*="display: none"]) + .bbhg-tab-filters,
.bbhg-filter-section:not(#bbhg-panel-trending .bbhg-filter-section) .bbhg-tab-filters {
    border-radius: var(--bbhg-radius);
}

/* Hide scrollbar for platform filters */
.bbhg-tab-filters::-webkit-scrollbar {
    display: none;
    height: 0;
}

.bbhg-tab-pill {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bbhg-tab-pill:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
}

.bbhg-tab-pill.active {
    background: var(--bbhg-white);
    color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-sm);
}

/* All platform button - gradient background when active */
.bbhg-tab-pill[data-platform="all"].active {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%);
    color: var(--bbhg-primary);
    border: 2px solid rgba(14, 165, 233, 0.5);
    box-shadow: var(--bbhg-shadow-sm);
    font-weight: 700;
}

/* Facebook styling */
.bbhg-tab-pill[data-platform="facebook"].active {
    background: rgba(24, 119, 242, 0.2);
    color: #1877f2;
    border: 2px solid rgba(24, 119, 242, 0.4);
    font-weight: 700;
}

.bbhg-tab-pill svg {
    width: 16px;
    height: 16px;
}

/* Platform-specific colors when active */
.bbhg-tab-pill[data-platform="instagram"].active {
    background: rgba(228, 64, 95, 0.2);
    color: var(--bbhg-instagram);
    border: 2px solid rgba(228, 64, 95, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="tiktok"].active {
    background: rgba(0, 0, 0, 0.15);
    color: var(--bbhg-tiktok);
    border: 2px solid rgba(0, 0, 0, 0.3);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="twitter"].active {
    background: rgba(29, 161, 242, 0.2);
    color: var(--bbhg-twitter);
    border: 2px solid rgba(29, 161, 242, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="youtube"].active {
    background: rgba(255, 0, 0, 0.15);
    color: var(--bbhg-youtube);
    border: 2px solid rgba(255, 0, 0, 0.3);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="linkedin"].active {
    background: rgba(10, 102, 194, 0.2);
    color: var(--bbhg-linkedin);
    border: 2px solid rgba(10, 102, 194, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="lemmy"].active {
    background: rgba(0, 210, 91, 0.2);
    color: var(--bbhg-lemmy);
    border: 2px solid rgba(0, 210, 91, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="mastodon"].active {
    background: rgba(99, 100, 255, 0.2);
    color: var(--bbhg-mastodon);
    border: 2px solid rgba(99, 100, 255, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="github"].active {
    background: rgba(24, 23, 23, 0.15);
    color: var(--bbhg-github);
    border: 2px solid rgba(24, 23, 23, 0.3);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="hackernews"].active {
    background: rgba(255, 102, 0, 0.2);
    color: var(--bbhg-hackernews);
    border: 2px solid rgba(255, 102, 0, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="medium"].active {
    background: rgba(0, 171, 108, 0.2);
    color: var(--bbhg-medium);
    border: 2px solid rgba(0, 171, 108, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="devto"].active {
    background: rgba(10, 10, 10, 0.15);
    color: var(--bbhg-devto);
    border: 2px solid rgba(10, 10, 10, 0.3);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="pinterest"].active {
    background: rgba(230, 0, 35, 0.2);
    color: var(--bbhg-pinterest);
    border: 2px solid rgba(230, 0, 35, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="tumblr"].active {
    background: rgba(53, 70, 92, 0.2);
    color: var(--bbhg-tumblr);
    border: 2px solid rgba(53, 70, 92, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="dribbble"].active {
    background: rgba(234, 76, 137, 0.2);
    color: var(--bbhg-dribbble);
    border: 2px solid rgba(234, 76, 137, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="reddit"].active {
    background: rgba(255, 69, 0, 0.2);
    color: var(--bbhg-reddit);
    border: 2px solid rgba(255, 69, 0, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="google"].active {
    background: rgba(66, 133, 244, 0.2);
    color: var(--bbhg-google);
    border: 2px solid rgba(66, 133, 244, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="stackoverflow"].active {
    background: rgba(244, 128, 36, 0.2);
    color: var(--bbhg-stackoverflow);
    border: 2px solid rgba(244, 128, 36, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="producthunt"].active {
    background: rgba(218, 85, 47, 0.2);
    color: var(--bbhg-producthunt);
    border: 2px solid rgba(218, 85, 47, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="flickr"].active {
    background: rgba(0, 99, 220, 0.2);
    color: var(--bbhg-flickr);
    border: 2px solid rgba(0, 99, 220, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="codepen"].active {
    background: rgba(30, 31, 38, 0.15);
    color: var(--bbhg-codepen);
    border: 2px solid rgba(30, 31, 38, 0.3);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="behance"].active {
    background: rgba(23, 105, 255, 0.2);
    color: var(--bbhg-behance);
    border: 2px solid rgba(23, 105, 255, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="unsplash"].active {
    background: rgba(17, 17, 17, 0.15);
    color: var(--bbhg-unsplash);
    border: 2px solid rgba(17, 17, 17, 0.3);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="lobsters"].active {
    background: rgba(172, 19, 13, 0.2);
    color: var(--bbhg-lobsters);
    border: 2px solid rgba(172, 19, 13, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="hashnode"].active {
    background: rgba(41, 98, 255, 0.2);
    color: var(--bbhg-hashnode);
    border: 2px solid rgba(41, 98, 255, 0.4);
    font-weight: 700;
}

/* New platform active styles */
.bbhg-tab-pill[data-platform="bluesky"].active {
    background: rgba(0, 133, 255, 0.2);
    color: var(--bbhg-bluesky);
    border: 2px solid rgba(0, 133, 255, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="threads"].active {
    background: rgba(0, 0, 0, 0.15);
    color: var(--bbhg-threads);
    border: 2px solid rgba(0, 0, 0, 0.3);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="pixelfed"].active {
    background: rgba(255, 107, 107, 0.2);
    color: var(--bbhg-pixelfed);
    border: 2px solid rgba(255, 107, 107, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="minds"].active {
    background: rgba(254, 209, 47, 0.25);
    color: #B8960A;
    border: 2px solid rgba(254, 209, 47, 0.5);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="cohost"].active {
    background: rgba(131, 37, 79, 0.2);
    color: var(--bbhg-cohost);
    border: 2px solid rgba(131, 37, 79, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="imgur"].active {
    background: rgba(27, 183, 110, 0.2);
    color: var(--bbhg-imgur);
    border: 2px solid rgba(27, 183, 110, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="instagram"].active,
.bbhg-tab-pill[data-platform="instagram_unique"].active {
    background: rgba(228, 64, 95, 0.2);
    color: var(--bbhg-instagram);
    border: 2px solid rgba(228, 64, 95, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="knowyourmeme"].active {
    background: rgba(25, 179, 84, 0.2);
    color: var(--bbhg-knowyourmeme);
    border: 2px solid rgba(25, 179, 84, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="urbandictionary"].active {
    background: rgba(29, 36, 57, 0.2);
    color: var(--bbhg-urbandictionary);
    border: 2px solid rgba(29, 36, 57, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="genius"].active {
    background: rgba(255, 255, 100, 0.3);
    color: #8B8B00;
    border: 2px solid rgba(255, 255, 100, 0.5);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="billboard"].active {
    background: rgba(211, 31, 38, 0.2);
    color: var(--bbhg-billboard);
    border: 2px solid rgba(211, 31, 38, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="imdb"].active {
    background: rgba(245, 197, 24, 0.25);
    color: #9A7B00;
    border: 2px solid rgba(245, 197, 24, 0.5);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="twitch"].active {
    background: rgba(145, 70, 255, 0.2);
    color: var(--bbhg-twitch);
    border: 2px solid rgba(145, 70, 255, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="spotify"].active {
    background: rgba(29, 185, 84, 0.2);
    color: var(--bbhg-spotify);
    border: 2px solid rgba(29, 185, 84, 0.4);
    font-weight: 700;
}
.bbhg-tab-pill[data-platform="youtube_trending"].active {
    background: rgba(255, 0, 0, 0.2);
    color: var(--bbhg-youtube);
    border: 2px solid rgba(255, 0, 0, 0.4);
    font-weight: 700;
}

/* RapidAPI/YouTube API source buttons - hidden when not configured */
.bbhg-tab-pill.bbhg-rapidapi-source.api-not-configured,
.bbhg-tab-pill.bbhg-youtube-source.api-not-configured {
    display: none !important;
}

/* Show API sources with a subtle indicator when configured */
.bbhg-tab-pill.bbhg-rapidapi-source.api-configured,
.bbhg-tab-pill.bbhg-youtube-source.api-configured {
    position: relative;
}

.bbhg-tab-pill.bbhg-rapidapi-source.api-configured::after,
.bbhg-tab-pill.bbhg-youtube-source.api-configured::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: #10b981;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(16, 185, 129, 0.5);
}

/* Category tabs - scrollable */
.bbhg-category-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    padding: 4px;
    max-height: 140px;
    overflow-y: auto;
}

/* ================================
   Category Bubbles - Horizontal Scroll
   ================================ */
.bbhg-category-bubbles-wrapper {
    position: relative;
    width: 100%;
    margin: 0;
}

.bbhg-category-bubbles {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px 12px 4px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox - hide scrollbar */
}

/* Hide scrollbar for category bubbles */
.bbhg-category-bubbles::-webkit-scrollbar {
    display: none;
    height: 0;
}

.bbhg-category-bubble {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.bbhg-category-bubble:hover {
    background: var(--bbhg-gray-50);
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(14, 165, 233, 0.15);
}

.bbhg-category-bubble.active {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.bbhg-bubble-emoji {
    font-size: 16px;
    line-height: 1;
}

.bbhg-bubble-text {
    font-size: 13px;
    font-weight: 600;
}

/* ================================
   Period Tabs
   ================================ */
.bbhg-period-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius) var(--bbhg-radius) 0 0;
    padding: 4px;
    border: 1px solid var(--bbhg-gray-200);
    border-bottom: none;
}

.bbhg-period-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: none;
    background: transparent;
    border-radius: var(--bbhg-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-period-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
}

.bbhg-period-tab.active {
    background: var(--bbhg-white);
    color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-period-tab svg {
    width: 18px;
    height: 18px;
}

/* ================================
   Period Info
   ================================ */
.bbhg-period-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
    border-radius: 0;
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-top: none;
}

.bbhg-period-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-period-badge.weekly {
    background: linear-gradient(135deg, var(--bbhg-warning) 0%, #fb923c 100%);
}

.bbhg-period-badge.monthly {
    background: linear-gradient(135deg, var(--bbhg-success) 0%, #34d399 100%);
}

.bbhg-period-desc {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    font-weight: 500;
}

/* ================================
   Trending Panel - Unified Connected Bars
   ================================ */
#bbhg-panel-trending .bbhg-period-tabs,
#bbhg-panel-trending .bbhg-period-info,
#bbhg-panel-trending .bbhg-filter-section .bbhg-tab-filters {
    border-radius: 0;
}

#bbhg-panel-trending .bbhg-period-tabs {
    border-radius: var(--bbhg-radius) var(--bbhg-radius) 0 0;
}

#bbhg-panel-trending .bbhg-filter-section .bbhg-tab-filters {
    border-radius: 0 0 var(--bbhg-radius) var(--bbhg-radius);
}

#bbhg-panel-trending .bbhg-period-info {
    border-left: 1px solid var(--bbhg-gray-200);
    border-right: 1px solid var(--bbhg-gray-200);
    border-top: none;
    border-bottom: none;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.06) 0%, rgba(6, 182, 212, 0.06) 100%);
}

#bbhg-panel-trending .bbhg-filter-section {
    margin-bottom: 20px;
}

#bbhg-panel-trending .bbhg-filter-section .bbhg-tab-filters {
    border: 1px solid var(--bbhg-gray-200);
    border-top: none;
}

/* ================================
   Trends Grid
   ================================ */
#bbhg-trends-container {
    min-height: 200px;
}

.bbhg-trending-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 4px;
}

.bbhg-trend-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-trend-card:hover {
    border-color: var(--bbhg-primary);
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
    transform: translateX(4px);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-trend-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    font-weight: 800;
    color: #1f2937;
    flex-shrink: 0;
}

.bbhg-trend-rank.top-3 {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
}

.bbhg-trend-content {
    flex: 1;
    min-width: 0;
}

.bbhg-trend-tag {
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin-bottom: 6px;
}

.bbhg-trend-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #1f2937;
    font-weight: 600;
}

.bbhg-trend-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.bbhg-trend-stat svg {
    width: 12px;
    height: 12px;
}

.bbhg-trend-growth {
    color: var(--bbhg-success);
    font-weight: 700;
}

.bbhg-trend-platform {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.bbhg-trend-platform.youtube {
    background: rgba(255, 0, 0, 0.1);
    color: var(--bbhg-youtube);
}
.bbhg-trend-platform.google {
    background: rgba(66, 133, 244, 0.1);
    color: var(--bbhg-google);
}
.bbhg-trend-platform.reddit {
    background: rgba(255, 69, 0, 0.1);
    color: var(--bbhg-reddit);
}
.bbhg-trend-platform.lemmy {
    background: rgba(0, 210, 91, 0.1);
    color: var(--bbhg-lemmy);
}
.bbhg-trend-platform.mastodon {
    background: rgba(99, 100, 255, 0.1);
    color: var(--bbhg-mastodon);
}
.bbhg-trend-platform.github {
    background: rgba(24, 23, 23, 0.1);
    color: var(--bbhg-github);
}
.bbhg-trend-platform.hackernews {
    background: rgba(255, 102, 0, 0.1);
    color: var(--bbhg-hackernews);
}
.bbhg-trend-platform.medium {
    background: rgba(0, 171, 108, 0.1);
    color: var(--bbhg-medium);
}
.bbhg-trend-platform.devto {
    background: rgba(10, 10, 10, 0.1);
    color: var(--bbhg-devto);
}
.bbhg-trend-platform.pinterest {
    background: rgba(230, 0, 35, 0.1);
    color: var(--bbhg-pinterest);
}
.bbhg-trend-platform.tumblr {
    background: rgba(53, 70, 92, 0.1);
    color: var(--bbhg-tumblr);
}
.bbhg-trend-platform.dribbble {
    background: rgba(234, 76, 137, 0.1);
    color: var(--bbhg-dribbble);
}
.bbhg-trend-platform.stackoverflow {
    background: rgba(244, 128, 36, 0.1);
    color: var(--bbhg-stackoverflow);
}
.bbhg-trend-platform.producthunt {
    background: rgba(218, 85, 47, 0.1);
    color: var(--bbhg-producthunt);
}
.bbhg-trend-platform.flickr {
    background: rgba(0, 99, 220, 0.1);
    color: var(--bbhg-flickr);
}
.bbhg-trend-platform.codepen {
    background: rgba(30, 31, 38, 0.1);
    color: var(--bbhg-codepen);
}
.bbhg-trend-platform.behance {
    background: rgba(23, 105, 255, 0.1);
    color: var(--bbhg-behance);
}
.bbhg-trend-platform.unsplash {
    background: rgba(17, 17, 17, 0.1);
    color: var(--bbhg-unsplash);
}
.bbhg-trend-platform.lobsters {
    background: rgba(172, 19, 13, 0.1);
    color: var(--bbhg-lobsters);
}
.bbhg-trend-platform.hashnode {
    background: rgba(41, 98, 255, 0.1);
    color: var(--bbhg-hashnode);
}

/* New platform label styles */
.bbhg-trend-platform.bluesky {
    background: rgba(0, 133, 255, 0.1);
    color: var(--bbhg-bluesky);
}
.bbhg-trend-platform.threads {
    background: rgba(0, 0, 0, 0.08);
    color: var(--bbhg-threads);
}
.bbhg-trend-platform.pixelfed {
    background: rgba(255, 107, 107, 0.1);
    color: var(--bbhg-pixelfed);
}
.bbhg-trend-platform.minds {
    background: rgba(254, 209, 47, 0.15);
    color: #B8960A;
}
.bbhg-trend-platform.cohost {
    background: rgba(131, 37, 79, 0.1);
    color: var(--bbhg-cohost);
}
.bbhg-trend-platform.imgur {
    background: rgba(27, 183, 110, 0.1);
    color: var(--bbhg-imgur);
}
.bbhg-trend-platform.instagram,
.bbhg-trend-platform.instagram_unique {
    background: rgba(228, 64, 95, 0.1);
    color: var(--bbhg-instagram);
}
.bbhg-trend-platform.youtube_trending {
    background: rgba(255, 0, 0, 0.1);
    color: var(--bbhg-youtube);
}
.bbhg-trend-platform.knowyourmeme {
    background: rgba(25, 179, 84, 0.1);
    color: var(--bbhg-knowyourmeme);
}
.bbhg-trend-platform.urbandictionary {
    background: rgba(29, 36, 57, 0.1);
    color: var(--bbhg-urbandictionary);
}
.bbhg-trend-platform.genius {
    background: rgba(255, 255, 100, 0.2);
    color: #8B8B00;
}
.bbhg-trend-platform.billboard {
    background: rgba(211, 31, 38, 0.1);
    color: var(--bbhg-billboard);
}
.bbhg-trend-platform.imdb {
    background: rgba(245, 197, 24, 0.15);
    color: #9A7B00;
}
.bbhg-trend-platform.twitch {
    background: rgba(145, 70, 255, 0.1);
    color: var(--bbhg-twitch);
}
.bbhg-trend-platform.spotify {
    background: rgba(29, 185, 84, 0.1);
    color: var(--bbhg-spotify);
}

/* Platform Stats Details */
.bbhg-platform-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--bbhg-gray-200);
}

.bbhg-platform-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #1f2937;
    background: var(--bbhg-gray-100);
    padding: 3px 8px;
    border-radius: 4px;
}

.bbhg-platform-stat-item svg {
    width: 11px;
    height: 11px;
}

.bbhg-platform-stat-item.engagement {
    color: var(--bbhg-primary);
}

.bbhg-platform-stat-item.reach {
    color: var(--bbhg-success);
}

.bbhg-platform-stat-item.competition {
    color: var(--bbhg-warning);
}

/* ================================
   Search Results
   ================================ */
.bbhg-results {
    margin-top: 20px;
}

.bbhg-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-results-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-dark);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: #000;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.bbhg-copy-all-btn {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.5);
}

.bbhg-copy-all-btn svg {
    width: 14px;
    height: 14px;
}

.bbhg-results-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 4px;
}

.bbhg-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-result-item:hover {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-color: transparent;
    transform: translateX(4px);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-result-item:hover .bbhg-result-tag,
.bbhg-result-item:hover .bbhg-result-stats,
.bbhg-result-item:hover .bbhg-result-meta,
.bbhg-result-item:hover .bbhg-result-reason {
    color: white;
}

.bbhg-result-item:active,
.bbhg-result-item.selected {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-color: transparent;
    transform: translateX(4px);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-result-item:active .bbhg-result-tag,
.bbhg-result-item:active .bbhg-result-stats,
.bbhg-result-item:active .bbhg-result-meta,
.bbhg-result-item:active .bbhg-result-reason,
.bbhg-result-item.selected .bbhg-result-tag,
.bbhg-result-item.selected .bbhg-result-stats,
.bbhg-result-item.selected .bbhg-result-meta,
.bbhg-result-item.selected .bbhg-result-reason {
    color: white;
}

.bbhg-result-item:active .bbhg-result-rank,
.bbhg-result-item.selected .bbhg-result-rank {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.bbhg-result-item:active .bbhg-platform-stat-item,
.bbhg-result-item.selected .bbhg-platform-stat-item {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.bbhg-result-item:active .bbhg-platform-stats,
.bbhg-result-item.selected .bbhg-platform-stats {
    border-top-color: rgba(255, 255, 255, 0.2);
}

.bbhg-result-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    font-weight: 800;
    color: #1f2937;
    flex-shrink: 0;
}

.bbhg-result-info {
    flex: 1;
    min-width: 0;
}

.bbhg-result-tag {
    font-weight: 700;
    font-size: 14px;
    color: var(--bbhg-dark);
    margin-bottom: 4px;
}

.bbhg-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    color: #1f2937;
    font-weight: 600;
    margin-bottom: 6px;
}

.bbhg-result-category {
    background: var(--bbhg-primary);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
}

/* Category badges with different colors */
.bbhg-result-category[data-category*="niche"],
.bbhg-result-category.niche,
.bbhg-result-category[data-category*="ai niche"],
.bbhg-result-category.ai-niche {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.bbhg-result-category[data-category*="broad"],
.bbhg-result-category.broad,
.bbhg-result-category[data-category*="ai broad"],
.bbhg-result-category.ai-broad {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.bbhg-result-category[data-category*="community"],
.bbhg-result-category.community,
.bbhg-result-category[data-category*="ai community"],
.bbhg-result-category.ai-community {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bbhg-result-category[data-category*="trending"],
.bbhg-result-category.trending,
.bbhg-result-category[data-category*="ai trending"],
.bbhg-result-category.ai-trending {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.bbhg-result-category[data-category*="universal"],
.bbhg-result-category.universal,
.bbhg-result-category[data-category*="ai universal"],
.bbhg-result-category.ai-universal {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bbhg-result-category[data-category*="suggested"],
.bbhg-result-category.suggested,
.bbhg-result-category[data-category*="ai suggested"],
.bbhg-result-category.ai-suggested {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

.bbhg-result-reason {
    font-size: 12px;
    color: #1f2937;
    font-style: italic;
    margin-bottom: 6px;
    line-height: 1.4;
    padding-left: 2px;
}

.bbhg-result-stats {
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ================================
   Loading & Empty States
   ================================ */
.bbhg-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
}

.bbhg-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--bbhg-gray-200);
    border-top-color: var(--bbhg-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.bbhg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-empty-state svg {
    width: 56px;
    height: 56px;
    color: #374151;
    stroke-width: 1.5;
}

.bbhg-empty-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bbhg-dark);
}

.bbhg-empty-text {
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

/* Saved Panel */
.bbhg-saved-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-saved-item {
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-dark);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-saved-item:hover {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-color: transparent;
    color: white;
}

/* ================================
   Toast
   ================================ */
.bbhg-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bbhg-dark);
    color: white;
    padding: 14px 28px;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    z-index: 9999999;
    box-shadow: var(--bbhg-shadow-xl);
    animation: toastIn 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-toast svg {
    width: 18px;
    height: 18px;
    color: var(--bbhg-success);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* ================================
   Responsive
   ================================ */
@media (min-width: 640px) {
    .bbhg-trending-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .bbhg-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .bbhg-modal {
        max-height: 95vh;
        border-radius: var(--bbhg-radius-xl) var(--bbhg-radius-xl) 0 0;
    }
    
    .bbhg-modal-handle {
        display: block;
        width: 36px;
        height: 4px;
        background: var(--bbhg-gray-300);
        border-radius: 2px;
        margin: 10px auto 6px;
    }
    
    .bbhg-tabs {
        gap: 4px;
    }
    
    .bbhg-tab {
        padding: 0;
        font-size: 13px;
    }
    
    .bbhg-tab-text {
        display: inline; /* Show text labels on mobile */
    }
    
    .bbhg-period-tabs {
        flex-wrap: wrap;
    }
    
    .bbhg-period-tab {
        flex: 1 1 30%;
        min-width: 0;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .bbhg-period-tab span {
        display: inline; /* Show text labels on mobile */
    }
    
    .bbhg-tab-filters {
        gap: 4px;
    }
    
    .bbhg-tab-pill {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-category-bubble {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .bbhg-bubble-emoji {
        font-size: 14px;
    }
    
    .bbhg-bubble-text {
        font-size: 12px;
    }
    
    .bbhg-modal-title {
        font-size: 17px;
    }
    
    .bbhg-modal-subtitle {
        font-size: 12px;
    }
    
    .bbhg-trending-grid {
        grid-template-columns: 1fr;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Scrollbar styling */
.bbhg-trending-grid::-webkit-scrollbar,
.bbhg-results-list::-webkit-scrollbar,
.bbhg-category-tabs::-webkit-scrollbar {
    width: 6px;
}

.bbhg-trending-grid::-webkit-scrollbar-track,
.bbhg-results-list::-webkit-scrollbar-track,
.bbhg-category-tabs::-webkit-scrollbar-track {
    background: var(--bbhg-gray-100);
    border-radius: 3px;
}

.bbhg-trending-grid::-webkit-scrollbar-thumb,
.bbhg-results-list::-webkit-scrollbar-thumb,
.bbhg-category-tabs::-webkit-scrollbar-thumb {
    background: var(--bbhg-gray-300);
    border-radius: 3px;
}

.bbhg-trending-grid::-webkit-scrollbar-thumb:hover,
.bbhg-results-list::-webkit-scrollbar-thumb:hover,
.bbhg-category-tabs::-webkit-scrollbar-thumb:hover {
    background: var(--bbhg-gray-400);
}

/* ================================
   Live Trends Styles
   ================================ */

/* Live tab special styling */
.bbhg-period-tab.bbhg-live-tab {
    position: relative;
}

.bbhg-live-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    animation: bbhg-pulse 2s infinite;
}

@keyframes bbhg-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.bbhg-period-tab.bbhg-live-tab.active .bbhg-live-dot {
    background: #22c55e;
}

/* Live Sources Section */
.bbhg-live-sources {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid var(--bbhg-primary-light);
    border-radius: var(--bbhg-radius);
    padding: 12px 16px;
    margin-bottom: 16px;
}

.bbhg-sources-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bbhg-sources-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

/* Refresh Actions Container */
.bbhg-refresh-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* Base Refresh Button */
.bbhg-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    padding: 8px 14px;
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* Quick Refresh - Primary Style */
.bbhg-refresh-quick {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-primary-dark) 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.bbhg-refresh-quick:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* Full Refresh - Secondary Style */
.bbhg-refresh-full {
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-700);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-refresh-full:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-900);
}

.bbhg-refresh-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.bbhg-refresh-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.bbhg-refresh-btn.loading svg {
    animation: bbhg-spin 0.8s linear infinite;
}

@keyframes bbhg-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Mobile: Stack buttons on small screens */
@media (max-width: 600px) {
    .bbhg-refresh-actions {
        flex-direction: column;
        gap: 6px;
        width: 100%;
        margin-top: 10px;
    }
    
    /* Hide ALL refresh buttons on mobile */
    .bbhg-refresh-btn,
    .bbhg-refresh-actions,
    .bbhg-refresh-quick,
    .bbhg-refresh-full,
    .bbhg-refresh-news,
    .bbhg-refresh-videos,
    #bbhg-refresh-quick,
    #bbhg-refresh-full,
    #bbhg-refresh-news,
    #bbhg-refresh-videos,
    #bbhg-refresh-searches,
    button[class*="bbhg-refresh"] {
        display: none !important;
        visibility: hidden !important;
    }
    
    .bbhg-period-info {
        flex-direction: column;
        align-items: flex-start !important;
    }
}

/* Legacy support */
.bbhg-refresh-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bbhg-primary);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-refresh-live-btn:hover {
    background: var(--bbhg-primary-dark);
    transform: translateY(-1px);
}

.bbhg-refresh-live-btn svg {
    width: 14px;
    height: 14px;
}

.bbhg-refresh-live-btn.loading svg {
    animation: bbhg-spin 1s linear infinite;
}

.bbhg-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-source-badge.bbhg-source-active {
    border-color: var(--bbhg-success);
    color: var(--bbhg-success);
    background: #f0fdf4;
}

.bbhg-source-badge.bbhg-source-error {
    border-color: var(--bbhg-error);
    color: var(--bbhg-error);
    background: #fef2f2;
}

.bbhg-source-badge.bbhg-source-loading {
    border-color: var(--bbhg-warning);
    color: var(--bbhg-warning);
    background: #fffbeb;
}

.bbhg-source-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Live trend card styling */
.bbhg-trend-card[data-period="live"] {
    border-left: 3px solid var(--bbhg-success);
}

.bbhg-trend-card[data-period="live"] .bbhg-trend-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-trend-card[data-period="live"] .bbhg-trend-source::before {
    content: "📡";
    font-size: 10px;
}

/* Google source color */
.bbhg-source-badge[data-source="google"].bbhg-source-active {
    border-color: #4285f4;
    color: #4285f4;
    background: #e8f0fe;
}

/* Platform-specific source colors */
.bbhg-source-badge[data-source="tiktok"].bbhg-source-active {
    border-color: #000000;
    color: #000000;
    background: #f5f5f5;
}

.bbhg-source-badge[data-source="instagram"].bbhg-source-active {
    border-color: #E4405F;
    color: #E4405F;
    background: #fce7eb;
}

.bbhg-source-badge[data-source="twitter"].bbhg-source-active {
    border-color: #1DA1F2;
    color: #1DA1F2;
    background: #e8f5fd;
}

.bbhg-source-badge[data-source="youtube"].bbhg-source-active {
    border-color: #FF0000;
    color: #FF0000;
    background: #fee2e2;
}

/* New platform source badges */
.bbhg-source-badge[data-source="bluesky"].bbhg-source-active {
    border-color: #0085FF;
    color: #0085FF;
    background: #e6f3ff;
}

.bbhg-source-badge[data-source="threads"].bbhg-source-active {
    border-color: #000000;
    color: #000000;
    background: #f5f5f5;
}

.bbhg-source-badge[data-source="pixelfed"].bbhg-source-active {
    border-color: #FF6B6B;
    color: #FF6B6B;
    background: #ffe8e8;
}

.bbhg-source-badge[data-source="minds"].bbhg-source-active {
    border-color: #FED12F;
    color: #B8960A;
    background: #fef9e6;
}

.bbhg-source-badge[data-source="cohost"].bbhg-source-active {
    border-color: #83254F;
    color: #83254F;
    background: #f8e8ef;
}

.bbhg-source-badge[data-source="imgur"].bbhg-source-active {
    border-color: #1BB76E;
    color: #1BB76E;
    background: #e6f9f0;
}

.bbhg-source-badge[data-source="instagram_unique"].bbhg-source-active {
    border-color: #E4405F;
    color: #E4405F;
    background: #fce7eb;
}

.bbhg-source-badge[data-source="knowyourmeme"].bbhg-source-active {
    border-color: #19B354;
    color: #19B354;
    background: #e6f9ed;
}

.bbhg-source-badge[data-source="urbandictionary"].bbhg-source-active {
    border-color: #1D2439;
    color: #1D2439;
    background: #e9eaed;
}

.bbhg-source-badge[data-source="genius"].bbhg-source-active {
    border-color: #FFFF64;
    color: #8B8B00;
    background: #ffffd4;
}

.bbhg-source-badge[data-source="billboard"].bbhg-source-active {
    border-color: #D31F26;
    color: #D31F26;
    background: #fce8e9;
}

.bbhg-source-badge[data-source="imdb"].bbhg-source-active {
    border-color: #F5C518;
    color: #9A7B00;
    background: #fef8e6;
}

.bbhg-source-badge[data-source="twitch"].bbhg-source-active {
    border-color: #9146FF;
    color: #9146FF;
    background: #f0e6ff;
}

.bbhg-source-badge[data-source="spotify"].bbhg-source-active {
    border-color: #1DB954;
    color: #1DB954;
    background: #e6f9ed;
}

.bbhg-source-badge[data-source="youtube_trending"].bbhg-source-active {
    border-color: #FF0000;
    color: #FF0000;
    background: #fee2e2;
}

.bbhg-source-badge[data-source="reddit"].bbhg-source-active {
    border-color: #FF4500;
    color: #FF4500;
    background: #ffede6;
}

.bbhg-source-badge[data-source="lemmy"].bbhg-source-active {
    border-color: #00D25B;
    color: #00D25B;
    background: #e6fbef;
}

.bbhg-source-badge[data-source="mastodon"].bbhg-source-active {
    border-color: #6364FF;
    color: #6364FF;
    background: #eeeeff;
}

.bbhg-source-badge[data-source="github"].bbhg-source-active {
    border-color: #181717;
    color: #181717;
    background: #f0f0f0;
}

.bbhg-source-badge[data-source="hackernews"].bbhg-source-active {
    border-color: #FF6600;
    color: #FF6600;
    background: #fff0e6;
}

.bbhg-source-badge[data-source="medium"].bbhg-source-active {
    border-color: #00AB6C;
    color: #00AB6C;
    background: #e6f7f0;
}

.bbhg-source-badge[data-source="devto"].bbhg-source-active {
    border-color: #0A0A0A;
    color: #0A0A0A;
    background: #f0f0f0;
}

.bbhg-source-badge[data-source="pinterest"].bbhg-source-active {
    border-color: #E60023;
    color: #E60023;
    background: #fce6e9;
}

.bbhg-source-badge[data-source="tumblr"].bbhg-source-active {
    border-color: #35465C;
    color: #35465C;
    background: #eaedf0;
}

.bbhg-source-badge[data-source="dribbble"].bbhg-source-active {
    border-color: #EA4C89;
    color: #EA4C89;
    background: #fdeaf2;
}

.bbhg-source-badge[data-source="stackoverflow"].bbhg-source-active {
    border-color: #F48024;
    color: #F48024;
    background: #fef3e8;
}

.bbhg-source-badge[data-source="producthunt"].bbhg-source-active {
    border-color: #DA552F;
    color: #DA552F;
    background: #fcebe6;
}

.bbhg-source-badge[data-source="flickr"].bbhg-source-active {
    border-color: #0063DC;
    color: #0063DC;
    background: #e6f0fc;
}

.bbhg-source-badge[data-source="codepen"].bbhg-source-active {
    border-color: #1E1F26;
    color: #1E1F26;
    background: #ebebed;
}

.bbhg-source-badge[data-source="behance"].bbhg-source-active {
    border-color: #1769FF;
    color: #1769FF;
    background: #e8f0ff;
}

.bbhg-source-badge[data-source="unsplash"].bbhg-source-active {
    border-color: #111111;
    color: #111111;
    background: #f0f0f0;
}

.bbhg-source-badge[data-source="lobsters"].bbhg-source-active {
    border-color: #AC130D;
    color: #AC130D;
    background: #fce7e6;
}

.bbhg-source-badge[data-source="hashnode"].bbhg-source-active {
    border-color: #2962FF;
    color: #2962FF;
    background: #e8eeff;
}

/* Needs API key indicator */
.bbhg-source-badge.bbhg-source-needs-key {
    border-color: var(--bbhg-gray-300);
    color: #374151;
    background: var(--bbhg-gray-100);
}

.bbhg-source-badge.bbhg-source-needs-key::after {
    content: "🔑";
    font-size: 10px;
    margin-left: 4px;
}

/* ================================
   Floating Action Button (FAB)
   ================================ */
.bbhg-floating-button {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999998;
    animation: bbhg-fab-entrance 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes bbhg-fab-entrance {
    from {
        transform: scale(0) rotate(-180deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

.bbhg-fab {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4), 
                0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden;
}

.bbhg-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

.bbhg-fab:hover::before {
    opacity: 1;
}

.bbhg-fab:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.5), 
                0 4px 10px rgba(0, 0, 0, 0.2);
}

.bbhg-fab:active {
    transform: scale(0.95);
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
}

.bbhg-fab svg {
    position: absolute;
    width: 18px;
    height: 18px;
    stroke: white;
    opacity: 0.3;
    transition: all 0.3s;
}

.bbhg-fab:hover svg {
    opacity: 0.5;
    transform: scale(1.1);
}

.bbhg-fab-text {
    position: relative;
    font-size: 22px;
    font-weight: 800;
    color: white !important;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.bbhg-fab:hover .bbhg-fab-text {
    transform: scale(1.15) rotate(-5deg);
    color: white !important;
}

.bbhg-fab:active .bbhg-fab-text {
    color: white !important;
}

.bbhg-fab.active .bbhg-fab-text {
    color: white !important;
}

/* Pulse animation when idle */
@keyframes bbhg-fab-pulse {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(14, 165, 233, 0.4), 
                    0 4px 12px rgba(0, 0, 0, 0.15);
    }
    50% {
        box-shadow: 0 8px 24px rgba(14, 165, 233, 0.6), 
                    0 4px 12px rgba(0, 0, 0, 0.2),
                    0 0 0 8px rgba(14, 165, 233, 0.2);
    }
}

.bbhg-fab {
    animation: bbhg-fab-pulse 3s ease-in-out infinite;
}

.bbhg-fab:hover {
    animation: none;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .bbhg-floating-button {
        bottom: 20px;
        right: 20px;
    }
    
    .bbhg-fab {
        width: 38px;
        height: 38px;
    }
    
    .bbhg-fab svg {
        width: 16px;
        height: 16px;
    }
    
    .bbhg-fab-text {
        font-size: 20px;
        color: white !important;
    }
    
    .bbhg-fab:active .bbhg-fab-text,
    .bbhg-fab.active .bbhg-fab-text {
        color: white !important;
    }
}

/* Hide FAB when modal is open */
.bbhg-modal-overlay.active ~ .bbhg-floating-button {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8);
}


/* ===== NEWS TAB STYLES ===== */

/* ===== SCROLL INDICATOR SYSTEM ===== */
/* Wrapper clips content, pseudo-elements show scroll hint */

/* Base wrapper - MUST NOT scroll, clips content */
.bbhg-scrollable-container {
    position: relative !important;
    overflow: hidden !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

/* Completely hide the HTML scroll indicator element */
.bbhg-scrollable-container > .bbhg-scroll-indicator,
.bbhg-scroll-indicator {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* Fade gradient on right edge */
.bbhg-scrollable-container::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 50px !important;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 60%) !important;
    pointer-events: none !important;
    z-index: 100 !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
}

/* Arrow indicator */
.bbhg-scrollable-container::before {
    content: '›' !important;
    display: block !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    color: #64748b !important;
    pointer-events: none !important;
    z-index: 101 !important;
    animation: bbhg-arrow-pulse 1.5s ease-in-out infinite !important;
}

@keyframes bbhg-arrow-pulse {
    0%, 100% { 
        transform: translateY(-50%) translateX(0); 
        opacity: 0.4; 
    }
    50% { 
        transform: translateY(-50%) translateX(5px); 
        opacity: 1; 
    }
}

/* When fully scrolled, hide the indicators */
.bbhg-scrollable-container.scrolled-end::after,
.bbhg-scrollable-container.scrolled-end::before {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ===== NEWS FILTERS SECTION ===== */
.bbhg-news-filters-wrapper {
    position: relative !important;
    overflow: visible !important;
    padding-bottom: 16px !important;
    padding-top: 12px !important;
    margin: 0 !important;
    margin-top: -4px !important;
}

/* Override scrollable-container overflow for news filters */
.bbhg-news-filters-wrapper.bbhg-scrollable-container {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* The scrollable filter buttons */
.bbhg-news-filters-wrapper > .bbhg-news-filters,
.bbhg-news-filters-wrapper .bbhg-news-filters {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: scroll !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 55px !important;
    padding-bottom: 8px !important;
    padding-top: 6px !important;
    scroll-behavior: smooth !important;
}

.bbhg-news-filters-wrapper .bbhg-news-filters::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===== NEWS SOURCES SECTION ===== */
.bbhg-news-sources-wrapper {
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

/* The scrollable source pills */
.bbhg-news-sources-wrapper > .bbhg-news-sources,
.bbhg-news-sources-wrapper .bbhg-news-sources {
    flex: 1 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 55px !important;
    scroll-behavior: smooth !important;
    min-width: 0 !important;
}

.bbhg-news-sources-wrapper .bbhg-news-sources::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* ===== TRENDING TAGS SECTION ===== */
.bbhg-trending-tags-filter {
    position: relative !important;
    overflow: hidden !important;
}

/* Gray background for this section */
.bbhg-trending-tags-filter::after {
    background: linear-gradient(to right, rgba(243,244,246,0) 0%, rgba(243,244,246,1) 60%) !important;
}

.bbhg-trending-tags-filter > .bbhg-trending-tags-pills,
.bbhg-trending-tags-filter .bbhg-trending-tags-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-right: 45px !important;
    scroll-behavior: smooth !important;
    /* Fix scroll bounce/stick issue */
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
}

.bbhg-trending-tags-filter .bbhg-trending-tags-pills::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Ensure pills don't shrink */
.bbhg-trending-tags-pills .bbhg-tag-pill {
    flex-shrink: 0 !important;
}

.bbhg-news-filters {
    display: flex;
    gap: 8px;
    padding-right: 24px;
    touch-action: pan-x !important;
    overscroll-behavior-x: contain !important;
}

.bbhg-news-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0 !important;
}

.bbhg-news-filter:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
}

.bbhg-news-filter.active {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-news-filter svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* News Sort Tabs */
/* Trending Tags Filter */
.bbhg-trending-tags-filter {
    padding: 14px 20px;
    margin-top: 12px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
}

.bbhg-trending-tags-filter label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.bbhg-trending-tags-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-right: 30px; /* Space for scroll indicator */
}

/* Hide scrollbar completely */
.bbhg-trending-tags-pills::-webkit-scrollbar {
    display: none;
    height: 0;
}

/* Adjust scroll indicator position for trending tags */
.bbhg-trending-tags-filter .bbhg-scroll-indicator {
    top: auto;
    bottom: 14px;
    transform: none;
    background: linear-gradient(90deg, transparent, var(--bbhg-gray-100) 30%);
}

.bbhg-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-tag-pill:hover {
    background: var(--bbhg-gray-100);
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-tag-pill.active {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, #dc2626 100%);
    color: white !important;
    border-color: var(--bbhg-primary);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}

.bbhg-tag-pill .bbhg-tag-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
}

.bbhg-tag-pill.active .bbhg-tag-count {
    background: rgba(255, 255, 255, 0.25);
}

/* Region Filter */
.bbhg-region-filter {
    padding: 12px 20px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-region-filter label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.bbhg-region-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-region-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-region-pill:hover {
    background: var(--bbhg-gray-100);
    border-color: #3b82f6;
    color: #3b82f6;
}

.bbhg-region-pill.active {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white !important;
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}

/* News Source Filters - OLD RULES REMOVED, see SCROLL INDICATOR SYSTEM above */
/* .bbhg-news-sources-wrapper is defined in the scroll indicator section */

.bbhg-source-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-source-label svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.bbhg-news-sources {
    display: flex;
    gap: 6px;
    min-width: max-content;
    padding-right: 24px;
}

.bbhg-source-pill {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-source-pill:hover {
    background: var(--bbhg-gray-100);
    border-color: var(--bbhg-gray-300);
    color: var(--bbhg-gray-700);
}

.bbhg-source-pill.active {
    background: var(--bbhg-primary);
    color: red;
    border-color: var(--bbhg-primary);
    box-shadow: 0 2px 6px -2px rgba(14, 165, 233, 0.4);
}

/* News Info Bar */
.bbhg-news-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
}

.bbhg-news-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-news-desc {
    flex: 1;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-refresh-news {
    padding: 8px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-refresh-news:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-refresh-news svg {
    width: 16px;
    height: 16px;
    stroke: var(--bbhg-gray-600);
}

.bbhg-refresh-news.loading svg {
    animation: spin 1s linear infinite;
}

/* News Container */
#bbhg-news-container {
    min-height: 200px;
}

/* News Grid Layout */
.bbhg-news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* News Card */
.bbhg-news-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    transition: all 0.2s ease;
}

.bbhg-news-card:hover {
    border-color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-md);
    transform: translateY(-2px);
}

.bbhg-news-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bbhg-news-source {
    font-size: 12px;
    font-weight: 700;
    color: var(--bbhg-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-news-time {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-news-card .bbhg-news-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-dark);
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-news-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.bbhg-news-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-news-stat svg {
    stroke: var(--bbhg-gray-400);
}

/* News Hashtags */
.bbhg-news-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.bbhg-news-hashtag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--bbhg-gray-100) 0%, var(--bbhg-gray-200) 100%);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-news-hashtag:hover {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    transform: scale(1.05);
}

/* Read Article Link */
.bbhg-news-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbhg-news-link:hover {
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
    transform: translateY(-1px);
}

.bbhg-news-link svg {
    stroke: white;
}

/* News Empty State */
.bbhg-news-empty {
    text-align: center;
    padding: 60px 20px;
    color: #1f2937;
}

.bbhg-news-empty svg {
    stroke: var(--bbhg-gray-400);
    margin-bottom: 16px;
}

.bbhg-news-empty h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
}

.bbhg-news-empty p {
    font-size: 14px;
}

/* Mobile responsive for news */
@media (max-width: 480px) {
    .bbhg-news-card {
        padding: 16px;
    }
    
    .bbhg-news-card .bbhg-news-title {
        font-size: 15px;
    }
    
    .bbhg-news-hashtags {
        gap: 6px;
    }
    
    .bbhg-news-hashtag {
        padding: 4px 10px;
        font-size: 12px;
    }
}

/* ===== GROWTH TRACKER TAB STYLES ===== */
.bbhg-growth-content {
    padding: 10px 0;
}

.bbhg-growth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #d946ef 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 24px;
    color: white;
}

.bbhg-growth-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-growth-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-growth-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-growth-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-growth-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-growth-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

.bbhg-status-ai {
    background: #a855f7;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.6);
}

.bbhg-tab-badge-ai {
    background: linear-gradient(135deg, #8b5cf6, #d946ef) !important;
    color: white !important;
}

/* Growth Simulator */
.bbhg-growth-simulator {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-growth-simulator-header {
    margin-bottom: 20px;
}

.bbhg-growth-simulator-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-growth-simulator-header p {
    margin: 0;
    font-size: 14px;
    color: #1f2937;
}

.bbhg-growth-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-growth-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-growth-input-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-growth-select,
.bbhg-growth-input {
    padding: 10px 14px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 8px;
    font-size: 14px;
    color: var(--bbhg-gray-900);
    background: var(--bbhg-white);
    transition: all 0.2s ease;
}

.bbhg-growth-select:focus,
.bbhg-growth-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-growth-simulate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
    color: #ffffff !important;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bbhg-growth-simulate-btn svg {
    stroke: #ffffff !important;
}

.bbhg-growth-simulate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

/* Growth Results */
.bbhg-growth-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-growth-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bbhg-growth-results-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6, #d946ef);
    color: #000;
    font-size: 11px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Projection Cards */
.bbhg-growth-projections {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-projection-card {
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.bbhg-projection-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.bbhg-projection-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bbhg-projection-label {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-projection-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--bbhg-gray-900);
}

.bbhg-projection-change {
    font-size: 13px;
    font-weight: 600;
    color: #10b981;
}

.bbhg-projection-followers .bbhg-projection-card {
    border-color: #8b5cf6;
}

/* Growth Chart */
.bbhg-growth-chart-container {
    margin-bottom: 24px;
}

.bbhg-growth-chart-container h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-growth-chart {
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    padding: 20px;
    height: 250px;
}

#bbhg-growth-canvas {
    width: 100% !important;
    height: 100% !important;
}

/* AI Insights */
.bbhg-growth-ai-insights {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(217, 70, 239, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.bbhg-ai-insights-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
    color: #8b5cf6;
}

.bbhg-ai-insights-content {
    color: var(--bbhg-gray-700);
    font-size: 14px;
    line-height: 1.7;
}

.bbhg-ai-insights-content ul {
    margin: 0;
    padding-left: 20px;
}

.bbhg-ai-insights-content li {
    margin-bottom: 8px;
}

.bbhg-ai-insights-content strong {
    color: var(--bbhg-gray-900);
}

/* Recommended Hashtags */
.bbhg-growth-recommended {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.bbhg-recommended-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-recommended-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-copy-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-copy-all-btn:hover {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-recommended-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-recommended-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-recommended-tag:hover {
    background: #8b5cf6;
    border-color: #8b5cf6;
    color: white;
}

/* Growth Actions */
.bbhg-growth-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Growth Loading */
.bbhg-growth-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-growth-loading p {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-loading-substep {
    font-size: 13px;
    color: #1f2937;
}

/* Milestones Section */
.bbhg-growth-milestones {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-milestones-header {
    margin-bottom: 20px;
}

.bbhg-milestones-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-milestones-header p {
    margin: 0;
    font-size: 14px;
    color: #1f2937;
}

.bbhg-milestones-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.bbhg-milestone-card {
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bbhg-milestone-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.bbhg-milestone-card.achieved {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(217, 70, 239, 0.1));
    border-color: #8b5cf6;
}

.bbhg-milestone-badge {
    font-size: 32px;
    margin-bottom: 8px;
}

.bbhg-milestone-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.bbhg-milestone-count {
    font-size: 20px;
    font-weight: 800;
    color: var(--bbhg-gray-900);
}

.bbhg-milestone-label {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
}

.bbhg-milestone-tip {
    font-size: 11px;
    color: #1f2937;
    line-height: 1.4;
}

/* Growth Tips Accordion */
.bbhg-growth-tips {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 24px;
}

.bbhg-tips-header {
    margin-bottom: 20px;
}

.bbhg-tips-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-tips-accordion {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-tip-item {
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 10px;
    overflow: hidden;
}

.bbhg-tip-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    background: var(--bbhg-gray-50);
    border: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tip-toggle:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-tip-toggle.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(217, 70, 239, 0.1));
    color: #8b5cf6;
}

.bbhg-tip-toggle svg {
    transition: transform 0.3s ease;
}

.bbhg-tip-toggle.active svg {
    transform: rotate(180deg);
}

.bbhg-tip-content {
    display: none;
    padding: 16px;
    background: var(--bbhg-white);
}

.bbhg-tip-content.active {
    display: block;
}

.bbhg-tip-content ul {
    margin: 0;
    padding-left: 20px;
}

.bbhg-tip-content li {
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
}

.bbhg-tip-content li:last-child {
    margin-bottom: 0;
}

.bbhg-tip-content strong {
    color: var(--bbhg-gray-900);
}

/* Growth Tracker Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-growth-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    
    .bbhg-growth-title {
        gap: 10px;
    }
    
    .bbhg-growth-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .bbhg-growth-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .bbhg-growth-title h2 {
        font-size: 18px;
    }
    
    .bbhg-growth-inputs {
        grid-template-columns: 1fr;
    }
    
    .bbhg-growth-projections {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-milestones-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-projection-value {
        font-size: 20px;
    }
    
    .bbhg-growth-actions {
        flex-direction: column;
    }
    
    .bbhg-growth-actions .bbhg-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bbhg-milestones-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .bbhg-milestone-badge {
        font-size: 24px;
    }
    
    .bbhg-milestone-count {
        font-size: 18px;
    }
}

/* ===== CLUSTERS TAB STYLES ===== */
.bbhg-clusters-content {
    padding: 10px 0;
}

.bbhg-clusters-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #0ea5e9 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 24px;
    color: white;
}

.bbhg-clusters-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-clusters-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-clusters-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-clusters-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-clusters-title p,
.bbhg-clusters-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-clusters-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

.bbhg-clusters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.bbhg-cluster-card {
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bbhg-cluster-card:hover {
    border-color: var(--bbhg-primary);
    transform: translateY(-2px);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-cluster-icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: 12px;
}

.bbhg-cluster-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
    text-align: center;
}

.bbhg-cluster-desc {
    font-size: 13px;
    color: #1f2937;
    text-align: center;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.bbhg-cluster-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
}

.bbhg-cluster-stat {
    flex: 1;
    text-align: center;
}

.bbhg-cluster-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-primary);
    margin-bottom: 4px;
}

.bbhg-cluster-stat-label {
    display: block;
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-cluster-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    min-height: 32px;
}

.bbhg-cluster-tags span {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-700);
    border-radius: var(--bbhg-radius-sm);
    font-weight: 500;
}

.bbhg-cluster-btn {
    width: 100%;
    padding: 12px 20px;
    background: var(--bbhg-primary);
    color: var(--bbhg-white);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cluster-btn:hover {
    background: var(--bbhg-primary-dark);
    transform: translateY(-1px);
}

/* Cluster Detail View */
.bbhg-cluster-detail {
    padding: 10px 0;
}

.bbhg-cluster-detail-content {
    max-width: 800px;
    margin: 0 auto;
}

.bbhg-cluster-back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 20px;
}

.bbhg-cluster-back:hover {
    background: var(--bbhg-gray-100);
    border-color: var(--bbhg-gray-300);
}

.bbhg-cluster-back svg {
    width: 18px;
    height: 18px;
}

.bbhg-cluster-detail-header {
    text-align: center;
    margin-bottom: 30px;
}

.bbhg-cluster-detail-icon {
    font-size: 72px;
    margin-bottom: 16px;
}

.bbhg-cluster-detail-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
}

.bbhg-cluster-detail-subtitle {
    font-size: 15px;
    color: #1f2937;
    margin: 0;
}

.bbhg-cluster-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 30px;
}

.bbhg-cluster-detail-stat {
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    text-align: center;
}

.bbhg-cluster-detail-stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--bbhg-primary);
    margin-bottom: 8px;
}

.bbhg-cluster-detail-stat-label {
    font-size: 12px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-cluster-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding: 24px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
    border: 2px dashed var(--bbhg-gray-200);
}

.bbhg-cluster-detail-tag {
    display: inline-block;
    padding: 8px 14px;
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    transition: all 0.2s ease;
    cursor: pointer;
}

.bbhg-cluster-detail-tag:hover {
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
    transform: translateY(-2px);
}

.bbhg-cluster-copy-all {
    width: 100%;
    padding: 16px 24px;
    background: var(--bbhg-primary);
    color: var(--bbhg-white);
    border: none;
    border-radius: var(--bbhg-radius-lg);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bbhg-cluster-copy-all:hover {
    background: var(--bbhg-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--bbhg-shadow-lg);
}

.bbhg-cluster-copy-all svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .bbhg-clusters-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-cluster-detail-stats {
        grid-template-columns: 1fr;
    }
    
    .bbhg-cluster-detail-stat-value {
        font-size: 24px;
    }
}

/* ===== CLUSTER TABS ===== */
.bbhg-cluster-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 20px;
    padding: 4px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bbhg-cluster-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-cluster-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-cluster-tab:hover {
    background: var(--bbhg-white);
    color: var(--bbhg-gray-800);
}

.bbhg-cluster-tab.active {
    background: var(--bbhg-white);
    color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-cluster-tab-icon {
    font-size: 14px;
}

.bbhg-cluster-tab-text {
    font-size: 12px;
}

.bbhg-cluster-tab-panel {
    display: none;
}

.bbhg-cluster-tab-panel.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Category Filter */
.bbhg-cluster-category-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bbhg-cluster-category-filter .bbhg-filter-label-small {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}

.bbhg-cluster-category-filter .bbhg-filter-label-small svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.bbhg-cluster-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-cluster-cat-pill {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    background: var(--bbhg-white);
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cluster-cat-pill:hover {
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-cluster-cat-pill.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: var(--bbhg-white);
}

/* ===== TIPS TAB ===== */
.bbhg-tips-content {
    display: grid;
    gap: 12px;
}

.bbhg-tip-card {
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    padding: 16px;
    transition: all 0.2s ease;
}

.bbhg-tip-card:hover {
    border-color: var(--bbhg-primary-light);
    box-shadow: var(--bbhg-shadow);
}

.bbhg-tip-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.bbhg-tip-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
}

.bbhg-tip-text {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
    margin: 0;
}

.bbhg-platform-limits {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.bbhg-limit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
}

.bbhg-limit-platform {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-limit-value {
    font-size: 12px;
    color: #1f2937;
    font-weight: 500;
}

/* ===== MOBILE IMPROVEMENTS ===== */
@media (max-width: 640px) {
    /* Modal container adjustments */
    .bbhg-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    
    .bbhg-modal {
        max-width: 100%;
        max-height: 92vh;
        border-radius: var(--bbhg-radius-xl) var(--bbhg-radius-xl) 0 0;
        margin: 0;
    }
    
    .bbhg-modal-handle {
        display: block;
        width: 40px;
        height: 4px;
        background: var(--bbhg-gray-300);
        border-radius: 2px;
        margin: 12px auto 0;
    }
    
    .bbhg-modal-header {
        padding: 16px 16px;
    }
    
    .bbhg-modal-body {
        padding: 4px 16px 16px;
        max-height: calc(92vh - 80px);
    }
    
    /* Cluster detail improvements for mobile */
    .bbhg-cluster-detail {
        padding: 0;
    }
    
    .bbhg-cluster-detail-content {
        padding: 0;
    }
    
    .bbhg-cluster-detail-header {
        margin-bottom: 16px;
    }
    
    .bbhg-cluster-detail-icon {
        font-size: 48px;
        margin-bottom: 10px;
    }
    
    .bbhg-cluster-detail-title {
        font-size: 22px;
    }
    
    .bbhg-cluster-detail-subtitle {
        font-size: 13px;
    }
    
    .bbhg-cluster-detail-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 16px;
    }
    
    .bbhg-cluster-detail-stat {
        padding: 12px 8px;
    }
    
    .bbhg-cluster-detail-stat-value {
        font-size: 18px;
    }
    
    .bbhg-cluster-detail-stat-label {
        font-size: 9px;
    }
    
    .bbhg-cluster-detail-tags {
        padding: 16px;
        gap: 8px;
        margin-bottom: 16px;
        max-height: 200px;
        overflow-y: auto;
    }
    
    .bbhg-cluster-detail-tag {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .bbhg-cluster-back {
        padding: 8px 12px;
        font-size: 13px;
        margin-bottom: 12px;
    }
    
    .bbhg-cluster-back svg {
        width: 16px;
        height: 16px;
    }
    
    .bbhg-cluster-copy-all {
        padding: 14px 20px;
        font-size: 14px;
    }
    
    /* Cluster tabs mobile */
    .bbhg-cluster-tabs {
        margin-bottom: 16px;
        padding: 3px;
    }
    
    .bbhg-cluster-tab {
        padding: 8px 10px;
    }
    
    .bbhg-cluster-tab-icon {
        font-size: 12px;
    }
    
    .bbhg-cluster-tab-text {
        font-size: 11px;
    }
    
    /* Cluster cards mobile */
    .bbhg-cluster-card {
        padding: 16px;
    }
    
    .bbhg-cluster-icon {
        font-size: 36px;
        margin-bottom: 8px;
    }
    
    .bbhg-cluster-name {
        font-size: 16px;
    }
    
    .bbhg-cluster-desc {
        font-size: 12px;
        margin-bottom: 12px;
    }
    
    .bbhg-cluster-stats {
        margin-bottom: 12px;
        padding: 10px;
    }
    
    .bbhg-cluster-stat-value {
        font-size: 16px;
    }
    
    .bbhg-cluster-stat-label {
        font-size: 10px;
    }
    
    .bbhg-cluster-tags {
        margin-bottom: 12px;
        min-height: 28px;
    }
    
    .bbhg-cluster-tags span {
        font-size: 11px;
        padding: 3px 8px;
    }
    
    .bbhg-cluster-btn {
        padding: 10px 16px;
        font-size: 13px;
    }
    
    /* Tips mobile */
    .bbhg-tip-card {
        padding: 14px;
    }
    
    .bbhg-tip-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }
    
    .bbhg-tip-title {
        font-size: 14px;
    }
    
    .bbhg-tip-text {
        font-size: 12px;
    }
    
    .bbhg-limit-item {
        padding: 8px 10px;
    }
    
    .bbhg-limit-platform {
        font-size: 12px;
    }
    
    .bbhg-limit-value {
        font-size: 11px;
    }
    
    /* Header mobile */
    .bbhg-clusters-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        margin-bottom: 16px;
    }
    
    .bbhg-clusters-title {
        gap: 10px;
    }
    
    .bbhg-clusters-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .bbhg-clusters-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .bbhg-clusters-title h2 {
        font-size: 17px;
    }
    
    .bbhg-clusters-subtitle {
        font-size: 12px;
    }
    
    .bbhg-clusters-status {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* Main tabs mobile adjustments */
    .bbhg-slider-container.bbhg-tabs-slider {
        padding: 0;
    }
    
    .bbhg-tabs {
        padding: 16px 0 20px;
    }
    
    .bbhg-tab {
        padding: 10px 12px;
        font-size: 12px;
    }
    
    .bbhg-tab svg {
        width: 16px;
        height: 16px;
    }
    
    .bbhg-tab-text {
        display: none;
    }
    
    /* Logo area mobile */
    .bbhg-logo {
        width: 40px;
        height: 40px;
    }
    
    .bbhg-logo-icon {
        font-size: 22px;
    }
    
    .bbhg-modal-title {
        font-size: 17px;
    }
    
    .bbhg-modal-subtitle {
        font-size: 11px;
    }
    
    .bbhg-modal-close {
        width: 36px;
        height: 36px;
    }
    
    /* Video/Music trending filters - remove all padding on mobile */
    .bbhg-video-category-wrapper {
        padding: 0;
        margin-top: 4px;
    }
    
    .bbhg-video-type-tabs {
        padding: 0;
        margin-top: 4px;
    }
    
    .bbhg-video-source-wrapper {
        padding: 0;
        margin-top: 4px;
    }
    
    .bbhg-video-region-wrapper {
        padding: 0;
        margin-top: 4px;
    }
    
    .bbhg-video-time-wrapper {
        padding: 0;
        margin-top: 4px;
    }
    
    .bbhg-videos-info {
        padding: 0;
        margin-top: 4px;
    }
}

/* Very small screens */
@media (max-width: 375px) {
    .bbhg-cluster-detail-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    
    .bbhg-cluster-detail-stat {
        padding: 10px 6px;
    }
    
    .bbhg-cluster-detail-stat-value {
        font-size: 16px;
    }
    
    .bbhg-cluster-detail-stat-label {
        font-size: 8px;
    }
    
    .bbhg-cluster-detail-tags {
        max-height: 180px;
    }
}
: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 16px 20px;
    background: var(--bbhg-white);
}

.bbhg-saved-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-saved-stat-card:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-saved-stat-icon {
    font-size: 24px;
}

.bbhg-saved-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-saved-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    line-height: 1.2;
}

.bbhg-saved-stat-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Collection Creator */
.bbhg-collection-creator {
    display: flex;
    gap: 10px;
    padding: 0 20px 16px;
    background: var(--bbhg-white);
}

.bbhg-collection-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    color: var(--bbhg-gray-900);
    background: var(--bbhg-gray-100);
    transition: all 0.2s ease;
}

.bbhg-collection-input:focus {
    outline: none;
    border-color: var(--bbhg-primary);
    background: var(--bbhg-white);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.bbhg-create-collection-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: var(--bbhg-primary);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-create-collection-btn:hover {
    background: var(--bbhg-primary-dark);
    transform: translateY(-1px);
}

.bbhg-create-collection-btn svg {
    width: 16px;
    height: 16px;
}

/* Collections Wrapper */
.bbhg-collections-wrapper {
    padding: 0 20px 12px;
    background: var(--bbhg-white);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-collections-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.bbhg-collection-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid transparent;
    border-radius: var(--bbhg-radius);
    color: var(--bbhg-gray-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.bbhg-collection-tab:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-collection-tab.active {
    background: var(--bbhg-primary);
    color: white;
}

.bbhg-collection-tab-icon {
    font-size: 14px;
}

/* Saved Grid */
.bbhg-saved-grid {
    padding: 20px;
    min-height: 200px;
    background: var(--bbhg-gray-100);
}

.bbhg-saved-tags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-saved-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--bbhg-gray-800);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-saved-tag:hover {
    border-color: var(--bbhg-primary);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.15);
}

.bbhg-saved-tag-text {
    color: var(--bbhg-primary-dark);
}

.bbhg-remove-saved {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-remove-saved:hover {
    background: var(--bbhg-error);
    color: white;
}

.bbhg-saved-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-saved-empty svg {
    color: #374151;
    margin-bottom: 16px;
}

.bbhg-saved-empty h4 {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 8px 0;
}

.bbhg-saved-empty p {
    font-size: 13px;
    color: #1f2937;
    margin: 0;
}

/* Saved Count Badge */
.bbhg-saved-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bbhg-error);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    margin-left: 4px;
}

/* ================================
   ANALYTICS PANEL STYLES
   ================================ */

.bbhg-analytics-content {
    padding: 20px;
}

.bbhg-analytics-header {
    margin-bottom: 24px;
}

.bbhg-analytics-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 6px 0;
}

.bbhg-analytics-title svg {
    color: var(--bbhg-primary);
}

.bbhg-analytics-subtitle {
    font-size: 13px;
    color: #1f2937;
    margin: 0;
}

/* Analytics Overview Cards */
.bbhg-analytics-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.bbhg-analytics-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-analytics-card:hover {
    border-color: var(--bbhg-gray-300);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-analytics-card.bbhg-analytics-primary {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-color: transparent;
    color: white;
    position: relative;
    overflow: hidden;
}

.bbhg-analytics-card.bbhg-analytics-primary .bbhg-analytics-card-content span {
    color: white;
}

.bbhg-analytics-card-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.bbhg-analytics-card-content {
    flex: 1;
}

.bbhg-analytics-card-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    line-height: 1.2;
}

.bbhg-analytics-card-label {
    display: block;
    font-size: 12px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-analytics-card-trend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.bbhg-analytics-card-trend svg {
    width: 14px;
    height: 14px;
}

.bbhg-analytics-card-trend.up {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.bbhg-analytics-primary .bbhg-analytics-card-trend.up {
    color: white;
    background: rgba(255,255,255,0.2);
}

/* Section Styles */
.bbhg-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 6px 0;
}

.bbhg-section-title svg {
    color: var(--bbhg-primary);
}

.bbhg-section-desc {
    font-size: 12px;
    color: #1f2937;
    margin: 0 0 16px 0;
}

/* Analyzer Section */
.bbhg-analyzer-section {
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.bbhg-analyzer-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-analyzer-input-wrapper:focus-within {
    border-color: var(--bbhg-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.bbhg-analyzer-prefix {
    padding: 14px 12px;
    background: var(--bbhg-gray-100);
    color: #1f2937;
    font-size: 16px;
    font-weight: 600;
    border-right: 1px solid var(--bbhg-gray-300);
}

.bbhg-analyzer-field {
    flex: 1;
    padding: 14px 16px;
    border: none;
    font-size: 15px;
    color: var(--bbhg-gray-900);
    background: transparent;
}

.bbhg-analyzer-field:focus {
    outline: none;
}

.bbhg-analyzer-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
    background: var(--bbhg-primary);
    color: white;
    border: none;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-analyzer-btn:hover {
    background: var(--bbhg-primary-dark);
}

.bbhg-analyzer-btn svg {
    width: 16px;
    height: 16px;
}

/* Analysis Results */
.bbhg-analysis-results {
    margin-top: 20px;
    padding: 20px;
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-analysis-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-analysis-hashtag {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-primary);
    margin: 0;
}

.bbhg-analysis-score {
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
}

.bbhg-analysis-metrics {
    display: grid;
    gap: 16px;
}

.bbhg-metric {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-metric-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bbhg-metric-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-metric-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-metric-value.trending {
    color: var(--bbhg-success);
}

.bbhg-metric-value.stable {
    color: var(--bbhg-warning);
}

.bbhg-metric-value.declining {
    color: var(--bbhg-error);
}

.bbhg-metric-bar {
    height: 8px;
    background: var(--bbhg-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.bbhg-metric-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bbhg-metric-fill.medium {
    background: var(--bbhg-warning);
}

.bbhg-metric-fill.high {
    background: var(--bbhg-error);
}

.bbhg-metric-fill.trending {
    background: var(--bbhg-success);
}

.bbhg-metric-fill.stable {
    background: var(--bbhg-warning);
}

.bbhg-metric-fill.declining {
    background: var(--bbhg-error);
}

/* Recommendations */
.bbhg-analysis-recommendations {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-analysis-recommendations h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 12px 0;
}

.bbhg-analysis-recommendations ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bbhg-analysis-recommendations li {
    position: relative;
    padding: 8px 0 8px 24px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    border-bottom: 1px solid var(--bbhg-gray-100);
}

.bbhg-analysis-recommendations li:last-child {
    border-bottom: none;
}

.bbhg-analysis-recommendations li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--bbhg-success);
    font-weight: 600;
}

/* Best Times Section */
.bbhg-best-times-section {
    margin-bottom: 24px;
}

.bbhg-times-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.bbhg-time-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    text-align: center;
    transition: all 0.2s ease;
}

.bbhg-time-card:hover {
    border-color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-time-card.best {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-color: var(--bbhg-primary);
}

.bbhg-time-card.good {
    background: rgba(16, 185, 129, 0.05);
    border-color: var(--bbhg-success);
}

.bbhg-time-day {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    margin-bottom: 4px;
}

.bbhg-time-hour {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin-bottom: 8px;
}

.bbhg-time-badge {
    padding: 4px 10px;
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
    font-size: 10px;
    font-weight: 600;
    border-radius: 20px;
    text-transform: uppercase;
}

.bbhg-time-card.best .bbhg-time-badge {
    background: var(--bbhg-primary);
    color: white;
}

.bbhg-time-card.good .bbhg-time-badge {
    background: var(--bbhg-success);
    color: white;
}

/* Platform Comparison Section */
.bbhg-platform-comparison-section {
    margin-bottom: 16px;
}

.bbhg-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bbhg-platform-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-platform-card:hover {
    border-color: var(--bbhg-gray-300);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-platform-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.bbhg-platform-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin-bottom: 6px;
}

.bbhg-platform-limit {
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-platform-tip {
    font-size: 11px;
    color: #1f2937;
    padding-top: 8px;
    border-top: 1px solid var(--bbhg-gray-200);
}

/* Responsive adjustments for Analytics */
@media (max-width: 768px) {
    .bbhg-analytics-overview {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-times-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-saved-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-saved-header {
        flex-direction: column;
    }
    
    .bbhg-saved-actions {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 480px) {
    .bbhg-analytics-overview {
        grid-template-columns: 1fr 1fr;
    }
    
    .bbhg-times-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-platform-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-saved-stats {
        grid-template-columns: 1fr;
    }
    
    .bbhg-collection-creator {
        flex-direction: column;
    }
    
    .bbhg-saved-actions {
        flex-direction: column;
    }
    
    .bbhg-saved-action-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Save Hashtag Button on Trend Cards */
.bbhg-save-hashtag-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 50%;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    z-index: 10;
}

.bbhg-trend-card:hover .bbhg-save-hashtag-btn,
.bbhg-result-item:hover .bbhg-save-hashtag-btn {
    opacity: 1;
}

.bbhg-save-hashtag-btn:hover {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-save-hashtag-btn.saved {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
    opacity: 1;
}

.bbhg-save-hashtag-btn svg {
    width: 14px;
    height: 14px;
}

/* ================================
   GUIDE PANEL STYLES
   ================================ */

/* Guide Content Container */
.bbhg-guide-content {
    padding: 0;
    position: relative;
}

/* Guide Header */
.bbhg-guide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    color: white;
}

.bbhg-guide-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-guide-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-guide-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-guide-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff !important;
    white-space: nowrap;
}

.bbhg-guide-title p,
.bbhg-guide-subtitle {
    margin: 0;
    font-size: 12px;
    opacity: 0.9;
    color: #ffffff !important;
}

.bbhg-guide-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff !important;
}

/* Guide Header Mobile */
@media (max-width: 768px) {
    .bbhg-guide-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    
    .bbhg-guide-title {
        gap: 10px;
    }
    
    .bbhg-guide-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .bbhg-guide-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .bbhg-guide-title h2 {
        font-size: 18px;
        white-space: normal;
    }
    
    .bbhg-guide-subtitle {
        font-size: 11px;
    }
    
    .bbhg-guide-status {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Intent Filter Tabs */
.bbhg-guide-intent-tabs {
    display: flex;
    gap: 8px;
    padding: 15px 20px;
    overflow-x: auto;
    background: var(--bbhg-white);
    border-bottom: 1px solid var(--bbhg-gray-200);
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bbhg-guide-intent-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-guide-intent-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-guide-intent-tab:hover {
    background: var(--bbhg-gray-200);
    border-color: var(--bbhg-gray-300);
}

.bbhg-guide-intent-tab.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-guide-intent-tab .bbhg-intent-icon {
    font-size: 16px;
}

/* Platform Filter */
.bbhg-guide-platform-filter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
    overflow: hidden;
}

.bbhg-guide-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-guide-platform-pills-wrapper {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.bbhg-guide-platform-pills-wrapper::-webkit-scrollbar {
    display: none;
}

.bbhg-guide-platform-pills {
    display: flex;
    gap: 6px;
    width: max-content;
    padding-right: 20px;
}

.bbhg-guide-platform-pill {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #1f2937;
    white-space: nowrap;
}

.bbhg-guide-platform-pill:hover {
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-guide-platform-pill.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

/* Guide Sections */
.bbhg-guide-sections {
    padding: 20px;
    max-height: 400px;
    overflow-y: auto;
}

.bbhg-guide-section {
    margin-bottom: 20px;
}

.bbhg-guide-section:last-child {
    margin-bottom: 0;
}

.bbhg-guide-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin-bottom: 12px;
}

.bbhg-guide-section-title svg {
    width: 18px;
    height: 18px;
    color: var(--bbhg-primary);
}

/* Strategy Cards */
.bbhg-guide-strategies {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-guide-strategy-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    transition: all 0.2s ease;
}

.bbhg-guide-strategy-card:hover {
    border-color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-guide-strategy-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.bbhg-guide-strategy-icon {
    font-size: 24px;
    line-height: 1;
}

.bbhg-guide-strategy-info {
    flex: 1;
}

.bbhg-guide-strategy-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin-bottom: 4px;
}

.bbhg-guide-strategy-meta {
    display: flex;
    gap: 12px;
    font-size: 11px;
    color: #1f2937;
}

.bbhg-guide-strategy-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-guide-strategy-desc {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
    margin-bottom: 12px;
}

.bbhg-guide-strategy-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
}

.bbhg-guide-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bbhg-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.bbhg-guide-step-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.4;
}

.bbhg-guide-strategy-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-guide-strategy-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bbhg-guide-strategy-tag {
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 500;
    background: var(--bbhg-gray-100);
    color: #1f2937;
    border-radius: 4px;
    text-transform: uppercase;
}

.bbhg-guide-strategy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    background: var(--bbhg-primary);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-guide-strategy-btn:hover {
    background: var(--bbhg-primary-dark);
}

/* Strategy Generator */
.bbhg-strategy-generator {
    margin: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    border: 1px solid #fcd34d;
}

.bbhg-strategy-header {
    text-align: center;
    margin-bottom: 20px;
}

.bbhg-strategy-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin-bottom: 4px;
}

.bbhg-strategy-desc {
    font-size: 13px;
    color: #1f2937;
    margin: 0;
}

/* Strategy Form Steps */
.bbhg-strategy-form {
    margin-bottom: 16px;
}

.bbhg-strategy-step {
    display: none;
}

.bbhg-strategy-step.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

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

.bbhg-strategy-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 12px;
    text-align: center;
}

.bbhg-strategy-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.bbhg-strategy-option {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--bbhg-gray-700);
}

.bbhg-strategy-option:hover {
    border-color: var(--bbhg-primary);
    background: #f0f9ff;
}

.bbhg-strategy-option.selected {
    border-color: var(--bbhg-primary);
    background: var(--bbhg-primary);
    color: white;
}

/* Progress Bar */
.bbhg-strategy-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-strategy-progress-bar {
    flex: 1;
    height: 6px;
    background: rgba(255,255,255,0.5);
    border-radius: 3px;
    overflow: hidden;
}

.bbhg-strategy-progress-fill {
    height: 100%;
    background: var(--bbhg-primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.bbhg-strategy-progress-text {
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
}

/* Strategy Result */
.bbhg-strategy-result {
    margin-top: 20px;
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-strategy-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-strategy-result-header h5 {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0;
}

.bbhg-strategy-reset {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-sm);
    cursor: pointer;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-strategy-reset:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-strategy-result-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-strategy-item {
    display: flex;
    gap: 12px;
    padding: 14px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    border-left: 3px solid var(--bbhg-primary);
}

.bbhg-strategy-item-icon {
    font-size: 20px;
    line-height: 1;
}

.bbhg-strategy-item-content h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 4px;
}

.bbhg-strategy-item-content p {
    font-size: 13px;
    color: #1f2937;
    margin: 0;
    line-height: 1.5;
}

.bbhg-strategy-weekly-plan {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: var(--bbhg-radius);
    padding: 16px;
}

.bbhg-strategy-weekly-plan h6 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-weekly-schedule {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.bbhg-weekly-day {
    text-align: center;
    padding: 8px 4px;
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-sm);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-weekly-day-name {
    font-size: 10px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bbhg-weekly-day-action {
    font-size: 16px;
    line-height: 1;
}

/* Quick Reference */
.bbhg-guide-quick-ref {
    padding: 20px;
    background: var(--bbhg-gray-50);
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-quick-ref-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 15px;
}

.bbhg-quick-ref-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.bbhg-quick-ref-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-quick-ref-card:hover {
    border-color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-md);
    transform: translateY(-2px);
}

.bbhg-quick-ref-icon {
    font-size: 28px;
    margin-bottom: 10px;
}

.bbhg-quick-ref-card h5 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 4px;
}

.bbhg-quick-ref-card p {
    font-size: 12px;
    color: #1f2937;
    margin: 0;
}

/* Quick Reference Detail */
.bbhg-quick-ref-detail {
    background: var(--bbhg-white);
    z-index: 100;
    animation: fadeIn 0.3s ease;
    padding-bottom: 20px;
}

@keyframes slideIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.bbhg-quick-ref-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--bbhg-gray-200);
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.bbhg-quick-ref-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-quick-ref-back:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-quick-ref-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-quick-ref-detail-content {
    padding: 20px;
}

.bbhg-ref-item {
    margin-bottom: 16px;
    padding: 14px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    border-left: 3px solid var(--bbhg-primary);
}

.bbhg-ref-item:last-child {
    margin-bottom: 0;
}

.bbhg-ref-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin-bottom: 6px;
}

.bbhg-ref-item-text {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
}

.bbhg-ref-item code {
    display: inline-block;
    padding: 2px 6px;
    background: var(--bbhg-gray-200);
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
    color: var(--bbhg-gray-700);
}

/* Hook Templates Grid */
.bbhg-hooks-filter {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-md);
}

.bbhg-hooks-filter-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
}

.bbhg-hooks-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-hook-filter-pill {
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    background: var(--bbhg-white);
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-hook-filter-pill:hover {
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-hook-filter-pill.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: var(--bbhg-white);
}

.bbhg-hooks-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-hook-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-hook-item:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-hook-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bbhg-primary);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.bbhg-hook-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.4;
    flex: 1;
}

.bbhg-hook-cat-badge {
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 4px;
}

.bbhg-hook-copy {
    margin-left: auto;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 4px;
    cursor: pointer;
    color: #1f2937;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-hook-copy:hover {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .bbhg-guide-intent-tabs {
        padding: 12px 15px;
        gap: 6px;
    }
    
    .bbhg-guide-intent-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-guide-platform-filter {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 12px 15px;
    }
    
    .bbhg-guide-platform-pills-wrapper {
        width: 100%;
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        box-sizing: content-box;
    }
    
    .bbhg-guide-platform-pills {
        padding-right: 15px;
    }
    
    .bbhg-guide-sections {
        padding: 15px;
        max-height: 300px;
    }
    
    .bbhg-strategy-generator {
        margin: 15px;
        padding: 15px;
    }
    
    .bbhg-strategy-options {
        gap: 6px;
    }
    
    .bbhg-strategy-option {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-quick-ref-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-weekly-schedule {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ================================
   VIDEOS PANEL STYLES
   ================================ */

/* Video Category Filter */
.bbhg-video-category-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-video-category-tabs {
    display: flex;
    gap: 8px;
}

.bbhg-video-category-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-video-category-tab svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.bbhg-video-category-tab:hover {
    background: var(--bbhg-gray-100);
    border-color: #374151;
}

.bbhg-video-category-tab.active {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-primary-dark) 100%);
    color: white;
    border-color: var(--bbhg-primary);
}

.bbhg-video-category-tab.active svg {
    stroke: white;
}

.bbhg-video-category-tab[data-video-category="music"].active {
    background: linear-gradient(135deg, #1DB954 0%, #169c46 100%);
    border-color: #1DB954;
}

.bbhg-video-category-tab[data-video-category="videos"].active {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
    border-color: #FF0000;
}

/* Video Type Tabs */
.bbhg-video-type-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 20px 12px;
    background: var(--bbhg-gray-100);
    border-bottom: 1px solid var(--bbhg-gray-200);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bbhg-video-type-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-video-type-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-video-type-tab svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.bbhg-video-type-tab:hover {
    background: var(--bbhg-gray-200);
    border-color: #374151;
}

.bbhg-video-type-tab.active {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
    color: white;
    border-color: #FF0000;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.bbhg-video-type-tab.active svg {
    stroke: white;
}

.bbhg-video-type-tab[data-video-type="music"].active {
    background: linear-gradient(135deg, #1DB954 0%, #169c46 100%);
    border-color: #1DB954;
    box-shadow: 0 4px 12px rgba(29, 185, 84, 0.3);
}

.bbhg-video-type-tab[data-video-type="views"].active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.bbhg-video-type-tab[data-video-type="likes"].active {
    background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
    border-color: #ec4899;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.bbhg-video-type-tab[data-video-type="comments"].active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-video-type-tab[data-video-type="engagement"].active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* Video Source Wrapper */
.bbhg-video-source-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bbhg-white);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-video-source-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
}

.bbhg-video-source-tabs::-webkit-scrollbar {
    display: none;
}

/* Video Region Wrapper - Proper Slider */
.bbhg-video-region-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bbhg-white);
    border-bottom: 1px solid var(--bbhg-gray-200);
    position: relative;
    overflow: hidden;
}

.bbhg-video-region-wrapper .bbhg-filter-label {
    flex-shrink: 0;
}

/* Region Tabs Container - THE SLIDER */
.bbhg-video-region-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
    padding: 4px 30px 4px 0;
    flex: 1;
    min-width: 0;
}

.bbhg-video-region-tabs::-webkit-scrollbar {
    display: none;
}

/* Fade effect on right edge */
.bbhg-video-region-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50px;
    background: linear-gradient(to right, transparent, var(--bbhg-white) 80%);
    pointer-events: none;
    z-index: 2;
}

/* Scroll hint */
.bbhg-video-region-wrapper .bbhg-scroll-hint {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: #374151;
    pointer-events: none;
    z-index: 3;
    background: var(--bbhg-white);
    padding: 4px 6px;
    border-radius: 10px;
}

.bbhg-video-region-wrapper .bbhg-scroll-hint svg {
    width: 12px;
    height: 12px;
    animation: scrollHintBounce 1.5s ease-in-out infinite;
}

@keyframes scrollHintBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(4px); }
}

.bbhg-video-source-tab,
.bbhg-video-region-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-video-source-tab svg,
.bbhg-video-region-tab svg {
    width: 14px;
    height: 14px;
}

.bbhg-video-source-tab:hover,
.bbhg-video-region-tab:hover {
    background: var(--bbhg-gray-200);
    border-color: var(--bbhg-gray-300);
}

.bbhg-video-source-tab.active {
    background: var(--bbhg-primary);
    color: white;
    border-color: var(--bbhg-primary);
}

.bbhg-video-source-tab[data-video-source="youtube"].active {
    background: #FF0000;
    border-color: #FF0000;
}

.bbhg-video-source-tab[data-video-source="google"].active {
    background: #4285F4;
    border-color: #4285F4;
}

.bbhg-video-region-tab.active {
    background: var(--bbhg-gray-800);
    color: white;
    border-color: var(--bbhg-gray-800);
}

/* Video Time Period Filter */
.bbhg-video-time-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bbhg-white);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-video-time-wrapper .bbhg-filter-label {
    flex-shrink: 0;
}

.bbhg-video-time-tabs {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}

.bbhg-video-time-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-video-time-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-video-time-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
}

.bbhg-video-time-tab.active {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    border-color: var(--bbhg-primary);
    box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

.bbhg-source-icon {
    font-size: 14px;
}

.bbhg-youtube-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Videos Info Bar */
.bbhg-videos-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--bbhg-gray-100) 0%, var(--bbhg-white) 100%);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-videos-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-videos-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.bbhg-videos-badge svg {
    stroke: white;
}

.bbhg-videos-count {
    font-size: 13px;
    color: #1f2937;
}

.bbhg-videos-info-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
}

.bbhg-videos-updated {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-refresh-videos {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-refresh-videos:hover {
    background: var(--bbhg-gray-100);
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-refresh-videos svg {
    width: 14px;
    height: 14px;
}

.bbhg-refresh-videos.loading svg {
    animation: spin 1s linear infinite;
}

/* Videos Container */
#bbhg-videos-container {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
}

/* Video Grid */
.bbhg-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Video Card */
.bbhg-video-card {
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
    box-shadow: var(--bbhg-shadow-md);
    transition: all 0.3s ease;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-video-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bbhg-shadow-xl);
    border-color: var(--bbhg-primary);
}

/* Video Thumbnail Container */
.bbhg-video-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio */
    background: var(--bbhg-gray-200);
    overflow: hidden;
}

.bbhg-video-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bbhg-video-card:hover .bbhg-video-thumbnail img {
    transform: scale(1.05);
}

/* Play Button Overlay */
.bbhg-video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bbhg-video-card:hover .bbhg-video-play-overlay {
    opacity: 1;
}

.bbhg-play-btn {
    width: 60px;
    height: 60px;
    background: rgba(255, 0, 0, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

.bbhg-play-btn:hover {
    transform: scale(1.1);
}

.bbhg-play-btn svg {
    width: 24px;
    height: 24px;
    fill: white;
    margin-left: 4px;
}

/* Video Duration Badge */
.bbhg-video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

/* Video Source Badge */
.bbhg-video-source-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-video-source-badge.youtube {
    background: rgba(255, 0, 0, 0.9);
}

.bbhg-video-source-badge.google {
    background: rgba(66, 133, 244, 0.9);
}

.bbhg-video-source-badge svg {
    width: 12px;
    height: 12px;
}

/* Trending Rank Badge */
.bbhg-video-rank {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Video Info */
.bbhg-video-info {
    padding: 14px;
}

.bbhg-video-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-video-channel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 10px;
}

.bbhg-video-channel svg {
    width: 14px;
    height: 14px;
}

/* Video Stats Row */
.bbhg-video-stats {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bbhg-video-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #1f2937;
}

.bbhg-video-stat svg {
    width: 12px;
    height: 12px;
}

.bbhg-video-stat.views {
    color: var(--bbhg-gray-700);
    font-weight: 500;
}

.bbhg-video-stat.likes svg {
    stroke: #ef4444;
}

.bbhg-video-stat.comments svg {
    stroke: var(--bbhg-primary);
}

/* Video Actions */
.bbhg-video-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-video-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bbhg-gray-100);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.bbhg-video-action:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-video-action.watch {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
    color: white;
}

.bbhg-video-action.watch:hover {
    background: linear-gradient(135deg, #CC0000 0%, #990000 100%);
}

.bbhg-video-action.listen {
    background: linear-gradient(135deg, #1DB954 0%, #169c46 100%);
    color: white;
}

.bbhg-video-action.listen:hover {
    background: linear-gradient(135deg, #169c46 0%, #128838 100%);
}

.bbhg-video-action svg {
    width: 14px;
    height: 14px;
}

/* Video Insights Panel */
.bbhg-video-insights {
    background: var(--bbhg-gray-100);
    padding: 10px 14px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-video-insights-title {
    font-size: 10px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.bbhg-video-insights-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-insight-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 12px;
    font-size: 10px;
    color: var(--bbhg-gray-700);
}

.bbhg-insight-tag.trending {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #f59e0b;
    color: #92400e;
}

.bbhg-insight-tag.viral {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    border-color: #ef4444;
    color: #991b1b;
}

.bbhg-insight-tag.music {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #10b981;
    color: #065f46;
}

/* No Videos Message */
.bbhg-no-videos {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-no-videos-icon {
    width: 80px;
    height: 80px;
    background: var(--bbhg-gray-100);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.bbhg-no-videos-icon svg {
    width: 40px;
    height: 40px;
    stroke: var(--bbhg-gray-400);
}

.bbhg-no-videos-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
}

.bbhg-no-videos-desc {
    font-size: 13px;
    color: #1f2937;
    max-width: 300px;
}

/* Videos Panel Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-video-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-videos-info {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-videos-info-right {
        width: auto;
        flex: none;
        justify-content: flex-start !important;
    }
}

@media (max-width: 480px) {
    .bbhg-video-type-tabs {
        padding: 0;
        margin-top: 4px;
    }
    
    .bbhg-video-type-tab {
        padding: 8px 14px;
        font-size: 12px;
    }
    
    .bbhg-video-source-wrapper {
        padding: 0;
        margin-top: 4px;
        gap: 8px;
    }
    
    /* Keep region wrapper horizontal on mobile - it's a slider! */
    .bbhg-video-region-wrapper {
        padding: 0;
        margin-top: 4px;
        gap: 8px;
    }
    
    .bbhg-video-region-wrapper .bbhg-filter-label {
        font-size: 11px;
        min-width: auto;
    }
    
    .bbhg-video-region-wrapper .bbhg-filter-label svg {
        width: 14px;
        height: 14px;
    }
    
    .bbhg-video-region-tab {
        padding: 6px 10px;
        font-size: 11px;
    }
    
    /* Video time filter mobile */
    .bbhg-video-time-wrapper {
        padding: 0;
        margin-top: 4px;
        gap: 8px;
    }
    
    .bbhg-video-time-wrapper .bbhg-filter-label {
        font-size: 11px;
        min-width: auto;
    }
    
    .bbhg-video-time-wrapper .bbhg-filter-label svg {
        width: 14px;
        height: 14px;
    }
    
    .bbhg-video-time-tab {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    /* Video category wrapper mobile */
    .bbhg-video-category-wrapper {
        padding: 0;
        margin-top: 4px;
    }
    
    /* Videos info bar mobile */
    .bbhg-videos-info {
        padding: 0;
        margin-top: 4px;
    }
}

/* ===== Google Trends Card (No Thumbnail) ===== */
.bbhg-google-trend-card {
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: auto;
}

.bbhg-google-trend-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(66, 133, 244, 0.15);
    border-color: #4285f4;
}

.bbhg-google-trend-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    position: relative;
}

.bbhg-google-trend-rank {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-trend-rank-num {
    background: rgba(255, 255, 255, 0.95);
    color: #4285f4;
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bbhg-google-trend-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.bbhg-google-trend-icon svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2.5;
}

.bbhg-google-trend-header .bbhg-video-source-badge {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    color: #4285f4;
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bbhg-google-trend-header .bbhg-video-source-badge svg {
    width: 12px;
    height: 12px;
    stroke: #4285f4;
    stroke-width: 2.5;
}

.bbhg-google-trend-content {
    padding: 18px;
    flex: 1;
}

.bbhg-google-trend-card .bbhg-video-title {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
    margin-bottom: 14px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-google-trend-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.bbhg-google-trend-searches,
.bbhg-google-trend-category,
.bbhg-google-trend-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    background: #f1f5f9;
    padding: 6px 10px;
    border-radius: 6px;
}

.bbhg-google-trend-searches {
    background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 100%);
    color: #1d4ed8;
    font-weight: 600;
}

.bbhg-google-trend-searches svg,
.bbhg-google-trend-category svg,
.bbhg-google-trend-time svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.bbhg-google-trend-searches svg {
    stroke: #1d4ed8;
}

.bbhg-google-trend-category svg {
    stroke: #64748b;
}

.bbhg-google-trend-time svg {
    stroke: #64748b;
}

.bbhg-google-trend-actions {
    display: flex;
    gap: 8px;
    padding: 14px 18px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.bbhg-google-trend-actions .bbhg-video-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.bbhg-google-trend-actions .bbhg-video-action.explore {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 100%);
    color: white;
}

.bbhg-google-trend-actions .bbhg-video-action.explore:hover {
    background: linear-gradient(135deg, #3b78e7 0%, #2d9649 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.bbhg-google-trend-actions .bbhg-video-action.bbhg-copy-video-link {
    background: white;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.bbhg-google-trend-actions .bbhg-video-action.bbhg-copy-video-link:hover {
    background: #f1f5f9;
    color: #475569;
    border-color: #cbd5e1;
}

.bbhg-google-trend-actions .bbhg-video-action svg {
    width: 14px;
    height: 14px;
}

/* Google Trends Card Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-google-trend-header {
        padding: 14px 16px;
    }
    
    .bbhg-google-trend-content {
        padding: 14px 16px;
    }
    
    .bbhg-google-trend-card .bbhg-video-title {
        font-size: 14px;
    }
    
    .bbhg-google-trend-meta {
        gap: 8px;
    }
    
    .bbhg-google-trend-searches,
    .bbhg-google-trend-category,
    .bbhg-google-trend-time {
        font-size: 11px;
        padding: 5px 8px;
    }
    
    .bbhg-google-trend-actions {
        padding: 12px 16px;
    }
}

@media (max-width: 480px) {
    .bbhg-google-trend-header .bbhg-video-source-badge {
        font-size: 9px;
        padding: 4px 8px;
    }
    
    .bbhg-google-trend-icon {
        width: 32px;
        height: 32px;
    }
    
    .bbhg-google-trend-icon svg {
        width: 16px;
        height: 16px;
    }
}

/* ================================
   Google Searches Panel
   ================================ */

/* Search Filter Tabs */
.bbhg-search-filter-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 20px 12px;
    background: var(--bbhg-gray-100);
    border-bottom: 1px solid var(--bbhg-gray-200);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.bbhg-search-filter-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-search-filter-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-search-filter-tab svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.bbhg-search-filter-tab:hover {
    background: var(--bbhg-gray-200);
    border-color: #374151;
}

.bbhg-search-filter-tab.active {
    background: linear-gradient(135deg, #4285F4 0%, #1a73e8 100%);
    color: white;
    border-color: #4285F4;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.bbhg-search-filter-tab.active svg {
    stroke: white;
}

.bbhg-search-filter-tab[data-search-filter="breakout"].active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-color: #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.bbhg-search-filter-tab[data-search-filter="rising"].active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bbhg-search-filter-tab[data-search-filter="top"].active {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Header */
.bbhg-searches-header {
    margin-bottom: 20px;
}

.bbhg-searches-subtitle {
    font-size: 13px;
    color: #1f2937;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.bbhg-searches-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.bbhg-searches-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-searches-title svg {
    color: #4285F4;
}

/* Search Filters */
.bbhg-searches-filters-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bbhg-gray-300) transparent;
    margin: 0 -24px;
    padding: 0 24px 16px;
}

.bbhg-searches-filters-wrapper::-webkit-scrollbar {
    height: 6px;
    display: none;
}

.bbhg-searches-filters-wrapper::-webkit-scrollbar-track {
    background: transparent;
}

.bbhg-searches-filters-wrapper::-webkit-scrollbar-thumb {
    background: var(--bbhg-gray-300);
    border-radius: 3px;
}

@media (min-width: 769px) {
    .bbhg-searches-filters-wrapper {
        padding-bottom: 20px;
    }
    
    .bbhg-searches-filters-wrapper::-webkit-scrollbar {
        display: block;
    }
}

.bbhg-searches-filters {
    display: flex;
    gap: 8px;
    min-width: max-content;
}

.bbhg-search-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-search-filter:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
}

.bbhg-search-filter.active {
    background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 2px 8px -2px rgba(66, 133, 244, 0.4);
}

.bbhg-search-filter svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* Categories Wrapper */
.bbhg-searches-categories-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bbhg-gray-300) transparent;
    margin: 0 -24px;
    padding: 0 24px 16px;
}

.bbhg-searches-categories-wrapper::-webkit-scrollbar {
    height: 6px;
    display: none;
}

@media (min-width: 769px) {
    .bbhg-searches-categories-wrapper {
        padding-bottom: 20px;
    }
    
    .bbhg-searches-categories-wrapper::-webkit-scrollbar {
        display: block;
    }
}

.bbhg-searches-categories {
    display: flex;
    gap: 6px;
    min-width: max-content;
}

.bbhg-search-category {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-search-category:hover {
    background: var(--bbhg-gray-100);
    border-color: var(--bbhg-gray-300);
    color: var(--bbhg-gray-700);
}

.bbhg-search-category.active {
    background: #4285F4;
    color: white;
    border-color: #4285F4;
    box-shadow: 0 2px 6px -2px rgba(66, 133, 244, 0.4);
}

/* Region Wrapper */
.bbhg-searches-region-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--bbhg-gray-300) transparent;
    margin: 0 -24px;
    padding: 0 24px 16px;
}

.bbhg-searches-region-wrapper::-webkit-scrollbar {
    height: 6px;
    display: none;
}

@media (min-width: 769px) {
    .bbhg-searches-region-wrapper {
        padding-bottom: 20px;
    }
    
    .bbhg-searches-region-wrapper::-webkit-scrollbar {
        display: block;
    }
}

.bbhg-searches-regions {
    display: flex;
    gap: 6px;
    min-width: max-content;
}

.bbhg-search-region {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-search-region:hover {
    background: var(--bbhg-gray-100);
    border-color: var(--bbhg-gray-300);
    color: var(--bbhg-gray-700);
}

.bbhg-search-region.active {
    background: #4285F4;
    color: white;
    border-color: #4285F4;
    box-shadow: 0 2px 6px -2px rgba(66, 133, 244, 0.4);
}

/* Searches Info Bar */
.bbhg-searches-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
}

.bbhg-searches-info-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-searches-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 16px;
}

.bbhg-searches-count {
    font-size: 13px;
    color: #1f2937;
}

.bbhg-searches-info-right {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
}

.bbhg-searches-time {
    font-size: 12px;
    color: #1f2937;
}

/* Search Result Cards */
.bbhg-search-results {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-search-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-search-card:hover {
    border-color: #4285F4;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
}

.bbhg-search-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.05) 0%, rgba(52, 168, 83, 0.05) 100%);
    border-bottom: 1px solid var(--bbhg-gray-100);
}

.bbhg-search-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    color: white;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    flex-shrink: 0;
}

.bbhg-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 10px;
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-search-icon svg {
    width: 20px;
    height: 20px;
    color: #4285F4;
}

.bbhg-search-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    margin-left: auto;
}

.bbhg-search-type-badge.breakout {
    background: linear-gradient(135deg, #EA4335 0%, #FBBC05 100%);
    color: white;
    border-color: transparent;
}

.bbhg-search-type-badge.rising {
    background: linear-gradient(135deg, #34A853 0%, #4285F4 100%);
    color: white;
    border-color: transparent;
}

.bbhg-search-card-content {
    padding: 16px;
}

.bbhg-search-term {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.bbhg-search-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.bbhg-search-volume {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
}

.bbhg-search-volume svg {
    width: 14px;
    height: 14px;
}

.bbhg-search-category-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bbhg-gray-100);
    color: #1f2937;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
}

.bbhg-search-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--bbhg-gray-100);
    color: #1f2937;
    font-size: 12px;
    border-radius: 8px;
}

.bbhg-search-time svg {
    width: 12px;
    height: 12px;
}

.bbhg-search-card-actions {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-top: 1px solid var(--bbhg-gray-100);
}

.bbhg-search-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-search-action.explore {
    background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
    color: white;
}

.bbhg-search-action.explore:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.bbhg-search-action.copy {
    background: white;
    color: #1f2937;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-search-action.copy:hover {
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-700);
}

.bbhg-search-action.hashtag {
    background: var(--bbhg-primary);
    color: white;
}

.bbhg-search-action.hashtag:hover {
    background: var(--bbhg-primary-dark);
}

.bbhg-search-action svg {
    width: 14px;
    height: 14px;
}

/* Mobile Responsive - Google Searches */
@media (max-width: 768px) {
    /* Header */
    .bbhg-searches-header {
        margin-bottom: 16px;
    }
    
    .bbhg-searches-subtitle {
        font-size: 11px;
        margin-bottom: 6px;
    }
    
    .bbhg-searches-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-searches-title {
        font-size: 16px;
        gap: 8px;
    }
    
    .bbhg-searches-title svg {
        width: 20px;
        height: 20px;
    }
    
    /* Filter Tabs */
    .bbhg-searches-filters-wrapper {
        margin: 0 -16px;
        padding: 0 16px 12px;
    }
    
    .bbhg-searches-filters {
        gap: 6px;
    }
    
    .bbhg-search-filter {
        padding: 8px 12px;
        font-size: 12px;
        gap: 6px;
    }
    
    .bbhg-search-filter svg {
        width: 14px;
        height: 14px;
    }
    
    /* Category Filters */
    .bbhg-searches-categories-wrapper {
        margin: 0 -16px;
        padding: 0 16px 12px;
        gap: 8px;
    }
    
    .bbhg-searches-categories-wrapper .bbhg-filter-label {
        font-size: 10px;
        min-width: auto;
    }
    
    .bbhg-searches-categories-wrapper .bbhg-filter-label svg {
        width: 12px;
        height: 12px;
    }
    
    .bbhg-searches-categories {
        gap: 4px;
    }
    
    .bbhg-search-category {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    /* Region Filters */
    .bbhg-searches-region-wrapper {
        margin: 0 -16px;
        padding: 0 16px 12px;
        gap: 8px;
    }
    
    .bbhg-searches-region-wrapper .bbhg-filter-label {
        font-size: 10px;
        min-width: auto;
    }
    
    .bbhg-searches-region-wrapper .bbhg-filter-label svg {
        width: 12px;
        height: 12px;
    }
    
    .bbhg-searches-regions {
        gap: 4px;
    }
    
    .bbhg-search-region {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    /* Info Bar */
    .bbhg-searches-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
        margin-bottom: 12px;
    }
    
    .bbhg-searches-info-left {
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .bbhg-searches-info-right {
        width: auto;
        flex: none;
        justify-content: flex-start !important;
    }
    
    .bbhg-searches-badge {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .bbhg-searches-count {
        font-size: 12px;
    }
    
    .bbhg-searches-time {
        font-size: 11px;
    }
    
    /* Search Cards */
    .bbhg-search-results {
        gap: 10px;
    }
    
    .bbhg-search-card {
        border-radius: 10px;
    }
    
    .bbhg-search-card-header {
        padding: 12px;
        gap: 10px;
        flex-wrap: wrap;
    }
    
    .bbhg-search-rank {
        width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 6px;
    }
    
    .bbhg-search-icon {
        width: 34px;
        height: 34px;
        border-radius: 8px;
    }
    
    .bbhg-search-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .bbhg-search-type-badge {
        font-size: 10px;
        padding: 3px 8px;
    }
    
    .bbhg-search-card-content {
        padding: 12px;
    }
    
    .bbhg-search-term {
        font-size: 14px;
        margin-bottom: 10px;
    }
    
    .bbhg-search-meta {
        gap: 6px;
        margin-bottom: 10px;
    }
    
    .bbhg-search-volume {
        padding: 5px 8px;
        font-size: 11px;
        gap: 4px;
    }
    
    .bbhg-search-volume svg {
        width: 12px;
        height: 12px;
    }
    
    .bbhg-search-category-tag {
        padding: 5px 8px;
        font-size: 11px;
    }
    
    .bbhg-search-time {
        padding: 5px 8px;
        font-size: 11px;
    }
    
    .bbhg-search-time svg {
        width: 10px;
        height: 10px;
    }
    
    /* Related Terms */
    .bbhg-search-related {
        margin-top: 8px;
        gap: 4px;
    }
    
    .bbhg-related-label {
        font-size: 10px;
        width: 100%;
        margin-bottom: 2px;
    }
    
    .bbhg-related-term {
        padding: 3px 6px;
        font-size: 10px;
    }
    
    /* Action Buttons */
    .bbhg-search-card-actions {
        padding: 10px 12px;
        gap: 6px;
        flex-wrap: wrap;
    }
    
    .bbhg-search-action {
        padding: 8px 10px;
        font-size: 11px;
        gap: 4px;
        flex: 1 1 calc(50% - 3px);
        min-width: calc(50% - 3px);
        justify-content: center;
    }
    
    .bbhg-search-action.explore {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .bbhg-search-action svg {
        width: 12px;
        height: 12px;
    }
    
    /* No Results */
    .bbhg-no-results {
        padding: 40px 16px;
    }
    
    .bbhg-no-results-icon {
        font-size: 36px;
        margin-bottom: 12px;
    }
    
    .bbhg-no-results h4 {
        font-size: 16px;
    }
    
    .bbhg-no-results p {
        font-size: 13px;
    }
}

/* Extra small screens */
@media (max-width: 380px) {
    .bbhg-search-action {
        flex: 1 1 100%;
        min-width: 100%;
    }
}

/* Related Terms styling */
.bbhg-search-related {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.bbhg-related-label {
    font-size: 11px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-related-term {
    display: inline-flex;
    padding: 4px 8px;
    background: var(--bbhg-gray-100);
    border-radius: 6px;
    font-size: 11px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-related-term:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
}

/* No results styling */
.bbhg-no-results {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-no-results-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-no-results h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 8px 0;
}

.bbhg-no-results p {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

/* Retry Button */
.bbhg-retry-btn {
    margin-top: 15px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.bbhg-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}


/* Search Snippet */
.bbhg-search-snippet {
    font-size: 13px;
    color: #666;
    margin: 8px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Source Badge */
.bbhg-search-source-badge {
    font-size: 11px;
    color: #888;
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}


/* ========================================
   SOCIAL FEED TAB STYLES
   ======================================== */

.bbhg-social-feed-header {
    margin-bottom: 25px;
}

.bbhg-social-feed-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bbhg-social-feed-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.bbhg-social-feed-title svg {
    width: 28px;
    height: 28px;
    color: #667eea;
}

.bbhg-social-feed-subtitle {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

/* Source Selector */
.bbhg-social-feed-sources {
    background: var(--bbhg-gray-50);
    padding: 15px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.bbhg-source-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.bbhg-source-tab {
    padding: 8px 16px;
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bbhg-source-tab:hover {
    border-color: #667eea;
    background: #f8f9ff;
    transform: translateY(-1px);
}

.bbhg-source-tab.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: #667eea;
}

/* Feed Info */
.bbhg-social-feed-info {
    margin-bottom: 20px;
}

.bbhg-social-feed-count {
    font-size: 14px;
    color: #1f2937;
    font-weight: 600;
}

/* Feed Grid */
.bbhg-social-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
}

@media (max-width: 768px) {
    .bbhg-social-feed-grid {
        grid-template-columns: 1fr;
    }
}

/* Feed Card */
.bbhg-feed-card {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.bbhg-feed-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: #667eea;
}

/* Feed Image */
.bbhg-feed-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: var(--bbhg-gray-100);
}

.bbhg-feed-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bbhg-feed-card:hover .bbhg-feed-image img {
    transform: scale(1.05);
}

/* Feed Content */
.bbhg-feed-content {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Feed Categories */
.bbhg-feed-categories {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bbhg-feed-category-tag {
    padding: 4px 10px;
    background: #f0f4ff;
    color: #667eea;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Feed Title */
.bbhg-feed-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.bbhg-feed-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.bbhg-feed-title a:hover {
    color: #667eea;
}

/* Feed Description */
.bbhg-feed-description {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.6;
    margin: 0 0 15px 0;
    flex: 1;
}

/* Feed Hashtags */
.bbhg-feed-hashtags {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 0;
    border-top: 1px solid var(--bbhg-gray-100);
    border-bottom: 1px solid var(--bbhg-gray-100);
    margin-bottom: 12px;
}

.bbhg-feed-hashtags svg {
    color: #667eea;
    flex-shrink: 0;
}

.bbhg-feed-hashtag {
    padding: 4px 10px;
    background: var(--bbhg-gray-50);
    color: #667eea;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bbhg-feed-hashtag:hover {
    background: #667eea;
    color: white;
}

/* Feed Footer */
.bbhg-feed-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.bbhg-feed-date {
    font-size: 13px;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bbhg-feed-date svg {
    color: #374151;
}

/* Feed Actions */
.bbhg-feed-actions {
    display: flex;
    gap: 10px;
}

.bbhg-feed-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.bbhg-feed-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.bbhg-feed-action svg {
    width: 16px;
    height: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-social-feed-title {
        font-size: 20px;
    }
    
    .bbhg-source-tabs {
        gap: 6px;
    }
    
    .bbhg-source-tab {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    .bbhg-feed-image {
        height: 180px;
    }
    
    .bbhg-feed-content {
        padding: 15px;
    }
    
    .bbhg-feed-title {
        font-size: 16px;
    }
    
    .bbhg-feed-description {
        font-size: 13px;
    }
}

/* ================================
   ENHANCED SEARCHES PANEL
   ================================ */

/* Search Insights Overview */
.bbhg-search-insights-overview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-search-insight-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--bbhg-white) 0%, var(--bbhg-gray-100) 100%);
    border-radius: var(--bbhg-radius);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-insight-icon {
    font-size: 24px;
}

.bbhg-insight-content {
    display: flex;
    flex-direction: column;
}

.bbhg-insight-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-insight-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Category Quick Filters */
.bbhg-search-category-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 8px 0;
    overflow-x: auto;
    scrollbar-width: none;
}

.bbhg-search-category-filters::-webkit-scrollbar {
    display: none;
}

.bbhg-filter-label-sm {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
}

.bbhg-search-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--bbhg-gray-300);
    background: var(--bbhg-white);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-search-cat-pill:hover {
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-search-cat-pill.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

/* Enhanced Searches Info */
.bbhg-searches-source {
    font-size: 11px;
    color: #1f2937;
    margin-left: 8px;
}

.bbhg-last-updated {
    font-size: 11px;
    color: #1f2937;
}

@media (max-width: 768px) {
    .bbhg-search-insights-overview {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-search-insight-card {
        padding: 10px 12px;
    }
    
    .bbhg-insight-icon {
        font-size: 20px;
    }
    
    .bbhg-insight-value {
        font-size: 16px;
    }
}

/* ================================
   TOOLS PANEL
   ================================ */

.bbhg-tools-content {
    padding: 0;
}

.bbhg-tools-header {
    margin-bottom: 20px;
}

.bbhg-tools-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 6px 0;
}

.bbhg-tools-title svg {
    color: var(--bbhg-primary);
}

.bbhg-tools-subtitle {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

.bbhg-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bbhg-tool-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    transition: all 0.2s ease;
}

.bbhg-tool-card:hover {
    border-color: var(--bbhg-primary-light);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-tool-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.bbhg-tool-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 6px 0;
}

.bbhg-tool-desc {
    font-size: 13px;
    color: #1f2937;
    margin: 0 0 14px 0;
}

.bbhg-tool-body {
    margin-top: 10px;
}

.bbhg-tool-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    resize: none;
    font-family: inherit;
}

.bbhg-tool-input:focus {
    outline: none;
    border-color: var(--bbhg-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.bbhg-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 10px;
}

.bbhg-tool-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

/* Hashtag Counter */
.bbhg-counter-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding: 12px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
}

.bbhg-counter-stat {
    text-align: center;
}

.bbhg-counter-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--bbhg-primary);
}

.bbhg-counter-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
}

.bbhg-counter-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    background: #fef3c7;
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    color: #92400e;
}

/* Caption Templates */
.bbhg-caption-categories {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bbhg-caption-cat {
    padding: 6px 12px;
    border: 1px solid var(--bbhg-gray-300);
    background: var(--bbhg-white);
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-caption-cat:hover {
    border-color: var(--bbhg-primary);
}

.bbhg-caption-cat.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-caption-output {
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
    padding: 14px;
    margin-bottom: 10px;
}

.bbhg-caption-template {
    font-size: 14px;
    color: var(--bbhg-gray-800);
    line-height: 1.5;
    margin: 0;
    font-style: italic;
}

/* Emoji Finder */
.bbhg-emoji-search {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    margin-bottom: 12px;
}

.bbhg-emoji-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-emoji {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-emoji:hover {
    background: var(--bbhg-primary-light);
    transform: scale(1.1);
}

.bbhg-emoji-copied {
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--bbhg-success);
    color: white;
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

/* Text Formatter */
.bbhg-formatter-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    margin-bottom: 10px;
}

.bbhg-formatter-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.bbhg-format-style {
    padding: 6px 12px;
    border: 1px solid var(--bbhg-gray-300);
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-format-style:hover {
    border-color: var(--bbhg-primary);
    background: var(--bbhg-gray-100);
}

.bbhg-formatter-output {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
    padding: 12px;
}

.bbhg-formatted-text {
    font-size: 14px;
    color: var(--bbhg-gray-800);
    word-break: break-all;
}

.bbhg-copy-formatted {
    padding: 6px 12px;
    background: var(--bbhg-primary);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

/* Best Time Calculator */
.bbhg-timezone-select {
    margin-bottom: 14px;
}

.bbhg-timezone-select label {
    display: block;
    font-size: 12px;
    color: var(--bbhg-gray-700);
    margin-bottom: 6px;
}

.bbhg-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    background: var(--bbhg-white);
}

.bbhg-best-times {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-time-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
}

.bbhg-time-platform {
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-800);
}

.bbhg-time-slot {
    font-size: 12px;
    color: var(--bbhg-primary);
    font-weight: 600;
}

/* Hashtag Mixer */
.bbhg-mixer-options {
    margin-bottom: 12px;
}

.bbhg-mixer-options label {
    display: block;
    font-size: 12px;
    color: var(--bbhg-gray-700);
    margin-bottom: 6px;
}

.bbhg-mixer-types {
    display: flex;
    gap: 6px;
}

.bbhg-mixer-type {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--bbhg-gray-300);
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-mixer-type:hover {
    border-color: var(--bbhg-primary);
}

.bbhg-mixer-type.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-mixer-count {
    margin-bottom: 12px;
}

.bbhg-mixer-count label {
    display: block;
    font-size: 12px;
    color: var(--bbhg-gray-700);
    margin-bottom: 6px;
}

.bbhg-mixer-count input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bbhg-gray-200);
    outline: none;
}

.bbhg-mixer-topic {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    margin-bottom: 10px;
}

.bbhg-mixer-output {
    margin-top: 14px;
    padding: 14px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-sm);
}

@media (max-width: 768px) {
    .bbhg-tools-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-counter-results {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-mixer-types {
        flex-wrap: wrap;
    }
}


/* ================================
   Google Trends Panel Styles
   ================================ */
.bbhg-google-header {
    background: linear-gradient(135deg, #4285f4 0%, #34a853 50%, #fbbc04 75%, #ea4335 100%);
    padding: 20px;
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    color: white;
}

.bbhg-google-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 6px;
}

.bbhg-google-badge {
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-google-desc {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.bbhg-google-regions {
    background: var(--bbhg-gray-50);
    padding: 14px;
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-region-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-region-label svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.bbhg-region-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-region-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-region-pill:hover {
    border-color: #4285f4;
    color: #4285f4;
    background: rgba(66, 133, 244, 0.05);
}

.bbhg-region-pill.active {
    background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%);
    color: red;
    border-color: transparent;
}

.bbhg-google-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-google-stat {
    background: white;
    padding: 16px;
    border-radius: var(--bbhg-radius);
    text-align: center;
    border: 1px solid var(--bbhg-gray-200);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: #4285f4;
    margin-bottom: 4px;
}

.bbhg-stat-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-google-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.bbhg-google-refresh {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.3);
}

.bbhg-google-refresh:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(66, 133, 244, 0.4);
}

.bbhg-google-refresh svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.bbhg-google-refresh.loading svg {
    animation: spin 1s linear infinite;
}

.bbhg-google-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.bbhg-google-card {
    background: white;
    border-radius: var(--bbhg-radius);
    border: 1px solid var(--bbhg-gray-200);
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.bbhg-google-card:hover {
    border-color: #4285f4;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.15);
    transform: translateY(-2px);
}

.bbhg-google-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #4285f4 0%, #34a853 50%, #fbbc04 75%, #ea4335 100%);
}

.bbhg-google-rank {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #4285f4 0%, #1a73e8 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.bbhg-google-hashtag {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin-bottom: 6px;
    padding-right: 35px;
}

.bbhg-google-original {
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-google-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bbhg-google-traffic {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(52, 168, 83, 0.1);
    color: #34a853;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.bbhg-google-traffic svg {
    width: 12px;
    height: 12px;
}

.bbhg-google-region-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bbhg-gray-100);
    color: #1f2937;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.bbhg-google-add {
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: var(--bbhg-gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    opacity: 0;
}

.bbhg-google-card:hover .bbhg-google-add {
    opacity: 1;
}

.bbhg-google-add:hover {
    background: #4285f4;
    color: white;
}

.bbhg-google-add svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.5;
}

.bbhg-google-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: #1f2937;
}

.bbhg-google-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .bbhg-google-stats {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-google-stat {
        padding: 12px 8px;
    }
    
    .bbhg-stat-value {
        font-size: 18px;
    }
    
    .bbhg-region-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px;
    }
    
    .bbhg-region-pill {
        flex-shrink: 0;
    }
}


/* ================================
   Insights Panel (Trend Intelligence)
   ================================ */
.bbhg-insights-header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    padding: 20px;
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    color: white;
}

.bbhg-insights-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.bbhg-insights-badge {
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-insights-desc {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.bbhg-insights-sources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.bbhg-source-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    transition: all 0.2s ease;
}

.bbhg-source-card.active {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

.bbhg-source-icon {
    font-size: 18px;
}

.bbhg-source-name {
    flex: 1;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-source-status {
    color: #10b981;
    font-size: 10px;
}

.bbhg-insights-action {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.bbhg-insights-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.35);
}

.bbhg-insights-analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

.bbhg-insights-analyze-btn svg {
    width: 18px;
    height: 18px;
}

.bbhg-insights-analyze-btn.loading svg {
    animation: spin 1s linear infinite;
}

.bbhg-insight-section {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    margin-bottom: 16px;
}

/* Reddit Intel Section */
.bbhg-reddit-intel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 8px;
    margin-top: 8px;
}

.bbhg-insight-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bbhg-gray-100);
}

.bbhg-insight-section-title svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: #6366f1;
}

.bbhg-insight-placeholder,
.bbhg-radar-placeholder {
    text-align: center;
    padding: 30px;
    color: #374151;
    font-size: 13px;
}

.bbhg-velocity-grid,
.bbhg-crossplatform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-velocity-card {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    padding: 14px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-velocity-card:hover {
    background: var(--bbhg-gray-100);
    transform: translateY(-2px);
}

.bbhg-velocity-topic {
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 6px;
}

.bbhg-velocity-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.bbhg-velocity-growth {
    color: #10b981;
    font-weight: 600;
}

.bbhg-velocity-source {
    color: #1f2937;
}

.bbhg-velocity-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 0 0 4px 4px;
}

.bbhg-category-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}

.bbhg-category-item {
    text-align: center;
    padding: 14px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
}

.bbhg-category-percent {
    font-size: 24px;
    font-weight: 700;
    color: #6366f1;
}

.bbhg-category-label {
    font-size: 11px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-sentiment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bbhg-sentiment-card {
    text-align: center;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
}

.bbhg-sentiment-emoji {
    font-size: 28px;
    margin-bottom: 8px;
}

.bbhg-sentiment-label {
    font-size: 12px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-sentiment-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-top: 4px;
}

.bbhg-timing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.bbhg-timing-card {
    padding: 14px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    text-align: center;
}

.bbhg-timing-time {
    font-size: 18px;
    font-weight: 700;
    color: #6366f1;
}

.bbhg-timing-label {
    font-size: 11px;
    color: #1f2937;
    margin-top: 4px;
}

/* Top Hashtags Grid */
.bbhg-top-hashtags-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-source-hashtags-group {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    padding: 14px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-source-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-source-group-header .bbhg-source-name {
    font-weight: 600;
    color: var(--bbhg-gray-800);
    font-size: 13px;
}

.bbhg-source-group-header .bbhg-source-count {
    font-size: 11px;
    color: #1f2937;
    background: var(--bbhg-gray-200);
    padding: 3px 8px;
    border-radius: 10px;
}

.bbhg-source-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-insight-hashtag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    padding: 6px 10px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-insight-hashtag:hover {
    border-color: var(--bbhg-primary);
    background: var(--bbhg-gray-100);
    transform: translateY(-1px);
}

.bbhg-insight-hashtag .bbhg-hashtag-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-insight-hashtag .bbhg-hashtag-score {
    font-size: 10px;
    font-weight: 600;
    color: white;
    padding: 2px 6px;
    border-radius: 8px;
    min-width: 24px;
    text-align: center;
}

/* ================================
   Radar Panel (Viral Predictor)
   ================================ */
.bbhg-radar-header {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #eab308 100%);
    padding: 20px;
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    color: white;
}

.bbhg-radar-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
}

.bbhg-radar-badge {
    background: rgba(255, 255, 255, 0.25);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-radar-desc {
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
}

.bbhg-radar-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-radar-filter label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-radar-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-radar-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-radar-pill:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.bbhg-radar-pill.active {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white;
    border-color: transparent;
}

/* Time Horizon Pills */
.bbhg-horizon-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-horizon-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-horizon-pill:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.bbhg-horizon-pill.active {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white !important;
    border-color: transparent;
}

/* Category Focus Pills */
.bbhg-focus-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-focus-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-focus-pill:hover {
    border-color: #ef4444;
    color: #ef4444;
}

.bbhg-focus-pill.active {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white !important;
    border-color: transparent;
}

.bbhg-radar-action {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.bbhg-radar-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.35);
}

.bbhg-radar-scan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.45);
}

.bbhg-radar-scan-btn svg {
    width: 20px;
    height: 20px;
}

.bbhg-radar-scan-btn.loading svg {
    animation: radar-sweep 2s linear infinite;
}

@keyframes radar-sweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bbhg-radar-section {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    margin-bottom: 16px;
}

.bbhg-radar-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 14px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bbhg-gray-100);
}

.bbhg-radar-section-title svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: #ef4444;
}

.bbhg-radar-pulse {
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    animation: pulse-ring 1.5s ease-out infinite;
}

@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.bbhg-emerging-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

.bbhg-emerging-card {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    padding: 14px;
    position: relative;
    cursor: pointer;
    transition: all 0.2s ease;
    border-left: 4px solid transparent;
}

.bbhg-emerging-card:hover {
    background: var(--bbhg-gray-100);
    transform: translateX(4px);
}

.bbhg-emerging-card.hot {
    border-left-color: #ef4444;
}

.bbhg-emerging-card.warm {
    border-left-color: #f97316;
}

.bbhg-emerging-card.rising {
    border-left-color: #eab308;
}

.bbhg-emerging-topic {
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 6px;
}

.bbhg-emerging-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}

.bbhg-emerging-stage {
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 10px;
}

.bbhg-emerging-stage.early {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
}

.bbhg-emerging-stage.growing {
    background: rgba(249, 115, 22, 0.15);
    color: #ea580c;
}

.bbhg-emerging-stage.breaking {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

.bbhg-emerging-time {
    color: #1f2937;
}

.bbhg-emerging-source {
    color: var(--bbhg-primary);
    font-weight: 500;
    padding: 1px 6px;
    background: rgba(79, 70, 229, 0.1);
    border-radius: 8px;
    font-size: 10px;
}

.bbhg-viral-source {
    font-size: 10px;
    color: var(--bbhg-primary);
    margin-bottom: 8px;
    font-weight: 500;
}

.bbhg-cluster-source {
    font-size: 9px;
    color: #1f2937;
    font-weight: 400;
}

.bbhg-viral-scores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.bbhg-viral-card {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    padding: 14px;
    text-align: center;
}

.bbhg-viral-topic {
    font-weight: 600;
    font-size: 13px;
    color: var(--bbhg-gray-800);
    margin-bottom: 10px;
}

.bbhg-viral-score-ring {
    width: 70px;
    height: 70px;
    margin: 0 auto 10px;
    position: relative;
}

.bbhg-viral-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-viral-label {
    font-size: 11px;
    color: #1f2937;
}

.bbhg-trajectory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-trajectory-card {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    padding: 14px;
}

.bbhg-trajectory-topic {
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 8px;
}

.bbhg-trajectory-chart {
    height: 40px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
}

.bbhg-trajectory-bar {
    flex: 1;
    background: linear-gradient(180deg, #ef4444 0%, #f97316 100%);
    border-radius: 2px 2px 0 0;
    min-height: 4px;
}

.bbhg-trajectory-prediction {
    font-size: 11px;
    color: #1f2937;
    margin-top: 8px;
}

.bbhg-timing-recommendations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.bbhg-timing-rec-card {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-sm);
    padding: 14px;
    text-align: center;
}

.bbhg-timing-rec-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.bbhg-timing-rec-window {
    font-size: 15px;
    font-weight: 700;
    color: #ef4444;
}

.bbhg-timing-rec-label {
    font-size: 11px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-hashtag-clusters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-cluster-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cluster-tag:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.bbhg-cluster-tag .bbhg-cluster-score {
    font-size: 10px;
    padding: 2px 6px;
    background: var(--bbhg-gray-100);
    border-radius: 10px;
    color: #1f2937;
}

@media (max-width: 768px) {
    .bbhg-insights-sources {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-radar-controls {
        flex-direction: column;
    }
    
    .bbhg-sentiment-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-velocity-grid,
    .bbhg-emerging-grid {
        grid-template-columns: 1fr;
    }
}

/* ================================
   YouTube Section Styles
   ================================ */

/* YouTube Header */
.bbhg-youtube-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 16px;
    background: #000000;
    border-radius: var(--bbhg-radius);
}

.bbhg-youtube-title-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bbhg-youtube-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.bbhg-youtube-title svg {
    color: #ffffff;
    stroke: #ffffff;
}

.bbhg-youtube-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.bbhg-youtube-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Quota Badge */
.bbhg-youtube-quota-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
}

.bbhg-youtube-quota-badge.warning {
    background: #fef3c7;
    color: #d97706;
}

.bbhg-youtube-quota-badge.error {
    background: #fee2e2;
    color: #dc2626;
}

.bbhg-youtube-quota-badge.ready {
    background: #d1fae5;
    color: #059669;
}

/* Refresh Button */
.bbhg-youtube-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #FF0000 0%, #cc0000 100%);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-youtube-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.bbhg-youtube-refresh-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.bbhg-youtube-refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

/* Category Tabs */
.bbhg-youtube-category-tabs {
    display: flex;
    gap: 8px;
    padding: 4px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.bbhg-youtube-category-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-youtube-cat-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid transparent;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-youtube-cat-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
}

.bbhg-youtube-cat-tab.active {
    background: #FF0000;
    color: white;
    border-color: #FF0000;
}

.bbhg-youtube-cat-tab svg {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* YouTube Filters */
.bbhg-youtube-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bbhg-gray-200);
    margin-bottom: 14px;
}

.bbhg-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-filter-label-small {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-youtube-region-pills,
.bbhg-youtube-sort-pills,
.bbhg-youtube-type-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bbhg-yt-region-pill,
.bbhg-yt-sort-pill,
.bbhg-yt-time-pill,
.bbhg-yt-type-pill {
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-yt-region-pill:hover,
.bbhg-yt-sort-pill:hover,
.bbhg-yt-time-pill:hover,
.bbhg-yt-type-pill:hover {
    border-color: #374151;
    color: var(--bbhg-gray-800);
}

.bbhg-yt-region-pill.active,
.bbhg-yt-sort-pill.active,
.bbhg-yt-time-pill.active,
.bbhg-yt-type-pill.active {
    background: var(--bbhg-gray-900);
    border-color: var(--bbhg-gray-900);
    color: white;
}

.bbhg-youtube-time-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* YouTube Stats */
.bbhg-youtube-stats {
    display: flex;
    gap: 24px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 0, 0, 0.1);
}

.bbhg-yt-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.bbhg-yt-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-yt-stat-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Cache Status Indicators */
.bbhg-yt-stat-value.fresh {
    color: #10b981;
}

.bbhg-yt-stat-value.cached {
    color: #6366f1;
}

.bbhg-yt-stat-value.fresh::before {
    content: '●';
    margin-right: 4px;
    font-size: 8px;
    vertical-align: middle;
}

.bbhg-yt-stat-value.cached::before {
    content: '◐';
    margin-right: 4px;
    font-size: 10px;
    vertical-align: middle;
}

/* Compact Stats Layout */
.bbhg-youtube-stats.bbhg-youtube-stats-compact {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
    padding: 8px 16px;
    background: #ffffff;
    border: none;
    border-bottom: 1px solid var(--bbhg-gray-200);
    border-radius: 0;
    margin-bottom: 0;
}

.bbhg-yt-stat-inline {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-yt-stat-inline .bbhg-yt-stat-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: none;
    letter-spacing: 0;
}

.bbhg-yt-stat-inline .bbhg-yt-stat-value {
    font-size: 11px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

/* YouTube Container */
.bbhg-youtube-container {
    min-height: 300px;
    overflow-x: hidden;
}

/* YouTube Panel overflow fix */
#bbhg-panel-youtube {
    overflow-x: hidden;
    max-width: 100%;
}

.bbhg-youtube-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: #1f2937;
}

/* Video Grid */
.bbhg-youtube-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    overflow-x: hidden;
    max-width: 100%;
}

/* Video Card */
.bbhg-youtube-card {
    background: white;
    border-radius: var(--bbhg-radius);
    overflow: hidden;
    border: 1px solid var(--bbhg-gray-200);
    transition: all 0.2s ease;
    cursor: pointer;
    max-width: 100%;
}

.bbhg-youtube-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--bbhg-shadow-lg);
    border-color: var(--bbhg-gray-300);
}

.bbhg-youtube-thumbnail {
    position: relative;
    aspect-ratio: 16/9;
    overflow: hidden;
    background: var(--bbhg-gray-100);
}

.bbhg-youtube-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.bbhg-youtube-card:hover .bbhg-youtube-thumbnail img {
    transform: scale(1.05);
}

.bbhg-youtube-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    padding: 3px 6px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
}

.bbhg-youtube-live-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    background: #FF0000;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-youtube-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.bbhg-youtube-card:hover .bbhg-youtube-play-overlay {
    opacity: 1;
}

.bbhg-youtube-play-overlay svg {
    width: 48px;
    height: 48px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.bbhg-youtube-info {
    padding: 12px;
    overflow: hidden;
}

.bbhg-youtube-video-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

.bbhg-youtube-channel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-youtube-channel-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.bbhg-youtube-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 10px;
}

.bbhg-youtube-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-youtube-meta svg {
    width: 12px;
    height: 12px;
}

/* Video Hashtags */
.bbhg-youtube-video-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--bbhg-gray-100);
}

.bbhg-youtube-video-tag {
    padding: 4px 10px;
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-youtube-video-tag:hover {
    background: #FF0000;
    border-color: #FF0000;
    color: white;
}

.bbhg-youtube-no-tags {
    font-size: 11px;
    color: #374151;
    font-style: italic;
}

/* Extracted Hashtags Section */
.bbhg-youtube-hashtags-section {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%);
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid rgba(255, 0, 0, 0.15);
}

.bbhg-youtube-hashtags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-youtube-hashtags-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0;
}

.bbhg-youtube-hashtags-title svg {
    color: #FF0000;
}

.bbhg-copy-all-yt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--bbhg-gray-900);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-copy-all-yt-btn:hover {
    background: var(--bbhg-gray-800);
}

/* Hashtag Grid */
.bbhg-youtube-hashtags-grid {
    display: flex;
    flex-direction: column; /* Stack AI section on top of regular hashtags */
    gap: 16px;
    width: 100%;
    min-width: 0; /* Allow children to shrink below content size */
}

/* Regular hashtag items wrap */
.bbhg-youtube-hashtags-grid > .bbhg-yt-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-yt-hashtag-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-yt-hashtag-item:hover {
    border-color: #FF0000;
    transform: translateY(-1px);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-yt-hashtag-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-yt-hashtag-count {
    padding: 2px 8px;
    background: var(--bbhg-gray-100);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: #1f2937;
}

/* Empty State */
.bbhg-youtube-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-youtube-empty svg {
    width: 64px;
    height: 64px;
    color: var(--bbhg-gray-300);
    margin-bottom: 16px;
}

.bbhg-youtube-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
}

.bbhg-youtube-empty-text {
    font-size: 13px;
    color: #1f2937;
    max-width: 300px;
}

/* API Key Required State */
.bbhg-youtube-api-required {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fff 100%);
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid #fcd34d;
}

.bbhg-youtube-api-required svg {
    width: 48px;
    height: 48px;
    color: #d97706;
    margin-bottom: 16px;
}

.bbhg-youtube-api-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 8px;
}

.bbhg-youtube-api-text {
    font-size: 13px;
    color: #1f2937;
    max-width: 400px;
    margin-bottom: 16px;
}

.bbhg-youtube-api-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: #d97706;
    color: white;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbhg-youtube-api-link:hover {
    background: #b45309;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .bbhg-youtube-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-youtube-actions {
        width: 100%;
        justify-content: space-between;
    }
    
    .bbhg-youtube-filters {
        flex-direction: column;
        gap: 12px;
    }
    
    .bbhg-filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .bbhg-youtube-region-pills,
    .bbhg-youtube-sort-pills,
    .bbhg-youtube-type-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
    
    .bbhg-youtube-stats {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .bbhg-youtube-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-youtube-hashtags-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ========================================
   FIXES: Word Wrap & Icon Colors
======================================== */

/* Long hashtag word wrap - prevent horizontal scroll */
.bbhg-velocity-topic,
.bbhg-emerging-topic,
.bbhg-viral-topic,
.bbhg-trajectory-topic,
.bbhg-cluster-tag,
.bbhg-trending-hashtag,
.bbhg-google-title span,
.bbhg-insights-title span,
.bbhg-radar-title span {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.bbhg-velocity-card,
.bbhg-emerging-card,
.bbhg-viral-card,
.bbhg-trajectory-card {
    overflow: hidden;
    word-wrap: break-word;
}

.bbhg-cluster-tag {
    white-space: normal;
    word-break: break-word;
}

/* Google Trends Real-Time - Banner icon white */
.bbhg-google-title svg {
    color: white;
    stroke: white;
}

/* Google Trends Refresh button - icon white */
.bbhg-google-refresh svg {
    color: white;
    stroke: white;
}

/* Trend Intelligence - Banner icon white */
.bbhg-insights-title svg {
    color: white;
    stroke: white;
}

/* Trend Intelligence - Run Analysis button icon white */
.bbhg-insights-analyze-btn svg,
#bbhg-run-insights svg {
    color: white;
    stroke: white;
}

/* Viral Radar - Banner icon white */
.bbhg-radar-title svg {
    color: white;
    stroke: white;
}

/* Viral Radar - Scan Radar button icon white */
.bbhg-radar-scan-btn svg,
#bbhg-scan-radar svg {
    color: white;
    stroke: white;
}

/* Viral Radar - Time Horizon filter buttons text white when active */
.bbhg-horizon-pill.active {
    color: white !important;
}

/* Viral Radar - Category Focus filter buttons text white when active */
.bbhg-focus-pill.active {
    color: white !important;
}

/* News source filter pills - red text when active */
.bbhg-source-pill.active,
button.bbhg-source-pill.active {
    color: #dc2626 !important;
}

/* Google Trends region filter pills - white text when active */
.bbhg-region-pill.active,
button.bbhg-region-pill.active {
    color: white !important;
}

/* ==================== AI ASSISTANT PANEL ==================== */

.bbhg-ai-container {
    padding: 20px;
    min-height: 500px;
}

/* AI Header */
.bbhg-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 24px;
    color: white;
}

.bbhg-ai-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-ai-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-ai-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-ai-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-ai-title p,
.bbhg-ai-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-ai-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

.bbhg-status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

/* AI Feature Cards */
.bbhg-ai-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-ai-feature-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bbhg-ai-feature-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);
    transform: translateY(-2px);
}

.bbhg-feature-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.bbhg-ai-feature-card h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-ai-feature-card p {
    margin: 0;
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
}

/* AI Chat Interface */
.bbhg-ai-chat {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    display: flex;
    flex-direction: column;
    height: 500px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.bbhg-chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
    background: var(--bbhg-gray-50);
}

.bbhg-chat-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    flex: 1;
}

.bbhg-chat-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-chat-back:hover {
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-900);
}

.bbhg-chat-back svg {
    width: 16px;
    height: 16px;
}

.bbhg-chat-clear {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--bbhg-error);
    border-radius: 6px;
    font-size: 13px;
    color: var(--bbhg-error);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-chat-clear:hover {
    background: var(--bbhg-error);
    color: white;
}

.bbhg-chat-clear svg {
    width: 14px;
    height: 14px;
}

.bbhg-chat-fullscreen {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    background: none;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-chat-fullscreen:hover {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-chat-fullscreen svg {
    width: 16px;
    height: 16px;
}

/* Fullscreen Mode */
.bbhg-ai-chat.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    z-index: 999999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.bbhg-ai-chat.fullscreen .bbhg-chat-messages {
    flex: 1;
    max-height: none;
}

.bbhg-ai-chat.fullscreen .bbhg-chat-fullscreen .bbhg-expand-icon {
    display: none;
}

.bbhg-ai-chat.fullscreen .bbhg-chat-fullscreen .bbhg-collapse-icon {
    display: block !important;
}

.bbhg-chat-messages {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-chat-message {
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}

.bbhg-chat-message.user {
    align-self: flex-end;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    border-bottom-right-radius: 4px;
    max-width: 85%;
}

.bbhg-chat-message.assistant {
    align-self: flex-start;
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-900);
    border-bottom-left-radius: 4px;
    max-width: 100%;
    width: 100%;
}

.bbhg-chat-message.assistant pre {
    background: var(--bbhg-gray-800);
    color: #e5e7eb;
    padding: 12px;
    border-radius: 8px;
    margin: 8px 0;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: break-word;
}

.bbhg-chat-message.assistant code {
    background: var(--bbhg-gray-200);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    word-break: break-word;
}

.bbhg-chat-typing {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bbhg-gray-100);
    border-radius: 16px;
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.bbhg-chat-typing span {
    width: 8px;
    height: 8px;
    background: var(--bbhg-gray-400);
    border-radius: 50%;
    animation: bbhg-typing 1.4s ease-in-out infinite;
}

.bbhg-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.bbhg-chat-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bbhg-typing {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-4px); opacity: 1; }
}

.bbhg-chat-input-area {
    border-top: 1px solid var(--bbhg-gray-200);
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
}

.bbhg-chat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.bbhg-chat-suggestion {
    padding: 6px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 16px;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-chat-suggestion:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: #faf5ff;
}

.bbhg-chat-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.bbhg-chat-input-wrapper textarea {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 12px;
    font-size: 14px;
    resize: none;
    max-height: 120px;
    line-height: 1.5;
    transition: border-color 0.2s ease;
}

.bbhg-chat-input-wrapper textarea:focus {
    outline: none;
    border-color: #8b5cf6;
}

.bbhg-chat-send {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbhg-chat-send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.bbhg-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.bbhg-chat-send svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

/* AI Results Section */
.bbhg-ai-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.bbhg-results-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
    background: var(--bbhg-gray-50);
}

.bbhg-results-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: none;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-results-back:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-results-back svg {
    width: 16px;
    height: 16px;
}

.bbhg-results-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.bbhg-results-content {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* AI Result Cards */
.bbhg-ai-result-card {
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    margin-bottom: 16px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bbhg-ai-result-card * {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.bbhg-ai-result-card:last-child {
    margin-bottom: 0;
}

.bbhg-ai-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-ai-result-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-ai-score {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

.bbhg-ai-score.medium {
    background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}

.bbhg-ai-score.low {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.bbhg-ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bbhg-ai-tag {
    padding: 5px 10px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 11px;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    word-break: break-word;
}

.bbhg-ai-tag:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: #faf5ff;
}

/* AI Quick Actions */
.bbhg-ai-quick-actions {
    margin-top: 24px;
}

.bbhg-ai-quick-actions h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-quick-action-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-quick-action {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-quick-action:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: #faf5ff;
    transform: translateY(-1px);
}

.bbhg-action-icon {
    font-size: 16px;
}

/* AI No Key Warning */
.bbhg-ai-no-key {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-no-key-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-ai-no-key h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-ai-no-key p {
    margin: 0 0 20px 0;
    color: #1f2937;
}

/* Tab Badge */
.bbhg-tab-badge {
    display: inline-flex;
    padding: 2px 6px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
}

/* Hashtag Analysis Result */
.bbhg-hashtag-analysis {
    display: grid;
    gap: 16px;
}

.bbhg-analysis-score-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: var(--bbhg-radius);
    color: white;
}

.bbhg-analysis-score-card h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
    color: white;
}

.bbhg-analysis-score-card p {
    margin: 4px 0 0 0;
    font-size: 14px;
    font-weight: 700;
    color: white;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bbhg-big-score {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
    color: white;
}

.bbhg-analysis-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-analysis-item {
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px;
    padding: 14px;
}

.bbhg-analysis-item-label {
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.bbhg-analysis-item-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

/* Content Ideas Cards */
.bbhg-idea-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    margin-bottom: 16px;
    transition: all 0.2s ease;
}

.bbhg-idea-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bbhg-idea-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-idea-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0;
}

.bbhg-idea-format {
    padding: 4px 10px;
    background: var(--bbhg-gray-100);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
}

.bbhg-idea-hook {
    font-size: 14px;
    color: #1f2937;
    font-style: italic;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #8b5cf6;
}

.bbhg-idea-caption {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
    margin: 12px 0;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 8px;
    white-space: pre-wrap;
}

/* Strategy Builder Styles */
.bbhg-strategy-section {
    margin-bottom: 24px;
}

.bbhg-strategy-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-hashtag-set {
    background: var(--bbhg-gray-50);
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 12px;
}

.bbhg-hashtag-set-title {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

/* Prediction Cards */
.bbhg-prediction-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    margin-bottom: 12px;
}

.bbhg-prediction-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bbhg-prediction-topic {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-prediction-confidence {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
}

.bbhg-prediction-confidence.high { color: #ffffff; }
.bbhg-prediction-confidence.medium { color: #ffffff; }
.bbhg-prediction-confidence.low { color: #ffffff; }

.bbhg-prediction-reason {
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-ai-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-ai-features {
        grid-template-columns: 1fr;
    }
    
    .bbhg-ai-chat {
        height: 450px;
    }
    
    .bbhg-chat-header {
        padding: 10px 12px;
        gap: 8px;
    }
    
    .bbhg-chat-header h3 {
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .bbhg-chat-back {
        padding: 5px 8px;
        font-size: 11px;
        gap: 4px;
    }
    
    .bbhg-chat-back svg {
        width: 14px;
        height: 14px;
    }
    
    .bbhg-chat-clear {
        padding: 5px 8px;
        font-size: 11px;
        gap: 4px;
    }
    
    .bbhg-chat-clear svg {
        width: 12px;
        height: 12px;
    }
    
    .bbhg-chat-fullscreen {
        padding: 5px 8px;
    }
    
    .bbhg-chat-fullscreen svg {
        width: 14px;
        height: 14px;
    }
    
    .bbhg-chat-message {
        max-width: 90%;
    }
    
    .bbhg-quick-action-buttons {
        flex-direction: column;
    }
    
    .bbhg-quick-action {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   DISCOVER PANEL STYLES
   ================================ */

.bbhg-discover-container {
    padding: 0 4px;
}

/* Hero Section */
.bbhg-discover-hero {
    text-align: center;
    padding: 32px 20px;
    background: linear-gradient(135deg, var(--bbhg-primary-light) 0%, var(--bbhg-primary) 50%, var(--bbhg-primary-dark) 100%);
    border-radius: var(--bbhg-radius-lg);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.bbhg-discover-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-hero-shimmer 8s ease-in-out infinite;
}

@keyframes bbhg-hero-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(10%, 10%) rotate(5deg); }
}

.bbhg-discover-hero-icon {
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-hero-emoji {
    font-size: 48px;
    display: inline-block;
    animation: bbhg-float 3s ease-in-out infinite;
}

@keyframes bbhg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bbhg-discover-title {
    font-size: 26px;
    font-weight: 800;
    color: white;
    margin: 0 0 12px 0;
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bbhg-discover-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

/* Cache Notice */
.bbhg-cache-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 20px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    position: relative;
    z-index: 1;
}

.bbhg-cache-notice-icon {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}

.bbhg-cache-notice-content {
    flex: 1;
}

.bbhg-cache-notice-content strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 4px;
}

.bbhg-cache-notice-content p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 480px) {
    .bbhg-cache-notice {
        padding: 12px;
        gap: 10px;
    }
    
    .bbhg-cache-notice-icon {
        font-size: 18px;
    }
    
    .bbhg-cache-notice-content strong {
        font-size: 12px;
    }
    
    .bbhg-cache-notice-content p {
        font-size: 11px;
    }
}

/* Section Titles */
.bbhg-discover-section {
    margin-bottom: 28px;
}

.bbhg-discover-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-section-icon {
    font-size: 18px;
}

/* Quick Start Grid */
.bbhg-discover-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .bbhg-discover-grid {
        grid-template-columns: 1fr;
    }
}

.bbhg-discover-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px 16px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.bbhg-discover-card-counter {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(99,102,241,0.12), rgba(139,92,246,0.12));
    border: 1px solid rgba(99,102,241,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #6366f1;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.bbhg-discover-card:hover .bbhg-discover-card-counter {
    opacity: 1;
}

.bbhg-discover-card-interactive {
    cursor: pointer;
}

.bbhg-discover-card-interactive:hover {
    border-color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-md);
    transform: translateY(-4px);
}

.bbhg-discover-card-interactive:hover .bbhg-discover-card-action {
    color: var(--bbhg-primary);
}

.bbhg-discover-card-icon {
    font-size: 32px;
    margin-bottom: 12px;
    display: block;
}

.bbhg-discover-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin: 0 0 8px 0;
}

.bbhg-discover-card p {
    font-size: 13px;
    color: #1f2937;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.bbhg-discover-card-action {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    transition: color 0.2s ease;
}

/* Tips Carousel */
.bbhg-tips-carousel {
    position: relative;
    overflow: hidden;
    min-height: 100px;
}

.bbhg-tip-card {
    display: none;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    animation: bbhg-tip-fade 0.4s ease;
}

.bbhg-tip-card.bbhg-tip-active {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

@keyframes bbhg-tip-fade {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.bbhg-tip-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.bbhg-tip-card p {
    font-size: 14px;
    color: var(--bbhg-gray-800);
    margin: 0;
    line-height: 1.6;
}

.bbhg-tip-card p strong {
    color: var(--bbhg-dark);
}

.bbhg-tip-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.bbhg-tip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bbhg-gray-300);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tip-dot:hover {
    background: var(--bbhg-gray-400);
}

.bbhg-tip-dot.active {
    background: var(--bbhg-primary);
    width: 24px;
    border-radius: 4px;
}

/* CTA Button */
.bbhg-discover-cta {
    text-align: center;
    padding: 8px 0 16px;
}

.bbhg-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-primary-dark) 100%);
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}

.bbhg-cta-button span {
    color: #ffffff !important;
}

.bbhg-discover-cta .bbhg-cta-button {
    color: #ffffff !important;
}

.bbhg-discover-cta .bbhg-cta-button span {
    color: #ffffff !important;
}

button.bbhg-cta-button,
button.bbhg-cta-button span {
    color: #ffffff !important;
}

.bbhg-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.5);
}

.bbhg-cta-button svg {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.bbhg-cta-button:hover svg {
    transform: translateX(4px);
}


/* ================================
   HASHTAG COMPARISON STYLES
   ================================ */

.bbhg-hashtag-comparison {
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
}

.bbhg-comparison-header {
    text-align: center;
    padding: 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.bbhg-comparison-header h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
}

.bbhg-comparison-header p {
    margin: 0;
    opacity: 0.9;
    font-size: 12px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.bbhg-comparison-scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px 12px;
    background: var(--bbhg-gray-50);
    flex-wrap: wrap;
}

.bbhg-comparison-score {
    text-align: center;
    padding: 12px 16px;
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius);
    border: 2px solid var(--bbhg-gray-200);
    min-width: 80px;
    flex: 1;
    max-width: 120px;
    transition: all 0.3s ease;
}

.bbhg-comparison-score.winner {
    border-color: #10b981;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    transform: scale(1.02);
}

.bbhg-comparison-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--bbhg-primary);
    margin-bottom: 6px;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}

.bbhg-comparison-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--bbhg-dark);
    line-height: 1;
}

.bbhg-comparison-score.winner .bbhg-comparison-value {
    color: #10b981;
}

.bbhg-comparison-label {
    font-size: 11px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-comparison-vs {
    font-size: 14px;
    font-weight: 800;
    color: #374151;
    padding: 6px 10px;
    background: var(--bbhg-white);
    border-radius: 50%;
    border: 2px solid var(--bbhg-gray-200);
    flex-shrink: 0;
}

.bbhg-comparison-winner {
    text-align: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    font-size: 13px;
    color: #ffffff;
    word-wrap: break-word;
    line-height: 1.4;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.bbhg-comparison-table {
    border-top: 1px solid var(--bbhg-gray-200);
    width: 100%;
}

.bbhg-comparison-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--bbhg-gray-100);
}

.bbhg-comparison-row.header {
    background: var(--bbhg-gray-50);
    font-weight: 600;
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
}

.bbhg-comparison-cell {
    padding: 10px 6px;
    text-align: center;
    font-size: 11px;
    color: var(--bbhg-gray-700);
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}

.bbhg-comparison-row:not(.header) .bbhg-comparison-cell:first-child {
    font-weight: 600;
    color: var(--bbhg-gray-900);
    text-align: left;
}

.bbhg-comparison-recommendation {
    padding: 12px;
    background: var(--bbhg-gray-50);
    font-size: 11px;
    line-height: 1.5;
    color: var(--bbhg-gray-700);
    border-top: 1px solid var(--bbhg-gray-200);
    word-wrap: break-word;
    overflow-wrap: break-word;
}


/* ================================
   GOOGLE SUGGEST TAB STYLES
   ================================ */

.bbhg-suggest-content {
    padding: 0;
}

.bbhg-suggest-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #a855f7 0%, #d946ef 50%, #ec4899 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    color: white;
}

.bbhg-suggest-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-suggest-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-suggest-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-suggest-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-suggest-title p,
.bbhg-suggest-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-suggest-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

/* Suggest Header Mobile */
@media (max-width: 768px) {
    .bbhg-suggest-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
    }
    
    .bbhg-suggest-title {
        gap: 10px;
    }
    
    .bbhg-suggest-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
    
    .bbhg-suggest-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .bbhg-suggest-title h2 {
        font-size: 17px;
    }
    
    .bbhg-suggest-subtitle {
        font-size: 12px;
    }
    
    .bbhg-suggest-status {
        padding: 6px 12px;
        font-size: 12px;
    }
}

/* Search Box */
.bbhg-suggest-search-box {
    padding: 20px;
    background: var(--bbhg-white);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-suggest-input-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 50px;
    padding: 4px 4px 4px 16px;
    transition: all 0.2s ease;
}

.bbhg-suggest-input-wrapper:focus-within {
    border-color: var(--bbhg-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.bbhg-suggest-search-icon {
    width: 20px;
    height: 20px;
    stroke: var(--bbhg-gray-400);
    flex-shrink: 0;
}

.bbhg-suggest-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: var(--bbhg-dark);
    outline: none;
    padding: 8px 0;
}

.bbhg-suggest-input::placeholder {
    color: #374151;
}

.bbhg-suggest-search-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-primary-dark) 100%);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-suggest-search-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.4);
}

.bbhg-suggest-search-btn span {
    color: #ffffff !important;
}

.bbhg-suggest-search-btn svg {
    width: 16px;
    height: 16px;
    stroke: #ffffff;
}

/* Search Box Mobile */
@media (max-width: 480px) {
    .bbhg-suggest-search-box {
        padding: 12px;
    }
    
    .bbhg-suggest-input-wrapper {
        gap: 6px;
        padding: 4px 4px 4px 12px;
    }
    
    .bbhg-suggest-input {
        font-size: 14px;
        min-width: 0;
    }
    
    .bbhg-suggest-search-btn {
        padding: 8px 14px;
        font-size: 13px;
        flex-shrink: 0;
    }
    
    .bbhg-suggest-search-btn span {
        display: none;
    }
    
    .bbhg-suggest-search-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Quick Topics */
.bbhg-suggest-quick-topics {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.bbhg-suggest-quick-label {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-suggest-quick-btn {
    padding: 4px 12px;
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-700);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-suggest-quick-btn:hover {
    background: var(--bbhg-primary);
    color: #ffffff;
    border-color: var(--bbhg-primary);
}

/* Loading State */
.bbhg-suggest-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.bbhg-suggest-loading span {
    font-size: 14px;
    color: #1f2937;
}

/* Empty State */
.bbhg-suggest-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-suggest-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-suggest-empty h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin: 0 0 8px 0;
}

.bbhg-suggest-empty p {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
    max-width: 300px;
    margin: 0 auto;
}

/* Results Container */
.bbhg-suggest-results {
    padding: 0;
}

/* Section Header */
.bbhg-suggest-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-suggest-section-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin: 0;
}

.bbhg-suggest-section-header h4 svg {
    stroke: var(--bbhg-primary);
}

.bbhg-suggest-topic-badge {
    padding: 4px 12px;
    background: var(--bbhg-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
}

/* Insights Grid */
.bbhg-suggest-insights-section {
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-suggest-insights-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 20px;
}

@media (max-width: 600px) {
    .bbhg-suggest-insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bbhg-suggest-insight-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    text-align: center;
}

.bbhg-suggest-insight-card.full-width {
    grid-column: 1 / -1;
    text-align: left;
}

.bbhg-suggest-insight-card.opportunities {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-color: #fcd34d;
}

.bbhg-suggest-insight-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--bbhg-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.bbhg-suggest-insight-label {
    font-size: 12px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-suggest-trending-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.bbhg-suggest-term {
    padding: 4px 10px;
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-700);
    font-size: 12px;
    font-weight: 500;
    border-radius: 20px;
}

.bbhg-suggest-opportunities {
    margin: 10px 0 0 0;
    padding-left: 20px;
}

.bbhg-suggest-opportunities li {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin-bottom: 4px;
}

/* Suggestions List */
.bbhg-suggest-list-section {
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-suggest-list {
    max-height: 300px;
    overflow-y: auto;
}

.bbhg-suggest-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--bbhg-gray-100);
    transition: background 0.2s ease;
}

.bbhg-suggest-item:hover {
    background: var(--bbhg-gray-50);
}

.bbhg-suggest-item:last-child {
    border-bottom: none;
}

.bbhg-suggest-item-num {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-gray-100);
    color: #1f2937;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    flex-shrink: 0;
}

.bbhg-suggest-item-text {
    flex: 1;
    font-size: 14px;
    color: var(--bbhg-dark);
}

.bbhg-suggest-item-badge {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
}

.bbhg-suggest-item-badge.question {
    background: #dbeafe;
    color: #1d4ed8;
}

.bbhg-suggest-item-badge.howto {
    background: #dcfce7;
    color: #15803d;
}

/* Hashtags Section */
.bbhg-suggest-hashtags-section {
    /* No border bottom for last section */
}

.bbhg-suggest-hashtags-grid {
    padding: 20px;
}

.bbhg-suggest-hashtag-group {
    margin-bottom: 20px;
}

.bbhg-suggest-hashtag-group:last-child {
    margin-bottom: 0;
}

.bbhg-suggest-hashtag-category {
    display: inline-block;
    padding: 4px 12px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    margin-bottom: 10px;
}

.bbhg-suggest-hashtag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-suggest-hashtag-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-suggest-hashtag-item:hover {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
}

.bbhg-suggest-hashtag-item:hover .bbhg-suggest-hashtag-name,
.bbhg-suggest-hashtag-item:hover .bbhg-suggest-hashtag-score {
    color: #ffffff;
}

.bbhg-suggest-hashtag-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-dark);
    transition: color 0.2s ease;
}

.bbhg-suggest-hashtag-score {
    font-size: 11px;
    font-weight: 700;
    color: #1f2937;
    background: var(--bbhg-gray-200);
    padding: 2px 6px;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.bbhg-suggest-hashtag-item:hover .bbhg-suggest-hashtag-score {
    background: rgba(255, 255, 255, 0.2);
}

/* Copy Button */
.bbhg-copy-all-suggest-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-700);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-copy-all-suggest-btn:hover {
    background: var(--bbhg-primary);
    color: #ffffff;
    border-color: var(--bbhg-primary);
}

.bbhg-copy-all-suggest-btn:hover svg {
    stroke: #ffffff;
}

.bbhg-suggest-no-hashtags {
    text-align: center;
    color: #1f2937;
    font-size: 14px;
    padding: 20px;
}


/* ===== INTEL PANEL - Trending Intelligence ===== */
.bbhg-intel-container {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.bbhg-intel-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
    border-radius: var(--bbhg-radius);
    color: white;
}

.bbhg-intel-title {
    display: flex;
    align-items: center;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
    margin: 0;
}

.bbhg-intel-title svg {
    width: 24px;
    height: 24px;
    stroke: white;
    margin-right: 10px;
}

.bbhg-intel-subtitle {
    width: 100%;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 5px 0 0 0;
}

/* Stats Bar */
.bbhg-intel-stats {
    display: flex;
    gap: 15px;
    padding: 15px 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.bbhg-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 60px;
}

.bbhg-stat-icon {
    font-size: 18px;
    margin-bottom: 4px;
    opacity: 0.9;
}

.bbhg-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
}

.bbhg-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Category Tabs */
.bbhg-intel-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bbhg-intel-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-intel-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-intel-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-300);
}

.bbhg-intel-tab.active {
    background: transparent !important;
    color: #dc2626 !important;
    border-color: #dc2626 !important;
    box-shadow: none;
    transform: none;
    font-weight: 700;
}

.bbhg-intel-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background: var(--bbhg-gray-300);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bbhg-gray-700);
    margin-left: 4px;
}

.bbhg-intel-tab:hover .bbhg-intel-tab-count {
    background: var(--bbhg-gray-400);
}

.bbhg-intel-tab.active .bbhg-intel-tab-count {
    background: #dc2626;
    color: #ffffff;
}

.bbhg-intel-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    color: white;
    margin-left: 4px;
    text-transform: uppercase;
}

.bbhg-intel-tab.active .bbhg-intel-tab-badge {
    background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

/* AI Analysis Placeholder */
.bbhg-ai-analysis-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.03) 100%);
    border: 2px dashed rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    margin: 20px;
}

.bbhg-ai-placeholder-icon {
    font-size: 48px;
    margin-bottom: 16px;
    animation: pulse 2s ease-in-out infinite;
}

.bbhg-ai-analysis-placeholder h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
}

.bbhg-ai-analysis-placeholder p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.bbhg-ai-placeholder-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.bbhg-ai-placeholder-features span {
    padding: 8px 14px;
    background: white;
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

/* When AI analysis is loaded, hide placeholder */
#intel-ai-analysis .bbhg-ai-analysis-section ~ .bbhg-ai-analysis-placeholder,
#intel-ai-analysis:has(.bbhg-ai-analysis-section) .bbhg-ai-analysis-placeholder {
    display: none;
}

.bbhg-tab-icon {
    flex-shrink: 0;
}

.bbhg-tab-text {
    flex-shrink: 0;
}

/* Loading State */
.bbhg-intel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #1f2937;
}

.bbhg-spinner-lg {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bbhg-gray-200);
    border-top-color: var(--bbhg-primary);
    border-radius: 50%;
    animation: bbhg-spin 0.8s linear infinite;
    margin-bottom: 15px;
}

/* Intel Sections */
.bbhg-intel-section {
    display: none !important;
}

.bbhg-intel-section.active {
    display: block !important;
}

/* Intel Grid */
.bbhg-intel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Intel Cards */
.bbhg-intel-card {
    background: #ffffff;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.bbhg-intel-card-wide {
    grid-column: span 2;
}

@media (max-width: 700px) {
    .bbhg-intel-card-wide {
        grid-column: span 1;
    }
}

.bbhg-intel-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-intel-card-icon {
    font-size: 20px;
}

.bbhg-intel-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-intel-card-content {
    padding: 10px;
    max-height: 300px;
    overflow-y: auto;
}

.bbhg-intel-empty {
    text-align: center;
    color: #374151;
    font-size: 13px;
    padding: 30px 15px;
}

/* Intel Items */
.bbhg-intel-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.bbhg-intel-item:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-intel-item-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.bbhg-intel-item-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
    line-height: 1.4;
}

.bbhg-intel-item-meta {
    font-size: 11px;
    color: #1f2937;
}

.bbhg-intel-item-hashtag {
    font-size: 11px;
    font-weight: 600;
    color: var(--bbhg-primary);
    background: rgba(102, 126, 234, 0.1);
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-intel-item-hashtag:hover {
    background: var(--bbhg-primary);
    color: #ffffff;
}

/* Multiple hashtags per item */
.bbhg-intel-item-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
    max-width: 200px;
}

.bbhg-intel-item-hashtags .bbhg-intel-item-hashtag {
    font-size: 10px;
    padding: 2px 6px;
}

/* Intel Item Links */
.bbhg-intel-item-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.bbhg-intel-item-link:hover {
    color: var(--bbhg-primary);
}

.bbhg-link-icon {
    font-size: 10px;
    opacity: 0;
    transform: translateX(-4px);
    transition: all 0.2s ease;
}

.bbhg-intel-item:hover .bbhg-link-icon {
    opacity: 0.7;
    transform: translateX(0);
}

.bbhg-intel-item-link:hover .bbhg-link-icon {
    opacity: 1;
}

.bbhg-intel-source-badge {
    font-size: 9px;
    font-weight: 700;
    color: #1f2937;
    background: var(--bbhg-gray-200);
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Intel Footer */
.bbhg-intel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 0 0;
    margin-top: 20px;
    border-top: 1px solid var(--bbhg-gray-200);
    font-size: 12px;
    color: #1f2937;
}

/* Hashtag Tags Display */
.bbhg-intel-hashtags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 5px 0;
}

.bbhg-intel-hashtag-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-intel-hashtag-tag:hover {
    background: var(--bbhg-primary);
    color: #ffffff;
    border-color: var(--bbhg-primary);
    transform: translateY(-2px);
}

.bbhg-intel-hashtag-uses {
    font-size: 10px;
    font-weight: 700;
    color: inherit;
    opacity: 0.7;
}

/* Package/Repo styling */
.bbhg-intel-item-stats {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-intel-item-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #1f2937;
}

.bbhg-intel-item-stat svg {
    width: 12px;
    height: 12px;
}

/* Language badge */
.bbhg-lang-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--bbhg-gray-200);
    color: #1f2937;
}

.bbhg-lang-badge.js { background: #f7df1e; color: #000; }
.bbhg-lang-badge.ts { background: #3178c6; color: #fff; }
.bbhg-lang-badge.python { background: #3776ab; color: #fff; }
.bbhg-lang-badge.rust { background: #dea584; color: #000; }
.bbhg-lang-badge.go { background: #00add8; color: #fff; }

/* Ecosystem badges */
.bbhg-eco-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}

.bbhg-eco-badge.npm { background: #cc3534; color: #fff; }
.bbhg-eco-badge.pypi { background: #3775a9; color: #fff; }

/* Mobile responsive */
@media (max-width: 600px) {
    .bbhg-intel-container {
        padding: 15px;
    }
    
    .bbhg-intel-tabs {
        gap: 4px;
        padding: 0 2px;
    }
    
    .bbhg-intel-tab {
        padding: 6px 8px;
        font-size: 11px;
        gap: 3px;
        border-radius: 20px;
    }
    
    .bbhg-intel-tab-count {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        padding: 0 3px;
        margin-left: 2px;
        border-radius: 8px;
    }
    
    .bbhg-intel-grid {
        grid-template-columns: 1fr;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .bbhg-intel-tabs {
        gap: 4px;
    }
    
    .bbhg-intel-tab {
        padding: 6px 8px;
        font-size: 10px;
        gap: 3px;
    }
    
    .bbhg-intel-tab .bbhg-tab-text {
        display: none;
    }
    
    .bbhg-intel-tab-count {
        min-width: 16px;
        height: 16px;
        font-size: 9px;
        padding: 0 3px;
        margin-left: 2px;
    }
}

/* ================================
   AI HASHTAG BATTLE RESPONSIVE STYLES
   ================================ */

/* Fullscreen mode - fit hashtags on one line */
.bbhg-ai-chat.fullscreen .bbhg-comparison-header p,
.bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-header p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
}

.bbhg-ai-chat.fullscreen .bbhg-comparison-tag,
.bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-tag {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}

.bbhg-ai-chat.fullscreen .bbhg-comparison-winner,
.bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-winner {
    white-space: nowrap;
    font-size: 14px;
    color: #ffffff;
}

.bbhg-ai-chat.fullscreen .bbhg-comparison-cell,
.bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-cell {
    white-space: nowrap;
    font-size: 12px;
}

.bbhg-ai-chat.fullscreen .bbhg-comparison-recommendation,
.bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-recommendation {
    font-size: 13px;
}

.bbhg-ai-chat.fullscreen .bbhg-analysis-score-card p,
.bbhg-modal-overlay.bbhg-fullscreen .bbhg-analysis-score-card p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
}

.bbhg-ai-chat.fullscreen .bbhg-ai-tag,
.bbhg-modal-overlay.bbhg-fullscreen .bbhg-ai-tag {
    font-size: 12px;
}

/* Mobile non-fullscreen - wrap to prevent horizontal scroll */
@media (max-width: 600px) {
    .bbhg-hashtag-comparison {
        overflow-x: hidden;
    }
    
    .bbhg-comparison-header p {
        font-size: 11px;
        line-height: 1.4;
    }
    
    .bbhg-comparison-scores {
        padding: 16px 10px;
        gap: 8px;
    }
    
    .bbhg-comparison-score {
        padding: 10px 8px;
        min-width: 70px;
    }
    
    .bbhg-comparison-tag {
        font-size: 10px;
        line-height: 1.2;
    }
    
    .bbhg-comparison-value {
        font-size: 20px;
    }
    
    .bbhg-comparison-vs {
        font-size: 12px;
        padding: 4px 8px;
    }
    
    .bbhg-comparison-winner {
        font-size: 12px;
        padding: 10px 12px;
    }
    
    .bbhg-comparison-row.header {
        font-size: 10px;
    }
    
    .bbhg-comparison-cell {
        padding: 8px 4px;
        font-size: 10px;
    }
    
    .bbhg-comparison-recommendation {
        font-size: 10px;
        padding: 10px;
    }
    
    .bbhg-analysis-score-card {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .bbhg-analysis-score-card p {
        font-size: 12px;
    }
    
    .bbhg-big-score {
        font-size: 36px;
    }
    
    .bbhg-ai-tags {
        gap: 6px;
    }
    
    .bbhg-ai-tag {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .bbhg-analysis-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .bbhg-analysis-item {
        padding: 10px;
    }
    
    .bbhg-analysis-item-label {
        font-size: 10px;
    }
    
    .bbhg-analysis-item-value {
        font-size: 13px;
    }
}

/* Mobile fullscreen mode - one line hashtags */
@media (max-width: 600px) {
    .bbhg-ai-chat.fullscreen .bbhg-comparison-header p,
    .bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-header p {
        font-size: 12px;
    }
    
    .bbhg-ai-chat.fullscreen .bbhg-comparison-tag,
    .bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-tag {
        font-size: 11px;
    }
    
    .bbhg-ai-chat.fullscreen .bbhg-comparison-value,
    .bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-value {
        font-size: 22px;
    }
    
    .bbhg-ai-chat.fullscreen .bbhg-comparison-cell,
    .bbhg-modal-overlay.bbhg-fullscreen .bbhg-comparison-cell {
        font-size: 11px;
    }
}

/* ================================
   AI INTELLIGENCE SECTION STYLES
   ================================ */

.bbhg-ai-intel-section {
    margin-top: 16px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
}

.bbhg-ai-intel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-ai-intel-header .bbhg-ai-badge {
    color: #000000;
}

.bbhg-ai-hashtag {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(99, 102, 241, 0.15) 100%) !important;
    border-color: rgba(139, 92, 246, 0.3) !important;
    color: #7c3aed !important;
}

.bbhg-ai-hashtag:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
    color: white !important;
    border-color: #8b5cf6 !important;
}

/* AI Recommendations Grid with Platforms */
.bbhg-ai-recommendations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-ai-recommendation-card {
    background: var(--bbhg-white);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    padding: 12px;
    transition: all 0.2s ease;
}

.bbhg-ai-recommendation-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
    transform: translateY(-2px);
}

.bbhg-ai-rec-tag {
    font-size: 14px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 6px;
    cursor: pointer;
}

.bbhg-ai-rec-tag:hover {
    color: #5b21b6;
}

.bbhg-ai-rec-reason {
    font-size: 11px;
    color: #1f2937;
    line-height: 1.4;
    margin-bottom: 8px;
}

.bbhg-ai-hashtag-platforms {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}

.bbhg-platform-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: var(--bbhg-gray-100);
    border-radius: 6px;
    font-size: 12px;
    cursor: help;
    transition: all 0.2s ease;
}

.bbhg-platform-icon:hover {
    background: var(--bbhg-gray-200);
    transform: scale(1.1);
}

.bbhg-ai-rec-category {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1f2937;
    background: var(--bbhg-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Mobile responsive for AI recommendations */
@media (max-width: 600px) {
    .bbhg-ai-recommendations-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-intel-item-hashtags {
        max-width: 150px;
    }
    
    .bbhg-intel-item-hashtags .bbhg-intel-item-hashtag {
        font-size: 9px;
        padding: 2px 5px;
    }
}

/* Google Suggest AI indicator */
.bbhg-suggest-ai-section {
    margin-top: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
}

.bbhg-suggest-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-suggest-ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-suggest-ai-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(99, 102, 241, 0.12) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-suggest-ai-tag:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-suggest-ai-tag .bbhg-tag-category {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    text-transform: uppercase;
}

.bbhg-suggest-ai-tag:hover .bbhg-tag-category {
    background: rgba(255, 255, 255, 0.25);
}

/* AI category-specific colors for suggest tags */
.bbhg-suggest-ai-tag[data-category="core"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15) 0%, rgba(139, 92, 246, 0.1) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

.bbhg-suggest-ai-tag[data-category="trending"] {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, rgba(220, 38, 38, 0.08) 100%);
    border-color: rgba(239, 68, 68, 0.25);
    color: #dc2626;
}

.bbhg-suggest-ai-tag[data-category="trending"]:hover {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.bbhg-suggest-ai-tag[data-category="niche"] {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.12) 0%, rgba(8, 145, 178, 0.08) 100%);
    border-color: rgba(6, 182, 212, 0.25);
    color: #0891b2;
}

.bbhg-suggest-ai-tag[data-category="niche"]:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

.bbhg-suggest-ai-tag[data-category="community"] {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12) 0%, rgba(217, 119, 6, 0.08) 100%);
    border-color: rgba(245, 158, 11, 0.25);
    color: #d97706;
}

.bbhg-suggest-ai-tag[data-category="community"]:hover {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bbhg-suggest-ai-tag[data-category="engagement"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.08) 100%);
    border-color: rgba(16, 185, 129, 0.25);
    color: #059669;
}

.bbhg-suggest-ai-tag[data-category="engagement"]:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}


/* Google Suggest AI Header */
.bbhg-suggest-ai-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}


/* ================================
   AI SUGGESTIONS SECTION STYLES
   ================================ */

.bbhg-ai-suggestions-section {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
}

.bbhg-ai-suggestions-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-ai-suggestions-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    padding-bottom: 4px;
}

.bbhg-ai-suggestions-wrap::-webkit-scrollbar {
    display: none;
    height: 0;
}

.bbhg-ai-suggestion-tag {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-ai-suggestion-tag:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Click handler for AI suggestion tags */
.bbhg-ai-suggestion-tag:active {
    transform: translateY(0);
}

/* Mobile responsiveness for AI suggestions */
@media (max-width: 600px) {
    .bbhg-ai-suggestions-section {
        padding: 10px 12px;
        margin-bottom: 16px;
    }
    
    .bbhg-ai-suggestions-header {
        font-size: 12px;
        flex-wrap: wrap;
    }
    
    .bbhg-ai-suggestion-tag {
        padding: 6px 12px;
        font-size: 12px;
    }
    
    /* YouTube AI Section mobile enhancements */
    .bbhg-yt-ai-section .bbhg-ai-suggestions-wrap {
        gap: 6px;
        padding-bottom: 10px;
    }
    
    .bbhg-yt-ai-section .bbhg-ai-suggestions-wrap::-webkit-scrollbar {
        height: 4px;
    }
}

/* AI suggestion tag copied state */
.bbhg-ai-suggestion-tag.copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #10b981 !important;
    color: white !important;
}

/* YouTube AI Section - Enhanced horizontal scroll */
.bbhg-yt-ai-section {
    margin-bottom: 16px;
    width: 100%;
    min-width: 0; /* Critical for flex children to allow overflow */
    overflow: hidden; /* Contain the scroll within this element */
}

.bbhg-yt-ai-section .bbhg-ai-suggestions-wrap {
    display: flex;
    flex-wrap: nowrap !important;
    gap: 8px;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
    padding-bottom: 10px;
    padding-top: 2px;
    margin: 0;
    width: 100%;
    max-width: 100%;
}

.bbhg-yt-ai-section .bbhg-ai-suggestions-wrap::-webkit-scrollbar {
    height: 6px !important;
    display: block !important;
}

.bbhg-yt-ai-section .bbhg-ai-suggestions-wrap::-webkit-scrollbar-track {
    background: rgba(139, 92, 246, 0.1);
    border-radius: 3px;
}

.bbhg-yt-ai-section .bbhg-ai-suggestions-wrap::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.4);
    border-radius: 3px;
}

.bbhg-yt-ai-section .bbhg-ai-suggestions-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.6);
}

.bbhg-yt-ai-section .bbhg-ai-suggestion-tag {
    flex-shrink: 0 !important;
    white-space: nowrap;
}

.bbhg-yt-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ================================
   VIRAL RADAR AI INSIGHTS
   ================================ */

.bbhg-ai-insights-section {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
}

.bbhg-ai-insights-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-ai-top-opportunity {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.bbhg-ai-opp-label {
    font-size: 12px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 6px;
}

.bbhg-ai-opp-topic {
    font-size: 18px;
    font-weight: 700;
    color: #78350f;
    margin-bottom: 6px;
}

.bbhg-ai-opp-why {
    font-size: 13px;
    color: #92400e;
    margin-bottom: 10px;
}

.bbhg-ai-opp-urgency {
    display: inline-block;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
}

.bbhg-ai-opp-urgency.high {
    background: #ef4444;
    color: white;
}

.bbhg-ai-opp-urgency.medium {
    background: #f59e0b;
    color: white;
}

.bbhg-ai-opp-urgency.low {
    background: #6b7280;
    color: white;
}

.bbhg-ai-strategy {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 16px;
}

.bbhg-ai-strategy-label {
    font-size: 12px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 6px;
}

.bbhg-ai-strategy-text {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

.bbhg-ai-predictions {
    margin-bottom: 16px;
}

.bbhg-ai-predictions-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 12px;
}

.bbhg-ai-predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
}

.bbhg-ai-prediction-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    padding: 14px;
}

.bbhg-ai-pred-topic {
    font-size: 15px;
    font-weight: 700;
    color: #7c3aed;
    margin-bottom: 6px;
}

.bbhg-ai-pred-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
    line-height: 1.4;
}

.bbhg-ai-pred-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.bbhg-ai-pred-confidence {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

.bbhg-ai-pred-window {
    font-size: 11px;
    font-weight: 600;
    color: #f59e0b;
}

.bbhg-ai-pred-action {
    font-size: 12px;
    color: #7c3aed;
    padding-top: 8px;
    border-top: 1px solid rgba(139, 92, 246, 0.1);
}

.bbhg-ai-hashtag-recs {
    margin-bottom: 16px;
}

.bbhg-ai-hashtag-recs-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 10px;
}

.bbhg-ai-hashtag-recs-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-ai-content-ideas {
    margin-bottom: 16px;
}

.bbhg-ai-content-ideas-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 12px;
}

.bbhg-ai-content-ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.bbhg-ai-content-idea {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    padding: 14px;
}

.bbhg-ai-idea-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 8px;
}

.bbhg-ai-idea-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.bbhg-ai-idea-format,
.bbhg-ai-idea-platform {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    text-transform: uppercase;
}

.bbhg-ai-idea-format {
    background: #dbeafe;
    color: #1d4ed8;
}

.bbhg-ai-idea-platform {
    background: #dcfce7;
    color: #16a34a;
}

.bbhg-ai-idea-hook {
    font-size: 12px;
    font-style: italic;
    color: #1f2937;
}

.bbhg-ai-risk {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 12px 14px;
}

.bbhg-ai-risk-label {
    font-size: 12px;
    font-weight: 700;
    color: #dc2626;
    margin-bottom: 6px;
}

.bbhg-ai-risk-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

/* ================================
   TREND INTELLIGENCE AI ANALYSIS
   ================================ */

/* Dedicated AI Analysis Container */
.bbhg-intel-ai-analysis-container {
    margin-bottom: 20px;
}

.bbhg-ai-analysis-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 14px;
    padding: 18px;
    margin-bottom: 0;
}

.bbhg-ai-analysis-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin-bottom: 14px;
}

.bbhg-ai-analysis-header .bbhg-ai-badge {
    color: #000000;
}

.bbhg-ai-analysis-summary {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.bbhg-ai-hot-topics,
.bbhg-ai-themes {
    margin-bottom: 14px;
}

.bbhg-ai-hot-label,
.bbhg-ai-themes-label,
.bbhg-ai-opps-label,
.bbhg-ai-viral-label,
.bbhg-ai-time-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 8px;
}

.bbhg-ai-hot-wrap,
.bbhg-ai-themes-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-ai-hot-tag {
    padding: 6px 14px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
}

.bbhg-ai-theme-tag {
    padding: 6px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
}

.bbhg-ai-opportunities,
.bbhg-ai-viral-potential {
    margin-bottom: 14px;
}

.bbhg-ai-opps-grid,
.bbhg-ai-viral-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.bbhg-ai-opp-card,
.bbhg-ai-viral-card {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    padding: 12px;
}

.bbhg-ai-opp-card .bbhg-ai-opp-topic,
.bbhg-ai-viral-topic {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 4px;
}

.bbhg-ai-opp-card .bbhg-ai-opp-angle,
.bbhg-ai-viral-reason {
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 6px;
}

.bbhg-ai-viral-confidence {
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
}

.bbhg-ai-best-time {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 10px;
    padding: 12px;
}

.bbhg-ai-time-text {
    font-size: 14px;
    color: var(--bbhg-gray-700);
}

/* Mobile responsiveness for AI sections */
@media (max-width: 768px) {
    .bbhg-ai-insights-section,
    .bbhg-ai-analysis-section {
        padding: 14px;
    }
    
    .bbhg-ai-predictions-grid,
    .bbhg-ai-content-ideas-grid,
    .bbhg-ai-opps-grid,
    .bbhg-ai-viral-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   AI Strategic Insights Section
   ======================================== */

.bbhg-ai-strategic-section {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(6, 182, 212, 0.06) 100%);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 24px;
}

.bbhg-ai-strategic-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bbhg-ai-powered-label {
    font-size: 11px;
    font-weight: 500;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    margin-left: auto;
}

.bbhg-ai-strategic-summary {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.7;
    margin-bottom: 20px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    border-left: 4px solid #10b981;
}

.bbhg-ai-section-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 12px;
}

/* Quick Wins */
.bbhg-ai-quick-wins {
    margin-bottom: 20px;
}

.bbhg-ai-wins-list {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.bbhg-ai-wins-list li {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
    padding-left: 8px;
    position: relative;
}

.bbhg-ai-wins-list li::before {
    content: "✓";
    position: absolute;
    left: -16px;
    color: #10b981;
    font-weight: bold;
}

/* Top Niches */
.bbhg-ai-niches {
    margin-bottom: 20px;
}

.bbhg-ai-niches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.bbhg-ai-niche-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 14px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.bbhg-ai-niche-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bbhg-ai-niche-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bbhg-ai-niche-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-ai-niche-strength {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 10px;
    text-transform: uppercase;
}

.bbhg-ai-niche-strength.high {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.bbhg-ai-niche-strength.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.bbhg-ai-niche-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.bbhg-ai-niche-tag {
    font-size: 12px;
    font-weight: 500;
    color: #0284c7;
    background: rgba(2, 132, 199, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
}

.bbhg-ai-niche-tip {
    font-size: 12px;
    color: #1f2937;
    line-height: 1.5;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

/* Combination Strategies */
.bbhg-ai-combos {
    margin-bottom: 20px;
}

.bbhg-ai-combos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.bbhg-ai-combo-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 12px;
    padding: 14px;
}

.bbhg-ai-combo-name {
    font-size: 14px;
    font-weight: 700;
    color: #4f46e5;
    margin-bottom: 10px;
}

.bbhg-ai-combo-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.bbhg-ai-combo-tag {
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    padding: 5px 12px;
    border-radius: 14px;
}

.bbhg-ai-combo-why {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
    margin-bottom: 8px;
}

.bbhg-ai-combo-best {
    font-size: 12px;
    color: #1f2937;
    font-style: italic;
}

/* Content Angles */
.bbhg-ai-angles {
    margin-bottom: 20px;
}

.bbhg-ai-angles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.bbhg-ai-angle-card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.bbhg-ai-angle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap: 8px;
}

.bbhg-ai-angle-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-ai-angle-format {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ec4899;
    background: rgba(236, 72, 153, 0.1);
    padding: 3px 8px;
    border-radius: 8px;
}

.bbhg-ai-angle-hook {
    font-size: 13px;
    color: #1f2937;
    font-style: italic;
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
}

.bbhg-ai-angle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-ai-angle-tag {
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
    background: rgba(0, 0, 0, 0.05);
    padding: 4px 8px;
    border-radius: 10px;
}

/* Timing Insights */
.bbhg-ai-timing {
    margin-bottom: 20px;
}

.bbhg-ai-timing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.bbhg-ai-timing-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 14px;
}

.bbhg-ai-timing-item.best {
    border-left: 4px solid #10b981;
}

.bbhg-ai-timing-item.avoid {
    border-left: 4px solid #f59e0b;
}

.bbhg-ai-timing-item.velocity {
    border-left: 4px solid #6366f1;
}

.bbhg-ai-timing-icon {
    font-size: 18px;
}

.bbhg-ai-timing-content {
    flex: 1;
}

.bbhg-ai-timing-label {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bbhg-ai-timing-value {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

/* Engagement Boosters */
.bbhg-ai-boosters {
    margin-bottom: 20px;
}

.bbhg-ai-boosters-list {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.bbhg-ai-boosters-list li {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
    padding-left: 8px;
    position: relative;
}

.bbhg-ai-boosters-list li::before {
    content: "🚀";
    position: absolute;
    left: -18px;
    font-size: 12px;
}

/* Warnings */
.bbhg-ai-warnings {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 12px;
    padding: 14px;
}

.bbhg-ai-warnings-list {
    margin: 0;
    padding-left: 20px;
    list-style: none;
}

.bbhg-ai-warnings-list li {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin-bottom: 6px;
    padding-left: 8px;
    position: relative;
}

.bbhg-ai-warnings-list li::before {
    content: "•";
    position: absolute;
    left: -12px;
    color: #f59e0b;
    font-weight: bold;
}

/* Mobile responsiveness for AI Strategic Insights */
@media (max-width: 768px) {
    .bbhg-ai-strategic-section {
        padding: 16px;
    }
    
    .bbhg-ai-strategic-header {
        font-size: 15px;
    }
    
    .bbhg-ai-powered-label {
        margin-left: 0;
        margin-top: 8px;
    }
    
    .bbhg-ai-niches-grid,
    .bbhg-ai-combos-grid,
    .bbhg-ai-angles-grid,
    .bbhg-ai-timing-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   AI USAGE LIMITS STYLES
   =================================== */

/* Limit Reached Message in Chat */
.bbhg-ai-limit-reached {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    margin: 8px 0;
    animation: bbhg-limit-shake 0.5s ease-in-out;
}

@keyframes bbhg-limit-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.bbhg-ai-limit-reached .bbhg-limit-icon {
    font-size: 48px;
    margin-bottom: 12px;
    display: block;
}

.bbhg-ai-limit-reached .bbhg-limit-message {
    font-size: 18px;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 16px;
    line-height: 1.4;
}

.bbhg-ai-limit-reached .bbhg-register-btn {
    display: inline-block;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    color: white !important;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none !important;
    transition: all 0.3s ease;
    margin-bottom: 12px;
    box-shadow: 0 4px 14px rgba(14, 165, 233, 0.35);
}

.bbhg-ai-limit-reached .bbhg-register-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.45);
}

.bbhg-ai-limit-reached .bbhg-limit-stats {
    font-size: 12px;
    color: #78716c;
    margin-top: 8px;
}

/* AI Usage Status Bar */
.bbhg-ai-usage-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.bbhg-ai-usage-status .bbhg-usage-info {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0369a1;
}

.bbhg-ai-usage-status .bbhg-usage-icon {
    font-size: 16px;
}

.bbhg-ai-usage-status .bbhg-usage-text strong {
    color: #0c4a6e;
}

.bbhg-ai-usage-status .bbhg-usage-text small {
    color: #64748b;
    font-size: 11px;
    margin-left: 4px;
}

.bbhg-ai-usage-status .bbhg-usage-exhausted {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.bbhg-ai-usage-status .bbhg-usage-exhausted .bbhg-usage-message {
    color: #92400e;
    font-weight: 600;
}

.bbhg-ai-usage-status .bbhg-usage-exhausted .bbhg-register-link {
    color: #0ea5e9;
    font-weight: 600;
    text-decoration: none;
}

.bbhg-ai-usage-status .bbhg-usage-exhausted .bbhg-register-link:hover {
    text-decoration: underline;
}

/* Low usage warning */
.bbhg-ai-usage-status.bbhg-low-usage {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.bbhg-ai-usage-status.bbhg-low-usage .bbhg-usage-info {
    color: #92400e;
}

/* Admin usage stats styles */
.bbhg-usage-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.bbhg-usage-stats-table th,
.bbhg-usage-stats-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
}

.bbhg-usage-stats-table th {
    background: #f9fafb;
    font-weight: 600;
    color: #1f2937;
    font-size: 12px;
    text-transform: uppercase;
}

.bbhg-usage-stats-table td {
    color: #1f2937;
    font-size: 14px;
}

.bbhg-usage-stats-table tr:hover {
    background: #f9fafb;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bbhg-ai-limit-reached {
        padding: 20px 16px;
    }
    
    .bbhg-ai-limit-reached .bbhg-limit-icon {
        font-size: 36px;
    }
    
    .bbhg-ai-limit-reached .bbhg-limit-message {
        font-size: 16px;
    }
    
    .bbhg-ai-limit-reached .bbhg-register-btn {
        padding: 10px 20px;
        font-size: 13px;
    }
}

/* ================================
   CALENDAR TAB STYLES
   ================================ */

.bbhg-calendar-content {
    padding: 0;
}

.bbhg-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #0891b2 100%);
    border-radius: 20px;
    margin-bottom: 24px;
    color: white;
}

.bbhg-calendar-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-calendar-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-calendar-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-calendar-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-calendar-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.bbhg-calendar-controls-wrapper {
    margin-bottom: 20px;
}

.bbhg-calendar-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-calendar-filters {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bbhg-calendar-filter {
    padding: 8px 16px;
    border: 1px solid var(--bbhg-gray-300);
    background: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bbhg-calendar-filter:hover {
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-calendar-filter.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-calendar-section {
    padding: 20px 24px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-calendar-section:last-child {
    border-bottom: none;
}

.bbhg-calendar-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-calendar-section-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-section-emoji {
    font-size: 18px;
}

.bbhg-calendar-date-range,
.bbhg-calendar-hint {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-calendar-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-calendar-event-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    transition: all 0.2s;
}

.bbhg-calendar-event-card:hover {
    border-color: var(--bbhg-primary);
    box-shadow: var(--bbhg-shadow-md);
}

.bbhg-event-date-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 50px;
    padding: 8px;
    background: var(--bbhg-gray-100);
    border-radius: 8px;
}

.bbhg-event-date-month {
    font-size: 10px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
}

.bbhg-event-date-day {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-event-content {
    flex: 1;
    min-width: 0;
}

.bbhg-event-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bbhg-event-emoji {
    font-size: 18px;
}

.bbhg-event-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-event-today {
    padding: 2px 8px;
    background: #10b981;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
}

.bbhg-event-tomorrow {
    padding: 2px 8px;
    background: #f59e0b;
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
}

.bbhg-event-days {
    font-size: 11px;
    color: #1f2937;
}

.bbhg-event-passed {
    font-size: 11px;
    color: #374151;
}

.bbhg-event-hashtags {
    font-size: 12px;
    color: var(--bbhg-primary);
    margin-bottom: 10px;
    word-break: break-word;
}

.bbhg-calendar-copy-tags {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-calendar-copy-tags:hover {
    background: var(--bbhg-primary);
    color: white;
}

.bbhg-calendar-empty {
    padding: 24px;
    text-align: center;
    color: #1f2937;
    font-size: 14px;
}

.bbhg-calendar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px;
    color: #1f2937;
}

/* Calendar Grid */
.bbhg-calendar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 8px;
}

.bbhg-calendar-day-name {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    padding: 8px 4px;
}

.bbhg-calendar-grid-body {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.bbhg-calendar-cell {
    min-height: 70px;
    padding: 8px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-calendar-cell.empty {
    background: var(--bbhg-gray-50);
    cursor: default;
}

.bbhg-calendar-cell:not(.empty):hover {
    border-color: var(--bbhg-primary);
}

.bbhg-calendar-cell.today {
    border-color: var(--bbhg-primary);
    background: rgba(14, 165, 233, 0.05);
}

.bbhg-calendar-cell.has-events {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-color: #fcd34d;
}

.bbhg-calendar-cell-day {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-calendar-cell.today .bbhg-calendar-cell-day {
    color: var(--bbhg-primary);
}

.bbhg-calendar-cell-events {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: 4px;
}

.bbhg-calendar-cell-event {
    font-size: 12px;
}

.bbhg-calendar-cell-more {
    font-size: 10px;
    color: #1f2937;
}

/* Event type colors */
.bbhg-event-type-holiday .bbhg-event-date-badge { background: #fef3c7; }
.bbhg-event-type-holiday .bbhg-event-date-day { color: #d97706; }
.bbhg-event-type-awareness .bbhg-event-date-badge { background: #f3e8ff; }
.bbhg-event-type-awareness .bbhg-event-date-day { color: #9333ea; }
.bbhg-event-type-cultural .bbhg-event-date-badge { background: #dcfce7; }
.bbhg-event-type-cultural .bbhg-event-date-day { color: #16a34a; }
.bbhg-event-type-business .bbhg-event-date-badge { background: #dbeafe; }
.bbhg-event-type-business .bbhg-event-date-day { color: #2563eb; }
.bbhg-event-type-fun .bbhg-event-date-badge { background: #fce7f3; }
.bbhg-event-type-fun .bbhg-event-date-day { color: #db2777; }

/* ================================
   AUDIT TAB STYLES
   ================================ */

.bbhg-audit-content {
    padding: 0;
}

.bbhg-audit-header {
    display: flex;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-bottom: 1px solid rgba(245, 158, 11, 0.2);
}

.bbhg-audit-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bbhg-audit-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.bbhg-audit-icon svg {
    width: 24px;
    height: 24px;
}

.bbhg-audit-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0;
}

.bbhg-audit-subtitle {
    font-size: 13px;
    color: #1f2937;
    margin: 4px 0 0 0;
}

.bbhg-audit-input-section {
    padding: 24px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-audit-input-wrapper {
    margin-bottom: 16px;
}

.bbhg-audit-textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.2s;
}

.bbhg-audit-textarea:focus {
    outline: none;
    border-color: var(--bbhg-primary);
}

.bbhg-audit-input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.bbhg-audit-count {
    font-size: 13px;
    color: #1f2937;
}

.bbhg-audit-count span {
    font-weight: 600;
    color: var(--bbhg-primary);
}

.bbhg-audit-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-audit-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--bbhg-shadow-lg);
}

.bbhg-audit-btn svg {
    width: 18px;
    height: 18px;
}

.bbhg-audit-platform-select {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-audit-platform-label {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

.bbhg-audit-platform {
    padding: 8px 16px;
    border: 1px solid var(--bbhg-gray-300);
    background: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-audit-platform:hover {
    border-color: var(--bbhg-primary);
}

.bbhg-audit-platform.active {
    background: var(--bbhg-primary);
    border-color: var(--bbhg-primary);
    color: white;
}

.bbhg-audit-results {
    padding: 24px;
}

.bbhg-audit-score-section {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bbhg-audit-main-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 16px;
    min-width: 180px;
}

.bbhg-audit-score-ring {
    position: relative;
    width: 120px;
    height: 120px;
}

.bbhg-audit-score-ring svg {
    transform: rotate(-90deg);
}

.bbhg-audit-score-ring circle {
    transition: stroke-dashoffset 1s ease-out;
}

.bbhg-audit-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-audit-score-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-top: 12px;
}

.bbhg-audit-score-desc {
    font-size: 12px;
    color: #1f2937;
    text-align: center;
    margin-top: 4px;
}

.bbhg-audit-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    flex: 1;
}

.bbhg-audit-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
}

.bbhg-audit-metric-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-audit-metric-label {
    font-size: 12px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-audit-details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-audit-category {
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.bbhg-audit-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
}

.bbhg-audit-banned-header { background: #fef2f2; color: #dc2626; }
.bbhg-audit-risky-header { background: #fffbeb; color: #d97706; }
.bbhg-audit-saturated-header { background: #fef3c7; color: #92400e; }
.bbhg-audit-good-header { background: #dcfce7; color: #16a34a; }

.bbhg-audit-category-count {
    padding: 2px 8px;
    background: rgba(255,255,255,0.5);
    border-radius: 10px;
    font-size: 12px;
}

.bbhg-audit-category-content {
    padding: 16px;
    background: white;
}

.bbhg-audit-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-audit-tag {
    padding: 6px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
}

.bbhg-audit-tag-banned { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.bbhg-audit-tag-risky { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.bbhg-audit-tag-saturated { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
.bbhg-audit-tag-good { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }

.bbhg-audit-empty {
    color: #1f2937;
    font-size: 13px;
    margin: 0;
}

.bbhg-audit-recommendations {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 12px;
    overflow: hidden;
}

.bbhg-audit-recs-header {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-primary-dark);
    border-bottom: 1px solid rgba(14, 165, 233, 0.1);
}

.bbhg-audit-recs-content {
    padding: 16px;
}

.bbhg-audit-rec-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bbhg-audit-rec-item:last-child {
    margin-bottom: 0;
}

.bbhg-audit-rec-label {
    font-size: 10px;
    color: #1f2937;
    text-transform: uppercase;
    display: block;
    margin-bottom: 2px;
}

.bbhg-audit-rec-from {
    font-size: 14px;
    font-weight: 500;
    color: #dc2626;
}

.bbhg-audit-rec-arrow {
    font-size: 18px;
    color: #374151;
}

.bbhg-audit-rec-to {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.bbhg-audit-rec-alt {
    padding: 4px 10px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
}

.bbhg-audit-rec-alt:hover {
    background: #16a34a;
    color: white;
}

.bbhg-audit-no-recs {
    text-align: center;
    color: #1f2937;
    font-size: 14px;
    padding: 8px;
}

/* ================================
   SOUNDS TAB STYLES
   ================================ */

.bbhg-sounds-content {
    padding: 0;
}

.bbhg-sounds-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
    border-bottom: 1px solid rgba(168, 85, 247, 0.1);
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-sounds-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bbhg-sounds-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.bbhg-sounds-icon svg {
    width: 24px;
    height: 24px;
}

.bbhg-sounds-title h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0;
}

.bbhg-sounds-subtitle {
    font-size: 13px;
    color: #1f2937;
    margin: 4px 0 0 0;
}

.bbhg-sounds-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-sounds-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.bbhg-sounds-platforms {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-sounds-platform {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid var(--bbhg-gray-300);
    background: white;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-sounds-platform:hover {
    border-color: #a855f7;
    color: #a855f7;
}

.bbhg-sounds-platform.active {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    border-color: #a855f7;
    color: white;
}

.bbhg-sounds-filters {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    overflow-x: auto;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-sounds-filter {
    padding: 8px 16px;
    border: 1px solid var(--bbhg-gray-300);
    background: white;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bbhg-sounds-filter:hover {
    border-color: #a855f7;
    color: #a855f7;
}

.bbhg-sounds-filter.active {
    background: #a855f7;
    border-color: #a855f7;
    color: white;
}

.bbhg-sounds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 24px;
    max-width: 100%;
    overflow: hidden;
}

.bbhg-sounds-loading,
.bbhg-sounds-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 24px;
    color: #1f2937;
    text-align: center;
}

.bbhg-sound-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
}

.bbhg-sound-card:hover {
    border-color: #a855f7;
    box-shadow: var(--bbhg-shadow-md);
    transform: translateY(-2px);
}

.bbhg-sound-thumbnail {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #f3e8ff 0%, #fae8ff 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.bbhg-sound-info {
    flex: 1;
    min-width: 0;
}

.bbhg-sound-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-sound-artist {
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-sound-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 8px;
}

.bbhg-sound-uses {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-sound-growth {
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
}

.bbhg-sound-tags-preview {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(147, 51, 234, 0.25) transparent;
}

.bbhg-sound-tags-preview::-webkit-scrollbar {
    height: 3px;
}

.bbhg-sound-tags-preview::-webkit-scrollbar-track {
    background: transparent;
}

.bbhg-sound-tags-preview::-webkit-scrollbar-thumb {
    background: rgba(147, 51, 234, 0.25);
    border-radius: 3px;
}

.bbhg-sound-tags-preview::-webkit-scrollbar-thumb:hover {
    background: rgba(147, 51, 234, 0.45);
}

.bbhg-sound-tag {
    padding: 3px 8px;
    background: #f3e8ff;
    color: #9333ea;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.bbhg-sound-tag:hover {
    background: #9333ea;
    color: white;
}

/* Live Data Badge */
.bbhg-live-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #dc2626;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    animation: bbhg-pulse 2s infinite;
}

@keyframes bbhg-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Sound Rank */
.bbhg-sound-rank {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(147, 51, 234, 0.1);
    color: #7c3aed;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 8px;
}

/* Make card relative for absolute positioning */
.bbhg-sound-card {
    position: relative;
    padding-top: 36px;
}

/* Platform Badge */
.bbhg-platform-badge {
    font-size: 11px;
    color: #6b7280;
    margin-bottom: 6px;
}

/* Sound Tip */
.bbhg-sound-tip {
    font-size: 11px;
    color: #059669;
    background: #ecfdf5;
    padding: 6px 10px;
    border-radius: 8px;
    margin: 8px 0;
    line-height: 1.4;
}

/* Sound Source */
.bbhg-sound-source {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 8px;
    font-style: italic;
}

/* Trend Status Classes */
.bbhg-sound-card.bbhg-trend-exploding {
    border-left: 4px solid #ef4444;
    background: linear-gradient(to right, rgba(254, 226, 226, 0.5), white);
}

.bbhg-sound-card.bbhg-trend-hot {
    border-left: 4px solid #f97316;
    background: linear-gradient(to right, rgba(255, 237, 213, 0.5), white);
}

.bbhg-sound-card.bbhg-trend-rising {
    border-left: 4px solid #10b981;
    background: linear-gradient(to right, rgba(209, 250, 229, 0.5), white);
}

.bbhg-sound-growth.bbhg-trend-exploding {
    color: #ef4444;
}

.bbhg-sound-growth.bbhg-trend-hot {
    color: #f97316;
}

.bbhg-sound-growth.bbhg-trend-rising {
    color: #10b981;
}

/* Source Info */
#bbhg-sounds-source-info {
    font-size: 11px;
    color: #6b7280;
    text-align: center;
    padding: 8px;
    margin-top: 12px;
    background: #f9fafb;
    border-radius: 8px;
    display: none;
}

/* Refresh Button */
.bbhg-sounds-refresh {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.bbhg-sounds-refresh:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(147, 51, 234, 0.3);
}

/* Error Display */
.bbhg-sounds-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 24px;
    text-align: center;
}

.bbhg-sounds-error .bbhg-error-icon {
    font-size: 48px;
}

.bbhg-sounds-error p {
    color: #6b7280;
    margin: 0;
}

.bbhg-retry-btn {
    background: #a855f7;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-retry-btn:hover {
    background: #9333ea;
}

/* Sound Detail Ideas */
.bbhg-sound-ideas {
    background: #f0fdf4;
    padding: 12px;
    border-radius: 8px;
    margin: 12px 0;
}

.bbhg-sound-ideas ul {
    margin: 8px 0 0 0;
    padding-left: 20px;
}

.bbhg-sound-ideas li {
    font-size: 13px;
    color: #166534;
    margin-bottom: 4px;
}

.bbhg-sound-detail-tip {
    background: #fef3c7;
    padding: 12px;
    border-radius: 8px;
    margin: 12px 0;
    font-size: 13px;
    color: #92400e;
}

/* Sound Detail Panel */
.bbhg-sound-detail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid var(--bbhg-gray-200);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
    z-index: 1000;
    border-radius: 20px 20px 0 0;
    max-height: 60vh;
    overflow-y: auto;
}

.bbhg-sound-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--bbhg-gray-200);
    position: sticky;
    top: 0;
    background: white;
}

.bbhg-sound-detail-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bbhg-gray-100);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bbhg-sound-detail-close svg {
    width: 18px;
    height: 18px;
    color: #1f2937;
}

.bbhg-sound-detail-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0;
}

.bbhg-sound-detail-content {
    padding: 20px;
}

.bbhg-sound-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-sound-meta-item {
    font-size: 13px;
    color: #1f2937;
}

.bbhg-sound-meta-item span {
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-sound-detail-hashtags {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

.bbhg-sound-detail-hashtags::-webkit-scrollbar {
    height: 4px;
}

.bbhg-sound-detail-hashtags::-webkit-scrollbar-track {
    background: transparent;
}

.bbhg-sound-detail-hashtags::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 4px;
}

.bbhg-sound-detail-hashtags::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.5);
}

.bbhg-sound-detail-hashtags h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 12px 0;
}

.bbhg-sound-hashtags-wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 16px;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, 0.3) transparent;
}

.bbhg-sound-hashtags-wrap::-webkit-scrollbar {
    height: 4px;
}

.bbhg-sound-hashtags-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.bbhg-sound-hashtags-wrap::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, 0.3);
    border-radius: 4px;
}

.bbhg-sound-hashtags-wrap::-webkit-scrollbar-thumb:hover {
    background: rgba(124, 58, 237, 0.5);
}

.bbhg-sound-detail-tag {
    padding: 8px 14px;
    background: linear-gradient(135deg, #f3e8ff 0%, #fae8ff 100%);
    color: #7c3aed;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
}

.bbhg-sound-detail-tag:hover {
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
}

.bbhg-sound-copy-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-sound-copy-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4);
}

.bbhg-sound-copy-all svg {
    width: 18px;
    height: 18px;
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .bbhg-calendar-header,
    .bbhg-audit-header,
    .bbhg-sounds-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-calendar-controls {
        width: 100%;
        justify-content: space-between;
    }
    
    .bbhg-audit-score-section {
        flex-direction: column;
    }
    
    .bbhg-audit-main-score {
        width: 100%;
    }
    
    .bbhg-sounds-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }
    
    .bbhg-sound-tags-preview {
        gap: 4px;
    }
    
    .bbhg-sound-tag {
        font-size: 10px;
        padding: 2px 6px;
    }
    
    .bbhg-sound-detail-tag {
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .bbhg-sound-hashtags-wrap {
        gap: 6px;
    }
    
    .bbhg-calendar-grid-body {
        gap: 2px;
    }
    
    .bbhg-calendar-cell {
        min-height: 50px;
        padding: 4px;
    }
    
    .bbhg-calendar-cell-day {
        font-size: 11px;
    }
}

/* ============================================
   TREND CALENDAR STYLES
   ============================================ */

/* Calendar Controls */
.bbhg-calendar-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-calendar-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.bbhg-calendar-nav-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    flex-shrink: 0;
}

.bbhg-calendar-nav-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.bbhg-calendar-nav-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-calendar-current-month {
    flex: 1;
    text-align: center;
}

.bbhg-calendar-month-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-calendar-view-toggles {
    display: flex;
    gap: 8px;
    background: var(--bbhg-gray-100);
    padding: 4px;
    border-radius: 10px;
}

.bbhg-calendar-view-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: #1f2937;
}

.bbhg-calendar-view-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.bbhg-calendar-view-btn:hover:not(.active) {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-900);
}

/* Calendar Views */
.bbhg-calendar-view {
    display: none;
}

.bbhg-calendar-view.active {
    display: block;
}

/* Event Details Panel */
.bbhg-calendar-event-details {
    margin-top: 24px;
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease;
}

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

.bbhg-calendar-event-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bbhg-gray-100);
}

.bbhg-calendar-event-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0;
}

.bbhg-calendar-close-event {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-gray-100);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    z-index: 10;
}

.bbhg-calendar-close-event:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-calendar-close-event svg {
    width: 18px;
    height: 18px;
    stroke: var(--bbhg-gray-600);
}

.bbhg-calendar-event-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
}

.bbhg-event-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bbhg-gray-700);
}

.bbhg-event-meta-icon {
    font-size: 18px;
}

.bbhg-event-description {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
}

.bbhg-event-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-event-hashtag {
    padding: 8px 14px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #667eea;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-event-hashtag:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.bbhg-event-strategy {
    padding: 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 12px;
    border-left: 4px solid #f59e0b;
}

.bbhg-event-strategy h4 {
    font-size: 14px;
    font-weight: 700;
    color: #92400e;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.bbhg-event-strategy p {
    font-size: 14px;
    line-height: 1.6;
    color: #78350f;
    margin: 0;
}

.bbhg-event-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.bbhg-event-action-btn {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.bbhg-event-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.bbhg-event-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

/* Timeline View */
.bbhg-calendar-timeline {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.bbhg-timeline-section {
    background: white;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.bbhg-timeline-header {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 20px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--bbhg-gray-100);
}

.bbhg-timeline-icon {
    font-size: 24px;
}

.bbhg-timeline-events {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-timeline-event {
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    border-left: 4px solid #667eea;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-timeline-event:hover {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    transform: translateX(4px);
}

.bbhg-timeline-event.high-priority {
    border-left-color: #ef4444;
}

.bbhg-timeline-event.medium-priority {
    border-left-color: #f59e0b;
}

.bbhg-timeline-event-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 8px;
}

.bbhg-timeline-event-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-timeline-event-date {
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    background: #e0e7ff;
    padding: 4px 12px;
    border-radius: 12px;
}

.bbhg-timeline-event-description {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    margin-bottom: 12px;
    line-height: 1.5;
}

.bbhg-timeline-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-timeline-event-tag {
    padding: 4px 10px;
    background: white;
    color: #667eea;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* AI Predictions View */
.bbhg-predictions-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bbhg-predictions-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px;
    border-radius: 16px;
    text-align: center;
    color: white;
}

.bbhg-predictions-header .bbhg-ai-badge {
    background: rgba(255, 255, 255, 0.2);
    color: #000;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
}

.bbhg-predictions-header h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: white;
}

.bbhg-predictions-header p {
    font-size: 15px;
    opacity: 0.9;
    margin: 0;
    color: white;
}

.bbhg-predictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.bbhg-prediction-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.2s;
    cursor: pointer;
}

.bbhg-prediction-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.bbhg-prediction-card-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    margin-bottom: 16px;
}

.bbhg-prediction-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-prediction-confidence {
    padding: 6px 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
}

.bbhg-prediction-confidence.medium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bbhg-prediction-confidence.low {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.bbhg-prediction-peak-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #fef3c7;
    color: #92400e;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}

.bbhg-prediction-description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
    margin-bottom: 16px;
}

.bbhg-prediction-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-prediction-metric {
    padding: 12px;
    background: var(--bbhg-gray-50);
    border-radius: 10px;
    text-align: center;
}

.bbhg-prediction-metric-value {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
    display: block;
}

.bbhg-prediction-metric-label {
    font-size: 12px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-prediction-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.bbhg-prediction-hashtag {
    padding: 6px 12px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #667eea;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.bbhg-prediction-strategy {
    padding: 14px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #065f46;
}

.bbhg-prediction-strategy strong {
    color: #064e3b;
    display: block;
    margin-bottom: 6px;
}

/* Empty State */
.bbhg-calendar-empty {
    text-align: center;
    padding: 60px 20px;
    color: #1f2937;
}

.bbhg-calendar-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-calendar-empty h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 8px 0;
}

.bbhg-calendar-empty p {
    font-size: 14px;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .bbhg-calendar-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bbhg-calendar-nav {
        justify-content: center;
    }
    
    .bbhg-calendar-view-toggles {
        width: 100%;
    }
    
    .bbhg-calendar-view-btn {
        flex: 1;
    }
    
    .bbhg-calendar-weekday {
        font-size: 11px;
        padding: 6px 4px;
    }
    
    .bbhg-calendar-day {
        padding: 4px;
    }
    
    .bbhg-calendar-day-number {
        font-size: 12px;
    }
    
    .bbhg-predictions-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-event-actions {
        flex-direction: column;
    }
}

/* ================================
   COMPREHENSIVE EVENTS CALENDAR
   ================================ */

.bbhg-calendar-container {
    padding: 16px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

/* Calendar Stats */
.bbhg-calendar-stats {
    display: flex;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(124, 58, 237, 0.05) 100%);
    border-radius: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.bbhg-calendar-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 100px;
    padding: 10px 15px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.bbhg-calendar-stat-icon {
    font-size: 24px;
}

.bbhg-calendar-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-calendar-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-calendar-stat-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Calendar Tabs */
.bbhg-calendar-tabs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    overflow-x: auto;
    padding-bottom: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bbhg-calendar-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-calendar-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-calendar-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-300);
}

.bbhg-calendar-tab.active {
    background: transparent !important;
    color: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    font-weight: 700;
}

/* Calendar Loading */
.bbhg-calendar-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #1f2937;
}

/* Calendar Sections */
.bbhg-calendar-section {
    display: none;
}

.bbhg-calendar-section.active {
    display: block;
}

/* Calendar Cards */
.bbhg-calendar-card {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    width: 100%;
    box-sizing: border-box;
}

.bbhg-calendar-card-featured {
    border: 2px solid rgba(139, 92, 246, 0.3);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.03) 0%, white 100%);
    width: 100%;
}

.bbhg-calendar-card-ai {
    border: 2px solid rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.03) 0%, white 100%);
    width: 100%;
}

.bbhg-calendar-card-wide {
    width: 100%;
    box-sizing: border-box;
}

.bbhg-calendar-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-calendar-card-icon {
    font-size: 20px;
}

.bbhg-calendar-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    flex: 1;
}

.bbhg-calendar-date-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
}

.bbhg-calendar-card-content {
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
    width: 100%;
    box-sizing: border-box;
}

.bbhg-calendar-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #374151;
    text-align: center;
}

.bbhg-empty-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

/* Calendar Grid */
.bbhg-calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Main Calendar Grid */
.bbhg-calendar-main-grid {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.bbhg-calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-calendar-weekday {
    padding: 12px 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
}

.bbhg-calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.bbhg-calendar-day {
    min-height: 80px;
    padding: 8px;
    border-right: 1px solid var(--bbhg-gray-100);
    border-bottom: 1px solid var(--bbhg-gray-100);
    cursor: pointer;
    transition: background 0.2s;
}

.bbhg-calendar-day:nth-child(7n) {
    border-right: none;
}

.bbhg-calendar-day:hover {
    background: var(--bbhg-gray-50);
}

.bbhg-calendar-day.other-month {
    background: var(--bbhg-gray-50);
}

.bbhg-calendar-day.other-month .bbhg-calendar-day-number {
    color: #374151;
}

.bbhg-calendar-day.today {
    background: rgba(139, 92, 246, 0.08);
}

.bbhg-calendar-day.today .bbhg-calendar-day-number {
    background: #8b5cf6;
    color: white;
}

.bbhg-calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    border-radius: 50%;
    margin-bottom: 4px;
}

.bbhg-calendar-day-events {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
}

.bbhg-calendar-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.bbhg-calendar-event-dot.holiday { background: #f59e0b; }
.bbhg-calendar-event-dot.awareness { background: #8b5cf6; }
.bbhg-calendar-event-dot.social { background: #3b82f6; }
.bbhg-calendar-event-dot.sports { background: #10b981; }
.bbhg-calendar-event-dot.entertainment { background: #ec4899; }
.bbhg-calendar-event-dot.tech { background: #6366f1; }
.bbhg-calendar-event-dot.cultural { background: #14b8a6; }
.bbhg-calendar-event-dot.business { background: #64748b; }

.bbhg-calendar-more-events {
    font-size: 10px;
    color: #1f2937;
    padding: 2px 6px;
}

/* Calendar Legend */
.bbhg-calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    padding: 12px 15px;
    background: var(--bbhg-gray-50);
    border-radius: 8px;
    margin-bottom: 20px;
}

.bbhg-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.bbhg-legend-dot.bbhg-legend-holiday { background: #f59e0b; }
.bbhg-legend-dot.bbhg-legend-awareness { background: #8b5cf6; }
.bbhg-legend-dot.bbhg-legend-social { background: #3b82f6; }
.bbhg-legend-dot.bbhg-legend-sports { background: #10b981; }
.bbhg-legend-dot.bbhg-legend-entertainment { background: #ec4899; }
.bbhg-legend-dot.bbhg-legend-tech { background: #6366f1; }

/* Day Popup Modal */
.bbhg-day-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000002;
    padding: 20px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.bbhg-day-popup-modal {
    background: white;
    border-radius: 16px;
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    animation: bbhg-popup-in 0.2s ease-out;
}

@keyframes bbhg-popup-in {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.bbhg-day-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

.bbhg-day-popup-date {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-day-popup-icon {
    font-size: 24px;
}

.bbhg-day-popup-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-day-popup-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.bbhg-day-popup-close:hover {
    background: rgba(0, 0, 0, 0.3);
}

.bbhg-day-popup-close:focus {
    outline: none !important;
    box-shadow: none !important;
}

.bbhg-day-popup-close svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff !important;
}

.bbhg-day-popup-close svg line {
    stroke: #ffffff !important;
}

.bbhg-day-popup-content {
    padding: 20px;
    max-height: calc(80vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.bbhg-day-popup-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-day-popup-events .bbhg-event-item {
    margin: 0;
    border-radius: 12px;
    transition: all 0.2s;
}

.bbhg-day-popup-events .bbhg-event-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile adjustments for day popup */
@media (max-width: 480px) {
    .bbhg-day-popup-overlay {
        padding: 10px;
        align-items: flex-end;
    }
    
    .bbhg-day-popup-modal {
        max-height: 85vh;
        border-radius: 16px 16px 0 0;
        margin-bottom: -10px;
    }
    
    .bbhg-day-popup-header {
        padding: 14px 16px;
    }
    
    .bbhg-day-popup-header h3 {
        font-size: 14px;
    }
    
    .bbhg-day-popup-content {
        padding: 16px;
    }
}

/* Timeline Styles */
.bbhg-upcoming-timeline {
    padding: 20px 0;
}

.bbhg-timeline-group {
    margin-bottom: 25px;
    padding-left: 30px;
    position: relative;
}

.bbhg-timeline-group::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 24px;
    bottom: 0;
    width: 2px;
    background: var(--bbhg-gray-200);
}

.bbhg-timeline-group:last-child::before {
    display: none;
}

.bbhg-timeline-group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.bbhg-timeline-marker {
    position: absolute;
    left: 0;
    width: 18px;
    height: 18px;
    background: var(--bbhg-gray-200);
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bbhg-timeline-marker.bbhg-timeline-today {
    background: #8b5cf6;
}

.bbhg-timeline-group-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-timeline-events {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Event Item */
.bbhg-event-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    padding-right: 36px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.bbhg-event-item::after {
    content: '›';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #374151;
    transition: all 0.2s;
}

.bbhg-event-item:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.bbhg-event-item:hover::after {
    color: #8b5cf6;
    right: 10px;
}

.bbhg-event-item:active {
    transform: scale(0.98);
}

.bbhg-event-item-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.bbhg-event-item-content {
    flex: 1;
    min-width: 0;
}

.bbhg-event-item-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 4px 0;
}

.bbhg-event-item-date {
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 6px;
}

.bbhg-event-item-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bbhg-event-tag {
    padding: 2px 8px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.bbhg-event-item-category {
    padding: 4px 10px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.bbhg-event-item-category.holiday { background: #f59e0b; }
.bbhg-event-item-category.awareness { background: #8b5cf6; }
.bbhg-event-item-category.social { background: #3b82f6; }
.bbhg-event-item-category.sports { background: #10b981; }
.bbhg-event-item-category.entertainment { background: #ec4899; }
.bbhg-event-item-category.tech { background: #6366f1; }
.bbhg-event-item-category.cultural { background: #14b8a6; }
.bbhg-event-item-category.business { background: #64748b; }

/* Categories Grid */
.bbhg-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
}

.bbhg-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: white;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
}

.bbhg-category-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
}

.bbhg-category-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.bbhg-category-card h3 {
    margin: 0 0 5px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-category-card p {
    margin: 0;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-category-count {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 700;
}

/* Category Events Panel */
.bbhg-category-events-panel {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.bbhg-category-panel-header {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-back-btn:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-back-btn svg {
    width: 16px;
    height: 16px;
}

.bbhg-category-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-category-events-list {
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* AI Insights Container */
.bbhg-ai-insights-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

/* Posting Schedule Grid */
.bbhg-posting-schedule-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.bbhg-schedule-day {
    text-align: center;
}

.bbhg-schedule-day-name {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-schedule-times {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bbhg-schedule-time {
    padding: 4px 8px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
}

.bbhg-schedule-time.peak {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
}

/* Search Container */
.bbhg-search-container {
    padding: 10px 0;
}

.bbhg-event-search-box {
    margin-bottom: 20px;
}

.bbhg-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    background: white;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    transition: border-color 0.2s;
}

.bbhg-search-input-wrap:focus-within {
    border-color: #8b5cf6;
}

.bbhg-search-icon {
    width: 20px;
    height: 20px;
    stroke: var(--bbhg-gray-400);
    flex-shrink: 0;
}

.bbhg-event-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: var(--bbhg-gray-800);
}

.bbhg-event-search-input::placeholder {
    color: #374151;
}

.bbhg-event-search-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-event-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-search-suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.bbhg-suggestion-label {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-suggestion-tag {
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-suggestion-tag:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* Discover Input */
.bbhg-discover-prompt {
    text-align: center;
    padding: 20px;
}

.bbhg-discover-prompt p {
    margin: 0 0 15px 0;
    color: #1f2937;
}

.bbhg-discover-input-wrap {
    display: flex;
    gap: 10px;
    max-width: 500px;
    margin: 0 auto;
}

.bbhg-discover-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 10px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.bbhg-discover-input:focus {
    outline: none;
    border-color: #8b5cf6;
}

.bbhg-discover-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-discover-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

/* Search Results */
.bbhg-search-results,
.bbhg-ai-discovery-results {
    margin-top: 20px;
}

.bbhg-search-results-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-ai-sparkle {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.bbhg-search-results-list,
.bbhg-discovery-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Event Modal */
.bbhg-event-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000001;
    padding: 20px;
}

.bbhg-event-modal-content {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.bbhg-event-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-event-modal-category {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.bbhg-event-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    position: relative;
    z-index: 10;
}

.bbhg-event-modal-close:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-event-modal-close svg {
    width: 20px;
    height: 20px;
    stroke: var(--bbhg-gray-500);
}

.bbhg-event-modal-title {
    margin: 0;
    padding: 20px 20px 10px;
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-event-modal-date {
    padding: 0 20px 15px;
    font-size: 14px;
    color: #1f2937;
}

.bbhg-event-modal-description {
    padding: 0 20px 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
}

.bbhg-event-modal-section {
    padding: 15px 20px;
    border-top: 1px solid var(--bbhg-gray-100);
}

.bbhg-event-modal-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-event-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-event-hashtag {
    padding: 6px 12px;
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-event-hashtag:hover {
    background: #8b5cf6;
    color: white;
}

.bbhg-event-content-ideas {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-content-idea {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--bbhg-gray-50);
    border-radius: 8px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

.bbhg-content-idea-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.bbhg-event-strategy {
    padding: 10px;
}

.bbhg-generate-strategy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    border: none !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-style: none !important;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
}

.bbhg-generate-strategy-btn svg {
    stroke: #ffffff !important;
    fill: none !important;
    color: #ffffff !important;
}

.bbhg-generate-strategy-btn:focus,
.bbhg-generate-strategy-btn:active,
.bbhg-generate-strategy-btn:focus-visible,
.bbhg-generate-strategy-btn:focus-within,
.bbhg-generate-strategy-btn:-moz-focusring {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
}

.bbhg-generate-strategy-btn:focus:not(:focus-visible) {
    box-shadow: none !important;
}

.bbhg-generate-strategy-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

/* Generate AI Content Ideas Button */
.bbhg-generate-ideas-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.bbhg-generate-ideas-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bbhg-generate-ideas-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3);
}

.bbhg-generate-ideas-btn:focus:not(:focus-visible) {
    box-shadow: none;
}

/* AI Generated Ideas Styles */
.bbhg-ai-generated-ideas {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(124, 58, 237, 0.05) 100%);
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.bbhg-ai-badge-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #000;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 10px;
}

.bbhg-ai-spark {
    font-size: 10px;
}

.bbhg-idea-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bbhg-idea-item {
    padding: 8px 10px;
    margin-bottom: 6px;
    background: white;
    border-radius: 8px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    border: 1px solid var(--bbhg-gray-200);
    transition: all 0.2s;
}

.bbhg-idea-item:last-child {
    margin-bottom: 0;
}

.bbhg-idea-item:hover {
    border-color: var(--bbhg-primary);
    background: rgba(14, 165, 233, 0.03);
}

/* Spin animation for loading */
.bbhg-spin {
    animation: bbhg-spin 1s linear infinite;
}

@keyframes bbhg-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.bbhg-event-modal-actions {
    display: flex;
    gap: 10px;
    padding: 15px 20px 20px;
}

.bbhg-copy-hashtags-btn,
.bbhg-add-to-calendar-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.bbhg-copy-hashtags-btn:focus,
.bbhg-add-to-calendar-btn:focus {
    outline: none;
}

.bbhg-copy-hashtags-btn:focus:not(:focus-visible),
.bbhg-add-to-calendar-btn:focus:not(:focus-visible) {
    box-shadow: none;
}

.bbhg-copy-hashtags-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
}

.bbhg-copy-hashtags-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bbhg-add-to-calendar-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white !important;
}

.bbhg-add-to-calendar-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

/* Calendar Footer */
.bbhg-calendar-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    margin-top: 20px;
    border-top: 1px solid var(--bbhg-gray-200);
    font-size: 12px;
    color: #1f2937;
}

.bbhg-calendar-refresh-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-calendar-refresh-all:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* AI Buttons */
.bbhg-calendar-ai-btn,
.bbhg-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.bbhg-calendar-ai-btn:hover,
.bbhg-refresh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.bbhg-calendar-ai-btn:focus,
.bbhg-refresh-btn:focus {
    outline: none;
}

.bbhg-calendar-ai-btn:focus:not(:focus-visible),
.bbhg-refresh-btn:focus:not(:focus-visible) {
    box-shadow: none;
}

.bbhg-refresh-btn {
    padding: 6px 12px;
    font-size: 12px;
}

.bbhg-ai-pulse {
    width: 8px;
    height: 8px;
    background: #10b981;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

/* AI Badge */
.bbhg-ai-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #000;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
}

/* Calendar Responsive */
@media (max-width: 768px) {
    .bbhg-calendar-container {
        padding: 15px;
        max-height: none;
        overflow-x: hidden;
    }
    
    .bbhg-calendar-header {
        padding: 14px 16px;
        border-radius: 12px;
        margin-bottom: 15px;
    }
    
    .bbhg-calendar-title {
        font-size: 17px;
    }
    
    .bbhg-calendar-subtitle {
        font-size: 12px;
    }
    
    .bbhg-calendar-tabs {
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
    }
    
    .bbhg-calendar-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-calendar-card {
        border-radius: 8px;
        margin-bottom: 12px;
    }
    
    .bbhg-calendar-grid {
        gap: 12px;
    }
    
    .bbhg-calendar-stats {
        gap: 8px;
        padding: 12px;
        margin: 15px 0;
    }
    
    .bbhg-calendar-stat {
        min-width: calc(50% - 8px);
        padding: 8px 12px;
    }
    
    .bbhg-calendar-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .bbhg-calendar-nav {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .bbhg-calendar-filters {
        width: 100%;
    }
    
    .bbhg-calendar-filter-select {
        width: 100%;
    }
        padding: 15px;
        background: var(--bbhg-gray-50);
        border-radius: 12px;
    }
    
    .bbhg-calendar-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
    }
    
    .bbhg-calendar-current-month {
        flex: 1;
        text-align: center;
        min-width: 120px;
    }
    
    .bbhg-calendar-today-btn {
        margin-left: 0;
    }
    
    .bbhg-calendar-filters {
        width: 100%;
        margin-top: 5px;
    }
    
    .bbhg-calendar-filter-select {
        width: 100%;
        padding: 10px 12px;
        font-size: 14px;
    }
    
    .bbhg-calendar-main-grid {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0;
    }
    
    .bbhg-calendar-weekdays,
    .bbhg-calendar-days {
        min-width: 100%;
    }
    
    .bbhg-calendar-day {
        min-height: 50px;
        min-width: 40px;
        padding: 4px 2px;
        position: relative;
    }
    
    .bbhg-calendar-day-number {
        width: 22px;
        height: 22px;
        font-size: 10px;
    }
    
    .bbhg-calendar-event-dot {
        font-size: 8px;
        padding: 1px 3px;
    }
    
    .bbhg-calendar-weekday {
        padding: 8px 4px;
        font-size: 10px;
    }
    
    .bbhg-calendar-legend {
        gap: 8px;
        padding: 10px;
    }
    
    .bbhg-legend-item {
        font-size: 10px;
    }
    
    .bbhg-categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-posting-schedule-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .bbhg-ai-insights-container {
        grid-template-columns: 1fr;
    }
    
    .bbhg-event-modal-actions {
        flex-direction: column;
    }
    
    .bbhg-discover-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-calendar-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-calendar-card-wide {
        width: 100%;
    }
    
    .bbhg-calendar-footer {
        padding: 12px 10px;
    }
}

@media (max-width: 480px) {
    .bbhg-calendar-container {
        padding: 10px;
    }
    
    .bbhg-calendar-header {
        padding: 12px;
    }
    
    .bbhg-calendar-title h2 {
        font-size: 16px;
    }
    
    .bbhg-calendar-icon {
        width: 40px;
        height: 40px;
    }
    
    .bbhg-calendar-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .bbhg-calendar-subtitle {
        font-size: 11px;
    }
    
    .bbhg-calendar-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
    
    .bbhg-calendar-nav-btn {
        width: 32px;
        height: 32px;
    }
    
    .bbhg-calendar-current-month {
        padding: 6px 10px;
        min-width: 100px;
    }
    
    .bbhg-calendar-month-name {
        font-size: 13px;
    }
    
    .bbhg-calendar-today-btn {
        padding: 6px 12px;
        font-size: 12px;
        width: 100%;
        margin-top: 6px;
    }
    
    .bbhg-calendar-day {
        min-height: 45px;
        min-width: 35px;
        position: relative;
    }
    
    .bbhg-calendar-day-number {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }
    
    .bbhg-calendar-event-dot {
        display: none;
    }
    
    .bbhg-calendar-day.has-events::after {
        content: '';
        position: absolute;
        bottom: 4px;
        left: 50%;
        transform: translateX(-50%);
        width: 6px;
        height: 6px;
        background: #8b5cf6;
        border-radius: 50%;
    }
    
    .bbhg-calendar-stat {
        min-width: 100%;
    }
    
    .bbhg-calendar-legend {
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 0;
    }
    
    .bbhg-calendar-card {
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-left: -8px;
        margin-right: -8px;
        width: calc(100% + 16px);
    }
    
    .bbhg-calendar-footer {
        padding: 12px 8px;
        margin-left: -8px;
        margin-right: -8px;
        width: calc(100% + 16px);
    }
}

/* ================================
   GLOBAL OUTLINE OVERRIDE
   Removes all yellow/default browser outlines
   ================================ */
.bbhg-event-modal button,
.bbhg-event-modal-content button,
#bbhg-event-modal button,
.bbhg-day-popup-overlay button,
.bbhg-generate-strategy-btn,
.bbhg-copy-hashtags-btn,
.bbhg-add-to-calendar-btn,
.bbhg-generate-ideas-btn,
.bbhg-calendar-ai-btn,
.bbhg-day-popup-close,
.bbhg-event-modal-close {
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    border-color: transparent;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

.bbhg-event-modal button:focus,
.bbhg-event-modal button:active,
.bbhg-event-modal button:focus-visible,
.bbhg-event-modal-content button:focus,
.bbhg-event-modal-content button:active,
#bbhg-event-modal button:focus,
#bbhg-event-modal button:active,
.bbhg-day-popup-close:focus,
.bbhg-day-popup-close:active,
.bbhg-generate-strategy-btn:focus,
.bbhg-generate-strategy-btn:active,
.bbhg-copy-hashtags-btn:focus,
.bbhg-copy-hashtags-btn:active,
.bbhg-add-to-calendar-btn:focus,
.bbhg-add-to-calendar-btn:active {
    outline: none !important;
    outline-width: 0 !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Force white SVG icons in buttons */
.bbhg-generate-strategy-btn svg,
.bbhg-generate-strategy-btn svg path,
.bbhg-copy-hashtags-btn svg,
.bbhg-copy-hashtags-btn svg path,
.bbhg-copy-hashtags-btn svg rect,
.bbhg-add-to-calendar-btn svg,
.bbhg-add-to-calendar-btn svg path,
.bbhg-add-to-calendar-btn svg line,
.bbhg-add-to-calendar-btn svg rect,
.bbhg-generate-ideas-btn svg,
.bbhg-generate-ideas-btn svg path,
.bbhg-generate-ideas-btn svg line,
.bbhg-generate-ideas-btn svg circle,
.bbhg-calendar-ai-btn svg,
.bbhg-calendar-ai-btn svg path {
    stroke: #ffffff !important;
    fill: none !important;
    color: #ffffff !important;
}

/* ================================
   ULTRA AGGRESSIVE YELLOW OUTLINE KILLER
   This ensures NO yellow outlines appear on any buttons
   ================================ */
#generate-event-strategy,
#generate-event-strategy:focus,
#generate-event-strategy:active,
#generate-event-strategy:hover,
#generate-event-strategy:focus-visible,
#copy-event-hashtags,
#copy-event-hashtags:focus,
#copy-event-hashtags:active,
#add-to-calendar,
#add-to-calendar:focus,
#add-to-calendar:active,
#generate-ai-content-ideas,
#generate-ai-content-ideas:focus,
#generate-ai-content-ideas:active,
button.bbhg-generate-strategy-btn,
button.bbhg-generate-strategy-btn:focus,
button.bbhg-generate-strategy-btn:active,
button.bbhg-copy-hashtags-btn,
button.bbhg-copy-hashtags-btn:focus,
button.bbhg-add-to-calendar-btn,
button.bbhg-add-to-calendar-btn:focus {
    outline: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-style: none !important;
    outline-color: transparent !important;
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-focus-ring-color: transparent !important;
}

/* Kill yellow on all event modal buttons */
.bbhg-event-modal button,
.bbhg-event-modal-content button,
#bbhg-event-modal button,
.bbhg-event-modal button:focus,
.bbhg-event-modal-content button:focus,
#bbhg-event-modal button:focus {
    outline: 0 !important;
    outline: none !important;
    outline-width: 0 !important;
    outline-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Specific fix for Generate AI Strategy button */
.bbhg-event-strategy button,
.bbhg-event-strategy .bbhg-generate-strategy-btn,
#event-modal-strategy button,
#event-modal-strategy .bbhg-generate-strategy-btn {
    outline: 0 !important;
    outline: none !important;
    border: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* ================================
   ALGORITHM TIPS FEED PANEL
   ================================ */
.bbhg-algorithm-container {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.bbhg-algorithm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 20px;
    margin-bottom: 20px;
    color: white;
}

.bbhg-algorithm-title-section {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-algorithm-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-algorithm-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-algorithm-header h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-algorithm-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.bbhg-algorithm-actions {
    display: flex;
    gap: 8px;
}

.bbhg-algorithm-refresh-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
}

.bbhg-algorithm-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.bbhg-algorithm-refresh-btn svg {
    width: 20px;
    height: 20px;
}

.bbhg-algorithm-refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

/* Algorithm Tabs */
.bbhg-algorithm-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 5px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.bbhg-algorithm-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-algorithm-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-algorithm-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-300);
}

.bbhg-algorithm-tab.active {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800) !important;
    border-color: #374151;
}

.bbhg-algorithm-tab .bbhg-tab-icon {
    font-size: 14px;
}

/* Algorithm Filters */
.bbhg-algorithm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bbhg-gray-200);
    margin-bottom: 16px;
}

.bbhg-algorithm-category-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bbhg-algo-cat-pill {
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-algo-cat-pill:hover {
    border-color: #374151;
    color: var(--bbhg-gray-800);
}

.bbhg-algo-cat-pill.active {
    background: var(--bbhg-gray-200);
    border-color: #374151;
    color: var(--bbhg-gray-800) !important;
}

/* Algorithm Stats */
.bbhg-algorithm-stats {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f0f0ff 0%, #fff 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 16px;
    border: 1px solid rgba(99, 102, 241, 0.1);
}

.bbhg-algo-stat {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-algo-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #6366f1;
}

.bbhg-algo-stat-label {
    font-size: 12px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Algorithm Feed */
.bbhg-algorithm-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    min-height: 200px;
}

.bbhg-algorithm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #1f2937;
}

/* Tip Cards */
.bbhg-algo-tip-card {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-algo-tip-card:hover {
    border-color: var(--bbhg-gray-300);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bbhg-algo-tip-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-100);
}

.bbhg-algo-tip-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-algo-tip-platform {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-algo-tip-platform.instagram {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    border: none;
}

.bbhg-algo-tip-platform.tiktok {
    background: #000000;
    color: white;
    border: none;
}

.bbhg-algo-tip-platform.youtube {
    background: #FF0000;
    color: white;
    border: none;
}

.bbhg-algo-tip-platform.x {
    background: #000000;
    color: white;
    border: none;
}

.bbhg-algo-tip-platform.linkedin {
    background: #0A66C2;
    color: white;
    border: none;
}

.bbhg-algo-tip-category {
    padding: 4px 10px;
    background: #6366f1;
    color: white;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bbhg-algo-tip-category.updates { background: #3b82f6; }
.bbhg-algo-tip-category.tips { background: #10b981; }
.bbhg-algo-tip-category.timing { background: #f59e0b; }
.bbhg-algo-tip-category.myths { background: #ef4444; }
.bbhg-algo-tip-category.features { background: #8b5cf6; }

.bbhg-algo-tip-date {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-algo-tip-body {
    padding: 16px;
}

.bbhg-algo-tip-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.bbhg-algo-tip-content {
    font-size: 14px;
    color: #1f2937;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.bbhg-algo-tip-takeaway {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
    border-radius: 8px;
    border-left: 3px solid #10b981;
}

.bbhg-algo-tip-takeaway-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-algo-tip-takeaway-text {
    font-size: 13px;
    font-weight: 600;
    color: #166534;
    line-height: 1.5;
}

.bbhg-algo-tip-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--bbhg-gray-100);
    background: var(--bbhg-gray-50);
}

.bbhg-algo-tip-source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-algo-tip-source a {
    color: #6366f1;
    text-decoration: none;
}

.bbhg-algo-tip-source a:hover {
    text-decoration: underline;
}

.bbhg-algo-tip-actions {
    display: flex;
    gap: 8px;
}

.bbhg-algo-tip-action-btn {
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-algo-tip-action-btn:hover {
    background: var(--bbhg-gray-100);
    border-color: #374151;
}

.bbhg-algo-tip-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Ask Section */
.bbhg-algorithm-ask-section {
    background: linear-gradient(135deg, #faf5ff 0%, #fff 100%);
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-algorithm-ask-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.bbhg-ask-icon {
    font-size: 24px;
}

.bbhg-algorithm-ask-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-algorithm-ask-input-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.bbhg-algorithm-ask-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s;
}

.bbhg-algorithm-ask-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-algorithm-ask-btn {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
}

.bbhg-algorithm-ask-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.bbhg-algorithm-ask-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-algorithm-ask-suggestions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-ask-suggestion {
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-ask-suggestion:hover {
    background: var(--bbhg-gray-100);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-algorithm-ask-response {
    margin-top: 16px;
    padding: 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-algorithm-ask-response p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--bbhg-gray-700);
    margin: 0;
}

/* Sources Footer */
.bbhg-algorithm-sources {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 10px;
    flex-wrap: wrap;
}

.bbhg-sources-label {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-sources-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-source-badge {
    padding: 4px 10px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 11px;
    color: #1f2937;
}

/* Algorithm Empty State */
.bbhg-algorithm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-algorithm-empty svg {
    width: 64px;
    height: 64px;
    stroke: var(--bbhg-gray-300);
    margin-bottom: 16px;
}

.bbhg-algorithm-empty-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
}

.bbhg-algorithm-empty-text {
    font-size: 14px;
    color: #1f2937;
}

/* Algorithm Responsive */
@media (max-width: 768px) {
    .bbhg-algorithm-container {
        padding: 12px;
    }
    
    .bbhg-algorithm-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
    }
    
    .bbhg-algorithm-title-section {
        flex-direction: column;
    }
    
    .bbhg-algorithm-tabs {
        gap: 6px;
    }
    
    .bbhg-algorithm-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-algorithm-stats {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .bbhg-algo-stat {
        min-width: calc(33% - 8px);
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 2px;
    }
    
    .bbhg-algorithm-ask-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-algorithm-ask-btn {
        width: 100%;
        height: 44px;
    }
    
    .bbhg-algo-tip-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .bbhg-algo-tip-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .bbhg-algorithm-header {
        border-radius: 16px;
    }
    
    .bbhg-algo-tip-card {
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .bbhg-algorithm-ask-section {
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .bbhg-algorithm-sources {
        margin-left: -12px;
        margin-right: -12px;
        width: calc(100% + 24px);
        border-radius: 0;
    }
}

/* ================================
   AUDIO / SOUNDS TAB PANEL
   ================================ */
.bbhg-audio-container {
    padding: 20px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.bbhg-audio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #6366f1 100%);
    border-radius: 16px;
    margin-bottom: 20px;
    color: white;
}

.bbhg-audio-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bbhg-audio-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-audio-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-audio-header h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: white !important;
}

.bbhg-audio-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.bbhg-audio-actions {
    display: flex;
    gap: 8px;
}

.bbhg-audio-refresh-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
}

.bbhg-audio-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.bbhg-audio-refresh-btn svg {
    width: 22px;
    height: 22px;
}

.bbhg-audio-refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

/* Audio Tabs */
.bbhg-audio-tabs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    margin-bottom: 16px;
    overflow-x: auto;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-audio-tabs::-webkit-scrollbar {
    height: 0;
}

.bbhg-audio-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-audio-tab:hover {
    border-color: #ec4899;
    color: #ec4899;
}

.bbhg-audio-tab.active {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: white !important;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.35);
}

.bbhg-audio-tab .bbhg-tab-icon {
    font-size: 16px;
}

/* Audio Filters */
.bbhg-audio-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    border: 1px solid var(--bbhg-gray-200);
    align-items: center;
}

.bbhg-audio-filters .bbhg-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bbhg-audio-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-audio-cat-pill {
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-audio-cat-pill:hover {
    border-color: #ec4899;
    color: #ec4899;
}

.bbhg-audio-cat-pill.active {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: white !important;
    border-color: transparent;
}

/* Audio Time Pills */
.bbhg-audio-time-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-audio-time-pill {
    padding: 8px 16px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-audio-time-pill:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.bbhg-audio-time-pill.active {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    color: white !important;
    border-color: transparent;
}

/* Audio Action Button */
.bbhg-audio-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.bbhg-audio-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 36px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: white !important;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
}

.bbhg-audio-scan-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.5);
}

.bbhg-audio-scan-btn svg {
    width: 22px;
    height: 22px;
    stroke: white;
}

.bbhg-audio-scan-btn.loading svg {
    animation: spin 1s linear infinite;
}

.bbhg-audio-stats {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-audio-stats .bbhg-stat-item strong {
    color: #ec4899;
}

/* Audio Results */
.bbhg-audio-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-x: hidden;
}

.bbhg-audio-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #1f2937;
    gap: 12px;
}

.bbhg-audio-section {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    padding: 20px;
    overflow: hidden;
}

.bbhg-audio-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 16px 0;
}

.bbhg-audio-section-title .bbhg-audio-count {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

.bbhg-audio-section-title svg {
    stroke: #ec4899;
}

.bbhg-audio-pulse {
    width: 10px;
    height: 10px;
    background: #ec4899;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.bbhg-audio-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-audio-placeholder {
    width: 100%;
    text-align: center;
    padding: 40px 20px;
    color: #374151;
    font-size: 14px;
}

/* Audio Card */
.bbhg-audio-card {
    background: linear-gradient(135deg, #fdf4ff 0%, #faf5ff 100%);
    border: 1px solid #f3e8ff;
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s ease;
    display: inline-block;
    width: calc(33.333% - 12px);
    min-width: 250px;
    max-width: 100%;
    box-sizing: border-box;
    flex: 1 1 280px;
    overflow: hidden;
}

@media (max-width: 900px) {
    .bbhg-audio-card {
        width: calc(50% - 8px);
        flex: 1 1 240px;
    }
}

@media (max-width: 600px) {
    .bbhg-audio-card {
        width: 100%;
        flex: 1 1 100%;
        min-width: unset;
    }
}

.bbhg-audio-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.15);
    border-color: #ec4899;
}

.bbhg-audio-card-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    max-width: 100%;
}

.bbhg-audio-card-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.bbhg-audio-card-info {
    flex: 1;
    min-width: 0;
    max-width: calc(100% - 60px);
    overflow: hidden;
}

.bbhg-audio-card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
}

.bbhg-audio-card-title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

/* Rank Badge for top chart positions */
.bbhg-audio-rank-badge {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    color: white;
    margin-left: auto;
}

.bbhg-audio-card-artist {
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: block;
}

.bbhg-audio-card-source {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #1f2937;
    margin-bottom: 12px;
    padding: 6px 10px;
    background: var(--bbhg-gray-50);
    border-radius: 8px;
}

.bbhg-audio-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.bbhg-audio-tag {
    padding: 4px 10px;
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.bbhg-audio-card-actions {
    display: flex;
    gap: 8px;
}

.bbhg-audio-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-audio-action-btn:hover {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: white !important;
    border-color: transparent;
}

.bbhg-audio-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Audio Hashtags Section */
.bbhg-audio-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-audio-hashtag-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-audio-hashtag-item:hover {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
}

.bbhg-audio-hashtag-text {
    font-size: 13px;
    font-weight: 600;
}

.bbhg-audio-hashtag-count {
    font-size: 11px;
    opacity: 0.7;
}

/* Audio Ask Section */
.bbhg-audio-ask-section {
    background: linear-gradient(135deg, #fdf4ff 0%, #faf5ff 100%);
    border: 1px solid #f3e8ff;
    border-radius: 14px;
    padding: 20px;
    margin-top: 20px;
}

.bbhg-audio-ask-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.bbhg-audio-ask-header .bbhg-ask-icon {
    font-size: 24px;
}

.bbhg-audio-ask-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-audio-ask-input-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.bbhg-audio-ask-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e9d5ff;
    border-radius: 10px;
    font-size: 14px;
    background: white;
}

.bbhg-audio-ask-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.bbhg-audio-ask-btn {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: all 0.2s;
}

.bbhg-audio-ask-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4);
}

.bbhg-audio-ask-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-audio-ask-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-audio-ask-response {
    margin-top: 16px;
    padding: 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e9d5ff;
}

.bbhg-audio-ask-response p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
}

.bbhg-audio-ask-response p + p {
    margin-top: 12px;
}

.bbhg-audio-answer {
    color: var(--bbhg-gray-700);
}

.bbhg-audio-answer strong {
    color: var(--bbhg-gray-900);
    font-weight: 600;
}

.bbhg-audio-error {
    color: #dc2626;
    font-style: italic;
}

/* Audio Sources Footer */
.bbhg-audio-sources {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.bbhg-audio-sources .bbhg-sources-label {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

.bbhg-audio-sources .bbhg-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-audio-sources .bbhg-source-badge {
    padding: 4px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 16px;
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
}

/* Audio Tab Badge */
.bbhg-tab-badge-audio {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%) !important;
    color: white !important;
    box-shadow: 0 2px 6px rgba(236, 72, 153, 0.4);
    animation: badgePulse 2s ease-in-out infinite;
}

/* Audio Responsive */
@media (max-width: 768px) {
    .bbhg-audio-container {
        padding: 12px;
    }
    
    .bbhg-audio-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 16px;
        border-radius: 16px;
    }
    
    .bbhg-audio-title-section {
        flex-direction: column;
    }
    
    .bbhg-audio-tabs {
        gap: 6px;
    }
    
    .bbhg-audio-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .bbhg-audio-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-audio-ask-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-audio-ask-btn {
        width: 100%;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .bbhg-audio-header {
        border-radius: 16px;
    }
    
    .bbhg-audio-card {
        padding: 14px;
    }
    
    .bbhg-audio-scan-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   AI MUSIC INTELLIGENCE STYLES
   ================================ */

.bbhg-music-ai-section {
    margin-top: 24px;
    background: linear-gradient(135deg, #fdf4ff 0%, #f0f9ff 100%);
    border: 1px solid #e9d5ff;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
}

.bbhg-music-ai-section .bbhg-audio-section-title {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #ec4899 100%);
    color: white;
    padding: 16px 20px;
    margin: 0;
    border-radius: 0;
    font-size: 16px;
}

.bbhg-music-ai-section .bbhg-audio-section-title svg {
    stroke: white;
}

.bbhg-ai-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #000;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: auto;
    letter-spacing: 0.5px;
}

.bbhg-music-ai-content {
    padding: 20px;
}

.bbhg-music-ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    color: #1f2937;
}

/* AI Summary */
.bbhg-music-ai-summary {
    background: white;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    border-left: 4px solid #8b5cf6;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.1);
}

.bbhg-music-ai-summary-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
}

.bbhg-music-ai-summary-text p {
    margin: 0;
}

/* Section headers */
.bbhg-music-ai-content h5 {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Viral Predictions */
.bbhg-music-ai-predictions,
.bbhg-music-ai-opportunities,
.bbhg-music-ai-timing,
.bbhg-music-ai-genres {
    margin-bottom: 20px;
}

.bbhg-music-ai-predictions-list,
.bbhg-music-ai-opportunities-list,
.bbhg-music-ai-genres-list {
    display: grid;
    gap: 12px;
}

.bbhg-music-ai-prediction-card {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #f3e8ff;
    transition: all 0.2s;
}

.bbhg-music-ai-prediction-card:hover {
    border-color: #d8b4fe;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.bbhg-music-ai-prediction-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-music-ai-track {
    font-weight: 600;
    color: var(--bbhg-gray-800);
    font-size: 13px;
}

.bbhg-music-ai-confidence {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 10px;
}

.bbhg-music-ai-confidence.high {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.bbhg-music-ai-confidence.medium {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.bbhg-music-ai-confidence.low {
    background: #e5e7eb;
    color: #1f2937;
}

.bbhg-music-ai-prediction-text {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
    margin: 0 0 8px 0;
}

.bbhg-music-ai-best-use {
    font-size: 12px;
    color: #8b5cf6;
    font-weight: 500;
}

/* Content Opportunities */
.bbhg-music-ai-opportunity-card {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #f3e8ff;
    transition: all 0.2s;
}

.bbhg-music-ai-opportunity-card:hover {
    transform: translateX(4px);
}

.bbhg-music-ai-opportunity-card.urgency-high {
    border-left: 4px solid #ef4444;
}

.bbhg-music-ai-opportunity-card.urgency-medium {
    border-left: 4px solid #f59e0b;
}

.bbhg-music-ai-opportunity-card.urgency-low {
    border-left: 4px solid #10b981;
}

.bbhg-music-ai-opportunity-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bbhg-music-ai-opportunity-icon {
    font-size: 16px;
}

.bbhg-music-ai-urgency {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1f2937;
}

.bbhg-music-ai-opportunity-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
    margin: 0 0 10px 0;
}

.bbhg-music-ai-tracks-to-use {
    font-size: 12px;
    color: #6366f1;
    margin-bottom: 6px;
}

.bbhg-music-ai-source {
    font-size: 11px;
    color: #1f2937;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 6px;
}

/* Timing Section */
.bbhg-music-ai-timing-grid {
    background: white;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #f3e8ff;
}

.bbhg-music-ai-timing-item {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-music-ai-timing-item strong {
    color: var(--bbhg-gray-800);
}

.bbhg-music-ai-timing-reason {
    font-size: 12px;
    color: #1f2937;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
    margin-top: 4px;
}

/* Genre Insights */
.bbhg-music-ai-genre-card {
    background: white;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #f3e8ff;
    transition: all 0.2s;
}

.bbhg-music-ai-genre-card:hover {
    border-color: #d8b4fe;
}

.bbhg-music-ai-genre-card.trend-up {
    border-left: 4px solid #10b981;
}

.bbhg-music-ai-genre-card.trend-down {
    border-left: 4px solid #ef4444;
}

.bbhg-music-ai-genre-card.trend-stable {
    border-left: 4px solid #6366f1;
}

.bbhg-music-ai-genre-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.bbhg-music-ai-genre-name {
    font-weight: 600;
    color: var(--bbhg-gray-800);
    font-size: 13px;
}

.bbhg-music-ai-trend-icon {
    font-size: 16px;
}

.bbhg-music-ai-genre-rec {
    font-size: 12px;
    color: #1f2937;
    line-height: 1.5;
    margin: 0;
}

/* Quick Tips */
.bbhg-music-ai-tips {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
    border: 1px solid #fde68a;
}

.bbhg-music-ai-tips h5 {
    margin-bottom: 10px;
}

.bbhg-music-ai-tips ul {
    margin: 0;
    padding-left: 20px;
}

.bbhg-music-ai-tips li {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
    margin-bottom: 6px;
}

.bbhg-music-ai-tips li:last-child {
    margin-bottom: 0;
}

/* Default AI Message */
.bbhg-music-ai-default {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    border: 1px dashed #d8b4fe;
}

.bbhg-music-ai-default p {
    margin: 0;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.6;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-music-ai-content {
        padding: 16px;
    }
    
    .bbhg-music-ai-prediction-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-music-ai-genre-card,
    .bbhg-music-ai-prediction-card,
    .bbhg-music-ai-opportunity-card {
        padding: 12px 14px;
    }
}

/* ================================
   VIRAL HOOKS GENERATOR STYLES
   ================================ */

.bbhg-hooks-container {
    padding: 0 4px;
    overflow-x: hidden;
}

#bbhg-panel-hooks {
    overflow-x: hidden;
}

.bbhg-hooks-results {
    overflow-x: hidden;
}

/* Header Banner - Orange/Red gradient with white text */
.bbhg-hooks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #dc2626 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-hooks-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-hooks-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-hooks-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-hooks-title-section {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.bbhg-hooks-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-hooks-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-hooks-title-section h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: white;
}

.bbhg-hooks-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-hooks-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.bbhg-hooks-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: white;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 12px;
    border-radius: 20px;
}

.bbhg-hooks-status-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: bbhg-pulse 2s infinite;
}

.bbhg-hooks-refresh-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-hooks-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

.bbhg-hooks-refresh-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-hooks-refresh-btn.loading svg {
    animation: spin 1s linear infinite;
}

/* Hook Type & Niche Selectors */
.bbhg-hooks-type-section,
.bbhg-hooks-niche-section {
    margin-bottom: 16px;
}

.bbhg-hooks-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-hooks-type-pills,
.bbhg-hooks-niche-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-hooks-type-pill,
.bbhg-hooks-niche-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-hooks-type-pill:hover,
.bbhg-hooks-niche-pill:hover {
    border-color: #f97316;
    color: #f97316;
}

.bbhg-hooks-type-pill.active,
.bbhg-hooks-niche-pill.active {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    border-color: transparent;
    color: #ffffff !important;
}

/* Generate Button */
.bbhg-hooks-generate-section {
    margin: 20px 0;
}

.bbhg-hooks-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #dc2626 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.3);
}

.bbhg-hooks-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(249, 115, 22, 0.4);
}

.bbhg-hooks-generate-btn:active {
    transform: translateY(0);
}

.bbhg-hooks-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-hooks-generate-btn span {
    color: #ffffff !important;
}

.bbhg-hooks-generate-btn.loading {
    opacity: 0.8;
    cursor: wait;
}

/* Stats Cards */
.bbhg-hooks-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-hooks-stat-card {
    background: white;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-hooks-stat-icon {
    font-size: 24px;
}

.bbhg-hooks-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-hooks-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-hooks-stat-label {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Loading & Default States */
.bbhg-hooks-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: #1f2937;
}

.bbhg-hooks-default {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px dashed #fdba74;
    border-radius: 16px;
}

.bbhg-hooks-default-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-hooks-default h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-hooks-default p {
    margin: 0 0 20px;
    font-size: 14px;
    color: #1f2937;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-hooks-examples {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.bbhg-hooks-example {
    background: white;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #ea580c;
    font-weight: 500;
    border: 1px solid #fed7aa;
}

/* Results Sections */
.bbhg-hooks-section {
    margin-bottom: 24px;
}

.bbhg-hooks-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.bbhg-hooks-section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-hooks-section-header h3 svg {
    width: 20px;
    height: 20px;
    stroke: #f97316;
}

.bbhg-hooks-section-badge {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hooks Grid */
.bbhg-hooks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    overflow-x: hidden;
}

/* Hook Card */
.bbhg-hook-card {
    background: white;
    border: 1px solid #fed7aa;
    border-radius: 14px;
    padding: 16px;
    transition: all 0.2s;
}

.bbhg-hook-card:hover {
    border-color: #f97316;
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15);
    transform: translateY(-2px);
}

.bbhg-hook-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bbhg-hook-card-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ea580c;
    background: #fff7ed;
    padding: 4px 10px;
    border-radius: 8px;
}

.bbhg-hook-card-viral {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    padding: 4px 10px;
    border-radius: 8px;
}

.bbhg-hook-card-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    line-height: 1.5;
    margin-bottom: 12px;
    min-height: 45px;
}

.bbhg-hook-card-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bbhg-hook-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-hook-card-actions {
    display: flex;
    gap: 8px;
}

.bbhg-hook-card-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-hook-card-btn.primary {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
    color: #ffffff !important;
}

.bbhg-hook-card-btn.primary:hover {
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
}

.bbhg-hook-card-btn.primary svg {
    stroke: white;
}

.bbhg-hook-card-btn.secondary {
    background: #fff7ed;
    color: #ea580c;
    border: 1px solid #fed7aa;
}

.bbhg-hook-card-btn.secondary:hover {
    background: #ffedd5;
}

.bbhg-hook-card-btn.secondary svg {
    stroke: #ea580c;
}

.bbhg-hook-card-btn svg {
    width: 16px;
    height: 16px;
}

/* Hook Templates */
.bbhg-hooks-templates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.bbhg-hook-template {
    background: white;
    border: 1px solid #fed7aa;
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-hook-template:hover {
    border-color: #f97316;
    background: #fff7ed;
}

.bbhg-hook-template-text {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

.bbhg-hook-template-text .blank {
    background: #fed7aa;
    padding: 2px 8px;
    border-radius: 4px;
    color: #ea580c;
    font-weight: 600;
}

/* AI Tips Section */
.bbhg-hooks-ai-tips-section {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #fed7aa;
}

.bbhg-hooks-tips {
    display: grid;
    gap: 10px;
}

.bbhg-hooks-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: white;
    padding: 12px 14px;
    border-radius: 10px;
}

.bbhg-hooks-tip-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-hooks-tip-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-hooks-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    
    .bbhg-hooks-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-hooks-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-hooks-templates {
        grid-template-columns: 1fr;
    }
    
    .bbhg-hooks-type-pills,
    .bbhg-hooks-niche-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE/Edge */
        -webkit-overflow-scrolling: touch;
    }
    
    .bbhg-hooks-type-pills::-webkit-scrollbar,
    .bbhg-hooks-niche-pills::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }
    
    .bbhg-hooks-type-pill,
    .bbhg-hooks-niche-pill {
        flex-shrink: 0;
    }
}

/* ================================
   AI TREND FORECAST PANEL STYLES
   ================================ */

.bbhg-forecast-container {
    padding: 0 4px;
}

/* Header Banner - HashMind purple gradient with white text */
.bbhg-forecast-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-forecast-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-forecast-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-forecast-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-forecast-title-section {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.bbhg-forecast-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-forecast-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-forecast-title-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 2px 0;
}

.bbhg-forecast-subtitle {
    font-size: 13px;
    color: white !important;
    opacity: 0.9;
    margin: 0;
}

.bbhg-forecast-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.bbhg-forecast-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
}

.bbhg-forecast-status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-forecast-refresh-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-forecast-refresh-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

.bbhg-forecast-refresh-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-forecast-refresh-btn.loading svg {
    animation: bbhg-spin 1s linear infinite;
}

/* Niche Selector */
.bbhg-forecast-niche-section {
    margin-bottom: 20px;
}

.bbhg-forecast-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin-bottom: 10px;
}

.bbhg-forecast-niche-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-forecast-niche-pill {
    padding: 8px 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-forecast-niche-pill:hover {
    background: var(--bbhg-bg-tertiary);
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
}

.bbhg-forecast-niche-pill.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-color: transparent;
    color: #ffffff !important;
}

/* Stats Overview */
.bbhg-forecast-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.bbhg-forecast-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-forecast-stat-card:hover {
    border-color: var(--bbhg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bbhg-forecast-stat-icon {
    font-size: 24px;
}

.bbhg-forecast-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-forecast-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-text);
}

.bbhg-forecast-stat-label {
    font-size: 12px;
    color: var(--bbhg-text-muted);
}

/* Content Sections */
.bbhg-forecast-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.bbhg-forecast-section {
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    padding: 16px;
}

.bbhg-forecast-section-full {
    grid-column: 1 / -1;
}

.bbhg-forecast-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-forecast-section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0;
}

.bbhg-forecast-section-header h3 svg {
    width: 20px;
    height: 20px;
    stroke: var(--bbhg-primary);
}

.bbhg-forecast-section-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Topic Cards */
.bbhg-forecast-topics-grid,
.bbhg-forecast-predictions-grid,
.bbhg-forecast-opportunities-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 120px;
}

.bbhg-forecast-topic-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bbhg-forecast-topic-card:hover {
    border-color: var(--bbhg-primary);
    transform: translateX(4px);
}

.bbhg-forecast-topic-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-forecast-topic-rank {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.bbhg-forecast-topic-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-forecast-topic-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-forecast-topic-growth {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: #22c55e;
}

.bbhg-forecast-topic-growth svg {
    width: 14px;
    height: 14px;
    stroke: #22c55e;
}

.bbhg-forecast-topic-time {
    padding: 4px 10px;
    background: var(--bbhg-bg-tertiary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-text-secondary);
}

/* Opportunity Cards */
.bbhg-forecast-opportunity-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-forecast-opportunity-card:hover {
    border-color: var(--bbhg-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.bbhg-forecast-opportunity-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.bbhg-forecast-opportunity-content {
    flex: 1;
}

.bbhg-forecast-opportunity-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin-bottom: 4px;
}

.bbhg-forecast-opportunity-desc {
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    margin-bottom: 10px;
    line-height: 1.4;
}

.bbhg-forecast-opportunity-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-forecast-opportunity-tag {
    padding: 4px 10px;
    background: var(--bbhg-bg-tertiary);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-forecast-opportunity-tag:hover {
    background: var(--bbhg-primary);
    color: white;
}

/* AI Suggestions */
.bbhg-forecast-suggestions-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    min-height: 100px;
}

.bbhg-forecast-suggestion-card {
    padding: 16px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-forecast-suggestion-card:hover {
    border-color: var(--bbhg-primary);
    transform: translateY(-2px);
}

.bbhg-forecast-suggestion-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
}

.bbhg-forecast-suggestion-text {
    font-size: 14px;
    color: var(--bbhg-text);
    line-height: 1.5;
    margin-bottom: 10px;
}

.bbhg-forecast-suggestion-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bbhg-bg-tertiary);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.bbhg-forecast-suggestion-action:hover {
    background: var(--bbhg-primary);
    color: white;
}

.bbhg-forecast-suggestion-action svg {
    width: 14px;
    height: 14px;
}

/* Hashtags Section */
.bbhg-forecast-hashtags-section {
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.bbhg-forecast-hashtags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-forecast-hashtags-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0;
}

.bbhg-forecast-hashtags-header h3 svg {
    width: 20px;
    height: 20px;
    stroke: var(--bbhg-primary);
}

.bbhg-forecast-copy-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-forecast-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 26, 46, 0.3);
    color: #ffffff !important;
}

.bbhg-forecast-copy-all-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-forecast-hashtags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
}

.bbhg-forecast-hashtag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-forecast-hashtag:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-color: transparent;
    color: white;
}

.bbhg-forecast-hashtag-trend {
    font-size: 11px;
    color: #22c55e;
    font-weight: 600;
}

/* Footer */
.bbhg-forecast-footer {
    padding: 12px 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
}

.bbhg-forecast-footer-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--bbhg-text-muted);
}

.bbhg-forecast-powered {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Loading State */
.bbhg-forecast-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 30px;
    color: var(--bbhg-text-muted);
    font-size: 13px;
}

/* Tab Badge */
.bbhg-tab-badge-forecast {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-forecast-header {
        flex-direction: column;
        text-align: center;
        padding: 20px 16px;
    }
    
    .bbhg-forecast-title-section {
        flex-direction: column;
    }
    
    .bbhg-forecast-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-forecast-content {
        grid-template-columns: 1fr;
    }
    
    .bbhg-forecast-suggestions-container {
        grid-template-columns: 1fr;
    }
    
    .bbhg-forecast-niche-pills {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bbhg-forecast-stats {
        grid-template-columns: 1fr;
    }
    
    .bbhg-forecast-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .bbhg-forecast-refresh-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== POST ANALYZER SECTION ===== */
.bbhg-analyze-container {
    padding: 20px;
    min-height: 500px;
}

/* Analyze Header - Similar to HashMind */
.bbhg-analyze-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 24px;
    color: white;
}

.bbhg-analyze-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-analyze-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-analyze-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-analyze-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-analyze-title p,
.bbhg-analyze-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-analyze-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

/* URL Input Section */
.bbhg-analyze-input-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-analyze-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-analyze-input-wrap {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.bbhg-analyze-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 10px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.bbhg-analyze-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

#bbhg-panel-analyze .bbhg-post-analyze-btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    width: auto !important;
    height: auto !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
    color: white !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25) !important;
}

#bbhg-panel-analyze .bbhg-post-analyze-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35) !important;
}

#bbhg-panel-analyze .bbhg-post-analyze-btn svg {
    width: 18px !important;
    height: 18px !important;
    stroke: white !important;
    flex-shrink: 0;
}

#bbhg-panel-analyze .bbhg-post-analyze-btn span {
    color: white !important;
    display: inline !important;
}

.bbhg-analyze-platforms {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 12px;
}

.bbhg-analyze-platform-hint {
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-platform-badge svg {
    flex-shrink: 0;
}

.bbhg-platform-tiktok {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

.bbhg-platform-youtube {
    background: rgba(255, 0, 0, 0.08);
    color: #cc0000;
}

.bbhg-platform-twitter {
    background: rgba(0, 0, 0, 0.05);
    color: #000;
}

/* Loading State */
.bbhg-analyze-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #1f2937;
    gap: 16px;
}

/* Results Section */
.bbhg-analyze-results {
    animation: bbhg-fadeIn 0.3s ease;
}

/* Preview Card */
.bbhg-analyze-preview {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    margin-bottom: 20px;
}

.bbhg-preview-thumbnail {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--bbhg-gray-100);
    flex-shrink: 0;
}

.bbhg-preview-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-preview-info {
    flex: 1;
    min-width: 0;
}

.bbhg-preview-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-preview-author {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px 0;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-preview-author svg {
    stroke: var(--bbhg-gray-500);
}

.bbhg-preview-platform {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--bbhg-gray-100);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

/* AI Analysis Section */
.bbhg-analyze-ai-section {
    margin-bottom: 20px;
}

.bbhg-analyze-ai-header {
    margin-bottom: 16px;
}

.bbhg-analyze-ai-header h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-analyze-ai-header svg {
    stroke: #8b5cf6;
}

/* Analysis Cards */
.bbhg-analyze-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    margin-bottom: 12px;
    overflow: hidden;
}

.bbhg-analyze-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-analyze-card-icon {
    font-size: 18px;
}

.bbhg-analyze-card-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-analyze-card-content {
    padding: 16px;
}

.bbhg-analyze-card-content p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
}

.bbhg-analyze-card-content ul {
    margin: 0;
    padding-left: 20px;
}

.bbhg-analyze-card-content li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
    margin-bottom: 6px;
}

/* Hashtags Section */
.bbhg-analyze-hashtags-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
}

.bbhg-analyze-hashtags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-analyze-hashtags-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-analyze-hashtags-header h4 span {
    color: #8b5cf6;
    font-size: 20px;
}

.bbhg-analyze-copy-all {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-analyze-copy-all:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-analyze-copy-all svg {
    stroke: white !important;
}

.bbhg-analyze-hashtags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-analyze-hashtag {
    display: inline-flex;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-analyze-hashtag:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(99, 102, 241, 0.2) 100%);
    transform: translateY(-1px);
}

/* Error State */
.bbhg-analyze-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-analyze-error h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-analyze-error p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #1f2937;
}

.bbhg-analyze-retry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-analyze-retry:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-analyze-retry svg {
    stroke: white !important;
}

/* No API Key */
.bbhg-analyze-no-key {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-analyze-no-key .bbhg-no-key-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-analyze-no-key h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-analyze-no-key p {
    margin: 0 0 20px 0;
    font-size: 14px;
    color: #1f2937;
    max-width: 400px;
}

/* Tab Badge for Analyze */
.bbhg-tab-badge-analyze {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
    color: white !important;
    animation: badgePulse 2s ease-in-out infinite;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-analyze-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-analyze-status {
        align-self: flex-start;
    }
    
    .bbhg-analyze-input-wrap {
        flex-direction: column;
    }
    
    #bbhg-panel-analyze .bbhg-post-analyze-btn {
        width: 100% !important;
        justify-content: center !important;
    }
    
    .bbhg-analyze-preview {
        flex-direction: column;
    }
    
    .bbhg-preview-thumbnail {
        width: 100%;
        height: 180px;
    }
}

@media (max-width: 480px) {
    .bbhg-analyze-platforms {
        gap: 6px;
    }
    
    .bbhg-analyze-platform-hint {
        font-size: 11px;
    }
    
    .bbhg-platform-badge {
        padding: 4px 8px;
        font-size: 11px;
        gap: 4px;
    }
    
    .bbhg-platform-badge svg {
        width: 10px;
        height: 10px;
    }
}

@media (max-width: 380px) {
    .bbhg-analyze-platform-hint {
        display: none;
    }
    
    .bbhg-platform-badge {
        padding: 4px 6px;
        font-size: 10px;
    }
}

/* ==========================================
   SUPPORT/DONATE TAB STYLES
   ========================================== */

.bbhg-support-container {
    padding: 24px;
    max-width: 500px;
    margin: 0 auto;
}

/* Header */
.bbhg-support-header {
    text-align: center;
    margin-bottom: 32px;
}

.bbhg-support-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a5a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(238, 90, 90, 0.3);
}

.bbhg-support-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
    fill: rgba(255, 255, 255, 0.2);
}

.bbhg-support-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
}

.bbhg-support-subtitle {
    font-size: 15px;
    color: #1f2937;
    margin: 0;
    line-height: 1.5;
}

/* Donation Amounts */
.bbhg-donation-section {
    margin-bottom: 24px;
}

.bbhg-donation-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 12px;
}

.bbhg-donation-amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bbhg-donation-amount {
    padding: 14px 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-donation-amount:hover {
    border-color: var(--bbhg-primary);
    color: var(--bbhg-primary);
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-donation-amount.active {
    border-color: var(--bbhg-primary);
    background: var(--bbhg-primary);
    color: white;
}

/* Custom Amount */
.bbhg-custom-amount-wrap {
    margin-top: 12px;
    animation: bbhg-fadeIn 0.2s ease;
}

.bbhg-custom-amount-input {
    display: flex;
    align-items: center;
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-primary);
    border-radius: 12px;
    padding: 4px 16px;
}

.bbhg-currency-symbol {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-right: 8px;
}

.bbhg-custom-amount-input input {
    flex: 1;
    border: none;
    background: none;
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    padding: 10px 0;
    outline: none;
}

.bbhg-custom-amount-input input::placeholder {
    color: #374151;
}

/* Payment Methods */
.bbhg-payment-methods {
    margin-bottom: 24px;
}

.bbhg-donate-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-paypal-btn {
    background: #0070ba;
    color: white;
}

.bbhg-paypal-btn:hover {
    background: #005ea6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 112, 186, 0.4);
}

.bbhg-paypal-btn svg {
    fill: white;
}

/* Payment Divider */
.bbhg-payment-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
}

.bbhg-payment-divider::before,
.bbhg-payment-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--bbhg-gray-200);
}

.bbhg-payment-divider span {
    padding: 0 16px;
    font-size: 13px;
    color: #1f2937;
    white-space: nowrap;
}

/* e-Transfer Section */
.bbhg-etransfer-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #86efac;
    border-radius: 12px;
    margin-bottom: 16px;
}

.bbhg-etransfer-icon {
    width: 48px;
    height: 48px;
    background: #22c55e;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bbhg-etransfer-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.bbhg-etransfer-details {
    flex: 1;
    min-width: 0;
}

.bbhg-etransfer-label {
    display: block;
    font-size: 12px;
    color: #166534;
    margin-bottom: 4px;
}

.bbhg-etransfer-email-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-etransfer-email {
    font-size: 15px;
    font-weight: 600;
    color: #166534;
    word-break: break-all;
}

.bbhg-copy-email-btn {
    padding: 6px;
    background: white;
    border: 1px solid #86efac;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbhg-copy-email-btn:hover {
    background: #22c55e;
}

.bbhg-copy-email-btn:hover svg {
    stroke: white;
}

.bbhg-copy-email-btn svg {
    stroke: #22c55e;
}

.bbhg-etransfer-instructions {
    background: var(--bbhg-gray-50);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-etransfer-instructions p {
    margin: 0 0 8px 0;
}

.bbhg-etransfer-instructions ol {
    margin: 0;
    padding-left: 20px;
}

.bbhg-etransfer-instructions li {
    margin-bottom: 4px;
}

.bbhg-etransfer-instructions strong {
    color: var(--bbhg-gray-800);
}

/* XP Bonus */
.bbhg-donation-bonus {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #fbbf24;
    border-radius: 12px;
    margin-bottom: 24px;
}

.bbhg-bonus-icon {
    font-size: 28px;
}

.bbhg-bonus-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbhg-bonus-text strong {
    font-size: 14px;
    color: #92400e;
}

.bbhg-bonus-text span {
    font-size: 13px;
    color: #a16207;
}

#bbhg-xp-preview {
    font-weight: 700;
    color: #92400e;
}

/* Rewards Info Banner */
.bbhg-rewards-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 2px solid #a78bfa;
    border-radius: 12px;
    margin-bottom: 24px;
}

.bbhg-rewards-icon {
    font-size: 28px;
}

.bbhg-rewards-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbhg-rewards-text strong {
    font-size: 14px;
    color: #5b21b6;
}

.bbhg-rewards-text span {
    font-size: 13px;
    color: #7c3aed;
}

/* Footer */
.bbhg-support-footer {
    text-align: center;
    padding: 24px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    margin-bottom: 24px;
}

.bbhg-heart-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.bbhg-support-footer p {
    margin: 0;
    font-size: 15px;
    color: var(--bbhg-gray-700);
}

.bbhg-support-note {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: var(--bbhg-gray-500) !important;
}

/* Supporters Section */
.bbhg-supporters-section {
    border-top: 1px solid var(--bbhg-gray-200);
    padding-top: 20px;
}

.bbhg-supporters-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 12px 0;
}

.bbhg-supporters-title svg {
    stroke: var(--bbhg-gray-500);
}

.bbhg-supporters-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-supporter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border-radius: 20px;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-supporter-badge {
    font-size: 12px;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .bbhg-support-container {
        padding: 16px;
    }
    
    .bbhg-donation-amounts {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-support-icon {
        width: 56px;
        height: 56px;
    }
    
    .bbhg-support-icon svg {
        width: 28px;
        height: 28px;
    }
    
    .bbhg-support-title {
        font-size: 20px;
    }
    
    .bbhg-etransfer-box {
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-etransfer-email-wrap {
        justify-content: center;
    }
}

/* ================================
   Entertainment Drops Section
   ================================ */

/* Entertainment Container */
.bbhg-entertainment-container {
    padding: 20px;
    min-height: 500px;
}

/* Entertainment Header - HashMind Style */
.bbhg-entertainment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 50%, #ef4444 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 24px;
    color: white;
}

.bbhg-entertainment-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-entertainment-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-entertainment-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-entertainment-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-entertainment-title p,
.bbhg-entertainment-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-entertainment-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

/* Entertainment Tabs */
.bbhg-entertainment-tabs {
    display: flex;
    gap: 6px;
    padding: 10px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    margin-bottom: 20px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.bbhg-entertainment-tabs::-webkit-scrollbar {
    display: none;
}

.bbhg-entertainment-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: auto;
}

.bbhg-entertainment-tab .bbhg-tab-icon {
    font-size: 14px;
    line-height: 1;
}

.bbhg-entertainment-tab .bbhg-tab-text {
    display: none;
}

.bbhg-entertainment-tab:hover {
    background: var(--bbhg-gray-50);
    border-color: var(--bbhg-gray-300);
}

.bbhg-entertainment-tab.active {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-entertainment-tab.active .bbhg-tab-icon,
.bbhg-entertainment-tab.active .bbhg-tab-text {
    color: white !important;
}

.bbhg-ent-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--bbhg-gray-200);
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    color: #1f2937;
}

.bbhg-entertainment-tab.active .bbhg-ent-tab-count {
    background: rgba(255, 255, 255, 0.3);
    color: white !important;
}

/* Show text labels on larger screens */
@media (min-width: 600px) {
    .bbhg-entertainment-tab {
        padding: 10px 14px;
        gap: 6px;
    }
    
    .bbhg-entertainment-tab .bbhg-tab-text {
        display: inline;
    }
    
    .bbhg-entertainment-tab .bbhg-tab-icon {
        font-size: 16px;
    }
    
    .bbhg-ent-tab-count {
        min-width: 20px;
        height: 20px;
        font-size: 11px;
    }
}

/* Entertainment Loading */

/* Entertainment Category Dropdown */
.bbhg-entertainment-filter-row {
    padding: 0 4px;
}

.bbhg-entertainment-category-dropdown:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
    outline: none;
}

.bbhg-entertainment-category-dropdown:hover {
    border-color: #a5b4fc;
}

.bbhg-ent-dropdown-counts {
    padding: 0 2px;
}

.bbhg-ent-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

.bbhg-entertainment-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-entertainment-loading p {
    margin-top: 16px;
    color: #1f2937;
    font-size: 14px;
}

/* Entertainment Section Headers */
.bbhg-ent-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-ent-section-header h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-ent-icon {
    font-size: 18px;
}

.bbhg-ent-source {
    font-size: 12px;
    color: #374151;
    font-weight: 500;
}

/* Entertainment Grid */
.bbhg-ent-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-ent-events-grid {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* Entertainment Cards */
.bbhg-ent-card {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.3s ease;
    cursor: pointer;
}

.bbhg-ent-card:hover {
    border-color: #ec4899;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15);
    transform: translateY(-2px);
}

.bbhg-ent-card-image {
    flex-shrink: 0;
    width: 80px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--bbhg-gray-100);
}

.bbhg-ent-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-ent-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: linear-gradient(135deg, var(--bbhg-gray-100), var(--bbhg-gray-200));
}

.bbhg-ent-card-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.bbhg-ent-card-title {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-ent-card-artist {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: #1f2937;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-ent-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bbhg-ent-date-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: white !important;
}

.bbhg-ent-date-badge svg {
    stroke: white !important;
}

.bbhg-ent-rating {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    background: var(--bbhg-gray-100);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    white-space: nowrap;
}

.bbhg-ent-rating svg {
    width: 11px;
    height: 11px;
    fill: #fbbf24;
    stroke: none;
}

.bbhg-ent-rating-denom {
    font-weight: 400;
    opacity: 0.6;
    font-size: 10px;
}

.bbhg-ent-ratings-row {
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}

.bbhg-ent-rating-rt {
    background: #fff7ed;
}

.bbhg-ent-rating-tmdb {
    background: #eff6ff;
    color: #1d4ed8;
}

.bbhg-ent-card-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
}

.bbhg-ent-hashtag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--bbhg-gray-100);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ent-hashtag:hover {
    background: #ec4899;
    color: white !important;
}

/* Entertainment Section Visibility */
.bbhg-entertainment-section {
    display: none;
}

.bbhg-entertainment-section.active {
    display: block;
}

/* Hide sections with no data */
.bbhg-entertainment-section.bbhg-ent-hidden {
    display: none !important;
}

/* Hide tabs with no data (handled by JS with display:none) */
.bbhg-entertainment-tab[style*="display: none"] {
    display: none !important;
}

/* No data message for entertainment */
.bbhg-entertainment-no-data {
    text-align: center;
    padding: 60px 20px;
    color: #1f2937;
}

.bbhg-entertainment-no-data svg {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.bbhg-entertainment-no-data h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 8px;
}

.bbhg-entertainment-no-data p {
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto;
}

/* Entertainment Stats */
.bbhg-entertainment-stats {
    display: flex;
    gap: 20px;
    padding: 16px 20px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    margin-bottom: 20px;
}

.bbhg-ent-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-ent-stat-icon {
    font-size: 24px;
}

.bbhg-ent-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-ent-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-ent-stat-label {
    font-size: 12px;
    color: #1f2937;
}

/* Entertainment Footer */
.bbhg-entertainment-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
}

.bbhg-ent-footer-text {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-entertainment-refresh {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-entertainment-refresh:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.bbhg-entertainment-refresh svg {
    stroke: white !important;
}

.bbhg-entertainment-refresh span {
    color: white !important;
}

/* Entertainment Empty State */
.bbhg-ent-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: #374151;
    grid-column: 1 / -1;
}

/* Entertainment Tab Badge */
.bbhg-tab-badge-entertainment {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%) !important;
    color: white !important;
}

/* Award/Event Cards - Special Style */
.bbhg-ent-event-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05), rgba(244, 63, 94, 0.05));
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: var(--bbhg-radius);
}

.bbhg-ent-event-card:hover {
    border-color: #ec4899;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1), rgba(244, 63, 94, 0.1));
}

.bbhg-ent-event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 12px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border-radius: 10px;
    color: white !important;
}

.bbhg-ent-event-month {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: white !important;
    opacity: 0.9;
}

.bbhg-ent-event-day {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    line-height: 1;
}

.bbhg-ent-days-until {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: white !important;
    margin-top: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-entertainment-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 14px 16px;
    }
    
    .bbhg-entertainment-title {
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-entertainment-title h2 {
        font-size: 18px;
    }
    
    .bbhg-entertainment-icon {
        width: 40px;
        height: 40px;
    }
    
    .bbhg-entertainment-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .bbhg-ent-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-entertainment-container {
        padding: 14px;
    }
    
    .bbhg-entertainment-stats {
        flex-wrap: wrap;
        padding: 12px;
        gap: 12px;
    }
    
    .bbhg-ent-stat-value {
        font-size: 16px;
    }
    
    .bbhg-entertainment-footer {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 10px;
    }
    
    .bbhg-ent-section-header {
        flex-direction: column;
        gap: 6px;
        align-items: flex-start;
    }
    
    .bbhg-ent-section-header h3 {
        font-size: 14px;
    }
    
    .bbhg-ent-card {
        padding: 12px;
        gap: 12px;
    }
    
    .bbhg-ent-card-image {
        width: 65px;
        height: 95px;
    }
    
    .bbhg-ent-card-title {
        font-size: 14px;
    }
    
    .bbhg-ent-card-artist {
        font-size: 12px;
    }
    
    .bbhg-ent-event-date {
        min-width: 60px;
        padding: 10px;
    }
    
    .bbhg-ent-event-day {
        font-size: 20px;
    }
}

/* ================================
   Entertainment Section - Button White Text/Icons
   ================================ */

/* Ensure all entertainment buttons have white text and icons */
.bbhg-entertainment-refresh,
.bbhg-entertainment-refresh:hover,
.bbhg-entertainment-refresh:focus,
.bbhg-entertainment-refresh:active {
    color: white !important;
}

.bbhg-entertainment-refresh svg,
.bbhg-entertainment-refresh svg path,
.bbhg-entertainment-refresh svg polyline,
.bbhg-entertainment-refresh svg line,
.bbhg-entertainment-refresh svg circle {
    stroke: white !important;
}

.bbhg-entertainment-refresh span {
    color: white !important;
}

/* Active entertainment tabs */
.bbhg-entertainment-tab.active,
.bbhg-entertainment-tab.active:hover,
.bbhg-entertainment-tab.active:focus {
    color: white !important;
}

.bbhg-entertainment-tab.active .bbhg-tab-icon,
.bbhg-entertainment-tab.active .bbhg-tab-text,
.bbhg-entertainment-tab.active .bbhg-ent-tab-count {
    color: white !important;
}

/* Entertainment status badge in header */
.bbhg-entertainment-status,
.bbhg-entertainment-status .bbhg-status-text {
    color: white !important;
}

/* Entertainment hashtag tags - clickable style */
.bbhg-ent-hashtag {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(244, 63, 94, 0.1) 100%);
    border: 1px solid rgba(236, 72, 153, 0.3);
    color: #ec4899;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ent-hashtag:hover {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border-color: transparent;
    color: white !important;
    transform: translateY(-1px);
}

/* ================================
   Guest Comments Section
   HashMind Theme - Light Modern Style
   ================================ */

.bbhg-guest-comments-section {
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-xl);
    box-shadow: var(--bbhg-shadow-lg);
    overflow: hidden;
    margin: 20px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* Header */
.bbhg-gc-header-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--bbhg-gray-100) 0%, var(--bbhg-white) 100%);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-gc-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-gc-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-radius: var(--bbhg-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-gc-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.bbhg-gc-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbhg-gc-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin: 0;
    line-height: 1.2;
}

.bbhg-gc-subtitle {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-gc-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-radius: var(--bbhg-radius);
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.bbhg-gc-count-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--bbhg-primary);
    line-height: 1;
}

.bbhg-gc-count-label {
    font-size: 11px;
    color: #1f2937;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Wrapper */
.bbhg-gc-form-wrapper {
    padding: 20px 24px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-gc-form {
    max-width: 100%;
}

.bbhg-gc-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-gc-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-gc-input-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-gc-input-group input,
.bbhg-gc-input-group textarea {
    padding: 12px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-white);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-gc-input-group input:focus,
.bbhg-gc-input-group textarea:focus {
    border-color: var(--bbhg-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.bbhg-gc-input-group input::placeholder,
.bbhg-gc-input-group textarea::placeholder {
    color: #374151;
}

.bbhg-gc-textarea-group {
    position: relative;
}

.bbhg-gc-textarea-group textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
}

.bbhg-gc-char-count {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 11px;
    color: #374151;
    pointer-events: none;
}

.bbhg-gc-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.bbhg-gc-form-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-gc-form-note svg {
    opacity: 0.7;
}

/* Submit Button - White text and icon */
.bbhg-gc-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-gc-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.5);
}

.bbhg-gc-submit-btn:active {
    transform: translateY(0);
}

.bbhg-gc-submit-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-gc-submit-btn span {
    color: white !important;
}

.bbhg-gc-submit-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Comments Container */
.bbhg-gc-comments-container {
    padding: 20px 24px;
    max-height: 500px;
    overflow-y: auto;
}

.bbhg-gc-comments-container::-webkit-scrollbar {
    width: 6px;
}

.bbhg-gc-comments-container::-webkit-scrollbar-track {
    background: var(--bbhg-gray-100);
    border-radius: 3px;
}

.bbhg-gc-comments-container::-webkit-scrollbar-thumb {
    background: var(--bbhg-gray-300);
    border-radius: 3px;
}

.bbhg-gc-comments-container::-webkit-scrollbar-thumb:hover {
    background: var(--bbhg-gray-400);
}

/* Single Comment */
.bbhg-gc-comment {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.bbhg-gc-comment:hover {
    border-color: var(--bbhg-gray-300);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-gc-comment:last-child {
    margin-bottom: 0;
}

.bbhg-gc-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bbhg-gc-avatar span {
    font-size: 16px;
    font-weight: 700;
    color: white !important;
    text-transform: uppercase;
}

.bbhg-gc-content {
    flex: 1;
    min-width: 0;
}

.bbhg-gc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.bbhg-gc-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-gc-time {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-gc-delete {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-gc-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--bbhg-error);
}

.bbhg-gc-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
    word-wrap: break-word;
}

/* Loading State */
.bbhg-gc-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: #1f2937;
}

.bbhg-gc-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bbhg-gray-200);
    border-top-color: var(--bbhg-primary);
    border-radius: 50%;
    animation: bbhg-gc-spin 0.8s linear infinite;
}

@keyframes bbhg-gc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Load More Button - White text and icon */
.bbhg-gc-load-more-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-gc-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-gc-load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.5);
}

.bbhg-gc-load-more-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-gc-load-more-btn span {
    color: white !important;
}

.bbhg-gc-load-more-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Empty State */
.bbhg-gc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-gc-empty svg {
    color: var(--bbhg-gray-300);
    margin-bottom: 16px;
}

.bbhg-gc-empty h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 8px 0;
}

.bbhg-gc-empty p {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

/* Notice Messages */
.bbhg-gc-notice {
    padding: 12px 20px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    animation: bbhg-gc-slide-in 0.3s ease;
}

@keyframes bbhg-gc-slide-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bbhg-gc-notice-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--bbhg-success);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
}

.bbhg-gc-notice-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--bbhg-error);
    border-bottom: 1px solid rgba(239, 68, 68, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-gc-header-main {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 16px 20px;
    }
    
    .bbhg-gc-header-left {
        flex-direction: column;
        gap: 10px;
    }
    
    .bbhg-gc-form-wrapper {
        padding: 16px 20px;
    }
    
    .bbhg-gc-form-row {
        grid-template-columns: 1fr;
    }
    
    .bbhg-gc-form-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .bbhg-gc-submit-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-gc-comments-container {
        padding: 16px 20px;
        max-height: 400px;
    }
    
    .bbhg-gc-comment {
        padding: 14px;
        gap: 12px;
    }
    
    .bbhg-gc-avatar {
        width: 38px;
        height: 38px;
    }
    
    .bbhg-gc-avatar span {
        font-size: 14px;
    }
    
    .bbhg-gc-load-more-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ================================
   Comments Tab Panel Styles (Modal)
   ================================ */

.bbhg-comments-container {
    padding: 0;
}

/* Header */
.bbhg-comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--bbhg-gray-100) 0%, var(--bbhg-white) 100%);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-comments-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-comments-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border-radius: var(--bbhg-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-comments-icon svg {
    width: 24px;
    height: 24px;
    stroke: white;
}

.bbhg-comments-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbhg-comments-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-dark);
    margin: 0;
    line-height: 1.2;
}

.bbhg-comments-subtitle {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-comments-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-radius: var(--bbhg-radius);
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.bbhg-comments-count-number {
    font-size: 24px;
    font-weight: 700;
    color: var(--bbhg-primary);
    line-height: 1;
}

.bbhg-comments-count-label {
    font-size: 11px;
    color: #1f2937;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Form Wrapper */
.bbhg-comments-form-wrapper {
    padding: 20px 24px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-comments-form {
    max-width: 100%;
}

.bbhg-comments-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-comments-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-comments-input-group label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-comments-input-group input,
.bbhg-comments-input-group textarea {
    padding: 12px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-white);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-comments-input-group input:focus,
.bbhg-comments-input-group textarea:focus {
    border-color: var(--bbhg-primary);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}

.bbhg-comments-input-group input::placeholder,
.bbhg-comments-input-group textarea::placeholder {
    color: #374151;
}

.bbhg-comments-textarea-group {
    position: relative;
}

.bbhg-comments-textarea-group textarea {
    resize: vertical;
    min-height: 80px;
    max-height: 200px;
}

.bbhg-comments-char-count {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 11px;
    color: #374151;
    pointer-events: none;
}

.bbhg-comments-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
}

.bbhg-comments-form-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-comments-form-note svg {
    opacity: 0.7;
}

/* Submit Button - White text and icon */
.bbhg-comments-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-comments-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.5);
}

.bbhg-comments-submit-btn:active {
    transform: translateY(0);
}

.bbhg-comments-submit-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-comments-submit-btn span {
    color: white !important;
}

.bbhg-comments-submit-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Comments List Container */
.bbhg-comments-list-container {
    padding: 20px 24px;
    max-height: 400px;
    overflow-y: auto;
}

.bbhg-comments-list-container::-webkit-scrollbar {
    width: 6px;
}

.bbhg-comments-list-container::-webkit-scrollbar-track {
    background: var(--bbhg-gray-100);
    border-radius: 3px;
}

.bbhg-comments-list-container::-webkit-scrollbar-thumb {
    background: var(--bbhg-gray-300);
    border-radius: 3px;
}

.bbhg-comments-list-container::-webkit-scrollbar-thumb:hover {
    background: var(--bbhg-gray-400);
}

/* Single Comment */
.bbhg-comment-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.bbhg-comment-item:hover {
    border-color: var(--bbhg-gray-300);
    box-shadow: var(--bbhg-shadow-sm);
}

.bbhg-comment-item:last-child {
    margin-bottom: 0;
}

.bbhg-comment-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bbhg-comment-avatar span {
    font-size: 16px;
    font-weight: 700;
    color: white !important;
    text-transform: uppercase;
}

.bbhg-comment-content {
    flex: 1;
    min-width: 0;
}

.bbhg-comment-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.bbhg-comment-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-comment-time {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-comment-delete {
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-comment-delete:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--bbhg-error);
}

.bbhg-comment-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-700);
    word-wrap: break-word;
}

/* Loading State */
.bbhg-comments-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    gap: 12px;
    color: #1f2937;
}

.bbhg-comments-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bbhg-gray-200);
    border-top-color: var(--bbhg-primary);
    border-radius: 50%;
    animation: bbhg-comments-spin 0.8s linear infinite;
}

@keyframes bbhg-comments-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Load More Button - White text and icon */
.bbhg-comments-load-more-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-comments-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.4);
}

.bbhg-comments-load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px -2px rgba(14, 165, 233, 0.5);
}

.bbhg-comments-load-more-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-comments-load-more-btn span {
    color: white !important;
}

.bbhg-comments-load-more-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* Empty State */
.bbhg-comments-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-comments-empty svg {
    color: var(--bbhg-gray-300);
    margin-bottom: 16px;
}

.bbhg-comments-empty h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 8px 0;
}

.bbhg-comments-empty p {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

/* Comments Tab Badge */
.bbhg-tab-badge-comments {
    background: linear-gradient(135deg, var(--bbhg-primary) 0%, var(--bbhg-accent) 100%) !important;
    color: white !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-comments-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 16px 20px;
    }
    
    .bbhg-comments-header-left {
        flex-direction: column;
        gap: 10px;
    }
    
    .bbhg-comments-form-wrapper {
        padding: 16px 20px;
    }
    
    .bbhg-comments-form-row {
        grid-template-columns: 1fr;
    }
    
    .bbhg-comments-form-footer {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .bbhg-comments-submit-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-comments-list-container {
        padding: 16px 20px;
        max-height: 300px;
    }
    
    .bbhg-comment-item {
        padding: 14px;
        gap: 12px;
    }
    
    .bbhg-comment-avatar {
        width: 38px;
        height: 38px;
    }
    
    .bbhg-comment-avatar span {
        font-size: 14px;
    }
    
    .bbhg-comments-load-more-btn {
        width: 100%;
        justify-content: center;
    }
}


/* ===== BRANDING / MADE BY SECTION STYLES ===== */
.bbhg-branding-comments-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3) !important;
}

.bbhg-branding-comments-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
    background: linear-gradient(135deg, #5a6fd6 0%, #6a4199 100%) !important;
}

.bbhg-branding-comments-btn:active {
    transform: translateY(0) !important;
}

.bbhg-branding-comments-btn svg {
    transition: transform 0.3s ease;
}

.bbhg-branding-comments-btn:hover svg {
    transform: translateX(4px);
}


/* ===== AI STATUS DISPLAY FOR ENTERTAINMENT ===== */
.bbhg-ent-ai-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    margin: 12px 0;
    border-radius: 10px;
    font-size: 13px;
    flex-wrap: wrap;
}

.bbhg-ai-not-configured {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(75, 85, 99, 0.1) 100%);
    border: 1px solid rgba(107, 114, 128, 0.2);
    color: #1f2937;
}

.bbhg-ai-limit-reached {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #d97706;
}

.bbhg-ai-available {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #059669;
}

.bbhg-ai-available.bbhg-usage-high {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

.bbhg-ai-available.bbhg-usage-medium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #d97706;
}

.bbhg-ai-status-icon {
    font-size: 16px;
}

.bbhg-ai-status-text {
    flex: 1;
    min-width: 150px;
}

.bbhg-ai-register-link {
    color: var(--bbhg-primary, #7c3aed);
    text-decoration: none;
    font-weight: 500;
    padding: 4px 12px;
    background: rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.bbhg-ai-register-link:hover {
    background: rgba(124, 58, 237, 0.2);
    transform: translateX(2px);
}

.bbhg-ai-usage-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 6px;
}

.bbhg-ai-usage-fill {
    height: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .bbhg-ai-not-configured {
        background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(75, 85, 99, 0.2) 100%);
        border-color: rgba(107, 114, 128, 0.3);
    }
    
    .bbhg-ai-limit-reached {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(217, 119, 6, 0.2) 100%);
        border-color: rgba(245, 158, 11, 0.4);
    }
    
    .bbhg-ai-available {
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(5, 150, 105, 0.2) 100%);
        border-color: rgba(16, 185, 129, 0.3);
    }
    
    .bbhg-ai-usage-bar {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Mobile responsive */
@media (max-width: 768px) {
    .bbhg-ent-ai-status {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .bbhg-ai-register-link {
        margin-top: 8px;
    }
}


/* ================================
   COMPETITOR SPY PANEL STYLES
   ================================ */

.bbhg-competitor-container {
    padding: 0 4px;
}

/* Header Banner - Purple gradient like HashMind */
.bbhg-competitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-competitor-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-forecast-shimmer 10s ease-in-out infinite;
}

.bbhg-competitor-title-section {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
}

.bbhg-competitor-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-competitor-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-competitor-title-section h2 {
    font-size: 20px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 2px 0;
}

.bbhg-competitor-subtitle {
    font-size: 13px;
    color: white !important;
    opacity: 0.9;
    margin: 0;
}

.bbhg-competitor-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.bbhg-competitor-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
}

.bbhg-competitor-status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

/* Input Section */
.bbhg-competitor-input-section {
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.bbhg-competitor-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin-bottom: 6px;
}

.bbhg-competitor-hint {
    font-size: 13px;
    color: var(--bbhg-text-muted);
    margin: 0 0 16px 0;
}

.bbhg-competitor-inputs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}

.bbhg-competitor-input-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-competitor-input-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.bbhg-competitor-input-icon {
    position: absolute;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bbhg-competitor-input-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--bbhg-text-muted);
}

.bbhg-competitor-input {
    width: 100%;
    padding: 12px 14px 12px 44px;
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
    font-size: 14px;
    color: var(--bbhg-text);
    background: var(--bbhg-bg);
    transition: all 0.2s ease;
}

.bbhg-competitor-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-competitor-input::placeholder {
    color: var(--bbhg-text-muted);
}

.bbhg-competitor-remove-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbhg-competitor-remove-btn:hover {
    background: #fee2e2;
    border-color: #fca5a5;
}

.bbhg-competitor-remove-btn svg {
    width: 16px;
    height: 16px;
    stroke: var(--bbhg-text-muted);
}

.bbhg-competitor-remove-btn:hover svg {
    stroke: #dc2626;
}

.bbhg-competitor-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: var(--bbhg-bg);
    border: 1px dashed var(--bbhg-border);
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-competitor-add-btn:hover {
    background: var(--bbhg-bg-tertiary);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-competitor-add-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Platform Filter */
.bbhg-competitor-platform-section {
    margin-bottom: 16px;
}

.bbhg-competitor-platform-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-competitor-platform-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-competitor-platform-pill:hover {
    background: var(--bbhg-bg-tertiary);
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-competitor-platform-pill.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-color: transparent;
    color: #ffffff !important;
}

.bbhg-competitor-platform-pill.active svg {
    fill: white !important;
}

/* Analyze Button */
.bbhg-competitor-analyze-section {
    margin: 20px 0;
}

.bbhg-competitor-analyze-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bbhg-competitor-analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-competitor-analyze-btn:active {
    transform: translateY(0);
}

.bbhg-competitor-analyze-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-competitor-analyze-btn span {
    color: #ffffff !important;
}

.bbhg-competitor-analyze-btn.loading {
    opacity: 0.8;
    cursor: wait;
}

.bbhg-competitor-analyze-btn.loading svg {
    animation: bbhg-spin 1s linear infinite;
}

/* Stats Overview */
.bbhg-competitor-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.bbhg-competitor-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-competitor-stat-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bbhg-competitor-stat-icon {
    font-size: 24px;
}

.bbhg-competitor-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-competitor-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-text);
}

.bbhg-competitor-stat-label {
    font-size: 12px;
    color: var(--bbhg-text-muted);
}

/* Content Area */
.bbhg-competitor-content {
    min-height: 200px;
}

/* Loading State */
.bbhg-competitor-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    color: var(--bbhg-text-secondary);
    font-size: 14px;
}

/* Default State */
.bbhg-competitor-default {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-competitor-default-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-competitor-default h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 8px 0;
}

.bbhg-competitor-default p {
    font-size: 14px;
    color: var(--bbhg-text-secondary);
    max-width: 400px;
    margin: 0 auto 24px auto;
    line-height: 1.5;
}

.bbhg-competitor-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.bbhg-competitor-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-text-secondary);
}

.bbhg-competitor-feature-icon {
    font-size: 14px;
}

/* Help Box for when scraping fails */
.bbhg-competitor-help-box {
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px auto 0;
    max-width: 450px;
    text-align: left;
}

.bbhg-competitor-help-box h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 12px 0;
}

.bbhg-competitor-help-box ol {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.bbhg-competitor-help-box li {
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}

.bbhg-competitor-help-box .bbhg-hint {
    background: rgba(59, 130, 246, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 0;
    font-size: 13px;
    max-width: none;
}

/* Results Section */
.bbhg-competitor-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bbhg-competitor-section {
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    padding: 16px;
}

.bbhg-competitor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-competitor-section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0;
}

.bbhg-competitor-section-header h3 svg {
    width: 20px;
    height: 20px;
    stroke: #8b5cf6;
}

.bbhg-competitor-section-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-competitor-section-desc {
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    margin: -8px 0 16px 0;
}

/* Competitor Profile Cards */
.bbhg-competitor-profiles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.bbhg-competitor-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.bbhg-competitor-profile-card:hover {
    border-color: #8b5cf6;
    transform: translateX(4px);
}

.bbhg-competitor-profile-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.bbhg-competitor-profile-info {
    flex: 1;
    min-width: 0;
}

.bbhg-competitor-profile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-competitor-profile-handle {
    font-size: 12px;
    color: var(--bbhg-text-muted);
}

.bbhg-competitor-profile-stats {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}

.bbhg-competitor-profile-stat {
    font-size: 12px;
    color: var(--bbhg-text-secondary);
}

.bbhg-competitor-profile-stat strong {
    color: var(--bbhg-text);
}

/* Hashtags Grid */
.bbhg-competitor-hashtags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-competitor-hashtag-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-competitor-hashtag-pill:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.bbhg-competitor-hashtag-count {
    padding: 2px 8px;
    background: var(--bbhg-bg-tertiary);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--bbhg-text-muted);
}

.bbhg-competitor-hashtag-pill.trending .bbhg-competitor-hashtag-count {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
}

/* Gap Opportunities Grid */
.bbhg-competitor-gaps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}

.bbhg-competitor-gap-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-competitor-gap-card:hover {
    transform: translateX(4px);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15) 0%, rgba(22, 163, 74, 0.15) 100%);
}

.bbhg-competitor-gap-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-competitor-gap-icon {
    font-size: 16px;
}

.bbhg-competitor-gap-tag {
    font-size: 14px;
    font-weight: 600;
    color: #16a34a;
}

.bbhg-competitor-gap-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #22c55e;
}

.bbhg-competitor-gap-trend svg {
    width: 14px;
    height: 14px;
    stroke: #22c55e;
}

/* Insights Grid */
.bbhg-competitor-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.bbhg-competitor-insight-card {
    padding: 16px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.bbhg-competitor-insight-card:hover {
    border-color: #8b5cf6;
    transform: translateY(-2px);
}

.bbhg-competitor-insight-type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
}

.bbhg-competitor-insight-text {
    font-size: 14px;
    color: var(--bbhg-text);
    line-height: 1.5;
    margin: 0;
}

/* Steal Section */
.bbhg-competitor-steal-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(139, 92, 246, 0.2);
}

.bbhg-competitor-copy-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #ffffff !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-competitor-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-competitor-copy-all-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-competitor-copy-all-btn span {
    color: #ffffff !important;
}

.bbhg-competitor-steal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
    min-height: 60px;
}

.bbhg-competitor-steal-tag {
    padding: 6px 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-competitor-steal-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* NEW: Category badges on hashtags */
.bbhg-competitor-hashtag-category {
    padding: 2px 6px;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bbhg-competitor-hashtag-pill.category-niche .bbhg-competitor-hashtag-category {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.bbhg-competitor-hashtag-pill.category-trending .bbhg-competitor-hashtag-category {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
}

.bbhg-competitor-hashtag-pill.category-community .bbhg-competitor-hashtag-category {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
}

.bbhg-competitor-hashtag-pill.category-extracted .bbhg-competitor-hashtag-category {
    background: rgba(156, 163, 175, 0.2);
    color: #1f2937;
}

/* NEW: Gap reason display */
.bbhg-competitor-gap-card {
    flex-wrap: wrap;
}

.bbhg-competitor-gap-reason {
    width: 100%;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(34, 197, 94, 0.2);
    font-size: 11px;
    color: var(--bbhg-text-secondary);
    line-height: 1.4;
}

/* NEW: Profile niche badge */
.bbhg-competitor-profile-niche {
    display: inline-block;
    padding: 2px 8px;
    margin-top: 4px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    font-size: 10px;
    color: #8b5cf6;
    text-transform: capitalize;
}

/* NEW: Engagement style indicators */
.bbhg-competitor-profile-stat.engagement-high strong {
    color: #22c55e;
}

.bbhg-competitor-profile-stat.engagement-medium strong {
    color: #f59e0b;
}

.bbhg-competitor-profile-stat.engagement-low strong {
    color: #ef4444;
}

/* NEW: Quick tips styling */
.bbhg-competitor-quick-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.bbhg-competitor-tip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 16px;
    font-size: 12px;
    color: var(--bbhg-text-secondary);
}

/* NEW: Hint text improvements */
.bbhg-competitor-hint {
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    margin-bottom: 12px;
    line-height: 1.6;
}

.bbhg-competitor-hint strong {
    color: var(--bbhg-text);
    font-weight: 600;
}

/* NEW: Textarea improvements */
.bbhg-competitor-textarea {
    width: 100%;
    padding: 14px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--bbhg-text);
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.bbhg-competitor-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-competitor-textarea::placeholder {
    color: var(--bbhg-text-muted);
    opacity: 0.8;
}

/* Tab Badge for Competitor */
.bbhg-tab-badge-competitor {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-competitor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }
    
    .bbhg-competitor-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-competitor-profiles-grid,
    .bbhg-competitor-gaps-grid,
    .bbhg-competitor-insights-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-competitor-platform-pills {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 8px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    
    .bbhg-competitor-platform-pills::-webkit-scrollbar {
        display: none;
    }
    
    .bbhg-competitor-platform-pill {
        flex-shrink: 0;
    }
}

@media (max-width: 480px) {
    .bbhg-competitor-stats {
        grid-template-columns: 1fr;
    }
    
    .bbhg-competitor-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* Competitor Textarea */
.bbhg-competitor-textarea {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--bbhg-border);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--bbhg-text);
    background: var(--bbhg-bg);
    resize: vertical;
    min-height: 120px;
    line-height: 1.5;
    transition: all 0.2s ease;
}

.bbhg-competitor-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-competitor-textarea::placeholder {
    color: var(--bbhg-text-muted);
}

.bbhg-competitor-quick-tips {
    margin-top: 10px;
}

.bbhg-competitor-tip {
    font-size: 12px;
    color: var(--bbhg-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ========================================
   SORTING HAT QUIZ STYLES
   ======================================== */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

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

@keyframes sortingHatBounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-3px) rotate(-5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-3px) rotate(5deg); }
}

.bbhg-sorting-hat-icon {
    display: inline-block;
    animation: sortingHatBounce 2s ease-in-out infinite;
}

/* Improved house card styles with better text visibility */
#bbhg-house-card {
    position: relative;
}

#bbhg-house-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.15);
    border-radius: inherit;
    pointer-events: none;
}

#bbhg-house-card > * {
    position: relative;
    z-index: 1;
}

#bbhg-house-name {
    text-shadow: 0 2px 8px rgba(0,0,0,0.4), 0 0 20px rgba(0,0,0,0.3);
}

#bbhg-house-motto {
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

#bbhg-house-description {
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Gap between sorting hat result sections */
#bbhg-sorting-results > div {
    margin-bottom: 24px;
}

#bbhg-sorting-results > div:last-child {
    margin-bottom: 0;
}

/* Sorting hat copy all hashtags button */
#bbhg-copy-house-hashtags {
    background: linear-gradient(135deg, rgba(255,255,255,0.25), rgba(255,255,255,0.15)) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
    backdrop-filter: blur(4px) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
}

#bbhg-copy-house-hashtags:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.25)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15) !important;
}

.bbhg-quiz-answer:hover {
    border-color: var(--bbhg-primary) !important;
    background: var(--bbhg-gray-50) !important;
    transform: translateX(4px);
}

.bbhg-quiz-answer.selected {
    border-color: #ffd700 !important;
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%) !important;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}

.bbhg-quiz-answer.selected span:first-child {
    transform: scale(1.2);
}

.bbhg-house-tag:hover {
    background: rgba(255,255,255,0.4) !important;
    transform: scale(1.05);
}

.bbhg-sorting-hat-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

#bbhg-sorting-ceremony {
    animation: fadeIn 0.5s ease;
}

#bbhg-sorting-ceremony .bbhg-spinner {
    margin: 20px auto;
}

#bbhg-sorting-results {
    animation: fadeIn 0.5s ease;
}

/* House-specific glow effects */
.bbhg-house-gryffindor {
    box-shadow: 0 0 40px rgba(174, 0, 1, 0.3);
}

.bbhg-house-slytherin {
    box-shadow: 0 0 40px rgba(26, 71, 42, 0.3);
}

.bbhg-house-ravenclaw {
    box-shadow: 0 0 40px rgba(14, 26, 64, 0.3);
}

.bbhg-house-hufflepuff {
    box-shadow: 0 0 40px rgba(236, 185, 57, 0.3);
}

/* ========================================
   CREATOR DNA - PERSONALITY TEST STYLES
   ======================================== */

.bbhg-dna-container {
    padding: 0;
}

.bbhg-dna-header {
    background: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 50%, #2d1b4e 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

/* DNA Quiz Styling */
.bbhg-dna-quiz {
    animation: fadeIn 0.3s ease;
}

.bbhg-dna-answer {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px;
    background: white;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    font-size: 15px;
    color: var(--bbhg-gray-700);
}

.bbhg-dna-answer:hover {
    border-color: #8b5cf6;
    background: #faf5ff;
    transform: translateX(4px);
}

.bbhg-dna-answer.selected {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(236,72,153,0.05));
}

/* DNA Primary Button */
#bbhg-dna-next,
#bbhg-dna-share,
#bbhg-dna-copy-all-hashtags {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white !important;
    border: none;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#bbhg-dna-next:hover:not(:disabled),
#bbhg-dna-share:hover,
#bbhg-dna-copy-all-hashtags:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

#bbhg-dna-next svg,
#bbhg-dna-share svg,
#bbhg-dna-copy-all-hashtags svg {
    stroke: white !important;
    color: white !important;
}

/* DNA Retake Button */
#bbhg-dna-retake {
    background: transparent;
    color: #1f2937;
    border: 1px solid var(--bbhg-gray-300);
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#bbhg-dna-retake:hover {
    background: var(--bbhg-gray-100);
    border-color: #374151;
}

/* DNA Hashtag Tags */
.bbhg-dna-hashtag {
    background: rgba(139,92,246,0.1);
    color: #7c3aed;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(139,92,246,0.2);
    display: inline-block;
}

.bbhg-dna-hashtag:hover {
    background: rgba(139,92,246,0.2);
    transform: translateY(-2px);
}

.bbhg-dna-hashtag.copied {
    background: #22c55e;
    color: white;
    border-color: #22c55e;
}

/* DNA Color Swatches */
.bbhg-dna-color {
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s ease;
}

.bbhg-dna-color:hover > div:first-child {
    transform: scale(1.1);
}

/* DNA Animation Keyframes */
@keyframes dna-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes dna-loading {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes dna-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

/* DNA Analysis Animation */
.bbhg-dna-helix {
    animation: dna-spin 2s linear infinite;
}

/* DNA Results Card */
#bbhg-dna-type-card {
    animation: fadeIn 0.5s ease;
}

#bbhg-dna-results {
    animation: fadeIn 0.3s ease;
}

/* Toast notification */
.bbhg-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 100000;
    animation: fadeInUp 0.3s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Dark mode support for Creator DNA */
.bbhg-dark .bbhg-dna-answer {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
    color: var(--bbhg-gray-200);
}

.bbhg-dark .bbhg-dna-answer:hover {
    background: var(--bbhg-gray-700);
    border-color: #8b5cf6;
}

.bbhg-dark .bbhg-dna-answer.selected {
    background: rgba(139,92,246,0.2);
}

/* ===== FIX: Sorting Hat Copy All Hashtags Spacing ===== */
#bbhg-copy-house-hashtags {
    margin-top: 16px !important;
}

#bbhg-house-hashtags {
    margin-bottom: 12px !important;
}

/* ===== FIX: Creator DNA Growth Opportunities Card Spacing ===== */
#bbhg-dna-results > div[style*="grid"] {
    margin-bottom: 24px !important;
}

#bbhg-dna-growth li,
#bbhg-dna-strengths li {
    margin-bottom: 8px;
}

/* ===== FIX: Creator DNA Results H3 Text Color ===== */
#bbhg-dna-results h3 {
    color: #000000 !important;
}

#bbhg-sorting-results h3 {
    color: #000000 !important;
}

/* ===== Music Charts Summary Filter Tab ===== */
.bbhg-audio-cat-pill[data-audio-category="summary"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(236, 72, 153, 0.1)) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    color: #7c3aed !important;
}

.bbhg-audio-cat-pill[data-audio-category="summary"]:hover,
.bbhg-audio-cat-pill[data-audio-category="summary"].active {
    background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
    color: white !important;
    border-color: transparent !important;
}

.bbhg-audio-cat-pill[data-audio-category="summary"] .bbhg-ai-badge {
    font-size: 10px;
    margin-left: 4px;
}

/* Summary view container */
.bbhg-audio-summary-view {
    display: none;
}

.bbhg-audio-summary-view.active {
    display: block;
}

/* Hide regular sections when summary is active */
.bbhg-audio-results.summary-active .bbhg-audio-section:not(.bbhg-music-ai-section) {
    display: none;
}

.bbhg-audio-results.summary-active .bbhg-music-ai-section {
    display: block !important;
}

/* ===== FIX: Prevent duplicate AI result cards ===== */
.bbhg-ai-insights-section + .bbhg-ai-insights-section {
    display: none !important;
}

/* ===== FIX: Better spacing for growth opportunity cards ===== */
.bbhg-dna-growth-card,
.bbhg-growth-opportunity-card {
    margin-bottom: 16px !important;
}

/* Dark mode fixes for new elements */
.bbhg-dark .bbhg-audio-cat-pill[data-audio-category="summary"] {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(236, 72, 153, 0.15)) !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

/* ===== Music Charts AI Summary View ===== */
.bbhg-audio-ai-summary-view {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(236, 72, 153, 0.03));
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.bbhg-ai-summary-block {
    background: var(--bbhg-surface);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-ai-summary-block h5 {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-ai-summary-block p {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-text-secondary);
}

.bbhg-ai-summary-block p:last-child {
    margin-bottom: 0;
}

.bbhg-ai-prediction-item {
    background: rgba(139, 92, 246, 0.05);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

.bbhg-ai-prediction-item:last-child {
    margin-bottom: 0;
}

.bbhg-ai-prediction-item strong {
    display: block;
    font-size: 14px;
    color: var(--bbhg-text);
    margin-bottom: 4px;
}

.bbhg-confidence-badge {
    display: inline-block;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: 8px;
}

.bbhg-ai-opportunity-item {
    background: rgba(59, 130, 246, 0.05);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 10px;
}

.bbhg-ai-opportunity-item:last-child {
    margin-bottom: 0;
}

.bbhg-urgency-badge {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    text-transform: capitalize;
}

/* Dark mode support */
.bbhg-dark .bbhg-audio-ai-summary-view {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(236, 72, 153, 0.05));
    border-color: rgba(139, 92, 246, 0.3);
}

.bbhg-dark .bbhg-ai-summary-block {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
}

.bbhg-dark .bbhg-ai-prediction-item,
.bbhg-dark .bbhg-ai-opportunity-item {
    background: rgba(139, 92, 246, 0.1);
}

/* ===== Mobile Filter Dropdown - Dark Mode ===== */
.bbhg-dark .bbhg-filter-dropdown-btn {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
    color: var(--bbhg-gray-200);
}

.bbhg-dark .bbhg-filter-dropdown-btn:hover {
    border-color: var(--bbhg-primary);
}

.bbhg-dark .bbhg-filter-dropdown-menu {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
}

.bbhg-dark .bbhg-filter-dropdown-item {
    color: var(--bbhg-gray-300);
}

.bbhg-dark .bbhg-filter-dropdown-item:hover {
    background: var(--bbhg-gray-700);
}

/* ================================
   QUESTION MINER PANEL STYLES
   HashMind Theme - Purple Gradient
   ================================ */

.bbhg-qm-container {
    padding: 0 4px;
}

/* Header Banner - HashMind Purple Gradient */
.bbhg-qm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-qm-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-qm-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-qm-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-qm-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-qm-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-qm-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-qm-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-qm-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-qm-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-qm-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-qm-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-qm-status .bbhg-status-text {
    color: white !important;
}

/* Search Section */
.bbhg-qm-search-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-qm-input-group {
    margin-bottom: 16px;
}

.bbhg-qm-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-qm-input-wrap {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
}

.bbhg-qm-input-container {
    position: relative;
    flex: 1;
}

.bbhg-qm-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-qm-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-qm-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-qm-input:focus {
    border-color: #8b5cf6;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.bbhg-qm-input::placeholder {
    color: #374151;
}

.bbhg-qm-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-qm-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-qm-search-btn:active {
    transform: translateY(0);
}

.bbhg-qm-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-qm-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-qm-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-qm-quick-label {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-qm-topic-pill {
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qm-topic-pill:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* Source Filters */
.bbhg-qm-filters {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.bbhg-qm-filter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bbhg-qm-filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-qm-filter-clear {
    background: none;
    border: none;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
    padding: 4px 8px;
}

.bbhg-qm-filter-clear:hover {
    color: #8b5cf6;
}

.bbhg-qm-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-qm-filter-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qm-filter-pill:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-qm-filter-pill.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-qm-filter-icon {
    font-size: 14px;
}

/* Stats Overview */
.bbhg-qm-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.bbhg-qm-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
}

.bbhg-qm-stat-icon {
    font-size: 24px;
}

.bbhg-qm-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-qm-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    line-height: 1.2;
}

.bbhg-qm-stat-label {
    font-size: 12px;
    color: #1f2937;
}

/* Loading State */
.bbhg-qm-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-qm-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-qm-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-qm-spin 1s linear infinite;
}

@keyframes bbhg-qm-spin {
    to { transform: rotate(360deg); }
}

.bbhg-qm-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-qm-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-qm-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.bbhg-qm-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-qm-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.bbhg-qm-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-qm-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: bbhg-qm-progress 2s ease-in-out infinite;
}

@keyframes bbhg-qm-progress {
    0% { width: 0%; background-position: 0% 0%; }
    50% { width: 70%; background-position: 100% 0%; }
    100% { width: 100%; background-position: 0% 0%; }
}

/* Results Section */
.bbhg-qm-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
}

.bbhg-qm-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-qm-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-qm-results-icon {
    font-size: 24px;
}

.bbhg-qm-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-qm-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-qm-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qm-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-qm-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-qm-action-btn span {
    color: white !important;
}

.bbhg-qm-refresh-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
}

/* Sort Bar */
.bbhg-qm-sort-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-qm-sort-label {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
}

.bbhg-qm-sort-options {
    display: flex;
    gap: 8px;
}

.bbhg-qm-sort-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qm-sort-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-qm-sort-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-qm-sort-btn.active svg {
    stroke: white;
}

.bbhg-qm-sort-btn svg {
    width: 14px;
    height: 14px;
}

/* Questions Grid */
.bbhg-qm-questions-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Question Card */
.bbhg-qm-question-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-qm-question-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
    transform: translateY(-2px);
}

.bbhg-qm-question-source {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 20px;
}

.bbhg-qm-question-source.google {
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.1), rgba(234, 67, 53, 0.1));
}

.bbhg-qm-question-source.reddit {
    background: rgba(255, 69, 0, 0.1);
}

.bbhg-qm-question-source.quora {
    background: rgba(185, 43, 39, 0.1);
}

.bbhg-qm-question-source.forums {
    background: rgba(139, 92, 246, 0.1);
}

.bbhg-qm-question-content {
    flex: 1;
    min-width: 0;
}

.bbhg-qm-question-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.bbhg-qm-question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.bbhg-qm-question-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bbhg-gray-100);
    border-radius: 12px;
    font-size: 12px;
    color: #1f2937;
}

.bbhg-qm-question-badge.hot {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.bbhg-qm-question-badge.trending {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.bbhg-qm-question-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.bbhg-qm-card-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qm-card-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-qm-card-btn svg {
    width: 16px;
    height: 16px;
}

.bbhg-qm-use-btn {
    padding: 0 14px;
    width: auto;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
}

.bbhg-qm-use-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-qm-use-btn svg {
    stroke: white;
}

/* Load More */
.bbhg-qm-load-more {
    text-align: center;
    margin-top: 24px;
}

.bbhg-qm-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qm-load-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.bbhg-qm-load-more-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-qm-load-more-btn span {
    color: white !important;
}

/* Empty State */
.bbhg-qm-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-qm-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    border: 2px dashed var(--bbhg-gray-300);
}

.bbhg-qm-empty-state .bbhg-qm-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.bbhg-qm-empty-state h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-qm-empty-state p {
    font-size: 15px;
    color: #1f2937;
    max-width: 500px;
    margin: 0 auto 12px;
    line-height: 1.6;
}

.bbhg-qm-empty-state .bbhg-qm-empty-hint {
    font-size: 13px;
    color: #1f2937;
    margin-top: 8px;
}

.bbhg-qm-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.bbhg-qm-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-qm-empty p {
    font-size: 15px;
    color: #1f2937;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-qm-empty-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.bbhg-qm-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 24px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

.bbhg-qm-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-qm-error {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-qm-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-qm-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-qm-error p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.bbhg-qm-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qm-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.bbhg-qm-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-qm-retry-btn span {
    color: white !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .bbhg-qm-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-qm-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-qm-input-container {
        width: 100%;
    }
    
    .bbhg-qm-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-qm-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-qm-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-qm-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .bbhg-qm-sort-bar {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-qm-sort-options {
        flex-wrap: wrap;
    }
    
    .bbhg-qm-question-card {
        flex-direction: column;
    }
    
    .bbhg-qm-question-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 12px;
    }
}

@media (max-width: 480px) {
    .bbhg-qm-stats {
        grid-template-columns: 1fr;
    }
    
    .bbhg-qm-quick-topics {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .bbhg-qm-quick-topics::-webkit-scrollbar {
        display: none;
    }
    
    .bbhg-qm-topic-pill {
        flex-shrink: 0;
    }
}

/* ========================================
   VIRAL MEDIA VAULT - Teal/Emerald Theme
   ======================================== */

.bbhg-mv-container {
    padding: 0 4px;
}

/* Header Banner - Teal/Emerald Gradient */
.bbhg-mv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 40%, #065f46 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-mv-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-mv-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-mv-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-mv-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-mv-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-mv-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bbhg-mv-icon svg {
    width: 28px;
    height: 28px;
}

.bbhg-mv-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 16px;
    border-radius: 24px;
    font-size: 13px;
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* Search Section */
.bbhg-mv-search-section {
    margin-bottom: 24px;
}

.bbhg-mv-input-group {
    margin-bottom: 12px;
}

.bbhg-mv-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text-secondary);
    margin-bottom: 8px;
}

.bbhg-mv-input-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.bbhg-mv-input-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}

.bbhg-mv-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bbhg-text-muted);
    pointer-events: none;
}

.bbhg-mv-input-icon svg {
    width: 18px;
    height: 18px;
}

.bbhg-mv-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 2px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    font-size: 15px;
    background: var(--bbhg-bg-secondary);
    color: var(--bbhg-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.bbhg-mv-input:focus {
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.15);
}

.bbhg-mv-platform-select {
    padding: 10px 14px;
    border: 2px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    font-size: 13px;
    background: var(--bbhg-bg-secondary);
    color: var(--bbhg-text-primary);
    cursor: pointer;
    min-width: 130px;
}

.bbhg-mv-platform-select:focus {
    border-color: #0d9488;
    outline: none;
}

.bbhg-mv-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: white !important;
    border: none;
    border-radius: var(--bbhg-radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.bbhg-mv-search-btn:hover {
    background: linear-gradient(135deg, #0f766e 0%, #065f46 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.bbhg-mv-search-btn svg {
    width: 18px;
    height: 18px;
}

/* Quick Topic Pills */
.bbhg-mv-quick-topics {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.bbhg-mv-quick-label {
    font-size: 13px;
    color: var(--bbhg-text-muted);
    font-weight: 500;
}

.bbhg-mv-topic-pill {
    padding: 6px 14px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 12px;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bbhg-mv-topic-pill:hover {
    background: rgba(13, 148, 136, 0.1);
    border-color: #0d9488;
    color: #0d9488;
}

/* Loading State */
.bbhg-mv-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-mv-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.bbhg-mv-loader {
    width: 80px;
    height: 80px;
    border: 4px solid rgba(13, 148, 136, 0.1);
    border-top-color: #0d9488;
    border-radius: 50%;
    animation: bbhg-mv-spin 1s linear infinite;
}

@keyframes bbhg-mv-spin {
    to { transform: rotate(360deg); }
}

.bbhg-mv-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    animation: bbhg-mv-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-mv-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.15); }
}

.bbhg-mv-loading-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-text-primary);
    margin: 0 0 8px;
}

.bbhg-mv-loading-text {
    font-size: 14px;
    color: var(--bbhg-text-muted);
    margin: 0 0 20px;
}

.bbhg-mv-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-bg-tertiary);
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-mv-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #0d9488, #10b981);
    border-radius: 4px;
    animation: bbhg-mv-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-mv-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Stats Bar */
.bbhg-mv-stats-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.bbhg-mv-stat-card {
    flex: 1;
    min-width: 120px;
    padding: 14px 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    text-align: center;
}

.bbhg-mv-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #0d9488;
    display: block;
}

.bbhg-mv-stat-label {
    font-size: 11px;
    color: var(--bbhg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Top Hashtags */
.bbhg-mv-top-hashtags {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
}

.bbhg-mv-hashtag-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-mv-hashtag-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(13, 148, 136, 0.1);
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #0d9488;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-mv-hashtag-pill:hover {
    background: rgba(13, 148, 136, 0.2);
    transform: translateY(-1px);
}

.bbhg-mv-hashtag-pill .bbhg-mv-pill-count {
    font-size: 11px;
    opacity: 0.7;
    font-weight: 400;
}

/* Top Captions */
.bbhg-mv-top-captions {
    margin-bottom: 20px;
    padding: 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
}

.bbhg-mv-caption-item {
    padding: 10px 14px;
    background: var(--bbhg-bg-primary);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: border-color 0.2s;
}

.bbhg-mv-caption-item:hover {
    border-color: #0d9488;
}

.bbhg-mv-caption-item:last-child {
    margin-bottom: 0;
}

.bbhg-mv-caption-text {
    font-size: 13px;
    color: var(--bbhg-text-primary);
    flex: 1;
    line-height: 1.4;
}

.bbhg-mv-caption-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bbhg-mv-caption-engagement {
    font-size: 12px;
    color: #0d9488;
    font-weight: 600;
}

.bbhg-mv-caption-copy {
    padding: 4px 10px;
    background: rgba(13, 148, 136, 0.1);
    border: 1px solid rgba(13, 148, 136, 0.2);
    border-radius: 6px;
    font-size: 11px;
    color: #0d9488;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-mv-caption-copy:hover {
    background: #0d9488;
    color: white;
}

/* Results Header */
.bbhg-mv-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    gap: 12px;
}

.bbhg-mv-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-mv-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-text-primary);
}

.bbhg-mv-results-icon {
    font-size: 20px;
}

.bbhg-mv-results-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-mv-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-mv-action-btn:hover {
    border-color: #0d9488;
    color: #0d9488;
}

/* Posts Grid */
.bbhg-mv-posts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

/* Post Card */
.bbhg-mv-post-card {
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bbhg-mv-post-card:hover {
    border-color: rgba(13, 148, 136, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.bbhg-mv-post-inner {
    display: flex;
    gap: 16px;
    padding: 16px;
}

.bbhg-mv-post-thumb {
    width: 140px;
    height: 100px;
    border-radius: var(--bbhg-radius);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bbhg-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-mv-post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-mv-post-thumb-placeholder {
    font-size: 32px;
    opacity: 0.4;
}

.bbhg-mv-post-content {
    flex: 1;
    min-width: 0;
}

.bbhg-mv-post-source {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.bbhg-mv-post-source.reddit {
    background: rgba(255, 69, 0, 0.1);
    color: #ff4500;
}

.bbhg-mv-post-source.youtube {
    background: rgba(255, 0, 0, 0.1);
    color: #ff0000;
}

.bbhg-mv-post-source.imgur {
    background: rgba(27, 183, 110, 0.1);
    color: #1bb76e;
}

.bbhg-mv-post-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text-primary);
    margin: 0 0 6px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-mv-post-title a {
    color: inherit;
    text-decoration: none;
}

.bbhg-mv-post-title a:hover {
    color: #0d9488;
}

.bbhg-mv-post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--bbhg-text-muted);
    margin-bottom: 8px;
}

.bbhg-mv-post-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-mv-post-meta-item svg {
    width: 14px;
    height: 14px;
}

.bbhg-mv-post-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bbhg-mv-post-tag {
    padding: 2px 8px;
    background: rgba(13, 148, 136, 0.08);
    border-radius: 4px;
    font-size: 11px;
    color: #0d9488;
}

.bbhg-mv-post-actions {
    display: flex;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--bbhg-border);
}

.bbhg-mv-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid var(--bbhg-border);
    background: var(--bbhg-bg-primary);
    color: var(--bbhg-text-secondary);
}

.bbhg-mv-post-btn:hover {
    border-color: #0d9488;
    color: #0d9488;
}

.bbhg-mv-post-btn.primary {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white !important;
    border-color: transparent;
}

.bbhg-mv-post-btn.primary:hover {
    background: linear-gradient(135deg, #0f766e, #065f46);
    box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
}

.bbhg-mv-post-btn svg {
    width: 14px;
    height: 14px;
}

/* Media type badge */
.bbhg-mv-media-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Rank badge */
.bbhg-mv-rank-badge {
    position: absolute;
    top: -1px;
    left: -1px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
    border-radius: var(--bbhg-radius-lg) 0 8px 0;
}

.bbhg-mv-rank-badge.gold { background: linear-gradient(135deg, #f59e0b, #d97706); }
.bbhg-mv-rank-badge.silver { background: linear-gradient(135deg, #94a3b8, #64748b); }
.bbhg-mv-rank-badge.bronze { background: linear-gradient(135deg, #c2410c, #9a3412); }
.bbhg-mv-rank-badge.default { background: linear-gradient(135deg, #0d9488, #0f766e); }

/* Empty State */
.bbhg-mv-empty {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-mv-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-mv-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-text-primary);
    margin: 0 0 8px;
}

.bbhg-mv-empty p {
    font-size: 14px;
    color: var(--bbhg-text-muted);
    max-width: 480px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-mv-empty-features {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bbhg-mv-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bbhg-bg-secondary);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-text-secondary);
}

.bbhg-mv-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-mv-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-mv-error-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.bbhg-mv-error h4 {
    font-size: 18px;
    color: var(--bbhg-text-primary);
    margin: 0 0 8px;
}

.bbhg-mv-error p {
    color: var(--bbhg-text-muted);
    margin: 0 0 16px;
}

.bbhg-mv-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius-lg);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-mv-retry-btn:hover {
    background: linear-gradient(135deg, #0f766e, #065f46);
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-mv-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }
    
    .bbhg-mv-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-mv-platform-select {
        min-width: unset;
    }
    
    .bbhg-mv-post-inner {
        flex-direction: column;
    }
    
    .bbhg-mv-post-thumb {
        width: 100%;
        height: 160px;
    }
    
    .bbhg-mv-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-mv-stats-bar {
        flex-direction: column;
    }
    
    .bbhg-mv-quick-topics {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .bbhg-mv-quick-topics::-webkit-scrollbar {
        display: none;
    }
    
    .bbhg-mv-topic-pill {
        flex-shrink: 0;
    }
}

/* ========================================
   MEME TRACKER - Question Miner Style
   ======================================== */

.bbhg-mt-container {
    padding: 0 4px;
}

/* Header Banner - HashMind Purple Gradient */
.bbhg-mt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-mt-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-mt-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-mt-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-mt-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-mt-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-mt-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-mt-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-mt-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-mt-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-mt-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-mt-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-mt-status .bbhg-status-text {
    color: white !important;
}

/* Search Section */
.bbhg-mt-search-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-mt-input-group {
    margin-bottom: 0;
}

.bbhg-mt-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-mt-input-wrap {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
}

.bbhg-mt-select {
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
    cursor: pointer;
    min-width: 160px;
}

.bbhg-mt-select:focus {
    border-color: #8b5cf6;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.bbhg-mt-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-mt-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-mt-search-btn:active {
    transform: translateY(0);
}

.bbhg-mt-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-mt-search-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-mt-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-mt-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-mt-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-mt-spin 1s linear infinite;
}

@keyframes bbhg-mt-spin {
    to { transform: rotate(360deg); }
}

.bbhg-mt-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-mt-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-mt-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.bbhg-mt-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-mt-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.bbhg-mt-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-mt-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8b5cf6, #6366f1, #8b5cf6);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: bbhg-mt-progress 2s ease-in-out infinite;
}

@keyframes bbhg-mt-progress {
    0% { width: 0%; background-position: 0% 0%; }
    50% { width: 70%; background-position: 100% 0%; }
    100% { width: 100%; background-position: 0% 0%; }
}

/* Results Section */
.bbhg-mt-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
}

.bbhg-mt-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-mt-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-mt-results-icon {
    font-size: 24px;
}

.bbhg-mt-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-mt-results-count {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
    background: var(--bbhg-gray-100);
    padding: 4px 10px;
    border-radius: 12px;
}

.bbhg-mt-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-mt-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-mt-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-mt-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-mt-action-btn span {
    color: white !important;
}

/* Meme Cards Grid */
.bbhg-mt-memes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* Individual Meme Card */
.bbhg-mt-meme-card {
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-mt-meme-card:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
    transform: translateY(-2px);
}

.bbhg-mt-meme-image-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--bbhg-gray-200);
}

.bbhg-mt-meme-image-wrap img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.bbhg-mt-meme-status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    backdrop-filter: blur(8px);
    z-index: 2;
    white-space: nowrap;
    line-height: 1;
}
.bbhg-mt-status-emoji {
    font-size: 13px;
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
}
.bbhg-mt-status-label {
    display: inline-block;
    line-height: 1;
}

.bbhg-mt-meme-status.exploding {
    background: rgba(239, 68, 68, 0.9);
    color: white;
}

.bbhg-mt-meme-status.rising {
    background: rgba(139, 92, 246, 0.9);
    color: white;
}

.bbhg-mt-meme-status.peak {
    background: rgba(245, 158, 11, 0.9);
    color: white;
}

.bbhg-mt-meme-status.stable {
    background: rgba(107, 114, 128, 0.8);
    color: white;
}

.bbhg-mt-meme-source {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 12px;
    font-size: 11px;
    color: white;
    font-weight: 500;
    backdrop-filter: blur(8px);
}

.bbhg-mt-meme-body {
    padding: 16px;
}

.bbhg-mt-meme-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-mt-meme-stats {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.bbhg-mt-meme-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-mt-meme-stat svg {
    width: 14px;
    height: 14px;
}

.bbhg-mt-meme-stat.virality {
    color: #8b5cf6;
    font-weight: 600;
}

/* Virality Bar */
.bbhg-mt-virality-bar {
    width: 100%;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin-bottom: 12px;
    overflow: hidden;
}

.bbhg-mt-virality-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
    transition: width 0.5s ease;
}

/* Hashtags Section in Card */
.bbhg-mt-meme-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.bbhg-mt-hashtag {
    padding: 3px 8px;
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 8px;
    font-size: 11px;
    color: #8b5cf6;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bbhg-mt-hashtag:hover {
    background: #8b5cf6;
    color: white;
    border-color: #8b5cf6;
}

/* Card Actions */
.bbhg-mt-meme-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.bbhg-mt-card-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-mt-card-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-mt-card-btn svg {
    width: 14px;
    height: 14px;
}

.bbhg-mt-card-btn.bbhg-mt-analyze-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-mt-card-btn.bbhg-mt-analyze-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-mt-card-btn.bbhg-mt-analyze-btn svg {
    stroke: white;
}

/* Analyze Modal Overlay */
.bbhg-mt-analyze-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.bbhg-mt-analyze-modal {
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-xl);
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 28px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    position: relative;
}

.bbhg-mt-analyze-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-gray-100);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--bbhg-gray-600);
    transition: all 0.15s ease;
}

.bbhg-mt-analyze-close:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
}

.bbhg-mt-analyze-header {
    margin-bottom: 20px;
}

.bbhg-mt-analyze-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 4px 0;
}

.bbhg-mt-analyze-header p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.bbhg-mt-analyze-loading {
    text-align: center;
    padding: 40px 0;
}

.bbhg-mt-analyze-loading .bbhg-mt-loader {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    position: relative;
}

.bbhg-mt-analyze-section {
    margin-bottom: 20px;
}

.bbhg-mt-analyze-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-mt-analyze-section p {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
    margin: 0;
}

.bbhg-mt-analyze-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-mt-analyze-list li {
    padding: 8px 12px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.4;
}

.bbhg-mt-analyze-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-mt-analyze-platforms {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.bbhg-mt-platform-card {
    padding: 12px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-mt-platform-card strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 4px;
}

.bbhg-mt-platform-card span {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* Empty State */
.bbhg-mt-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-mt-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.bbhg-mt-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-mt-empty p {
    font-size: 15px;
    color: #1f2937;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-mt-empty-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.bbhg-mt-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 24px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

.bbhg-mt-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-mt-error {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-mt-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-mt-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-mt-error p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.bbhg-mt-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-mt-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.bbhg-mt-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-mt-retry-btn span {
    color: white !important;
}

/* Template Badge */
.bbhg-mt-template-badge {
    position: absolute;
    bottom: 42px;
    left: 10px;
    padding: 4px 10px;
    background: rgba(139, 92, 246, 0.9);
    border-radius: 12px;
    font-size: 11px;
    color: white;
    font-weight: 600;
    backdrop-filter: blur(8px);
    z-index: 2;
}

/* Mobile */
@media (max-width: 768px) {
    .bbhg-mt-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-mt-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-mt-select {
        width: 100%;
    }
    
    .bbhg-mt-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-mt-memes-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-mt-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-mt-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .bbhg-mt-analyze-platforms {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ON THIS DAY TOOL - HashMind Style
   ======================================== */

.bbhg-otd-container {
    padding: 0 4px;
}

/* Header Banner - HashMind Purple Gradient */
.bbhg-otd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-otd-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-otd-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-otd-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-otd-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-otd-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-otd-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-otd-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-otd-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-otd-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-otd-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-otd-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-otd-status .bbhg-status-text {
    color: white !important;
}

/* Date Selection Section */
.bbhg-otd-date-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-otd-date-picker {
    margin-bottom: 16px;
}

.bbhg-otd-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-otd-date-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.bbhg-otd-date-input {
    flex: 1;
    min-width: 180px;
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-white);
    transition: all 0.2s ease;
}

.bbhg-otd-date-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-otd-today-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    background: var(--bbhg-gray-100);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    color: var(--bbhg-gray-700);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-otd-today-btn:hover {
    background: var(--bbhg-gray-200);
    border-color: var(--bbhg-gray-300);
}

.bbhg-otd-today-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--bbhg-gray-600);
}

.bbhg-otd-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-otd-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-otd-search-btn:active {
    transform: translateY(0);
}

.bbhg-otd-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-otd-search-btn span {
    color: white !important;
}

/* Quick Dates */
.bbhg-otd-quick-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-otd-quick-label {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-otd-quick-btn {
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-otd-quick-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* Loading State */
.bbhg-otd-loading {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-otd-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.bbhg-otd-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(139, 92, 246, 0.1);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-spin 1s linear infinite;
}

.bbhg-otd-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    animation: bbhg-pulse-icon 2s ease-in-out infinite;
}

.bbhg-otd-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-otd-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

/* Results Section */
.bbhg-otd-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    overflow: hidden;
}

.bbhg-otd-date-display {
    padding: 20px 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-otd-date-display h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #8b5cf6;
}

/* Category Tabs */
.bbhg-otd-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--bbhg-gray-200);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bbhg-otd-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-otd-tab:hover {
    color: var(--bbhg-gray-700);
    background: var(--bbhg-gray-50);
}

.bbhg-otd-tab.active {
    color: #8b5cf6;
    border-bottom-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-otd-tab-icon {
    font-size: 16px;
}

.bbhg-otd-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    background: var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

.bbhg-otd-tab.active .bbhg-otd-tab-count {
    background: #8b5cf6;
    color: white;
}

/* Content Area */
.bbhg-otd-content {
    padding: 24px;
}

.bbhg-otd-category {
    display: none;
}

.bbhg-otd-category.active {
    display: block;
}

.bbhg-otd-items-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Item Card */
.bbhg-otd-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-otd-item:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.bbhg-otd-item-year {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    height: 40px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    color: white;
}

.bbhg-otd-item-content {
    flex: 1;
    min-width: 0;
}

.bbhg-otd-item-text {
    margin: 0 0 8px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--bbhg-gray-800);
}

.bbhg-otd-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-otd-suggested-hashtags {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0 6px;
    padding: 10px 12px;
    background: rgba(99, 102, 241, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(99, 102, 241, 0.12);
}
.bbhg-otd-hashtag-label {
    font-size: 10px;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 4px;
}
.bbhg-otd-hashtag-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.bbhg-otd-hashtag-pill {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.22);
    color: #6366f1;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 600;
    white-space: nowrap;
}
.bbhg-otd-hashtag-pill:hover {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(99,102,241,0.25);
}

.bbhg-otd-item-link {
    font-size: 12px;
    color: #8b5cf6;
    text-decoration: none;
    font-weight: 500;
}

.bbhg-otd-item-link:hover {
    text-decoration: underline;
}

.bbhg-otd-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

.bbhg-otd-item-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-otd-item-btn:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: #8b5cf6;
    color: white;
}

.bbhg-otd-item-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Holiday Item Special Style */
.bbhg-otd-item.holiday {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
    border-color: rgba(139, 92, 246, 0.2);
}

.bbhg-otd-item.holiday .bbhg-otd-item-year {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

/* Actions Bar */
.bbhg-otd-actions {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--bbhg-gray-200);
    background: var(--bbhg-gray-50);
}

.bbhg-otd-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-otd-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
}

.bbhg-otd-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-otd-action-btn span {
    color: white !important;
}

/* Empty State */
.bbhg-otd-empty {
    text-align: center;
    padding: 60px 30px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-otd-empty-icon {
    font-size: 56px;
    margin-bottom: 20px;
}

.bbhg-otd-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-otd-empty p {
    font-size: 15px;
    color: #1f2937;
    line-height: 1.6;
    margin: 0 0 24px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-otd-empty-features {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.bbhg-otd-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: #8b5cf6;
}

.bbhg-otd-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-otd-error {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-otd-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-otd-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-otd-error p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.bbhg-otd-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-otd-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
}

.bbhg-otd-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-otd-retry-btn span {
    color: white !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-otd-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-otd-title-section h2 {
        font-size: 20px;
    }
    
    .bbhg-otd-date-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bbhg-otd-date-input {
        width: 100%;
    }
    
    .bbhg-otd-tabs {
        gap: 0;
    }
    
    .bbhg-otd-tab {
        padding: 12px 16px;
        flex: 1;
        justify-content: center;
    }
    
    .bbhg-otd-tab span:not(.bbhg-otd-tab-icon):not(.bbhg-otd-tab-count) {
        display: none;
    }
    
    .bbhg-otd-item {
        flex-direction: column;
        gap: 12px;
    }
    
    .bbhg-otd-item-year {
        width: fit-content;
        padding: 0 16px;
    }
    
    .bbhg-otd-item-actions {
        align-self: flex-end;
    }
    
    .bbhg-otd-actions {
        flex-wrap: wrap;
    }
    
    .bbhg-otd-action-btn {
        flex: 1;
        justify-content: center;
        min-width: 120px;
    }
}

/* No items message */
.bbhg-otd-no-items {
    padding: 40px 20px;
    text-align: center;
    color: #1f2937;
    font-size: 14px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
}

/* ========================================
   MONETIZATION TOOLKIT - HashMind Style
   ======================================== */

.bbhg-monetize-container {
    padding: 20px;
    min-height: 500px;
}

/* Header - HashMind Style Green Gradient */
.bbhg-monetize-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border-radius: 12px;
    margin-bottom: 24px;
    color: white;
}

.bbhg-monetize-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-monetize-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bbhg-monetize-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-monetize-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-monetize-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-monetize-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

.bbhg-monetize-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-monetize-status .bbhg-status-text {
    color: white !important;
}

/* Tool Cards Grid */
.bbhg-monetize-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-monetize-tool-card {
    background: var(--bbhg-white, #fff);
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bbhg-monetize-tool-card:hover {
    border-color: #10b981;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.bbhg-monetize-tool-card .bbhg-tool-icon {
    font-size: 32px;
    margin-bottom: 12px;
    line-height: 1;
}

.bbhg-monetize-tool-card h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-monetize-tool-card p {
    margin: 0;
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
}

/* Section Container */
.bbhg-monetize-section {
    background: var(--bbhg-white, #fff);
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-section-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
    flex: 1;
}

.bbhg-monetize-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: none;
    border: 1px solid var(--bbhg-gray-300, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-monetize-back:hover {
    background: var(--bbhg-gray-100, #f3f4f6);
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-monetize-back svg {
    width: 16px;
    height: 16px;
}

/* Form Styles */
.bbhg-monetize-section .bbhg-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-monetize-section .bbhg-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-monetize-section .bbhg-form-group label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700, #374151);
}

.bbhg-monetize-section .bbhg-input,
.bbhg-monetize-section .bbhg-select,
.bbhg-monetize-section .bbhg-textarea {
    padding: 10px 14px;
    border: 1px solid var(--bbhg-gray-300, #d1d5db);
    border-radius: 8px;
    font-size: 14px;
    color: var(--bbhg-gray-900, #111827);
    background: var(--bbhg-white, #fff);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

.bbhg-monetize-section .bbhg-input:focus,
.bbhg-monetize-section .bbhg-select:focus,
.bbhg-monetize-section .bbhg-textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.bbhg-monetize-section .bbhg-textarea {
    resize: vertical;
    min-height: 80px;
}

.bbhg-monetize-section .bbhg-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-monetize-section .bbhg-checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bbhg-gray-700, #374151);
    cursor: pointer;
}

.bbhg-monetize-section .bbhg-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #10b981;
}

/* Main Buttons - White text and icons */
.bbhg-monetize-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
}

.bbhg-monetize-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.bbhg-monetize-btn svg {
    width: 18px;
    height: 18px;
    stroke: white !important;
}

.bbhg-monetize-btn span {
    color: white !important;
}

.bbhg-btn-calculate,
.bbhg-btn-generate {
    width: 100%;
}

/* Rate Calculator Results */
.bbhg-rate-results {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-rate-result-card {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    color: white;
    margin-bottom: 20px;
}

.bbhg-rate-tier {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.bbhg-rate-suggested {
    margin-bottom: 12px;
}

.bbhg-rate-label {
    display: block;
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.bbhg-rate-amount {
    font-size: 48px;
    font-weight: 700;
    line-height: 1;
}

.bbhg-rate-range {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    opacity: 0.9;
}

.bbhg-rate-separator {
    opacity: 0.5;
}

.bbhg-rate-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-rate-metric {
    background: var(--bbhg-gray-50, #f9fafb);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.bbhg-metric-label {
    display: block;
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 4px;
}

.bbhg-metric-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-rate-tips {
    background: var(--bbhg-gray-50, #f9fafb);
    border-radius: 12px;
    padding: 16px;
}

.bbhg-rate-tips h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-rate-tips ul {
    margin: 0;
    padding-left: 20px;
}

.bbhg-rate-tips li {
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 6px;
    line-height: 1.5;
}

/* Output Containers */
.bbhg-media-kit-output,
.bbhg-pitch-output,
.bbhg-invoice-preview-container {
    margin-top: 24px;
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
}

.bbhg-output-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bbhg-gray-50, #f9fafb);
    border-bottom: 1px solid var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-output-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-output-actions {
    display: flex;
    gap: 8px;
}

.bbhg-btn-copy,
.bbhg-btn-print {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-300, #d1d5db);
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-btn-copy:hover,
.bbhg-btn-print:hover {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.bbhg-btn-copy:hover svg,
.bbhg-btn-print:hover svg {
    stroke: white;
}

.bbhg-btn-copy svg,
.bbhg-btn-print svg {
    width: 14px;
    height: 14px;
}

.bbhg-output-content {
    padding: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--bbhg-gray-700, #374151);
    white-space: pre-wrap;
    font-family: inherit;
}

/* Income Tracker */
.bbhg-income-goals {
    background: var(--bbhg-gray-50, #f9fafb);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.bbhg-income-goals h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
}

.bbhg-input-with-prefix {
    position: relative;
    display: flex;
    align-items: center;
}

.bbhg-input-prefix {
    position: absolute;
    left: 14px;
    color: #1f2937;
    font-weight: 500;
    z-index: 1;
}

.bbhg-input-with-prefix .bbhg-input {
    padding-left: 28px;
}

.bbhg-btn-save-goal {
    padding: 10px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    align-self: flex-end;
    transition: all 0.2s ease;
}

.bbhg-btn-save-goal:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

.bbhg-income-progress {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-progress-card {
    background: var(--bbhg-white, #fff);
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 16px;
}

.bbhg-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-progress-label {
    font-size: 13px;
    color: #1f2937;
}

.bbhg-progress-amount {
    font-size: 24px;
    font-weight: 700;
    color: #10b981;
}

.bbhg-progress-bar-container {
    height: 8px;
    background: var(--bbhg-gray-200, #e5e7eb);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bbhg-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bbhg-progress-text {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-income-add-entry {
    background: var(--bbhg-gray-50, #f9fafb);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.bbhg-income-add-entry h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
}

.bbhg-income-history h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
}

.bbhg-income-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-income-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bbhg-white, #fff);
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 8px;
}

.bbhg-income-entry-info {
    flex: 1;
}

.bbhg-income-entry-brand {
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
    display: block;
}

.bbhg-income-entry-meta {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-income-entry-amount {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
    margin-right: 12px;
}

.bbhg-income-entry-delete {
    padding: 4px 8px;
    background: none;
    border: none;
    color: #1f2937;
    cursor: pointer;
    font-size: 18px;
}

.bbhg-income-entry-delete:hover {
    color: #ef4444;
}

.bbhg-empty-state {
    text-align: center;
    padding: 24px;
    color: #1f2937;
    font-size: 14px;
}

/* Login Required */
.bbhg-login-required {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-login-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-login-required h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-login-required p {
    margin: 0 0 20px 0;
    color: #1f2937;
}

/* Checklist */
.bbhg-checklist-intro {
    margin: 0 0 20px 0;
    color: #1f2937;
    font-size: 14px;
}

.bbhg-checklist-section {
    margin-bottom: 24px;
}

.bbhg-checklist-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #10b981;
    padding-bottom: 8px;
    border-bottom: 2px solid #10b981;
}

.bbhg-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50, #f9fafb);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-checklist-item:hover {
    background: var(--bbhg-gray-100, #f3f4f6);
}

.bbhg-checklist-item input[type="checkbox"] {
    display: none;
}

.bbhg-checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid var(--bbhg-gray-300, #d1d5db);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbhg-checklist-item input:checked + .bbhg-checkmark {
    background: #10b981;
    border-color: #10b981;
}

.bbhg-checklist-item input:checked + .bbhg-checkmark::after {
    content: '\2713';
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.bbhg-checklist-item input:checked ~ .bbhg-checklist-label {
    text-decoration: line-through;
    color: #1f2937;
}

.bbhg-checklist-label {
    font-size: 14px;
    color: var(--bbhg-gray-700, #374151);
}

.bbhg-checklist-actions {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-btn-reset-checklist {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: none;
    border: 1px solid var(--bbhg-gray-300, #d1d5db);
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-btn-reset-checklist:hover {
    background: var(--bbhg-gray-100, #f3f4f6);
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-btn-reset-checklist svg {
    width: 16px;
    height: 16px;
}

/* Invoice Generator */
.bbhg-invoice-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-invoice-section:last-of-type {
    border-bottom: none;
}

.bbhg-invoice-section h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-invoice-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-invoice-item {
    display: grid;
    grid-template-columns: 2fr 80px 100px 100px 30px;
    gap: 12px;
    align-items: end;
}

.bbhg-inv-item-amount {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
    padding: 10px 0;
}

.bbhg-remove-item {
    padding: 8px;
    background: none;
    border: none;
    color: #1f2937;
    font-size: 20px;
    cursor: pointer;
    line-height: 1;
}

.bbhg-remove-item:hover {
    color: #ef4444;
}

.bbhg-btn-add-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-gray-50, #f9fafb);
    border: 1px dashed var(--bbhg-gray-300, #d1d5db);
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.bbhg-btn-add-item:hover {
    background: var(--bbhg-gray-100, #f3f4f6);
    border-color: #10b981;
    color: #10b981;
}

.bbhg-btn-add-item svg {
    width: 14px;
    height: 14px;
}

.bbhg-invoice-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 12px;
    margin: 20px 0;
}

.bbhg-total-label {
    font-size: 16px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-total-amount {
    font-size: 28px;
    font-weight: 700;
    color: white;
}

/* Invoice Preview */
.bbhg-invoice-preview {
    padding: 30px;
    background: white;
}

.bbhg-invoice-preview .invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #10b981;
}

.bbhg-invoice-preview .invoice-title h1 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    color: #10b981;
}

.bbhg-invoice-preview .invoice-number {
    font-size: 14px;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-invoice-preview .invoice-dates p {
    margin: 4px 0;
    font-size: 13px;
    color: #1f2937;
    text-align: right;
}

.bbhg-invoice-preview .invoice-parties {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.bbhg-invoice-preview .invoice-from,
.bbhg-invoice-preview .invoice-to {
    padding: 16px;
    background: var(--bbhg-gray-50, #f9fafb);
    border-radius: 8px;
}

.bbhg-invoice-preview .invoice-from h3,
.bbhg-invoice-preview .invoice-to h3 {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-invoice-preview .invoice-from .name,
.bbhg-invoice-preview .invoice-to .name {
    font-weight: 600;
    color: var(--bbhg-gray-900, #111827);
}

.bbhg-invoice-preview .invoice-from p,
.bbhg-invoice-preview .invoice-to p {
    margin: 4px 0;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-invoice-preview .invoice-items {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.bbhg-invoice-preview .invoice-items th {
    padding: 12px;
    background: var(--bbhg-gray-100, #f3f4f6);
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-invoice-preview .invoice-items td {
    padding: 12px;
    border-bottom: 1px solid var(--bbhg-gray-200, #e5e7eb);
    font-size: 14px;
    color: var(--bbhg-gray-700, #374151);
}

.bbhg-invoice-preview .invoice-totals {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 20px;
}

.bbhg-invoice-preview .total-row {
    display: flex;
    gap: 40px;
    font-size: 14px;
}

.bbhg-invoice-preview .total-final {
    font-size: 18px;
    font-weight: 700;
    color: #10b981;
    padding-top: 8px;
    border-top: 2px solid var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-invoice-preview .invoice-payment-terms,
.bbhg-invoice-preview .invoice-notes {
    padding: 16px;
    background: var(--bbhg-gray-50, #f9fafb);
    border-radius: 8px;
    margin-top: 16px;
}

.bbhg-invoice-preview .invoice-payment-terms h3,
.bbhg-invoice-preview .invoice-notes h3 {
    margin: 0 0 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700, #374151);
}

.bbhg-invoice-preview .invoice-payment-terms p,
.bbhg-invoice-preview .invoice-notes p {
    margin: 0;
    font-size: 13px;
    color: #1f2937;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-monetize-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .bbhg-monetize-title {
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-monetize-tools {
        grid-template-columns: 1fr;
    }
    
    .bbhg-monetize-section .bbhg-form-row {
        grid-template-columns: 1fr;
    }
    
    .bbhg-rate-result-card .bbhg-rate-amount {
        font-size: 36px;
    }
    
    .bbhg-invoice-item {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 16px;
        background: var(--bbhg-gray-50, #f9fafb);
        border-radius: 8px;
    }
    
    .bbhg-invoice-preview .invoice-parties {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   MONETIZATION TOOLKIT - Mobile Fix
   ======================================== */

/* Hidden state class */
#bbhg-panel-monetize .bbhg-monetize-hidden {
    display: none !important;
}

/* Force header styling */
#bbhg-panel-monetize .bbhg-monetize-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%) !important;
    border-radius: 12px !important;
    margin-bottom: 24px !important;
    color: white !important;
    flex-wrap: wrap;
    gap: 12px;
}

#bbhg-panel-monetize .bbhg-monetize-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

#bbhg-panel-monetize .bbhg-monetize-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

#bbhg-panel-monetize .bbhg-monetize-icon svg {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    stroke: white !important;
    flex-shrink: 0 !important;
}

#bbhg-panel-monetize .bbhg-monetize-title h2 {
    margin: 0 0 2px 0 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: white !important;
}

#bbhg-panel-monetize .bbhg-monetize-subtitle {
    margin: 0 !important;
    font-size: 13px !important;
    opacity: 0.9 !important;
    color: white !important;
}

#bbhg-panel-monetize .bbhg-monetize-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: white !important;
}

#bbhg-panel-monetize .bbhg-monetize-status .bbhg-status-text {
    color: white !important;
}

/* Tool cards fix */
#bbhg-panel-monetize .bbhg-monetize-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

#bbhg-panel-monetize .bbhg-monetize-tool-card {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

#bbhg-panel-monetize .bbhg-monetize-tool-card:hover {
    border-color: #10b981 !important;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.15) !important;
    transform: translateY(-2px) !important;
}

#bbhg-panel-monetize .bbhg-tool-icon {
    font-size: 32px !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
}

#bbhg-panel-monetize .bbhg-monetize-tool-card h3 {
    margin: 0 0 8px 0 !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #111827 !important;
}

#bbhg-panel-monetize .bbhg-monetize-tool-card p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #1f2937 !important;
    line-height: 1.5 !important;
}

/* Mobile specific */
@media (max-width: 600px) {
    #bbhg-panel-monetize .bbhg-monetize-header {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px !important;
    }
    
    #bbhg-panel-monetize .bbhg-monetize-title {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    #bbhg-panel-monetize .bbhg-monetize-tools {
        grid-template-columns: 1fr !important;
    }
}

/* Monetization Toolkit - Transitions & States */
#bbhg-panel-monetize .bbhg-monetize-header,
#bbhg-panel-monetize .bbhg-monetize-tools {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#bbhg-panel-monetize .bbhg-monetize-section {
    display: none;
    animation: bbhg-fadeSlideIn 0.3s ease forwards;
}

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

/* Back button prominence */
#bbhg-panel-monetize .bbhg-section-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
    margin: -20px -20px 20px -20px;
    padding: 16px 20px;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

#bbhg-panel-monetize .bbhg-monetize-back {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    border: none !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
}

#bbhg-panel-monetize .bbhg-monetize-back:hover {
    transform: translateX(-3px);
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}

#bbhg-panel-monetize .bbhg-monetize-back svg {
    stroke: white !important;
}

/* ========================================
   INVOICE FULLSCREEN MODAL
   ======================================== */

body.bbhg-modal-open {
    overflow: hidden;
}

.bbhg-invoice-fullscreen-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 999999;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bbhg-invoice-fullscreen-modal.bbhg-modal-visible {
    opacity: 1;
}

.bbhg-invoice-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.bbhg-invoice-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.bbhg-invoice-modal-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-btn-modal-action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-btn-modal-action:hover {
    background: #e5e7eb;
    border-color: #1f2937;
}

.bbhg-btn-modal-action svg {
    width: 16px;
    height: 16px;
}

.bbhg-btn-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ef4444;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 8px;
}

.bbhg-btn-modal-close:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.bbhg-btn-modal-close svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-invoice-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background: #f9fafb;
}

.bbhg-invoice-modal-content {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.bbhg-invoice-modal-content .bbhg-invoice-preview {
    padding: 40px;
}

/* Invoice Success State */
.bbhg-invoice-success {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: white;
}

.bbhg-invoice-success h4 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: #111827;
}

.bbhg-invoice-success p {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #1f2937;
}

.bbhg-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.bbhg-btn-view-invoice {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.bbhg-btn-view-invoice:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.bbhg-btn-secondary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-btn-secondary:hover {
    background: #e5e7eb;
    border-color: #1f2937;
}

.bbhg-btn-secondary svg {
    width: 16px;
    height: 16px;
}

/* Mobile Responsive for Invoice Modal */
@media (max-width: 768px) {
    .bbhg-invoice-modal-header {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .bbhg-invoice-modal-header h3 {
        font-size: 16px;
        flex: 1;
        min-width: 100%;
        text-align: center;
        order: -1;
    }
    
    .bbhg-invoice-modal-actions {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-btn-modal-action span {
        display: none;
    }
    
    .bbhg-btn-modal-action {
        padding: 10px;
    }
    
    .bbhg-invoice-modal-body {
        padding: 16px;
    }
    
    .bbhg-invoice-modal-content .bbhg-invoice-preview {
        padding: 20px;
    }
    
    .bbhg-invoice-modal-content .invoice-header {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
    
    .bbhg-invoice-modal-content .invoice-dates {
        text-align: center !important;
    }
    
    .bbhg-invoice-modal-content .invoice-dates p {
        text-align: center !important;
    }
    
    .bbhg-invoice-modal-content .invoice-parties {
        grid-template-columns: 1fr !important;
    }
    
    .bbhg-invoice-modal-content .invoice-items {
        font-size: 12px;
    }
    
    .bbhg-invoice-modal-content .invoice-items th,
    .bbhg-invoice-modal-content .invoice-items td {
        padding: 8px 6px;
    }
    
    .bbhg-invoice-actions {
        flex-direction: column;
    }
    
    .bbhg-invoice-actions button {
        width: 100%;
        justify-content: center;
    }
}

/* Media Kit and Pitch Output Styling */
.bbhg-output-content {
    padding: 20px;
    background: #f9fafb;
    border-radius: 8px;
    line-height: 1.7;
    color: #1f2937;
}

.bbhg-output-content h3 {
    margin: 20px 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.bbhg-output-content h3:first-child {
    margin-top: 0;
}

.bbhg-output-content hr {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 20px 0;
}

.bbhg-output-content li {
    margin-left: 20px;
    margin-bottom: 6px;
}

.bbhg-output-content strong {
    color: #111827;
}

/* Input Hint */
.bbhg-input-hint {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: #1f2937;
}

/* ====================================================
   CONTENT OPPORTUNITY SCORE SECTION
   ==================================================== */

/* Tab Badge Animation */
@keyframes bbhg-badge-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(249, 115, 22, 0.5), 0 0 10px rgba(239, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(249, 115, 22, 0.8), 0 0 25px rgba(239, 68, 68, 0.5), 0 0 35px rgba(236, 72, 153, 0.3);
    }
}

@keyframes bbhg-opportunity-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.bbhg-tab-badge-opportunity {
    animation: bbhg-badge-glow 2s ease-in-out infinite !important;
}

/* Container */
.bbhg-opportunity-container {
    padding: 0;
    background: var(--bbhg-gray-50);
    min-height: 400px;
}

/* Header Banner - Unique Orange/Pink/Red Gradient */
.bbhg-opportunity-header {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 40%, #ec4899 100%);
    padding: 24px;
    border-radius: 16px;
    margin: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px -10px rgba(239, 68, 68, 0.4);
}

.bbhg-opportunity-header-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-opportunity-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.bbhg-opportunity-icon-wrap {
    position: relative;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-opportunity-animated-icon {
    font-size: 32px;
    position: relative;
    z-index: 2;
    animation: bbhg-opportunity-pulse 2s ease-in-out infinite;
}

.bbhg-opportunity-icon-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
}

.bbhg-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: bbhg-ring-expand 3s ease-out infinite;
}

.bbhg-ring-1 {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    animation-delay: 0s;
}

.bbhg-ring-2 {
    width: 55px;
    height: 55px;
    margin: -27.5px 0 0 -27.5px;
    animation-delay: 1s;
}

.bbhg-ring-3 {
    width: 70px;
    height: 70px;
    margin: -35px 0 0 -35px;
    animation-delay: 2s;
}

@keyframes bbhg-ring-expand {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.bbhg-opportunity-header h2 {
    color: white;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bbhg-opportunity-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    margin: 4px 0 0 0;
}

.bbhg-opportunity-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 14px;
    border-radius: 20px;
    z-index: 1;
}

.bbhg-opportunity-status .bbhg-status-text {
    color: white;
    font-size: 12px;
    font-weight: 600;
}

/* Form Section */
.bbhg-opportunity-form {
    padding: 20px;
}

.bbhg-opp-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bbhg-opp-full-width {
    grid-column: 1 / -1;
}

.bbhg-opp-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-opp-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-opp-label-icon {
    font-size: 16px;
}

.bbhg-opp-input-wrap {
    position: relative;
}

.bbhg-opp-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 15px;
    background: white;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.bbhg-opp-input:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

.bbhg-opp-textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 14px;
    background: white;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.bbhg-opp-textarea:focus {
    outline: none;
    border-color: #f97316;
    box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1);
}

/* Quick Niches */
.bbhg-opp-quick-niches {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.bbhg-opp-quick-label {
    font-size: 12px;
    color: #1f2937;
}

.bbhg-opp-quick-niche {
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 12px;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-quick-niche:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(239, 68, 68, 0.1));
    border-color: #f97316;
    color: #ea580c;
}

/* Platform Grid */
.bbhg-opp-platform-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bbhg-opp-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: white;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    color: var(--bbhg-gray-700);
}

.bbhg-opp-platform-btn:hover {
    border-color: #f97316;
    background: rgba(249, 115, 22, 0.05);
}

.bbhg-opp-platform-btn.active {
    border-color: #f97316;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(239, 68, 68, 0.1));
    color: #ea580c;
    font-weight: 600;
}

.bbhg-opp-platform-icon {
    font-size: 20px;
}

/* Content Types */
.bbhg-opp-content-types {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-opp-content-btn {
    padding: 10px 16px;
    background: white;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 10px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-content-btn:hover {
    border-color: #f97316;
}

.bbhg-opp-content-btn.active {
    border-color: #f97316;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: white;
    font-weight: 600;
}

/* Analyze Button */
.bbhg-opp-analyze-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 24px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #ec4899 100%);
    border: none;
    border-radius: 14px;
    color: white;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px -4px rgba(239, 68, 68, 0.5);
}

.bbhg-opp-analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px -4px rgba(239, 68, 68, 0.6);
}

.bbhg-opp-btn-icon {
    font-size: 20px;
}

.bbhg-opp-btn-arrow {
    width: 20px;
    height: 20px;
    stroke: white;
    transition: transform 0.3s ease;
}

.bbhg-opp-analyze-btn:hover .bbhg-opp-btn-arrow {
    transform: translateX(4px);
}

/* Loading State */
.bbhg-opportunity-loading {
    padding: 60px 20px;
    text-align: center;
}

.bbhg-opp-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-opp-loading-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #f97316;
    animation: bbhg-opp-spin 1.5s linear infinite;
}

.bbhg-opp-loading-ring:nth-child(1) {
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
}

.bbhg-opp-loading-ring:nth-child(2) {
    width: 60px;
    height: 60px;
    margin: -30px 0 0 -30px;
    border-top-color: #ef4444;
    animation-direction: reverse;
    animation-duration: 1.2s;
}

.bbhg-opp-loading-ring:nth-child(3) {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-top-color: #ec4899;
    animation-duration: 0.9s;
}

.bbhg-opp-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    animation: bbhg-opportunity-pulse 1s ease-in-out infinite;
}

@keyframes bbhg-opp-spin {
    to {
        transform: rotate(360deg);
    }
}

.bbhg-opportunity-loading h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
}

.bbhg-opp-loading-status {
    color: #1f2937;
    font-size: 14px;
    margin: 0 0 24px 0;
}

.bbhg-opp-loading-steps {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.bbhg-opp-step {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border-radius: 20px;
    font-size: 12px;
    color: #1f2937;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.bbhg-opp-step.active {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(239, 68, 68, 0.15));
    color: #ea580c;
    opacity: 1;
}

.bbhg-opp-step.complete {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
    opacity: 1;
}

/* Results Section */
.bbhg-opportunity-results {
    padding: 20px;
}

/* Score Hero */
.bbhg-opp-score-hero {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
}

.bbhg-opp-score-circle {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 20px;
}

.bbhg-opp-score-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.bbhg-opp-score-progress {
    transition: stroke-dashoffset 1.5s ease-out;
}

.bbhg-opp-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.bbhg-opp-score-number {
    display: block;
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, #f97316, #ef4444, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.bbhg-opp-score-label {
    font-size: 12px;
    color: #1f2937;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bbhg-opp-rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(239, 68, 68, 0.1));
    border-radius: 30px;
    margin-bottom: 12px;
}

.bbhg-opp-rating-emoji {
    font-size: 20px;
}

.bbhg-opp-rating-label {
    font-size: 15px;
    font-weight: 700;
    color: #ea580c;
}

.bbhg-opp-rating-message {
    color: #1f2937;
    font-size: 14px;
    margin: 0;
    max-width: 400px;
    margin: 0 auto;
}

/* Score Breakdown */
.bbhg-opp-breakdown {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.bbhg-opp-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 16px 0;
}

.bbhg-opp-section-icon {
    font-size: 18px;
}

.bbhg-opp-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bbhg-opp-breakdown-item {
    padding: 14px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-opp-breakdown-item:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-opp-breakdown-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bbhg-opp-breakdown-icon {
    font-size: 16px;
}

.bbhg-opp-breakdown-name {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-opp-breakdown-score {
    font-size: 14px;
    font-weight: 700;
    color: #ea580c;
}

.bbhg-opp-breakdown-bar {
    height: 6px;
    background: var(--bbhg-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.bbhg-opp-breakdown-fill {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #ef4444);
    border-radius: 3px;
    transition: width 1s ease-out;
}

/* Section Cards */
.bbhg-opp-section {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

/* Content Angles */
.bbhg-opp-angles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.bbhg-opp-angle-card {
    padding: 16px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(249, 115, 22, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-angle-card:hover {
    border-color: #f97316;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(249, 115, 22, 0.15);
}

.bbhg-opp-angle-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bbhg-opp-angle-icon {
    font-size: 22px;
}

.bbhg-opp-angle-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-opp-angle-desc {
    font-size: 13px;
    color: #1f2937;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.bbhg-opp-angle-hook {
    font-size: 12px;
    color: #ea580c;
    font-style: italic;
    padding: 8px 12px;
    background: rgba(249, 115, 22, 0.08);
    border-radius: 8px;
    border-left: 3px solid #f97316;
}

/* Hashtags Grid */
.bbhg-opp-hashtags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.bbhg-opp-hashtag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-hashtag:hover {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(239, 68, 68, 0.1));
    border-color: #f97316;
    color: #ea580c;
}

.bbhg-opp-hashtag-growth {
    font-size: 11px;
    color: #16a34a;
    font-weight: 600;
}

.bbhg-opp-copy-hashtags {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-copy-hashtags:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.bbhg-opp-copy-hashtags svg {
    stroke: white;
}

/* Questions List */
.bbhg-opp-questions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-opp-question {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-opp-question:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-opp-question-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.15), rgba(239, 68, 68, 0.15));
    border-radius: 8px;
    font-size: 14px;
    flex-shrink: 0;
}

.bbhg-opp-question-text {
    flex: 1;
    font-size: 14px;
    color: var(--bbhg-gray-800);
    line-height: 1.5;
}

.bbhg-opp-question-meta {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.bbhg-opp-question-source,
.bbhg-opp-question-intent {
    font-size: 11px;
    padding: 3px 8px;
    background: var(--bbhg-gray-200);
    border-radius: 10px;
    color: #1f2937;
}

/* Hooks Row */
.bbhg-opp-hooks-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bbhg-opp-news-list,
.bbhg-opp-entertainment-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-opp-news-item,
.bbhg-opp-entertainment-item {
    padding: 12px;
    background: var(--bbhg-gray-50);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.bbhg-opp-news-item:hover,
.bbhg-opp-entertainment-item:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-opp-news-title,
.bbhg-opp-entertainment-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.bbhg-opp-news-source,
.bbhg-opp-entertainment-type {
    font-size: 11px;
    color: #1f2937;
}

/* Tips List */
.bbhg-opp-tips-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.bbhg-opp-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--bbhg-gray-50);
    border-radius: 10px;
}

.bbhg-opp-tip-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.bbhg-opp-tip-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

/* Timing Section */
.bbhg-opp-timing-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.bbhg-opp-timing-card {
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    text-align: center;
}

.bbhg-opp-timing-label {
    font-size: 12px;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-opp-timing-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-opp-timing-recommendation {
    grid-column: 1 / -1;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(239, 68, 68, 0.08));
    border-radius: 12px;
    border-left: 4px solid #f97316;
}

.bbhg-opp-timing-recommendation p {
    margin: 0;
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

/* Action Buttons */
.bbhg-opp-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 24px;
}

.bbhg-opp-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: white;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-action-btn:hover {
    border-color: #f97316;
    color: #ea580c;
}

.bbhg-opp-action-btn svg {
    stroke: currentColor;
}

.bbhg-opp-new-analysis {
    background: linear-gradient(135deg, #f97316, #ef4444);
    border-color: transparent;
    color: white;
}

.bbhg-opp-new-analysis:hover {
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.bbhg-opp-new-analysis svg {
    stroke: white;
}

/* Footer */
.bbhg-opp-footer {
    text-align: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-opp-footer-text {
    font-size: 12px;
    color: #1f2937;
}

/* Error State */
.bbhg-opportunity-error {
    padding: 60px 20px;
    text-align: center;
}

.bbhg-opp-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-opportunity-error h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
}

.bbhg-opportunity-error p {
    color: #1f2937;
    font-size: 14px;
    margin: 0 0 20px 0;
}

.bbhg-opp-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.bbhg-opp-retry-btn svg {
    stroke: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-opportunity-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-opp-form-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-opp-platform-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-opp-breakdown-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-opp-angles-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-opp-hooks-row {
        grid-template-columns: 1fr;
    }
    
    .bbhg-opp-tips-list {
        grid-template-columns: 1fr;
    }
    
    .bbhg-opp-timing-info {
        grid-template-columns: 1fr;
    }
    
    .bbhg-opp-loading-steps {
        flex-wrap: wrap;
    }
    
    .bbhg-opp-actions {
        flex-direction: column;
    }
    
    .bbhg-opp-action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bbhg-opportunity-header {
        padding: 18px;
        margin: 12px;
    }
    
    .bbhg-opportunity-header h2 {
        font-size: 18px;
    }
    
    .bbhg-opp-platform-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-opp-quick-niches {
        display: none;
    }
}

/* Shake animation for validation */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Ensure proper scrolling on mobile */
#bbhg-panel-opportunity {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Empty state styling */
.bbhg-opp-empty-state {
    padding: 30px;
    text-align: center;
    color: #1f2937;
}

.bbhg-opp-empty-state-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

/* Improve touch targets on mobile */
@media (max-width: 768px) {
    .bbhg-opp-platform-btn {
        padding: 14px 10px;
    }
    
    .bbhg-opp-content-btn {
        padding: 12px 16px;
    }
    
    .bbhg-opp-hashtag {
        padding: 10px 16px;
    }
}

/* =====================================================
   OPPORTUNITY SCORE - BUTTON TEXT FIX (WHITE)
   ===================================================== */

/* Main analyze button - ensure white text */
.bbhg-opp-analyze-btn {
    color: #ffffff !important;
}

.bbhg-opp-analyze-btn span,
.bbhg-opp-analyze-btn .bbhg-opp-btn-text,
.bbhg-opp-analyze-btn .bbhg-opp-btn-icon {
    color: #ffffff !important;
}

/* Copy hashtags button */
.bbhg-opp-copy-hashtags {
    color: #ffffff !important;
}

.bbhg-opp-copy-hashtags span {
    color: #ffffff !important;
}

/* Retry button */
.bbhg-opp-retry-btn {
    color: #ffffff !important;
}

.bbhg-opp-retry-btn span {
    color: #ffffff !important;
}

/* New analysis button (gradient) */
.bbhg-opp-new-analysis {
    color: #ffffff !important;
}

.bbhg-opp-new-analysis span {
    color: #ffffff !important;
}

/* Active content type buttons */
.bbhg-opp-content-btn.active {
    color: #ffffff !important;
}

/* Override any inherited dark text */
.bbhg-opportunity-container button[class*="bbhg-opp"]:not(.bbhg-opp-platform-btn):not(.bbhg-opp-content-btn):not(.bbhg-opp-quick-niche):not(.bbhg-opp-action-btn.bbhg-opp-save-report) {
    color: #ffffff !important;
}

/* Ensure SVG strokes are white in gradient buttons */
.bbhg-opp-analyze-btn svg,
.bbhg-opp-copy-hashtags svg,
.bbhg-opp-retry-btn svg,
.bbhg-opp-new-analysis svg {
    stroke: #ffffff !important;
}

/* AI Insights Section Styles */
.bbhg-opp-ai-insights {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.05), rgba(236, 72, 153, 0.05));
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-opp-ai-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(249, 115, 22, 0.15);
}

.bbhg-opp-ai-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #f97316, #ec4899);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    color: white !important;
}

.bbhg-opp-ai-badge-icon {
    font-size: 14px;
}

.bbhg-opp-ai-summary {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bbhg-gray-800);
    margin-bottom: 20px;
    padding: 16px;
    background: white;
    border-radius: 12px;
    border-left: 4px solid #f97316;
}

.bbhg-opp-ai-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bbhg-opp-ai-card {
    background: white;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.bbhg-opp-ai-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin-bottom: 12px;
}

.bbhg-opp-ai-card-icon {
    font-size: 16px;
}

.bbhg-opp-ai-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bbhg-opp-ai-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--bbhg-gray-100);
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

.bbhg-opp-ai-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bbhg-opp-ai-list-icon {
    color: #f97316;
    font-weight: bold;
    flex-shrink: 0;
}

.bbhg-opp-ai-strategy {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(236, 72, 153, 0.08));
    border-radius: 12px;
    padding: 16px;
}

.bbhg-opp-ai-strategy p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--bbhg-gray-800);
}

.bbhg-opp-ai-caption {
    padding: 10px 14px;
    background: var(--bbhg-gray-50);
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.bbhg-opp-ai-caption:hover {
    background: rgba(249, 115, 22, 0.08);
    border-color: #f97316;
}

.bbhg-opp-ai-caption:last-child {
    margin-bottom: 0;
}

.bbhg-opp-ai-caption::after {
    content: '📋';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
}

.bbhg-opp-ai-caption:hover::after {
    opacity: 1;
}

.bbhg-opp-ai-hook {
    padding: 10px 14px;
    background: var(--bbhg-gray-50);
    border-left: 3px solid #f97316;
    border-radius: 0 8px 8px 0;
    margin-bottom: 8px;
    font-size: 13px;
    font-style: italic;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-opp-ai-hook:hover {
    background: rgba(249, 115, 22, 0.08);
}

.bbhg-opp-ai-hook:last-child {
    margin-bottom: 0;
}

/* AI Not Available Message */
.bbhg-opp-ai-unavailable {
    padding: 20px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    text-align: center;
}

.bbhg-opp-ai-unavailable-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.bbhg-opp-ai-unavailable h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: var(--bbhg-gray-800);
}

.bbhg-opp-ai-unavailable p {
    margin: 0;
    font-size: 13px;
    color: #1f2937;
}

@media (max-width: 768px) {
    .bbhg-opp-ai-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-opp-ai-strategy {
        grid-column: 1;
    }
}

/* =====================================================
   OPPORTUNITY SCORE - LOADING STEPS (NO EMOJI)
   ===================================================== */

.bbhg-opp-step-check {
    width: 18px;
    height: 18px;
    border: 2px solid var(--bbhg-gray-300);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
}

.bbhg-opp-step-check::after {
    content: '';
    width: 0;
    height: 0;
    border: none;
    transition: all 0.3s ease;
}

.bbhg-opp-step.active .bbhg-opp-step-check {
    border-color: #f97316;
    background: linear-gradient(135deg, #f97316, #ec4899);
    animation: bbhg-opp-pulse 1s ease-in-out infinite;
}

.bbhg-opp-step.complete .bbhg-opp-step-check {
    border-color: #22c55e;
    background: #22c55e;
    animation: none;
}

.bbhg-opp-step.complete .bbhg-opp-step-check::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

@keyframes bbhg-opp-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(249, 115, 22, 0); }
}

/* Remove loading icon from center */
.bbhg-opp-loading-icon {
    display: none !important;
}

/* Adjust loading animation position */
.bbhg-opp-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

/* ============================================
   BATCH CONTENT PLANNER - HashMind Theme
   ============================================ */

/* Panel-level resets to prevent modal interference */
#bbhg-panel-batchplanner * {
    box-sizing: border-box !important;
}

#bbhg-panel-batchplanner input,
#bbhg-panel-batchplanner select,
#bbhg-panel-batchplanner textarea {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    font-family: inherit !important;
}

.bbhg-batch-container {
    padding: 20px;
    min-height: 500px;
}

/* Header - HashMind Style Green Gradient */
.bbhg-batch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border-radius: 12px;
    margin-bottom: 24px;
    color: white;
}

.bbhg-batch-title {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bbhg-batch-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bbhg-batch-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-batch-title h2 {
    margin: 0 0 2px 0;
    font-size: 20px;
    font-weight: 700;
    color: white !important;
}

.bbhg-batch-subtitle {
    margin: 0;
    font-size: 13px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-batch-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
}

.bbhg-batch-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-batch-status .bbhg-status-text {
    color: white !important;
}

/* Setup Section */
.bbhg-batch-setup {
    background: var(--bbhg-white, #fff);
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.bbhg-batch-setup-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-batch-setup-row:last-child {
    margin-bottom: 0;
}

.bbhg-batch-field {
    flex: 1;
    min-width: 0;
}

.bbhg-batch-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700, #374151);
    margin-bottom: 8px;
}

.bbhg-batch-field label svg {
    width: 16px;
    height: 16px;
    stroke: #10b981;
}

.bbhg-batch-input,
.bbhg-batch-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 14px;
    border: 1px solid var(--bbhg-gray-300, #d1d5db);
    border-radius: 8px;
    background: var(--bbhg-white, #fff);
    color: var(--bbhg-gray-800, #1f2937);
    transition: all 0.2s ease;
}

.bbhg-batch-input:focus,
.bbhg-batch-select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.bbhg-batch-field-button {
    display: flex;
    align-items: flex-end;
}

.bbhg-batch-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bbhg-batch-generate-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bbhg-batch-generate-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

/* Grid Wrapper */
.bbhg-batch-grid-wrapper {
    background: var(--bbhg-white, #fff);
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 20px;
}

.bbhg-batch-grid-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-batch-grid-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800, #1f2937);
}

.bbhg-batch-grid-actions {
    display: flex;
    gap: 10px;
}

.bbhg-batch-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-batch-action-btn svg {
    width: 16px;
    height: 16px;
}

.bbhg-batch-action-clear {
    background: var(--bbhg-gray-100, #f3f4f6);
    color: var(--bbhg-gray-700, #374151);
}

.bbhg-batch-action-clear:hover {
    background: var(--bbhg-gray-200, #e5e7eb);
}

.bbhg-batch-action-clear svg {
    stroke: var(--bbhg-gray-600, #4b5563);
}

.bbhg-batch-action-export {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
}

.bbhg-batch-action-export:hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bbhg-batch-action-export svg {
    stroke: white;
}

/* Content Grid */
.bbhg-batch-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    max-height: 500px !important;
    overflow-y: auto !important;
    padding-right: 8px !important;
}

.bbhg-batch-grid::-webkit-scrollbar {
    width: 6px;
}

.bbhg-batch-grid::-webkit-scrollbar-track {
    background: var(--bbhg-gray-100, #f3f4f6);
    border-radius: 3px;
}

.bbhg-batch-grid::-webkit-scrollbar-thumb {
    background: var(--bbhg-gray-300, #d1d5db);
    border-radius: 3px;
}

/* Day Card - Force proper rendering with CSS Grid */
#bbhg-batch-grid .bbhg-batch-day {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    min-height: auto !important;
    position: relative !important;
}

#bbhg-batch-grid .bbhg-batch-day-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    min-height: 44px !important;
    width: 100% !important;
    grid-row: 1 !important;
    grid-column: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

#bbhg-batch-grid .bbhg-batch-day-header span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important;
}

#bbhg-batch-grid .bbhg-batch-day-date {
    font-weight: 700 !important;
    font-size: 14px !important;
    color: white !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

#bbhg-batch-grid .bbhg-batch-day-name {
    font-size: 12px !important;
    opacity: 0.9 !important;
    color: white !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

#bbhg-batch-grid .bbhg-batch-day-content {
    padding: 12px 16px !important;
    display: block !important;
    background: #f9fafb !important;
    width: 100% !important;
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Post Slot - Force proper rendering */
#bbhg-batch-grid .bbhg-batch-post {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 12px !important;
    margin-bottom: 10px !important;
    display: block !important;
    width: 100% !important;
}

#bbhg-batch-grid .bbhg-batch-post:last-child {
    margin-bottom: 0 !important;
}

#bbhg-batch-grid .bbhg-batch-post-header {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f3f4f6 !important;
}

#bbhg-batch-grid .bbhg-batch-post-number {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

#bbhg-batch-grid .bbhg-batch-post-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    display: inline-block !important;
}

#bbhg-batch-grid .bbhg-batch-post-row {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
}

#bbhg-batch-grid .bbhg-batch-post-field {
    flex: 1 !important;
    min-width: 120px !important;
    display: block !important;
}

#bbhg-batch-grid .bbhg-batch-post-field label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #1f2937 !important;
    margin-bottom: 4px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#bbhg-batch-grid .bbhg-batch-post-input,
#bbhg-batch-grid .bbhg-batch-post-select {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    display: block !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 38px !important;
}

#bbhg-batch-grid .bbhg-batch-post-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px !important;
    padding-right: 32px !important;
}

#bbhg-batch-grid .bbhg-batch-post-textarea {
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    color: #1f2937 !important;
    resize: vertical !important;
    min-height: 60px !important;
    font-family: inherit !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* Empty State */
.bbhg-batch-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-gray-50, #f9fafb);
    border: 2px dashed var(--bbhg-gray-200, #e5e7eb);
    border-radius: 16px;
}

.bbhg-batch-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-batch-empty h3 {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800, #1f2937);
}

.bbhg-batch-empty p {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #1f2937;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-batch-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.bbhg-batch-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bbhg-white, #fff);
    border: 1px solid var(--bbhg-gray-200, #e5e7eb);
    border-radius: 8px;
    text-align: left;
}

.bbhg-batch-tip-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-batch-tip span:last-child {
    font-size: 13px;
    color: #1f2937;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-batch-header {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    
    .bbhg-batch-title {
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-batch-setup-row {
        flex-direction: column;
    }
    
    .bbhg-batch-grid-header {
        flex-direction: column;
        gap: 12px;
    }
    
    .bbhg-batch-grid-actions {
        width: 100%;
    }
    
    .bbhg-batch-action-btn {
        flex: 1;
        justify-content: center;
    }
    
    .bbhg-batch-post-row {
        flex-direction: column;
    }
}

/* ==================== ENGAGEMENT RATE CALCULATOR STYLES ==================== */

.bbhg-ec-container {
    padding: 0 4px;
}

/* Header Banner - HashMind Purple Gradient */
.bbhg-ec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-ec-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-ec-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-ec-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-ec-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-ec-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-ec-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-ec-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-ec-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-ec-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-ec-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-ec-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-ec-status .bbhg-status-text {
    color: white !important;
}

/* Input Section */
.bbhg-ec-input-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-ec-input-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.bbhg-ec-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-ec-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-ec-label svg {
    width: 18px;
    height: 18px;
    color: #8b5cf6;
}

.bbhg-ec-optional {
    font-weight: 400;
    color: #374151;
    font-size: 12px;
}

.bbhg-ec-input {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 16px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-ec-input:focus {
    border-color: #8b5cf6;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.bbhg-ec-input::placeholder {
    color: #374151;
}

.bbhg-ec-hint {
    font-size: 12px;
    color: #1f2937;
}

/* Calculate Button */
.bbhg-ec-calculate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ec-calculate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-ec-calculate-btn:active {
    transform: translateY(0);
}

.bbhg-ec-calculate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-ec-calculate-btn span {
    color: white !important;
}

/* Results Section */
.bbhg-ec-results {
    animation: bbhg-ec-fade-in 0.4s ease;
}

@keyframes bbhg-ec-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Score Card */
.bbhg-ec-score-card {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    padding: 32px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.bbhg-ec-score-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
}

.bbhg-ec-score-header h3 {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bbhg-ec-score-display {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 16px;
}

.bbhg-ec-score-value {
    font-size: 64px;
    font-weight: 800;
    color: white !important;
    line-height: 1;
    text-shadow: 0 4px 20px rgba(0,0,0,0.2);
}

.bbhg-ec-score-percent {
    font-size: 32px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8) !important;
}

.bbhg-ec-rating {
    margin-bottom: 20px;
}

.bbhg-ec-rating-badge {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.bbhg-ec-rating-badge.excellent {
    background: rgba(34, 197, 94, 0.3);
}

.bbhg-ec-rating-badge.good {
    background: rgba(59, 130, 246, 0.3);
}

.bbhg-ec-rating-badge.average {
    background: rgba(245, 158, 11, 0.3);
}

.bbhg-ec-rating-badge.below {
    background: rgba(239, 68, 68, 0.3);
}

/* Meter */
.bbhg-ec-meter {
    position: relative;
    height: 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bbhg-ec-meter-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24 0%, #22c55e 50%, #06b6d4 100%);
    border-radius: 6px;
    transition: width 0.6s ease;
    width: 0%;
}

.bbhg-ec-meter-markers {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 6px;
}

/* Benchmark Section */
.bbhg-ec-benchmark-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-ec-benchmark-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 16px 0;
}

.bbhg-ec-benchmark-section h4 svg {
    width: 20px;
    height: 20px;
    color: #8b5cf6;
}

.bbhg-ec-benchmark-card {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    padding: 16px;
}

.bbhg-ec-benchmark-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-ec-benchmark-row:last-child {
    border-bottom: none;
}

.bbhg-ec-benchmark-label {
    font-size: 14px;
    color: #1f2937;
}

.bbhg-ec-benchmark-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-ec-benchmark-comparison .bbhg-ec-benchmark-value {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
}

.bbhg-ec-benchmark-value.above {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.bbhg-ec-benchmark-value.at {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.bbhg-ec-benchmark-value.below {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Stats Grid */
.bbhg-ec-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-ec-stat-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-ec-stat-icon {
    font-size: 24px;
}

.bbhg-ec-stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbhg-ec-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-ec-stat-label {
    font-size: 12px;
    color: #1f2937;
}

/* Tips Section */
.bbhg-ec-tips-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-ec-tips-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 16px 0;
}

.bbhg-ec-tips-section h4 svg {
    width: 20px;
    height: 20px;
    color: #8b5cf6;
}

.bbhg-ec-tips-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-ec-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: var(--bbhg-radius);
    border-left: 3px solid #8b5cf6;
}

.bbhg-ec-tip-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-ec-tip-text {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

/* Recalculate Button */
.bbhg-ec-recalc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 24px;
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    color: var(--bbhg-gray-700) !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ec-recalc-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-ec-recalc-btn svg {
    width: 18px;
    height: 18px;
}

/* Footer */
.bbhg-ec-footer {
    padding: 16px;
    text-align: center;
}

.bbhg-ec-footer p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    color: #1f2937;
    margin: 0;
}

.bbhg-ec-footer svg {
    width: 16px;
    height: 16px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .bbhg-ec-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-ec-title-section h2 {
        font-size: 20px;
    }
    
    .bbhg-ec-status {
        align-self: flex-start;
    }
    
    .bbhg-ec-input-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .bbhg-ec-score-value {
        font-size: 48px;
    }
    
    .bbhg-ec-score-percent {
        font-size: 24px;
    }
    
    .bbhg-ec-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-ec-stat-card {
        padding: 14px;
    }
}

/* Dark Mode Support */
[data-theme="dark"] .bbhg-ec-input-section,
[data-theme="dark"] .bbhg-ec-benchmark-section,
[data-theme="dark"] .bbhg-ec-tips-section,
[data-theme="dark"] .bbhg-ec-stat-card {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
}

[data-theme="dark"] .bbhg-ec-input {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-ec-input:focus {
    background: var(--bbhg-gray-800);
}

[data-theme="dark"] .bbhg-ec-label {
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-ec-benchmark-card {
    background: var(--bbhg-gray-700);
}

[data-theme="dark"] .bbhg-ec-benchmark-row {
    border-color: #1f2937;
}

[data-theme="dark"] .bbhg-ec-benchmark-label {
    color: #374151;
}

[data-theme="dark"] .bbhg-ec-benchmark-value {
    color: var(--bbhg-gray-200);
}

[data-theme="dark"] .bbhg-ec-stat-value {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-ec-tip {
    background: rgba(139, 92, 246, 0.1);
}

[data-theme="dark"] .bbhg-ec-tip-text {
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-ec-recalc-btn {
    background: var(--bbhg-gray-800);
    border-color: #1f2937;
    color: var(--bbhg-gray-300) !important;
}

[data-theme="dark"] .bbhg-ec-footer p {
    color: #1f2937;
}

/* ==================== CONTENT REPURPOSER STYLES ==================== */

.bbhg-rp-container {
    padding: 0;
    min-height: 500px;
}

.bbhg-rp-header {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    padding: 28px 28px;
    border-radius: var(--bbhg-radius-lg) var(--bbhg-radius-lg) 0 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bbhg-rp-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    animation: bbhg-rp-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-rp-shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.bbhg-rp-header-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-rp-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-rp-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-rp-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-rp-title-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
}

.bbhg-rp-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    margin: 0;
}

.bbhg-rp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 14px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.bbhg-rp-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-rp-status .bbhg-status-text {
    color: white !important;
    font-size: 13px;
    font-weight: 500;
}

/* Input Section */
.bbhg-rp-input-section {
    padding: 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.bbhg-rp-input-group {
    margin-bottom: 20px;
}

.bbhg-rp-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
}

.bbhg-rp-textarea-wrap {
    position: relative;
}

.bbhg-rp-textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 140px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.bbhg-rp-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-rp-textarea::placeholder {
    color: #94a3b8;
}

.bbhg-rp-char-count {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 12px;
    color: #94a3b8;
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Type Pills */
.bbhg-rp-type-group,
.bbhg-rp-tone-group {
    margin-bottom: 20px;
}

.bbhg-rp-type-pills,
.bbhg-rp-tone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-rp-type-pill,
.bbhg-rp-tone-pill {
    padding: 10px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rp-type-pill:hover,
.bbhg-rp-tone-pill:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-rp-type-pill.active,
.bbhg-rp-tone-pill.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

/* Platform Selection Grid */
.bbhg-rp-platforms-group {
    margin-bottom: 24px;
}

.bbhg-rp-platforms-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.bbhg-rp-platform-check {
    cursor: pointer;
}

.bbhg-rp-platform-check input {
    display: none;
}

.bbhg-rp-platform-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-rp-platform-check:hover .bbhg-rp-platform-box {
    border-color: #8b5cf6;
}

.bbhg-rp-platform-check input:checked + .bbhg-rp-platform-box {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: #8b5cf6;
}

.bbhg-rp-platform-icon {
    font-size: 20px;
}

.bbhg-rp-platform-name {
    font-size: 13px;
    font-weight: 500;
    color: #334155;
}

/* Generate Button */
.bbhg-rp-action-wrap {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.bbhg-rp-generate-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.3);
}

.bbhg-rp-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.4);
}

.bbhg-rp-generate-btn:active {
    transform: translateY(0);
}

.bbhg-rp-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white !important;
}

.bbhg-rp-generate-btn span {
    color: white !important;
}

.bbhg-rp-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading State */
.bbhg-rp-loading {
    padding: 60px 24px;
    text-align: center;
}

.bbhg-rp-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-rp-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid #e2e8f0;
    border-top-color: #06b6d4;
    border-radius: 50%;
    animation: bbhg-rp-spin 1s linear infinite;
}

@keyframes bbhg-rp-spin {
    to { transform: rotate(360deg); }
}

.bbhg-rp-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-rp-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-rp-bounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-rp-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.bbhg-rp-loading-text {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.bbhg-rp-loading-bar {
    width: 200px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-rp-loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #06b6d4, #0891b2);
    border-radius: 3px;
    width: 0%;
    animation: bbhg-rp-progress 3s ease-in-out infinite;
}

@keyframes bbhg-rp-progress {
    0% { width: 0%; }
    50% { width: 80%; }
    100% { width: 100%; }
}

/* Results Section */
.bbhg-rp-results {
    padding: 24px;
}

.bbhg-rp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-rp-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-rp-results-icon {
    font-size: 24px;
}

.bbhg-rp-results-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.bbhg-rp-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-rp-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rp-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.bbhg-rp-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-rp-action-btn span {
    color: white !important;
}

.bbhg-rp-action-btn.bbhg-rp-new-btn {
    background: #f1f5f9;
    color: #64748b !important;
}

.bbhg-rp-action-btn.bbhg-rp-new-btn span {
    color: #64748b !important;
}

.bbhg-rp-action-btn.bbhg-rp-new-btn svg {
    stroke: #64748b !important;
}

.bbhg-rp-action-btn.bbhg-rp-new-btn:hover {
    background: #e2e8f0;
}

/* Results Grid */
.bbhg-rp-results-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-rp-result-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-rp-result-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.bbhg-rp-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.bbhg-rp-result-platform {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-rp-result-platform-icon {
    font-size: 22px;
}

.bbhg-rp-result-platform-name {
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.bbhg-rp-result-meta {
    font-size: 12px;
    color: #94a3b8;
}

.bbhg-rp-result-actions {
    display: flex;
    gap: 8px;
}

.bbhg-rp-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    border-radius: 6px;
    color: white !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rp-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.bbhg-rp-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: white !important;
}

.bbhg-rp-copy-btn span {
    color: white !important;
}

.bbhg-rp-copy-btn.copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bbhg-rp-result-content {
    padding: 18px;
}

.bbhg-rp-result-text {
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.bbhg-rp-result-hashtags {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed #e2e8f0;
}

.bbhg-rp-result-hashtags-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
}

.bbhg-rp-result-hashtags-list {
    font-size: 13px;
    color: #06b6d4;
    line-height: 1.6;
}

/* Carousel Slides */
.bbhg-rp-carousel-slides {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-rp-carousel-slide {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
}

.bbhg-rp-slide-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
    margin-right: 10px;
}

.bbhg-rp-slide-content {
    display: inline;
    font-size: 14px;
    color: #334155;
}

/* Thread Tweets */
.bbhg-rp-thread-tweets {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-rp-tweet {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 16px;
    position: relative;
}

.bbhg-rp-tweet::before {
    content: '';
    position: absolute;
    left: 22px;
    top: -10px;
    width: 2px;
    height: 10px;
    background: #e2e8f0;
}

.bbhg-rp-tweet:first-child::before {
    display: none;
}

.bbhg-rp-tweet-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    background: #1da1f2;
    color: white;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    margin-right: 10px;
}

.bbhg-rp-tweet-text {
    display: inline;
    font-size: 14px;
    color: #334155;
}

.bbhg-rp-tweet-chars {
    display: block;
    text-align: right;
    font-size: 11px;
    color: #94a3b8;
    margin-top: 8px;
}

/* Empty State */
.bbhg-rp-empty {
    padding: 50px 24px;
    text-align: center;
}

.bbhg-rp-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    animation: bbhg-rp-float 3s ease-in-out infinite;
}

@keyframes bbhg-rp-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(10deg); }
}

.bbhg-rp-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.bbhg-rp-empty p {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 24px 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-rp-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.bbhg-rp-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(6, 182, 212, 0.08);
    border-radius: 10px;
    text-align: left;
}

.bbhg-rp-tip-icon {
    font-size: 18px;
}

.bbhg-rp-tip-text {
    font-size: 13px;
    color: #475569;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .bbhg-rp-header {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-rp-title-section h2 {
        font-size: 18px;
    }
    
    .bbhg-rp-subtitle {
        font-size: 13px;
    }
    
    .bbhg-rp-input-section {
        padding: 16px;
    }
    
    .bbhg-rp-platforms-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-rp-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-rp-results-actions {
        width: 100%;
    }
    
    .bbhg-rp-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Dark Mode */
[data-theme="dark"] .bbhg-rp-input-section {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
}

[data-theme="dark"] .bbhg-rp-textarea {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rp-textarea:focus {
    background: var(--bbhg-gray-800);
}

[data-theme="dark"] .bbhg-rp-label {
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-rp-type-pill,
[data-theme="dark"] .bbhg-rp-tone-pill {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-rp-platform-box {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
}

[data-theme="dark"] .bbhg-rp-platform-name {
    color: var(--bbhg-gray-200);
}

[data-theme="dark"] .bbhg-rp-char-count {
    background: var(--bbhg-gray-700);
    color: #374151;
}

[data-theme="dark"] .bbhg-rp-results {
    background: var(--bbhg-gray-800);
}

[data-theme="dark"] .bbhg-rp-results-title h3 {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rp-result-card {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
}

[data-theme="dark"] .bbhg-rp-result-header {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
}

[data-theme="dark"] .bbhg-rp-result-platform-name {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rp-result-text {
    color: var(--bbhg-gray-200);
}

[data-theme="dark"] .bbhg-rp-loading-title {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rp-loading-text {
    color: #374151;
}

[data-theme="dark"] .bbhg-rp-empty h3 {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rp-empty p {
    color: #374151;
}

[data-theme="dark"] .bbhg-rp-tip {
    background: rgba(6, 182, 212, 0.15);
}

[data-theme="dark"] .bbhg-rp-tip-text {
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-rp-tweet,
[data-theme="dark"] .bbhg-rp-carousel-slide {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
}

[data-theme="dark"] .bbhg-rp-slide-content,
[data-theme="dark"] .bbhg-rp-tweet-text {
    color: var(--bbhg-gray-200);
}

[data-theme="dark"] .bbhg-rp-result-hashtags {
    border-color: #1f2937;
}

[data-theme="dark"] .bbhg-rp-result-hashtags-label {
    color: #374151;
}

/* ==================== SPONSORSHIP PITCH GENERATOR STYLES ==================== */

.bbhg-sp-container {
    padding: 0 4px;
}

/* Header Banner - Green/Teal Gradient for Money Theme */
.bbhg-sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-sp-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-sp-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-sp-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-sp-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-sp-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-sp-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-sp-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-sp-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-sp-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-sp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-sp-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-sp-status .bbhg-status-text {
    color: white !important;
}

/* Pitch Type Section */
.bbhg-sp-type-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-sp-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.bbhg-sp-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

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

.bbhg-sp-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bbhg-sp-type-btn:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.bbhg-sp-type-btn.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: white;
}

.bbhg-sp-type-btn.active .bbhg-sp-type-icon svg {
    stroke: white;
}

.bbhg-sp-type-btn.active .bbhg-sp-type-name,
.bbhg-sp-type-btn.active .bbhg-sp-type-desc {
    color: white !important;
}

.bbhg-sp-type-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-sp-type-icon svg {
    width: 24px;
    height: 24px;
    stroke: #10b981;
}

.bbhg-sp-type-name {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.bbhg-sp-type-desc {
    font-size: 11px;
    color: #6b7280;
}

/* Form Section */
.bbhg-sp-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-sp-form-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
}

.bbhg-sp-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.bbhg-sp-card-icon {
    font-size: 20px;
}

.bbhg-sp-card-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.bbhg-sp-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

@media (max-width: 600px) {
    .bbhg-sp-form-grid {
        grid-template-columns: 1fr;
    }
}

.bbhg-sp-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-sp-input-group.full-width {
    grid-column: 1 / -1;
}

.bbhg-sp-input-group label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.bbhg-sp-input-group label .required {
    color: #ef4444;
}

.bbhg-sp-input-group label .optional {
    color: #9ca3af;
    font-weight: 400;
}

.bbhg-sp-input {
    padding: 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-sp-input:focus {
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.bbhg-sp-input::placeholder {
    color: #9ca3af;
}

.bbhg-sp-textarea {
    padding: 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #f9fafb;
    transition: all 0.2s ease;
    outline: none;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.bbhg-sp-textarea:focus {
    border-color: #10b981;
    background: white;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.bbhg-sp-textarea::placeholder {
    color: #9ca3af;
}

.bbhg-sp-hint {
    font-size: 12px;
    color: #6b7280;
    margin-top: 4px;
}

/* Tone Section */
.bbhg-sp-tone-section {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px;
}

.bbhg-sp-tone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-sp-tone-pill {
    padding: 10px 16px;
    background: #f9fafb;
    border: 2px solid #e5e7eb;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sp-tone-pill:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.05);
}

.bbhg-sp-tone-pill.active {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-color: #10b981;
    color: white !important;
}

/* Generate Button */
.bbhg-sp-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 12px;
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 8px;
}

.bbhg-sp-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.bbhg-sp-generate-btn:active {
    transform: translateY(0);
}

.bbhg-sp-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-sp-generate-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-sp-loading {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.bbhg-sp-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-sp-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(16, 185, 129, 0.1);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: bbhg-spin 1s linear infinite;
}

.bbhg-sp-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-bounce 1s ease-in-out infinite;
}

.bbhg-sp-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.bbhg-sp-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

.bbhg-sp-loading-bar {
    width: 200px;
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-sp-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    border-radius: 3px;
    animation: bbhg-progress 2s ease-in-out infinite;
}

@keyframes bbhg-progress {
    0% { width: 0%; }
    50% { width: 80%; }
    100% { width: 100%; }
}

/* Results Section */
.bbhg-sp-results {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
}

.bbhg-sp-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bbhg-sp-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-sp-results-icon {
    font-size: 24px;
}

.bbhg-sp-results-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: white !important;
    margin: 0;
}

.bbhg-sp-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-sp-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: #065f46 !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sp-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-sp-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #065f46;
}

.bbhg-sp-action-btn span {
    color: #065f46 !important;
}

/* Subject Line */
.bbhg-sp-subject-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f0fdf4;
    border-bottom: 1px solid #e5e7eb;
}

.bbhg-sp-subject-line label {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    white-space: nowrap;
}

.bbhg-sp-subject-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.bbhg-sp-subject-wrap span {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

.bbhg-sp-copy-subject {
    padding: 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sp-copy-subject:hover {
    background: #dcfce7;
}

.bbhg-sp-copy-subject svg {
    width: 16px;
    height: 16px;
    stroke: #059669;
}

/* Email Content */
.bbhg-sp-email-content {
    padding: 24px;
    font-size: 14px;
    line-height: 1.8;
    color: #1f2937;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.bbhg-sp-email-content p {
    margin: 0 0 16px 0;
    color: #1f2937;
}

.bbhg-sp-email-content p:last-child {
    margin-bottom: 0;
}

/* Tips Section */
.bbhg-sp-tips {
    padding: 16px 20px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
}

.bbhg-sp-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bbhg-sp-tips-header span {
    font-size: 18px;
}

.bbhg-sp-tips-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
    margin: 0;
}

.bbhg-sp-tips-list {
    margin: 0;
    padding-left: 20px;
}

.bbhg-sp-tips-list li {
    font-size: 13px;
    color: #78350f;
    margin-bottom: 4px;
}

/* Empty State */
.bbhg-sp-empty {
    text-align: center;
    padding: 60px 20px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
}

.bbhg-sp-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-sp-empty h3 {
    font-size: 22px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 12px 0;
}

.bbhg-sp-empty p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-sp-empty-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.bbhg-sp-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: #059669;
}

.bbhg-sp-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-sp-error {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border: 1px solid #fecaca;
    border-radius: 16px;
}

.bbhg-sp-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-sp-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #dc2626;
    margin: 0 0 8px 0;
}

.bbhg-sp-error p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

.bbhg-sp-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 10px;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sp-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.bbhg-sp-retry-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-sp-retry-btn span {
    color: white !important;
}

/* ==================== END SPONSORSHIP PITCH GENERATOR STYLES ==================== */

/* ==================== SCRIPT WRITER STYLES ==================== */
.bbhg-sw-container {
    padding: 0;
}

.bbhg-sw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ea580c 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-sw-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-sw-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-sw-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-sw-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-sw-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-sw-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-sw-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-sw-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-sw-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-sw-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Script Type Selection */
.bbhg-sw-type-section {
    margin-bottom: 24px;
}

.bbhg-sw-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
}

.bbhg-sw-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bbhg-sw-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 12px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bbhg-sw-type-btn:hover {
    border-color: #f59e0b;
    background: #fffbeb;
}

.bbhg-sw-type-btn.active {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
}

.bbhg-sw-type-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.bbhg-sw-type-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.bbhg-sw-type-btn.active .bbhg-sw-type-name {
    color: white;
}

.bbhg-sw-type-desc {
    font-size: 11px;
    color: #6b7280;
}

.bbhg-sw-type-btn.active .bbhg-sw-type-desc {
    color: rgba(255, 255, 255, 0.9);
}

/* Form Section */
.bbhg-sw-form-section {
    margin-bottom: 24px;
}

.bbhg-sw-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-sw-form-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
}

.bbhg-sw-form-card-full {
    grid-column: 1 / -1;
}

.bbhg-sw-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
}

.bbhg-sw-card-icon {
    font-size: 18px;
}

.bbhg-sw-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}

.bbhg-sw-form-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-sw-field-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 6px;
}

.bbhg-sw-required {
    color: #ef4444;
}

.bbhg-sw-input,
.bbhg-sw-select,
.bbhg-sw-textarea {
    width: 100%;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-sw-input:focus,
.bbhg-sw-select:focus,
.bbhg-sw-textarea:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.bbhg-sw-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Tone Pills */
.bbhg-sw-tone-section {
    margin-bottom: 24px;
}

.bbhg-sw-tone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-sw-tone-pill {
    padding: 10px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sw-tone-pill:hover {
    border-color: #f59e0b;
    background: #fffbeb;
}

.bbhg-sw-tone-pill.active {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border-color: transparent;
    color: white !important;
}

/* Generate Button */
.bbhg-sw-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border: none;
    border-radius: 12px;
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sw-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}

.bbhg-sw-generate-btn:active {
    transform: translateY(0);
}

.bbhg-sw-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-sw-generate-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-sw-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-sw-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-sw-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(245, 158, 11, 0.2);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: bbhg-sw-spin 1s linear infinite;
}

@keyframes bbhg-sw-spin {
    to { transform: rotate(360deg); }
}

.bbhg-sw-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-sw-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-sw-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-sw-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-sw-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-sw-loading-bar {
    width: 200px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-sw-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #f59e0b, #f97316);
    border-radius: 2px;
    animation: bbhg-sw-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-sw-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-sw-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-sw-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
}

.bbhg-sw-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-sw-results-icon {
    font-size: 20px;
}

.bbhg-sw-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-sw-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-sw-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    color: #92400e !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sw-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-sw-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #92400e;
}

.bbhg-sw-action-btn span {
    color: #92400e !important;
}

/* Script Content */
.bbhg-sw-script-content {
    padding: 24px;
    font-size: 14px;
    line-height: 1.8;
    color: #1f2937;
}

.bbhg-sw-script-content p {
    margin: 0 0 16px 0;
}

.bbhg-sw-script-content p:last-child {
    margin-bottom: 0;
}

.bbhg-sw-script-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #e2e8f0;
}

.bbhg-sw-script-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.bbhg-sw-script-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: #f59e0b;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-sw-script-timing {
    display: inline-block;
    padding: 2px 8px;
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    margin-left: auto;
}

.bbhg-sw-script-text {
    color: #374151;
    font-size: 15px;
    line-height: 1.8;
}

/* Tips Section */
.bbhg-sw-tips {
    padding: 16px 20px;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
}

.bbhg-sw-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #92400e;
    margin-bottom: 8px;
}

.bbhg-sw-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #78350f;
}

.bbhg-sw-tips-list li {
    margin-bottom: 4px;
}

.bbhg-sw-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-sw-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-sw-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-sw-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-sw-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 400px;
    margin: 0 auto 24px;
}

.bbhg-sw-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-sw-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fffbeb;
    border-radius: 20px;
    font-size: 13px;
    color: #92400e;
}

.bbhg-sw-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-sw-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-sw-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-sw-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-sw-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-sw-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sw-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.bbhg-sw-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-sw-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-sw-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-sw-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-sw-form-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-sw-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-sw-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
/* ==================== END SCRIPT WRITER STYLES ==================== */

/* ==================== CONTROVERSY TAKE GENERATOR STYLES ==================== */
.bbhg-ct-container {
    padding: 0;
}

.bbhg-ct-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 50%, #fbbf24 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-ct-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-ct-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-ct-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-ct-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-ct-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-ct-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-ct-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-ct-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-ct-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-ct-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-ct-search-section {
    margin-bottom: 24px;
}

.bbhg-ct-input-group {
    margin-bottom: 16px;
}

.bbhg-ct-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-ct-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-ct-input-container {
    flex: 1;
    position: relative;
}

.bbhg-ct-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-ct-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-ct-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-ct-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.bbhg-ct-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-ct-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.4);
}

.bbhg-ct-search-btn:active {
    transform: translateY(0);
}

.bbhg-ct-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-ct-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-ct-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-ct-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-ct-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ct-topic-pill:hover {
    border-color: #ef4444;
    background: #fef2f2;
    color: #dc2626;
}

/* Spice Level */
.bbhg-ct-spice-section {
    margin-bottom: 16px;
}

.bbhg-ct-spice-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-ct-spice-pill {
    padding: 12px 18px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ct-spice-pill:hover {
    border-color: #ef4444;
    background: #fef2f2;
}

.bbhg-ct-spice-pill.active {
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    border-color: transparent;
    color: white !important;
}

/* Loading State */
.bbhg-ct-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-ct-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-ct-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(239, 68, 68, 0.2);
    border-top-color: #ef4444;
    border-radius: 50%;
    animation: bbhg-ct-spin 1s linear infinite;
}

@keyframes bbhg-ct-spin {
    to { transform: rotate(360deg); }
}

.bbhg-ct-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-ct-flame 0.5s ease-in-out infinite alternate;
}

@keyframes bbhg-ct-flame {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.2); }
}

.bbhg-ct-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-ct-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-ct-loading-bar {
    width: 200px;
    height: 4px;
    background: #fee2e2;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-ct-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #ef4444, #f97316);
    border-radius: 2px;
    animation: bbhg-ct-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-ct-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-ct-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-ct-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    color: white;
}

.bbhg-ct-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-ct-results-icon {
    font-size: 20px;
}

.bbhg-ct-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-ct-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-ct-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #b91c1c !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ct-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-ct-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #b91c1c;
}

.bbhg-ct-action-btn span {
    color: #b91c1c !important;
}

/* Takes Grid */
.bbhg-ct-takes-grid {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-ct-take-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bbhg-ct-take-card:hover {
    border-color: #fca5a5;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.bbhg-ct-take-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-ct-take-number {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #ef4444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-ct-take-spice {
    font-size: 14px;
}

.bbhg-ct-take-copy {
    padding: 6px 12px;
    background: #fef2f2;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: #dc2626;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ct-take-copy:hover {
    background: #fee2e2;
}

.bbhg-ct-take-text {
    font-size: 15px;
    line-height: 1.7;
    color: #1f2937;
    margin-bottom: 12px;
}

.bbhg-ct-take-reasoning {
    padding: 12px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #f97316;
}

.bbhg-ct-take-reasoning-label {
    font-size: 11px;
    font-weight: 600;
    color: #f97316;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.bbhg-ct-take-reasoning-text {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
}

/* Disclaimer */
.bbhg-ct-disclaimer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: #fef3c7;
    border-top: 1px solid #fde68a;
    font-size: 13px;
    color: #92400e;
}

.bbhg-ct-disclaimer p {
    margin: 0;
    line-height: 1.5;
}

/* Empty State */
.bbhg-ct-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-ct-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-ct-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-ct-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 450px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-ct-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-ct-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fef2f2;
    border-radius: 20px;
    font-size: 13px;
    color: #dc2626;
}

.bbhg-ct-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-ct-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-ct-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-ct-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-ct-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-ct-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ct-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.bbhg-ct-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-ct-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-ct-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-ct-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-ct-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-ct-spice-pills {
        flex-direction: column;
    }
    
    .bbhg-ct-spice-pill {
        text-align: center;
    }
    
    .bbhg-ct-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-ct-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
/* ==================== END CONTROVERSY TAKE GENERATOR STYLES ==================== */

/* ==================== TREND NEWSJACKER STYLES ==================== */
.bbhg-tn-container {
    padding: 0;
}

.bbhg-tn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-tn-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-tn-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-tn-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-tn-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-tn-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-tn-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-tn-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-tn-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-tn-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-tn-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-tn-search-section {
    margin-bottom: 24px;
}

.bbhg-tn-dual-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-tn-input-group {
    margin-bottom: 0;
}

.bbhg-tn-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-tn-input-container {
    position: relative;
}

.bbhg-tn-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-tn-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-tn-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-tn-input:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

/* Quick Topics */
.bbhg-tn-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-tn-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-tn-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tn-topic-pill:hover {
    border-color: #0891b2;
    background: #ecfeff;
    color: #0e7490;
}

/* Content Type Section */
.bbhg-tn-type-section {
    margin-bottom: 20px;
}

.bbhg-tn-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-tn-type-pill {
    padding: 10px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tn-type-pill:hover {
    border-color: #0891b2;
    background: #ecfeff;
}

.bbhg-tn-type-pill.active {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-color: transparent;
    color: white !important;
}

/* Generate Button */
.bbhg-tn-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border: none;
    border-radius: 12px;
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tn-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.4);
}

.bbhg-tn-generate-btn:active {
    transform: translateY(0);
}

.bbhg-tn-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-tn-generate-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-tn-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-tn-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-tn-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(8, 145, 178, 0.2);
    border-top-color: #0891b2;
    border-radius: 50%;
    animation: bbhg-tn-spin 1s linear infinite;
}

@keyframes bbhg-tn-spin {
    to { transform: rotate(360deg); }
}

.bbhg-tn-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-tn-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-tn-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-tn-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-tn-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-tn-loading-bar {
    width: 200px;
    height: 4px;
    background: #cffafe;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-tn-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #0891b2, #06b6d4);
    border-radius: 2px;
    animation: bbhg-tn-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-tn-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-tn-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-tn-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    color: white;
}

.bbhg-tn-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-tn-results-icon {
    font-size: 20px;
}

.bbhg-tn-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-tn-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-tn-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #0e7490 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tn-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-tn-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #0e7490;
}

.bbhg-tn-action-btn span {
    color: #0e7490 !important;
}

/* Ideas Grid */
.bbhg-tn-ideas-grid {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-tn-idea-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bbhg-tn-idea-card:hover {
    border-color: #67e8f9;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
}

.bbhg-tn-idea-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-tn-idea-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-tn-idea-badge {
    padding: 4px 10px;
    background: #ecfeff;
    color: #0e7490;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-tn-idea-emoji {
    font-size: 18px;
}

.bbhg-tn-idea-copy {
    padding: 6px 12px;
    background: #ecfeff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: #0e7490;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tn-idea-copy:hover {
    background: #cffafe;
}

.bbhg-tn-idea-hook {
    font-size: 16px;
    font-weight: 600;
    color: #0891b2;
    margin-bottom: 10px;
    line-height: 1.4;
}

.bbhg-tn-idea-content {
    font-size: 14px;
    line-height: 1.7;
    color: #374151;
    margin-bottom: 12px;
}

.bbhg-tn-idea-angle {
    padding: 12px;
    background: #f0fdfa;
    border-radius: 8px;
    border-left: 3px solid #0891b2;
}

.bbhg-tn-idea-angle-label {
    font-size: 11px;
    font-weight: 600;
    color: #0891b2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.bbhg-tn-idea-angle-text {
    font-size: 13px;
    color: #0e7490;
    line-height: 1.5;
}

/* Tips Section */
.bbhg-tn-tips {
    padding: 16px 20px;
    background: #ecfeff;
    border-top: 1px solid #a5f3fc;
}

.bbhg-tn-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0e7490;
    margin-bottom: 8px;
}

.bbhg-tn-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #155e75;
}

.bbhg-tn-tips-list li {
    margin-bottom: 4px;
}

.bbhg-tn-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-tn-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-tn-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-tn-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-tn-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 450px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-tn-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-tn-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ecfeff;
    border-radius: 20px;
    font-size: 13px;
    color: #0e7490;
}

.bbhg-tn-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-tn-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-tn-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-tn-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-tn-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-tn-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-tn-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.bbhg-tn-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-tn-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-tn-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-tn-dual-inputs {
        grid-template-columns: 1fr;
    }
    
    .bbhg-tn-type-pills {
        flex-direction: column;
    }
    
    .bbhg-tn-type-pill {
        text-align: center;
    }
    
    .bbhg-tn-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-tn-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
/* ==================== END TREND NEWSJACKER STYLES ==================== */

/* ==================== QUOTE CARD GENERATOR STYLES ==================== */
.bbhg-qc-container {
    padding: 0;
}

.bbhg-qc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 50%, #fb7185 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-qc-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-qc-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-qc-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-qc-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-qc-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-qc-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-qc-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-qc-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-qc-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-qc-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-qc-search-section {
    margin-bottom: 24px;
}

.bbhg-qc-input-group {
    margin-bottom: 16px;
}

.bbhg-qc-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-qc-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-qc-input-container {
    flex: 1;
    position: relative;
}

.bbhg-qc-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-qc-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-qc-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-qc-input:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

.bbhg-qc-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-qc-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(236, 72, 153, 0.4);
}

.bbhg-qc-search-btn:active {
    transform: translateY(0);
}

.bbhg-qc-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-qc-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-qc-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-qc-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-qc-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qc-topic-pill:hover {
    border-color: #ec4899;
    background: #fdf2f8;
    color: #be185d;
}

/* Style Selection */
.bbhg-qc-style-section {
    margin-bottom: 20px;
}

.bbhg-qc-style-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-qc-style-pill {
    padding: 12px 18px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qc-style-pill:hover {
    border-color: #ec4899;
    background: #fdf2f8;
}

.bbhg-qc-style-pill.active {
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border-color: transparent;
    color: white !important;
}

/* Loading State */
.bbhg-qc-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-qc-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-qc-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(236, 72, 153, 0.2);
    border-top-color: #ec4899;
    border-radius: 50%;
    animation: bbhg-qc-spin 1s linear infinite;
}

@keyframes bbhg-qc-spin {
    to { transform: rotate(360deg); }
}

.bbhg-qc-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-qc-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-qc-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-qc-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-qc-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-qc-loading-bar {
    width: 200px;
    height: 4px;
    background: #fce7f3;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-qc-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #ec4899, #f43f5e);
    border-radius: 2px;
    animation: bbhg-qc-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-qc-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-qc-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-qc-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    color: white;
}

.bbhg-qc-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-qc-results-icon {
    font-size: 20px;
}

.bbhg-qc-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-qc-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-qc-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #be185d !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qc-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-qc-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #be185d;
}

.bbhg-qc-action-btn span {
    color: #be185d !important;
}

/* Quotes Grid */
.bbhg-qc-quotes-grid {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bbhg-qc-quote-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.bbhg-qc-quote-card:hover {
    border-color: #f9a8d4;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.1);
    transform: translateY(-2px);
}

.bbhg-qc-quote-visual {
    padding: 30px 24px;
    background: linear-gradient(135deg, #fdf2f8 0%, #fce7f3 100%);
    text-align: center;
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-qc-quote-visual::before {
    content: '"';
    position: absolute;
    top: 10px;
    left: 15px;
    font-size: 60px;
    color: rgba(236, 72, 153, 0.15);
    font-family: Georgia, serif;
    line-height: 1;
}

.bbhg-qc-quote-text {
    font-size: 16px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.6;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.bbhg-qc-quote-meta {
    padding: 16px;
    background: white;
    border-top: 1px solid #f3e8ff;
}

.bbhg-qc-quote-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.bbhg-qc-quote-tag {
    padding: 4px 10px;
    background: #fdf2f8;
    color: #be185d;
    font-size: 11px;
    font-weight: 500;
    border-radius: 4px;
}

.bbhg-qc-quote-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bbhg-qc-quote-platform {
    font-size: 12px;
    color: #6b7280;
}

.bbhg-qc-quote-copy {
    padding: 6px 12px;
    background: #fdf2f8;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: #be185d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qc-quote-copy:hover {
    background: #fce7f3;
}

/* Tips Section */
.bbhg-qc-tips {
    padding: 16px 20px;
    background: #fdf2f8;
    border-top: 1px solid #fbcfe8;
}

.bbhg-qc-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #be185d;
    margin-bottom: 8px;
}

.bbhg-qc-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #9d174d;
}

.bbhg-qc-tips-list li {
    margin-bottom: 4px;
}

.bbhg-qc-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-qc-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-qc-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-qc-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-qc-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 450px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-qc-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-qc-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fdf2f8;
    border-radius: 20px;
    font-size: 13px;
    color: #be185d;
}

.bbhg-qc-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-qc-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-qc-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-qc-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-qc-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-qc-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ec4899 0%, #f43f5e 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-qc-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
}

.bbhg-qc-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-qc-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-qc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-qc-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-qc-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-qc-style-pills {
        flex-direction: column;
    }
    
    .bbhg-qc-style-pill {
        text-align: center;
    }
    
    .bbhg-qc-quotes-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-qc-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-qc-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
/* ==================== END QUOTE CARD GENERATOR STYLES ==================== */

/* ==================== NEWS-TO-CONTENT PIPELINE STYLES ==================== */
.bbhg-np-container {
    padding: 0;
}

.bbhg-np-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-np-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-np-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-np-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-np-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-np-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-np-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-np-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-np-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-np-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-np-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-np-search-section {
    margin-bottom: 24px;
}

.bbhg-np-input-group {
    margin-bottom: 16px;
}

.bbhg-np-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-np-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-np-input-container {
    flex: 1;
    position: relative;
}

.bbhg-np-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-np-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-np-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-np-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.bbhg-np-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-np-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.4);
}

.bbhg-np-search-btn:active {
    transform: translateY(0);
}

.bbhg-np-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-np-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-np-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-np-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-np-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-np-topic-pill:hover {
    border-color: #6366f1;
    background: #eef2ff;
    color: #4338ca;
}

/* Content Type Section */
.bbhg-np-content-type-section {
    margin-bottom: 20px;
}

.bbhg-np-type-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-np-type-pill {
    padding: 10px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-np-type-pill:hover {
    border-color: #6366f1;
    background: #eef2ff;
}

.bbhg-np-type-pill.active {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

/* Loading State */
.bbhg-np-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-np-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-np-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bbhg-np-spin 1s linear infinite;
}

@keyframes bbhg-np-spin {
    to { transform: rotate(360deg); }
}

.bbhg-np-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-np-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-np-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-np-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-np-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-np-loading-bar {
    width: 200px;
    height: 4px;
    background: #e0e7ff;
    border-radius: 2px;
    margin: 0 auto 20px;
    overflow: hidden;
}

.bbhg-np-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
    border-radius: 2px;
    animation: bbhg-np-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-np-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

.bbhg-np-loading-steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bbhg-np-step {
    font-size: 13px;
    color: #9ca3af;
    transition: all 0.3s ease;
}

.bbhg-np-step.active {
    color: #4f46e5;
    font-weight: 500;
}

.bbhg-np-step.done {
    color: #22c55e;
}

/* Results Section */
.bbhg-np-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-np-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    color: white;
}

.bbhg-np-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-np-results-icon {
    font-size: 20px;
}

.bbhg-np-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-np-results-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.bbhg-np-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-np-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #4338ca !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-np-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-np-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #4338ca;
}

.bbhg-np-action-btn span {
    color: #4338ca !important;
}

/* Articles Grid */
.bbhg-np-articles-grid {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bbhg-np-article-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bbhg-np-article-card:hover {
    border-color: #a5b4fc;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.bbhg-np-article-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    border-bottom: 1px solid #c7d2fe;
}

.bbhg-np-article-source {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.bbhg-np-source-badge {
    padding: 4px 10px;
    background: #4f46e5;
    color: white;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-np-article-time {
    font-size: 12px;
    color: #6b7280;
}

.bbhg-np-article-headline {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    margin: 0;
}

.bbhg-np-article-headline a {
    color: inherit;
    text-decoration: none;
}

.bbhg-np-article-headline a:hover {
    color: #4f46e5;
}

.bbhg-np-article-body {
    padding: 20px;
}

.bbhg-np-article-summary {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.bbhg-np-content-ideas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-np-content-idea {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    border-left: 4px solid #6366f1;
}

.bbhg-np-idea-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bbhg-np-idea-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-np-idea-badge {
    padding: 4px 10px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.bbhg-np-idea-badge.hottake {
    background: #fef2f2;
    color: #dc2626;
}

.bbhg-np-idea-badge.explainer {
    background: #f0fdf4;
    color: #16a34a;
}

.bbhg-np-idea-badge.opinion {
    background: #fefce8;
    color: #ca8a04;
}

.bbhg-np-idea-badge.thread {
    background: #eff6ff;
    color: #2563eb;
}

.bbhg-np-idea-emoji {
    font-size: 16px;
}

.bbhg-np-idea-copy {
    padding: 6px 12px;
    background: #eef2ff;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: #4338ca;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-np-idea-copy:hover {
    background: #e0e7ff;
}

.bbhg-np-idea-hook {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.4;
}

.bbhg-np-idea-content {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

/* Tips Section */
.bbhg-np-tips {
    padding: 16px 20px;
    background: #eef2ff;
    border-top: 1px solid #c7d2fe;
}

.bbhg-np-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4338ca;
    margin-bottom: 8px;
}

.bbhg-np-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #4338ca;
}

.bbhg-np-tips-list li {
    margin-bottom: 4px;
}

.bbhg-np-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-np-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-np-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-np-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-np-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-np-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-np-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #eef2ff;
    border-radius: 20px;
    font-size: 13px;
    color: #4338ca;
}

.bbhg-np-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-np-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-np-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-np-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-np-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-np-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-np-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.bbhg-np-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-np-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-np-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-np-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-np-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-np-type-pills {
        flex-direction: column;
    }
    
    .bbhg-np-type-pill {
        text-align: center;
    }
    
    .bbhg-np-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-np-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .bbhg-np-loading-steps {
        flex-direction: column;
        gap: 8px;
    }
}
/* ==================== END NEWS-TO-CONTENT PIPELINE STYLES ==================== */

/* ==================== PAIN POINT MINER STYLES ==================== */
.bbhg-pm-container {
    padding: 0;
}

.bbhg-pm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #f43f5e 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-pm-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-pm-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-pm-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-pm-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-pm-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-pm-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-pm-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-pm-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-pm-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-pm-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-pm-search-section {
    margin-bottom: 24px;
}

.bbhg-pm-input-group {
    margin-bottom: 16px;
}

.bbhg-pm-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-pm-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-pm-input-container {
    flex: 1;
    position: relative;
}

.bbhg-pm-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-pm-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-pm-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-pm-input:focus {
    outline: none;
    border-color: #e11d48;
    box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.1);
}

.bbhg-pm-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-pm-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(225, 29, 72, 0.4);
}

.bbhg-pm-search-btn:active {
    transform: translateY(0);
}

.bbhg-pm-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-pm-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-pm-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-pm-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-pm-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-pm-topic-pill:hover {
    border-color: #e11d48;
    background: #fff1f2;
    color: #be123c;
}

/* Source Selection */
.bbhg-pm-source-section {
    margin-bottom: 20px;
}

.bbhg-pm-source-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-pm-source-pill {
    padding: 10px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-pm-source-pill:hover {
    border-color: #e11d48;
    background: #fff1f2;
}

.bbhg-pm-source-pill.active {
    background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
    border-color: transparent;
    color: white !important;
}

/* Loading State */
.bbhg-pm-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-pm-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-pm-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(225, 29, 72, 0.2);
    border-top-color: #e11d48;
    border-radius: 50%;
    animation: bbhg-pm-spin 1s linear infinite;
}

@keyframes bbhg-pm-spin {
    to { transform: rotate(360deg); }
}

.bbhg-pm-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-pm-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-pm-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-pm-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-pm-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-pm-loading-bar {
    width: 200px;
    height: 4px;
    background: #ffe4e6;
    border-radius: 2px;
    margin: 0 auto 20px;
    overflow: hidden;
}

.bbhg-pm-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #be123c, #e11d48);
    border-radius: 2px;
    animation: bbhg-pm-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-pm-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

.bbhg-pm-loading-steps {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bbhg-pm-step {
    font-size: 13px;
    color: #9ca3af;
    transition: all 0.3s ease;
}

.bbhg-pm-step.active {
    color: #e11d48;
    font-weight: 500;
}

.bbhg-pm-step.done {
    color: #22c55e;
}

/* Results Section */
.bbhg-pm-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-pm-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
    color: white;
}

.bbhg-pm-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-pm-results-icon {
    font-size: 20px;
}

.bbhg-pm-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-pm-results-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.bbhg-pm-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-pm-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #be123c !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-pm-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-pm-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #be123c;
}

.bbhg-pm-action-btn span {
    color: #be123c !important;
}

/* Pain Points Grid */
.bbhg-pm-painpoints-grid {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bbhg-pm-painpoint-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bbhg-pm-painpoint-card:hover {
    border-color: #fda4af;
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.1);
}

.bbhg-pm-painpoint-header {
    padding: 16px 20px;
    background: linear-gradient(135deg, #fff1f2 0%, #ffe4e6 100%);
    border-bottom: 1px solid #fecdd3;
}

.bbhg-pm-painpoint-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bbhg-pm-severity-badge {
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-pm-severity-badge.high {
    background: #be123c;
    color: white;
}

.bbhg-pm-severity-badge.medium {
    background: #f97316;
    color: white;
}

.bbhg-pm-severity-badge.low {
    background: #eab308;
    color: white;
}

.bbhg-pm-source-tag {
    padding: 4px 10px;
    background: white;
    color: #6b7280;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
}

.bbhg-pm-frequency {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
}

.bbhg-pm-painpoint-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    margin: 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.bbhg-pm-painpoint-title .bbhg-pm-pain-emoji {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-pm-painpoint-body {
    padding: 20px;
}

.bbhg-pm-real-quote {
    background: #fef2f2;
    border-left: 4px solid #e11d48;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 0 8px 8px 0;
}

.bbhg-pm-quote-label {
    font-size: 10px;
    font-weight: 600;
    color: #be123c;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.bbhg-pm-quote-text {
    font-size: 14px;
    color: #4b5563;
    font-style: italic;
    line-height: 1.5;
}

.bbhg-pm-content-ideas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-pm-content-idea {
    background: #f8fafc;
    border-radius: 10px;
    padding: 16px;
    border-left: 4px solid #e11d48;
}

.bbhg-pm-idea-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bbhg-pm-idea-type {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-pm-idea-badge {
    padding: 4px 10px;
    background: #fff1f2;
    color: #be123c;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.bbhg-pm-idea-badge.hook {
    background: #fef2f2;
    color: #dc2626;
}

.bbhg-pm-idea-badge.post {
    background: #f0fdf4;
    color: #16a34a;
}

.bbhg-pm-idea-badge.video {
    background: #eff6ff;
    color: #2563eb;
}

.bbhg-pm-idea-badge.carousel {
    background: #fefce8;
    color: #ca8a04;
}

.bbhg-pm-idea-emoji {
    font-size: 16px;
}

.bbhg-pm-idea-copy {
    padding: 6px 12px;
    background: #fff1f2;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: #be123c;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-pm-idea-copy:hover {
    background: #ffe4e6;
}

.bbhg-pm-idea-hook {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
    line-height: 1.4;
}

.bbhg-pm-idea-content {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

/* Language Bank Section */
.bbhg-pm-language-bank {
    margin: 0 20px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.bbhg-pm-language-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-bottom: 1px solid #fecdd3;
    font-size: 14px;
    color: #be123c;
}

.bbhg-pm-language-phrases {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-pm-phrase {
    padding: 8px 14px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    border-radius: 20px;
    font-size: 13px;
    color: #9f1239;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-pm-phrase:hover {
    background: #ffe4e6;
    border-color: #fda4af;
}

.bbhg-pm-phrase.copied {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

/* Tips Section */
.bbhg-pm-tips {
    padding: 16px 20px;
    background: #fff1f2;
    border-top: 1px solid #fecdd3;
}

.bbhg-pm-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #be123c;
    margin-bottom: 8px;
}

.bbhg-pm-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #9f1239;
}

.bbhg-pm-tips-list li {
    margin-bottom: 4px;
}

.bbhg-pm-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-pm-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-pm-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-pm-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-pm-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-pm-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-pm-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff1f2;
    border-radius: 20px;
    font-size: 13px;
    color: #be123c;
}

.bbhg-pm-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-pm-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-pm-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-pm-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-pm-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-pm-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-pm-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
}

.bbhg-pm-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-pm-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-pm-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-pm-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-pm-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-pm-source-pills {
        flex-direction: column;
    }
    
    .bbhg-pm-source-pill {
        text-align: center;
    }
    
    .bbhg-pm-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-pm-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .bbhg-pm-loading-steps {
        flex-direction: column;
        gap: 8px;
    }
}
/* ==================== END PAIN POINT MINER STYLES ==================== */

/* ==================== CREATOR SOPS GENERATOR STYLES ==================== */
.bbhg-sop-container {
    padding: 0;
}

.bbhg-sop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #334155 0%, #475569 50%, #64748b 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-sop-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-sop-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-sop-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-sop-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-sop-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-sop-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-sop-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-sop-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-sop-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-sop-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-sop-search-section {
    margin-bottom: 24px;
}

.bbhg-sop-input-group {
    margin-bottom: 16px;
}

.bbhg-sop-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-sop-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-sop-input-container {
    flex: 1;
    position: relative;
}

.bbhg-sop-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-sop-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-sop-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-sop-input:focus {
    outline: none;
    border-color: #475569;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, 0.1);
}

.bbhg-sop-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-sop-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(71, 85, 105, 0.4);
}

.bbhg-sop-search-btn:active {
    transform: translateY(0);
}

.bbhg-sop-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-sop-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-sop-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-sop-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-sop-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sop-topic-pill:hover {
    border-color: #475569;
    background: #f1f5f9;
    color: #334155;
}

/* SOP Type Selection */
.bbhg-sop-type-section {
    margin-bottom: 20px;
}

.bbhg-sop-type-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bbhg-sop-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sop-type-card:hover {
    border-color: #475569;
    background: #f1f5f9;
}

.bbhg-sop-type-card.active {
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    border-color: transparent;
    color: white;
}

.bbhg-sop-type-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.bbhg-sop-type-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.bbhg-sop-type-desc {
    font-size: 11px;
    opacity: 0.8;
}

.bbhg-sop-type-card.active .bbhg-sop-type-name,
.bbhg-sop-type-card.active .bbhg-sop-type-desc {
    color: white;
}

/* Loading State */
.bbhg-sop-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-sop-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-sop-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(71, 85, 105, 0.2);
    border-top-color: #475569;
    border-radius: 50%;
    animation: bbhg-sop-spin 1s linear infinite;
}

@keyframes bbhg-sop-spin {
    to { transform: rotate(360deg); }
}

.bbhg-sop-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-sop-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-sop-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-sop-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-sop-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-sop-loading-bar {
    width: 200px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-sop-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #334155, #475569);
    border-radius: 2px;
    animation: bbhg-sop-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-sop-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-sop-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-sop-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: white;
}

.bbhg-sop-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-sop-results-icon {
    font-size: 20px;
}

.bbhg-sop-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-sop-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-sop-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #334155 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sop-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-sop-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #334155;
}

.bbhg-sop-action-btn span {
    color: #334155 !important;
}

/* SOP Overview */
.bbhg-sop-overview {
    padding: 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.bbhg-sop-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bbhg-sop-overview-item {
    text-align: center;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.bbhg-sop-overview-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.bbhg-sop-overview-value {
    font-size: 18px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.bbhg-sop-overview-label {
    font-size: 12px;
    color: #6b7280;
}

/* SOP Steps */
.bbhg-sop-steps-container {
    padding: 20px;
}

.bbhg-sop-step-card {
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-sop-step-card:hover {
    border-color: #94a3b8;
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.1);
}

.bbhg-sop-step-card:last-child {
    margin-bottom: 0;
}

.bbhg-sop-step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
}

.bbhg-sop-step-number {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.bbhg-sop-step-title-section {
    flex: 1;
}

.bbhg-sop-step-title {
    font-size: 15px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.bbhg-sop-step-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-sop-step-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #6b7280;
}

.bbhg-sop-step-time svg {
    width: 14px;
    height: 14px;
}

.bbhg-sop-step-difficulty {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
}

.bbhg-sop-step-difficulty.easy {
    background: #dcfce7;
    color: #166534;
}

.bbhg-sop-step-difficulty.medium {
    background: #fef3c7;
    color: #92400e;
}

.bbhg-sop-step-difficulty.hard {
    background: #fee2e2;
    color: #991b1b;
}

.bbhg-sop-step-copy {
    padding: 6px 12px;
    background: #f1f5f9;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sop-step-copy:hover {
    background: #e2e8f0;
}

.bbhg-sop-step-body {
    padding: 20px;
}

.bbhg-sop-step-description {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 16px;
}

.bbhg-sop-checklist {
    background: #f8fafc;
    border-radius: 8px;
    padding: 16px;
}

.bbhg-sop-checklist-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}

.bbhg-sop-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-sop-checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.bbhg-sop-checklist-item::before {
    content: '☐';
    color: #475569;
    font-size: 14px;
    flex-shrink: 0;
}

.bbhg-sop-step-tip {
    margin-top: 16px;
    padding: 12px 16px;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 0 8px 8px 0;
}

.bbhg-sop-step-tip-label {
    font-size: 10px;
    font-weight: 600;
    color: #1d4ed8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bbhg-sop-step-tip-text {
    font-size: 13px;
    color: #1e40af;
    line-height: 1.5;
}

/* Tools Section */
.bbhg-sop-tools {
    margin: 0 20px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.bbhg-sop-tools-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    color: #334155;
}

.bbhg-sop-tools-list {
    padding: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-sop-tool-tag {
    padding: 8px 14px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #475569;
}

/* Tips Section */
.bbhg-sop-tips {
    padding: 16px 20px;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
}

.bbhg-sop-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #334155;
    margin-bottom: 8px;
}

.bbhg-sop-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #475569;
}

.bbhg-sop-tips-list li {
    margin-bottom: 4px;
}

.bbhg-sop-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-sop-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-sop-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-sop-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-sop-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-sop-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-sop-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f1f5f9;
    border-radius: 20px;
    font-size: 13px;
    color: #475569;
}

.bbhg-sop-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-sop-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-sop-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-sop-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-sop-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-sop-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #334155 0%, #475569 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sop-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(71, 85, 105, 0.3);
}

.bbhg-sop-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-sop-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-sop-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-sop-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-sop-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-sop-type-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-sop-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-sop-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-sop-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .bbhg-sop-step-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-sop-step-copy {
        align-self: flex-start;
    }
}
/* ==================== END CREATOR SOPS GENERATOR STYLES ==================== */

/* ==================== CAROUSEL BUILDER STYLES ==================== */
.bbhg-cb-container {
    padding: 0;
}

.bbhg-cb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a78bfa 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-cb-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-cb-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-cb-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-cb-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-cb-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-cb-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-cb-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-cb-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-cb-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-cb-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-cb-search-section {
    margin-bottom: 24px;
}

.bbhg-cb-input-group {
    margin-bottom: 16px;
}

.bbhg-cb-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-cb-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-cb-input-container {
    flex: 1;
    position: relative;
}

.bbhg-cb-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-cb-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-cb-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-cb-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-cb-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-cb-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(124, 58, 237, 0.4);
}

.bbhg-cb-search-btn:active {
    transform: translateY(0);
}

.bbhg-cb-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-cb-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-cb-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-cb-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-cb-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cb-topic-pill:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
    color: #6d28d9;
}

/* Settings Row */
.bbhg-cb-settings-row {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.bbhg-cb-setting {
    flex: 1;
}

.bbhg-cb-slide-count-pills,
.bbhg-cb-platform-pills {
    display: flex;
    gap: 8px;
}

.bbhg-cb-count-pill,
.bbhg-cb-platform-pill {
    padding: 10px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cb-count-pill:hover,
.bbhg-cb-platform-pill:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.bbhg-cb-count-pill.active,
.bbhg-cb-platform-pill.active {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    border-color: transparent;
    color: white !important;
}

/* Style Section */
.bbhg-cb-style-section {
    margin-bottom: 20px;
}

.bbhg-cb-style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bbhg-cb-style-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cb-style-card:hover {
    border-color: #8b5cf6;
    background: #f5f3ff;
}

.bbhg-cb-style-card.active {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    border-color: transparent;
    color: white;
}

.bbhg-cb-style-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.bbhg-cb-style-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 4px;
}

.bbhg-cb-style-desc {
    font-size: 11px;
    opacity: 0.8;
}

.bbhg-cb-style-card.active .bbhg-cb-style-name,
.bbhg-cb-style-card.active .bbhg-cb-style-desc {
    color: white;
}

/* Loading State */
.bbhg-cb-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-cb-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-cb-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-cb-spin 1s linear infinite;
}

@keyframes bbhg-cb-spin {
    to { transform: rotate(360deg); }
}

.bbhg-cb-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-cb-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-cb-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-cb-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-cb-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-cb-loading-bar {
    width: 200px;
    height: 4px;
    background: #ede9fe;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-cb-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #7c3aed, #8b5cf6);
    border-radius: 2px;
    animation: bbhg-cb-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-cb-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-cb-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-cb-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: white;
}

.bbhg-cb-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-cb-results-icon {
    font-size: 20px;
}

.bbhg-cb-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-cb-results-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.bbhg-cb-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-cb-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #6d28d9 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cb-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-cb-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #6d28d9;
}

.bbhg-cb-action-btn span {
    color: #6d28d9 !important;
}

/* Slides Container */
.bbhg-cb-slides-container {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.bbhg-cb-slide-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bbhg-cb-slide-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1);
}

.bbhg-cb-slide-card.hook-slide {
    border-color: #c4b5fd;
    border-width: 2px;
}

.bbhg-cb-slide-card.cta-slide {
    border-color: #a78bfa;
    border-width: 2px;
}

.bbhg-cb-slide-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-bottom: 1px solid #e9d5ff;
}

.bbhg-cb-slide-card.hook-slide .bbhg-cb-slide-header {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    border-bottom-color: transparent;
}

.bbhg-cb-slide-card.cta-slide .bbhg-cb-slide-header {
    background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%);
    border-bottom-color: transparent;
}

.bbhg-cb-slide-number {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-cb-slide-num {
    width: 28px;
    height: 28px;
    background: #7c3aed;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

.bbhg-cb-slide-card.hook-slide .bbhg-cb-slide-num,
.bbhg-cb-slide-card.cta-slide .bbhg-cb-slide-num {
    background: rgba(255,255,255,0.2);
}

.bbhg-cb-slide-type {
    font-size: 11px;
    font-weight: 600;
    color: #6d28d9;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-cb-slide-card.hook-slide .bbhg-cb-slide-type,
.bbhg-cb-slide-card.cta-slide .bbhg-cb-slide-type {
    color: white;
}

.bbhg-cb-slide-copy {
    padding: 6px 10px;
    background: white;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    color: #6d28d9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cb-slide-copy:hover {
    background: #f5f3ff;
}

.bbhg-cb-slide-card.hook-slide .bbhg-cb-slide-copy,
.bbhg-cb-slide-card.cta-slide .bbhg-cb-slide-copy {
    background: rgba(255,255,255,0.9);
}

.bbhg-cb-slide-body {
    padding: 16px;
}

.bbhg-cb-slide-headline {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
    line-height: 1.3;
}

.bbhg-cb-slide-content {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 12px;
}

.bbhg-cb-slide-visual {
    padding: 10px 12px;
    background: #faf5ff;
    border-radius: 8px;
    border-left: 3px solid #8b5cf6;
}

.bbhg-cb-slide-visual-label {
    font-size: 10px;
    font-weight: 600;
    color: #7c3aed;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bbhg-cb-slide-visual-text {
    font-size: 12px;
    color: #6d28d9;
    line-height: 1.4;
}

/* Caption Section */
.bbhg-cb-caption-section {
    margin: 0 20px 20px;
    background: white;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.bbhg-cb-caption-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    border-bottom: 1px solid #e9d5ff;
    font-size: 14px;
    color: #6d28d9;
}

.bbhg-cb-caption-copy {
    margin-left: auto;
    padding: 6px 12px;
    background: #7c3aed;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cb-caption-copy:hover {
    background: #6d28d9;
}

.bbhg-cb-caption-text {
    padding: 16px;
    font-size: 14px;
    color: #374151;
    line-height: 1.7;
    white-space: pre-wrap;
}

/* Tips Section */
.bbhg-cb-tips {
    padding: 16px 20px;
    background: #f5f3ff;
    border-top: 1px solid #e9d5ff;
}

.bbhg-cb-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6d28d9;
    margin-bottom: 8px;
}

.bbhg-cb-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #7c3aed;
}

.bbhg-cb-tips-list li {
    margin-bottom: 4px;
}

.bbhg-cb-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-cb-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-cb-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-cb-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-cb-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-cb-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-cb-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f5f3ff;
    border-radius: 20px;
    font-size: 13px;
    color: #6d28d9;
}

.bbhg-cb-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-cb-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-cb-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-cb-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-cb-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-cb-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cb-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.bbhg-cb-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-cb-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-cb-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-cb-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-cb-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-cb-settings-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .bbhg-cb-style-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-cb-slides-container {
        grid-template-columns: 1fr;
    }
    
    .bbhg-cb-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-cb-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
}
/* ==================== END CAROUSEL BUILDER STYLES ==================== */

/* ==================== CONTENT PILLARS GENERATOR STYLES ==================== */
.bbhg-cpg-container {
    padding: 0;
}

.bbhg-cpg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #047857 0%, #059669 50%, #10b981 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-cpg-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-cpg-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-cpg-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-cpg-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-cpg-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-cpg-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-cpg-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-cpg-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-cpg-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-cpg-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Search Section */
.bbhg-cpg-search-section {
    margin-bottom: 24px;
}

.bbhg-cpg-input-group {
    margin-bottom: 16px;
}

.bbhg-cpg-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.bbhg-cpg-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-cpg-input-container {
    flex: 1;
    position: relative;
}

.bbhg-cpg-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
}

.bbhg-cpg-input-icon svg {
    width: 20px;
    height: 20px;
    stroke: #9ca3af;
}

.bbhg-cpg-input {
    width: 100%;
    padding: 14px 14px 14px 48px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-cpg-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.bbhg-cpg-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-cpg-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(5, 150, 105, 0.4);
}

.bbhg-cpg-search-btn:active {
    transform: translateY(0);
}

.bbhg-cpg-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-cpg-search-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-cpg-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
}

.bbhg-cpg-quick-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-cpg-topic-pill {
    padding: 8px 14px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cpg-topic-pill:hover {
    border-color: #10b981;
    background: #ecfdf5;
    color: #047857;
}

/* Settings Row */
.bbhg-cpg-settings-row {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
}

.bbhg-cpg-setting {
    flex: 1;
}

.bbhg-cpg-count-pills,
.bbhg-cpg-ideas-pills {
    display: flex;
    gap: 8px;
}

.bbhg-cpg-count-pill,
.bbhg-cpg-ideas-pill {
    padding: 10px 18px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cpg-count-pill:hover,
.bbhg-cpg-ideas-pill:hover {
    border-color: #10b981;
    background: #ecfdf5;
}

.bbhg-cpg-count-pill.active,
.bbhg-cpg-ideas-pill.active {
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    border-color: transparent;
    color: white !important;
}

/* Loading State */
.bbhg-cpg-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-cpg-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-cpg-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: bbhg-cpg-spin 1s linear infinite;
}

@keyframes bbhg-cpg-spin {
    to { transform: rotate(360deg); }
}

.bbhg-cpg-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-cpg-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-cpg-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-cpg-loading-title {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-cpg-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-cpg-loading-bar {
    width: 200px;
    height: 4px;
    background: #d1fae5;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-cpg-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #047857, #10b981);
    border-radius: 2px;
    animation: bbhg-cpg-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-cpg-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 50%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-cpg-results {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.bbhg-cpg-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    color: white;
}

.bbhg-cpg-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-cpg-results-icon {
    font-size: 20px;
}

.bbhg-cpg-results-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.bbhg-cpg-results-count {
    background: rgba(255,255,255,0.2);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
}

.bbhg-cpg-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-cpg-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #047857 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cpg-action-btn:hover {
    background: #ffffff;
    transform: translateY(-1px);
}

.bbhg-cpg-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: #047857;
}

.bbhg-cpg-action-btn span {
    color: #047857 !important;
}

/* Strategy Overview */
.bbhg-cpg-overview {
    padding: 20px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
}

.bbhg-cpg-overview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bbhg-cpg-overview-item {
    text-align: center;
    padding: 16px;
    background: #ecfdf5;
    border-radius: 10px;
    border: 1px solid #a7f3d0;
}

.bbhg-cpg-overview-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.bbhg-cpg-overview-value {
    font-size: 20px;
    font-weight: 700;
    color: #047857;
    margin-bottom: 4px;
}

.bbhg-cpg-overview-label {
    font-size: 12px;
    color: #059669;
}

/* Pillars Container */
.bbhg-cpg-pillars-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bbhg-cpg-pillar-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bbhg-cpg-pillar-card:hover {
    border-color: #6ee7b7;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.bbhg-cpg-pillar-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-bottom: 1px solid #a7f3d0;
    cursor: pointer;
}

.bbhg-cpg-pillar-number {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    color: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.bbhg-cpg-pillar-info {
    flex: 1;
}

.bbhg-cpg-pillar-name {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 4px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-cpg-pillar-emoji {
    font-size: 18px;
}

.bbhg-cpg-pillar-description {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

.bbhg-cpg-pillar-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-cpg-pillar-count {
    padding: 4px 10px;
    background: #047857;
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.bbhg-cpg-pillar-copy {
    padding: 6px 12px;
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 6px;
    font-size: 12px;
    color: #047857;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cpg-pillar-copy:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.bbhg-cpg-pillar-toggle {
    width: 32px;
    height: 32px;
    background: white;
    border: 1px solid #d1fae5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cpg-pillar-toggle:hover {
    background: #ecfdf5;
}

.bbhg-cpg-pillar-toggle svg {
    width: 16px;
    height: 16px;
    stroke: #047857;
    transition: transform 0.2s ease;
}

.bbhg-cpg-pillar-card.expanded .bbhg-cpg-pillar-toggle svg {
    transform: rotate(180deg);
}

.bbhg-cpg-pillar-body {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.bbhg-cpg-pillar-card.expanded .bbhg-cpg-pillar-body {
    padding: 16px 20px;
    max-height: 2000px;
}

.bbhg-cpg-ideas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.bbhg-cpg-idea-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.bbhg-cpg-idea-card:hover {
    background: #ecfdf5;
    border-color: #6ee7b7;
}

.bbhg-cpg-idea-num {
    width: 24px;
    height: 24px;
    background: #d1fae5;
    color: #047857;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.bbhg-cpg-idea-content {
    flex: 1;
}

.bbhg-cpg-idea-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
    line-height: 1.4;
}

.bbhg-cpg-idea-format {
    display: inline-block;
    padding: 2px 8px;
    background: #a7f3d0;
    color: #047857;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.bbhg-cpg-idea-copy {
    padding: 4px 8px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbhg-cpg-idea-copy:hover {
    color: #047857;
}

/* Tips Section */
.bbhg-cpg-tips {
    padding: 16px 20px;
    background: #ecfdf5;
    border-top: 1px solid #a7f3d0;
}

.bbhg-cpg-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #047857;
    margin-bottom: 8px;
}

.bbhg-cpg-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #059669;
}

.bbhg-cpg-tips-list li {
    margin-bottom: 4px;
}

.bbhg-cpg-tips-list li:last-child {
    margin-bottom: 0;
}

/* Empty State */
.bbhg-cpg-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-cpg-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-cpg-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-cpg-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-cpg-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-cpg-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #ecfdf5;
    border-radius: 20px;
    font-size: 13px;
    color: #047857;
}

.bbhg-cpg-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-cpg-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-cpg-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-cpg-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-cpg-error p {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}

.bbhg-cpg-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #047857 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cpg-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.bbhg-cpg-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-cpg-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-cpg-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-cpg-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-cpg-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-cpg-settings-row {
        flex-direction: column;
        gap: 16px;
    }
    
    .bbhg-cpg-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-cpg-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-cpg-results-actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .bbhg-cpg-pillar-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-cpg-pillar-meta {
        width: 100%;
        justify-content: space-between;
    }
    
    .bbhg-cpg-ideas-grid {
        grid-template-columns: 1fr;
    }
}
/* ==================== END CONTENT PILLARS GENERATOR STYLES ==================== */

/* ==================== CREATOR STATS CARD STYLES ==================== */
.bbhg-csc-container {
    padding: 0;
}

.bbhg-csc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 50%, #8b5cf6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-csc-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-csc-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-csc-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-csc-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-csc-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-csc-icon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-csc-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-csc-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.bbhg-csc-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.bbhg-csc-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white;
    position: relative;
    z-index: 1;
}

/* Main Layout */
.bbhg-csc-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.bbhg-csc-section-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Input Section */
.bbhg-csc-input-section {
    background: #f8fafc;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.bbhg-csc-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-csc-form-row {
    display: flex;
    gap: 12px;
}

.bbhg-csc-form-group {
    flex: 1;
}

.bbhg-csc-form-group-full {
    flex: 1 0 100%;
}

.bbhg-csc-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 6px;
}

.bbhg-csc-input,
.bbhg-csc-select {
    width: 100%;
    padding: 12px 14px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    transition: all 0.2s ease;
}

.bbhg-csc-input:focus,
.bbhg-csc-select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.bbhg-csc-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.bbhg-csc-stat-input {
    display: flex;
    flex-direction: column;
}

/* Style Grid */
.bbhg-csc-style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.bbhg-csc-style-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-csc-style-btn:hover {
    border-color: #6366f1;
}

.bbhg-csc-style-btn.active {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.bbhg-csc-style-preview {
    width: 100%;
    height: 40px;
    border-radius: 6px;
}

.bbhg-csc-style-btn span {
    font-size: 11px;
    font-weight: 500;
    color: #6b7280;
}

/* Generate Button */
.bbhg-csc-generate-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    border: none;
    border-radius: 10px;
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-csc-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
}

.bbhg-csc-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-csc-generate-btn span {
    color: white !important;
}

/* Preview Section */
.bbhg-csc-preview-section {
    display: flex;
    flex-direction: column;
}

.bbhg-csc-preview-container {
    background: #f1f5f9;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    margin-bottom: 16px;
}

/* The Card Itself */
.bbhg-csc-card {
    width: 340px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    position: relative;
}

.bbhg-csc-card[data-style="gradient-blue"] {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
}

.bbhg-csc-card[data-style="gradient-purple"] {
    background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

.bbhg-csc-card[data-style="gradient-green"] {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
}

.bbhg-csc-card[data-style="gradient-fire"] {
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
}

.bbhg-csc-card[data-style="gradient-gold"] {
    background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
}

.bbhg-csc-card[data-style="dark"] {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.bbhg-csc-card[data-style="light"] {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.bbhg-csc-card[data-style="neon"] {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    border: 2px solid #a855f7;
}

.bbhg-csc-card-inner {
    padding: 28px 24px;
    position: relative;
    z-index: 1;
}

.bbhg-csc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at top right, rgba(255,255,255,0.15) 0%, transparent 50%);
    z-index: 0;
}

/* Card Header */
.bbhg-csc-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
}

.bbhg-csc-card-avatar {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: 3px solid rgba(255, 255, 255, 0.3);
}

.bbhg-csc-card-identity {
    flex: 1;
}

.bbhg-csc-card-name {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bbhg-csc-card-handle {
    margin: 2px 0 0 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85);
}

.bbhg-csc-card-platform {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

/* Light theme adjustments */
.bbhg-csc-card[data-style="light"] .bbhg-csc-card-name {
    color: #1f2937;
    text-shadow: none;
}

.bbhg-csc-card[data-style="light"] .bbhg-csc-card-handle,
.bbhg-csc-card[data-style="light"] .bbhg-csc-card-niche {
    color: #6b7280;
}

.bbhg-csc-card[data-style="light"] .bbhg-csc-card-avatar,
.bbhg-csc-card[data-style="light"] .bbhg-csc-card-platform {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.1);
}

.bbhg-csc-card[data-style="light"] .bbhg-csc-card-stat-value {
    color: #1f2937;
}

.bbhg-csc-card[data-style="light"] .bbhg-csc-card-stat-label {
    color: #6b7280;
}

.bbhg-csc-card[data-style="light"] .bbhg-csc-card-footer {
    border-top-color: rgba(0, 0, 0, 0.1);
    color: #9ca3af;
}

/* Card Niche */
.bbhg-csc-card-niche {
    text-align: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 20px;
    display: inline-block;
    width: 100%;
}

/* Card Stats */
.bbhg-csc-card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-csc-card-stat {
    text-align: center;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
}

.bbhg-csc-card-stat-value {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}

.bbhg-csc-card-stat-label {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card Achievement */
.bbhg-csc-card-achievement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 10px;
    margin-bottom: 16px;
}

.bbhg-csc-card-achievement-icon {
    font-size: 16px;
}

.bbhg-csc-card-achievement-text {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

/* Card Footer */
.bbhg-csc-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.bbhg-csc-card-brand {
    font-weight: 500;
}

/* Action Buttons */
.bbhg-csc-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.bbhg-csc-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-csc-action-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
}

.bbhg-csc-action-btn svg {
    width: 18px;
    height: 18px;
}

.bbhg-csc-download-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-csc-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    border-color: transparent;
    color: white !important;
}

.bbhg-csc-download-btn svg {
    stroke: white;
}

.bbhg-csc-download-btn span {
    color: white !important;
}

/* Tips */
.bbhg-csc-tips {
    background: #f0f9ff;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid #bae6fd;
}

.bbhg-csc-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #0369a1;
    margin-bottom: 8px;
}

.bbhg-csc-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #0c4a6e;
}

.bbhg-csc-tips-list li {
    margin-bottom: 4px;
}

.bbhg-csc-tips-list li:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .bbhg-csc-main {
        grid-template-columns: 1fr;
    }
    
    .bbhg-csc-preview-container {
        padding: 16px;
    }
    
    .bbhg-csc-card {
        width: 100%;
        max-width: 340px;
    }
}

@media (max-width: 600px) {
    .bbhg-csc-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-csc-form-row {
        flex-direction: column;
    }
    
    .bbhg-csc-style-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-csc-actions {
        flex-direction: column;
    }
}
/* Photo Upload Section */
.bbhg-csc-photo-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.bbhg-csc-photo-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.bbhg-csc-photo-preview {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 3px solid #e2e8f0;
    position: relative;
}

.bbhg-csc-photo-emoji {
    font-size: 36px;
}

.bbhg-csc-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-csc-photo-controls {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-csc-photo-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%);
    color: white;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-csc-photo-upload-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.bbhg-csc-photo-upload-btn svg {
    stroke: white;
}

.bbhg-csc-photo-remove-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #fee2e2;
    color: #dc2626;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-csc-photo-remove-btn:hover {
    background: #fecaca;
}

.bbhg-csc-emoji-picker {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-csc-emoji-label {
    font-size: 12px;
    color: #6b7280;
}

.bbhg-csc-emoji-options {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bbhg-csc-emoji-btn {
    width: 36px;
    height: 36px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    background: white;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-csc-emoji-btn:hover {
    border-color: #6366f1;
    transform: scale(1.1);
}

.bbhg-csc-emoji-btn.active {
    border-color: #6366f1;
    background: #eef2ff;
}

@media (max-width: 600px) {
    .bbhg-csc-photo-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-csc-photo-controls {
        flex-direction: row;
    }
}
/* ==================== END CREATOR STATS CARD STYLES ==================== */

/* ==================== COLLABORATION MATCHMAKER STYLES ==================== */
.bbhg-cm-container {
    padding: 0;
}

.bbhg-cm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-cm-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-cm-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-cm-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-cm-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-cm-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-cm-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-cm-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-cm-header h2 {
    margin: 0 0 4px 0;
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-cm-subtitle {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
}

.bbhg-cm-header-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-cm-badge-icon {
    font-size: 16px;
}

/* Main Content */
.bbhg-cm-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.bbhg-cm-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin: 0 0 16px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Input Section */
.bbhg-cm-input-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 24px;
}

.bbhg-cm-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-cm-form-row {
    display: flex;
    gap: 16px;
}

.bbhg-cm-form-group {
    flex: 1;
}

.bbhg-cm-form-full {
    flex: 1 0 100%;
}

.bbhg-cm-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 6px;
}

.bbhg-cm-input,
.bbhg-cm-select {
    width: 100%;
    padding: 12px 14px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    color: var(--bbhg-gray-900);
    transition: all 0.2s ease;
}

.bbhg-cm-input:focus,
.bbhg-cm-select:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-cm-input::placeholder {
    color: var(--bbhg-gray-400);
}

/* Goals Grid */
.bbhg-cm-goals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.bbhg-cm-goal-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cm-goal-checkbox:hover {
    border-color: #8b5cf6;
}

.bbhg-cm-goal-checkbox:has(input:checked) {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.1);
}

.bbhg-cm-goal-checkbox input {
    accent-color: #8b5cf6;
}

/* Quick Niche Pills */
.bbhg-cm-quick-niches {
    margin-bottom: 20px;
}

.bbhg-cm-quick-label {
    display: block;
    font-size: 13px;
    color: var(--bbhg-gray-500);
    margin-bottom: 10px;
}

.bbhg-cm-niche-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-cm-niche-pill {
    padding: 8px 14px;
    background: white;
    border: 2px solid rgba(139, 92, 246, 0.3);
    border-radius: 20px;
    font-size: 13px;
    color: #8b5cf6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cm-niche-pill:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: #8b5cf6;
    transform: translateY(-1px);
}

/* Generate Button - Purple gradient with white text */
.bbhg-cm-generate-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border: none;
    border-radius: 12px;
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bbhg-cm-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.4);
}

.bbhg-cm-generate-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.bbhg-cm-generate-btn svg {
    width: 22px;
    height: 22px;
    stroke: white !important;
}

.bbhg-cm-generate-btn span {
    color: white !important;
}

/* Results Section */
.bbhg-cm-results-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
}

.bbhg-cm-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Partner Card */
.bbhg-cm-partner-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.2s ease;
}

.bbhg-cm-partner-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
}

.bbhg-cm-partner-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.bbhg-cm-partner-avatar {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.bbhg-cm-partner-info h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-cm-partner-info p {
    margin: 0;
    font-size: 13px;
    color: var(--bbhg-gray-500);
}

.bbhg-cm-partner-match {
    margin-left: auto;
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: white !important;
}

.bbhg-cm-partner-desc {
    font-size: 13px;
    color: var(--bbhg-gray-600);
    line-height: 1.5;
    margin-bottom: 14px;
}

.bbhg-cm-partner-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 14px;
}

.bbhg-cm-partner-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--bbhg-gray-500);
}

.bbhg-cm-partner-stat strong {
    color: var(--bbhg-gray-700);
}

.bbhg-cm-partner-why {
    padding: 12px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 10px;
    font-size: 12px;
    color: #6d28d9;
}

.bbhg-cm-partner-why strong {
    display: block;
    margin-bottom: 4px;
}

.bbhg-cm-partner-actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
}

.bbhg-cm-partner-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cm-partner-btn-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    color: white !important;
}

.bbhg-cm-partner-btn-primary svg {
    stroke: white !important;
}

.bbhg-cm-partner-btn-primary span {
    color: white !important;
}

.bbhg-cm-partner-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-cm-partner-btn-secondary {
    background: white;
    border: 2px solid rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

.bbhg-cm-partner-btn-secondary:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

/* Pitch Section */
.bbhg-cm-pitch-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.bbhg-cm-pitches {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-cm-pitch-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 18px;
}

.bbhg-cm-pitch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-cm-pitch-type {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-cm-pitch-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 6px;
    font-size: 12px;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cm-pitch-copy-btn svg {
    stroke: white !important;
}

.bbhg-cm-pitch-copy-btn span {
    color: white !important;
}

.bbhg-cm-pitch-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-cm-pitch-text {
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
    white-space: pre-wrap;
}

/* Ideas Section */
.bbhg-cm-ideas-section {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.bbhg-cm-ideas-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.bbhg-cm-idea-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}

.bbhg-cm-idea-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-cm-idea-content h5 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-cm-idea-content p {
    margin: 0;
    font-size: 12px;
    color: var(--bbhg-gray-500);
}

/* Loading State */
.bbhg-cm-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-cm-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-cm-spin 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes bbhg-cm-spin {
    to { transform: rotate(360deg); }
}

.bbhg-cm-loading p {
    font-size: 15px;
    color: var(--bbhg-gray-600);
}

/* Tips */
.bbhg-cm-tips {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(99, 102, 241, 0.08) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 12px;
    padding: 18px;
}

.bbhg-cm-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6d28d9;
    margin-bottom: 12px;
}

.bbhg-cm-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #5b21b6;
    line-height: 1.6;
}

.bbhg-cm-tips-list li {
    margin-bottom: 6px;
}

.bbhg-cm-tips-list li:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .bbhg-cm-results-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-cm-ideas-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .bbhg-cm-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-cm-form-row {
        flex-direction: column;
    }
    
    .bbhg-cm-goals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-cm-partner-actions {
        flex-direction: column;
    }
}
/* ==================== END COLLABORATION MATCHMAKER STYLES ==================== */

/* ==================== COMMENT REPLY GENERATOR STYLES ==================== */

.bbhg-rg-container {
    padding: 0;
    min-height: 500px;
}

.bbhg-rg-header {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 50%, #be123c 100%);
    padding: 28px 28px;
    border-radius: var(--bbhg-radius-lg) var(--bbhg-radius-lg) 0 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bbhg-rg-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    animation: bbhg-rg-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-rg-shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.bbhg-rg-header-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-rg-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-rg-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-rg-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-rg-title-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
}

.bbhg-rg-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    margin: 0;
}

.bbhg-rg-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 8px 14px;
    border-radius: 50px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.bbhg-rg-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-rg-status .bbhg-status-text {
    color: white !important;
    font-size: 13px;
    font-weight: 500;
}

/* Input Section */
.bbhg-rg-input-section {
    padding: 24px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.bbhg-rg-input-group {
    margin-bottom: 20px;
}

.bbhg-rg-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    margin-bottom: 10px;
}

.bbhg-rg-optional {
    font-weight: 400;
    color: #94a3b8;
}

.bbhg-rg-textarea-wrap {
    position: relative;
}

.bbhg-rg-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.bbhg-rg-textarea:focus {
    outline: none;
    border-color: #f43f5e;
    box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
}

.bbhg-rg-textarea::placeholder {
    color: #94a3b8;
}

/* Type, Platform, Tone Pills */
.bbhg-rg-type-group,
.bbhg-rg-platform-group,
.bbhg-rg-tone-group {
    margin-bottom: 20px;
}

.bbhg-rg-type-pills,
.bbhg-rg-platform-pills,
.bbhg-rg-tone-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-rg-type-pill,
.bbhg-rg-platform-pill,
.bbhg-rg-tone-pill {
    padding: 10px 16px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rg-type-pill:hover,
.bbhg-rg-platform-pill:hover,
.bbhg-rg-tone-pill:hover {
    border-color: #f43f5e;
    color: #f43f5e;
}

.bbhg-rg-type-pill.active,
.bbhg-rg-platform-pill.active,
.bbhg-rg-tone-pill.active {
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    border-color: transparent;
    color: white !important;
}

/* Options Checkboxes */
.bbhg-rg-options-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-rg-option-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
}

.bbhg-rg-option-check input {
    width: 18px;
    height: 18px;
    accent-color: #f43f5e;
    cursor: pointer;
}

/* Generate Button */
.bbhg-rg-action-wrap {
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.bbhg-rg-generate-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 32px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.3);
}

.bbhg-rg-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.4);
}

.bbhg-rg-generate-btn:active {
    transform: translateY(0);
}

.bbhg-rg-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white !important;
}

.bbhg-rg-generate-btn span {
    color: white !important;
}

.bbhg-rg-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Loading State */
.bbhg-rg-loading {
    padding: 60px 24px;
    text-align: center;
}

.bbhg-rg-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-rg-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid #e2e8f0;
    border-top-color: #f43f5e;
    border-radius: 50%;
    animation: bbhg-rg-spin 1s linear infinite;
}

@keyframes bbhg-rg-spin {
    to { transform: rotate(360deg); }
}

.bbhg-rg-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-rg-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-rg-bounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-rg-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.bbhg-rg-loading-text {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
}

.bbhg-rg-loading-bar {
    width: 200px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-rg-loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #f43f5e, #e11d48);
    border-radius: 3px;
    width: 0%;
    animation: bbhg-rg-progress 3s ease-in-out infinite;
}

@keyframes bbhg-rg-progress {
    0% { width: 0%; }
    50% { width: 80%; }
    100% { width: 100%; }
}

/* Results Section */
.bbhg-rg-results {
    padding: 24px;
}

.bbhg-rg-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-rg-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-rg-results-icon {
    font-size: 24px;
}

.bbhg-rg-results-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.bbhg-rg-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-rg-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rg-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.bbhg-rg-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-rg-action-btn span {
    color: white !important;
}

.bbhg-rg-action-btn.bbhg-rg-new-btn {
    background: #f1f5f9;
    color: #64748b !important;
}

.bbhg-rg-action-btn.bbhg-rg-new-btn span {
    color: #64748b !important;
}

.bbhg-rg-action-btn.bbhg-rg-new-btn svg {
    stroke: #64748b !important;
}

.bbhg-rg-action-btn.bbhg-rg-new-btn:hover {
    background: #e2e8f0;
}

/* Original Comment Display */
.bbhg-rg-original-comment {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--bbhg-radius);
    padding: 16px;
    margin-bottom: 20px;
}

.bbhg-rg-original-label {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-rg-original-text {
    font-size: 15px;
    color: #334155;
    font-style: italic;
    line-height: 1.6;
}

/* Replies Grid */
.bbhg-rg-replies-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-rg-reply-card {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-rg-reply-card:hover {
    border-color: #f43f5e;
    box-shadow: 0 4px 20px rgba(244, 63, 94, 0.1);
}

.bbhg-rg-reply-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fef2f2 0%, #fff1f2 100%);
    border-bottom: 1px solid #fecdd3;
}

.bbhg-rg-reply-label {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-rg-reply-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 50%;
}

.bbhg-rg-reply-type {
    font-size: 13px;
    font-weight: 500;
    color: #be123c;
}

.bbhg-rg-reply-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
    border: none;
    border-radius: 6px;
    color: white !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rg-reply-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.3);
}

.bbhg-rg-reply-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: white !important;
}

.bbhg-rg-reply-copy-btn span {
    color: white !important;
}

.bbhg-rg-reply-copy-btn.copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bbhg-rg-reply-content {
    padding: 16px;
}

.bbhg-rg-reply-text {
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
}

/* Empty State */
.bbhg-rg-empty {
    padding: 50px 24px;
    text-align: center;
}

.bbhg-rg-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    animation: bbhg-rg-float 3s ease-in-out infinite;
}

@keyframes bbhg-rg-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bbhg-rg-empty h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 10px 0;
}

.bbhg-rg-empty p {
    font-size: 15px;
    color: #64748b;
    margin: 0 0 24px 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-rg-tips {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
    margin: 0 auto;
}

.bbhg-rg-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(244, 63, 94, 0.08);
    border-radius: 10px;
    text-align: left;
}

.bbhg-rg-tip-icon {
    font-size: 18px;
}

.bbhg-rg-tip-text {
    font-size: 13px;
    color: #475569;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .bbhg-rg-header {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-rg-title-section h2 {
        font-size: 18px;
    }
    
    .bbhg-rg-subtitle {
        font-size: 13px;
    }
    
    .bbhg-rg-input-section {
        padding: 16px;
    }
    
    .bbhg-rg-options-group {
        flex-direction: column;
        gap: 12px;
    }
    
    .bbhg-rg-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-rg-results-actions {
        width: 100%;
    }
    
    .bbhg-rg-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* Dark Mode */
[data-theme="dark"] .bbhg-rg-input-section {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
}

[data-theme="dark"] .bbhg-rg-textarea {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rg-textarea:focus {
    background: var(--bbhg-gray-800);
}

[data-theme="dark"] .bbhg-rg-label {
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-rg-type-pill,
[data-theme="dark"] .bbhg-rg-platform-pill,
[data-theme="dark"] .bbhg-rg-tone-pill {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-rg-option-check {
    color: var(--bbhg-gray-300);
}

[data-theme="dark"] .bbhg-rg-results {
    background: var(--bbhg-gray-800);
}

[data-theme="dark"] .bbhg-rg-results-title h3 {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rg-original-comment {
    background: var(--bbhg-gray-700);
    border-color: #1f2937;
}

[data-theme="dark"] .bbhg-rg-original-text {
    color: var(--bbhg-gray-200);
}

[data-theme="dark"] .bbhg-rg-reply-card {
    background: var(--bbhg-gray-800);
    border-color: var(--bbhg-gray-700);
}

[data-theme="dark"] .bbhg-rg-reply-header {
    background: rgba(244, 63, 94, 0.1);
    border-color: #1f2937;
}

[data-theme="dark"] .bbhg-rg-reply-text {
    color: var(--bbhg-gray-200);
}

[data-theme="dark"] .bbhg-rg-loading-title {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rg-loading-text {
    color: #374151;
}

[data-theme="dark"] .bbhg-rg-empty h3 {
    color: var(--bbhg-gray-100);
}

[data-theme="dark"] .bbhg-rg-empty p {
    color: #374151;
}

[data-theme="dark"] .bbhg-rg-tip {
    background: rgba(244, 63, 94, 0.15);
}

[data-theme="dark"] .bbhg-rg-tip-text {
    color: var(--bbhg-gray-300);
}

/* ================================
   ASCII Art Generator Buttons Fix
   ================================ */
#bbhg-asciiart-output-section button,
.bbhg-modal #bbhg-asciiart-output-section button,
#bbhg-panel-asciiart #bbhg-asciiart-output-section button {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

#bbhg-asciiart-copy,
.bbhg-modal #bbhg-asciiart-copy,
#bbhg-panel-asciiart #bbhg-asciiart-copy {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#bbhg-asciiart-copy:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

#bbhg-asciiart-copy span,
#bbhg-asciiart-copy svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#bbhg-asciiart-download,
.bbhg-modal #bbhg-asciiart-download,
#bbhg-panel-asciiart #bbhg-asciiart-download {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#bbhg-asciiart-download:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

#bbhg-asciiart-download span,
#bbhg-asciiart-download svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

#bbhg-asciiart-clear,
.bbhg-modal #bbhg-asciiart-clear,
#bbhg-panel-asciiart #bbhg-asciiart-clear {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ffffff !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

#bbhg-asciiart-clear:hover {
    background: rgba(239, 68, 68, 0.35) !important;
}

#bbhg-asciiart-clear span,
#bbhg-asciiart-clear svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Generate button styling */
#bbhg-asciiart-generate,
.bbhg-modal #bbhg-asciiart-generate,
#bbhg-panel-asciiart #bbhg-asciiart-generate {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 32px !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.4) !important;
}

#bbhg-asciiart-generate:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(139, 92, 246, 0.5) !important;
}

#bbhg-asciiart-generate span,
#bbhg-asciiart-generate svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Style buttons - ensure proper theming */
.bbhg-asciiart-style-btn,
.bbhg-modal .bbhg-asciiart-style-btn,
#bbhg-panel-asciiart .bbhg-asciiart-style-btn {
    padding: 14px 16px !important;
    border: 2px solid var(--bbhg-border, #e5e7eb) !important;
    background: var(--bbhg-card-bg, #ffffff) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    color: var(--bbhg-text, #1f2937) !important;
}

.bbhg-asciiart-style-btn.active,
.bbhg-modal .bbhg-asciiart-style-btn.active,
#bbhg-panel-asciiart .bbhg-asciiart-style-btn.active {
    border-color: #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(168, 85, 247, 0.05)) !important;
}

.bbhg-asciiart-style-btn:hover:not(.active) {
    border-color: rgba(139, 92, 246, 0.5) !important;
    background: rgba(139, 92, 246, 0.05) !important;
}

/* Dark mode support for style buttons */
[data-theme="dark"] .bbhg-asciiart-style-btn {
    background: var(--bbhg-card-bg, #1f2937) !important;
    border-color: var(--bbhg-border, #374151) !important;
    color: var(--bbhg-text, #f3f4f6) !important;
}

[data-theme="dark"] .bbhg-asciiart-style-btn.active {
    border-color: #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(168, 85, 247, 0.1)) !important;
}

/* ================================
   Emoji Picker Styles
   ================================ */

/* Main container */
.bbhg-emojipicker-container {
    padding: 4px;
}

/* Category scroll container */
.bbhg-emoji-categories-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.bbhg-emoji-categories-scroll::-webkit-scrollbar {
    height: 6px;
}

.bbhg-emoji-categories-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.bbhg-emoji-categories-scroll::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

/* Category buttons - ensure white text when active */
.bbhg-emoji-category-btn,
.bbhg-modal .bbhg-emoji-category-btn,
#bbhg-panel-emojipicker .bbhg-emoji-category-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s !important;
}

.bbhg-emoji-category-btn.active,
.bbhg-modal .bbhg-emoji-category-btn.active,
#bbhg-panel-emojipicker .bbhg-emoji-category-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: #ffffff !important;
    border: none !important;
}

.bbhg-emoji-category-btn.active span,
.bbhg-modal .bbhg-emoji-category-btn.active span {
    color: #ffffff !important;
}

.bbhg-emoji-category-btn:not(.active) {
    background: var(--bbhg-card-bg, #ffffff) !important;
    color: var(--bbhg-text, #1f2937) !important;
    border: 2px solid var(--bbhg-border, #e5e7eb) !important;
}

.bbhg-emoji-category-btn:not(.active):hover {
    border-color: rgba(139, 92, 246, 0.5) !important;
    background: rgba(139, 92, 246, 0.05) !important;
}

/* Action buttons - Copy */
#bbhg-emoji-copy,
.bbhg-modal #bbhg-emoji-copy,
#bbhg-panel-emojipicker #bbhg-emoji-copy {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.3) !important;
    transition: all 0.3s !important;
}

#bbhg-emoji-copy:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4) !important;
}

#bbhg-emoji-copy span,
#bbhg-emoji-copy svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Action buttons - Clear */
#bbhg-emoji-clear,
.bbhg-modal #bbhg-emoji-clear,
#bbhg-panel-emojipicker #bbhg-emoji-clear {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.3s !important;
}

#bbhg-emoji-clear:hover {
    background: rgba(239, 68, 68, 0.25) !important;
}

#bbhg-emoji-clear span {
    color: #ef4444 !important;
}

#bbhg-emoji-clear svg {
    stroke: #ef4444 !important;
}

/* Emoji grid items */
.bbhg-emoji-item {
    font-size: 32px !important;
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    transition: all 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.bbhg-emoji-item:hover {
    background: rgba(139, 92, 246, 0.1) !important;
    transform: scale(1.15);
}

.bbhg-emoji-item:active {
    transform: scale(1.3);
}

/* Combo buttons */
.bbhg-emoji-combo-btn,
.bbhg-modal .bbhg-emoji-combo-btn,
#bbhg-panel-emojipicker .bbhg-emoji-combo-btn {
    padding: 8px 14px !important;
    background: var(--bbhg-card-bg, #ffffff) !important;
    border: 1px solid var(--bbhg-border, #e5e7eb) !important;
    border-radius: 8px !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.bbhg-emoji-combo-btn:hover {
    border-color: #8b5cf6 !important;
    background: rgba(139, 92, 246, 0.1) !important;
    transform: scale(1.05);
}

/* Search input focus */
#bbhg-emoji-search:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
    outline: none !important;
}

/* Size selector */
#bbhg-emoji-size {
    padding: 8px 12px !important;
    border: 2px solid var(--bbhg-border, #e5e7eb) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: var(--bbhg-card-bg, #ffffff) !important;
    color: var(--bbhg-text, #1f2937) !important;
    cursor: pointer !important;
}

#bbhg-emoji-size:focus {
    border-color: #8b5cf6 !important;
    outline: none !important;
}

/* Emoji grid scrollbar */
#bbhg-emoji-grid {
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

#bbhg-emoji-grid::-webkit-scrollbar {
    width: 8px;
}

#bbhg-emoji-grid::-webkit-scrollbar-track {
    background: transparent;
}

#bbhg-emoji-grid::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 4px;
}

#bbhg-emoji-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

/* Dark mode support */
[data-theme="dark"] .bbhg-emoji-category-btn:not(.active) {
    background: var(--bbhg-card-bg, #1f2937) !important;
    border-color: var(--bbhg-border, #374151) !important;
    color: var(--bbhg-text, #f3f4f6) !important;
}

[data-theme="dark"] .bbhg-emoji-combo-btn {
    background: var(--bbhg-card-bg, #1f2937) !important;
    border-color: var(--bbhg-border, #374151) !important;
}

[data-theme="dark"] #bbhg-emoji-search {
    background: var(--bbhg-input-bg, #1f2937) !important;
    border-color: var(--bbhg-border, #374151) !important;
    color: var(--bbhg-text, #f3f4f6) !important;
}

[data-theme="dark"] #bbhg-emoji-size {
    background: var(--bbhg-card-bg, #1f2937) !important;
    border-color: var(--bbhg-border, #374151) !important;
    color: var(--bbhg-text, #f3f4f6) !important;
}

[data-theme="dark"] .bbhg-emoji-item:hover {
    background: rgba(139, 92, 246, 0.2) !important;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .bbhg-emoji-categories-scroll {
        padding-bottom: 12px;
    }
    
    #bbhg-emoji-copy,
    #bbhg-emoji-clear {
        padding: 10px 18px !important;
        font-size: 13px !important;
    }
    
    .bbhg-emoji-combo-btn {
        padding: 6px 10px !important;
        font-size: 16px !important;
    }
}

/* ==================== BIO GENERATOR STYLES ==================== */
.bbhg-biogen-container {
    padding: 0 4px;
}

/* Header Banner - HashMind Purple Gradient */
.bbhg-biogen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
    flex-wrap: wrap;
}

.bbhg-biogen-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-biogen-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-biogen-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-biogen-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-biogen-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-biogen-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-biogen-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-biogen-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-biogen-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-biogen-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-biogen-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-biogen-status .bbhg-status-text {
    color: white !important;
}

/* Section Styling */
.bbhg-biogen-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-biogen-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 14px;
}

.bbhg-biogen-label svg {
    color: #1f2937;
}

/* Platform Selection */
.bbhg-biogen-platforms {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.bbhg-biogen-platforms::-webkit-scrollbar {
    height: 4px;
}

.bbhg-biogen-platforms::-webkit-scrollbar-track {
    background: transparent;
}

.bbhg-biogen-platforms::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 4px;
}

.bbhg-biogen-platform {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    min-width: 90px;
    flex-shrink: 0;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-biogen-platform:hover {
    border-color: var(--bbhg-gray-300);
    background: var(--bbhg-gray-100);
}

.bbhg-biogen-platform.active {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.bbhg-biogen-platform-icon {
    font-size: 22px;
}

.bbhg-biogen-platform-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    white-space: nowrap;
}

.bbhg-biogen-platform-limit {
    font-size: 10px;
    color: #1f2937;
    background: var(--bbhg-gray-200);
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

.bbhg-biogen-platform.active .bbhg-biogen-platform-limit {
    background: rgba(139, 92, 246, 0.2);
    color: #7c3aed;
}

/* Input Fields */
.bbhg-biogen-inputs {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-biogen-input-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-biogen-input-group {
    display: flex;
    flex-direction: column;
}

.bbhg-biogen-input-wrap {
    position: relative;
}

.bbhg-biogen-input,
.bbhg-biogen-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 10px;
    font-size: 14px;
    background: var(--bbhg-gray-50);
    color: var(--bbhg-gray-800);
    transition: all 0.2s ease;
}

.bbhg-biogen-input:focus,
.bbhg-biogen-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.bbhg-biogen-input::placeholder,
.bbhg-biogen-textarea::placeholder {
    color: #374151;
}

.bbhg-biogen-textarea {
    resize: vertical;
    min-height: 80px;
}

/* Tone Selection */
.bbhg-biogen-tones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-biogen-tone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 25px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-biogen-tone:hover {
    border-color: var(--bbhg-gray-300);
    background: var(--bbhg-gray-100);
}

.bbhg-biogen-tone.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-biogen-tone.active span {
    color: white !important;
}

.bbhg-biogen-tone-icon {
    font-size: 16px;
}

/* Options Checkboxes */
.bbhg-biogen-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px 20px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    margin-bottom: 20px;
}

.bbhg-biogen-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--bbhg-gray-700);
}

.bbhg-biogen-checkbox input {
    display: none;
}

.bbhg-biogen-checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--bbhg-gray-300);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    position: relative;
}

.bbhg-biogen-checkbox input:checked + .bbhg-biogen-checkmark {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    border-color: transparent;
}

.bbhg-biogen-checkbox input:checked + .bbhg-biogen-checkmark::after {
    content: '';
    width: 6px;
    height: 10px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
    position: absolute;
    top: 2px;
}

/* Generate Button */
.bbhg-biogen-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.bbhg-biogen-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.35);
}

.bbhg-biogen-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(139, 92, 246, 0.45);
}

.bbhg-biogen-generate-btn:active {
    transform: translateY(0);
}

.bbhg-biogen-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-biogen-generate-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-biogen-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-biogen-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.bbhg-biogen-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-biogen-spin 1s linear infinite;
}

@keyframes bbhg-biogen-spin {
    to { transform: rotate(360deg); }
}

.bbhg-biogen-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-biogen-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-biogen-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-biogen-loading-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-biogen-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

/* Results Section */
.bbhg-biogen-results {
    margin-top: 24px;
}

.bbhg-biogen-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-biogen-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-biogen-results-icon {
    font-size: 24px;
}

.bbhg-biogen-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-biogen-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    color: white !important;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.bbhg-biogen-refresh-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

.bbhg-biogen-refresh-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-biogen-refresh-btn span {
    color: white !important;
}

/* Results Grid */
.bbhg-biogen-results-grid {
    display: grid;
    gap: 16px;
}

/* Bio Card */
.bbhg-biogen-bio-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 20px;
    transition: all 0.2s ease;
}

.bbhg-biogen-bio-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.bbhg-biogen-bio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-biogen-bio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #8b5cf6;
}

.bbhg-biogen-bio-label span:first-child {
    font-size: 16px;
}

.bbhg-biogen-char-count {
    font-size: 12px;
    color: #1f2937;
    background: var(--bbhg-gray-100);
    padding: 4px 10px;
    border-radius: 12px;
}

.bbhg-biogen-char-count.over-limit {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.bbhg-biogen-bio-content {
    font-size: 15px;
    line-height: 1.6;
    color: var(--bbhg-gray-800);
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 10px;
    margin-bottom: 14px;
    word-break: break-word;
}

.bbhg-biogen-bio-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bbhg-biogen-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    color: white !important;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.bbhg-biogen-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

.bbhg-biogen-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-biogen-copy-btn span {
    color: white !important;
}

.bbhg-biogen-copy-btn.copied {
    background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

/* Empty State */
.bbhg-biogen-empty {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 2px dashed var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-biogen-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-biogen-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-biogen-empty p {
    font-size: 14px;
    color: #1f2937;
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-biogen-empty-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-biogen-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 25px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

.bbhg-biogen-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-biogen-error {
    text-align: center;
    padding: 40px 20px;
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-biogen-error-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.bbhg-biogen-error h4 {
    font-size: 18px;
    font-weight: 700;
    color: #ef4444;
    margin: 0 0 8px 0;
}

.bbhg-biogen-error p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 16px 0;
}

.bbhg-biogen-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25);
}

.bbhg-biogen-retry-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.35);
}

.bbhg-biogen-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-biogen-retry-btn span {
    color: white !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .bbhg-biogen-header {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-biogen-title-section {
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-biogen-platforms {
        gap: 8px;
    }
    
    .bbhg-biogen-input-row {
        grid-template-columns: 1fr;
    }
    
    .bbhg-biogen-tones {
        justify-content: center;
    }
    
    .bbhg-biogen-options {
        flex-direction: column;
        gap: 12px;
    }
    
    .bbhg-biogen-generate-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bbhg-biogen-platform {
        min-width: 80px;
        padding: 10px 12px;
    }
    
    .bbhg-biogen-tone {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
    }
}
/* ==================== END BIO GENERATOR STYLES ==================== */

/* ==================== ALIASFORGE STYLES ==================== */
.bbhg-af-container {
    padding: 0;
    max-width: 100%;
}

.bbhg-af-header {
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 50%, #4a1d6e 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.bbhg-af-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent 30%, rgba(236,72,153,0.1) 50%, transparent 70%);
    animation: bbhg-af-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-af-shimmer {
    0%, 100% { transform: translateX(-50%) translateY(-50%) rotate(0deg); }
    50% { transform: translateX(-50%) translateY(-50%) rotate(180deg); }
}

.bbhg-af-header-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(236,72,153,0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(139,92,246,0.3) 0%, transparent 50%);
    pointer-events: none;
}

.bbhg-af-stars {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.5;
    background-image: radial-gradient(2px 2px at 20px 30px, #ec4899, transparent),
                      radial-gradient(2px 2px at 40px 70px, #8b5cf6, transparent),
                      radial-gradient(1px 1px at 90px 40px, #ec4899, transparent),
                      radial-gradient(2px 2px at 130px 80px, #8b5cf6, transparent),
                      radial-gradient(1px 1px at 160px 20px, #ec4899, transparent),
                      radial-gradient(2px 2px at 200px 60px, #8b5cf6, transparent);
    background-size: 200px 100px;
    pointer-events: none;
}

.bbhg-af-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}

.bbhg-af-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 32px rgba(236,72,153,0.4);
}

.bbhg-af-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-af-title-section h2 {
    color: #f9a8d4;
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    text-shadow: 0 0 30px rgba(249,168,212,0.4);
}

.bbhg-af-subtitle {
    color: #c4b5fd;
    margin: 4px 0 0 0;
    font-size: 14px;
    opacity: 0.9;
}

.bbhg-af-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 20px;
    margin-left: auto;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

.bbhg-af-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-af-status .bbhg-status-text {
    color: #e0e7ff;
    font-size: 13px;
    font-weight: 500;
}

.bbhg-af-section {
    margin-bottom: 24px;
}

.bbhg-af-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 12px;
}

.bbhg-af-label svg {
    color: #8b5cf6;
}

/* Category Selection */
.bbhg-af-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.bbhg-af-category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.bbhg-af-category:hover {
    border-color: rgba(236,72,153,0.4);
    background: rgba(236,72,153,0.05);
}

.bbhg-af-category.active {
    border-color: #ec4899;
    background: linear-gradient(135deg, rgba(236,72,153,0.1), rgba(139,92,246,0.1));
    box-shadow: 0 4px 20px rgba(236,72,153,0.2);
}

.bbhg-af-category-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.bbhg-af-category-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 4px;
}

.bbhg-af-category-desc {
    font-size: 12px;
    color: #1f2937;
    line-height: 1.4;
}

/* Genre/Style Selection */
.bbhg-af-genres {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-af-genre {
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(139,92,246,0.7), rgba(236,72,153,0.7));
    border: 1px solid rgba(139,92,246,0.3);
    border-radius: 25px;
    font-size: 13px;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    font-weight: 500;
}

.bbhg-af-genre:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.85), rgba(236,72,153,0.85));
    border-color: rgba(236,72,153,0.5);
    transform: translateY(-1px);
}

.bbhg-af-genre.active {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: transparent;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(236,72,153,0.4);
}

/* Input Fields */
.bbhg-af-inputs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
}

.bbhg-af-input-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.bbhg-af-input-group {
    display: flex;
    flex-direction: column;
}

.bbhg-af-input-wrap {
    position: relative;
}

.bbhg-af-input,
.bbhg-af-textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 10px;
    font-size: 14px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.bbhg-af-input:focus,
.bbhg-af-textarea:focus {
    outline: none;
    border-color: #ec4899;
    background: white;
    box-shadow: 0 0 0 4px rgba(236,72,153,0.1);
}

.bbhg-af-input::placeholder,
.bbhg-af-textarea::placeholder {
    color: #374151;
}

.bbhg-af-textarea {
    resize: vertical;
    min-height: 80px;
}

.bbhg-af-input-hint {
    font-size: 12px;
    color: #1f2937;
    margin-top: 6px;
}

/* Style Preferences */
.bbhg-af-styles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-af-style {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(139,92,246,0.7), rgba(236,72,153,0.7));
    border: 2px solid rgba(139,92,246,0.3);
    border-radius: 10px;
    font-size: 13px;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.bbhg-af-style:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.85), rgba(236,72,153,0.85));
    border-color: rgba(236,72,153,0.5);
    transform: translateY(-1px);
}

.bbhg-af-style.active {
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    border-color: transparent;
    color: white !important;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(139,92,246,0.4);
}

.bbhg-af-style-icon {
    font-size: 16px;
}

/* Options Checkboxes */
.bbhg-af-options {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    margin-bottom: 24px;
}

.bbhg-af-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--bbhg-gray-700);
}

.bbhg-af-checkbox input {
    display: none;
}

.bbhg-af-checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid var(--bbhg-gray-300);
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbhg-af-checkbox input:checked + .bbhg-af-checkmark {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border-color: transparent;
}

.bbhg-af-checkbox input:checked + .bbhg-af-checkmark::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

/* Generate Button */
.bbhg-af-actions {
    text-align: center;
    margin-bottom: 24px;
}

.bbhg-af-generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 40px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white !important;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 30px rgba(236,72,153,0.4);
}

.bbhg-af-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(236,72,153,0.5);
}

.bbhg-af-generate-btn:active {
    transform: translateY(0);
}

.bbhg-af-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-af-generate-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-af-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-af-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-af-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid rgba(236,72,153,0.2);
    border-top-color: #ec4899;
    border-radius: 50%;
    animation: bbhg-af-spin 1s linear infinite;
}

@keyframes bbhg-af-spin {
    to { transform: rotate(360deg); }
}

.bbhg-af-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
    animation: bbhg-af-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-af-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.7; }
}

.bbhg-af-loading-title {
    font-size: 20px;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-af-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

/* Results Section */
.bbhg-af-results {
    animation: bbhg-af-fadeIn 0.5s ease;
}

@keyframes bbhg-af-fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.bbhg-af-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-af-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-af-results-icon {
    font-size: 24px;
}

.bbhg-af-results-title h3 {
    margin: 0;
    font-size: 20px;
    color: var(--bbhg-gray-800);
}

.bbhg-af-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(236,72,153,0.3);
}

.bbhg-af-refresh-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236,72,153,0.4);
}

.bbhg-af-refresh-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-af-refresh-btn span {
    color: white !important;
}

/* Results Grid */
.bbhg-af-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-af-alias-card {
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bbhg-af-alias-card:hover {
    border-color: rgba(236,72,153,0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.bbhg-af-alias-card.featured {
    background: linear-gradient(135deg, rgba(236,72,153,0.1), rgba(139,92,246,0.1));
    border-color: #ec4899;
}

.bbhg-af-alias-card.featured::before {
    content: '⭐ TOP PICK';
    position: absolute;
    top: 12px;
    right: 12px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
}

.bbhg-af-ai-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    animation: bbhg-af-badge-glow 2s ease-in-out infinite;
}

@keyframes bbhg-af-badge-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(6, 182, 212, 0.5); }
    50% { box-shadow: 0 0 15px rgba(139, 92, 246, 0.7); }
}

.bbhg-af-alias-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.bbhg-af-alias-type {
    font-size: 12px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-af-alias-name {
    font-size: 24px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 8px 0;
    word-break: break-word;
}

.bbhg-af-alias-meaning {
    font-size: 13px;
    color: #1f2937;
    margin-bottom: 16px;
    line-height: 1.5;
    font-style: italic;
}

.bbhg-af-alias-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.bbhg-af-alias-tag {
    padding: 4px 10px;
    background: rgba(139,92,246,0.1);
    color: #7c3aed;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

/* Social Handle Preview */
.bbhg-af-handle-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(236,72,153,0.08), rgba(139,92,246,0.08));
    border: 1px solid rgba(139,92,246,0.15);
    border-radius: 10px;
    margin-bottom: 12px;
}

.bbhg-af-handle-label {
    font-size: 12px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-af-handle-text {
    font-size: 14px;
    font-weight: 600;
    color: #8b5cf6;
    font-family: 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
}

.bbhg-af-alias-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-af-copy-btn,
.bbhg-af-copy-handle-btn,
.bbhg-af-favorite-btn {
    flex: 1;
    min-width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-af-copy-btn,
.bbhg-af-copy-handle-btn {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white !important;
    border: none;
}

.bbhg-af-copy-btn:hover,
.bbhg-af-copy-handle-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.bbhg-af-copy-btn svg,
.bbhg-af-copy-handle-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-af-copy-btn span,
.bbhg-af-copy-handle-btn span {
    color: white !important;
}

.bbhg-af-favorite-btn {
    background: var(--bbhg-gray-100);
    color: #1f2937;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-af-favorite-btn:hover {
    background: var(--bbhg-gray-200);
}

/* Hashtags Section */
.bbhg-af-hashtags-section {
    background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(236,72,153,0.05));
    border: 1px solid rgba(139,92,246,0.2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-af-hashtags-header {
    margin-bottom: 20px;
}

.bbhg-af-hashtags-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #7c3aed;
}

.bbhg-af-hashtags-header p {
    margin: 0;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-af-hashtags-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.bbhg-af-hashtag-group {
    background: white;
    border-radius: 12px;
    padding: 16px;
}

.bbhg-af-hashtag-group-title {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 12px;
}

.bbhg-af-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-af-hashtag {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(236,72,153,0.15));
    color: #7c3aed;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.bbhg-af-hashtag:hover {
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white;
    transform: scale(1.05);
}

.bbhg-af-copy-hashtags-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #8b5cf6, #ec4899);
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-af-copy-hashtags-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(139,92,246,0.4);
}

.bbhg-af-copy-hashtags-btn svg {
    stroke: white;
}

.bbhg-af-copy-hashtags-btn span {
    color: white !important;
}

/* Tips Section */
.bbhg-af-tips-section {
    background: var(--bbhg-gray-50);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-af-tips-section h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--bbhg-gray-800);
}

.bbhg-af-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-af-tip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-af-tip-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.bbhg-af-tip-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.4;
}

/* Empty State */
.bbhg-af-empty {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, rgba(236,72,153,0.05), rgba(139,92,246,0.05));
    border-radius: 16px;
    margin-top: 20px;
}

.bbhg-af-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: bbhg-af-float 3s ease-in-out infinite;
}

@keyframes bbhg-af-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bbhg-af-empty h3 {
    font-size: 24px;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-af-empty p {
    font-size: 15px;
    color: #1f2937;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-af-empty-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-af-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: white;
    border-radius: 25px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.bbhg-af-feature-icon {
    font-size: 18px;
}

.bbhg-af-feature span:last-child {
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

/* Error State */
.bbhg-af-error {
    text-align: center;
    padding: 40px 20px;
    background: rgba(239,68,68,0.05);
    border-radius: 16px;
    border: 1px solid rgba(239,68,68,0.2);
}

.bbhg-af-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-af-error h4 {
    font-size: 18px;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-af-error p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.bbhg-af-retry-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ec4899, #8b5cf6);
    color: white !important;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-af-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(236,72,153,0.4);
}

.bbhg-af-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-af-retry-btn span {
    color: white !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-af-header {
        padding: 20px;
    }
    
    .bbhg-af-title-section {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    
    .bbhg-af-status {
        margin-left: 0;
        margin-top: 12px;
    }
    
    .bbhg-af-categories {
        grid-template-columns: 1fr;
    }
    
    .bbhg-af-genres {
        justify-content: flex-start;
    }
    
    .bbhg-af-genre {
        flex: 0 0 auto;
    }
    
    .bbhg-af-input-row {
        grid-template-columns: 1fr;
    }
    
    .bbhg-af-styles {
        justify-content: flex-start;
    }
    
    .bbhg-af-style {
        flex: 1 1 calc(50% - 5px);
        justify-content: center;
    }
    
    .bbhg-af-options {
        flex-direction: column;
        gap: 12px;
    }
    
    .bbhg-af-results-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-af-alias-actions {
        flex-direction: column;
    }
    
    .bbhg-af-copy-btn,
    .bbhg-af-copy-handle-btn {
        min-width: auto;
        width: 100%;
    }
    
    .bbhg-af-handle-preview {
        flex-wrap: wrap;
    }
    
    .bbhg-af-hashtags-categories {
        grid-template-columns: 1fr;
    }
    
    .bbhg-af-tips-grid {
        grid-template-columns: 1fr;
    }
}
/* ==================== END ALIASFORGE STYLES ==================== */

/* ==================== O'RADAR INTRO ANIMATION ==================== */
.bbhg-intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0d0d1f 100%);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: var(--bbhg-radius-xl);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    cursor: pointer;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.bbhg-intro-overlay.bbhg-intro-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.bbhg-intro-overlay.bbhg-intro-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
}

/* Radar Background */
.bbhg-intro-radar-bg {
    position: absolute;
    width: 500px;
    height: 500px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.bbhg-radar-circle {
    position: absolute;
    border: 1px solid rgba(79, 209, 197, 0.2);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: bbhg-radar-pulse 3s ease-out infinite;
}

.bbhg-radar-circle-1 {
    width: 150px;
    height: 150px;
    animation-delay: 0s;
}

.bbhg-radar-circle-2 {
    width: 300px;
    height: 300px;
    animation-delay: 0.5s;
}

.bbhg-radar-circle-3 {
    width: 450px;
    height: 450px;
    animation-delay: 1s;
}

@keyframes bbhg-radar-pulse {
    0% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(0.8);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.bbhg-radar-sweep {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 50%;
    left: 50%;
    transform-origin: center;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        rgba(79, 209, 197, 0.4) 30deg,
        rgba(79, 209, 197, 0.1) 60deg,
        transparent 90deg
    );
    border-radius: 50%;
    animation: bbhg-radar-sweep 2s linear infinite;
    margin-top: -125px;
    margin-left: -125px;
}

@keyframes bbhg-radar-sweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.bbhg-radar-center {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #4fd1c5 0%, #38b2ac 50%, transparent 70%);
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(79, 209, 197, 0.6), 0 0 60px rgba(79, 209, 197, 0.3);
    animation: bbhg-center-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-center-pulse {
    0%, 100% { 
        box-shadow: 0 0 30px rgba(79, 209, 197, 0.6), 0 0 60px rgba(79, 209, 197, 0.3);
        transform: translate(-50%, -50%) scale(1);
    }
    50% { 
        box-shadow: 0 0 50px rgba(79, 209, 197, 0.8), 0 0 100px rgba(79, 209, 197, 0.5);
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Floating Particles */
.bbhg-intro-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bbhg-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: #4fd1c5;
    border-radius: 50%;
    left: var(--x);
    top: var(--y);
    opacity: 0;
    animation: bbhg-particle-float 4s ease-in-out infinite;
    animation-delay: var(--delay);
    box-shadow: 0 0 10px rgba(79, 209, 197, 0.8);
}

@keyframes bbhg-particle-float {
    0%, 100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }
    25% {
        opacity: 1;
        transform: translateY(-20px) scale(1);
    }
    75% {
        opacity: 1;
        transform: translateY(-40px) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-60px) scale(0.5);
    }
}

/* Main Content */
.bbhg-intro-content {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    text-align: center;
    padding: 20px 40px;
    width: 100%;
    max-width: 500px;
}

.bbhg-intro-icon {
    font-size: 48px;
    margin-bottom: 12px;
    animation: bbhg-icon-bounce 2s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(79, 209, 197, 0.5));
}

@keyframes bbhg-icon-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    75% { transform: translateY(-10px) rotate(5deg); }
}

.bbhg-intro-title {
    font-size: 36px;
    font-weight: 800;
    margin: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    line-height: 1.2;
}

.bbhg-intro-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: bbhg-word-reveal 0.8s ease forwards;
}

.bbhg-intro-welcome {
    color: rgba(255, 255, 255, 0.9);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 6px;
    text-transform: uppercase;
    animation-delay: 0.3s;
}

.bbhg-intro-to {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    font-weight: 400;
    animation-delay: 0.6s;
}

.bbhg-intro-oradar {
    color: #4fd1c5;
    font-size: 44px;
    font-weight: 900;
    letter-spacing: 2px;
    text-shadow: 
        0 0 20px rgba(79, 209, 197, 0.5),
        0 0 40px rgba(79, 209, 197, 0.3),
        0 0 60px rgba(79, 209, 197, 0.2);
    animation-delay: 0.9s;
    animation: bbhg-word-reveal 0.8s ease forwards, bbhg-oradar-glow 2s ease-in-out infinite 1.7s;
}

@keyframes bbhg-word-reveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bbhg-oradar-glow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(79, 209, 197, 0.5),
            0 0 40px rgba(79, 209, 197, 0.3),
            0 0 60px rgba(79, 209, 197, 0.2);
        filter: brightness(1);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(79, 209, 197, 0.8),
            0 0 60px rgba(79, 209, 197, 0.5),
            0 0 90px rgba(79, 209, 197, 0.3);
        filter: brightness(1.2);
    }
}

.bbhg-intro-tagline {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 30px 0;
    opacity: 0;
    animation: bbhg-fade-in 0.8s ease forwards 1.2s;
}

@keyframes bbhg-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* Loading Bar */
.bbhg-intro-loader {
    width: 200px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
    animation: bbhg-fade-in 0.5s ease forwards 1.5s;
}

.bbhg-intro-loader-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #4fd1c5, #38b2ac, #4fd1c5);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: bbhg-loader-fill 2.5s ease-out forwards 1.6s, bbhg-loader-shimmer 1s linear infinite 1.6s;
}

@keyframes bbhg-loader-fill {
    0% { width: 0%; }
    100% { width: 100%; }
}

@keyframes bbhg-loader-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Skip Button */
.bbhg-intro-skip {
    position: absolute;
    bottom: 30px;
    right: 30px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    animation: bbhg-fade-in 0.5s ease forwards 0.5s;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-intro-skip:hover {
    background: rgba(79, 209, 197, 0.2);
    border-color: rgba(79, 209, 197, 0.4);
    color: #4fd1c5;
    transform: translateX(5px);
}

.bbhg-intro-skip span {
    transition: transform 0.3s ease;
}

.bbhg-intro-skip:hover span {
    transform: translateX(5px);
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .bbhg-intro-radar-bg {
        width: 300px;
        height: 300px;
        top: 35%;
    }
    
    .bbhg-radar-circle-1 {
        width: 100px;
        height: 100px;
    }
    
    .bbhg-radar-circle-2 {
        width: 200px;
        height: 200px;
    }
    
    .bbhg-radar-circle-3 {
        width: 280px;
        height: 280px;
    }
    
    .bbhg-radar-sweep {
        width: 150px;
        height: 150px;
        margin-top: -75px;
        margin-left: -75px;
    }
    
    .bbhg-intro-icon {
        font-size: 36px;
        margin-bottom: 8px;
    }
    
    .bbhg-intro-welcome {
        font-size: 18px;
        letter-spacing: 4px;
    }
    
    .bbhg-intro-to {
        font-size: 14px;
    }
    
    .bbhg-intro-oradar {
        font-size: 36px;
    }
    
    .bbhg-intro-tagline {
        font-size: 12px;
        letter-spacing: 2px;
    }
    
    .bbhg-intro-skip {
        bottom: 20px;
        right: 20px;
        padding: 8px 16px;
        font-size: 12px;
    }
    
    .bbhg-intro-content {
        bottom: 60px;
        padding: 15px 20px;
    }
    
    .bbhg-intro-loader {
        width: 150px;
    }
}

/* Intro fade-out animation */
.bbhg-intro-overlay.bbhg-intro-exit {
    animation: bbhg-intro-exit 0.6s ease forwards;
}

@keyframes bbhg-intro-exit {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.02);
    }
    100% {
        opacity: 0;
        transform: scale(1.05);
        visibility: hidden;
    }
}
/* ==================== END O'RADAR INTRO ANIMATION ==================== */

/* ==================== O'RADAR USER MENU ==================== */
.bbhg-user-menu {
    position: relative;
    z-index: 10002;
}

.bbhg-user-menu-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 4px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-user-menu-toggle:hover {
    background: var(--bbhg-gray-200);
    border-color: var(--bbhg-gray-300);
}

.bbhg-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

.bbhg-user-chevron {
    width: 14px;
    height: 14px;
    color: #1f2937;
    transition: transform 0.2s ease;
}

.bbhg-user-menu.open .bbhg-user-chevron {
    transform: rotate(180deg);
}

.bbhg-user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-lg);
    box-shadow: var(--bbhg-shadow-xl);
    border: 1px solid var(--bbhg-gray-200);
    display: none;
    overflow: hidden;
    z-index: 10003;
}

.bbhg-user-menu.open .bbhg-user-dropdown {
    display: block;
    animation: bbhg-dropdown-in 0.2s ease;
}

@keyframes bbhg-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bbhg-user-dropdown-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
    background: var(--bbhg-gray-50);
}

.bbhg-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.bbhg-dropdown-user-info {
    flex: 1;
    min-width: 0;
}

.bbhg-dropdown-name {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--bbhg-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-dropdown-email {
    display: block;
    font-size: 12px;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-user-identity-summary {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-identity-badge {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 10px;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.bbhg-identity-badge.bbhg-badge-empty {
    background: var(--bbhg-gray-300);
    color: #1f2937;
}

.bbhg-badge-emoji {
    font-size: 16px;
}

.bbhg-badge-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-user-dropdown-links {
    padding: 8px;
}

.bbhg-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: left;
}

.bbhg-dropdown-link:hover {
    background: var(--bbhg-gray-100);
    color: var(--bbhg-primary);
}

.bbhg-dropdown-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Save to Profile Button on Quiz Results */
.bbhg-save-to-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 10px;
    color: white;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 12px;
}

.bbhg-save-to-profile-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16,185,129,0.4);
}

.bbhg-save-to-profile-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.bbhg-save-to-profile-btn.saved {
    background: var(--bbhg-gray-400);
}

.bbhg-profile-save-success {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(16,185,129,0.1);
    border: 1px solid rgba(16,185,129,0.3);
    border-radius: 10px;
    color: #059669;
    font-size: 14px;
    margin-top: 12px;
}

.bbhg-profile-save-success a {
    color: #059669;
    font-weight: 600;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bbhg-user-dropdown {
        width: 260px;
    }
    
    .bbhg-user-identity-summary {
        flex-direction: column;
    }
    
    .bbhg-identity-badge {
        justify-content: center;
    }
}
/* ==================== END O'RADAR USER MENU ==================== */

/* ==================== NICHE NAVIGATOR ==================== */
.bbhg-nn-container {
    max-width: 100%;
}

/* Header Banner - HashMind Purple Gradient */
.bbhg-nn-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-nn-header-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 60%);
    pointer-events: none;
    animation: bbhg-nn-glow 8s ease-in-out infinite;
}

@keyframes bbhg-nn-glow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
    50% { transform: translate(-10%, 10%) scale(1.1); opacity: 0.8; }
}

.bbhg-nn-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-nn-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-nn-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-nn-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
}

.bbhg-nn-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-nn-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.bbhg-nn-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.bbhg-nn-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

/* Search Section */
.bbhg-nn-search-section {
    margin-bottom: 24px;
}

.bbhg-nn-search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 20px;
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 16px;
    transition: all 0.3s ease;
    margin-bottom: 16px;
}

.bbhg-nn-search-box:focus-within {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.bbhg-nn-search-icon {
    color: #94a3b8;
    flex-shrink: 0;
}

.bbhg-nn-search-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-nn-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 15px;
    color: #1e293b;
    outline: none;
    padding: 12px 0;
}

.bbhg-nn-search-input::placeholder {
    color: #94a3b8;
}

.bbhg-nn-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 12px;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bbhg-nn-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-nn-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

/* Category Pills */
.bbhg-nn-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-nn-category-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-nn-category-pill:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-nn-category-pill.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-nn-cat-icon {
    font-size: 14px;
}

/* Loading State */
.bbhg-nn-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-nn-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid #e2e8f0;
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-nn-spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes bbhg-nn-spin {
    to { transform: rotate(360deg); }
}

.bbhg-nn-loading p {
    color: #64748b;
    font-size: 14px;
}

/* Empty State */
.bbhg-nn-empty {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-nn-empty-visual {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 24px;
}

.bbhg-nn-compass {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 56px;
    z-index: 2;
    animation: bbhg-nn-compass-pulse 3s ease-in-out infinite;
}

@keyframes bbhg-nn-compass-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-nn-orbits {
    position: absolute;
    inset: 0;
}

.bbhg-nn-orbit {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px dashed rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    animation: bbhg-nn-orbit-rotate 20s linear infinite;
}

.bbhg-nn-orbit span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.bbhg-nn-orbit-1 { animation-duration: 15s; }
.bbhg-nn-orbit-2 { animation-duration: 20s; animation-direction: reverse; }
.bbhg-nn-orbit-3 { animation-duration: 25s; }
.bbhg-nn-orbit-4 { animation-duration: 18s; animation-direction: reverse; }

@keyframes bbhg-nn-orbit-rotate {
    to { transform: rotate(360deg); }
}

.bbhg-nn-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.bbhg-nn-empty > p {
    color: #64748b;
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

/* Quick Start */
.bbhg-nn-quick-start {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.bbhg-nn-qs-label {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-nn-qs-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bbhg-nn-qs-chip {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: #8b5cf6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-nn-qs-chip:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white;
    transform: translateY(-2px);
}

/* Main Niche Card */
.bbhg-nn-main-card {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 24px;
    color: white;
    position: relative;
    overflow: hidden;
}

.bbhg-nn-main-card::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-nn-main-header {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 24px;
    position: relative;
    z-index: 1;
}

.bbhg-nn-main-icon {
    font-size: 48px;
    line-height: 1;
}

.bbhg-nn-main-info {
    flex: 1;
}

.bbhg-nn-main-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 6px 0;
}

.bbhg-nn-main-info p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85) !important;
    margin: 0;
    line-height: 1.5;
}

.bbhg-nn-opportunity-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.bbhg-nn-opp-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.bbhg-nn-opp-score {
    font-size: 32px;
    font-weight: 800;
    color: white !important;
    line-height: 1;
}

/* Score Meters */
.bbhg-nn-meters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.bbhg-nn-meter {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}

.bbhg-nn-meter-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.bbhg-nn-meter-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9) !important;
}

.bbhg-nn-meter-value {
    font-size: 13px;
    font-weight: 700;
    color: white !important;
}

.bbhg-nn-meter-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.bbhg-nn-meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bbhg-nn-saturation-fill {
    background: linear-gradient(90deg, #22c55e 0%, #eab308 50%, #ef4444 100%);
}

.bbhg-nn-growth-fill {
    background: linear-gradient(90deg, #ef4444 0%, #eab308 50%, #22c55e 100%);
}

.bbhg-nn-monetization-fill {
    background: linear-gradient(90deg, #ef4444 0%, #eab308 50%, #22c55e 100%);
}

.bbhg-nn-meter-hint {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Stats Grid */
.bbhg-nn-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-nn-stat-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.bbhg-nn-stat-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.bbhg-nn-stat-icon {
    font-size: 28px;
}

.bbhg-nn-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-nn-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.bbhg-nn-stat-label {
    font-size: 12px;
    color: #64748b;
}

/* Sections */
.bbhg-nn-section {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-nn-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-nn-section-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.bbhg-nn-section-icon {
    font-size: 18px;
}

.bbhg-nn-section-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
}

.bbhg-nn-copy-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-nn-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-nn-copy-all-btn svg {
    stroke: white;
}

/* Sub-Niches */
.bbhg-nn-subniches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-nn-subniche {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-nn-subniche:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: #8b5cf6;
    transform: translateY(-2px);
}

.bbhg-nn-subniche-icon {
    font-size: 20px;
}

.bbhg-nn-subniche-info {
    flex: 1;
    min-width: 0;
}

.bbhg-nn-subniche-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-nn-subniche-opp {
    font-size: 11px;
    color: #22c55e;
    font-weight: 600;
}

/* Content Ideas */
.bbhg-nn-content-ideas {
    display: grid;
    gap: 12px;
}

.bbhg-nn-idea {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-nn-idea:hover {
    background: #f1f5f9;
}

.bbhg-nn-idea-type {
    padding: 6px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    color: white !important;
    text-transform: uppercase;
    white-space: nowrap;
}

.bbhg-nn-idea-content {
    flex: 1;
}

.bbhg-nn-idea-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.bbhg-nn-idea-desc {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
}

/* Hashtags Grid */
.bbhg-nn-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-nn-hashtag {
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #8b5cf6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-nn-hashtag:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white;
}

/* Creators */
.bbhg-nn-creators {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

.bbhg-nn-creator {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 12px;
    transition: all 0.2s ease;
}

.bbhg-nn-creator:hover {
    background: #f1f5f9;
}

.bbhg-nn-creator-avatar {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: white;
    flex-shrink: 0;
}

.bbhg-nn-creator-info {
    flex: 1;
    min-width: 0;
}

.bbhg-nn-creator-name {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
}

.bbhg-nn-creator-handle {
    font-size: 12px;
    color: #8b5cf6;
}

.bbhg-nn-creator-followers {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

/* AI Tips */
.bbhg-nn-ai-tips {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
}

.bbhg-nn-ai-tips-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.bbhg-nn-ai-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.bbhg-nn-ai-tips-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px 0;
}

.bbhg-nn-ai-tips-header p {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.bbhg-nn-tips-list {
    display: grid;
    gap: 12px;
}

.bbhg-nn-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-radius: 12px;
}

.bbhg-nn-tip-icon {
    font-size: 18px;
    line-height: 1;
}

.bbhg-nn-tip-text {
    flex: 1;
    font-size: 14px;
    color: #1f2937;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
    .bbhg-nn-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-nn-meters {
        grid-template-columns: 1fr;
    }
    
    .bbhg-nn-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-nn-main-header {
        flex-wrap: wrap;
    }
    
    .bbhg-nn-opportunity-badge {
        order: -1;
        flex-direction: row;
        gap: 8px;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .bbhg-nn-header {
        padding: 20px;
    }
    
    .bbhg-nn-title-section h2 {
        font-size: 20px;
    }
    
    .bbhg-nn-search-box {
        flex-direction: column;
        padding: 12px;
    }
    
    .bbhg-nn-search-input {
        width: 100%;
    }
    
    .bbhg-nn-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-nn-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-nn-subniches {
        grid-template-columns: 1fr;
    }
    
    .bbhg-nn-creators {
        grid-template-columns: 1fr;
    }
}
/* ==================== END NICHE NAVIGATOR ==================== */

/* ==================== THREAD GENERATOR STYLES ==================== */
.bbhg-threadgen-container {
    padding: 0;
}

/* Header */
.bbhg-threadgen-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
    border-radius: 16px;
    margin-bottom: 24px;
    overflow: hidden;
}

.bbhg-threadgen-header-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-threadgen-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.bbhg-threadgen-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-threadgen-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-threadgen-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: #ffffff !important;
}

.bbhg-threadgen-subtitle {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: rgba(255,255,255,0.9) !important;
}

.bbhg-threadgen-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.2);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    z-index: 1;
}

.bbhg-threadgen-status .bbhg-status-text {
    color: #ffffff !important;
    font-size: 13px;
    font-weight: 500;
}

/* Input Section */
.bbhg-threadgen-input-section {
    margin-bottom: 20px;
}

.bbhg-threadgen-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 10px;
}

.bbhg-threadgen-label svg {
    stroke: #0891b2;
}

.bbhg-threadgen-textarea-wrap {
    position: relative;
}

.bbhg-threadgen-textarea {
    width: 100%;
    padding: 16px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s;
    background: #ffffff;
    color: #1e293b;
}

.bbhg-threadgen-textarea:focus {
    outline: none;
    border-color: #0891b2;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1);
}

.bbhg-threadgen-textarea::placeholder {
    color: #94a3b8;
}

.bbhg-threadgen-char-count {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 12px;
    color: #94a3b8;
}

/* Platform Selection */
.bbhg-threadgen-platform-section {
    margin-bottom: 20px;
}

.bbhg-threadgen-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-threadgen-platform-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 18px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 100px;
}

.bbhg-threadgen-platform-btn:hover {
    border-color: #0891b2;
    background: #f0fdfa;
}

.bbhg-threadgen-platform-btn.active {
    background: #f8fafc;
    border-color: #0891b2;
    padding: 12px 14px;
    min-width: unset;
}

/* Keep icon same color when selected */
.bbhg-threadgen-platform-btn.active .bbhg-platform-icon,
.bbhg-threadgen-platform-btn.active .bbhg-platform-icon svg {
    color: #64748b !important;
    fill: #64748b !important;
}

/* Hide name and limit when platform is active - only show icon */
.bbhg-threadgen-platform-btn.active .bbhg-platform-name,
.bbhg-threadgen-platform-btn.active .bbhg-platform-limit {
    display: none;
}

.bbhg-platform-icon {
    font-size: 20px;
    font-weight: 700;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-platform-icon svg {
    fill: #64748b;
    transition: fill 0.2s;
}

.bbhg-platform-name {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.bbhg-platform-limit {
    font-size: 11px;
    color: #94a3b8;
}

/* Tone Selection */
.bbhg-threadgen-tone-section {
    margin-bottom: 20px;
}

.bbhg-threadgen-tones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-threadgen-tone-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.bbhg-threadgen-tone-btn:hover {
    border-color: #0891b2;
    background: #f0fdfa;
}

.bbhg-threadgen-tone-btn.active {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-color: transparent;
    color: #ffffff !important;
}

.bbhg-threadgen-tone-btn.active span {
    color: #ffffff !important;
}

.bbhg-tone-emoji {
    font-size: 16px;
}

/* Length Slider */
.bbhg-threadgen-length-section {
    margin-bottom: 20px;
}

.bbhg-threadgen-slider-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-slider-label {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
    min-width: 20px;
}

.bbhg-threadgen-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, #0891b2 0%, #06b6d4 50%, #e2e8f0 50%, #e2e8f0 100%);
    border-radius: 4px;
    outline: none;
}

.bbhg-threadgen-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
    transition: transform 0.2s;
}

.bbhg-threadgen-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.bbhg-threadgen-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-radius: 50%;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(8, 145, 178, 0.3);
}

/* Options Section */
.bbhg-threadgen-options-section {
    margin-bottom: 24px;
}

.bbhg-threadgen-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #475569;
}

.bbhg-threadgen-checkbox-label input[type="checkbox"] {
    display: none;
}

.bbhg-checkbox-custom {
    width: 22px;
    height: 22px;
    border: 2px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.bbhg-threadgen-checkbox-label input[type="checkbox"]:checked + .bbhg-checkbox-custom {
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-color: transparent;
}

.bbhg-threadgen-checkbox-label input[type="checkbox"]:checked + .bbhg-checkbox-custom::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: 700;
}

/* Generate Button */
.bbhg-threadgen-action-section {
    margin-bottom: 24px;
}

.bbhg-threadgen-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
    border: none;
    border-radius: 12px;
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(8, 145, 178, 0.3);
}

.bbhg-threadgen-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(8, 145, 178, 0.4);
}

.bbhg-threadgen-generate-btn:active {
    transform: translateY(0);
}

.bbhg-threadgen-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-threadgen-generate-btn span {
    color: #ffffff !important;
}

.bbhg-threadgen-generate-btn.loading {
    opacity: 0.8;
    cursor: wait;
}

/* Loading State */
.bbhg-threadgen-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px;
    text-align: center;
    color: #64748b;
}

/* Results Section */
.bbhg-threadgen-results {
    margin-top: 24px;
}

/* Stats */
.bbhg-threadgen-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-threadgen-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
    border: 1px solid rgba(8, 145, 178, 0.1);
    border-radius: 12px;
}

.bbhg-stat-icon {
    font-size: 24px;
}

.bbhg-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #0891b2;
}

.bbhg-stat-label {
    font-size: 12px;
    color: #64748b;
}

/* Copy All Button */
.bbhg-threadgen-copy-all {
    margin-bottom: 20px;
}

.bbhg-threadgen-copy-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border: none;
    border-radius: 10px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-threadgen-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

.bbhg-threadgen-copy-all-btn svg {
    stroke: white;
}

.bbhg-threadgen-copy-all-btn span {
    color: #ffffff !important;
}

/* Thread Posts */
.bbhg-threadgen-posts {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-threadgen-post {
    position: relative;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.bbhg-threadgen-post:hover {
    border-color: #0891b2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.bbhg-threadgen-post-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-threadgen-post-number {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-post-num {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.bbhg-post-type {
    font-size: 12px;
    padding: 4px 10px;
    background: #f0fdfa;
    color: #0891b2;
    border-radius: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.bbhg-post-type.hook {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%);
    color: #ea580c;
}

.bbhg-post-type.cta {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
    color: #16a34a;
}

.bbhg-threadgen-post-actions {
    display: flex;
    gap: 8px;
}

.bbhg-post-copy-btn,
.bbhg-post-edit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-post-copy-btn:hover,
.bbhg-post-edit-btn:hover {
    background: #0891b2;
    border-color: #0891b2;
}

.bbhg-post-copy-btn:hover svg,
.bbhg-post-edit-btn:hover svg {
    stroke: white;
}

.bbhg-post-copy-btn svg,
.bbhg-post-edit-btn svg {
    width: 16px;
    height: 16px;
    stroke: #64748b;
}

.bbhg-threadgen-post-content {
    font-size: 14px;
    line-height: 1.7;
    color: #334155;
    white-space: pre-wrap;
}

.bbhg-threadgen-post-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}

.bbhg-post-char-count {
    font-size: 12px;
    color: #94a3b8;
}

.bbhg-post-char-count.over-limit {
    color: #ef4444;
    font-weight: 600;
}

/* Hashtags Section */
.bbhg-threadgen-hashtags-section {
    margin-top: 24px;
    padding: 20px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(6, 182, 212, 0.05) 100%);
    border: 1px solid rgba(8, 145, 178, 0.1);
    border-radius: 12px;
}

.bbhg-threadgen-hashtags-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-threadgen-hashtags-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
}

.bbhg-threadgen-hashtags-header h4 svg {
    stroke: #0891b2;
}

.bbhg-threadgen-copy-hashtags-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px;
    color: #334155 !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-threadgen-copy-hashtags-btn:hover {
    background: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

.bbhg-threadgen-copy-hashtags-btn svg {
    stroke: #334155;
}

.bbhg-threadgen-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-threadgen-hashtag {
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    font-size: 13px;
    color: #0891b2;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-threadgen-hashtag:hover {
    background: #0891b2;
    border-color: #0891b2;
    color: #ffffff;
}

/* Toast Notification */
.bbhg-threadgen-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    padding: 14px 24px;
    background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
    color: #ffffff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(8, 145, 178, 0.3);
    z-index: 999999;
    opacity: 0;
    transition: all 0.3s ease;
    max-width: 90%;
    text-align: center;
}

.bbhg-threadgen-toast.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Error message display in results area */
.bbhg-threadgen-error {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    text-align: center;
}

.bbhg-threadgen-error-icon {
    font-size: 32px;
    margin-bottom: 10px;
}

.bbhg-threadgen-error-message {
    color: #dc2626;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 10px;
}

.bbhg-threadgen-error-hint {
    color: #991b1b;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-threadgen-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-threadgen-platforms {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-threadgen-platform-btn {
        min-width: unset;
    }
    
    .bbhg-threadgen-tones {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-threadgen-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-threadgen-post-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .bbhg-threadgen-post-actions {
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .bbhg-threadgen-platforms {
        grid-template-columns: 1fr;
    }
    
    .bbhg-threadgen-tones {
        grid-template-columns: 1fr;
    }
}
/* ==================== END THREAD GENERATOR ==================== */

/* ==================== CONTENT PERFORMANCE PREDICTOR ==================== */
.bbhg-predictor-container {
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Header - HashMind Style */
.bbhg-predictor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius);
    margin-bottom: 24px;
    color: white;
    position: relative;
    overflow: hidden;
}

.bbhg-predictor-header-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 60%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-predictor-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-predictor-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-predictor-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-predictor-title-section h2 {
    margin: 0 0 4px 0;
    font-size: 22px;
    font-weight: 700;
    color: white !important;
}

.bbhg-predictor-subtitle {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
    color: white !important;
}

.bbhg-predictor-actions {
    position: relative;
    z-index: 1;
}

.bbhg-predictor-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    backdrop-filter: blur(10px);
}

.bbhg-predictor-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

/* Input Section */
.bbhg-predictor-input-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    margin-bottom: 24px;
    width: 100%;
    box-sizing: border-box;
}

.bbhg-predictor-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 12px;
}

.bbhg-predictor-label svg {
    width: 18px;
    height: 18px;
    stroke: var(--bbhg-gray-500);
}

/* Platform Selection */
.bbhg-predictor-platform-row {
    margin-bottom: 20px;
}

.bbhg-predictor-platforms {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
}

.bbhg-predictor-platforms::-webkit-scrollbar {
    height: 6px;
}

.bbhg-predictor-platforms::-webkit-scrollbar-track {
    background: var(--bbhg-gray-100);
    border-radius: 3px;
}

.bbhg-predictor-platforms::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

.bbhg-predictor-platforms::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.5);
}

.bbhg-predictor-platform {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-predictor-platform:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-predictor-platform.active {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    color: #8b5cf6;
}

.bbhg-predictor-platform-icon {
    font-size: 18px;
}

/* Content Type */
.bbhg-predictor-type-row {
    margin-bottom: 20px;
}

.bbhg-predictor-types {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: thin;
    scrollbar-color: rgba(139, 92, 246, 0.3) transparent;
}

.bbhg-predictor-types::-webkit-scrollbar {
    height: 6px;
}

.bbhg-predictor-types::-webkit-scrollbar-track {
    background: var(--bbhg-gray-100);
    border-radius: 3px;
}

.bbhg-predictor-types::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.3);
    border-radius: 3px;
}

.bbhg-predictor-type {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-predictor-type:hover {
    border-color: #8b5cf6;
}

.bbhg-predictor-type.active {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.08);
    color: #8b5cf6;
}

/* Caption Input */
.bbhg-predictor-caption-box {
    margin-bottom: 20px;
}

.bbhg-predictor-textarea-wrap {
    position: relative;
}

.bbhg-predictor-textarea {
    width: 100%;
    min-height: 180px;
    padding: 16px;
    padding-bottom: 40px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--bbhg-gray-900);
    resize: vertical;
    transition: all 0.2s ease;
    font-family: inherit;
}

.bbhg-predictor-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-predictor-textarea::placeholder {
    color: #374151;
}

.bbhg-predictor-char-info {
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 12px;
    color: #374151;
}

.bbhg-predictor-char-count {
    font-weight: 600;
    color: #1f2937;
}

.bbhg-predictor-char-count.over-limit {
    color: #ef4444;
}

/* Optional Fields */
.bbhg-predictor-optional {
    margin-bottom: 20px;
}

.bbhg-predictor-optional-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bbhg-gray-50);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-predictor-optional-toggle:hover {
    background: var(--bbhg-gray-100);
}

.bbhg-predictor-optional-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.bbhg-predictor-optional-toggle.open svg {
    transform: rotate(180deg);
}

.bbhg-predictor-optional-fields {
    padding: 16px 0;
}

.bbhg-predictor-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.bbhg-predictor-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
}

.bbhg-predictor-field input,
.bbhg-predictor-field select {
    width: 100%;
    padding: 10px 12px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px;
    font-size: 13px;
    color: var(--bbhg-gray-900);
    transition: all 0.2s ease;
}

.bbhg-predictor-field input:focus,
.bbhg-predictor-field select:focus {
    outline: none;
    border-color: #8b5cf6;
    background: var(--bbhg-white);
}

/* Analyze Button */
.bbhg-predictor-submit-row {
    display: flex;
    justify-content: center;
}

.bbhg-predictor-analyze-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bbhg-predictor-analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.4);
}

.bbhg-predictor-analyze-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-predictor-analyze-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-predictor-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-predictor-loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: bbhg-spin 1s linear infinite;
}

.bbhg-predictor-loading p {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin: 0 0 8px 0;
}

.bbhg-predictor-loading-sub {
    font-size: 13px;
    color: #1f2937;
}

/* Results Section */
/* Results Section */
.bbhg-predictor-results {
    width: 100%;
    box-sizing: border-box;
}

.bbhg-predictor-score-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

/* Main Score Card */
.bbhg-predictor-main-score {
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: 16px;
    margin-bottom: 28px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.bbhg-predictor-score-ring {
    position: relative;
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.bbhg-predictor-score-ring svg {
    transform: rotate(-90deg);
}

.bbhg-predictor-ring-bg {
    stroke: var(--bbhg-gray-200);
}

.bbhg-predictor-ring-fill {
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}

.bbhg-predictor-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.bbhg-predictor-score-num {
    display: block;
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.bbhg-predictor-score-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #1f2937;
    margin-top: 4px;
}

.bbhg-predictor-score-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.bbhg-predictor-verdict {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bbhg-white);
    border-radius: 24px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.bbhg-predictor-verdict-icon {
    font-size: 20px;
}

.bbhg-predictor-verdict-text {
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-predictor-verdict.excellent .bbhg-predictor-verdict-text { color: #22c55e; }
.bbhg-predictor-verdict.good .bbhg-predictor-verdict-text { color: #8b5cf6; }
.bbhg-predictor-verdict.average .bbhg-predictor-verdict-text { color: #f59e0b; }
.bbhg-predictor-verdict.needs-work .bbhg-predictor-verdict-text { color: #ef4444; }

.bbhg-predictor-score-desc {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.bbhg-predictor-quick-stats {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.bbhg-predictor-quick-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px;
    background: var(--bbhg-white);
    border-radius: 10px;
    min-width: 80px;
    flex: 1;
}

.bbhg-predictor-qs-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.bbhg-predictor-qs-label {
    font-size: 11px;
    color: #1f2937;
    margin-bottom: 2px;
}

.bbhg-predictor-qs-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

/* Section Titles */
.bbhg-predictor-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 16px 0;
}

.bbhg-predictor-section-title svg {
    width: 20px;
    height: 20px;
    stroke: #8b5cf6;
}

/* Category Scores */
.bbhg-predictor-categories {
    margin-bottom: 28px;
}

.bbhg-predictor-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-predictor-category-card {
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    border: 1px solid var(--bbhg-gray-100);
}

.bbhg-predictor-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bbhg-predictor-category-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
}

.bbhg-predictor-category-icon {
    font-size: 16px;
}

.bbhg-predictor-category-score {
    font-size: 14px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.bbhg-predictor-category-score.excellent {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.bbhg-predictor-category-score.good {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.bbhg-predictor-category-score.average {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.bbhg-predictor-category-score.poor {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.bbhg-predictor-category-bar {
    height: 6px;
    background: var(--bbhg-gray-200);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bbhg-predictor-category-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.8s ease-out;
}

.bbhg-predictor-category-fill.excellent { background: linear-gradient(90deg, #22c55e, #16a34a); }
.bbhg-predictor-category-fill.good { background: linear-gradient(90deg, #8b5cf6, #6366f1); }
.bbhg-predictor-category-fill.average { background: linear-gradient(90deg, #f59e0b, #d97706); }
.bbhg-predictor-category-fill.poor { background: linear-gradient(90deg, #ef4444, #dc2626); }

.bbhg-predictor-category-tip {
    font-size: 11px;
    color: #1f2937;
    line-height: 1.4;
}

/* Feedback Columns */
.bbhg-predictor-feedback {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 28px;
}

.bbhg-predictor-feedback-col {
    padding: 20px;
    border-radius: 12px;
}

.bbhg-predictor-strengths {
    background: rgba(34, 197, 94, 0.05);
    border: 1px solid rgba(34, 197, 94, 0.15);
}

.bbhg-predictor-improvements {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.15);
}

.bbhg-predictor-feedback-col h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 14px 0;
    color: var(--bbhg-gray-800);
}

.bbhg-predictor-fb-icon {
    font-size: 18px;
}

.bbhg-predictor-feedback-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bbhg-predictor-feedback-col li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

.bbhg-predictor-feedback-col li:last-child {
    border-bottom: none;
}

.bbhg-predictor-feedback-col li::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.bbhg-predictor-strengths li::before {
    background: #22c55e;
}

.bbhg-predictor-improvements li::before {
    background: #f59e0b;
}

/* AI Suggestions */
.bbhg-predictor-suggestions {
    margin-bottom: 28px;
}

.bbhg-predictor-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-predictor-suggestion-card {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    border: 1px solid var(--bbhg-gray-100);
    transition: all 0.2s ease;
}

.bbhg-predictor-suggestion-card:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.03);
}

.bbhg-predictor-suggestion-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-radius: 10px;
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-predictor-suggestion-content {
    flex: 1;
}

.bbhg-predictor-suggestion-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
    margin-bottom: 4px;
}

.bbhg-predictor-suggestion-text {
    font-size: 13px;
    color: #1f2937;
    line-height: 1.5;
}

.bbhg-predictor-suggestion-action {
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-predictor-suggestion-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-predictor-suggestion-action svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-predictor-suggestion-action span {
    color: white !important;
}

/* Improved Caption */
.bbhg-predictor-improved {
    margin-bottom: 28px;
}

.bbhg-predictor-improved-card {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.08));
    border: 2px solid rgba(139, 92, 246, 0.2);
    border-radius: 16px;
    padding: 20px;
}

.bbhg-predictor-improved-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: white;
    margin-bottom: 14px;
}

.bbhg-predictor-improved-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--bbhg-gray-800);
    padding: 16px;
    background: var(--bbhg-white);
    border-radius: 10px;
    margin-bottom: 16px;
    white-space: pre-wrap;
}

.bbhg-predictor-improved-actions {
    display: flex;
    gap: 12px;
}

.bbhg-predictor-copy-btn,
.bbhg-predictor-use-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-predictor-copy-btn {
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
}

.bbhg-predictor-copy-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-predictor-copy-btn svg {
    width: 16px;
    height: 16px;
}

.bbhg-predictor-use-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    color: white !important;
}

.bbhg-predictor-use-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bbhg-predictor-use-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-predictor-use-btn span {
    color: white !important;
}

/* Best Posting Times */
.bbhg-predictor-timing {
    margin-bottom: 28px;
}

.bbhg-predictor-timing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.bbhg-predictor-timing-card {
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--bbhg-gray-100);
    transition: all 0.2s ease;
}

.bbhg-predictor-timing-card:hover {
    border-color: #8b5cf6;
}

.bbhg-predictor-timing-card.recommended {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(99, 102, 241, 0.08));
    border-color: rgba(139, 92, 246, 0.3);
}

.bbhg-predictor-timing-card.recommended::before {
    content: '⭐ Best';
    display: block;
    font-size: 10px;
    font-weight: 700;
    color: #8b5cf6;
    margin-bottom: 6px;
}

.bbhg-predictor-timing-day {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bbhg-predictor-timing-time {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin-bottom: 4px;
}

.bbhg-predictor-timing-reason {
    font-size: 11px;
    color: #1f2937;
}

/* Checklist */
.bbhg-predictor-checklist {
    margin-bottom: 28px;
}

.bbhg-predictor-checklist-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-predictor-checklist-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: 10px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    border: 1px solid var(--bbhg-gray-100);
}

.bbhg-predictor-checklist-item.checked {
    background: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.2);
}

.bbhg-predictor-checklist-item.unchecked {
    background: rgba(245, 158, 11, 0.05);
    border-color: rgba(245, 158, 11, 0.2);
}

.bbhg-predictor-check-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    flex-shrink: 0;
}

.bbhg-predictor-checklist-item.checked .bbhg-predictor-check-icon {
    background: #22c55e;
    color: white;
}

.bbhg-predictor-checklist-item.unchecked .bbhg-predictor-check-icon {
    background: #f59e0b;
    color: white;
}

/* Action Buttons */
.bbhg-predictor-actions-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding-top: 20px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-predictor-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-predictor-retry-btn {
    background: var(--bbhg-white);
    border: 2px solid var(--bbhg-gray-200);
    color: var(--bbhg-gray-700);
}

.bbhg-predictor-retry-btn:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

.bbhg-predictor-retry-btn svg {
    width: 18px;
    height: 18px;
}

.bbhg-predictor-new-btn {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border: none;
    color: white !important;
}

.bbhg-predictor-new-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.bbhg-predictor-new-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-predictor-new-btn span {
    color: white !important;
}

/* Empty State */
.bbhg-predictor-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-predictor-empty-visual {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 24px;
}

.bbhg-predictor-empty-chart {
    font-size: 60px;
    line-height: 120px;
}

.bbhg-predictor-empty-orbits {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.bbhg-predictor-orbit {
    position: absolute;
    font-size: 20px;
    animation: bbhg-orbit-float 4s ease-in-out infinite;
}

.bbhg-predictor-orbit-1 { top: 0; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.bbhg-predictor-orbit-2 { top: 50%; right: -10px; transform: translateY(-50%); animation-delay: 1s; }
.bbhg-predictor-orbit-3 { bottom: 0; left: 50%; transform: translateX(-50%); animation-delay: 2s; }
.bbhg-predictor-orbit-4 { top: 50%; left: -10px; transform: translateY(-50%); animation-delay: 3s; }

@keyframes bbhg-orbit-float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.1); }
}

.bbhg-predictor-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
    margin: 0 0 12px 0;
}

.bbhg-predictor-empty p {
    font-size: 15px;
    color: #1f2937;
    max-width: 500px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.bbhg-predictor-features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 500px;
    margin: 0 auto;
}

.bbhg-predictor-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border-radius: 24px;
    font-size: 13px;
    color: #1f2937;
    border: 1px solid var(--bbhg-gray-100);
}

.bbhg-predictor-feature-icon {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-predictor-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-predictor-main-score {
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-predictor-quick-stats {
        justify-content: center;
    }
    
    .bbhg-predictor-feedback {
        grid-template-columns: 1fr;
    }
    
    .bbhg-predictor-improved-actions {
        flex-direction: column;
    }
    
    .bbhg-predictor-actions-row {
        flex-direction: column;
    }
    
    .bbhg-predictor-action-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bbhg-predictor-category-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-predictor-timing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* ==================== END CONTENT PERFORMANCE PREDICTOR ==================== */

/* ================================
   CONTENT IDEA GENERATOR STYLES
   ================================ */

.bbhg-ig-container {
    padding: 0 4px;
}

/* Header Banner - Teal/Cyan Gradient */
.bbhg-ig-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-ig-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-ig-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-ig-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-ig-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-ig-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-ig-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-ig-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-ig-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-ig-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-ig-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-ig-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-ig-status .bbhg-status-text {
    color: white !important;
}

/* Search Section */
.bbhg-ig-search-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-ig-input-group {
    margin-bottom: 16px;
}

.bbhg-ig-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-ig-input-wrap {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
}

.bbhg-ig-input-container {
    position: relative;
    flex: 1;
}

.bbhg-ig-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-ig-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-ig-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-ig-input:focus {
    border-color: #06b6d4;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);
}

.bbhg-ig-input::placeholder {
    color: #374151;
}

.bbhg-ig-generate-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-ig-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 182, 212, 0.4);
}

.bbhg-ig-generate-btn:active {
    transform: translateY(0);
}

.bbhg-ig-generate-btn svg {
    width: 18px;
    height: 18px;
    stroke: white !important;
}

.bbhg-ig-generate-btn span {
    color: white !important;
}

/* Options Row */
.bbhg-ig-options-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bbhg-ig-option {
    flex: 1;
    min-width: 150px;
}

.bbhg-ig-option-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-ig-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    color: var(--bbhg-gray-700);
    background: var(--bbhg-white);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ig-select:focus {
    border-color: #06b6d4;
    outline: none;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);
}

/* Quick Topics */
.bbhg-ig-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-ig-quick-label {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-ig-topic-pill {
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ig-topic-pill:hover {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(8, 145, 178, 0.1));
    border-color: #06b6d4;
    color: #0891b2;
}

/* Loading State */
.bbhg-ig-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-ig-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-ig-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #06b6d4;
    border-radius: 50%;
    animation: bbhg-ig-spin 1s linear infinite;
}

@keyframes bbhg-ig-spin {
    to { transform: rotate(360deg); }
}

.bbhg-ig-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-ig-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-ig-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.bbhg-ig-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-ig-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.bbhg-ig-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-ig-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #06b6d4, #0891b2, #06b6d4);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: bbhg-ig-progress 2s ease-in-out infinite;
}

@keyframes bbhg-ig-progress {
    0% { width: 0%; background-position: 0% 0%; }
    50% { width: 70%; background-position: 100% 0%; }
    100% { width: 100%; background-position: 0% 0%; }
}

/* Results Section */
.bbhg-ig-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
}

.bbhg-ig-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-ig-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-ig-results-icon {
    font-size: 24px;
}

.bbhg-ig-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-ig-results-count {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    background: var(--bbhg-gray-100);
    padding: 4px 10px;
    border-radius: 12px;
}

.bbhg-ig-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-ig-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ig-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.bbhg-ig-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-ig-action-btn span {
    color: white !important;
}

/* Ideas Grid */
.bbhg-ig-ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

/* Idea Card */
.bbhg-ig-idea-card {
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    transition: all 0.2s ease;
    position: relative;
}

.bbhg-ig-idea-card:hover {
    border-color: #06b6d4;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.1);
    transform: translateY(-2px);
}

.bbhg-ig-idea-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.bbhg-ig-idea-number {
    width: 28px;
    height: 28px;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: white;
}

.bbhg-ig-idea-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bbhg-ig-idea-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bbhg-ig-idea-badge.format {
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
}

.bbhg-ig-idea-badge.type {
    background: rgba(249, 115, 22, 0.1);
    color: #ea580c;
}

.bbhg-ig-idea-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.bbhg-ig-idea-description {
    font-size: 13px;
    color: #1f2937;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.bbhg-ig-idea-hook {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(8, 145, 178, 0.08));
    border-left: 3px solid #06b6d4;
    padding: 10px 12px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 12px;
}

.bbhg-ig-idea-hook-label {
    font-size: 10px;
    font-weight: 700;
    color: #0891b2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bbhg-ig-idea-hook-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    font-style: italic;
    margin: 0;
}

.bbhg-ig-idea-actions {
    display: flex;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-ig-idea-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    border: none;
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ig-idea-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.3);
}

.bbhg-ig-idea-btn svg {
    width: 14px;
    height: 14px;
    stroke: white !important;
}

.bbhg-ig-idea-btn span {
    color: white !important;
}

.bbhg-ig-idea-btn.secondary {
    background: var(--bbhg-gray-100);
    color: var(--bbhg-gray-700) !important;
}

.bbhg-ig-idea-btn.secondary:hover {
    background: var(--bbhg-gray-200);
    box-shadow: none;
}

.bbhg-ig-idea-btn.secondary svg {
    stroke: var(--bbhg-gray-600) !important;
}

.bbhg-ig-idea-btn.secondary span {
    color: var(--bbhg-gray-700) !important;
}

/* Empty State */
.bbhg-ig-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-ig-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: bbhg-ig-float 3s ease-in-out infinite;
}

@keyframes bbhg-ig-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bbhg-ig-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-ig-empty p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 auto 24px;
    max-width: 400px;
    line-height: 1.6;
}

.bbhg-ig-empty-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-ig-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 24px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-ig-feature-icon {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-ig-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-ig-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-ig-generate-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-ig-options-row {
        flex-direction: column;
    }
    
    .bbhg-ig-option {
        width: 100%;
    }
    
    .bbhg-ig-ideas-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-ig-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-ig-results-actions {
        width: 100%;
    }
    
    .bbhg-ig-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ==================== END CONTENT IDEA GENERATOR ==================== */

/* ==================== THUMBNAIL GENERATOR ==================== */
.bbhg-thumb-container {
    padding: 0;
    max-width: 100%;
}

.bbhg-thumb-header {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 50%, #6366f1 100%);
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

.bbhg-thumb-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    animation: bbhg-thumb-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-thumb-shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.bbhg-thumb-header-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-thumb-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-thumb-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-thumb-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
}

.bbhg-thumb-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bbhg-thumb-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    margin: 4px 0 0 0;
}

.bbhg-thumb-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 8px 16px;
    border-radius: 30px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.bbhg-thumb-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-thumb-status .bbhg-status-text {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Search Section */
.bbhg-thumb-search-section {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.bbhg-thumb-input-group {
    margin-bottom: 20px;
}

.bbhg-thumb-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 10px;
}

.bbhg-thumb-input-wrap {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.bbhg-thumb-input-container {
    flex: 1;
    position: relative;
}

.bbhg-thumb-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #1f2937;
    pointer-events: none;
}

.bbhg-thumb-input-icon svg {
    width: 100%;
    height: 100%;
}

.bbhg-thumb-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 15px;
    color: #1f2937;
    transition: all 0.2s ease;
    background: #f9fafb;
}

.bbhg-thumb-input:focus {
    outline: none;
    border-color: #ec4899;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.1);
}

.bbhg-thumb-input::placeholder {
    color: #1f2937;
}

.bbhg-thumb-generate-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-thumb-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
}

.bbhg-thumb-generate-btn:active {
    transform: translateY(0);
}

.bbhg-thumb-generate-btn svg {
    width: 20px;
    height: 20px;
    color: #fff;
    stroke: #fff;
}

.bbhg-thumb-generate-btn span {
    color: #fff;
}

/* Options Row */
.bbhg-thumb-options {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.bbhg-thumb-option {
    flex: 1;
    min-width: 150px;
}

.bbhg-thumb-option label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-thumb-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: #1f2937;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-select:focus {
    outline: none;
    border-color: #ec4899;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

/* Quick Topic Pills */
.bbhg-thumb-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.bbhg-thumb-quick-label {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-thumb-topic-pill {
    padding: 8px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    background: #fff;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-topic-pill:hover {
    border-color: #ec4899;
    color: #ec4899;
    background: rgba(236, 72, 153, 0.05);
    transform: translateY(-1px);
}

/* Loading State */
.bbhg-thumb-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-thumb-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.bbhg-thumb-loader {
    width: 80px;
    height: 80px;
    border: 3px solid rgba(236, 72, 153, 0.2);
    border-top-color: #ec4899;
    border-radius: 50%;
    animation: bbhg-thumb-spin 1s linear infinite;
}

@keyframes bbhg-thumb-spin {
    to { transform: rotate(360deg); }
}

.bbhg-thumb-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    animation: bbhg-thumb-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-thumb-bounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

.bbhg-thumb-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-thumb-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 20px;
}

.bbhg-thumb-loading-bar {
    width: 200px;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-thumb-loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #ec4899, #8b5cf6);
    border-radius: 2px;
    animation: bbhg-thumb-progress 2s ease-in-out infinite;
}

@keyframes bbhg-thumb-progress {
    0% { width: 0%; margin-left: 0; }
    50% { width: 70%; margin-left: 15%; }
    100% { width: 0%; margin-left: 100%; }
}

/* Results Section */
.bbhg-thumb-results {
    animation: bbhg-fade-in 0.3s ease;
}

.bbhg-thumb-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-thumb-results-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-thumb-results-icon {
    font-size: 24px;
}

.bbhg-thumb-results-title h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.bbhg-thumb-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-thumb-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-action-btn:hover {
    border-color: #ec4899;
    color: #ec4899;
}

.bbhg-thumb-action-btn svg {
    width: 16px;
    height: 16px;
}

.bbhg-thumb-refresh-btn {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: #fff;
    border-color: transparent;
}

.bbhg-thumb-refresh-btn:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.4);
}

.bbhg-thumb-refresh-btn svg {
    color: #fff;
    stroke: #fff;
}

.bbhg-thumb-refresh-btn span {
    color: #fff;
}

/* Images Grid */
.bbhg-thumb-images-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.bbhg-thumb-image-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.bbhg-thumb-image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.bbhg-thumb-image-wrapper {
    position: relative;
    background: #f3f4f6;
    aspect-ratio: 16/9;
    overflow: hidden;
}

.bbhg-thumb-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-thumb-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
}

.bbhg-thumb-image-card:hover .bbhg-thumb-image-overlay {
    opacity: 1;
}

.bbhg-thumb-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #fff;
    color: #1f2937;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-download-btn:hover {
    background: #ec4899;
    color: #fff;
}

.bbhg-thumb-download-btn svg {
    width: 18px;
    height: 18px;
}

.bbhg-thumb-image-info {
    padding: 16px;
    border-top: 1px solid #f3f4f6;
}

.bbhg-thumb-image-label {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.bbhg-thumb-image-size {
    font-size: 12px;
    color: #1f2937;
}

/* Text Overlay Section */
.bbhg-thumb-text-section {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    margin-bottom: 24px;
}

.bbhg-thumb-text-header {
    margin-bottom: 20px;
}

.bbhg-thumb-text-icon {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

.bbhg-thumb-text-header h4 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 4px 0;
}

.bbhg-thumb-text-header p {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
}

.bbhg-thumb-text-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.bbhg-thumb-text-item {
    background: linear-gradient(135deg, #fdf2f8 0%, #faf5ff 100%);
    border: 2px solid #f5d0fe;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-text-item:hover {
    border-color: #ec4899;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(236, 72, 153, 0.2);
}

.bbhg-thumb-text-item.copied {
    background: linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%);
    border-color: #10b981;
}

.bbhg-thumb-text-value {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-thumb-text-copy {
    font-size: 11px;
    color: #1f2937;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Prompt Section */
.bbhg-thumb-prompt-section {
    background: #1f2937;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-thumb-prompt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-thumb-prompt-icon {
    font-size: 20px;
}

.bbhg-thumb-prompt-header h4 {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    flex: 1;
}

.bbhg-thumb-copy-prompt-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-copy-prompt-btn:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.bbhg-thumb-copy-prompt-btn svg {
    width: 14px;
    height: 14px;
    stroke: #374151;
}

.bbhg-thumb-copy-prompt-btn span {
    color: #374151;
}

.bbhg-thumb-prompt-content {
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
    padding: 16px;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 13px;
    color: #d1d5db;
    line-height: 1.6;
    max-height: 150px;
    overflow-y: auto;
}

/* Empty State */
.bbhg-thumb-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-thumb-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: bbhg-float 3s ease-in-out infinite;
}

.bbhg-thumb-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.bbhg-thumb-empty p {
    font-size: 15px;
    color: #1f2937;
    max-width: 400px;
    margin: 0 auto 30px;
    line-height: 1.6;
}

.bbhg-thumb-empty-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}

.bbhg-thumb-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #f9fafb;
    border-radius: 30px;
    font-size: 13px;
    color: #1f2937;
}

.bbhg-thumb-feature-icon {
    font-size: 16px;
}

/* No API Key State */
.bbhg-thumb-no-api {
    text-align: center;
    padding: 60px 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border-radius: 16px;
    margin-top: 20px;
}

.bbhg-thumb-no-api-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-thumb-no-api h3 {
    font-size: 20px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
}

.bbhg-thumb-no-api p {
    font-size: 14px;
    color: #a16207;
    max-width: 400px;
    margin: 0 auto 20px;
}

.bbhg-thumb-api-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-api-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
    color: #fff;
}

.bbhg-thumb-api-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.bbhg-thumb-api-btn span {
    color: #fff;
}

/* Error State */
.bbhg-thumb-error {
    text-align: center;
    padding: 40px 20px;
    background: #fef2f2;
    border-radius: 16px;
    margin-top: 20px;
}

.bbhg-thumb-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-thumb-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: #dc2626;
    margin-bottom: 8px;
}

.bbhg-thumb-error p {
    font-size: 14px;
    color: #b91c1c;
    margin-bottom: 20px;
}

.bbhg-thumb-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-thumb-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(236, 72, 153, 0.4);
}

.bbhg-thumb-retry-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.bbhg-thumb-retry-btn span {
    color: #fff;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-thumb-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-thumb-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-thumb-generate-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-thumb-options {
        flex-direction: column;
    }
    
    .bbhg-thumb-option {
        width: 100%;
    }
    
    .bbhg-thumb-images-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-thumb-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-thumb-results-actions {
        width: 100%;
    }
    
    .bbhg-thumb-action-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ==================== END THUMBNAIL GENERATOR ==================== */

/* ==================== CREATOR INTEL STYLES ==================== */

.bbhg-creatorintel-container {
    padding: 0;
    max-width: 100%;
}

/* Header - Matching Question Miner Style */
.bbhg-creatorintel-header {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-creatorintel-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.1) 50%, transparent 70%);
    animation: bbhg-ci-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-ci-shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.bbhg-creatorintel-header-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-creatorintel-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.bbhg-creatorintel-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-creatorintel-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-creatorintel-header h2 {
    color: white !important;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bbhg-creatorintel-subtitle {
    color: rgba(255,255,255,0.9) !important;
    font-size: 0.9rem;
    margin: 0;
}

.bbhg-creatorintel-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 8px 16px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    z-index: 1;
}

.bbhg-creatorintel-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.bbhg-creatorintel-status .bbhg-status-text {
    color: white !important;
    font-size: 0.85rem;
    font-weight: 500;
}

/* Search Section */
.bbhg-creatorintel-input-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-creatorintel-input-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-creatorintel-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}

.bbhg-creatorintel-label svg {
    color: #8b5cf6;
    stroke: #8b5cf6;
    width: 16px;
    height: 16px;
}

.bbhg-creatorintel-search-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bbhg-creatorintel-search-wrap:focus-within .bbhg-creatorintel-at-symbol {
    color: #8b5cf6;
}

.bbhg-creatorintel-at-symbol {
    font-size: 1.2rem;
    font-weight: 700;
    color: #1f2937;
    transition: color 0.2s ease;
}

.bbhg-creatorintel-input {
    flex: 1;
    min-width: 200px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 14px 16px;
    font-size: 1rem;
    color: #000000;
    outline: none;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-input:focus {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
    background: white;
}

.bbhg-creatorintel-input::placeholder {
    color: #1f2937;
}

.bbhg-creatorintel-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-creatorintel-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-creatorintel-search-btn:active {
    transform: translateY(0);
}

.bbhg-creatorintel-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

/* Platform Section */
.bbhg-creatorintel-platform-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-creatorintel-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.bbhg-creatorintel-platform-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 10px 16px;
    color: #1f2937;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-platform-btn:hover {
    border-color: rgba(139, 92, 246, 0.4);
    background: rgba(139, 92, 246, 0.05);
    color: #8b5cf6;
}

.bbhg-creatorintel-platform-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-creatorintel-platform-btn.active .bbhg-platform-icon,
.bbhg-creatorintel-platform-btn.active .bbhg-platform-name {
    color: white !important;
}

.bbhg-creatorintel-platform-btn.active svg {
    fill: white !important;
}

.bbhg-creatorintel-platform-btn .bbhg-platform-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-creatorintel-platform-btn .bbhg-platform-name {
    font-weight: 500;
}

/* Quick Examples */
.bbhg-creatorintel-examples {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    margin-bottom: 24px;
}

.bbhg-creatorintel-example-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bbhg-creatorintel-example-tag {
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-example-tag:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* Loading State */
.bbhg-creatorintel-loading {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 40px 20px;
    text-align: center;
}

.bbhg-creatorintel-loading-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
}

.bbhg-creatorintel-search-icon-animated {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bbhg-ci-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-ci-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
    50% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(139, 92, 246, 0); }
}

.bbhg-creatorintel-search-icon-animated svg {
    width: 36px;
    height: 36px;
    stroke: white;
}

.bbhg-creatorintel-loading-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bbhg-creatorintel-loading-text span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
}

.bbhg-creatorintel-loading-dots {
    display: flex;
    gap: 6px;
}

.bbhg-creatorintel-loading-dots span {
    width: 8px;
    height: 8px;
    background: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-ci-dot-bounce 1.4s ease-in-out infinite;
}

.bbhg-creatorintel-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.bbhg-creatorintel-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bbhg-ci-dot-bounce {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; }
    40% { transform: scale(1); opacity: 1; }
}

.bbhg-creatorintel-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 300px;
    margin: 0 auto;
}

.bbhg-creatorintel-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.bbhg-creatorintel-step.active {
    opacity: 1;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.bbhg-creatorintel-step.completed {
    opacity: 0.7;
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.bbhg-creatorintel-step .step-icon {
    font-size: 1.2rem;
}

.bbhg-creatorintel-step .step-text {
    font-size: 0.9rem;
    color: #1f2937;
}

.bbhg-creatorintel-step.active .step-text {
    color: #8b5cf6;
    font-weight: 600;
}

/* Results Section */
.bbhg-creatorintel-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 100%;
    overflow-x: hidden;
}

/* Profile Card */
.bbhg-creatorintel-profile-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    overflow: hidden;
}

.bbhg-creatorintel-profile-header {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bbhg-creatorintel-avatar {
    width: 80px;
    height: 80px;
    min-width: 80px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-creatorintel-avatar svg {
    width: 40px;
    height: 40px;
    stroke: white;
}

.bbhg-creatorintel-profile-info {
    flex: 1;
    min-width: 200px;
}

.bbhg-creatorintel-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    margin: 0 0 8px 0;
}

.bbhg-creatorintel-bio {
    font-size: 0.95rem;
    color: #1f2937;
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.bbhg-creatorintel-platform-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-creatorintel-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #111827;
}

/* Quick Stats */
.bbhg-creatorintel-quick-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.bbhg-creatorintel-stat {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    text-align: center;
}

.bbhg-creatorintel-stat-icon {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 8px;
}

.bbhg-creatorintel-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 4px;
    word-break: break-word;
}

.bbhg-creatorintel-stat-label {
    font-size: 0.8rem;
    color: #1f2937;
    font-weight: 500;
}

/* Insight Tabs */
.bbhg-creatorintel-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 12px;
}

.bbhg-creatorintel-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-creatorintel-tab:hover {
    background: rgba(139, 92, 246, 0.05);
    border-color: rgba(139, 92, 246, 0.3);
    color: #8b5cf6;
}

.bbhg-creatorintel-tab.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-creatorintel-tab.active svg {
    stroke: white;
}

.bbhg-creatorintel-tab svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Insight Panels */
.bbhg-creatorintel-insight-panels {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    overflow: hidden;
}

.bbhg-creatorintel-insight-panel {
    display: none;
    padding: 24px;
}

.bbhg-creatorintel-insight-panel.active {
    display: block;
}

.bbhg-creatorintel-section {
    margin-bottom: 24px;
}

.bbhg-creatorintel-section:last-child {
    margin-bottom: 0;
}

.bbhg-creatorintel-section h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-creatorintel-section h4 svg {
    stroke: #8b5cf6;
}

/* Analysis Content */
.bbhg-creatorintel-analysis {
    color: #1f2937;
    line-height: 1.7;
}

.bbhg-creatorintel-analysis p {
    margin: 0 0 12px 0;
}

.bbhg-creatorintel-analysis p:last-child {
    margin-bottom: 0;
}

/* Strengths */
.bbhg-creatorintel-strengths {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-creatorintel-strength-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
}

.bbhg-creatorintel-strength-item .strength-icon {
    font-size: 1.2rem;
}

/* Patterns */
.bbhg-creatorintel-patterns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-creatorintel-pattern-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    gap: 12px;
}

.bbhg-creatorintel-pattern-label {
    font-size: 0.85rem;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-creatorintel-pattern-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
    text-align: right;
}

/* Content Pillars */
.bbhg-creatorintel-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-creatorintel-pillar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--bbhg-radius);
}

.bbhg-creatorintel-pillar-icon {
    font-size: 1.1rem;
}

.bbhg-creatorintel-pillar-name {
    font-weight: 500;
    color: #111827;
}

.bbhg-creatorintel-pillar-percent {
    font-size: 0.8rem;
    font-weight: 600;
    color: #8b5cf6;
    margin-left: 4px;
}

/* Content Formats */
.bbhg-creatorintel-formats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-creatorintel-format {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 0.9rem;
    color: #111827;
}

/* Viral Content */
.bbhg-creatorintel-viral {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-creatorintel-viral-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
}

.bbhg-creatorintel-viral-icon {
    font-size: 1.5rem;
}

.bbhg-creatorintel-viral-content {
    flex: 1;
    min-width: 0;
}

.bbhg-creatorintel-viral-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    word-break: break-word;
}

.bbhg-creatorintel-viral-stats {
    font-size: 0.85rem;
    color: #8b5cf6;
    font-weight: 500;
}

/* Hashtags */
.bbhg-creatorintel-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-creatorintel-hashtag {
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-hashtag:hover {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: transparent;
    color: white;
}

.bbhg-creatorintel-hashtag-categories {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-creatorintel-hashtag-category {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    padding: 16px;
}

.bbhg-creatorintel-hashtag-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.bbhg-creatorintel-hashtag-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-creatorintel-hashtag-actions {
    margin-top: 20px;
}

.bbhg-creatorintel-copy-hashtags {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-copy-hashtags:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-creatorintel-copy-hashtags svg {
    stroke: white;
}

/* Collaboration Score */
.bbhg-creatorintel-collab-score {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: var(--bbhg-radius);
    padding: 24px;
    text-align: center;
}

.bbhg-creatorintel-collab-score-value {
    font-size: 3rem;
    font-weight: 800;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 8px;
}

.bbhg-creatorintel-collab-score-label {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.bbhg-creatorintel-collab-score-desc {
    font-size: 0.9rem;
    color: #1f2937;
    line-height: 1.6;
}

/* Collab Approaches */
.bbhg-creatorintel-collab-approaches {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-creatorintel-approach {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
}

.bbhg-creatorintel-approach-icon {
    font-size: 1.5rem;
}

.bbhg-creatorintel-approach-content {
    flex: 1;
}

.bbhg-creatorintel-approach-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
}

.bbhg-creatorintel-approach-desc {
    font-size: 0.9rem;
    color: #1f2937;
    line-height: 1.5;
}

/* Similar Creators */
.bbhg-creatorintel-similar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-creatorintel-similar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-similar-item:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: rgba(139, 92, 246, 0.3);
}

.bbhg-creatorintel-similar-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.bbhg-creatorintel-similar-info {
    flex: 1;
    min-width: 0;
}

.bbhg-creatorintel-similar-name {
    font-weight: 600;
    color: #111827;
    font-size: 0.9rem;
}

.bbhg-creatorintel-similar-niche {
    font-size: 0.8rem;
    color: #1f2937;
}

/* Sources */
.bbhg-creatorintel-sources {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    padding: 16px;
}

.bbhg-creatorintel-sources-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.bbhg-creatorintel-sources-header svg {
    stroke: var(--bbhg-gray-500);
}

.bbhg-creatorintel-sources-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-creatorintel-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 6px;
    font-size: 0.85rem;
    color: #1f2937;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-source-link:hover {
    border-color: #8b5cf6;
    color: #8b5cf6;
}

/* Action Buttons */
.bbhg-creatorintel-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.bbhg-creatorintel-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-creatorintel-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-creatorintel-action-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-creatorintel-action-btn.bbhg-ci-new-search {
    background: var(--bbhg-gray-100);
    color: #111827 !important;
}

.bbhg-creatorintel-action-btn.bbhg-ci-new-search svg {
    stroke: var(--bbhg-gray-600);
}

.bbhg-creatorintel-action-btn.bbhg-ci-new-search:hover {
    background: var(--bbhg-gray-200);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Empty State */
.bbhg-creatorintel-empty {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 60px 30px;
    text-align: center;
}

.bbhg-creatorintel-empty-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-creatorintel-empty-icon svg {
    width: 50px;
    height: 50px;
    stroke: #8b5cf6;
}

.bbhg-creatorintel-empty h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 12px 0;
}

.bbhg-creatorintel-empty p {
    font-size: 1rem;
    color: #1f2937;
    line-height: 1.6;
    margin: 0 0 30px 0;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-creatorintel-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.bbhg-creatorintel-feature {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    font-size: 0.9rem;
    color: #111827;
    font-weight: 500;
}

.bbhg-creatorintel-feature .feature-icon {
    font-size: 1.2rem;
}

/* ===== RESPONSIVE STYLES ===== */

@media (max-width: 768px) {
    .bbhg-creatorintel-header {
        padding: 20px;
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-creatorintel-title-section {
        flex-direction: column;
        text-align: center;
    }
    
    .bbhg-creatorintel-icon {
        width: 50px;
        height: 50px;
    }
    
    .bbhg-creatorintel-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .bbhg-creatorintel-header h2 {
        font-size: 1.25rem;
    }
    
    .bbhg-creatorintel-input-section,
    .bbhg-creatorintel-platform-section,
    .bbhg-creatorintel-examples {
        padding: 16px;
    }
    
    .bbhg-creatorintel-search-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bbhg-creatorintel-input {
        min-width: 100%;
    }
    
    .bbhg-creatorintel-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-creatorintel-platforms {
        justify-content: center;
    }
    
    .bbhg-creatorintel-platform-btn {
        flex: 1;
        min-width: calc(50% - 5px);
        justify-content: center;
        padding: 10px 12px;
    }
    
    .bbhg-creatorintel-platform-btn .bbhg-platform-name {
        font-size: 0.8rem;
    }
    
    .bbhg-creatorintel-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .bbhg-creatorintel-profile-info {
        text-align: center;
    }
    
    .bbhg-creatorintel-platform-badges {
        justify-content: center;
    }
    
    .bbhg-creatorintel-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-creatorintel-tabs {
        padding: 8px;
        gap: 6px;
    }
    
    .bbhg-creatorintel-tab {
        flex: 1;
        min-width: calc(50% - 6px);
        justify-content: center;
        padding: 10px 12px;
        font-size: 0.8rem;
    }
    
    .bbhg-creatorintel-tab svg {
        width: 14px;
        height: 14px;
    }
    
    .bbhg-creatorintel-insight-panel {
        padding: 16px;
    }
    
    .bbhg-creatorintel-patterns {
        grid-template-columns: 1fr;
    }
    
    .bbhg-creatorintel-similar {
        grid-template-columns: 1fr;
    }
    
    .bbhg-creatorintel-actions {
        flex-direction: column;
    }
    
    .bbhg-creatorintel-action-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-creatorintel-empty {
        padding: 40px 20px;
    }
    
    .bbhg-creatorintel-empty-icon {
        width: 80px;
        height: 80px;
    }
    
    .bbhg-creatorintel-empty-icon svg {
        width: 40px;
        height: 40px;
    }
    
    .bbhg-creatorintel-features {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .bbhg-creatorintel-header {
        padding: 16px;
    }
    
    .bbhg-creatorintel-quick-stats {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    
    .bbhg-creatorintel-stat {
        padding: 12px;
    }
    
    .bbhg-creatorintel-stat-value {
        font-size: 1rem;
    }
    
    .bbhg-creatorintel-platform-btn {
        min-width: 100%;
    }
    
    .bbhg-creatorintel-tab {
        min-width: 100%;
    }
    
    .bbhg-creatorintel-pillar,
    .bbhg-creatorintel-format {
        width: 100%;
    }
    
    .bbhg-creatorintel-hashtag {
        font-size: 0.8rem;
        padding: 6px 12px;
    }
}

/* Creator Intel Confidence Indicators */
.bbhg-creatorintel-confidence-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
}

.bbhg-creatorintel-confidence-badge.confidence-high {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.08));
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.bbhg-creatorintel-confidence-badge.confidence-medium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.08));
    color: #d97706;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.bbhg-creatorintel-confidence-badge.confidence-low {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.08));
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.bbhg-creatorintel-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

.bbhg-creatorintel-disclaimer.confidence-high {
    background: rgba(34, 197, 94, 0.08);
    border-left: 3px solid #22c55e;
    color: #15803d;
}

.bbhg-creatorintel-disclaimer.confidence-medium {
    background: rgba(245, 158, 11, 0.08);
    border-left: 3px solid #f59e0b;
    color: #92400e;
}

.bbhg-creatorintel-disclaimer.confidence-low {
    background: rgba(239, 68, 68, 0.08);
    border-left: 3px solid #ef4444;
    color: #991b1b;
}

.bbhg-creatorintel-disclaimer .disclaimer-icon {
    flex-shrink: 0;
    font-size: 1rem;
}

.bbhg-creatorintel-disclaimer .disclaimer-text {
    flex: 1;
}

.bbhg-creatorintel-platform-badge.verified {
    position: relative;
}

.bbhg-creatorintel-platform-badge.unverified {
    opacity: 0.7;
    font-style: italic;
}

#bbhg-creatorintel-confidence-area {
    padding: 0 0 8px 0;
}

/* Real Name Display */
.bbhg-ci-realname {
    font-size: 0.85em;
    font-weight: 400;
    color: #1f2937;
    margin-left: 4px;
}

/* Content Style Section */
.bbhg-ci-content-style {
    display: grid;
    gap: 10px;
    padding: 15px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 10px;
    margin-top: 15px;
}

.bbhg-ci-style-item {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #1f2937;
}

.bbhg-ci-style-item strong {
    color: #4f46e5;
    margin-right: 6px;
}

/* Demographics Grid */
.bbhg-ci-demographics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-ci-demo-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(139, 92, 246, 0.03));
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, 0.15);
}

.bbhg-ci-demo-item .demo-icon {
    font-size: 1.3rem;
}

.bbhg-ci-demo-item .demo-label {
    font-size: 0.75rem;
    color: #1f2937;
    display: block;
}

.bbhg-ci-demo-item .demo-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
}

/* Earnings Section */
.bbhg-ci-earnings {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(34, 197, 94, 0.03));
    border-radius: 12px;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.bbhg-ci-earnings-amount {
    font-size: 1.8rem;
    font-weight: 700;
    color: #16a34a;
    margin-bottom: 8px;
}

.bbhg-ci-earnings-sources {
    font-size: 0.85rem;
    color: #1f2937;
    margin-bottom: 8px;
}

.bbhg-ci-earnings-confidence {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.bbhg-ci-earnings-confidence.confidence-high {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
}

.bbhg-ci-earnings-confidence.confidence-medium {
    background: rgba(245, 158, 11, 0.15);
    color: #d97706;
}

.bbhg-ci-earnings-confidence.confidence-low {
    background: rgba(239, 68, 68, 0.15);
    color: #dc2626;
}

/* Brand Deals */
.bbhg-ci-brand-deal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.03));
    border-radius: 20px;
    margin: 4px;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.bbhg-ci-brand-deal .brand-icon {
    font-size: 1rem;
}

.bbhg-ci-brand-deal .brand-name {
    font-weight: 600;
    color: #1e40af;
}

.bbhg-ci-brand-deal .brand-type {
    font-size: 0.75rem;
    color: #1f2937;
    padding-left: 8px;
    border-left: 1px solid rgba(0,0,0,0.1);
}

/* Overall Rating */
.bbhg-ci-overall-rating {
    text-align: center;
    padding: 20px;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1), rgba(249, 115, 22, 0.03));
    border-radius: 12px;
}

.bbhg-ci-overall-rating .rating-score {
    font-size: 3rem;
    font-weight: 800;
    color: #ea580c;
}

.bbhg-ci-overall-rating .rating-outof {
    font-size: 1.2rem;
    font-weight: 400;
    color: #1f2937;
}

.bbhg-ci-overall-rating .rating-summary {
    margin-top: 8px;
    font-size: 0.95rem;
    color: #1f2937;
}

/* Growth Tips */
.bbhg-ci-growth-tip {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.02));
    border-radius: 10px;
    margin-bottom: 10px;
    border-left: 3px solid #10b981;
}

.bbhg-ci-growth-tip .tip-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bbhg-ci-growth-tip .tip-text {
    font-size: 0.9rem;
    color: #1f2937;
    line-height: 1.5;
}

/* Weaknesses */
.bbhg-ci-weakness-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.05);
    border-radius: 10px;
    margin-bottom: 10px;
    border-left: 3px solid #f59e0b;
}

.bbhg-ci-weakness-item .weakness-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bbhg-ci-weakness-item .weakness-content {
    flex: 1;
}

.bbhg-ci-weakness-item .weakness-title {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 4px;
}

.bbhg-ci-weakness-item .weakness-text {
    font-size: 0.9rem;
    color: #1f2937;
}

/* Contact Info */
.bbhg-ci-contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-ci-contact-info .contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 8px;
}

.bbhg-ci-contact-info .contact-icon {
    font-size: 1.1rem;
}

.bbhg-ci-contact-info .contact-label {
    font-weight: 600;
    color: #4f46e5;
    min-width: 100px;
}

.bbhg-ci-contact-info .contact-value {
    color: #1f2937;
}

/* Sub-niches */
.bbhg-ci-subniche-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(139, 92, 246, 0.1);
    color: #7c3aed;
    border-radius: 15px;
    font-size: 0.8rem;
    margin: 3px;
}

/* Enhanced Strengths */
.bbhg-creatorintel-strength-item .strength-content {
    flex: 1;
}

.bbhg-creatorintel-strength-item .strength-title {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 2px;
}

.bbhg-creatorintel-strength-item .strength-text {
    font-size: 0.9rem;
    color: #1f2937;
}

/* Enhanced Similar Creators */
.bbhg-creatorintel-similar-followers {
    font-size: 0.75rem;
    color: #1f2937;
    margin-top: 2px;
}

.bbhg-creatorintel-similar-why {
    font-size: 0.75rem;
    color: #1f2937;
    margin-top: 4px;
    font-style: italic;
}

/* Enhanced Viral Content */
.bbhg-creatorintel-viral-why {
    font-size: 0.8rem;
    color: #1f2937;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(0,0,0,0.05);
    font-style: italic;
}

/* Dark mode support for confidence indicators */
@media (prefers-color-scheme: dark) {
    .bbhg-creatorintel-confidence-badge.confidence-high {
        background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
        color: #4ade80;
    }
    
    .bbhg-creatorintel-confidence-badge.confidence-medium {
        background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
        color: #fbbf24;
    }
    
    .bbhg-creatorintel-confidence-badge.confidence-low {
        background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
        color: #f87171;
    }
    
    .bbhg-creatorintel-disclaimer.confidence-high {
        background: rgba(34, 197, 94, 0.1);
        color: #86efac;
    }
    
    .bbhg-creatorintel-disclaimer.confidence-medium {
        background: rgba(245, 158, 11, 0.1);
        color: #fcd34d;
    }
    
    .bbhg-creatorintel-disclaimer.confidence-low {
        background: rgba(239, 68, 68, 0.1);
        color: #fca5a5;
    }
    
    .bbhg-ci-realname {
        color: #1f2937;
    }
    
    .bbhg-ci-demo-item .demo-value,
    .bbhg-ci-growth-tip .tip-text,
    .bbhg-ci-contact-info .contact-value,
    .bbhg-creatorintel-strength-item .strength-title {
        color: #e5e7eb;
    }
}

/* FORCE ALL CREATOR INTEL TEXT TO BE DARK/READABLE */
#bbhg-creatorintel-results,
#bbhg-creatorintel-results *:not(.bbhg-creatorintel-tab):not(.bbhg-creatorintel-search-btn):not(.bbhg-creatorintel-action-btn):not(.bbhg-tab-badge) {
    color: #1f2937 !important;
}

#bbhg-creatorintel-results h1,
#bbhg-creatorintel-results h2,
#bbhg-creatorintel-results h3,
#bbhg-creatorintel-results h4,
#bbhg-creatorintel-results h5,
#bbhg-creatorintel-results strong,
#bbhg-creatorintel-results b {
    color: #111827 !important;
}

/* Stats values - make them very dark/black */
#bbhg-ci-followers,
#bbhg-ci-engagement,
#bbhg-ci-niche,
#bbhg-ci-tier,
.bbhg-creatorintel-stat-value,
.bbhg-ci-stat-value {
    color: #000000 !important;
    font-weight: 600;
}

/* All text content in results */
#bbhg-creatorintel-results p,
#bbhg-creatorintel-results span,
#bbhg-creatorintel-results div,
#bbhg-creatorintel-results li,
#bbhg-creatorintel-results td,
#bbhg-creatorintel-results th {
    color: #1f2937 !important;
}

.bbhg-creatorintel-analysis,
.bbhg-creatorintel-analysis p,
.bbhg-creatorintel-strengths,
.bbhg-creatorintel-strength-item,
.bbhg-creatorintel-strength-item span,
.bbhg-creatorintel-strength-item .strength-text,
.bbhg-creatorintel-strength-item .strength-title,
.bbhg-creatorintel-weakness-item,
.bbhg-creatorintel-weakness-item span,
.bbhg-creatorintel-patterns,
.bbhg-creatorintel-pattern-item,
.bbhg-creatorintel-pattern-value,
.bbhg-creatorintel-pattern-label,
.bbhg-creatorintel-pillars,
.bbhg-creatorintel-pillar,
.bbhg-creatorintel-pillar-name,
.bbhg-creatorintel-pillar-percent,
.bbhg-creatorintel-formats,
.bbhg-creatorintel-format,
.bbhg-creatorintel-format-name,
.bbhg-creatorintel-viral,
.bbhg-creatorintel-viral-item,
.bbhg-creatorintel-viral-title,
.bbhg-creatorintel-viral-stats,
.bbhg-creatorintel-viral-why,
.bbhg-creatorintel-hashtags-list,
.bbhg-creatorintel-hashtag,
.bbhg-creatorintel-hashtag-categories,
.bbhg-creatorintel-category-name,
.bbhg-creatorintel-category-tags,
.bbhg-creatorintel-collab-score,
.bbhg-creatorintel-score-label,
.bbhg-creatorintel-score-desc,
.bbhg-creatorintel-collab-approaches,
.bbhg-creatorintel-approach,
.bbhg-creatorintel-approach-title,
.bbhg-creatorintel-approach-desc,
.bbhg-creatorintel-similar,
.bbhg-creatorintel-similar-item,
.bbhg-creatorintel-similar-name,
.bbhg-creatorintel-similar-niche,
.bbhg-creatorintel-similar-followers,
.bbhg-creatorintel-similar-why,
.bbhg-creatorintel-similar-info,
.bbhg-ci-demographics-grid,
.bbhg-ci-demo-item,
.bbhg-ci-demo-label,
.bbhg-ci-demo-value,
.bbhg-ci-content-style,
.bbhg-ci-style-item,
.bbhg-ci-earnings,
.bbhg-ci-earnings-range,
.bbhg-ci-earnings-sources,
.bbhg-ci-earnings-source,
.bbhg-ci-brand-deals,
.bbhg-ci-brand-deal,
.bbhg-ci-brand-type,
.bbhg-ci-brand-name,
.bbhg-ci-overall-rating,
.bbhg-ci-rating-score,
.bbhg-ci-rating-summary,
.bbhg-ci-growth-tips,
.bbhg-ci-growth-tip,
.bbhg-ci-growth-tip .tip-text,
.bbhg-ci-weakness-item,
.bbhg-ci-weakness-text,
.bbhg-ci-contact-info,
.bbhg-ci-contact-item,
.bbhg-ci-contact-label,
.bbhg-ci-contact-value,
.strength-text,
.weakness-text,
.tip-text {
    color: #1f2937 !important;
}

/* Ensure labels are readable but slightly lighter */
.bbhg-creatorintel-stat-label,
.bbhg-ci-stat-label {
    color: #374151 !important;
}

/* Platform badges text */
.bbhg-creatorintel-platform-badge {
    color: #1f2937 !important;
}

/* Disclaimer text */
.bbhg-creatorintel-disclaimer .disclaimer-text {
    color: #1f2937 !important;
}

/* Keep white text for dark backgrounds */
.bbhg-creatorintel-header *,
.bbhg-creatorintel-header h2,
.bbhg-creatorintel-header p,
.bbhg-creatorintel-status .bbhg-status-text,
.bbhg-creatorintel-search-btn,
.bbhg-creatorintel-search-btn *,
.bbhg-creatorintel-tab.active,
.bbhg-creatorintel-tab.active *,
.bbhg-creatorintel-action-btn:hover,
.bbhg-tab-badge,
.confidence-high,
.confidence-medium .confidence-icon,
.confidence-medium .confidence-label {
    color: white !important;
}

/* Warning Banner for Unverified Creators */
.bbhg-creatorintel-warning-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    margin-bottom: 20px;
}

.bbhg-creatorintel-warning-banner .warning-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.bbhg-creatorintel-warning-banner .warning-content h3 {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #92400e;
}

.bbhg-creatorintel-warning-banner .warning-content p {
    margin: 0;
    font-size: 0.95rem;
    color: #78350f;
    line-height: 1.5;
}

/* Check Links for Manual Verification */
.bbhg-creatorintel-check-links {
    background: #f0f9ff;
    border: 1px solid #0ea5e9;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.bbhg-creatorintel-check-links h4 {
    margin: 0 0 12px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #0369a1;
}

.check-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.check-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    border: 1px solid #0ea5e9;
    border-radius: 8px;
    color: #0369a1 !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.check-link-btn:hover {
    background: #0ea5e9;
    color: white !important;
    transform: translateY(-2px);
}

/* Unverified Stats Styling */
.unverified-stat {
    color: #374151;
    font-style: italic;
    font-size: 0.9em;
}

.bbhg-creatorintel-platform-badge.unverified {
    background: #f3f4f6;
    border: 1px dashed #6b7280;
    color: #1f2937;
}

.bbhg-creatorintel-platform-badge .check-text {
    font-size: 0.75em;
    color: #374151;
}

.no-platforms-found {
    color: #1f2937;
    font-style: italic;
    padding: 10px;
}

.no-data-message {
    color: #1f2937;
    font-style: italic;
    padding: 16px;
    text-align: center;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px dashed #9ca3af;
}

.bbhg-creatorintel-score-circle.unverified {
    background: #f3f4f6;
    border: 2px dashed #6b7280;
}

.bbhg-creatorintel-score-circle.unverified .bbhg-creatorintel-score-value {
    color: #374151;
}

/* =================================================================== */
/* CRITICAL: FORCE ALL CREATOR INTEL TEXT TO BLACK/DARK                */
/* This overrides any light grey text that may be barely visible       */
/* =================================================================== */

/* Universal dark text override for Creator Intel results */
#bbhg-creatorintel-results {
    color: #111827 !important;
}

#bbhg-creatorintel-results *:not(button):not(.bbhg-creatorintel-search-btn):not(.bbhg-creatorintel-tab):not(.bbhg-tab-badge):not(.confidence-high):not(.confidence-high *) {
    color: #1f2937 !important;
}

/* Make all headings black */
#bbhg-creatorintel-results h1,
#bbhg-creatorintel-results h2,
#bbhg-creatorintel-results h3,
#bbhg-creatorintel-results h4,
#bbhg-creatorintel-results h5,
#bbhg-creatorintel-results h6,
#bbhg-creatorintel-results strong,
#bbhg-creatorintel-results b {
    color: #000000 !important;
}

/* Make all stat values black and bold */
#bbhg-ci-followers,
#bbhg-ci-engagement,
#bbhg-ci-niche,
#bbhg-ci-tier,
.bbhg-creatorintel-stat-value,
.bbhg-ci-stat-value,
.bbhg-creatorintel-score-value {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* Make all paragraph and span text dark */
#bbhg-creatorintel-results p,
#bbhg-creatorintel-results span:not(.bbhg-tab-badge):not(.confidence-icon):not(.confidence-label),
#bbhg-creatorintel-results div:not(.confidence-high):not(.confidence-medium):not(.confidence-low),
#bbhg-creatorintel-results li,
#bbhg-creatorintel-results td,
#bbhg-creatorintel-results label {
    color: #1f2937 !important;
}

/* Specific Creator Intel elements - force dark text */
.bbhg-creatorintel-bio,
.bbhg-creatorintel-analysis p,
.bbhg-creatorintel-analysis,
#bbhg-ci-analysis,
#bbhg-ci-analysis p,
.bbhg-creatorintel-strength-item,
.bbhg-creatorintel-strength-item *,
.strength-text,
.strength-title,
.bbhg-creatorintel-weakness-item,
.bbhg-creatorintel-weakness-item *,
.weakness-text,
.weakness-title,
.bbhg-creatorintel-pattern-item,
.bbhg-creatorintel-pattern-label,
.bbhg-creatorintel-pattern-value,
.bbhg-creatorintel-pillar,
.bbhg-creatorintel-pillar-name,
.bbhg-creatorintel-pillar-percent,
.bbhg-creatorintel-format,
.bbhg-creatorintel-format-name,
.bbhg-creatorintel-viral-item,
.bbhg-creatorintel-viral-item *,
.bbhg-creatorintel-viral-title,
.bbhg-creatorintel-viral-stats,
.bbhg-creatorintel-viral-why,
.bbhg-creatorintel-hashtag,
.bbhg-creatorintel-category-name,
.bbhg-creatorintel-category-tag,
.bbhg-creatorintel-score-label,
.bbhg-creatorintel-score-desc,
.bbhg-creatorintel-approach,
.bbhg-creatorintel-approach *,
.bbhg-creatorintel-approach-title,
.bbhg-creatorintel-approach-desc,
.bbhg-creatorintel-similar-item,
.bbhg-creatorintel-similar-item *,
.bbhg-creatorintel-similar-name,
.bbhg-creatorintel-similar-niche,
.bbhg-creatorintel-similar-followers,
.bbhg-creatorintel-similar-why,
.bbhg-ci-demo-item,
.bbhg-ci-demo-label,
.bbhg-ci-demo-value,
.bbhg-ci-style-item,
.bbhg-ci-style-item *,
.bbhg-ci-earnings-range,
.bbhg-ci-earnings-source,
.bbhg-ci-brand-deal,
.bbhg-ci-brand-deal *,
.bbhg-ci-rating-summary,
.bbhg-ci-growth-tip,
.bbhg-ci-growth-tip *,
.tip-text,
.bbhg-ci-contact-item,
.bbhg-ci-contact-label,
.bbhg-ci-contact-value,
.bbhg-creatorintel-platform-badge,
.bbhg-creatorintel-disclaimer .disclaimer-text,
.no-data-message,
.unverified-stat {
    color: #1f2937 !important;
}

/* Exception: Keep white text on dark backgrounds */
.bbhg-creatorintel-header,
.bbhg-creatorintel-header *,
.bbhg-creatorintel-search-btn,
.bbhg-creatorintel-search-btn *,
.bbhg-creatorintel-tab.active,
.bbhg-creatorintel-tab.active *,
.bbhg-tab-badge,
.confidence-high,
.confidence-high * {
    color: white !important;
}

/* ==================== END CREATOR INTEL STYLES ==================== */


/* ==================== VIRAL POST ANALYZER STYLES ==================== */

.bbhg-va-container {
    padding: 0 4px;
}

/* Header Banner - Purple Gradient like Question Miner */
.bbhg-va-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl, 16px);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-va-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-va-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-va-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-va-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-va-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-va-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-va-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-va-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-va-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-va-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-va-badge-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: bbhg-va-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-va-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* Input Section */
.bbhg-va-input-section {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-va-input-group {
    margin-bottom: 20px;
}

.bbhg-va-input-group:last-child {
    margin-bottom: 0;
}

.bbhg-va-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin-bottom: 8px;
}

.bbhg-va-textarea {
    width: 100%;
    min-height: 140px;
    padding: 14px 16px;
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s ease;
    font-family: inherit;
    background: var(--bbhg-input-bg, #fff);
    color: var(--bbhg-text, #111827);
}

.bbhg-va-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-va-textarea::placeholder {
    color: var(--bbhg-text-muted, #9ca3af);
}

.bbhg-va-input-row {
    display: flex;
    gap: 16px;
}

.bbhg-va-input-half {
    flex: 1;
}

.bbhg-va-select,
.bbhg-va-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    font-size: 14px;
    background: var(--bbhg-input-bg, #fff);
    color: var(--bbhg-text, #111827);
    transition: all 0.2s ease;
}

.bbhg-va-select:focus,
.bbhg-va-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-va-stats-row {
    display: flex;
    gap: 12px;
}

.bbhg-va-stat-input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    font-size: 13px;
    background: var(--bbhg-input-bg, #fff);
    color: var(--bbhg-text, #111827);
    transition: all 0.2s ease;
}

.bbhg-va-stat-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Analyze Button */
.bbhg-va-analyze-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius-md, 8px);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 20px;
}

.bbhg-va-analyze-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.bbhg-va-analyze-btn:active {
    transform: translateY(0);
}

.bbhg-va-analyze-btn svg {
    width: 20px;
    height: 20px;
    stroke: white !important;
}

.bbhg-va-analyze-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-va-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    margin-bottom: 24px;
}

.bbhg-va-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-va-spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes bbhg-va-spin {
    to { transform: rotate(360deg); }
}

.bbhg-va-loading p {
    color: var(--bbhg-text-muted, #6b7280);
    font-size: 15px;
    margin: 0;
}

/* Results Section */
.bbhg-va-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Viral Score Card */
.bbhg-va-score-card {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 24px;
    color: white;
}

.bbhg-va-score-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-va-score-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: white !important;
    margin: 0;
}

.bbhg-va-score-value {
    font-size: 48px;
    font-weight: 800;
    color: white !important;
}

.bbhg-va-score-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
}

.bbhg-va-score-fill {
    height: 100%;
    background: white;
    border-radius: 4px;
    transition: width 1s ease-out;
    width: 0%;
}

.bbhg-va-score-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
    text-align: center;
}

/* Section Cards */
.bbhg-va-section {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
}

.bbhg-va-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-border, #e5e7eb);
}

.bbhg-va-section-icon {
    font-size: 24px;
}

.bbhg-va-section-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0;
}

/* Reasons List */
.bbhg-va-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-va-reason-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: var(--bbhg-radius-md, 8px);
    border-left: 3px solid #8b5cf6;
}

.bbhg-va-reason-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.bbhg-va-reason-content h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0 0 4px 0;
}

.bbhg-va-reason-content p {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    margin: 0;
    line-height: 1.5;
}

/* Hook Analysis */
.bbhg-va-hook-analysis {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-va-hook-item {
    padding: 16px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border-radius: var(--bbhg-radius-md, 8px);
}

.bbhg-va-hook-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8b5cf6;
    margin-bottom: 8px;
}

.bbhg-va-hook-text {
    font-size: 15px;
    color: var(--bbhg-text, #111827);
    line-height: 1.5;
    margin-bottom: 8px;
    font-style: italic;
}

.bbhg-va-hook-explanation {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    line-height: 1.5;
}

/* Emotional Triggers */
.bbhg-va-triggers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-va-trigger-tag {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 24px;
    font-size: 14px;
    color: #7c3aed;
    font-weight: 500;
}

.bbhg-va-trigger-tag span:first-child {
    font-size: 16px;
}

/* Content Structure */
.bbhg-va-structure {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-va-structure-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border-radius: var(--bbhg-radius-md, 8px);
}

.bbhg-va-structure-num {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

.bbhg-va-structure-content {
    flex: 1;
}

.bbhg-va-structure-content h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0 0 2px 0;
}

.bbhg-va-structure-content p {
    font-size: 13px;
    color: var(--bbhg-text-muted, #6b7280);
    margin: 0;
}

/* Templates */
.bbhg-va-templates {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-va-template-card {
    padding: 16px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border-radius: var(--bbhg-radius-md, 8px);
    border: 1px solid var(--bbhg-border, #e5e7eb);
}

.bbhg-va-template-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-va-template-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-va-template-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 6px;
    color: white !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-va-template-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-va-template-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: white !important;
}

.bbhg-va-template-copy-btn span {
    color: white !important;
}

.bbhg-va-template-text {
    font-size: 14px;
    color: var(--bbhg-text, #111827);
    line-height: 1.6;
    white-space: pre-wrap;
    margin: 0;
}

/* Takeaways */
.bbhg-va-takeaways {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-va-takeaway-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border-radius: var(--bbhg-radius-md, 8px);
}

.bbhg-va-takeaway-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-va-takeaway-text {
    font-size: 14px;
    color: var(--bbhg-text, #111827);
    line-height: 1.5;
    margin: 0;
}

/* Tips Section */
.bbhg-va-tips {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
    margin-top: 24px;
}

.bbhg-va-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #7c3aed;
    margin-bottom: 12px;
}

.bbhg-va-tips-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-va-tips-list li {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 640px) {
    .bbhg-va-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-va-input-row {
        flex-direction: column;
    }
    
    .bbhg-va-stats-row {
        flex-direction: column;
    }
    
    .bbhg-va-score-value {
        font-size: 36px;
    }
}

/* ==================== END VIRAL POST ANALYZER STYLES ==================== */

/* Viral Analyzer - Additional Styles for Enhanced Analysis */

/* Primary trigger highlight */
.bbhg-va-trigger-primary {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
    border-color: #8b5cf6 !important;
    color: white !important;
}

.bbhg-va-trigger-primary span {
    color: white !important;
}

.bbhg-va-trigger-strength {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.8;
    margin-left: 4px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
}

/* Structure quote */
.bbhg-va-structure-quote {
    font-size: 13px;
    font-style: italic;
    color: #8b5cf6;
    margin: 8px 0 0 0;
    padding-left: 12px;
    border-left: 2px solid #8b5cf6;
}

/* Shareability Section */
.bbhg-va-shareability {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-va-share-primary {
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: var(--bbhg-radius-md, 8px);
    border-left: 4px solid #8b5cf6;
}

.bbhg-va-share-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8b5cf6;
    margin-bottom: 8px;
}

.bbhg-va-share-primary p {
    font-size: 15px;
    color: var(--bbhg-text, #111827);
    margin: 0;
    line-height: 1.5;
}

.bbhg-va-share-triggers {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-va-share-trigger-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-text, #111827);
}

/* Improvements Section */
.bbhg-va-improvements {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-va-improvement-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-radius: var(--bbhg-radius-md, 8px);
    border-left: 3px solid #f59e0b;
}

.bbhg-va-improvement-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-va-improvement-item p {
    font-size: 14px;
    color: var(--bbhg-text, #111827);
    margin: 0;
    line-height: 1.5;
}

/* ==================== A/B HOOK TESTER STYLES ==================== */

.bbhg-ht-container {
    padding: 0 4px;
}

/* Header Banner - Purple Gradient like Question Miner */
.bbhg-ht-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl, 16px);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-ht-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-ht-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-ht-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-ht-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-ht-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-ht-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-ht-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-ht-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-ht-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-ht-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-ht-badge-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: bbhg-ht-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-ht-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* Input Section */
.bbhg-ht-input-section {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-ht-input-group {
    margin-bottom: 20px;
}

.bbhg-ht-input-group:last-child {
    margin-bottom: 0;
}

.bbhg-ht-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin-bottom: 8px;
}

.bbhg-ht-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s ease;
    font-family: inherit;
    background: var(--bbhg-input-bg, #fff);
    color: var(--bbhg-text, #111827);
}

.bbhg-ht-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-ht-textarea::placeholder {
    color: var(--bbhg-text-muted, #9ca3af);
}

.bbhg-ht-input-row {
    display: flex;
    gap: 16px;
}

.bbhg-ht-input-half {
    flex: 1;
}

.bbhg-ht-select,
.bbhg-ht-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    font-size: 14px;
    background: var(--bbhg-input-bg, #fff);
    color: var(--bbhg-text, #111827);
    transition: all 0.2s ease;
}

.bbhg-ht-select:focus,
.bbhg-ht-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Style Selection Grid */
.bbhg-ht-style-section {
    margin-bottom: 20px;
}

.bbhg-ht-style-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bbhg-ht-style-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    color: var(--bbhg-text, #111827);
}

.bbhg-ht-style-checkbox:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
}

.bbhg-ht-style-checkbox:has(input:checked) {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-color: #8b5cf6;
}

.bbhg-ht-style-checkbox input {
    display: none;
}

.bbhg-ht-style-icon {
    font-size: 16px;
}

/* Generate Button */
.bbhg-ht-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius-md, 8px);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 20px;
}

.bbhg-ht-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.bbhg-ht-generate-btn:active {
    transform: translateY(0);
}

.bbhg-ht-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white !important;
}

.bbhg-ht-generate-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-ht-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    margin-bottom: 24px;
}

.bbhg-ht-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-ht-spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes bbhg-ht-spin {
    to { transform: rotate(360deg); }
}

.bbhg-ht-loading p {
    color: var(--bbhg-text-muted, #6b7280);
    font-size: 15px;
    margin: 0;
}

/* Results Section */
.bbhg-ht-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Original Hook Card */
.bbhg-ht-original-card {
    background: var(--bbhg-subtle-bg, #f9fafb);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
}

.bbhg-ht-original-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-ht-original-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bbhg-text-muted, #6b7280);
}

.bbhg-ht-original-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-ht-score-label {
    font-size: 13px;
    color: var(--bbhg-text-muted, #6b7280);
}

.bbhg-ht-score-value {
    font-size: 18px;
    font-weight: 700;
    color: #8b5cf6;
}

.bbhg-ht-original-text {
    font-size: 16px;
    color: var(--bbhg-text, #111827);
    margin: 0 0 12px 0;
    line-height: 1.5;
    font-style: italic;
}

.bbhg-ht-original-feedback {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--bbhg-border, #e5e7eb);
}

/* Variations Header */
.bbhg-ht-variations-header {
    margin-bottom: 16px;
}

.bbhg-ht-variations-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0 0 4px 0;
}

.bbhg-ht-variations-header p {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    margin: 0;
}

/* Variations Grid */
.bbhg-ht-variations {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-ht-variation-card {
    background: var(--bbhg-card-bg, #fff);
    border: 2px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.bbhg-ht-variation-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.1);
}

.bbhg-ht-variation-card.bbhg-ht-winner-card {
    border-color: #10b981;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(16, 185, 129, 0.02) 100%);
}

.bbhg-ht-variation-rank {
    position: absolute;
    top: -10px;
    left: 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    color: white;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
}

.bbhg-ht-variation-card.bbhg-ht-winner-card .bbhg-ht-variation-rank {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.bbhg-ht-variation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-top: 8px;
}

.bbhg-ht-variation-style {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
}

.bbhg-ht-variation-style-icon {
    font-size: 18px;
}

.bbhg-ht-variation-score {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    color: #8b5cf6;
}

.bbhg-ht-variation-text {
    font-size: 16px;
    color: var(--bbhg-text, #111827);
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.bbhg-ht-variation-analysis {
    padding-top: 12px;
    border-top: 1px solid var(--bbhg-border, #e5e7eb);
}

.bbhg-ht-variation-why {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.bbhg-ht-variation-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-ht-variation-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--bbhg-subtle-bg, #f3f4f6);
    border-radius: 12px;
    font-size: 12px;
    color: var(--bbhg-text-muted, #6b7280);
}

.bbhg-ht-variation-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.bbhg-ht-copy-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 6px;
    color: white !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ht-copy-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-ht-copy-btn svg {
    width: 14px;
    height: 14px;
    stroke: white !important;
}

.bbhg-ht-copy-btn span {
    color: white !important;
}

/* Winner Section */
.bbhg-ht-winner {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 24px;
    color: white;
}

.bbhg-ht-winner-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-ht-winner-icon {
    font-size: 32px;
}

.bbhg-ht-winner-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: white !important;
    margin: 0;
}

.bbhg-ht-winner-content {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--bbhg-radius-md, 8px);
    padding: 16px;
}

.bbhg-ht-winner-text {
    font-size: 18px;
    color: white !important;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.bbhg-ht-winner-reason {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

/* Insights Section */
.bbhg-ht-insights {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
}

.bbhg-ht-insights-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-border, #e5e7eb);
}

.bbhg-ht-insights-header span:first-child {
    font-size: 20px;
}

.bbhg-ht-insights-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0;
}

.bbhg-ht-insights-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-ht-insight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: var(--bbhg-radius-md, 8px);
}

.bbhg-ht-insight-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.bbhg-ht-insight-text {
    font-size: 14px;
    color: var(--bbhg-text, #111827);
    margin: 0;
    line-height: 1.5;
}

/* Tips Section */
.bbhg-ht-tips {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
    margin-top: 24px;
}

.bbhg-ht-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #7c3aed;
    margin-bottom: 12px;
}

.bbhg-ht-tips-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-ht-tips-list li {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-ht-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-ht-input-row {
        flex-direction: column;
    }
    
    .bbhg-ht-style-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .bbhg-ht-style-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== END A/B HOOK TESTER STYLES ==================== */

/* ==================== CREATOR MODE (WHAT WOULD THEY POST) STYLES ==================== */

.bbhg-cm2-container {
    padding: 0 4px;
}

/* Header Banner - Purple Gradient like Question Miner */
.bbhg-cm2-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl, 16px);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-cm2-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-cm2-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-cm2-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-cm2-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-cm2-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-cm2-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-cm2-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-cm2-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-cm2-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-cm2-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-cm2-badge-dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: bbhg-cm2-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-cm2-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.2); }
}

/* Input Section */
.bbhg-cm2-input-section {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 24px;
    margin-bottom: 24px;
}

.bbhg-cm2-input-group {
    margin-bottom: 20px;
}

.bbhg-cm2-input-group:last-child {
    margin-bottom: 0;
}

.bbhg-cm2-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin-bottom: 12px;
}

/* Creator Grid */
.bbhg-cm2-creator-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bbhg-cm2-creator-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border: 2px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bbhg-cm2-creator-btn:hover {
    border-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.05);
    transform: translateY(-2px);
}

.bbhg-cm2-creator-btn.active {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.bbhg-cm2-creator-avatar {
    font-size: 32px;
    line-height: 1;
}

.bbhg-cm2-creator-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
}

.bbhg-cm2-creator-style {
    font-size: 11px;
    color: var(--bbhg-text-muted, #6b7280);
}

/* Custom Input */
.bbhg-cm2-custom-input {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: var(--bbhg-radius-md, 8px);
}

.bbhg-cm2-textarea {
    width: 100%;
    min-height: 100px;
    padding: 14px 16px;
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s ease;
    font-family: inherit;
    background: var(--bbhg-input-bg, #fff);
    color: var(--bbhg-text, #111827);
}

.bbhg-cm2-textarea:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.bbhg-cm2-textarea::placeholder {
    color: var(--bbhg-text-muted, #9ca3af);
}

.bbhg-cm2-input-row {
    display: flex;
    gap: 16px;
}

.bbhg-cm2-input-half {
    flex: 1;
}

.bbhg-cm2-select,
.bbhg-cm2-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-md, 8px);
    font-size: 14px;
    background: var(--bbhg-input-bg, #fff);
    color: var(--bbhg-text, #111827);
    transition: all 0.2s ease;
}

.bbhg-cm2-select:focus,
.bbhg-cm2-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

/* Generate Button */
.bbhg-cm2-generate-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius-md, 8px);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 20px;
}

.bbhg-cm2-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.bbhg-cm2-generate-btn:active {
    transform: translateY(0);
}

.bbhg-cm2-generate-btn svg {
    width: 20px;
    height: 20px;
    stroke: white !important;
}

.bbhg-cm2-generate-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-cm2-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    margin-bottom: 24px;
}

.bbhg-cm2-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-cm2-spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes bbhg-cm2-spin {
    to { transform: rotate(360deg); }
}

.bbhg-cm2-loading p {
    color: var(--bbhg-text-muted, #6b7280);
    font-size: 15px;
    margin: 0;
}

/* Results Section */
.bbhg-cm2-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Style Card */
.bbhg-cm2-style-card {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 24px;
    color: white;
}

.bbhg-cm2-style-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-cm2-style-avatar {
    font-size: 48px;
    line-height: 1;
}

.bbhg-cm2-style-header h3 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
}

.bbhg-cm2-style-header p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-cm2-style-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-cm2-style-trait {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white !important;
    backdrop-filter: blur(10px);
}

/* Content Section */
.bbhg-cm2-content-section {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
}

.bbhg-cm2-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-border, #e5e7eb);
}

.bbhg-cm2-content-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0;
}

.bbhg-cm2-copy-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: 6px;
    color: white !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cm2-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-cm2-copy-all-btn svg {
    width: 14px;
    height: 14px;
    stroke: white !important;
}

.bbhg-cm2-copy-all-btn span {
    color: white !important;
}

.bbhg-cm2-content-body {
    font-size: 15px;
    color: var(--bbhg-text, #111827);
    line-height: 1.8;
    white-space: pre-wrap;
}

.bbhg-cm2-content-body .bbhg-cm2-thread-item {
    padding: 16px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border-radius: var(--bbhg-radius-md, 8px);
    margin-bottom: 12px;
    border-left: 3px solid #8b5cf6;
}

.bbhg-cm2-content-body .bbhg-cm2-thread-num {
    font-size: 12px;
    font-weight: 600;
    color: #8b5cf6;
    margin-bottom: 8px;
}

/* Breakdown Section */
.bbhg-cm2-breakdown-section {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
}

.bbhg-cm2-breakdown-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-border, #e5e7eb);
}

.bbhg-cm2-breakdown-header span:first-child {
    font-size: 20px;
}

.bbhg-cm2-breakdown-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0;
}

.bbhg-cm2-breakdown-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-cm2-breakdown-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: var(--bbhg-radius-md, 8px);
    border-left: 3px solid #8b5cf6;
}

.bbhg-cm2-breakdown-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.bbhg-cm2-breakdown-text h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0 0 4px 0;
}

.bbhg-cm2-breakdown-text p {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    margin: 0;
    line-height: 1.5;
}

/* Learning Section */
.bbhg-cm2-learning-section {
    background: var(--bbhg-card-bg, #fff);
    border: 1px solid var(--bbhg-border, #e5e7eb);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
}

.bbhg-cm2-learning-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-border, #e5e7eb);
}

.bbhg-cm2-learning-header span:first-child {
    font-size: 20px;
}

.bbhg-cm2-learning-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-text, #111827);
    margin: 0;
}

.bbhg-cm2-learning-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-cm2-learning-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--bbhg-subtle-bg, #f9fafb);
    border-radius: var(--bbhg-radius-md, 8px);
}

.bbhg-cm2-learning-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.bbhg-cm2-learning-text {
    font-size: 14px;
    color: var(--bbhg-text, #111827);
    margin: 0;
    line-height: 1.5;
}

/* Tips Section */
.bbhg-cm2-tips {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: var(--bbhg-radius-lg, 12px);
    padding: 20px;
    margin-top: 24px;
}

.bbhg-cm2-tips-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #7c3aed;
    margin-bottom: 12px;
}

.bbhg-cm2-tips-list {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-cm2-tips-list li {
    font-size: 14px;
    color: var(--bbhg-text-muted, #6b7280);
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-cm2-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-cm2-creator-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-cm2-input-row {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .bbhg-cm2-creator-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================== END CREATOR MODE STYLES ==================== */

/* ==================== CONTENT HOROSCOPE STYLES ==================== */

.bbhg-ch-container {
    padding: 0 4px;
}

/* Header Banner - Purple Gradient like Question Miner */
.bbhg-ch-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-ch-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-ch-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-ch-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-ch-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-ch-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-ch-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-ch-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-ch-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-ch-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-ch-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-ch-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-ch-status .bbhg-status-text {
    color: white !important;
}

/* Zodiac Selection */
.bbhg-ch-zodiac-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-ch-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 16px;
}

.bbhg-ch-zodiac-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.bbhg-ch-zodiac-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 12px;
    background: var(--bbhg-gray-100);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ch-zodiac-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: #8b5cf6;
}

.bbhg-ch-zodiac-btn.active {
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-color: #8b5cf6;
    color: white;
}

.bbhg-ch-zodiac-btn.active .bbhg-ch-zodiac-name,
.bbhg-ch-zodiac-btn.active .bbhg-ch-zodiac-dates {
    color: white !important;
}

.bbhg-ch-zodiac-emoji {
    font-size: 28px;
    line-height: 1;
}

.bbhg-ch-zodiac-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-ch-zodiac-dates {
    font-size: 10px;
    color: var(--bbhg-gray-500);
}

/* Niche Input */
.bbhg-ch-niche-input {
    border-top: 1px solid var(--bbhg-gray-200);
    padding-top: 20px;
}

.bbhg-ch-input-wrap {
    display: flex;
    gap: 12px;
    align-items: center;
}

.bbhg-ch-input-container {
    position: relative;
    flex: 1;
}

.bbhg-ch-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-ch-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-ch-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-ch-input:focus {
    border-color: #8b5cf6;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.bbhg-ch-input::placeholder {
    color: #374151;
}

.bbhg-ch-reveal-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-ch-reveal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-ch-reveal-btn:active {
    transform: translateY(0);
}

.bbhg-ch-reveal-btn svg {
    width: 18px;
    height: 18px;
    stroke: white !important;
}

.bbhg-ch-reveal-btn span {
    color: white !important;
}

/* Loading State */
.bbhg-ch-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-ch-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.bbhg-ch-loader {
    width: 80px;
    height: 80px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-ch-spin 1s linear infinite;
}

@keyframes bbhg-ch-spin {
    to { transform: rotate(360deg); }
}

.bbhg-ch-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    animation: bbhg-ch-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-ch-bounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

.bbhg-ch-loading-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 8px;
}

.bbhg-ch-loading-text {
    font-size: 14px;
    color: var(--bbhg-gray-500);
}

/* Horoscope Results Card */
.bbhg-ch-horoscope-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    overflow: hidden;
}

.bbhg-ch-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    color: white;
}

.bbhg-ch-card-sign {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bbhg-ch-card-emoji {
    font-size: 48px;
    line-height: 1;
}

.bbhg-ch-card-info h3 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
}

.bbhg-ch-card-date {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-ch-card-element {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.bbhg-ch-card-body {
    padding: 24px;
}

/* Add visual separation between all horoscope sections */
.bbhg-ch-card-body > div + div {
    margin-top: 20px;
}

/* Reading Section */
.bbhg-ch-reading-section {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-ch-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 12px;
}

.bbhg-ch-reading-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bbhg-ch-reading-item {
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: var(--bbhg-radius);
    border-left: 3px solid #8b5cf6;
}

.bbhg-ch-reading-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-500);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.bbhg-ch-reading-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

/* Lucky Elements */
.bbhg-ch-lucky-section {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-ch-lucky-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bbhg-ch-lucky-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    text-align: center;
}

.bbhg-ch-lucky-icon {
    font-size: 24px;
    line-height: 1;
}

.bbhg-ch-lucky-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--bbhg-gray-500);
    text-transform: uppercase;
}

.bbhg-ch-lucky-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

/* Predictions */
.bbhg-ch-predictions-section {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-ch-predictions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bbhg-ch-prediction-card {
    padding: 20px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
}

.bbhg-ch-prediction-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    margin-bottom: 12px;
}

.bbhg-ch-prediction-bar {
    height: 8px;
    background: var(--bbhg-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.bbhg-ch-prediction-fill {
    height: 100%;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bbhg-ch-prediction-value {
    font-size: 20px;
    font-weight: 700;
    color: #8b5cf6;
}

/* Content Ideas */
.bbhg-ch-ideas-section {
    margin-bottom: 24px;
}

.bbhg-ch-ideas-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-ch-idea-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-ch-idea-item:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1), rgba(99, 102, 241, 0.1));
}

.bbhg-ch-idea-text {
    font-size: 14px;
    color: var(--bbhg-gray-800);
    flex: 1;
}

.bbhg-ch-idea-copy {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    color: var(--bbhg-gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-ch-idea-copy:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.bbhg-ch-idea-copy svg {
    width: 16px;
    height: 16px;
}

/* Affirmation & Warning */
.bbhg-ch-guidance-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bbhg-ch-affirmation {
    padding: 20px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--bbhg-radius);
}

.bbhg-ch-affirmation-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #10b981;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bbhg-ch-affirmation-text {
    font-size: 14px;
    color: var(--bbhg-gray-800);
    font-style: italic;
}

.bbhg-ch-warning {
    padding: 20px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--bbhg-radius);
}

.bbhg-ch-warning-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #f59e0b;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.bbhg-ch-warning-text {
    font-size: 14px;
    color: var(--bbhg-gray-800);
}

/* Empty State */
.bbhg-ch-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-ch-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.bbhg-ch-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-ch-empty p {
    font-size: 15px;
    color: var(--bbhg-gray-600);
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-ch-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-ch-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bbhg-gray-700);
}

.bbhg-ch-feature-icon {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-ch-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-ch-zodiac-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .bbhg-ch-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-ch-reveal-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-ch-reading-grid,
    .bbhg-ch-lucky-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-ch-guidance-section {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .bbhg-ch-zodiac-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .bbhg-ch-predictions-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================== END CONTENT HOROSCOPE STYLES ==================== */

/* ==================== HOOK SLOT MACHINE STYLES ==================== */

.bbhg-hsm-container {
    padding: 0 4px;
}

/* Header Banner - Purple/Gold Gradient */
.bbhg-hsm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-hsm-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-hsm-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-hsm-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-hsm-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-hsm-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-hsm-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-hsm-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-hsm-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-hsm-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-hsm-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-hsm-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-hsm-status .bbhg-status-text {
    color: white !important;
}

/* Slot Machine Section */
.bbhg-hsm-machine-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 32px;
    margin-bottom: 20px;
}

.bbhg-hsm-machine {
    max-width: 600px;
    margin: 0 auto;
}

.bbhg-hsm-reel-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 24px;
}

.bbhg-hsm-reel {
    background: linear-gradient(135deg, var(--bbhg-gray-100) 0%, var(--bbhg-gray-50) 100%);
    border: 3px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius);
    padding: 12px 8px;
    text-align: center;
    position: relative;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    max-width: 120px;
}

.bbhg-hsm-reel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.8), transparent);
    pointer-events: none;
}

.bbhg-hsm-reel::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20%;
    background: linear-gradient(to top, rgba(255,255,255,0.8), transparent);
    pointer-events: none;
}

.bbhg-hsm-reel-inner {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.bbhg-hsm-reel-item {
    font-size: 28px;
    line-height: 1;
}

.bbhg-hsm-reel.spinning .bbhg-hsm-reel-inner {
    animation: bbhg-hsm-reel-spin 0.1s linear infinite;
}

@keyframes bbhg-hsm-reel-spin {
    0% { transform: translateY(-100%); opacity: 0; }
    50% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(100%); opacity: 0; }
}

.bbhg-hsm-reel-label {
    font-size: 9px;
    font-weight: 700;
    color: var(--bbhg-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 8px;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Niche Input */
.bbhg-hsm-niche-input {
    margin-bottom: 24px;
}

.bbhg-hsm-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    margin-bottom: 8px;
}

.bbhg-hsm-input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-hsm-input:focus {
    border-color: #8b5cf6;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

/* Spin Controls */
.bbhg-hsm-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    padding: 20px 24px;
    border-radius: var(--bbhg-radius);
    margin-top: 20px;
}

.bbhg-hsm-count-control {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-hsm-count-control label {
    font-size: 13px;
    font-weight: 600;
    color: white !important;
}

.bbhg-hsm-count-btns {
    display: flex;
    gap: 6px;
}

.bbhg-hsm-count-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--bbhg-radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-hsm-count-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

.bbhg-hsm-count-btn.active {
    background: white;
    border-color: white;
    color: #8b5cf6 !important;
}

.bbhg-hsm-spin-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 40px;
    background: white;
    border: none;
    border-radius: var(--bbhg-radius);
    color: #8b5cf6 !important;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.bbhg-hsm-spin-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}

.bbhg-hsm-spin-btn:active {
    transform: translateY(0);
}

.bbhg-hsm-spin-btn svg {
    width: 22px;
    height: 22px;
    stroke: #8b5cf6 !important;
}

.bbhg-hsm-spin-btn span {
    color: #8b5cf6 !important;
}

.bbhg-hsm-spin-btn.spinning svg {
    animation: bbhg-hsm-btn-spin 0.5s linear infinite;
}

@keyframes bbhg-hsm-btn-spin {
    to { transform: rotate(360deg); }
}

/* Loading State */
.bbhg-hsm-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-hsm-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}

.bbhg-hsm-loader {
    width: 80px;
    height: 80px;
    border: 3px solid rgba(139, 92, 246, 0.2);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-hsm-spin 1s linear infinite;
}

@keyframes bbhg-hsm-spin {
    to { transform: rotate(360deg); }
}

.bbhg-hsm-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    animation: bbhg-hsm-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-hsm-bounce {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.2); }
}

.bbhg-hsm-loading-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 8px;
}

.bbhg-hsm-loading-text {
    font-size: 14px;
    color: var(--bbhg-gray-500);
}

/* Jackpot Animation */
.bbhg-hsm-jackpot {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: bbhg-hsm-jackpot-fade 0.3s ease;
}

@keyframes bbhg-hsm-jackpot-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.bbhg-hsm-jackpot-content {
    text-align: center;
    animation: bbhg-hsm-jackpot-pop 0.5s ease;
}

@keyframes bbhg-hsm-jackpot-pop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.bbhg-hsm-jackpot-emoji {
    font-size: 80px;
    display: block;
    margin-bottom: 20px;
    animation: bbhg-hsm-jackpot-bounce 0.5s ease infinite alternate;
}

@keyframes bbhg-hsm-jackpot-bounce {
    from { transform: translateY(0); }
    to { transform: translateY(-20px); }
}

.bbhg-hsm-jackpot h3 {
    font-size: 48px;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
    margin: 0 0 10px 0;
}

.bbhg-hsm-jackpot p {
    font-size: 18px;
    color: white;
}

/* Results Section */
.bbhg-hsm-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
}

.bbhg-hsm-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-hsm-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-hsm-results-icon {
    font-size: 24px;
}

.bbhg-hsm-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-hsm-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-hsm-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius-sm);
    color: white !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-hsm-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-hsm-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-hsm-action-btn span {
    color: white !important;
}

/* Hooks Grid */
.bbhg-hsm-hooks-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.bbhg-hsm-hook-card {
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    transition: all 0.2s ease;
}

.bbhg-hsm-hook-card:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.05) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-color: rgba(139, 92, 246, 0.3);
}

.bbhg-hsm-hook-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.bbhg-hsm-hook-score {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-hsm-score-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.bbhg-hsm-score-badge.high {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
}

.bbhg-hsm-hook-actions {
    display: flex;
    gap: 6px;
}

.bbhg-hsm-hook-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    color: var(--bbhg-gray-500);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-hsm-hook-btn:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.bbhg-hsm-hook-btn svg {
    width: 16px;
    height: 16px;
}

.bbhg-hsm-hook-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--bbhg-gray-800);
    line-height: 1.5;
    margin-bottom: 12px;
}

.bbhg-hsm-hook-platforms {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bbhg-hsm-platform-tag {
    padding: 4px 10px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bbhg-gray-600);
}

/* Empty State */
.bbhg-hsm-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-gray-100);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-hsm-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.bbhg-hsm-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-hsm-empty p {
    font-size: 15px;
    color: var(--bbhg-gray-600);
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-hsm-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-hsm-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--bbhg-gray-700);
}

.bbhg-hsm-feature-icon {
    font-size: 18px;
}

/* ==================== DETAILED HOOK CARD STYLES ==================== */
.bbhg-hsm-hook-card-detailed {
    background: white;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 0;
    overflow: hidden;
}

.bbhg-hsm-hook-card-detailed:hover {
    border-color: #8b5cf6;
    box-shadow: 0 8px 30px rgba(139, 92, 246, 0.15);
}

.bbhg-hsm-hook-header-detailed {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-hsm-category-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.bbhg-hsm-category-emoji {
    font-size: 16px;
}

.bbhg-hsm-category-name {
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.bbhg-hsm-score-container {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-hsm-score-badge.medium {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.bbhg-hsm-char-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.bbhg-hsm-hook-main {
    padding: 20px;
    background: linear-gradient(180deg, #f8f7ff 0%, #ffffff 100%);
    border-bottom: 1px solid var(--bbhg-gray-200);
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.bbhg-hsm-hook-text-large {
    flex: 1;
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.5;
}

.bbhg-hsm-copy-main-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.bbhg-hsm-copy-main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

.bbhg-hsm-copy-main-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-hsm-copy-main-btn span {
    color: white;
}

.bbhg-hsm-hook-breakdown {
    padding: 16px 20px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bbhg-hsm-breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bbhg-hsm-breakdown-label {
    font-size: 11px;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-hsm-breakdown-value {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.4;
}

.bbhg-hsm-score-breakdown {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--bbhg-gray-200);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.bbhg-hsm-score-bar-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-hsm-bar-label {
    font-size: 12px;
    color: var(--bbhg-gray-600);
    min-width: 80px;
}

.bbhg-hsm-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bbhg-gray-200);
    border-radius: 4px;
    overflow: hidden;
}

.bbhg-hsm-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #8b5cf6, #6366f1);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.bbhg-hsm-bar-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    min-width: 30px;
    text-align: right;
}

.bbhg-hsm-platforms-detailed {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-hsm-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

.bbhg-hsm-platforms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.bbhg-hsm-platform-card {
    padding: 12px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    text-align: center;
}

.bbhg-hsm-platform-card.perfect {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-color: #10b981;
}

.bbhg-hsm-platform-card.good {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
    border-color: #f59e0b;
}

.bbhg-hsm-platform-card.warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(220, 38, 38, 0.1) 100%);
    border-color: #ef4444;
}

.bbhg-hsm-platform-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 8px;
}

.bbhg-hsm-platform-emoji {
    font-size: 16px;
}

.bbhg-hsm-platform-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-hsm-platform-chars {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    margin-bottom: 6px;
}

.bbhg-hsm-platform-tip {
    font-size: 11px;
    color: var(--bbhg-gray-500);
    line-height: 1.4;
}

.bbhg-hsm-variations {
    padding: 16px 20px;
    background: var(--bbhg-gray-50);
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-hsm-variations-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-hsm-variation-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
}

.bbhg-hsm-variation-label {
    font-size: 11px;
    font-weight: 600;
    color: #8b5cf6;
    text-transform: uppercase;
    padding: 4px 8px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 4px;
    flex-shrink: 0;
}

.bbhg-hsm-variation-text {
    flex: 1;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.4;
}

.bbhg-hsm-variation-copy {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 14px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.bbhg-hsm-variation-copy:hover {
    opacity: 1;
}

.bbhg-hsm-tips,
.bbhg-hsm-content-ideas {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-hsm-tips-list,
.bbhg-hsm-ideas-list {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
}

.bbhg-hsm-tips-list li,
.bbhg-hsm-ideas-list li {
    position: relative;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
    padding: 6px 0;
}

.bbhg-hsm-tips-list li::before {
    content: "";
    position: absolute;
    left: -16px;
    top: 14px;
    width: 6px;
    height: 6px;
    background: #8b5cf6;
    border-radius: 50%;
}

.bbhg-hsm-ideas-list li::before {
    content: "→";
    position: absolute;
    left: -18px;
    color: #8b5cf6;
    font-weight: bold;
}

.bbhg-hsm-bottom-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.bbhg-hsm-hashtags,
.bbhg-hsm-posting-times {
    padding: 16px 20px;
    background: var(--bbhg-gray-50);
}

.bbhg-hsm-hashtags {
    border-right: 1px solid var(--bbhg-gray-200);
}

.bbhg-hsm-mini-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-hsm-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.bbhg-hsm-hashtag {
    padding: 4px 10px;
    background: white;
    border: 1px solid #8b5cf6;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    color: #8b5cf6;
}

.bbhg-hsm-copy-hashtags {
    padding: 6px 12px;
    background: #8b5cf6;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    font-size: 11px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-hsm-copy-hashtags:hover {
    background: #7c3aed;
}

.bbhg-hsm-time-item {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    padding: 6px 0;
    line-height: 1.4;
}

/* ==================== END DETAILED HOOK CARD STYLES ==================== */

/* Responsive */
@media (max-width: 768px) {
    .bbhg-hsm-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-hsm-controls {
        flex-direction: column;
        gap: 16px;
    }
    
    .bbhg-hsm-spin-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-hsm-results-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }
    
    .bbhg-hsm-hook-breakdown {
        grid-template-columns: 1fr;
    }
    
    .bbhg-hsm-score-breakdown {
        grid-template-columns: 1fr;
    }
    
    .bbhg-hsm-platforms-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-hsm-bottom-section {
        grid-template-columns: 1fr;
    }
    
    .bbhg-hsm-hashtags {
        border-right: none;
        border-bottom: 1px solid var(--bbhg-gray-200);
    }
    
    .bbhg-hsm-hook-main {
        flex-direction: column;
        gap: 12px;
    }
    
    .bbhg-hsm-copy-main-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .bbhg-hsm-reel-container {
        flex-direction: row;
        gap: 6px;
    }
    
    .bbhg-hsm-reel {
        padding: 10px 6px;
        border-width: 2px;
        max-width: 100px;
    }
    
    .bbhg-hsm-reel-inner {
        min-height: 36px;
    }
    
    .bbhg-hsm-reel-item {
        font-size: 22px;
    }
    
    .bbhg-hsm-reel-label {
        font-size: 8px;
        letter-spacing: 0;
        margin-top: 6px;
    }
}

/* ==================== END HOOK SLOT MACHINE STYLES ==================== */


/* ==================== ENHANCED HOROSCOPE STYLES ==================== */

/* AI Insights Section */
.bbhg-ch-ai-section {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.bbhg-ch-ai-section .bbhg-ch-section-title {
    color: #a5b4fc;
    margin-bottom: 15px;
}

.bbhg-ch-ai-reading {
    color: #e0e7ff;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.bbhg-ch-ai-idea,
.bbhg-ch-ai-hook,
.bbhg-ch-ai-tip,
.bbhg-ch-ai-power {
    color: #c7d2fe;
    font-size: 14px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--bbhg-radius-md);
    margin-bottom: 10px;
    line-height: 1.5;
}

.bbhg-ch-ai-hook {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bbhg-ch-copy-btn {
    background: rgba(139, 92, 246, 0.3);
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.bbhg-ch-copy-btn:hover {
    background: rgba(139, 92, 246, 0.5);
}

/* Content Archetype Badge */
.bbhg-ch-archetype-badge {
    background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    border-radius: var(--bbhg-radius-lg);
    padding: 15px 20px;
    margin: 16px 0 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bbhg-ch-archetype-title {
    font-weight: 700;
    font-size: 16px;
    color: white;
}

.bbhg-ch-archetype-desc {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.85);
}

/* Planetary Section */
.bbhg-ch-planetary-section {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
}

.bbhg-ch-planetary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 15px;
}

.bbhg-ch-planetary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.bbhg-ch-planetary-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--bbhg-gray-500);
    letter-spacing: 0.5px;
}

.bbhg-ch-planetary-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-900);
}

.bbhg-ch-planetary-energy {
    font-size: 13px;
    color: var(--bbhg-gray-600);
}

.bbhg-ch-planetary-tip {
    font-size: 13px;
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    padding: 10px 15px;
    border-radius: var(--bbhg-radius-md);
    margin-top: 10px;
}

/* Harmony Badge */
.bbhg-ch-harmony-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--bbhg-radius-md);
    margin: 12px 0;
}

.bbhg-ch-harmony-high {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(22, 163, 74, 0.1));
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.bbhg-ch-harmony-medium {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.bbhg-ch-harmony-low {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.bbhg-ch-harmony-icon {
    font-size: 20px;
}

.bbhg-ch-harmony-text {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    font-weight: 500;
}

/* Element Harmony Section */
.bbhg-ch-element-section {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(249, 115, 22, 0.05));
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid rgba(239, 68, 68, 0.1);
}

.bbhg-ch-element-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-ch-element-match {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.bbhg-ch-element-yours,
.bbhg-ch-element-today {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: white;
    padding: 8px 16px;
    border-radius: var(--bbhg-radius-full);
    font-weight: 600;
    font-size: 14px;
}

.bbhg-ch-element-plus {
    font-size: 18px;
    color: var(--bbhg-gray-400);
    font-weight: bold;
}

.bbhg-ch-element-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.bbhg-ch-element-level {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: var(--bbhg-radius-full);
    min-width: 80px;
    text-align: center;
}

.bbhg-ch-level-blazing,
.bbhg-ch-level-electric,
.bbhg-ch-level-deep {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
}

.bbhg-ch-level-harmonious,
.bbhg-ch-level-fertile,
.bbhg-ch-level-grounded,
.bbhg-ch-level-dynamic {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
}

.bbhg-ch-level-productive,
.bbhg-ch-level-flowing,
.bbhg-ch-level-misty,
.bbhg-ch-level-steamy {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.bbhg-ch-level-challenging {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: white;
}

.bbhg-ch-element-bar {
    flex: 1;
    height: 8px;
    background: var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-full);
    overflow: hidden;
}

.bbhg-ch-element-fill {
    height: 100%;
    background: linear-gradient(90deg, #f97316, #ef4444);
    border-radius: var(--bbhg-radius-full);
    transition: width 0.5s ease;
}

.bbhg-ch-element-score {
    font-weight: 700;
    font-size: 14px;
    color: #f97316;
    min-width: 40px;
    text-align: right;
}

.bbhg-ch-element-message {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    text-align: center;
    font-style: italic;
    padding-top: 8px;
    border-top: 1px solid rgba(249, 115, 22, 0.2);
}

/* Ruling Planet Status Section */
.bbhg-ch-ruler-section {
    margin-bottom: 20px;
    padding: 4px 0;
}

.bbhg-ch-ruler-card {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: var(--bbhg-radius-lg);
    padding: 16px;
}

.bbhg-ch-ruler-status {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin-bottom: 8px;
}

.bbhg-ch-ruler-effect {
    font-size: 14px;
    color: var(--bbhg-gray-600);
    margin-bottom: 12px;
}

.bbhg-ch-ruler-power {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--bbhg-gray-500);
}

.bbhg-ch-ruler-power span:first-child {
    font-weight: 600;
}

.bbhg-ch-ruler-bar {
    flex: 1;
    height: 6px;
    background: var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-full);
    overflow: hidden;
}

.bbhg-ch-ruler-fill {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: var(--bbhg-radius-full);
    transition: width 0.5s ease;
}

/* Cosmic Transit Section */
.bbhg-ch-transit-section {
    margin-bottom: 20px;
}

.bbhg-ch-transit-card {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--bbhg-radius-lg);
    padding: 16px;
    text-align: center;
}

.bbhg-ch-transit-insight {
    font-size: 15px;
    color: var(--bbhg-gray-800);
    font-style: italic;
    line-height: 1.5;
    margin-bottom: 10px;
}

.bbhg-ch-transit-confidence {
    font-size: 12px;
    color: #7c3aed;
    font-weight: 600;
}

/* Hook Suggestions Section */
.bbhg-ch-hooks-section {
    margin-bottom: 20px;
}

.bbhg-ch-hooks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-ch-hook-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--bbhg-gray-50);
    padding: 12px 15px;
    border-radius: var(--bbhg-radius-md);
    border-left: 3px solid #f59e0b;
}

.bbhg-ch-hook-text {
    flex: 1;
    font-size: 14px;
    color: var(--bbhg-gray-800);
    line-height: 1.4;
}

/* Hashtag Section */
.bbhg-ch-hashtags-section {
    margin-bottom: 20px;
}

.bbhg-ch-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.bbhg-ch-hashtag {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.bbhg-ch-copy-hashtags {
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-md);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-ch-copy-hashtags:hover {
    background: var(--bbhg-gray-200);
}

/* Power Hours Section */
.bbhg-ch-power-hours-section {
    margin-bottom: 20px;
}

.bbhg-ch-power-hours-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.bbhg-ch-power-hour {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    padding: 8px 14px;
    border-radius: var(--bbhg-radius-md);
    font-size: 13px;
    font-weight: 600;
}

/* Compatibility Section */
.bbhg-ch-compat-section {
    margin-bottom: 20px;
}

.bbhg-ch-compat-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.bbhg-ch-compat-item {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-md);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-ch-compat-sign {
    font-weight: 700;
    font-size: 15px;
    color: var(--bbhg-gray-900);
}

.bbhg-ch-compat-style {
    font-size: 12px;
    color: var(--bbhg-gray-600);
    line-height: 1.4;
}

/* Weekly Outlook Section */
.bbhg-ch-weekly-section {
    margin-bottom: 20px;
}

.bbhg-ch-weekly-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-ch-weekly-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: var(--bbhg-gray-50);
    padding: 12px 15px;
    border-radius: var(--bbhg-radius-md);
}

.bbhg-ch-weekly-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
}

.bbhg-ch-weekly-value {
    font-size: 14px;
    color: var(--bbhg-gray-800);
    line-height: 1.4;
}

/* Additional prediction bar colors */
.bbhg-ch-prediction-fill.viral {
    background: linear-gradient(90deg, #f59e0b 0%, #ef4444 100%);
}

.bbhg-ch-prediction-fill.growth {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
}

.bbhg-ch-prediction-fill.saves {
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
}

/* Responsive for new sections */
@media (max-width: 768px) {
    .bbhg-ch-planetary-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-ch-compat-list {
        grid-template-columns: 1fr;
    }
    
    .bbhg-ch-ai-hook {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==================== END ENHANCED HOROSCOPE STYLES ==================== */


/* ==================== SOCIAL INTEL STYLES ==================== */

/* Container */
.bbhg-socialintel-container {
    max-width: 100%;
    margin: 0 auto;
}

/* Header - Cyan/Blue/Indigo Gradient */
.bbhg-socialintel-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%);
    border-radius: var(--bbhg-radius-lg);
    padding: 24px 28px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-socialintel-header-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-socialintel-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-socialintel-icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.bbhg-socialintel-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-socialintel-title {
    font-size: 26px;
    font-weight: 800;
    color: white;
    margin: 0 0 4px 0;
    letter-spacing: -0.02em;
}

.bbhg-socialintel-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

.bbhg-socialintel-powered {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    position: relative;
    z-index: 1;
}

.bbhg-socialintel-powered-label {
    font-size: 11px;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-socialintel-powered-gemini {
    font-size: 14px;
    font-weight: 700;
    color: white;
    background: rgba(255,255,255,0.2);
    padding: 4px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

/* Feature Tabs */
.bbhg-socialintel-feature-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    background: var(--bbhg-gray-100);
    padding: 6px;
    border-radius: var(--bbhg-radius-lg);
}

.bbhg-socialintel-feature-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-radius: var(--bbhg-radius-md);
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    justify-content: center;
    min-width: 140px;
}

.bbhg-socialintel-feature-tab svg {
    width: 18px;
    height: 18px;
    stroke: var(--bbhg-gray-500);
    transition: stroke 0.2s ease;
}

.bbhg-socialintel-feature-tab:hover {
    background: var(--bbhg-gray-200);
    color: var(--bbhg-gray-800);
}

.bbhg-socialintel-feature-tab:hover svg {
    stroke: var(--bbhg-gray-700);
}

.bbhg-socialintel-feature-tab.active {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    color: white !important;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.bbhg-socialintel-feature-tab.active svg {
    stroke: white !important;
}

/* Panels */
.bbhg-socialintel-panels {
    position: relative;
}

.bbhg-socialintel-panel {
    display: none;
}

.bbhg-socialintel-panel.active {
    display: block;
}

/* Search Section */
.bbhg-socialintel-search-section {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-socialintel-input-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.bbhg-socialintel-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 150px;
}

.bbhg-socialintel-input-group.bbhg-socialintel-input-grow {
    flex: 1;
    min-width: 200px;
}

.bbhg-socialintel-input-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-socialintel-select,
.bbhg-socialintel-input {
    padding: 12px 14px;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius-md);
    font-size: 14px;
    color: var(--bbhg-gray-800);
    background: white;
    transition: all 0.2s ease;
}

.bbhg-socialintel-select:focus,
.bbhg-socialintel-input:focus {
    outline: none;
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.bbhg-socialintel-username-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bbhg-socialintel-at {
    position: absolute;
    left: 14px;
    color: var(--bbhg-gray-500);
    font-weight: 600;
    font-size: 15px;
    z-index: 1;
}

.bbhg-socialintel-input-username {
    padding-left: 32px;
}

.bbhg-socialintel-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    border: none;
    border-radius: var(--bbhg-radius-md);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-socialintel-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white !important;
}

.bbhg-socialintel-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.35);
}

.bbhg-socialintel-search-btn:active {
    transform: translateY(0);
}

/* Quick Topics/Pills */
.bbhg-socialintel-quick-topics {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.bbhg-socialintel-quick-topics .quick-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-500);
}

.bbhg-socialintel-quick-pill,
.bbhg-socialintel-quick-user {
    padding: 6px 14px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-socialintel-quick-pill:hover,
.bbhg-socialintel-quick-user:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}

/* Results Container */
.bbhg-socialintel-results {
    min-height: 200px;
}

/* Hashtag Results */
.bbhg-socialintel-hashtag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-socialintel-hashtag-card {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-md);
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bbhg-socialintel-hashtag-card:hover {
    border-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
    transform: translateY(-2px);
}

.bbhg-socialintel-hashtag-tag {
    font-size: 16px;
    font-weight: 700;
    color: #0ea5e9;
    margin-bottom: 8px;
    word-break: break-word;
}

.bbhg-socialintel-hashtag-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.bbhg-socialintel-hashtag-posts {
    font-size: 12px;
    color: var(--bbhg-gray-600);
}

.bbhg-socialintel-hashtag-trend {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.bbhg-socialintel-hashtag-trend.viral {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.bbhg-socialintel-hashtag-trend.rising {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.bbhg-socialintel-hashtag-trend.stable {
    background: rgba(107, 114, 128, 0.1);
    color: #6b7280;
}

.bbhg-socialintel-hashtag-desc {
    font-size: 12px;
    color: var(--bbhg-gray-600);
    line-height: 1.4;
}

/* Info Boxes */
.bbhg-socialintel-info-box {
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-md);
    padding: 16px;
    margin-top: 16px;
}

.bbhg-socialintel-info-box h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-socialintel-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bbhg-socialintel-tips-list li {
    padding: 6px 0;
    padding-left: 20px;
    position: relative;
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

.bbhg-socialintel-tips-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: 700;
}

.bbhg-socialintel-related-niches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.bbhg-socialintel-niche-tag {
    padding: 4px 12px;
    background: white;
    border: 1px solid var(--bbhg-gray-300);
    border-radius: 15px;
    font-size: 12px;
    color: var(--bbhg-gray-700);
}

/* User Research Results */
.bbhg-socialintel-user-card {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}

.bbhg-socialintel-user-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    padding: 20px;
    color: white;
}

.bbhg-socialintel-user-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

.bbhg-socialintel-user-handle {
    font-size: 14px;
    opacity: 0.9;
}

.bbhg-socialintel-user-body {
    padding: 20px;
}

.bbhg-socialintel-user-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.bbhg-socialintel-stat {
    text-align: center;
    padding: 10px 8px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-md);
    min-width: 0;
    overflow: hidden;
}

.bbhg-socialintel-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: #0ea5e9;
    line-height: 1.3;
    word-break: break-word;
}

.bbhg-socialintel-stat-label {
    font-size: 9px;
    color: var(--bbhg-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}

.bbhg-socialintel-section {
    margin-bottom: 20px;
}

.bbhg-socialintel-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--bbhg-gray-100);
}

.bbhg-socialintel-hashtag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-socialintel-hashtag-pill {
    padding: 6px 14px;
    background: rgba(14, 165, 233, 0.1);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #0ea5e9;
}

/* Trend Results */
.bbhg-socialintel-trend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.bbhg-socialintel-trend-card {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-md);
    padding: 20px;
    transition: all 0.2s ease;
}

.bbhg-socialintel-trend-card:hover {
    border-color: #0ea5e9;
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.1);
}

.bbhg-socialintel-trend-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.bbhg-socialintel-trend-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-900);
}

.bbhg-socialintel-trend-velocity {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.bbhg-socialintel-trend-velocity.explosive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.bbhg-socialintel-trend-velocity.fast {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.bbhg-socialintel-trend-velocity.steady {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.bbhg-socialintel-trend-velocity.emerging {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.bbhg-socialintel-trend-category {
    font-size: 12px;
    color: var(--bbhg-gray-500);
    margin-bottom: 8px;
}

.bbhg-socialintel-trend-desc {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
    margin-bottom: 12px;
}

.bbhg-socialintel-trend-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-socialintel-platform-pill {
    padding: 3px 10px;
    background: var(--bbhg-gray-100);
    border-radius: 12px;
    font-size: 11px;
    color: var(--bbhg-gray-700);
}

/* Competitor Results */
.bbhg-socialintel-competitor-card {
    background: white;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
}

.bbhg-socialintel-competitor-header {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    padding: 20px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bbhg-socialintel-competitor-name {
    font-size: 20px;
    font-weight: 700;
}

.bbhg-socialintel-competitor-niche {
    font-size: 13px;
    opacity: 0.9;
}

.bbhg-socialintel-competitor-body {
    padding: 20px;
}

.bbhg-socialintel-strategy-section {
    margin-bottom: 24px;
}

.bbhg-socialintel-strategy-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-socialintel-opportunity-card {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--bbhg-radius-md);
    padding: 16px;
    margin-bottom: 12px;
}

.bbhg-socialintel-opportunity-card h5 {
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
    margin: 0 0 8px 0;
}

.bbhg-socialintel-opportunity-card p {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin: 0;
    line-height: 1.5;
}

/* Empty State */
.bbhg-socialintel-empty-state {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
    border: 2px dashed var(--bbhg-gray-200);
}

.bbhg-socialintel-empty-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-socialintel-empty-icon svg {
    width: 40px;
    height: 40px;
    stroke: #0ea5e9;
}

.bbhg-socialintel-empty-state h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-socialintel-empty-state p {
    font-size: 14px;
    color: var(--bbhg-gray-600);
    margin: 0 0 24px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.bbhg-socialintel-features-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.bbhg-socialintel-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border-radius: var(--bbhg-radius-md);
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

.bbhg-socialintel-feature-item .feature-icon {
    font-size: 16px;
}

/* Loading State */
.bbhg-socialintel-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius-lg);
}

.bbhg-socialintel-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #0ea5e9;
    border-radius: 50%;
    animation: bbhg-socialintel-spin 0.8s linear infinite;
}

@keyframes bbhg-socialintel-spin {
    to { transform: rotate(360deg); }
}

.bbhg-socialintel-loading-text {
    margin-top: 16px;
    font-size: 14px;
    color: var(--bbhg-gray-600);
}

/* Error State */
.bbhg-socialintel-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--bbhg-radius-md);
    padding: 20px;
    text-align: center;
}

.bbhg-socialintel-error-icon {
    font-size: 32px;
    margin-bottom: 12px;
}

.bbhg-socialintel-error h4 {
    font-size: 16px;
    font-weight: 700;
    color: #ef4444;
    margin: 0 0 8px 0;
}

.bbhg-socialintel-error p {
    font-size: 13px;
    color: var(--bbhg-gray-700);
    margin: 0;
}

.bbhg-socialintel-retry-btn {
    margin-top: 16px;
    padding: 10px 20px;
    background: #ef4444;
    border: none;
    border-radius: var(--bbhg-radius-md);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-socialintel-retry-btn:hover {
    background: #dc2626;
}

/* Footer */
.bbhg-socialintel-footer {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--bbhg-gray-200);
    display: flex;
    justify-content: center;
}

.bbhg-socialintel-footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--bbhg-gray-500);
}

.bbhg-socialintel-footer-brand .gemini-icon {
    width: 18px;
    height: 18px;
    stroke: #0ea5e9;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-socialintel-header {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
    
    .bbhg-socialintel-powered {
        align-items: flex-start;
    }
    
    .bbhg-socialintel-feature-tabs {
        flex-direction: column;
    }
    
    .bbhg-socialintel-feature-tab {
        width: 100%;
    }
    
    .bbhg-socialintel-input-row {
        flex-direction: column;
    }
    
    .bbhg-socialintel-input-group {
        width: 100%;
    }
    
    .bbhg-socialintel-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-socialintel-hashtag-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-socialintel-trend-grid {
        grid-template-columns: 1fr;
    }
}

/* Force white text on all buttons */
.bbhg-socialintel-search-btn,
.bbhg-socialintel-search-btn *,
.bbhg-socialintel-feature-tab.active,
.bbhg-socialintel-feature-tab.active *,
.bbhg-socialintel-retry-btn {
    color: white !important;
}

.bbhg-socialintel-search-btn svg,
.bbhg-socialintel-feature-tab.active svg {
    stroke: white !important;
}

/* MASTER OVERRIDE: Force dark text on ALL result elements */
.bbhg-socialintel-results,
.bbhg-socialintel-results *,
.bbhg-socialintel-hashtag-results,
.bbhg-socialintel-hashtag-results *,
.bbhg-socialintel-user-results,
.bbhg-socialintel-user-results *,
.bbhg-socialintel-trend-results,
.bbhg-socialintel-trend-results *,
.bbhg-socialintel-competitor-results,
.bbhg-socialintel-competitor-results * {
    color: #1e293b !important;
}

/* Specific element overrides */
.bbhg-socialintel-results h3,
.bbhg-socialintel-results h4,
.bbhg-socialintel-results h5,
.bbhg-socialintel-results-header h3,
.bbhg-socialintel-info-box h4,
.bbhg-socialintel-section h4,
.bbhg-socialintel-strategy-section h4,
.bbhg-socialintel-trend-name,
.bbhg-socialintel-user-name,
.bbhg-socialintel-competitor-name {
    color: #0f172a !important;
}

.bbhg-socialintel-hashtag-tag {
    color: #0ea5e9 !important;
    font-weight: 700 !important;
}

.bbhg-socialintel-hashtag-posts,
.bbhg-socialintel-stat-label,
.bbhg-socialintel-trend-category {
    color: #64748b !important;
}

.bbhg-socialintel-stat-value {
    color: #0ea5e9 !important;
}

/* Pills and tags need special colors */
.bbhg-socialintel-hashtag-pill {
    background: rgba(14, 165, 233, 0.15) !important;
    color: #0284c7 !important;
}

.bbhg-socialintel-hashtag-trend.viral {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #dc2626 !important;
}

.bbhg-socialintel-hashtag-trend.rising {
    background: rgba(16, 185, 129, 0.1) !important;
    color: #059669 !important;
}

.bbhg-socialintel-hashtag-trend.stable {
    background: rgba(107, 114, 128, 0.1) !important;
    color: #4b5563 !important;
}

.bbhg-socialintel-trend-velocity.explosive {
    color: #dc2626 !important;
}

.bbhg-socialintel-trend-velocity.fast {
    color: #ea580c !important;
}

.bbhg-socialintel-trend-velocity.steady {
    color: #059669 !important;
}

.bbhg-socialintel-trend-velocity.emerging {
    color: #7c3aed !important;
}

.bbhg-socialintel-niche-tag,
.bbhg-socialintel-platform-pill {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

/* User card header - WHITE text on blue gradient */
.bbhg-socialintel-user-header,
.bbhg-socialintel-user-header *,
.bbhg-socialintel-user-header h3,
.bbhg-socialintel-user-header span,
.bbhg-socialintel-user-name,
.bbhg-socialintel-user-handle,
.bbhg-socialintel-competitor-header,
.bbhg-socialintel-competitor-header *,
.bbhg-socialintel-competitor-header h3,
.bbhg-socialintel-competitor-header span,
.bbhg-socialintel-competitor-name,
.bbhg-socialintel-competitor-niche {
    color: white !important;
}

/* Card backgrounds */
.bbhg-socialintel-hashtag-card,
.bbhg-socialintel-trend-card,
.bbhg-socialintel-user-card,
.bbhg-socialintel-competitor-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.bbhg-socialintel-user-body,
.bbhg-socialintel-competitor-body {
    background: #ffffff !important;
}

.bbhg-socialintel-info-box {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.bbhg-socialintel-stat {
    background: #f1f5f9 !important;
    padding: 10px 8px !important;
    min-width: 0;
    overflow: hidden;
}

.bbhg-socialintel-stat-value {
    color: #0ea5e9 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

.bbhg-socialintel-stat-label {
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-top: 4px !important;
}

/* Stats grid - ensure proper sizing */
.bbhg-socialintel-user-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.bbhg-socialintel-opportunity-card {
    background: rgba(16, 185, 129, 0.1) !important;
}

.bbhg-socialintel-opportunity-card h5 {
    color: #059669 !important;
}

/* Web Sources from Google Search */
.bbhg-socialintel-web-sources {
    background: rgba(59, 130, 246, 0.08) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* News Mentions */
.bbhg-socialintel-news-mentions {
    background: rgba(245, 158, 11, 0.08) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

/* Earnings Box Styling */
.bbhg-socialintel-earnings-box {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.08) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.bbhg-socialintel-earnings-tier {
    margin-bottom: 12px;
}

.bbhg-socialintel-tier-badge {
    display: inline-block;
    padding: 6px 14px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white !important;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-socialintel-earnings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .bbhg-socialintel-earnings-grid {
        grid-template-columns: 1fr;
    }
}

.bbhg-socialintel-earnings-item {
    background: white !important;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e2e8f0;
}

.bbhg-socialintel-earnings-value {
    font-size: 14px;
    font-weight: 700;
    color: #059669 !important;
    margin-bottom: 4px;
}

.bbhg-socialintel-earnings-label {
    font-size: 10px;
    color: #64748b !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bbhg-socialintel-earnings-details {
    background: rgba(255,255,255,0.7);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.bbhg-socialintel-earnings-details p {
    margin: 6px 0;
    font-size: 13px;
    color: #374151 !important;
}

.bbhg-socialintel-earnings-note {
    margin-top: 12px;
    padding: 10px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 6px;
    font-size: 12px;
    color: #92400e !important;
}

.bbhg-socialintel-earnings-source {
    margin-top: 12px;
    font-size: 11px;
    color: #6b7280 !important;
    opacity: 0.8;
}

/* Quick Links for verification */
.bbhg-socialintel-quick-links {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

.bbhg-socialintel-web-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-socialintel-web-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #fff !important;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbhg-socialintel-web-link:hover {
    border-color: #3b82f6;
    background: #f8fafc !important;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.bbhg-socialintel-web-link-icon {
    flex-shrink: 0;
    font-size: 14px;
}

.bbhg-socialintel-web-link-text {
    font-size: 13px;
    font-weight: 500;
    color: #1e40af !important;
    line-height: 1.4;
    flex: 1;
}

.bbhg-socialintel-web-link-source {
    font-size: 11px;
    color: #64748b !important;
    background: #f1f5f9;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Search Queries */
.bbhg-socialintel-search-queries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-socialintel-search-query {
    padding: 6px 12px;
    background: rgba(107, 114, 128, 0.1) !important;
    border-radius: 16px;
    font-size: 12px;
    color: #475569 !important;
    font-style: italic;
}

/* Data verification notices */
.bbhg-socialintel-notice {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}

.bbhg-socialintel-notice strong {
    font-weight: 700;
}

.bbhg-socialintel-notice-success {
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #065f46 !important;
}

.bbhg-socialintel-notice-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #92400e !important;
}

.bbhg-socialintel-notice-info {
    background: rgba(59, 130, 246, 0.15) !important;
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #1e40af !important;
}

.bbhg-socialintel-notice a {
    color: inherit !important;
    font-weight: 600;
}

/* Platform badges in notices */
.bbhg-socialintel-platform-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(59, 130, 246, 0.15);
    color: #1e40af !important;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin: 2px;
}

/* Platform-specific notice (when selected platform not found) */
.bbhg-socialintel-platform-notice {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 16px;
}

.bbhg-socialintel-platform-notice-alt {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(251, 191, 36, 0.1) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.bbhg-socialintel-platform-notice-none {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(248, 113, 113, 0.1) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.bbhg-socialintel-platform-notice-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.bbhg-socialintel-platform-notice-content {
    flex: 1;
}

.bbhg-socialintel-platform-notice-content strong {
    font-size: 15px;
    color: #92400e !important;
    display: block;
    margin-bottom: 8px;
}

.bbhg-socialintel-platform-notice-none .bbhg-socialintel-platform-notice-content strong {
    color: #b91c1c !important;
}

.bbhg-socialintel-platform-notice-content p {
    font-size: 13px;
    color: #78350f !important;
    margin: 4px 0;
}

.bbhg-socialintel-platform-notice-none .bbhg-socialintel-platform-notice-content p {
    color: #991b1b !important;
}

.bbhg-socialintel-platform-notice-content ul {
    margin: 8px 0 0 20px;
    padding: 0;
}

.bbhg-socialintel-platform-notice-content ul li {
    font-size: 12px;
    color: #991b1b !important;
    margin: 4px 0;
}

.bbhg-socialintel-platforms-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.bbhg-socialintel-platforms-list .bbhg-socialintel-platform-badge {
    padding: 4px 12px;
    font-size: 13px;
    background: rgba(16, 185, 129, 0.15) !important;
    color: #059669 !important;
}

/* Other platforms divider */
.bbhg-socialintel-other-platforms-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    padding: 0 8px;
}

.bbhg-socialintel-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
}

.bbhg-socialintel-divider-text {
    font-size: 14px;
    font-weight: 600;
    color: #64748b !important;
    white-space: nowrap;
    padding: 8px 16px;
    background: rgba(100, 116, 139, 0.1);
    border-radius: 20px;
}

/* Similar Creators - Compact layout */
.bbhg-socialintel-similar-creators {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-socialintel-similar-creator {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 12px;
    background: #f1f5f9 !important;
    border-radius: 8px;
    min-width: 80px;
    max-width: 100px;
}

.bbhg-socialintel-similar-username {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #0284c7 !important;
    text-align: center;
    word-break: break-all;
    line-height: 1.2;
}

.bbhg-socialintel-similar-followers {
    font-size: 10px !important;
    color: #64748b !important;
    margin-top: 2px;
}

/* Source links */
.bbhg-socialintel-source-link {
    color: #0284c7 !important;
    text-decoration: underline;
}

.bbhg-socialintel-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(14, 165, 233, 0.1) !important;
    border-radius: 6px;
    font-size: 12px;
    color: #0284c7 !important;
    margin-right: 8px;
    margin-bottom: 8px;
    text-decoration: none;
}

.bbhg-socialintel-source-badge:hover {
    background: rgba(14, 165, 233, 0.2) !important;
}

/* Empty and loading states */
.bbhg-socialintel-empty-state {
    background: #f8fafc !important;
}

.bbhg-socialintel-empty-state h3 {
    color: #0f172a !important;
}

.bbhg-socialintel-empty-state p {
    color: #64748b !important;
}

.bbhg-socialintel-feature-item {
    background: #ffffff !important;
    color: #475569 !important;
}

.bbhg-socialintel-loading {
    background: #f8fafc !important;
}

.bbhg-socialintel-loading-text {
    color: #475569 !important;
}

/* Error state */
.bbhg-socialintel-error {
    color: #dc2626 !important;
}

/* ==================== END SOCIAL INTEL STYLES ==================== */

/* ==================== WEATHER CONTENT ENGINE STYLES ==================== */

.bbhg-wce-container {
    padding: 0 4px;
}

/* Header Banner - Cyan/Teal Gradient */
.bbhg-wce-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 40%, #155e75 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-wce-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-wce-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-wce-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-wce-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-wce-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-wce-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-wce-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-wce-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-wce-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-wce-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-wce-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-wce-status .bbhg-status-text {
    color: white !important;
}

/* Search Section */
.bbhg-wce-search-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-wce-input-group {
    margin-bottom: 16px;
}

.bbhg-wce-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-wce-input-wrap {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
}

.bbhg-wce-input-container {
    position: relative;
    flex: 1;
}

.bbhg-wce-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-wce-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-wce-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
    box-sizing: border-box;
}

.bbhg-wce-input:focus {
    border-color: #0891b2;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(8, 145, 178, 0.1);
}

.bbhg-wce-input::placeholder {
    color: #374151;
}

/* Platform Pill Selector */
.bbhg-wce-platform-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-wce-platform-pill {
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-wce-platform-pill:hover {
    border-color: #0891b2;
    color: #0891b2;
    background: rgba(8, 145, 178, 0.05);
}

.bbhg-wce-platform-pill.active {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border-color: transparent;
    color: white !important;
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.3);
}

/* Location Results Dropdown */
.bbhg-wce-location-results {
    background: var(--bbhg-white);
    border: 2px solid #0891b2;
    border-top: none;
    border-radius: 0 0 var(--bbhg-radius) var(--bbhg-radius);
    margin-top: -4px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.bbhg-wce-location-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--bbhg-gray-700);
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.bbhg-wce-location-item:hover {
    background: rgba(8, 145, 178, 0.08);
    color: #0891b2;
}

.bbhg-wce-location-item .loc-icon {
    font-size: 18px;
}

.bbhg-wce-location-item .loc-name {
    font-weight: 600;
}

.bbhg-wce-location-item .loc-detail {
    color: #6b7280;
    font-size: 12px;
}

/* Search Button */
.bbhg-wce-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wce-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.4);
}

.bbhg-wce-search-btn:active {
    transform: translateY(0);
}

.bbhg-wce-search-btn svg {
    width: 20px;
    height: 20px;
    stroke: white;
}

.bbhg-wce-search-btn span {
    color: white !important;
}

/* Quick Topics / Pills */
.bbhg-wce-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-wce-quick-label {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-wce-location-pill,
.bbhg-wce-niche-pill {
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wce-location-pill:hover,
.bbhg-wce-niche-pill:hover {
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(14, 116, 144, 0.1));
    border-color: #0891b2;
    color: #0891b2;
}

.bbhg-wce-location-pill.active {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border-color: transparent;
    color: white !important;
}

/* Loading State */
.bbhg-wce-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-wce-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-wce-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #0891b2;
    border-radius: 50%;
    animation: bbhg-wce-spin 1s linear infinite;
}

@keyframes bbhg-wce-spin {
    to { transform: rotate(360deg); }
}

.bbhg-wce-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-wce-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-wce-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.bbhg-wce-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #0891b2, #0e7490);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-wce-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.bbhg-wce-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-wce-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0891b2, #06b6d4, #0891b2);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: bbhg-wce-progress 2s ease-in-out infinite;
}

@keyframes bbhg-wce-progress {
    0% { width: 0%; background-position: 0% 0%; }
    50% { width: 70%; background-position: 100% 0%; }
    100% { width: 100%; background-position: 0% 0%; }
}

/* Results - Weather Overview */
.bbhg-wce-weather-overview {
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 50%, #e0f2fe 100%);
    border: 1px solid rgba(8, 145, 178, 0.2);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bbhg-wce-current-weather {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 250px;
}

.bbhg-wce-current-emoji {
    font-size: 56px;
    line-height: 1;
}

.bbhg-wce-current-info h3 {
    margin: 0 0 4px 0;
    font-size: 28px;
    font-weight: 700;
    color: #0e7490;
}

.bbhg-wce-current-info p {
    margin: 0;
    font-size: 14px;
    color: #155e75;
}

.bbhg-wce-current-details {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.bbhg-wce-detail-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255,255,255,0.8);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: #155e75;
    white-space: nowrap;
}

.bbhg-wce-detail-badge svg {
    width: 16px;
    height: 16px;
    stroke: #0891b2;
}

/* 7-Day Forecast Strip */
.bbhg-wce-forecast-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.bbhg-wce-forecast-day {
    text-align: center;
    padding: 16px 8px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-wce-forecast-day:hover {
    border-color: rgba(8, 145, 178, 0.3);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
    transform: translateY(-2px);
}

.bbhg-wce-forecast-day.today {
    border-color: #0891b2;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.05), rgba(6, 182, 212, 0.05));
}

.bbhg-wce-forecast-day .day-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-wce-forecast-day .day-emoji {
    font-size: 28px;
    margin: 8px 0;
    display: block;
}

.bbhg-wce-forecast-day .day-temps {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-wce-forecast-day .day-temps .temp-low {
    color: #6b7280;
    font-weight: 400;
}

.bbhg-wce-forecast-day .day-precip {
    font-size: 11px;
    color: #0891b2;
    margin-top: 4px;
}

/* Strategy Section */
.bbhg-wce-strategy {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-wce-strategy-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-wce-strategy-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-wce-strategy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.bbhg-wce-strategy-card {
    padding: 20px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    border-left: 4px solid #0891b2;
}

.bbhg-wce-strategy-card h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #0891b2;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-wce-strategy-card p {
    margin: 0;
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.6;
}

/* Daily Content Ideas */
.bbhg-wce-daily-ideas {
    margin-bottom: 20px;
}

.bbhg-wce-daily-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.bbhg-wce-daily-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-wce-idea-card {
    display: flex;
    gap: 16px;
    padding: 20px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    margin-bottom: 12px;
    transition: all 0.2s ease;
}

.bbhg-wce-idea-card:hover {
    border-color: rgba(8, 145, 178, 0.3);
    box-shadow: 0 4px 12px rgba(8, 145, 178, 0.1);
    transform: translateY(-2px);
}

.bbhg-wce-idea-day {
    flex-shrink: 0;
    width: 64px;
    text-align: center;
}

.bbhg-wce-idea-day .idea-day-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    text-transform: uppercase;
}

.bbhg-wce-idea-day .idea-day-emoji {
    font-size: 32px;
    display: block;
    margin: 4px 0;
}

.bbhg-wce-idea-day .idea-day-weather {
    font-size: 11px;
    color: #6b7280;
}

.bbhg-wce-idea-content {
    flex: 1;
    min-width: 0;
}

.bbhg-wce-idea-content h4 {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-wce-idea-content p {
    margin: 0 0 10px 0;
    font-size: 14px;
    color: var(--bbhg-gray-600);
    line-height: 1.5;
}

.bbhg-wce-idea-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-wce-format-badge {
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.1), rgba(6, 182, 212, 0.1));
    border: 1px solid rgba(8, 145, 178, 0.2);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #0891b2;
    text-transform: uppercase;
}

.bbhg-wce-idea-tag {
    padding: 3px 8px;
    background: var(--bbhg-gray-100);
    border-radius: 10px;
    font-size: 11px;
    color: #6b7280;
}

.bbhg-wce-idea-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: flex-start;
}

.bbhg-wce-card-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    color: #1f2937;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wce-card-btn:hover {
    border-color: #0891b2;
    color: #0891b2;
    background: rgba(8, 145, 178, 0.05);
}

.bbhg-wce-card-btn svg {
    width: 16px;
    height: 16px;
}

/* Extras - Hashtags & Tips */
.bbhg-wce-extras {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-wce-extras-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
}

.bbhg-wce-extras-card h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-wce-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-wce-tag {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(8, 145, 178, 0.08), rgba(6, 182, 212, 0.08));
    border: 1px solid rgba(8, 145, 178, 0.15);
    border-radius: 16px;
    font-size: 13px;
    color: #0e7490;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bbhg-wce-tag:hover {
    background: linear-gradient(135deg, #0891b2, #06b6d4);
    color: white;
    border-color: transparent;
}

.bbhg-wce-tip-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-wce-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    color: var(--bbhg-gray-700);
    line-height: 1.5;
}

.bbhg-wce-tip-icon {
    flex-shrink: 0;
    font-size: 16px;
}

/* Action Buttons */
.bbhg-wce-results-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.bbhg-wce-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wce-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.3);
}

.bbhg-wce-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-wce-action-btn span {
    color: white !important;
}

/* Empty State */
.bbhg-wce-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-wce-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.bbhg-wce-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-wce-empty p {
    font-size: 15px;
    color: #1f2937;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-wce-empty-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.bbhg-wce-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 24px;
    font-size: 13px;
    color: var(--bbhg-gray-700);
}

/* Error State */
.bbhg-wce-error {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-wce-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-wce-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-wce-error p {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.bbhg-wce-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wce-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.3);
}

.bbhg-wce-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-wce-retry-btn span {
    color: white !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .bbhg-wce-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-wce-forecast-strip {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .bbhg-wce-strategy-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-wce-extras {
        grid-template-columns: 1fr;
    }
    
    .bbhg-wce-idea-card {
        flex-direction: column;
    }
    
    .bbhg-wce-idea-day {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .bbhg-wce-forecast-strip {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== END WEATHER CONTENT ENGINE STYLES ==================== */

/* ================================
   CRYPTO PULSE - Amber/Orange Theme
   ================================ */

.bbhg-cpulse-container {
    padding: 0 4px;
}

/* Header Banner - Amber/Orange/Gold Gradient */
.bbhg-cpulse-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-cpulse-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-cpulse-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-cpulse-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-cpulse-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-cpulse-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-cpulse-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-cpulse-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-cpulse-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-cpulse-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-cpulse-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

/* Controls Section */
.bbhg-cpulse-controls {
    margin-bottom: 20px;
    padding: 20px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
}

.bbhg-cpulse-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.bbhg-cpulse-filter-group {
    flex: 1;
    min-width: 200px;
}

.bbhg-cpulse-currency-group {
    flex: 0 0 auto;
    min-width: 120px;
}

.bbhg-cpulse-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bbhg-text-secondary);
    margin-bottom: 8px;
}

.bbhg-cpulse-tabs {
    display: flex;
    gap: 4px;
    background: var(--bbhg-bg);
    border-radius: var(--bbhg-radius-md);
    padding: 4px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-cpulse-view-tab {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: var(--bbhg-radius-sm);
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.bbhg-cpulse-view-tab:hover {
    background: var(--bbhg-surface);
    color: var(--bbhg-text);
}

.bbhg-cpulse-view-tab.active {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white !important;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.bbhg-cpulse-select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-md);
    background: var(--bbhg-bg);
    color: var(--bbhg-text);
    font-size: 13px;
    cursor: pointer;
}

.bbhg-cpulse-scan-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white !important;
    border-radius: var(--bbhg-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.bbhg-cpulse-scan-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.bbhg-cpulse-scan-btn svg {
    width: 18px;
    height: 18px;
    stroke: white !important;
}

/* Loading State */
.bbhg-cpulse-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-cpulse-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.bbhg-cpulse-loader {
    width: 80px;
    height: 80px;
    border: 3px solid rgba(245, 158, 11, 0.2);
    border-top-color: #f59e0b;
    border-radius: 50%;
    animation: bbhg-cpulse-spin 1s linear infinite;
}

@keyframes bbhg-cpulse-spin {
    to { transform: rotate(360deg); }
}

.bbhg-cpulse-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    animation: bbhg-cpulse-pulse 1.5s ease-in-out infinite;
}

@keyframes bbhg-cpulse-pulse {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
}

.bbhg-cpulse-loading-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-text);
    margin: 0 0 8px;
}

.bbhg-cpulse-loading-text {
    font-size: 14px;
    color: var(--bbhg-text-secondary);
    margin: 0 0 20px;
}

.bbhg-cpulse-loading-bar {
    width: 200px;
    height: 4px;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 4px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-cpulse-loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #f59e0b, #d97706);
    border-radius: 4px;
    animation: bbhg-cpulse-progress 2s ease-in-out infinite;
}

@keyframes bbhg-cpulse-progress {
    0% { width: 0; }
    50% { width: 80%; }
    100% { width: 100%; }
}

/* Market Mood Section */
.bbhg-cpulse-mood-section {
    margin-bottom: 24px;
}

.bbhg-cpulse-mood-card {
    padding: 20px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    margin-bottom: 16px;
}

.bbhg-cpulse-mood-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-cpulse-mood-emoji {
    font-size: 40px;
    line-height: 1;
}

.bbhg-cpulse-mood-header h4 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bbhg-text-secondary);
    margin: 0 0 4px;
}

.bbhg-cpulse-mood-label {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-text);
}

.bbhg-cpulse-mood-bar {
    position: relative;
}

.bbhg-cpulse-mood-fill {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ef4444 0%, #f59e0b 35%, #22c55e 65%, #f59e0b 100%);
    transition: width 0.6s ease;
    position: relative;
}

.bbhg-cpulse-mood-fill::after {
    content: '';
    position: absolute;
    right: -6px;
    top: -4px;
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid #f59e0b;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.bbhg-cpulse-mood-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 11px;
    color: var(--bbhg-text-secondary);
}

.bbhg-cpulse-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.bbhg-cpulse-stat-card {
    padding: 16px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    text-align: center;
}

.bbhg-cpulse-stat-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bbhg-text-secondary);
    margin-bottom: 6px;
}

.bbhg-cpulse-stat-value {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-text);
}

.bbhg-cpulse-stat-value.positive { color: #22c55e; }
.bbhg-cpulse-stat-value.negative { color: #ef4444; }

/* Results Section */
.bbhg-cpulse-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-cpulse-results-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-cpulse-results-icon {
    font-size: 24px;
}

.bbhg-cpulse-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-text);
    margin: 0;
}

.bbhg-cpulse-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-cpulse-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--bbhg-border);
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius-md);
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-cpulse-action-btn:hover {
    border-color: #f59e0b;
    color: #f59e0b;
}

.bbhg-cpulse-action-btn svg {
    width: 14px;
    height: 14px;
}

/* Coins Grid */
.bbhg-cpulse-coins-grid {
    display: grid;
    gap: 12px;
}

.bbhg-cpulse-coin-card {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    transition: all 0.2s;
}

.bbhg-cpulse-coin-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
    box-shadow: 0 2px 12px rgba(245, 158, 11, 0.1);
}

.bbhg-cpulse-coin-card.trending-card {
    border-left: 4px solid #f59e0b;
}

.bbhg-cpulse-coin-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bbhg-cpulse-coin-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bbhg-cpulse-coin-rank {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white !important;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    flex-shrink: 0;
}

.bbhg-cpulse-coin-name {
    font-weight: 600;
    color: var(--bbhg-text);
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-cpulse-coin-symbol {
    font-size: 12px;
    color: var(--bbhg-text-secondary);
    text-transform: uppercase;
}

.bbhg-cpulse-coin-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bbhg-cpulse-coin-prices {
    text-align: right;
}

.bbhg-cpulse-coin-price {
    font-weight: 700;
    font-size: 15px;
    color: var(--bbhg-text);
    display: block;
}

.bbhg-cpulse-coin-mcap {
    font-size: 12px;
    color: var(--bbhg-text-secondary);
    display: block;
}

.bbhg-cpulse-coin-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.bbhg-cpulse-coin-change.positive {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.bbhg-cpulse-coin-change.negative {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.bbhg-cpulse-coin-actions {
    display: flex;
    gap: 6px;
}

.bbhg-cpulse-btn-chart,
.bbhg-cpulse-btn-angles,
.bbhg-cpulse-btn-copy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: white !important;
}

.bbhg-cpulse-btn-chart {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.bbhg-cpulse-btn-chart:hover {
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.bbhg-cpulse-btn-angles {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.bbhg-cpulse-btn-angles:hover {
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
}

.bbhg-cpulse-btn-copy {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.bbhg-cpulse-btn-copy:hover {
    box-shadow: 0 2px 8px rgba(107, 114, 128, 0.4);
}

.bbhg-cpulse-btn-chart svg,
.bbhg-cpulse-btn-angles svg,
.bbhg-cpulse-btn-copy svg {
    width: 14px;
    height: 14px;
    stroke: white !important;
}

/* Modal Styles */
.bbhg-cpulse-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bbhg-cpulse-modal {
    background: var(--bbhg-surface, #fff);
    border-radius: var(--bbhg-radius-xl);
    max-width: 560px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.bbhg-cpulse-modal-lg {
    max-width: 700px;
}

.bbhg-cpulse-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: var(--bbhg-radius-xl) var(--bbhg-radius-xl) 0 0;
    color: white;
}

.bbhg-cpulse-modal-header h3 {
    color: white !important;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.bbhg-cpulse-modal-close {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.bbhg-cpulse-modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.bbhg-cpulse-modal-body {
    padding: 24px;
}

/* Detail Modal Content */
.bbhg-cpulse-detail-loading {
    text-align: center;
    padding: 40px;
}

.bbhg-cpulse-detail-loading .bbhg-cpulse-loader {
    width: 50px;
    height: 50px;
    margin: 0 auto 16px;
}

.bbhg-cpulse-detail-coin-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-cpulse-detail-coin-header img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.bbhg-cpulse-detail-coin-header h4 {
    margin: 0 0 4px;
    font-size: 20px;
    color: var(--bbhg-text);
}

.bbhg-cpulse-detail-coin-header span {
    color: var(--bbhg-text-secondary);
    font-size: 14px;
}

.bbhg-cpulse-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-cpulse-detail-stat {
    padding: 12px;
    background: var(--bbhg-bg, #f9fafb);
    border-radius: var(--bbhg-radius-md);
    text-align: center;
}

.bbhg-cpulse-detail-stat-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--bbhg-text-secondary);
    margin-bottom: 4px;
}

.bbhg-cpulse-detail-stat-value {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-text);
}

/* Chart Container */
.bbhg-cpulse-chart-container {
    margin-bottom: 20px;
}

.bbhg-cpulse-chart-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
}

.bbhg-cpulse-chart-tab {
    padding: 6px 12px;
    border: 1px solid var(--bbhg-border);
    background: transparent;
    border-radius: var(--bbhg-radius-sm);
    font-size: 12px;
    color: var(--bbhg-text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-cpulse-chart-tab.active {
    background: #f59e0b;
    color: white !important;
    border-color: #f59e0b;
}

.bbhg-cpulse-chart-area {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 120px;
    padding: 8px 0;
}

.bbhg-cpulse-chart-bar {
    flex: 1;
    background: linear-gradient(180deg, #f59e0b 0%, rgba(245, 158, 11, 0.3) 100%);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: all 0.2s;
    position: relative;
    cursor: pointer;
}

.bbhg-cpulse-chart-bar:hover {
    background: linear-gradient(180deg, #d97706 0%, rgba(217, 119, 6, 0.5) 100%);
}

.bbhg-cpulse-chart-bar:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--bbhg-text, #1f2937);
    color: white;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
}

.bbhg-cpulse-chart-bar.negative-bar {
    background: linear-gradient(180deg, #ef4444 0%, rgba(239, 68, 68, 0.3) 100%);
}

/* Momentum Badge */
.bbhg-cpulse-momentum-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

.bbhg-cpulse-momentum-badge.surging { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.bbhg-cpulse-momentum-badge.rising { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.bbhg-cpulse-momentum-badge.stable { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.bbhg-cpulse-momentum-badge.dipping { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.bbhg-cpulse-momentum-badge.crashing { background: rgba(107, 114, 128, 0.1); color: #6b7280; }

/* Content Angles Modal */
.bbhg-cpulse-why-box {
    padding: 16px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 0 var(--bbhg-radius-md) var(--bbhg-radius-md) 0;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--bbhg-text);
    line-height: 1.6;
}

.bbhg-cpulse-window-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bbhg-bg);
    border-radius: var(--bbhg-radius-md);
}

.bbhg-cpulse-window-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.bbhg-cpulse-window-dot.early { background: #22c55e; }
.bbhg-cpulse-window-dot.prime { background: #f59e0b; }
.bbhg-cpulse-window-dot.late { background: #ef4444; }

.bbhg-cpulse-window-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-cpulse-angles-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-cpulse-angle-card {
    padding: 16px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    transition: border-color 0.2s;
}

.bbhg-cpulse-angle-card:hover {
    border-color: rgba(245, 158, 11, 0.4);
}

.bbhg-cpulse-angle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-cpulse-angle-type {
    display: inline-flex;
    padding: 3px 10px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white !important;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.bbhg-cpulse-angle-urgency {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.bbhg-cpulse-angle-urgency.post_now { color: #ef4444; }
.bbhg-cpulse-angle-urgency.today { color: #f59e0b; }
.bbhg-cpulse-angle-urgency.this_week { color: #3b82f6; }

.bbhg-cpulse-angle-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-text);
    margin: 0 0 6px;
}

.bbhg-cpulse-angle-hook {
    font-style: italic;
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    padding-left: 12px;
    border-left: 3px solid #f59e0b;
    margin-bottom: 8px;
}

.bbhg-cpulse-angle-desc {
    font-size: 13px;
    color: var(--bbhg-text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
}

.bbhg-cpulse-angle-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-cpulse-angle-platforms {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.bbhg-cpulse-platform-pill {
    padding: 2px 8px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 10px;
    font-size: 11px;
    color: #d97706;
    font-weight: 500;
}

.bbhg-cpulse-difficulty-badge {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.bbhg-cpulse-difficulty-badge.easy { background: rgba(34, 197, 94, 0.1); color: #22c55e; }
.bbhg-cpulse-difficulty-badge.medium { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.bbhg-cpulse-difficulty-badge.hard { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

/* Hashtags Section */
.bbhg-cpulse-hashtags-section {
    margin-bottom: 16px;
}

.bbhg-cpulse-hashtags-section h4 {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-text-secondary);
    margin: 0 0 8px;
}

.bbhg-cpulse-hashtag-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bbhg-cpulse-hashtag {
    padding: 4px 10px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 14px;
    font-size: 12px;
    color: #d97706;
    cursor: pointer;
    transition: all 0.2s;
}

.bbhg-cpulse-hashtag:hover {
    background: #f59e0b;
    color: white !important;
    border-color: #f59e0b;
}

/* Avoid Box */
.bbhg-cpulse-avoid-box {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.05);
    border-left: 4px solid #ef4444;
    border-radius: 0 var(--bbhg-radius-md) var(--bbhg-radius-md) 0;
    font-size: 13px;
    color: var(--bbhg-text-secondary);
}

.bbhg-cpulse-avoid-box strong {
    color: #ef4444;
}

/* Sentiment Bar */
.bbhg-cpulse-sentiment-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.bbhg-cpulse-sentiment-bar {
    flex: 1;
    height: 8px;
    background: #ef4444;
    border-radius: 4px;
    overflow: hidden;
}

.bbhg-cpulse-sentiment-fill {
    height: 100%;
    background: #22c55e;
    border-radius: 4px;
}

.bbhg-cpulse-sentiment-label {
    font-size: 12px;
    color: var(--bbhg-text-secondary);
    white-space: nowrap;
}

/* Categories */
.bbhg-cpulse-categories {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.bbhg-cpulse-category-tag {
    padding: 3px 10px;
    background: var(--bbhg-bg);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    font-size: 11px;
    color: var(--bbhg-text-secondary);
}

/* Empty State */
.bbhg-cpulse-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-cpulse-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.bbhg-cpulse-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-text);
    margin: 0 0 8px;
}

.bbhg-cpulse-empty p {
    font-size: 14px;
    color: var(--bbhg-text-secondary);
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-cpulse-empty-features {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.bbhg-cpulse-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--bbhg-text-secondary);
}

.bbhg-cpulse-feature-icon {
    font-size: 18px;
}

/* Error State */
.bbhg-cpulse-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-cpulse-error-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.bbhg-cpulse-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 8px;
}

.bbhg-cpulse-error p {
    color: var(--bbhg-text-secondary);
    margin: 0 0 16px;
}

.bbhg-cpulse-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: none;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white !important;
    border-radius: var(--bbhg-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.bbhg-cpulse-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white !important;
}

.bbhg-cpulse-retry-btn:hover {
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-cpulse-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .bbhg-cpulse-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bbhg-cpulse-filter-row {
        flex-direction: column;
    }
    .bbhg-cpulse-filter-group {
        min-width: 100%;
    }
    .bbhg-cpulse-scan-btn {
        width: 100%;
        justify-content: center;
    }
    .bbhg-cpulse-coin-card {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .bbhg-cpulse-coin-prices {
        text-align: left;
    }
    .bbhg-cpulse-coin-actions {
        flex-wrap: wrap;
    }
    .bbhg-cpulse-detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .bbhg-cpulse-tabs {
        flex-wrap: wrap;
    }
}

/* ===================================================
   CURIOSITY RADAR STYLES - Sky Blue to Teal Theme
   =================================================== */

/* Container */
.bbhg-cr-container {
    padding: 0;
}

/* Header Banner */
.bbhg-cr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 50%, #14b8a6 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-cr-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-cr-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-cr-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-cr-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-cr-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-cr-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-cr-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-cr-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.bbhg-cr-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-cr-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-cr-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-cr-status .bbhg-status-text {
    color: white !important;
}

/* Search Section */
.bbhg-cr-search-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-cr-input-group {
    margin-bottom: 16px;
}

.bbhg-cr-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-cr-input-wrap {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.bbhg-cr-input-container {
    position: relative;
    flex: 1;
    min-width: 200px;
}

.bbhg-cr-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #374151;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-cr-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-cr-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
}

.bbhg-cr-input:focus {
    border-color: #0ea5e9;
    background: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.bbhg-cr-input::placeholder {
    color: #374151;
}

.bbhg-cr-select {
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
    cursor: pointer;
    min-width: 160px;
}

.bbhg-cr-select:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

/* Language Select Specific Styling */
#bbhg-cr-language {
    width: 100%;
    box-sizing: border-box;
    padding: 14px 40px 14px 16px;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #f9fafb url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 12 12%22%3E%3Cpath fill%3D%22%23374151%22 d%3D%22M2 4l4 4 4-4%22%2F%3E%3C%2Fsvg%3E') no-repeat right 14px center;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: var(--bbhg-gray-800);
    transition: all 0.2s ease;
    outline: none;
}

#bbhg-cr-language:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.bbhg-cr-scan-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-cr-scan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4);
}

.bbhg-cr-scan-btn:active {
    transform: translateY(0);
}

.bbhg-cr-scan-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-cr-scan-btn span {
    color: white !important;
}

/* Quick Topics */
.bbhg-cr-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-cr-quick-label {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-cr-topic-pill {
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cr-topic-pill:hover {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(6, 182, 212, 0.1));
    border-color: #0ea5e9;
    color: #0ea5e9;
}

/* Loading State */
.bbhg-cr-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-cr-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-cr-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #0ea5e9;
    border-right-color: #06b6d4;
    border-radius: 50%;
    animation: bbhg-cr-spin 1s linear infinite;
}

@keyframes bbhg-cr-spin {
    to { transform: rotate(360deg); }
}

.bbhg-cr-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-cr-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-cr-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.bbhg-cr-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-cr-loading-text {
    font-size: 14px;
    color: #1f2937;
    margin: 0 0 24px 0;
}

.bbhg-cr-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-cr-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0ea5e9, #06b6d4, #14b8a6);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: bbhg-cr-progress 2s ease-in-out infinite;
}

@keyframes bbhg-cr-progress {
    0% { width: 0%; background-position: 0% 0%; }
    50% { width: 70%; background-position: 100% 0%; }
    100% { width: 100%; background-position: 0% 0%; }
}

/* Results Section */
.bbhg-cr-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
}

.bbhg-cr-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-cr-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-cr-results-icon {
    font-size: 24px;
}

.bbhg-cr-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-cr-results-count {
    font-size: 13px;
    font-weight: 600;
    color: white !important;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    padding: 4px 10px;
    border-radius: 12px;
}

.bbhg-cr-results-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.bbhg-cr-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cr-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.bbhg-cr-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-cr-action-btn span {
    color: white !important;
}

.bbhg-cr-refresh-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
}

/* Stats Overview */
.bbhg-cr-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.bbhg-cr-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
}

.bbhg-cr-stat-icon {
    font-size: 24px;
}

.bbhg-cr-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-cr-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    line-height: 1.2;
}

.bbhg-cr-stat-label {
    font-size: 12px;
    color: #1f2937;
}

/* Articles Grid */
.bbhg-cr-articles-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Article Card */
.bbhg-cr-article-card {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    transition: all 0.2s ease;
}

.bbhg-cr-article-card:hover {
    border-color: rgba(14, 165, 233, 0.3);
    box-shadow: 0 4px 16px rgba(14, 165, 233, 0.08);
}

.bbhg-cr-article-top {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.bbhg-cr-article-thumb {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(20, 184, 166, 0.1));
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-cr-article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-cr-article-thumb-placeholder {
    font-size: 32px;
}

.bbhg-cr-article-info {
    flex: 1;
    min-width: 0;
}

.bbhg-cr-article-rank {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: white !important;
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    padding: 3px 8px;
    border-radius: 10px;
    margin-bottom: 6px;
}

.bbhg-cr-article-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.bbhg-cr-article-desc {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 8px 0;
    font-style: italic;
}

.bbhg-cr-article-excerpt {
    font-size: 13px;
    color: var(--bbhg-gray-600);
    margin: 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-cr-article-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.bbhg-cr-article-views {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #0ea5e9;
}

.bbhg-cr-article-views svg {
    width: 16px;
    height: 16px;
    stroke: #0ea5e9;
}

.bbhg-cr-article-niche-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #14b8a6;
    background: rgba(20, 184, 166, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(20, 184, 166, 0.2);
}

.bbhg-cr-article-momentum-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    background: none;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 12px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cr-article-momentum-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}

.bbhg-cr-article-momentum-btn svg {
    width: 14px;
    height: 14px;
}

.bbhg-cr-article-wiki-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    transition: color 0.2s;
}

.bbhg-cr-article-wiki-link:hover {
    color: #0ea5e9;
}

.bbhg-cr-article-wiki-link svg {
    width: 14px;
    height: 14px;
}

/* Hashtags Section in Card */
.bbhg-cr-hashtags-section {
    border-top: 1px solid var(--bbhg-gray-100);
    padding-top: 16px;
}

.bbhg-cr-gen-hashtag-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    justify-content: center;
}

.bbhg-cr-gen-hashtag-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(14, 165, 233, 0.3);
}

.bbhg-cr-gen-hashtag-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.bbhg-cr-gen-hashtag-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-cr-gen-hashtag-btn span {
    color: white !important;
}

.bbhg-cr-hashtags-result {
    margin-top: 12px;
}

.bbhg-cr-hashtags-hook {
    font-size: 13px;
    font-style: italic;
    color: #0ea5e9;
    margin: 0 0 10px 0;
    padding: 10px 14px;
    background: rgba(14, 165, 233, 0.05);
    border-radius: var(--bbhg-radius);
    border-left: 3px solid #0ea5e9;
}

.bbhg-cr-hashtags-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.bbhg-cr-hashtags-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.bbhg-cr-hashtag-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(14, 165, 233, 0.08);
    border: 1px solid rgba(14, 165, 233, 0.2);
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    color: #0ea5e9;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cr-hashtag-tag:hover {
    background: rgba(14, 165, 233, 0.15);
    border-color: #0ea5e9;
}

.bbhg-cr-hashtags-combo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    margin-top: 10px;
}

.bbhg-cr-hashtags-combo-text {
    flex: 1;
    font-size: 13px;
    color: var(--bbhg-gray-700);
    word-break: break-all;
}

.bbhg-cr-copy-combo-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 12px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-cr-copy-combo-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.3);
}

.bbhg-cr-copy-combo-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-cr-copy-combo-btn span {
    color: white !important;
}

/* Niche Hashtag Tabs */
.bbhg-cr-niche-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.bbhg-cr-niche-tab {
    padding: 6px 12px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--bbhg-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cr-niche-tab:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
}

.bbhg-cr-niche-tab.active {
    background: linear-gradient(135deg, #0ea5e9, #06b6d4);
    border-color: transparent;
    color: white !important;
}

/* Load More */
.bbhg-cr-load-more {
    text-align: center;
    margin-top: 20px;
}

.bbhg-cr-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cr-load-more-btn:hover {
    border-color: #0ea5e9;
    color: #0ea5e9;
    background: rgba(14, 165, 233, 0.05);
}

.bbhg-cr-load-more-btn svg {
    width: 18px;
    height: 18px;
}

/* Empty State */
.bbhg-cr-empty {
    text-align: center;
    padding: 60px 20px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-cr-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    animation: bbhg-cr-bounce 2s ease-in-out infinite;
}

.bbhg-cr-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #0ea5e9, #14b8a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-cr-empty p {
    font-size: 14px;
    color: var(--bbhg-gray-600);
    max-width: 500px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

.bbhg-cr-empty-features {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
}

.bbhg-cr-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-cr-feature-icon {
    font-size: 18px;
}

/* Error State */
.bbhg-cr-error {
    text-align: center;
    padding: 40px 20px;
    background: var(--bbhg-white);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--bbhg-radius-xl);
}

.bbhg-cr-error-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.bbhg-cr-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-cr-error p {
    font-size: 14px;
    color: var(--bbhg-gray-600);
    margin: 0 0 20px 0;
}

.bbhg-cr-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 14px;
    font-weight: 600;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-cr-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.3);
}

.bbhg-cr-retry-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-cr-retry-btn span {
    color: white !important;
}

/* Momentum Modal */
.bbhg-cr-momentum-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bbhg-cr-momentum-modal {
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-xl);
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

.bbhg-cr-momentum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-cr-momentum-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-cr-momentum-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--bbhg-gray-100);
    font-size: 22px;
    color: var(--bbhg-gray-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.bbhg-cr-momentum-close:hover {
    background: var(--bbhg-gray-200);
}

.bbhg-cr-momentum-body {
    padding: 24px;
}

.bbhg-cr-momentum-loading {
    text-align: center;
    padding: 20px;
}

.bbhg-cr-momentum-loading .bbhg-cr-loader {
    position: relative;
}

.bbhg-cr-momentum-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.bbhg-cr-momentum-stat {
    text-align: center;
    padding: 14px 10px;
    background: var(--bbhg-gray-50);
    border-radius: var(--bbhg-radius);
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-cr-momentum-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-cr-momentum-stat-label {
    font-size: 11px;
    color: var(--bbhg-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-cr-momentum-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
}

.bbhg-cr-momentum-badge.exploding {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.bbhg-cr-momentum-badge.rising {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.2);
}

.bbhg-cr-momentum-badge.stable {
    background: rgba(14, 165, 233, 0.1);
    color: #0ea5e9;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.bbhg-cr-momentum-badge.cooling {
    background: rgba(100, 116, 139, 0.1);
    color: #64748b;
    border: 1px solid rgba(100, 116, 139, 0.2);
}

.bbhg-cr-momentum-badge.fading {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

/* Simple Chart */
.bbhg-cr-chart {
    width: 100%;
    height: 200px;
    margin-top: 16px;
    position: relative;
}

.bbhg-cr-chart-bars {
    display: flex;
    align-items: flex-end;
    height: 160px;
    gap: 2px;
    padding: 0 4px;
}

.bbhg-cr-chart-bar {
    flex: 1;
    background: linear-gradient(180deg, #0ea5e9, #06b6d4);
    border-radius: 3px 3px 0 0;
    min-height: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
}

.bbhg-cr-chart-bar:hover {
    opacity: 0.8;
}

.bbhg-cr-chart-bar-tooltip {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bbhg-gray-800);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
    margin-bottom: 4px;
    z-index: 10;
}

.bbhg-cr-chart-bar:hover .bbhg-cr-chart-bar-tooltip {
    display: block;
}

.bbhg-cr-chart-labels {
    display: flex;
    justify-content: space-between;
    padding: 8px 4px 0;
}

.bbhg-cr-chart-label {
    font-size: 10px;
    color: var(--bbhg-gray-500);
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-cr-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }
    .bbhg-cr-input-wrap {
        flex-direction: column;
    }
    .bbhg-cr-input-container {
        min-width: 100%;
    }
    .bbhg-cr-select {
        width: 100%;
        min-height: 50px;
        font-size: 16px !important;
    }
    .bbhg-cr-scan-btn {
        width: 100%;
        justify-content: center;
    }
    .bbhg-cr-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .bbhg-cr-article-top {
        flex-direction: column;
    }
    .bbhg-cr-article-thumb {
        width: 100%;
        height: 120px;
    }
    .bbhg-cr-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .bbhg-cr-momentum-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .bbhg-cr-hashtags-combo {
        flex-direction: column;
    }
    
    /* Language dropdown mobile fix */
    #bbhg-cr-language {
        width: 100% !important;
        min-height: 50px;
        font-size: 16px !important;
        padding: 14px 40px 14px 16px !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22 width%3D%2212%22 height%3D%2212%22 viewBox%3D%220 0 12 12%22%3E%3Cpath fill%3D%22%23374151%22 d%3D%22M2 4l4 4 4-4%22%2F%3E%3C%2Fsvg%3E') !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        background-color: #f9fafb !important;
    }
    
    /* Search section mobile adjustments */
    .bbhg-cr-search-section {
        padding: 16px;
    }
    
    .bbhg-cr-input-group {
        width: 100%;
    }
    
    .bbhg-cr-quick-topics {
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .bbhg-cr-topic-pill {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ===== WAYBACK MACHINE TIME MACHINE STYLES ===== */
.bbhg-wbm-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.bbhg-wbm-header {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 50%, #a855f7 100%);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bbhg-wbm-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: bbhg-wbm-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-wbm-shimmer {
    0%, 100% { background-position: 200% 0; }
    50% { background-position: -200% 0; }
}

.bbhg-wbm-header-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
    top: -50px;
    right: -50px;
    border-radius: 50%;
    pointer-events: none;
}

.bbhg-wbm-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-wbm-icon {
    width: 56px;
    height: 56px;
    background: rgba(255,255,255,0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-wbm-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
    stroke: #fff;
}

.bbhg-wbm-title-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.bbhg-wbm-subtitle {
    font-size: 14px;
    color: rgba(255,255,255,0.85);
    margin: 4px 0 0 0;
}

.bbhg-wbm-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 8px 14px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
}

.bbhg-wbm-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.bbhg-wbm-status .bbhg-status-text {
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

/* Search Section */
.bbhg-wbm-search-section {
    background: var(--bbhg-gray-50);
    border-radius: 16px;
    padding: 24px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-input-group {
    margin-bottom: 16px;
}

.bbhg-wbm-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-wbm-input-wrap {
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.bbhg-wbm-input-container {
    flex: 1;
    position: relative;
}

.bbhg-wbm-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bbhg-gray-400);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-wbm-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-wbm-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    font-size: 15px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    background: #fff;
    color: var(--bbhg-gray-800);
    transition: all 0.2s ease;
}

.bbhg-wbm-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.bbhg-wbm-input::placeholder {
    color: var(--bbhg-gray-400);
}

.bbhg-wbm-search-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-wbm-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4);
}

.bbhg-wbm-search-btn:active {
    transform: translateY(0);
}

.bbhg-wbm-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.bbhg-wbm-search-btn span {
    color: #fff;
}

/* Quick Topic Pills */
.bbhg-wbm-quick-topics {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.bbhg-wbm-quick-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-500);
}

.bbhg-wbm-topic-pill {
    padding: 8px 14px;
    background: #fff;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    color: var(--bbhg-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wbm-topic-pill:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    border-color: #8b5cf6;
    color: #7c3aed;
}

/* Loading State */
.bbhg-wbm-loading {
    padding: 60px 20px;
    text-align: center;
    background: var(--bbhg-gray-50);
    border-radius: 16px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-wbm-loader {
    position: absolute;
    inset: 0;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-wbm-spin 1s linear infinite;
}

@keyframes bbhg-wbm-spin {
    to { transform: rotate(360deg); }
}

.bbhg-wbm-loading-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    animation: bbhg-wbm-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-wbm-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.bbhg-wbm-loading-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-wbm-loading-text {
    font-size: 14px;
    color: var(--bbhg-gray-500);
    margin: 0 0 20px 0;
}

.bbhg-wbm-loading-bar {
    width: 200px;
    height: 6px;
    background: var(--bbhg-gray-200);
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-wbm-loading-progress {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #8b5cf6, #a855f7);
    border-radius: 3px;
    animation: bbhg-wbm-progress 2s ease-in-out infinite;
}

@keyframes bbhg-wbm-progress {
    0% { width: 0%; }
    50% { width: 70%; }
    100% { width: 100%; }
}

/* Results Section */
.bbhg-wbm-results {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Summary Card */
.bbhg-wbm-summary-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--bbhg-gray-200);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.bbhg-wbm-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-domain-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-wbm-domain-icon {
    font-size: 32px;
}

.bbhg-wbm-domain-text h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-wbm-domain-text span {
    font-size: 13px;
    color: var(--bbhg-gray-500);
}

.bbhg-wbm-view-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbhg-wbm-view-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
    color: #fff;
}

.bbhg-wbm-view-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

.bbhg-wbm-view-btn span {
    color: #fff;
}

/* Stats Grid */
.bbhg-wbm-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.bbhg-wbm-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-stat-icon {
    font-size: 28px;
}

.bbhg-wbm-stat-content {
    display: flex;
    flex-direction: column;
}

.bbhg-wbm-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
}

.bbhg-wbm-stat-label {
    font-size: 12px;
    color: var(--bbhg-gray-500);
}

/* Timeline Section */
.bbhg-wbm-timeline-section {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.bbhg-wbm-section-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-wbm-section-header h3 svg {
    width: 22px;
    height: 22px;
    color: #8b5cf6;
}

.bbhg-wbm-section-header p {
    font-size: 13px;
    color: var(--bbhg-gray-500);
    margin: 0;
}

/* Timeline */
.bbhg-wbm-timeline {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.bbhg-wbm-snapshot {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: var(--bbhg-gray-50);
    border: 2px solid var(--bbhg-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.bbhg-wbm-snapshot:hover {
    border-color: #8b5cf6;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.15);
}

.bbhg-wbm-snapshot-year {
    font-size: 24px;
    font-weight: 800;
    color: #8b5cf6;
    margin-bottom: 4px;
}

.bbhg-wbm-snapshot-date {
    font-size: 12px;
    color: var(--bbhg-gray-500);
    margin-bottom: 8px;
}

.bbhg-wbm-snapshot-icon {
    width: 32px;
    height: 32px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

/* Hashtags Section */
.bbhg-wbm-hashtags-section {
    background: #fff;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-generate-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wbm-generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.bbhg-wbm-generate-btn svg {
    width: 16px;
    height: 16px;
    stroke: #fff;
}

.bbhg-wbm-generate-btn span {
    color: #fff;
}

/* Hashtags Loading */
.bbhg-wbm-hashtags-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--bbhg-gray-500);
}

.bbhg-wbm-mini-loader {
    width: 24px;
    height: 24px;
    border: 3px solid var(--bbhg-gray-200);
    border-top-color: #8b5cf6;
    border-radius: 50%;
    animation: bbhg-wbm-spin 1s linear infinite;
}

/* Top Picks */
.bbhg-wbm-top-picks {
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(139, 92, 246, 0.2);
}

.bbhg-wbm-top-picks h4 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 700;
    color: #7c3aed;
}

.bbhg-wbm-picks-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-wbm-pick-tag {
    padding: 8px 14px;
    background: #fff;
    border: 2px solid #8b5cf6;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    color: #7c3aed;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wbm-pick-tag:hover {
    background: #8b5cf6;
    color: #fff;
}

/* Categories Grid */
.bbhg-wbm-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-wbm-category {
    background: var(--bbhg-gray-50);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.bbhg-wbm-category-icon {
    font-size: 20px;
}

.bbhg-wbm-category-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-700);
}

.bbhg-wbm-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-wbm-hashtag {
    padding: 6px 12px;
    background: #fff;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 16px;
    font-size: 13px;
    color: var(--bbhg-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wbm-hashtag:hover {
    background: rgba(139, 92, 246, 0.1);
    border-color: #8b5cf6;
    color: #7c3aed;
}

/* Copy Section */
.bbhg-wbm-copy-section {
    display: flex;
    justify-content: center;
    padding-top: 16px;
    border-top: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-copy-all-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wbm-copy-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.bbhg-wbm-copy-all-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.bbhg-wbm-copy-all-btn span {
    color: #fff;
}

/* Empty State */
.bbhg-wbm-empty {
    padding: 60px 20px;
    text-align: center;
    background: var(--bbhg-gray-50);
    border-radius: 16px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-empty-icon {
    font-size: 64px;
    margin-bottom: 20px;
    animation: bbhg-wbm-float 3s ease-in-out infinite;
}

@keyframes bbhg-wbm-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bbhg-wbm-empty h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 12px 0;
}

.bbhg-wbm-empty p {
    font-size: 14px;
    color: var(--bbhg-gray-500);
    margin: 0 0 24px 0;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.bbhg-wbm-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-wbm-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid var(--bbhg-gray-200);
}

.bbhg-wbm-feature-icon {
    font-size: 18px;
}

.bbhg-wbm-feature span:not(.bbhg-wbm-feature-icon) {
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
}

/* Error State */
.bbhg-wbm-error {
    padding: 60px 20px;
    text-align: center;
    background: rgba(239, 68, 68, 0.05);
    border-radius: 16px;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.bbhg-wbm-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-wbm-error h4 {
    font-size: 18px;
    font-weight: 700;
    color: #dc2626;
    margin: 0 0 8px 0;
}

.bbhg-wbm-error p {
    font-size: 14px;
    color: var(--bbhg-gray-600);
    margin: 0 0 20px 0;
}

.bbhg-wbm-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wbm-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
}

.bbhg-wbm-retry-btn svg {
    width: 18px;
    height: 18px;
    stroke: #fff;
}

.bbhg-wbm-retry-btn span {
    color: #fff;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-wbm-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }
    
    .bbhg-wbm-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-wbm-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-wbm-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-wbm-timeline {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-wbm-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .bbhg-wbm-summary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .bbhg-wbm-view-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-wbm-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   WIKIDATA KNOWLEDGE EXPLORER
   ======================================== */

.bbhg-wkd-container {
    padding: 0;
}

.bbhg-wkd-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 50%, #0e7490 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-wkd-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-wkd-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-wkd-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-wkd-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-wkd-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-wkd-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-wkd-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-wkd-title-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.bbhg-wkd-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 4px 0 0 0;
    color: white;
}

.bbhg-wkd-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    color: white;
}

/* Search Section */
.bbhg-wkd-search-section {
    margin-bottom: 24px;
}

.bbhg-wkd-input-group {
    margin-bottom: 16px;
}

.bbhg-wkd-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin-bottom: 8px;
}

.bbhg-wkd-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-wkd-input-container {
    flex: 1;
    position: relative;
}

.bbhg-wkd-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #06b6d4;
}

.bbhg-wkd-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-wkd-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    font-size: 1rem;
    transition: all 0.2s ease;
    background: var(--bbhg-bg);
}

.bbhg-wkd-input:focus {
    outline: none;
    border-color: #06b6d4;
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15);
}

.bbhg-wkd-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: #ffffff !important;
    border: none;
    border-radius: var(--bbhg-radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-wkd-search-btn span {
    color: #ffffff !important;
}

.bbhg-wkd-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.bbhg-wkd-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff !important;
}

/* Quick Topics */
.bbhg-wkd-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-wkd-quick-label {
    font-size: 0.75rem;
    color: var(--bbhg-text-muted);
    font-weight: 500;
}

.bbhg-wkd-topic-pill {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(8, 145, 178, 0.1) 100%);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #0891b2;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wkd-topic-pill:hover {
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border-color: transparent;
}

/* Search Results List */
.bbhg-wkd-search-results {
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius-lg);
    padding: 16px;
    margin-bottom: 24px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-wkd-search-results h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0891b2;
    margin: 0 0 12px 0;
}

.bbhg-wkd-search-results h4 svg {
    width: 16px;
    height: 16px;
}

.bbhg-wkd-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-wkd-result-item {
    padding: 12px 16px;
    background: var(--bbhg-bg);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.bbhg-wkd-result-item:hover {
    border-color: #06b6d4;
    background: rgba(6, 182, 212, 0.05);
}

.bbhg-wkd-result-label {
    font-weight: 600;
    color: var(--bbhg-text);
    font-size: 0.9375rem;
}

.bbhg-wkd-result-desc {
    font-size: 0.8125rem;
    color: var(--bbhg-text-muted);
    margin-top: 2px;
}

.bbhg-wkd-result-id {
    font-size: 0.6875rem;
    color: #0891b2;
    margin-top: 4px;
    font-family: monospace;
}

/* Loading State */
.bbhg-wkd-loading {
    text-align: center;
    padding: 48px 24px;
}

.bbhg-wkd-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.bbhg-wkd-loader {
    position: absolute;
    inset: 0;
    border: 4px solid rgba(6, 182, 212, 0.2);
    border-top-color: #06b6d4;
    border-radius: 50%;
    animation: bbhg-wkd-spin 1s linear infinite;
}

@keyframes bbhg-wkd-spin {
    to { transform: rotate(360deg); }
}

.bbhg-wkd-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
}

.bbhg-wkd-loading-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 8px 0;
}

.bbhg-wkd-loading-text {
    font-size: 0.875rem;
    color: var(--bbhg-text-muted);
    margin: 0 0 20px 0;
}

.bbhg-wkd-loading-bar {
    width: 200px;
    height: 4px;
    background: rgba(6, 182, 212, 0.2);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-wkd-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #06b6d4, #0891b2);
    border-radius: 2px;
    animation: bbhg-wkd-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-wkd-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* Entity Card */
.bbhg-wkd-entity-card {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08) 0%, rgba(8, 145, 178, 0.12) 100%);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.bbhg-wkd-entity-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.bbhg-wkd-entity-info {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.bbhg-wkd-entity-icon {
    font-size: 40px;
}

.bbhg-wkd-entity-text h3 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--bbhg-text);
}

.bbhg-wkd-entity-text p {
    margin: 4px 0 0 0;
    font-size: 0.875rem;
    color: var(--bbhg-text-muted);
}

.bbhg-wkd-entity-id {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 8px;
    background: rgba(6, 182, 212, 0.15);
    border-radius: 4px;
    font-size: 0.6875rem;
    color: #0891b2;
    font-family: monospace;
}

.bbhg-wkd-entity-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-wkd-entity-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #0891b2;
    text-decoration: none;
    transition: all 0.2s ease;
}

.bbhg-wkd-entity-link:hover {
    background: #06b6d4;
    color: white;
}

/* Aliases Section */
.bbhg-wkd-aliases-section {
    margin-bottom: 20px;
}

.bbhg-wkd-aliases-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 12px 0;
}

.bbhg-wkd-aliases-section h4 svg {
    width: 16px;
    height: 16px;
    stroke: #06b6d4;
}

.bbhg-wkd-aliases {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-wkd-alias {
    padding: 4px 12px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: 20px;
    font-size: 0.8125rem;
    color: #0891b2;
}

/* Properties Section */
.bbhg-wkd-properties-section {
    margin-bottom: 24px;
}

.bbhg-wkd-properties-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 16px 0;
}

.bbhg-wkd-properties-section h4 svg {
    width: 16px;
    height: 16px;
    stroke: #06b6d4;
}

.bbhg-wkd-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.bbhg-wkd-property {
    padding: 12px 16px;
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius);
    border: 1px solid var(--bbhg-border);
}

.bbhg-wkd-property-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #0891b2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bbhg-wkd-property-value {
    font-size: 0.875rem;
    color: var(--bbhg-text);
    word-break: break-word;
}

.bbhg-wkd-property-value a {
    color: #0891b2;
    text-decoration: none;
}

.bbhg-wkd-property-value a:hover {
    text-decoration: underline;
}

/* Hashtags Section */
.bbhg-wkd-hashtags-section {
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-wkd-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-wkd-section-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0;
}

.bbhg-wkd-section-header h4 svg {
    width: 18px;
    height: 18px;
    stroke: #06b6d4;
}

.bbhg-wkd-generate-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wkd-generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.bbhg-wkd-generate-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-wkd-hashtags-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: var(--bbhg-text-muted);
    font-size: 0.875rem;
}

.bbhg-wkd-mini-loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(6, 182, 212, 0.2);
    border-top-color: #06b6d4;
    border-radius: 50%;
    animation: bbhg-wkd-spin 0.8s linear infinite;
}

/* Top Picks */
.bbhg-wkd-top-picks {
    margin-bottom: 20px;
}

.bbhg-wkd-top-picks h5 {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bbhg-text-muted);
    margin: 0 0 10px 0;
}

.bbhg-wkd-picks-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-wkd-pick-tag {
    padding: 8px 16px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wkd-pick-tag:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

/* Categories Grid */
.bbhg-wkd-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.bbhg-wkd-category {
    background: var(--bbhg-bg);
    border-radius: var(--bbhg-radius);
    padding: 14px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-wkd-category-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.bbhg-wkd-category-icon {
    font-size: 16px;
}

.bbhg-wkd-category-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-wkd-category-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-wkd-hashtag {
    padding: 4px 10px;
    background: rgba(6, 182, 212, 0.1);
    color: #0891b2;
    border-radius: 12px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wkd-hashtag:hover {
    background: #06b6d4;
    color: white;
}

/* Copy Section */
.bbhg-wkd-copy-section {
    text-align: center;
}

.bbhg-wkd-copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wkd-copy-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.4);
}

.bbhg-wkd-copy-all-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

/* Empty State */
.bbhg-wkd-empty {
    text-align: center;
    padding: 48px 24px;
}

.bbhg-wkd-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-wkd-empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 12px 0;
}

.bbhg-wkd-empty p {
    font-size: 0.875rem;
    color: var(--bbhg-text-muted);
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-wkd-empty-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-wkd-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(6, 182, 212, 0.1);
    border-radius: var(--bbhg-radius);
    font-size: 0.8125rem;
    color: #0891b2;
    font-weight: 500;
}

.bbhg-wkd-feature-icon {
    font-size: 18px;
}

/* Error State */
.bbhg-wkd-error {
    text-align: center;
    padding: 48px 24px;
}

.bbhg-wkd-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-wkd-error h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 8px 0;
}

.bbhg-wkd-error-msg {
    font-size: 0.875rem;
    color: var(--bbhg-text-muted);
    margin: 0 0 20px 0;
}

.bbhg-wkd-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    color: white;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-wkd-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
}

.bbhg-wkd-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-wkd-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-wkd-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-wkd-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-wkd-entity-header {
        flex-direction: column;
    }
    
    .bbhg-wkd-properties-grid {
        grid-template-columns: 1fr;
    }
    
    .bbhg-wkd-categories-grid {
        grid-template-columns: 1fr;
    }
}

/* WIKIDATA ENHANCED BUTTON STYLES */
.bbhg-wkd-search-btn,
.bbhg-wkd-search-btn * {
    color: #ffffff !important;
}

.bbhg-wkd-generate-btn,
.bbhg-wkd-generate-btn * {
    color: #ffffff !important;
}

.bbhg-wkd-copy-all-btn,
.bbhg-wkd-copy-all-btn * {
    color: #ffffff !important;
}

.bbhg-wkd-retry-btn,
.bbhg-wkd-retry-btn * {
    color: #ffffff !important;
}

.bbhg-wkd-topic-pill:hover {
    color: #ffffff !important;
}

/* Enhanced property category styles */
.bbhg-wkd-prop-category {
    margin-bottom: 24px;
}

.bbhg-wkd-prop-category-header {
    font-size: 15px;
    font-weight: 600;
    color: #0891b2;
    margin-bottom: 12px;
    padding: 8px 12px;
    background: rgba(6, 182, 212, 0.08);
    border-radius: 8px;
    border-left: 4px solid #06b6d4;
}

.bbhg-wkd-prop-category-header span {
    font-weight: 400;
    color: #888;
    font-size: 12px;
    margin-left: 6px;
}

.bbhg-wkd-prop-category-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

/* Entity stats badges */
.bbhg-wkd-entity-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.bbhg-wkd-stat-badge {
    padding: 5px 12px;
    background: rgba(6, 182, 212, 0.12);
    border-radius: 16px;
    font-size: 12px;
    color: #0891b2;
    font-weight: 500;
}

/* Summary panel */
.bbhg-wkd-summary-panel {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(8, 145, 178, 0.12));
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 20px;
    border: 1px solid rgba(6, 182, 212, 0.2);
}

.bbhg-wkd-summary-panel h4 {
    margin: 0 0 14px;
    font-size: 15px;
    color: #0891b2;
}

.bbhg-wkd-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 600px) {
    .bbhg-wkd-summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.bbhg-wkd-summary-item {
    text-align: center;
    padding: 14px 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 10px;
}

.bbhg-wkd-summary-val {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: #0891b2;
}

.bbhg-wkd-summary-lbl {
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

/* Result item numbering */
.bbhg-wkd-result-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.bbhg-wkd-result-num {
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #06b6d4, #0891b2);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.bbhg-wkd-result-content {
    flex: 1;
}

/* More alias badge */
.bbhg-wkd-more {
    background: rgba(6, 182, 212, 0.2) !important;
    font-style: italic;
}

/* Link styling in properties */
.bbhg-wkd-link {
    color: #0891b2;
    text-decoration: none;
    word-break: break-all;
}

.bbhg-wkd-link:hover {
    text-decoration: underline;
}

/* No properties message */
.bbhg-wkd-no-props {
    padding: 24px;
    text-align: center;
    color: #888;
    font-size: 14px;
}

/* Entity links with icons */
.bbhg-wkd-entity-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

/* ========================================
   RESEARCH HUB
   ======================================== */

.bbhg-rh-container {
    padding: 0;
}

.bbhg-rh-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #0d9488 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-rh-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-rh-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-rh-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(2deg); }
}

.bbhg-rh-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-rh-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-rh-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-rh-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-rh-title-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    color: white;
}

.bbhg-rh-subtitle {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 4px 0 0 0;
    color: white;
}

.bbhg-rh-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: 1;
    color: white;
}

/* Search Section */
.bbhg-rh-search-section {
    margin-bottom: 24px;
}

.bbhg-rh-input-group {
    margin-bottom: 16px;
}

.bbhg-rh-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin-bottom: 8px;
}

.bbhg-rh-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-rh-input-container {
    flex: 1;
    position: relative;
}

.bbhg-rh-input-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
}

.bbhg-rh-input-icon svg {
    width: 20px;
    height: 20px;
}

.bbhg-rh-input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    font-size: 1rem;
    transition: all 0.2s ease;
    background: var(--bbhg-bg);
}

.bbhg-rh-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

.bbhg-rh-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: #ffffff !important;
    border: none;
    border-radius: var(--bbhg-radius-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-rh-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.bbhg-rh-search-btn svg,
.bbhg-rh-search-btn span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.bbhg-rh-search-btn svg {
    width: 18px;
    height: 18px;
}

/* Quick Topics */
.bbhg-rh-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-rh-quick-label {
    font-size: 0.75rem;
    color: var(--bbhg-text-muted);
    font-weight: 500;
}

.bbhg-rh-topic-pill {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    font-size: 0.75rem;
    color: #059669;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-topic-pill:hover {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: #ffffff !important;
    border-color: transparent;
}

/* Loading State */
.bbhg-rh-loading {
    text-align: center;
    padding: 48px 24px;
}

.bbhg-rh-loading-animation {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
}

.bbhg-rh-loader {
    position: absolute;
    inset: 0;
    border: 4px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: bbhg-rh-spin 1s linear infinite;
}

@keyframes bbhg-rh-spin {
    to { transform: rotate(360deg); }
}

.bbhg-rh-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
}

.bbhg-rh-loading-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 8px 0;
}

.bbhg-rh-loading-text {
    font-size: 0.875rem;
    color: var(--bbhg-text-muted);
    margin: 0 0 16px 0;
}

.bbhg-rh-loading-bar {
    width: 200px;
    height: 4px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 2px;
    margin: 0 auto 20px;
    overflow: hidden;
}

.bbhg-rh-loading-progress {
    height: 100%;
    width: 30%;
    background: linear-gradient(90deg, #10b981, #14b8a6);
    border-radius: 2px;
    animation: bbhg-rh-progress 1.5s ease-in-out infinite;
}

@keyframes bbhg-rh-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

.bbhg-rh-loading-sources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.bbhg-rh-source-badge {
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 12px;
    font-size: 0.6875rem;
    color: #059669;
    transition: all 0.3s ease;
}

.bbhg-rh-source-badge.done {
    background: #10b981;
    color: white;
}

/* Stats Bar */
.bbhg-rh-stats-bar {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(20, 184, 166, 0.12));
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.bbhg-rh-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-stat-item:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
}

.bbhg-rh-stat-icon {
    font-size: 20px;
}

.bbhg-rh-stat-count {
    font-size: 1.25rem;
    font-weight: 700;
    color: #059669;
}

.bbhg-rh-stat-label {
    font-size: 0.75rem;
    color: var(--bbhg-text-muted);
}

/* Instant AI Hashtag Recommendations */
.bbhg-rh-instant-hashtags {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(20, 184, 166, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--bbhg-radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}

.bbhg-rh-instant-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-rh-instant-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-rh-instant-title svg {
    color: #10b981;
    stroke: #10b981;
}

.bbhg-rh-instant-badge {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-rh-copy-instant-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--bbhg-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-copy-instant-btn:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.bbhg-rh-copy-instant-btn:hover svg {
    stroke: #ffffff;
}

.bbhg-rh-instant-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    color: var(--bbhg-text-muted);
    font-size: 0.9rem;
}

.bbhg-rh-instant-loader {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: bbhg-rh-spin 0.8s linear infinite;
}

.bbhg-rh-instant-section {
    margin-bottom: 14px;
}

.bbhg-rh-instant-section:last-child {
    margin-bottom: 0;
}

.bbhg-rh-instant-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bbhg-text-muted);
    margin-bottom: 10px;
}

.bbhg-rh-instant-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-rh-instant-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid var(--bbhg-border);
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #10b981;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-instant-tag:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    transform: translateY(-1px);
}

.bbhg-rh-instant-tag.copied {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.bbhg-rh-instant-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.bbhg-rh-instant-category {
    background: #ffffff;
    border-radius: var(--bbhg-radius);
    padding: 12px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-rh-instant-cat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin-bottom: 10px;
}

.bbhg-rh-instant-cat-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-rh-instant-cat-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: 12px;
    font-size: 0.78rem;
    color: var(--bbhg-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-instant-cat-tag:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}

.bbhg-rh-instant-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 14px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: var(--bbhg-radius);
    font-size: 0.8rem;
    color: #b45309;
}

.bbhg-rh-instant-notice svg {
    color: #f59e0b;
    stroke: #f59e0b;
    flex-shrink: 0;
}

/* Load More Button */
.bbhg-rh-load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    margin-top: 16px;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px dashed var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bbhg-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-load-more-btn:hover {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    border-color: #10b981;
    border-style: solid;
    color: #ffffff;
}

.bbhg-rh-load-more-btn:hover svg {
    stroke: #ffffff;
}

.bbhg-rh-load-more-btn svg {
    transition: stroke 0.2s ease;
}

.bbhg-rh-load-more-count {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.bbhg-rh-load-more-btn:hover .bbhg-rh-load-more-count {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
}

/* Hidden items for load more */
.bbhg-rh-paper-card.bbhg-rh-hidden,
.bbhg-rh-news-card.bbhg-rh-hidden,
.bbhg-rh-reddit-card.bbhg-rh-hidden,
.bbhg-rh-book-card.bbhg-rh-hidden {
    display: none;
}

/* Synthesize Button */
.bbhg-rh-synthesis-trigger {
    text-align: center;
    margin-bottom: 24px;
}

.bbhg-rh-synthesize-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: #ffffff !important;
    border: none;
    border-radius: var(--bbhg-radius-lg);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.bbhg-rh-synthesize-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.bbhg-rh-synthesize-btn svg,
.bbhg-rh-synthesize-btn span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.bbhg-rh-synthesize-btn svg {
    width: 20px;
    height: 20px;
}

/* Synthesis Loading */
.bbhg-rh-synthesis-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    color: var(--bbhg-text-muted);
}

.bbhg-rh-mini-loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: bbhg-rh-spin 0.8s linear infinite;
}

/* Panels */
.bbhg-rh-panel {
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-rh-panel h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #059669;
    margin: 0 0 12px 0;
}

.bbhg-rh-panel p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--bbhg-text);
    margin: 0;
}

.bbhg-rh-panel ul {
    margin: 0;
    padding-left: 20px;
    font-size: 0.875rem;
    color: var(--bbhg-text);
}

.bbhg-rh-panel li {
    margin-bottom: 6px;
    line-height: 1.5;
}

.bbhg-rh-summary-panel {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(20, 184, 166, 0.12));
    border-color: rgba(16, 185, 129, 0.2);
}

.bbhg-rh-panel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .bbhg-rh-panel-grid {
        grid-template-columns: 1fr;
    }
}

.bbhg-rh-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-rh-tag {
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-radius: 16px;
    font-size: 0.8125rem;
}

/* Hashtags Panel */
.bbhg-rh-hashtags-panel {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(20, 184, 166, 0.08));
}

.bbhg-rh-top-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.bbhg-rh-pick-tag {
    padding: 8px 16px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: white;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-pick-tag:hover {
    transform: scale(1.05);
}

.bbhg-rh-hashtag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-rh-hashtag-category {
    background: var(--bbhg-bg);
    border-radius: var(--bbhg-radius);
    padding: 12px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-rh-hashtag-category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-rh-hashtag-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.bbhg-rh-hashtag {
    padding: 4px 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-radius: 10px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-hashtag:hover {
    background: #10b981;
    color: white;
}

.bbhg-rh-copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: #ffffff !important;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-copy-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bbhg-rh-copy-all-btn svg,
.bbhg-rh-copy-all-btn span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.bbhg-rh-copy-all-btn svg {
    width: 16px;
    height: 16px;
}

/* Sections */
.bbhg-rh-section {
    margin-bottom: 24px;
}

.bbhg-rh-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.bbhg-rh-section-header h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0;
}

.bbhg-rh-section-icon {
    font-size: 18px;
}

.bbhg-rh-section-count {
    font-size: 0.75rem;
    color: var(--bbhg-text-muted);
    background: var(--bbhg-surface);
    padding: 4px 10px;
    border-radius: 12px;
}

/* Wikipedia Card */
.bbhg-rh-wikipedia-card {
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-rh-wiki-header {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
}

.bbhg-rh-wiki-image {
    width: 120px;
    height: 120px;
    border-radius: var(--bbhg-radius);
    object-fit: cover;
    flex-shrink: 0;
}

.bbhg-rh-wiki-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 4px 0;
}

.bbhg-rh-wiki-desc {
    font-size: 0.8125rem;
    color: var(--bbhg-text-muted);
    margin: 0 0 8px 0;
}

.bbhg-rh-wiki-extract {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--bbhg-text);
}

.bbhg-rh-wiki-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 6px 12px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-radius: 6px;
    font-size: 0.8125rem;
    text-decoration: none;
}

.bbhg-rh-wiki-link:hover {
    background: #10b981;
    color: white;
}

/* Paper Cards */
.bbhg-rh-papers-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bbhg-rh-paper-card {
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    border: 1px solid var(--bbhg-border);
    transition: all 0.2s ease;
}

.bbhg-rh-paper-card:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.bbhg-rh-paper-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.bbhg-rh-paper-title a {
    color: inherit;
    text-decoration: none;
}

.bbhg-rh-paper-title a:hover {
    color: #059669;
}

.bbhg-rh-paper-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 0.75rem;
    color: var(--bbhg-text-muted);
    margin-bottom: 8px;
}

.bbhg-rh-paper-meta span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-rh-paper-abstract {
    font-size: 0.8125rem;
    color: var(--bbhg-text-muted);
    line-height: 1.5;
    margin: 0;
}

.bbhg-rh-paper-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.bbhg-rh-paper-tag {
    padding: 2px 8px;
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-radius: 10px;
    font-size: 0.6875rem;
}

.bbhg-rh-paper-pdf {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #dc2626;
    color: white;
    border-radius: 4px;
    font-size: 0.6875rem;
    text-decoration: none;
}

/* News Cards */
.bbhg-rh-news-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.bbhg-rh-news-card {
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius);
    padding: 14px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-rh-news-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 6px 0;
    line-height: 1.4;
}

.bbhg-rh-news-title a {
    color: inherit;
    text-decoration: none;
}

.bbhg-rh-news-title a:hover {
    color: #059669;
}

.bbhg-rh-news-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.6875rem;
    color: var(--bbhg-text-muted);
}

.bbhg-rh-news-source {
    color: #059669;
    font-weight: 500;
}

/* Reddit Cards */
.bbhg-rh-reddit-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-rh-reddit-card {
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius);
    padding: 14px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-rh-reddit-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 6px 0;
}

.bbhg-rh-reddit-title a {
    color: inherit;
    text-decoration: none;
}

.bbhg-rh-reddit-title a:hover {
    color: #059669;
}

.bbhg-rh-reddit-meta {
    display: flex;
    gap: 12px;
    font-size: 0.6875rem;
    color: var(--bbhg-text-muted);
}

.bbhg-rh-reddit-subreddit {
    color: #ff4500;
    font-weight: 500;
}

/* Books List */
.bbhg-rh-books-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.bbhg-rh-book-card {
    display: flex;
    gap: 12px;
    background: var(--bbhg-surface);
    border-radius: var(--bbhg-radius);
    padding: 12px;
    border: 1px solid var(--bbhg-border);
}

.bbhg-rh-book-cover {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--bbhg-border);
}

.bbhg-rh-book-info {
    flex: 1;
    min-width: 0;
}

.bbhg-rh-book-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.bbhg-rh-book-title a {
    color: inherit;
    text-decoration: none;
}

.bbhg-rh-book-author {
    font-size: 0.6875rem;
    color: var(--bbhg-text-muted);
    margin: 0 0 4px 0;
}

.bbhg-rh-book-year {
    font-size: 0.6875rem;
    color: #059669;
}

/* Empty & Error States */
.bbhg-rh-empty {
    text-align: center;
    padding: 48px 24px;
}

.bbhg-rh-empty-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.bbhg-rh-empty h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 12px 0;
}

.bbhg-rh-empty p {
    font-size: 0.875rem;
    color: var(--bbhg-text-muted);
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-rh-empty-features {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-rh-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--bbhg-radius);
    font-size: 0.8125rem;
    color: #059669;
    font-weight: 500;
}

.bbhg-rh-feature-icon {
    font-size: 16px;
}

.bbhg-rh-error {
    text-align: center;
    padding: 48px 24px;
}

.bbhg-rh-error-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-rh-error h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--bbhg-text);
    margin: 0 0 8px 0;
}

.bbhg-rh-error-msg {
    font-size: 0.875rem;
    color: var(--bbhg-text-muted);
    margin: 0 0 20px 0;
}

.bbhg-rh-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
    color: #ffffff !important;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-rh-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.bbhg-rh-retry-btn svg,
.bbhg-rh-retry-btn span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

.bbhg-rh-retry-btn svg {
    width: 16px;
    height: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-rh-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-rh-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-rh-search-btn {
        width: 100%;
        justify-content: center;
    }
    
    .bbhg-rh-stats-bar {
        justify-content: flex-start;
    }
    
    .bbhg-rh-news-list,
    .bbhg-rh-books-list {
        grid-template-columns: 1fr;
    }
    
    .bbhg-rh-wiki-header {
        flex-direction: column;
    }
    
    .bbhg-rh-wiki-image {
        width: 100%;
        height: 160px;
    }
}

/* ==================== DICK ROCKET GAME ==================== */
.bbhg-dr-container {
    padding: 0;
}

.bbhg-dr-header {
    position: relative;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
    padding: 24px;
    border-radius: var(--bbhg-radius-lg) var(--bbhg-radius-lg) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    overflow: hidden;
}

.bbhg-dr-header-glow {
    position: absolute;
    top: -50%;
    left: -25%;
    width: 150%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-dr-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.bbhg-dr-icon {
    font-size: 2.5rem;
    animation: bbhg-dr-float 3s ease-in-out infinite;
}

@keyframes bbhg-dr-float {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

.bbhg-dr-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.bbhg-dr-subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.7);
}

.bbhg-dr-stats-display {
    display: flex;
    gap: 12px;
    z-index: 1;
}

.bbhg-dr-stat-box {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 10px 18px;
    border-radius: var(--bbhg-radius);
    text-align: center;
    border: 1px solid rgba(255,255,255,0.15);
}

.bbhg-dr-stat-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-dr-stat-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 2px;
}

/* Game Canvas Wrapper */
.bbhg-dr-game-wrapper {
    position: relative;
    background: linear-gradient(180deg, #0f0a1e 0%, #1a0a2e 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 450px;
    max-height: 600px;
    overflow: visible;
}

#bbhg-dr-canvas {
    display: block;
    background: transparent;
    max-width: 100%;
    touch-action: none;
}

/* Overlays */
.bbhg-dr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 10, 30, 0.95);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10;
    overflow-y: auto;
    padding: 20px 0;
}

.bbhg-dr-overlay-content {
    text-align: center;
    padding: 20px;
    max-width: 350px;
    margin: auto;
}

.bbhg-dr-logo {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: bbhg-dr-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-dr-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.bbhg-dr-overlay h3 {
    margin: 0 0 12px;
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-dr-overlay p {
    margin: 0 0 20px;
    color: rgba(255,255,255,0.7);
    font-size: 0.9rem;
    line-height: 1.5;
}

.bbhg-dr-controls-info {
    background: rgba(255,255,255,0.05);
    border-radius: var(--bbhg-radius);
    padding: 16px;
    margin-bottom: 24px;
    text-align: left;
}

.bbhg-dr-control-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.bbhg-dr-control-item:last-child {
    border-bottom: none;
}

.bbhg-dr-control-icon {
    font-size: 1.2rem;
}

.bbhg-dr-start-btn,
.bbhg-dr-restart-btn,
.bbhg-dr-resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.4);
}

.bbhg-dr-start-btn:hover,
.bbhg-dr-restart-btn:hover,
.bbhg-dr-resume-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 30px rgba(236, 72, 153, 0.5);
}

/* Game Over */
.bbhg-dr-gameover-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    animation: bbhg-dr-shake 0.5s ease-in-out;
}

@keyframes bbhg-dr-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.bbhg-dr-final-stats {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.bbhg-dr-final-stat {
    background: rgba(255,255,255,0.1);
    padding: 12px 20px;
    border-radius: var(--bbhg-radius);
    text-align: center;
}

.bbhg-dr-final-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.bbhg-dr-final-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #f59e0b;
}

/* Game Controls */
.bbhg-dr-game-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(180deg, #1a0a2e 0%, #0f0a1e 100%);
    flex-wrap: wrap;
}

.bbhg-dr-control-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--bbhg-radius);
    color: rgba(255,255,255,0.8);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-dr-control-btn:hover:not(:disabled) {
    background: rgba(236, 72, 153, 0.3);
    border-color: #ec4899;
    color: #ffffff;
}

.bbhg-dr-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bbhg-dr-control-btn svg {
    stroke: currentColor;
}

/* Leaderboard */
.bbhg-dr-leaderboard {
    background: var(--bbhg-surface);
    border-radius: 0 0 var(--bbhg-radius-lg) var(--bbhg-radius-lg);
    padding: 20px;
    border-top: 1px solid var(--bbhg-border);
}

.bbhg-dr-leaderboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.bbhg-dr-leaderboard-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-dr-refresh-lb {
    padding: 8px;
    background: transparent;
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    color: var(--bbhg-text-muted);
    transition: all 0.2s ease;
}

.bbhg-dr-refresh-lb:hover {
    background: var(--bbhg-surface-hover);
    color: var(--bbhg-text);
}

.bbhg-dr-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-dr-lb-empty {
    text-align: center;
    padding: 20px;
    color: var(--bbhg-text-muted);
    font-size: 0.9rem;
}

.bbhg-dr-lb-entry {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bbhg-surface-hover);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-dr-lb-entry:hover {
    transform: translateX(4px);
}

.bbhg-dr-lb-rank {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    border-radius: 50%;
    font-size: 0.85rem;
}

.bbhg-dr-lb-entry:nth-child(1) .bbhg-dr-lb-rank {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    color: #ffffff;
}

.bbhg-dr-lb-entry:nth-child(2) .bbhg-dr-lb-rank {
    background: linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%);
    color: #1e293b;
}

.bbhg-dr-lb-entry:nth-child(3) .bbhg-dr-lb-rank {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
    color: #ffffff;
}

.bbhg-dr-lb-entry:nth-child(n+4) .bbhg-dr-lb-rank {
    background: var(--bbhg-border);
    color: var(--bbhg-text-muted);
}

.bbhg-dr-lb-name {
    flex: 1;
    font-weight: 500;
    color: var(--bbhg-text);
}

.bbhg-dr-lb-score {
    font-weight: 700;
    color: #ec4899;
}

.bbhg-dr-lb-wave {
    font-size: 0.75rem;
    color: var(--bbhg-text-muted);
    padding: 4px 8px;
    background: var(--bbhg-surface);
    border-radius: 10px;
}

/* Tips */
.bbhg-dr-tips {
    padding: 20px;
    background: var(--bbhg-surface);
    margin-top: 16px;
    border-radius: var(--bbhg-radius-lg);
    border: 1px solid var(--bbhg-border);
}

.bbhg-dr-tips h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-dr-tips ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bbhg-dr-tips li {
    padding: 8px 0;
    color: var(--bbhg-text-muted);
    font-size: 0.85rem;
    border-bottom: 1px solid var(--bbhg-border);
}

.bbhg-dr-tips li:last-child {
    border-bottom: none;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-dr-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-dr-stats-display {
        width: 100%;
        justify-content: space-between;
    }
    
    .bbhg-dr-stat-box {
        padding: 8px 12px;
    }
    
    .bbhg-dr-final-stats {
        flex-direction: column;
    }
    
    .bbhg-dr-control-btn span {
        display: none;
    }
}

/* Dick Rocket - Leaderboard Name Input */
.bbhg-dr-submit-score {
    margin: 20px 0;
    text-align: center;
}

.bbhg-dr-name-label {
    display: block;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 12px;
}

.bbhg-dr-name-input-wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.bbhg-dr-name-input {
    padding: 12px 16px;
    background: rgba(255,255,255,0.1);
    border: 2px solid rgba(236, 72, 153, 0.5);
    border-radius: var(--bbhg-radius);
    color: #ffffff;
    font-size: 1rem;
    width: 180px;
    text-align: center;
    transition: all 0.2s ease;
}

.bbhg-dr-name-input:focus {
    outline: none;
    border-color: #ec4899;
    background: rgba(255,255,255,0.15);
    box-shadow: 0 0 20px rgba(236, 72, 153, 0.3);
}

.bbhg-dr-name-input::placeholder {
    color: rgba(255,255,255,0.4);
}

.bbhg-dr-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: #ffffff;
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.bbhg-dr-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.bbhg-dr-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.bbhg-dr-submit-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
    padding: 14px 20px;
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.5);
    border-radius: var(--bbhg-radius);
    color: #10b981;
    font-size: 0.95rem;
}

.bbhg-dr-success-icon {
    font-size: 1.3rem;
}

.bbhg-dr-submit-success strong {
    color: #fbbf24;
    font-size: 1.1rem;
}

/* Animation for success */
@keyframes bbhg-dr-success-pop {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.bbhg-dr-submit-success {
    animation: bbhg-dr-success-pop 0.4s ease-out;
}

/* Fullscreen styles */
.bbhg-dr-container:fullscreen {
    background: #0f0a1e;
    padding: 10px;
    padding-top: max(10px, env(safe-area-inset-top, 10px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    padding-left: max(10px, env(safe-area-inset-left, 10px));
    padding-right: max(10px, env(safe-area-inset-right, 10px));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.bbhg-dr-container:fullscreen .bbhg-dr-header {
    padding: 12px 16px;
    border-radius: var(--bbhg-radius);
    flex-shrink: 0;
}

.bbhg-dr-container:fullscreen .bbhg-dr-title-section {
    gap: 10px;
}

.bbhg-dr-container:fullscreen .bbhg-dr-icon {
    font-size: 1.8rem;
}

.bbhg-dr-container:fullscreen .bbhg-dr-header h2 {
    font-size: 1.2rem;
}

.bbhg-dr-container:fullscreen .bbhg-dr-subtitle {
    display: none;
}

.bbhg-dr-container:fullscreen .bbhg-dr-stats-display {
    gap: 8px;
}

.bbhg-dr-container:fullscreen .bbhg-dr-stat-box {
    padding: 6px 12px;
}

.bbhg-dr-container:fullscreen .bbhg-dr-stat-label {
    font-size: 0.6rem;
}

.bbhg-dr-container:fullscreen .bbhg-dr-stat-value {
    font-size: 1rem;
}

.bbhg-dr-container:fullscreen .bbhg-dr-game-wrapper {
    flex: 1;
    max-height: none;
    min-height: auto;
}

.bbhg-dr-container:fullscreen #bbhg-dr-canvas {
    width: auto;
    height: 100%;
    max-height: calc(100vh - 180px);
}

.bbhg-dr-container:fullscreen .bbhg-dr-game-controls {
    padding: 10px;
    flex-shrink: 0;
}

.bbhg-dr-container:fullscreen .bbhg-dr-leaderboard {
    max-height: 200px;
    overflow-y: auto;
}

.bbhg-dr-container:-webkit-full-screen {
    background: #0f0a1e;
    padding: 10px;
    padding-top: max(10px, env(safe-area-inset-top, 10px));
    padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    padding-left: max(10px, env(safe-area-inset-left, 10px));
    padding-right: max(10px, env(safe-area-inset-right, 10px));
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-header {
    padding: 12px 16px;
    border-radius: var(--bbhg-radius);
    flex-shrink: 0;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-title-section {
    gap: 10px;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-icon {
    font-size: 1.8rem;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-header h2 {
    font-size: 1.2rem;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-subtitle {
    display: none;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-stats-display {
    gap: 8px;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-stat-box {
    padding: 6px 12px;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-stat-label {
    font-size: 0.6rem;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-stat-value {
    font-size: 1rem;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-game-wrapper {
    flex: 1;
    max-height: none;
    min-height: auto;
}

.bbhg-dr-container:-webkit-full-screen #bbhg-dr-canvas {
    width: auto;
    height: 100%;
    max-height: calc(100vh - 180px);
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-game-controls {
    padding: 10px;
    flex-shrink: 0;
}

.bbhg-dr-container:-webkit-full-screen .bbhg-dr-leaderboard {
    max-height: 200px;
    overflow-y: auto;
}

/* Mobile fullscreen - extra compact */
@media (max-width: 480px) {
    .bbhg-dr-container:fullscreen .bbhg-dr-header,
    .bbhg-dr-container:-webkit-full-screen .bbhg-dr-header {
        padding: 10px 12px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        gap: 8px;
    }
    
    .bbhg-dr-container:fullscreen .bbhg-dr-icon,
    .bbhg-dr-container:-webkit-full-screen .bbhg-dr-icon {
        font-size: 1.5rem;
    }
    
    .bbhg-dr-container:fullscreen .bbhg-dr-header h2,
    .bbhg-dr-container:-webkit-full-screen .bbhg-dr-header h2 {
        font-size: 1rem;
        white-space: nowrap;
    }
    
    .bbhg-dr-container:fullscreen .bbhg-dr-stats-display,
    .bbhg-dr-container:-webkit-full-screen .bbhg-dr-stats-display {
        gap: 6px;
    }
    
    .bbhg-dr-container:fullscreen .bbhg-dr-stat-box,
    .bbhg-dr-container:-webkit-full-screen .bbhg-dr-stat-box {
        padding: 4px 8px;
    }
    
    .bbhg-dr-container:fullscreen .bbhg-dr-stat-label,
    .bbhg-dr-container:-webkit-full-screen .bbhg-dr-stat-label {
        font-size: 0.55rem;
    }
    
    .bbhg-dr-container:fullscreen .bbhg-dr-stat-value,
    .bbhg-dr-container:-webkit-full-screen .bbhg-dr-stat-value {
        font-size: 0.9rem;
    }
}

/* Game Over overlay - ensure all content is visible */
#bbhg-dr-gameover-screen .bbhg-dr-overlay-content {
    max-height: 100%;
    padding: 15px;
}

#bbhg-dr-gameover-screen .bbhg-dr-gameover-icon {
    font-size: 3rem;
    margin-bottom: 10px;
}

#bbhg-dr-gameover-screen h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

#bbhg-dr-gameover-screen .bbhg-dr-final-stats {
    margin-bottom: 15px;
}

#bbhg-dr-gameover-screen .bbhg-dr-final-stat {
    padding: 8px 12px;
}

#bbhg-dr-gameover-screen .bbhg-dr-submit-score {
    margin: 15px 0;
}

#bbhg-dr-gameover-screen .bbhg-dr-restart-btn {
    margin-top: 10px;
    padding: 12px 24px;
    font-size: 1rem;
}

/* Small screen adjustments */
@media (max-height: 700px) {
    .bbhg-dr-game-wrapper {
        min-height: 350px;
    }
    
    .bbhg-dr-overlay-content {
        padding: 10px;
    }
    
    #bbhg-dr-gameover-screen .bbhg-dr-gameover-icon {
        font-size: 2.5rem;
        margin-bottom: 5px;
    }
    
    #bbhg-dr-gameover-screen .bbhg-dr-final-stats {
        margin-bottom: 10px;
        gap: 8px;
    }
    
    #bbhg-dr-gameover-screen .bbhg-dr-final-stat {
        padding: 6px 10px;
    }
    
    #bbhg-dr-gameover-screen .bbhg-dr-final-label {
        font-size: 0.65rem;
    }
    
    #bbhg-dr-gameover-screen .bbhg-dr-final-value {
        font-size: 1rem;
    }
}

/* ==================== SOCIAL MEDIA INSIGHTS STYLES ==================== */
.bbhg-si-container {
    padding: 0;
}

.bbhg-si-header {
    position: relative;
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 50%, #f97316 100%);
    padding: 24px;
    border-radius: var(--bbhg-radius-lg) var(--bbhg-radius-lg) 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    overflow: hidden;
}

.bbhg-si-header-glow {
    position: absolute;
    top: -50%;
    left: -25%;
    width: 150%;
    height: 200%;
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-si-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 1;
}

.bbhg-si-icon {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-si-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
    stroke: #fff;
}

.bbhg-si-header h2 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.bbhg-si-subtitle {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
}

.bbhg-si-status {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.15);
    padding: 8px 16px;
    border-radius: 20px;
    z-index: 1;
}

.bbhg-si-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s infinite;
}

.bbhg-si-status .bbhg-status-text {
    font-size: 0.8rem;
    color: #fff;
    font-weight: 500;
}

/* Mode Tabs */
.bbhg-si-mode-tabs {
    display: flex;
    gap: 8px;
    padding: 16px 20px;
    background: var(--bbhg-surface);
    border-bottom: 1px solid var(--bbhg-border);
    overflow-x: auto;
}

.bbhg-si-mode-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    color: var(--bbhg-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-si-mode-tab:hover {
    background: var(--bbhg-hover);
    color: var(--bbhg-text);
}

.bbhg-si-mode-tab.active {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
    color: #fff;
}

.bbhg-si-mode-tab svg {
    flex-shrink: 0;
}

.bbhg-si-mode-tab.active svg {
    color: #fff;
    stroke: #fff;
}

/* Mode Content */
.bbhg-si-mode-content {
    display: none;
    padding: 20px;
}

.bbhg-si-mode-content.active {
    display: block;
}

/* Search Section */
.bbhg-si-search-section {
    margin-bottom: 24px;
}

.bbhg-si-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-si-label {
    font-size: 0.9rem;
    color: var(--bbhg-text-muted);
    font-weight: 500;
}

.bbhg-si-input-wrap {
    display: flex;
    gap: 12px;
}

.bbhg-si-input-container {
    flex: 1;
    position: relative;
}

.bbhg-si-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bbhg-text-muted);
}

.bbhg-si-input-icon svg {
    width: 18px;
    height: 18px;
}

.bbhg-si-input {
    width: 100%;
    padding: 14px 14px 14px 44px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    font-size: 0.95rem;
    color: var(--bbhg-text);
    transition: all 0.2s ease;
}

.bbhg-si-input:focus {
    outline: none;
    border-color: #ef4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.bbhg-si-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: var(--bbhg-radius);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-si-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.bbhg-si-search-btn svg {
    width: 18px;
    height: 18px;
    color: #fff;
    stroke: #fff;
    fill: none;
}

.bbhg-si-search-btn span {
    color: #fff;
}

/* Stats Grid */
.bbhg-si-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.bbhg-si-stat-card {
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
    text-align: center;
    transition: all 0.2s ease;
}

.bbhg-si-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.bbhg-si-stat-icon {
    font-size: 1.5rem;
    margin-bottom: 8px;
}

.bbhg-si-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bbhg-text);
    margin-bottom: 4px;
}

.bbhg-si-stat-label {
    font-size: 0.8rem;
    color: var(--bbhg-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Channel Card */
.bbhg-si-channel-card {
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
    margin-bottom: 24px;
}

.bbhg-si-channel-banner {
    height: 120px;
    background: linear-gradient(135deg, #1e1e1e, #333);
    background-size: cover;
    background-position: center;
}

.bbhg-si-channel-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    margin-top: -40px;
}

.bbhg-si-channel-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 4px solid var(--bbhg-surface);
    object-fit: cover;
}

.bbhg-si-channel-details h3 {
    margin: 0 0 4px;
    font-size: 1.25rem;
    color: var(--bbhg-text);
}

.bbhg-si-channel-handle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--bbhg-text-muted);
}

.bbhg-si-channel-country {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--bbhg-text-muted);
}

/* Video Card */
.bbhg-si-video-card {
    display: flex;
    gap: 16px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    padding: 16px;
    margin-bottom: 24px;
}

.bbhg-si-video-thumb-wrap {
    position: relative;
    flex-shrink: 0;
}

.bbhg-si-video-thumb {
    width: 200px;
    height: 112px;
    border-radius: var(--bbhg-radius);
    object-fit: cover;
}

.bbhg-si-video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.bbhg-si-video-info h3 {
    margin: 0 0 8px;
    font-size: 1.1rem;
    color: var(--bbhg-text);
    line-height: 1.4;
}

.bbhg-si-video-channel,
.bbhg-si-video-published {
    margin: 0 0 4px;
    font-size: 0.85rem;
    color: var(--bbhg-text-muted);
}

/* Insights Section */
.bbhg-si-insights-section {
    margin-bottom: 24px;
}

.bbhg-si-insights-section h4 {
    margin: 0 0 16px;
    font-size: 1rem;
    color: var(--bbhg-text);
}

.bbhg-si-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.bbhg-si-insight-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    padding: 12px 16px;
}

.bbhg-si-insight-label {
    font-size: 0.85rem;
    color: var(--bbhg-text-muted);
}

.bbhg-si-insight-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bbhg-text);
}

.bbhg-si-insight-value.excellent { color: #22c55e; }
.bbhg-si-insight-value.good { color: #3b82f6; }
.bbhg-si-insight-value.average { color: #f59e0b; }
.bbhg-si-insight-value.low { color: #ef4444; }
.bbhg-si-insight-value.warning { color: #f97316; }
.bbhg-si-insight-value.gold { color: #f59e0b; }
.bbhg-si-insight-value.silver { color: #9ca3af; }
.bbhg-si-insight-value.bronze { color: #d97706; }
.bbhg-si-insight-value.green { color: #22c55e; }
.bbhg-si-insight-value.blue { color: #3b82f6; }

/* Recent Videos Grid */
.bbhg-si-recent-videos {
    margin-bottom: 24px;
}

.bbhg-si-recent-videos h4 {
    margin: 0 0 16px;
    font-size: 1rem;
    color: var(--bbhg-text);
}

.bbhg-si-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.bbhg-si-video-item {
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.bbhg-si-video-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.bbhg-si-video-item-thumb {
    position: relative;
}

.bbhg-si-video-item-thumb img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.bbhg-si-video-item-info {
    padding: 12px;
}

.bbhg-si-video-item-title {
    margin: 0 0 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--bbhg-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-si-video-item-stats {
    display: flex;
    gap: 12px;
    font-size: 0.8rem;
    color: var(--bbhg-text-muted);
}

.bbhg-si-yt-source-link:hover { background: rgba(239,68,68,0.18) !important; border-color: rgba(239,68,68,0.35) !important; transform: translateY(-1px); }
.bbhg-si-yt-link:hover { filter: brightness(1.15); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(239,68,68,0.35) !important; }

/* SEO Section */
.bbhg-si-seo-section {
    margin-bottom: 24px;
}

.bbhg-si-seo-section h4,
.bbhg-si-seo-section h5 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--bbhg-text);
}

.bbhg-si-seo-section h5 {
    font-size: 0.9rem;
    margin-top: 16px;
}

.bbhg-si-seo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.bbhg-si-tags-list,
.bbhg-si-hashtags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-si-tag,
.bbhg-si-hashtag {
    display: inline-block;
    padding: 6px 12px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--bbhg-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-si-tag:hover,
.bbhg-si-hashtag:hover {
    background: var(--bbhg-primary);
    color: #fff;
    border-color: var(--bbhg-primary);
}

.bbhg-si-hashtag {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* AI Section */
.bbhg-si-ai-section {
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius-lg);
    padding: 20px;
}

.bbhg-si-ai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.bbhg-si-ai-header h4 {
    margin: 0;
    font-size: 1rem;
    color: var(--bbhg-text);
}

.bbhg-si-ai-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border: none;
    border-radius: var(--bbhg-radius);
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-si-ai-btn span {
    color: #ffffff !important;
}

.bbhg-si-ai-btn svg {
    stroke: #ffffff !important;
}

.bbhg-si-ai-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.bbhg-si-ai-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

/* Hashtag-specific AI button styling */
.bbhg-si-hashtag-btn {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}

.bbhg-si-hashtag-btn:hover {
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.bbhg-si-ai-content {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--bbhg-text);
}

.bbhg-si-ai-placeholder {
    color: var(--bbhg-text-muted);
    font-style: italic;
}

.bbhg-si-ai-content p {
    margin: 0 0 12px;
}

.bbhg-si-ai-content ol,
.bbhg-si-ai-content ul {
    margin: 0 0 12px 20px;
    padding: 0;
}

.bbhg-si-ai-content li {
    margin-bottom: 8px;
}

/* Copyable Tags and Hashtags */
.bbhg-si-copyable {
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.bbhg-si-copyable:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.bbhg-si-copyable.bbhg-si-copied {
    background: #10b981 !important;
    color: #ffffff !important;
}

.bbhg-si-tag,
.bbhg-si-hashtag {
    display: inline-block;
    padding: 4px 10px;
    margin: 4px;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 500;
}

.bbhg-si-tag {
    background: rgba(139, 92, 246, 0.15);
    color: #8b5cf6;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.bbhg-si-hashtag {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.bbhg-si-ai-tag {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.4);
}

/* AI Hashtags Grid */
.bbhg-si-ai-hashtags-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.bbhg-si-ai-hashtags-section {
    border-top: 1px dashed var(--bbhg-border);
    margin-top: 16px;
    padding-top: 16px;
}

/* Copy All Button */
.bbhg-si-copy-all-wrap {
    margin-top: 12px;
    text-align: center;
}

.bbhg-si-copy-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border: none;
    border-radius: var(--bbhg-radius);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-si-copy-all-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* Trending Filters */
.bbhg-si-trending-filters {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.bbhg-si-filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-si-filter-group label {
    font-size: 0.85rem;
    color: var(--bbhg-text-muted);
    font-weight: 500;
}

.bbhg-si-select {
    padding: 12px 16px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    font-size: 0.95rem;
    color: var(--bbhg-text);
    min-width: 180px;
    cursor: pointer;
}

.bbhg-si-select:focus {
    outline: none;
    border-color: #ef4444;
}

/* Trending Results */
.bbhg-si-trending-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.bbhg-si-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: var(--bbhg-text-muted);
    font-style: italic;
}

/* Compare Section */
.bbhg-si-compare-section {
    margin-bottom: 24px;
}

.bbhg-si-selected-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 16px 0;
    min-height: 60px;
    padding: 16px;
    background: var(--bbhg-surface);
    border: 1px dashed var(--bbhg-border);
    border-radius: var(--bbhg-radius);
}

.bbhg-si-selected-channel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bbhg-hover);
    border-radius: var(--bbhg-radius);
}

.bbhg-si-selected-channel img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.bbhg-si-selected-channel span {
    font-size: 0.9rem;
    font-weight: 500;
}

.bbhg-si-remove-channel {
    background: none;
    border: none;
    color: var(--bbhg-text-muted);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.bbhg-si-remove-channel:hover {
    color: #ef4444;
}

.bbhg-si-compare-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 24px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    border-radius: var(--bbhg-radius);
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-si-compare-btn span {
    color: #ffffff !important;
}

.bbhg-si-compare-btn svg {
    stroke: #ffffff !important;
}

.bbhg-si-compare-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.bbhg-si-compare-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Compare Table */
.bbhg-si-compare-table-wrap {
    overflow-x: auto;
    margin-bottom: 20px;
}

.bbhg-si-compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.bbhg-si-compare-table th,
.bbhg-si-compare-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--bbhg-border);
}

.bbhg-si-compare-table th {
    background: var(--bbhg-surface);
    font-weight: 600;
    color: var(--bbhg-text-muted);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.bbhg-si-compare-table td {
    color: var(--bbhg-text);
}

.bbhg-si-compare-table tr:hover td {
    background: var(--bbhg-hover);
}

.bbhg-si-compare-channel-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-si-compare-channel-cell img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.bbhg-si-compare-insights {
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    padding: 20px;
    margin-top: 16px;
}

.bbhg-si-compare-insights h5 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--bbhg-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-si-compare-insights p {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: var(--bbhg-text);
    line-height: 1.6;
    padding: 10px 14px;
    background: var(--bbhg-hover);
    border-radius: 8px;
    border-left: 3px solid var(--bbhg-primary);
}

.bbhg-si-compare-insights p:last-child {
    margin-bottom: 0;
}

.bbhg-si-compare-insights p strong {
    color: var(--bbhg-primary);
}

/* Loading & Error States */
.bbhg-si-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.bbhg-si-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--bbhg-border);
    border-top-color: #ef4444;
    border-radius: 50%;
    animation: bbhg-spin 1s linear infinite;
}

.bbhg-si-loading p {
    margin: 16px 0 0;
    color: var(--bbhg-text-muted);
}

.bbhg-si-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-si-error-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.bbhg-si-error h4 {
    margin: 0 0 8px;
    color: var(--bbhg-text);
}

.bbhg-si-error p {
    margin: 0 0 20px;
    color: var(--bbhg-text-muted);
}

.bbhg-si-error-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bbhg-si-retry-btn,
.bbhg-si-settings-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--bbhg-radius);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.bbhg-si-retry-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: #fff;
}

.bbhg-si-settings-link {
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    color: var(--bbhg-text);
}

.bbhg-si-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.bbhg-si-settings-link:hover {
    background: var(--bbhg-hover);
}

/* Search Results */
.bbhg-si-search-results {
    margin-bottom: 24px;
}

.bbhg-si-search-results h4 {
    margin: 0 0 12px;
    font-size: 1rem;
    color: var(--bbhg-text);
}

.bbhg-si-channel-list {
    display: grid;
    gap: 12px;
}

.bbhg-si-channel-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bbhg-surface);
    border: 1px solid var(--bbhg-border);
    border-radius: var(--bbhg-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-si-channel-list-item:hover {
    background: var(--bbhg-hover);
    border-color: #ef4444;
}

.bbhg-si-channel-list-item img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.bbhg-si-channel-list-info {
    flex: 1;
}

.bbhg-si-channel-list-info h5 {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--bbhg-text);
}

.bbhg-si-channel-list-info p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--bbhg-text-muted);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-si-header {
        padding: 16px;
    }
    
    .bbhg-si-header h2 {
        font-size: 1.2rem;
    }
    
    .bbhg-si-mode-tabs {
        padding: 12px;
    }
    
    .bbhg-si-mode-tab {
        padding: 8px 12px;
        font-size: 0.8rem;
    }
    
    .bbhg-si-mode-tab span {
        display: none;
    }
    
    .bbhg-si-mode-content {
        padding: 16px;
    }
    
    .bbhg-si-input-wrap {
        flex-direction: column;
    }
    
    .bbhg-si-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-si-video-card {
        flex-direction: column;
    }
    
    .bbhg-si-video-thumb {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9;
    }
    
    .bbhg-si-trending-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .bbhg-si-select {
        width: 100%;
    }
    
    .bbhg-si-ai-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-si-ai-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== LIVE EVENT RADAR STYLES ==================== */
.bbhg-er-container { padding: 0 4px; }

.bbhg-er-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px; background: linear-gradient(135deg, #f97316 0%, #ef4444 50%, #ec4899 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px; position: relative; overflow: hidden; color: white;
}
.bbhg-er-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-er-shimmer 10s ease-in-out infinite;
}
@keyframes bbhg-er-shimmer { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(5%, 5%) rotate(2deg); } }

.bbhg-er-header-glow {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); transform: translate(30%, -30%);
}
.bbhg-er-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-er-icon {
    width: 56px; height: 56px; background: rgba(255, 255, 255, 0.2); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.bbhg-er-icon svg { width: 32px; height: 32px; stroke: white; }
.bbhg-er-title-section h2 { font-size: 24px; font-weight: 700; color: white !important; margin: 0 0 4px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.bbhg-er-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.9) !important; margin: 0; }
.bbhg-er-status {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2); border-radius: 24px; font-size: 13px;
    color: white !important; font-weight: 500; position: relative; z-index: 1; backdrop-filter: blur(10px);
}
.bbhg-er-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; animation: bbhg-pulse 2s ease-in-out infinite; }
.bbhg-er-status .bbhg-status-text { color: white !important; }

.bbhg-er-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 20px;
}
.bbhg-er-filters-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.bbhg-er-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 140px; }
.bbhg-er-filter-location { flex: 1; min-width: 180px; }
.bbhg-er-label { display: block; font-size: 13px; font-weight: 600; color: var(--bbhg-gray-700); }
.bbhg-er-select, .bbhg-er-input {
    width: 100%; padding: 12px 14px !important; border: 2px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius);
    font-size: 14px; color: var(--bbhg-gray-800); background: var(--bbhg-gray-50); transition: all 0.2s ease; outline: none;
    box-sizing: border-box !important; min-height: 48px; height: auto;
}
.bbhg-er-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
    padding-right: 36px !important;
}
.bbhg-er-select:focus, .bbhg-er-input:focus { border-color: #f97316; background: var(--bbhg-white); box-shadow: 0 0 0 4px rgba(249, 115, 22, 0.1); }
.bbhg-er-input::placeholder { color: #9ca3af; }
.bbhg-er-scan-btn {
    display: flex; align-items: center; gap: 8px; padding: 12px 24px;
    background: linear-gradient(135deg, #f97316 0%, #ef4444 100%); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-er-scan-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(249, 115, 22, 0.4); }
.bbhg-er-scan-btn:active { transform: translateY(0); }
.bbhg-er-scan-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-er-scan-btn span { color: white !important; }

/* Event Radar Loading */
.bbhg-er-loading { text-align: center; padding: 60px 20px; }
.bbhg-er-loading-animation { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; }
.bbhg-er-loader {
    width: 80px; height: 80px; border: 3px solid rgba(249, 115, 22, 0.1); border-top-color: #f97316;
    border-radius: 50%; animation: bbhg-spin 1s linear infinite;
}
.bbhg-er-loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; }
.bbhg-er-loading-title { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-er-loading-text { font-size: 14px; color: var(--bbhg-gray-500); margin: 0 0 20px 0; }
.bbhg-er-loading-bar { width: 240px; height: 4px; background: var(--bbhg-gray-200); border-radius: 4px; margin: 0 auto; overflow: hidden; }
.bbhg-er-loading-progress { height: 100%; background: linear-gradient(90deg, #f97316, #ef4444, #ec4899); border-radius: 4px; animation: bbhg-progress 2s ease-in-out infinite; }

/* Event Results */
.bbhg-er-results-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.bbhg-er-results-title { display: flex; align-items: center; gap: 10px; }
.bbhg-er-results-title h3 { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0; }
.bbhg-er-results-icon { font-size: 24px; }
.bbhg-er-results-meta { font-size: 13px; color: var(--bbhg-gray-500); }

.bbhg-er-events-grid { display: flex; flex-direction: column; gap: 12px; }

.bbhg-er-event-card {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-lg);
    padding: 20px; transition: all 0.2s ease; position: relative; overflow: hidden;
}
.bbhg-er-event-card:hover { border-color: rgba(249, 115, 22, 0.3); box-shadow: 0 4px 16px rgba(249, 115, 22, 0.08); }
.bbhg-er-event-card.urgency-critical { border-left: 4px solid #ef4444; }
.bbhg-er-event-card.urgency-high { border-left: 4px solid #f97316; }
.bbhg-er-event-card.urgency-medium { border-left: 4px solid #f59e0b; }
.bbhg-er-event-card.urgency-normal { border-left: 4px solid #3b82f6; }
.bbhg-er-event-card.urgency-low { border-left: 4px solid var(--bbhg-gray-300); }

.bbhg-er-event-top { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.bbhg-er-event-date-badge {
    min-width: 56px; text-align: center; padding: 8px 10px; background: linear-gradient(135deg, #fff7ed, #fef3c7);
    border-radius: 12px; border: 1px solid rgba(249, 115, 22, 0.2); flex-shrink: 0;
}
.bbhg-er-event-date-month { display: block; font-size: 11px; font-weight: 700; color: #f97316; text-transform: uppercase; letter-spacing: 0.5px; }
.bbhg-er-event-date-day { display: block; font-size: 22px; font-weight: 800; color: #ea580c; line-height: 1; }
.bbhg-er-event-info { flex: 1; min-width: 0; }
.bbhg-er-event-name { font-size: 16px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 4px 0; }
.bbhg-er-event-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--bbhg-gray-500); }
.bbhg-er-event-meta-item { display: flex; align-items: center; gap: 4px; }
.bbhg-er-event-meta-item svg { width: 14px; height: 14px; stroke: var(--bbhg-gray-400); }
.bbhg-er-event-badges { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.bbhg-er-badge {
    padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.bbhg-er-badge-category { background: rgba(249, 115, 22, 0.1); color: #ea580c; }
.bbhg-er-badge-source { background: var(--bbhg-gray-100); color: var(--bbhg-gray-600); }
.bbhg-er-badge-timing { background: rgba(239, 68, 68, 0.1); color: #dc2626; font-weight: 700; }

.bbhg-er-event-timing { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; background: var(--bbhg-gray-50); border-radius: 8px; font-size: 13px; }
.bbhg-er-timing-icon { font-size: 16px; }
.bbhg-er-timing-text { color: var(--bbhg-gray-700); font-weight: 500; }

.bbhg-er-event-bottom { display: flex; gap: 16px; flex-wrap: wrap; }
.bbhg-er-event-hashtags { flex: 1; }
.bbhg-er-event-hashtags-label { font-size: 11px; font-weight: 700; color: var(--bbhg-gray-400); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.bbhg-er-hashtag-list { display: flex; flex-wrap: wrap; gap: 4px; }
.bbhg-er-hashtag {
    padding: 3px 8px; background: linear-gradient(135deg, rgba(249,115,22,0.08), rgba(239,68,68,0.08));
    border-radius: 6px; font-size: 12px; color: #ea580c; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.bbhg-er-hashtag:hover { background: linear-gradient(135deg, rgba(249,115,22,0.15), rgba(239,68,68,0.15)); }
.bbhg-er-event-angles { flex: 1; min-width: 200px; }
.bbhg-er-event-angles-label { font-size: 11px; font-weight: 700; color: var(--bbhg-gray-400); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.bbhg-er-angle { font-size: 12px; color: var(--bbhg-gray-600); padding: 2px 0; }
.bbhg-er-ticket-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249,115,22,0.4) !important; filter: brightness(1.1); }
.bbhg-er-details-btn:hover { background: rgba(255,255,255,0.1) !important; border-color: rgba(255,255,255,0.2) !important; }

/* Event Radar Empty & Error */
.bbhg-er-empty, .bbhg-er-error { text-align: center; padding: 60px 20px; }
.bbhg-er-empty-icon, .bbhg-er-error-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-er-empty h3, .bbhg-er-error h4 { font-size: 20px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-er-empty p, .bbhg-er-error p { font-size: 14px; color: var(--bbhg-gray-500); max-width: 500px; margin: 0 auto 24px; }
.bbhg-er-empty-features { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.bbhg-er-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bbhg-gray-600); font-weight: 500; }
.bbhg-er-feature-icon { font-size: 18px; }
.bbhg-er-retry-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
    background: linear-gradient(135deg, #f97316, #ef4444); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.bbhg-er-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
.bbhg-er-retry-btn svg { width: 16px; height: 16px; stroke: white; }
.bbhg-er-retry-btn span { color: white !important; }

@media (max-width: 768px) {
    .bbhg-er-header { flex-direction: column; align-items: flex-start; }
    .bbhg-er-filters-row { flex-direction: column; gap: 10px; }
    .bbhg-er-filter-group { min-width: 100%; width: 100%; }
    .bbhg-er-select, .bbhg-er-input { width: 100% !important; display: block; }
    .bbhg-er-scan-btn { width: 100%; justify-content: center; }
    .bbhg-er-event-top { flex-direction: column; }
    .bbhg-er-event-bottom { flex-direction: column; }
    .bbhg-er-event-badges { order: -1; }
}

/* ==================== PODCAST INTELLIGENCE STYLES ==================== */
.bbhg-pi-container { padding: 0 4px; }

.bbhg-pi-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px; background: linear-gradient(135deg, #059669 0%, #0891b2 50%, #6366f1 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px; position: relative; overflow: hidden; color: white;
}
.bbhg-pi-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-pi-shimmer 10s ease-in-out infinite;
}
@keyframes bbhg-pi-shimmer { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(5%, 5%) rotate(2deg); } }

.bbhg-pi-header-glow {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); transform: translate(30%, -30%);
}
.bbhg-pi-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-pi-icon {
    width: 56px; height: 56px; background: rgba(255, 255, 255, 0.2); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.bbhg-pi-icon svg { width: 32px; height: 32px; stroke: white; }
.bbhg-pi-title-section h2 { font-size: 24px; font-weight: 700; color: white !important; margin: 0 0 4px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.bbhg-pi-subtitle { font-size: 14px; color: rgba(255, 255, 255, 0.9) !important; margin: 0; }
.bbhg-pi-status {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2); border-radius: 24px; font-size: 13px;
    color: white !important; font-weight: 500; position: relative; z-index: 1; backdrop-filter: blur(10px);
}
.bbhg-pi-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; animation: bbhg-pulse 2s ease-in-out infinite; }
.bbhg-pi-status .bbhg-status-text { color: white !important; }

.bbhg-pi-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 20px;
}
.bbhg-pi-input-group { margin-bottom: 16px; }
.bbhg-pi-label { display: block; font-size: 14px; font-weight: 600; color: var(--bbhg-gray-700); margin-bottom: 10px; }
.bbhg-pi-input-wrap { position: relative; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bbhg-pi-input-container { position: relative; flex: 1; min-width: 200px; }
.bbhg-pi-input-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #374151; pointer-events: none; z-index: 2; display: flex; align-items: center;
}
.bbhg-pi-input-icon svg { width: 20px; height: 20px; }
.bbhg-pi-input {
    width: 100%; padding: 14px 16px 14px 48px !important; border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius); font-size: 15px; color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50); transition: all 0.2s ease; outline: none;
    box-sizing: border-box !important; min-height: 50px; height: auto;
}
.bbhg-pi-input:focus { border-color: #059669; background: var(--bbhg-white); box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1); }
.bbhg-pi-input::placeholder { color: #9ca3af; }
.bbhg-pi-genre-select {
    padding: 14px 16px !important; border: 2px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius);
    font-size: 14px; color: var(--bbhg-gray-800); background: var(--bbhg-gray-50); outline: none; cursor: pointer;
    box-sizing: border-box !important; max-width: 100%; flex-shrink: 0;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    min-height: 50px; height: auto;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
    padding-right: 36px !important;
}
.bbhg-pi-genre-select:focus { border-color: #059669; }
.bbhg-pi-search-btn {
    display: flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: linear-gradient(135deg, #059669 0%, #0891b2 100%); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-pi-search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(5, 150, 105, 0.4); }
.bbhg-pi-search-btn:active { transform: translateY(0); }
.bbhg-pi-search-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-pi-search-btn span { color: white !important; }

.bbhg-pi-quick-topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbhg-pi-quick-label { font-size: 13px; color: #1f2937; font-weight: 500; }
.bbhg-pi-topic-pill {
    padding: 8px 14px; background: var(--bbhg-gray-100); border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--bbhg-gray-700); cursor: pointer; transition: all 0.2s ease;
}
.bbhg-pi-topic-pill:hover { background: linear-gradient(135deg, rgba(5,150,105,0.1), rgba(8,145,178,0.1)); border-color: #059669; color: #059669; }

/* Podcast Loading */
.bbhg-pi-loading { text-align: center; padding: 60px 20px; }
.bbhg-pi-loading-animation { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; }
.bbhg-pi-loader {
    width: 80px; height: 80px; border: 3px solid rgba(5, 150, 105, 0.1); border-top-color: #059669;
    border-radius: 50%; animation: bbhg-spin 1s linear infinite;
}
.bbhg-pi-loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; }
.bbhg-pi-loading-title { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-pi-loading-text { font-size: 14px; color: var(--bbhg-gray-500); margin: 0 0 20px 0; }
.bbhg-pi-loading-bar { width: 240px; height: 4px; background: var(--bbhg-gray-200); border-radius: 4px; margin: 0 auto; overflow: hidden; }
.bbhg-pi-loading-progress { height: 100%; background: linear-gradient(90deg, #059669, #0891b2, #6366f1); border-radius: 4px; animation: bbhg-progress 2s ease-in-out infinite; }

/* Podcast Results */
.bbhg-pi-results-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    margin-bottom: 20px; flex-wrap: wrap;
}
.bbhg-pi-results-title { display: flex; align-items: center; gap: 10px; }
.bbhg-pi-results-title h3 { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0; }
.bbhg-pi-results-icon { font-size: 24px; }
.bbhg-pi-results-actions { display: flex; gap: 8px; }
.bbhg-pi-action-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius); font-size: 13px;
    color: var(--bbhg-gray-600); font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.bbhg-pi-action-btn:hover { border-color: #059669; color: #059669; }
.bbhg-pi-action-btn svg { width: 14px; height: 14px; }

/* Trending Topics Bar */
.bbhg-pi-trending-bar {
    display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 18px; background: linear-gradient(135deg, rgba(5,150,105,0.05), rgba(8,145,178,0.05));
    border: 1px solid rgba(5,150,105,0.15); border-radius: var(--bbhg-radius); margin-bottom: 20px;
}
.bbhg-pi-trending-item { display: flex; align-items: center; gap: 6px; }
.bbhg-pi-trending-label { font-size: 12px; font-weight: 700; color: #059669; }
.bbhg-pi-trending-badge { padding: 3px 10px; background: rgba(5,150,105,0.1); border-radius: 10px; font-size: 11px; font-weight: 600; color: #047857; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.bbhg-pi-trending-badge:hover { background: rgba(5,150,105,0.25); transform: scale(1.05); }

/* Podcast Cards */
.bbhg-pi-podcasts-grid { display: flex; flex-direction: column; gap: 12px; }

.bbhg-pi-podcast-card {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-lg);
    padding: 20px; transition: all 0.2s ease; display: flex; gap: 16px;
}
.bbhg-pi-podcast-card:hover { border-color: rgba(5, 150, 105, 0.3); box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08); }

.bbhg-pi-artwork {
    width: 80px; height: 80px; border-radius: 12px; overflow: hidden; flex-shrink: 0; background: var(--bbhg-gray-100);
    display: flex; align-items: center; justify-content: center;
}
.bbhg-pi-artwork img { width: 100%; height: 100%; object-fit: cover; }
.bbhg-pi-artwork-placeholder { font-size: 32px; }

.bbhg-pi-podcast-info { flex: 1; min-width: 0; }
.bbhg-pi-podcast-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.bbhg-pi-podcast-name { font-size: 16px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0; }
.bbhg-pi-podcast-artist { font-size: 13px; color: var(--bbhg-gray-500); margin: 0 0 6px 0; }
.bbhg-pi-podcast-desc { font-size: 13px; color: var(--bbhg-gray-600); margin: 0 0 10px 0; line-height: 1.5; }

.bbhg-pi-podcast-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.bbhg-pi-meta-tag {
    padding: 3px 10px; border-radius: 10px; font-size: 11px; font-weight: 600;
}
.bbhg-pi-meta-genre { background: rgba(5,150,105,0.1); color: #047857; }
.bbhg-pi-meta-source { background: var(--bbhg-gray-100); color: var(--bbhg-gray-600); }
.bbhg-pi-meta-episodes { background: rgba(99,102,241,0.1); color: #4f46e5; }
.bbhg-pi-meta-fresh { background: rgba(34,197,94,0.1); color: #16a34a; }
.bbhg-pi-meta-chart { background: rgba(249,115,22,0.1); color: #ea580c; }

.bbhg-pi-podcast-hashtags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.bbhg-pi-hashtag {
    padding: 3px 8px; background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(8,145,178,0.08));
    border-radius: 6px; font-size: 12px; color: #047857; font-weight: 500; cursor: pointer; transition: all 0.15s;
}
.bbhg-pi-hashtag:hover { background: linear-gradient(135deg, rgba(5,150,105,0.15), rgba(8,145,178,0.15)); }

.bbhg-pi-podcast-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bbhg-pi-deep-btn, .bbhg-pi-copy-btn, .bbhg-pi-link-btn {
    display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 8px;
    font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.15s; border: 1px solid;
}
.bbhg-pi-deep-btn { background: linear-gradient(135deg, #059669, #0891b2); color: white !important; border-color: transparent; }
.bbhg-pi-deep-btn span { color: white !important; }
.bbhg-pi-deep-btn svg { stroke: white; }
.bbhg-pi-deep-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(5,150,105,0.3); }
.bbhg-pi-copy-btn { background: var(--bbhg-gray-50); color: var(--bbhg-gray-600); border-color: var(--bbhg-gray-200); }
.bbhg-pi-copy-btn:hover { border-color: #059669; color: #059669; }
.bbhg-pi-link-btn { background: var(--bbhg-gray-50); color: var(--bbhg-gray-600); border-color: var(--bbhg-gray-200); text-decoration: none; }
.bbhg-pi-link-btn:hover { border-color: #059669; color: #059669; }

.bbhg-pi-opportunity-bar {
    display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 0;
}
.bbhg-pi-opp-label { font-size: 11px; font-weight: 600; color: var(--bbhg-gray-500); white-space: nowrap; }
.bbhg-pi-opp-bar-bg { flex: 1; height: 6px; background: var(--bbhg-gray-100); border-radius: 3px; overflow: hidden; max-width: 120px; }
.bbhg-pi-opp-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.bbhg-pi-opp-score { font-size: 12px; font-weight: 700; }

/* Deep Dive Modal */
.bbhg-pi-deep-dive-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5);
    z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bbhg-pi-deep-dive-modal {
    background: var(--bbhg-white); border-radius: 16px; max-width: 600px; width: 100%; max-height: 80vh;
    overflow-y: auto; padding: 32px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.bbhg-pi-deep-close {
    position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border: none;
    background: var(--bbhg-gray-100); border-radius: 50%; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--bbhg-gray-600);
}
.bbhg-pi-deep-close:hover { background: var(--bbhg-gray-200); }

.bbhg-pi-deep-section { margin-bottom: 20px; }
.bbhg-pi-deep-section-title { font-size: 14px; font-weight: 700; color: #059669; margin: 0 0 8px 0; text-transform: uppercase; letter-spacing: 0.5px; }
.bbhg-pi-deep-text { font-size: 14px; color: var(--bbhg-gray-700); line-height: 1.6; margin: 0; }
.bbhg-pi-deep-list { list-style: none; padding: 0; margin: 0; }
.bbhg-pi-deep-list li { font-size: 13px; color: var(--bbhg-gray-700); padding: 4px 0; padding-left: 16px; position: relative; }
.bbhg-pi-deep-list li::before { content: '▸'; position: absolute; left: 0; color: #059669; font-weight: 700; }
.bbhg-pi-deep-hashtags { display: flex; flex-wrap: wrap; gap: 6px; }
.bbhg-pi-deep-hashtag {
    padding: 5px 12px; background: linear-gradient(135deg, rgba(5,150,105,0.1), rgba(8,145,178,0.1));
    border-radius: 8px; font-size: 13px; color: #047857; font-weight: 600; cursor: pointer;
}
.bbhg-pi-deep-hashtag:hover { background: linear-gradient(135deg, rgba(5,150,105,0.2), rgba(8,145,178,0.2)); }

/* Podcast Empty & Error */
.bbhg-pi-empty, .bbhg-pi-error { text-align: center; padding: 60px 20px; }
.bbhg-pi-empty-icon, .bbhg-pi-error-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-pi-empty h3, .bbhg-pi-error h4 { font-size: 20px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-pi-empty p, .bbhg-pi-error p { font-size: 14px; color: var(--bbhg-gray-500); max-width: 500px; margin: 0 auto 24px; }
.bbhg-pi-empty-features { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.bbhg-pi-feature { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--bbhg-gray-600); font-weight: 500; }
.bbhg-pi-feature-icon { font-size: 18px; }
.bbhg-pi-retry-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
    background: linear-gradient(135deg, #059669, #0891b2); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s;
}
.bbhg-pi-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3); }
.bbhg-pi-retry-btn svg { width: 16px; height: 16px; stroke: white; }
.bbhg-pi-retry-btn span { color: white !important; }

@media (max-width: 768px) {
    .bbhg-pi-header { flex-direction: column; align-items: flex-start; }
    .bbhg-pi-input-wrap { flex-direction: column; align-items: stretch; gap: 10px; }
    .bbhg-pi-input-container { width: 100%; min-width: 0; }
    .bbhg-pi-genre-select { width: 100% !important; display: block !important; min-height: 50px !important; }
    .bbhg-pi-search-btn { width: 100%; justify-content: center; }
    .bbhg-pi-podcast-card { flex-direction: column; }
    .bbhg-pi-artwork { width: 60px; height: 60px; }
    .bbhg-pi-quick-topics { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .bbhg-pi-quick-topics::-webkit-scrollbar { display: none; }
    .bbhg-pi-topic-pill { flex-shrink: 0; }
}

/* ==================== REDDIT PULSE STYLES ==================== */
.bbhg-rp-container { padding: 0 4px; }

.bbhg-rp-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px; background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #3b82f6 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px; position: relative; overflow: hidden; color: white;
}
.bbhg-rp-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-rp-shimmer 10s ease-in-out infinite;
}
@keyframes bbhg-rp-shimmer {
    0%, 100% { transform: translate(-30%, -30%) rotate(0deg); }
    50% { transform: translate(10%, 10%) rotate(180deg); }
}
.bbhg-rp-header-glow {
    position: absolute; top: -100px; right: -100px; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.bbhg-rp-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-rp-icon {
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.2); border-radius: 14px; backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.bbhg-rp-icon svg { width: 28px; height: 28px; }
.bbhg-rp-title-section h2 { font-size: 20px; font-weight: 700; color: white !important; margin: 0; line-height: 1.2; }
.bbhg-rp-subtitle { font-size: 13px; color: rgba(255, 255, 255, 0.85) !important; margin: 4px 0 0 0; }
.bbhg-rp-status {
    display: flex; align-items: center; gap: 8px; padding: 8px 16px;
    background: rgba(255, 255, 255, 0.15); border-radius: 20px;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    font-size: 13px; color: white; white-space: nowrap; position: relative; z-index: 1;
}
.bbhg-rp-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; flex-shrink: 0; }
.bbhg-rp-status .bbhg-status-text { color: white !important; }

/* Search Section */
.bbhg-rp-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 20px;
}
.bbhg-rp-input-group { margin-bottom: 16px; }
.bbhg-rp-label { display: block; font-size: 14px; font-weight: 600; color: var(--bbhg-gray-700); margin-bottom: 10px; }
.bbhg-rp-input-wrap { position: relative; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bbhg-rp-input-container { position: relative; flex: 1; min-width: 200px; }
.bbhg-rp-input-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #374151; pointer-events: none; z-index: 2; display: flex; align-items: center;
}
.bbhg-rp-input-icon svg { width: 20px; height: 20px; }
.bbhg-rp-input {
    width: 100%; padding: 14px 16px 14px 48px !important; border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius); font-size: 15px; color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50); transition: all 0.2s ease; outline: none;
    box-sizing: border-box !important; min-height: 50px;
}
.bbhg-rp-input:focus { border-color: #8b5cf6; background: var(--bbhg-white); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1); }
.bbhg-rp-input::placeholder { color: #9ca3af; }
.bbhg-rp-select {
    padding: 14px 36px 14px 16px !important; border: 2px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius);
    font-size: 14px; color: var(--bbhg-gray-800); background: var(--bbhg-gray-50); outline: none; cursor: pointer;
    box-sizing: border-box !important; min-height: 50px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center; background-size: 12px;
}
.bbhg-rp-select:focus { border-color: #8b5cf6; }
.bbhg-rp-search-btn {
    display: flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-rp-search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4); }
.bbhg-rp-search-btn:active { transform: translateY(0); }
.bbhg-rp-search-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-rp-search-btn span { color: white !important; }

/* Quick Topics */
.bbhg-rp-quick-topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbhg-rp-quick-label { font-size: 13px; font-weight: 600; color: var(--bbhg-gray-500); }
.bbhg-rp-topic-pill {
    display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px;
    background: var(--bbhg-gray-50); border: 1px solid var(--bbhg-gray-200); border-radius: 20px;
    font-size: 13px; font-weight: 500; color: var(--bbhg-gray-700); cursor: pointer; transition: all 0.2s ease;
}
.bbhg-rp-topic-pill:hover { border-color: #8b5cf6; color: #8b5cf6; background: rgba(139, 92, 246, 0.05); transform: translateY(-1px); }

/* Loading */
.bbhg-rp-loading {
    text-align: center; padding: 60px 20px;
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-xl);
}
.bbhg-rp-loading-animation { max-width: 360px; margin: 0 auto; }
.bbhg-rp-loading-icon { margin-bottom: 20px; }
.bbhg-rp-loading-icon svg { width: 48px; height: 48px; animation: bbhg-spin 2s linear infinite; }
.bbhg-rp-loading-title { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-rp-loading-text { font-size: 14px; color: var(--bbhg-gray-500); margin: 0 0 20px 0; }
.bbhg-rp-loading-bar { height: 4px; background: var(--bbhg-gray-100); border-radius: 2px; overflow: hidden; }
.bbhg-rp-loading-progress {
    height: 100%; width: 30%; background: linear-gradient(90deg, #8b5cf6, #7c3aed);
    border-radius: 2px; animation: bbhg-progress-slide 1.5s ease-in-out infinite;
}

/* Results */
.bbhg-rp-results { margin-bottom: 20px; }
.bbhg-rp-results-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px 20px; background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl) var(--bbhg-radius-xl) 0 0; border-bottom: none;
}
.bbhg-rp-results-title { display: flex; align-items: center; gap: 12px; }
.bbhg-rp-results-icon { font-size: 24px; }
.bbhg-rp-results-title h3 { font-size: 16px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0; }
.bbhg-rp-results-meta { font-size: 13px; color: var(--bbhg-gray-500); margin: 2px 0 0 0; }
.bbhg-rp-results-actions { display: flex; gap: 8px; }
.bbhg-rp-copy-all-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.bbhg-rp-copy-all-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.bbhg-rp-copy-all-btn svg { width: 14px; height: 14px; stroke: white; }
.bbhg-rp-copy-all-btn span { color: white !important; }

/* Trending Bar */
.bbhg-rp-trending-bar, .bbhg-rp-subs-bar {
    display: block !important; padding: 12px 20px;
    background: var(--bbhg-gray-50); border: 1px solid var(--bbhg-gray-200); border-top: none;
}
.bbhg-rp-trending-label, .bbhg-rp-subs-label { display: block; font-size: 13px; font-weight: 700; color: var(--bbhg-gray-600); margin-bottom: 8px; }
.bbhg-rp-trending-items, .bbhg-rp-subs-items { display: flex; gap: 8px; overflow-x: auto; flex-wrap: wrap; }
.bbhg-rp-trending-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
    background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 14px;
    font-size: 12px; font-weight: 600; color: #8b5cf6; white-space: nowrap; cursor: pointer; transition: all 0.2s ease;
}
.bbhg-rp-trending-chip:hover { background: rgba(139, 92, 246, 0.2); }
.bbhg-rp-sub-chip {
    display: inline-flex; align-items: center; padding: 4px 12px;
    background: rgba(99, 102, 241, 0.1); border: 1px solid rgba(99, 102, 241, 0.2); border-radius: 14px;
    font-size: 12px; font-weight: 600; color: #6366f1; white-space: nowrap; cursor: pointer; transition: all 0.2s ease;
}
.bbhg-rp-sub-chip:hover { background: rgba(99, 102, 241, 0.2); }

/* Posts Grid */
.bbhg-rp-posts-grid {
    display: flex; flex-direction: column; gap: 0;
    border: 1px solid var(--bbhg-gray-200); border-top: none;
    border-radius: 0 0 var(--bbhg-radius-xl) var(--bbhg-radius-xl); overflow: hidden;
}

/* Post Card */
.bbhg-rp-post-card {
    display: flex; align-items: flex-start; gap: 16px; padding: 20px;
    background: var(--bbhg-white); border-bottom: 1px solid var(--bbhg-gray-100);
    transition: all 0.2s ease;
}
.bbhg-rp-post-card:last-child { border-bottom: none; }
.bbhg-rp-post-card:hover { background: rgba(139, 92, 246, 0.02); }

/* Score Column */
.bbhg-rp-post-score {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    min-width: 52px; padding: 8px 4px; background: var(--bbhg-gray-50); border-radius: 10px;
}
.bbhg-rp-post-score-arrow { font-size: 14px; color: #8b5cf6; line-height: 1; }
.bbhg-rp-post-score-num { font-size: 15px; font-weight: 800; color: var(--bbhg-gray-800); }
.bbhg-rp-post-score-label { font-size: 10px; color: var(--bbhg-gray-400); text-transform: uppercase; }

/* Post Content */
.bbhg-rp-post-content { flex: 1; min-width: 0; }
.bbhg-rp-post-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.bbhg-rp-post-sub {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px;
    background: rgba(139, 92, 246, 0.08); border-radius: 10px; font-size: 12px;
    font-weight: 700; color: #8b5cf6; text-decoration: none; cursor: pointer;
}
.bbhg-rp-post-sub:hover { background: rgba(139, 92, 246, 0.15); }
.bbhg-rp-post-time { font-size: 12px; color: var(--bbhg-gray-400); }
.bbhg-rp-post-flair {
    display: inline-flex; padding: 2px 8px; background: rgba(99, 102, 241, 0.1);
    border-radius: 8px; font-size: 11px; font-weight: 600; color: #6366f1;
}
.bbhg-rp-post-title {
    font-size: 15px; font-weight: 600; color: var(--bbhg-gray-800); margin: 0 0 8px 0;
    line-height: 1.4; cursor: pointer;
}
.bbhg-rp-post-title:hover { color: #8b5cf6; }
.bbhg-rp-post-title a { color: inherit; text-decoration: none; }
.bbhg-rp-post-title a:hover { color: #8b5cf6; }

/* Post Meta Row */
.bbhg-rp-post-meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
.bbhg-rp-post-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    background: var(--bbhg-gray-100); border-radius: 12px; font-size: 12px; color: #374151;
}
.bbhg-rp-post-badge.viral { background: rgba(139, 92, 246, 0.1); color: #8b5cf6; font-weight: 700; }
.bbhg-rp-post-badge.trending { background: rgba(245, 158, 11, 0.1); color: #f59e0b; font-weight: 600; }
.bbhg-rp-post-badge.rising { background: rgba(16, 185, 129, 0.1); color: #10b981; font-weight: 600; }
.bbhg-rp-post-badge.type-video { background: rgba(239, 68, 68, 0.1); color: #ef4444; }
.bbhg-rp-post-badge.type-image { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }

/* Virality Bar */
.bbhg-rp-virality-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bbhg-rp-virality-label { font-size: 11px; font-weight: 600; color: var(--bbhg-gray-500); white-space: nowrap; }
.bbhg-rp-virality-bar { flex: 1; height: 6px; background: var(--bbhg-gray-100); border-radius: 3px; overflow: hidden; max-width: 120px; }
.bbhg-rp-virality-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.bbhg-rp-virality-score { font-size: 12px; font-weight: 700; min-width: 28px; }

/* Hashtags */
.bbhg-rp-post-hashtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bbhg-rp-hashtag {
    display: inline-flex; padding: 3px 10px; background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.15); border-radius: 12px;
    font-size: 12px; font-weight: 500; color: #8b5cf6; cursor: pointer; transition: all 0.15s ease;
}
.bbhg-rp-hashtag:hover { background: rgba(139, 92, 246, 0.15); border-color: #8b5cf6; }

/* Content Angles */
.bbhg-rp-post-angles { display: flex; flex-direction: column; gap: 3px; }
.bbhg-rp-angle { font-size: 12px; color: var(--bbhg-gray-500); padding-left: 2px; }
.bbhg-rp-angle::before { content: '▸ '; color: #8b5cf6; font-weight: 700; }

/* Post Actions */
.bbhg-rp-post-actions { display: flex; gap: 6px; flex-shrink: 0; align-items: flex-start; margin-top: 4px; }
.bbhg-rp-card-btn {
    width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius);
    color: #374151; cursor: pointer; transition: all 0.2s ease;
}
.bbhg-rp-card-btn:hover { border-color: #8b5cf6; color: #8b5cf6; background: rgba(139, 92, 246, 0.05); }
.bbhg-rp-card-btn svg { width: 15px; height: 15px; }

/* Empty State */
.bbhg-rp-empty {
    text-align: center; padding: 60px 20px;
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-xl);
}
.bbhg-rp-empty-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-rp-empty h3 { font-size: 20px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-rp-empty p { font-size: 14px; color: var(--bbhg-gray-500); max-width: 400px; margin: 0 auto 24px auto; }
.bbhg-rp-empty-features { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.bbhg-rp-feature { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bbhg-gray-600); }
.bbhg-rp-feature-icon { font-size: 16px; }

/* Error State */
.bbhg-rp-error {
    text-align: center; padding: 40px 20px;
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-xl);
}
.bbhg-rp-error-icon { font-size: 36px; margin-bottom: 12px; }
.bbhg-rp-error-msg { font-size: 14px; color: var(--bbhg-gray-600); margin: 0 0 16px 0; }
.bbhg-rp-retry-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease;
}
.bbhg-rp-retry-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); }
.bbhg-rp-retry-btn svg { width: 16px; height: 16px; stroke: white; }
.bbhg-rp-retry-btn span { color: white !important; }

/* Mobile */
@media (max-width: 768px) {
    .bbhg-rp-header { flex-direction: column; align-items: flex-start; }
    .bbhg-rp-input-wrap { flex-direction: column; align-items: stretch; gap: 10px; }
    .bbhg-rp-input-container { width: 100%; min-width: 0; }
    .bbhg-rp-select { width: 100% !important; display: block !important; }
    .bbhg-rp-search-btn { width: 100%; justify-content: center; }
    .bbhg-rp-post-card { flex-direction: column; gap: 12px; }
    .bbhg-rp-post-score { flex-direction: row; gap: 8px; min-width: auto; width: auto; }
    .bbhg-rp-post-actions { flex-direction: row; }
    .bbhg-rp-results-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .bbhg-rp-quick-topics { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
    .bbhg-rp-quick-topics::-webkit-scrollbar { display: none; }
    .bbhg-rp-topic-pill { flex-shrink: 0; }
}

/* ==================== SPORTS PULSE STYLES ==================== */

.bbhg-sps-container {
    padding: 0;
    min-height: 500px;
}

/* Header Banner - Green Gradient */
.bbhg-sps-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 50%, #047857 100%);
    padding: 28px 28px;
    border-radius: var(--bbhg-radius-lg) var(--bbhg-radius-lg) 0 0;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.bbhg-sps-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 50%, transparent 100%);
    animation: bbhg-sps-shimmer 10s ease-in-out infinite;
}

@keyframes bbhg-sps-shimmer {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}

.bbhg-sps-header-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.bbhg-sps-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-sps-icon {
    width: 52px;
    height: 52px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.bbhg-sps-icon svg {
    width: 28px;
    height: 28px;
    stroke: white;
}

.bbhg-sps-title-section h2 {
    font-size: 22px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
}

.bbhg-sps-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    margin: 0;
}

.bbhg-sps-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
}

.bbhg-sps-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-sps-status .bbhg-status-text {
    color: white !important;
}

/* Search Section */
.bbhg-sps-search-section {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-top: none;
    padding: 24px;
    margin-bottom: 20px;
}

.bbhg-sps-input-group {
    margin-bottom: 16px;
}

.bbhg-sps-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    margin-bottom: 10px;
}

.bbhg-sps-input-wrap {
    position: relative;
    display: flex;
    gap: 12px;
    align-items: center;
}

.bbhg-sps-select-main {
    flex: 1;
    padding: 14px 16px;
    border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 15px;
    color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50);
    transition: all 0.2s ease;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10L6 8z' fill='%23374151'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.bbhg-sps-select-main:focus {
    border-color: #10b981;
    background-color: var(--bbhg-white);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
}

.bbhg-sps-search-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-sps-search-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4);
}

.bbhg-sps-search-btn:active {
    transform: translateY(0);
}

.bbhg-sps-search-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-sps-search-btn span {
    color: white !important;
}

/* Quick League Pills */
.bbhg-sps-quick-topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-sps-quick-label {
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.bbhg-sps-topic-pill {
    padding: 8px 14px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sps-topic-pill:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.1));
    border-color: #10b981;
    color: #059669;
}

/* Loading State */
.bbhg-sps-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-sps-loading-animation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.bbhg-sps-loading-icon {
    font-size: 48px;
    animation: bbhg-sps-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-sps-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.bbhg-sps-loading-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-sps-loading-text {
    font-size: 14px;
    color: var(--bbhg-gray-500);
    margin: 0;
}

.bbhg-sps-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 8px;
}

.bbhg-sps-loading-progress {
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 4px;
    animation: bbhg-sps-loading-slide 1.5s ease-in-out infinite;
}

@keyframes bbhg-sps-loading-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}

/* Results Section */
.bbhg-sps-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg) var(--bbhg-radius-lg) 0 0;
    flex-wrap: wrap;
    gap: 12px;
}

.bbhg-sps-results-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.bbhg-sps-results-icon {
    font-size: 28px;
}

.bbhg-sps-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 2px 0;
}

.bbhg-sps-results-meta {
    font-size: 13px;
    color: var(--bbhg-gray-500);
    margin: 0;
}

.bbhg-sps-results-actions {
    display: flex;
    gap: 8px;
}

.bbhg-sps-copy-all-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sps-copy-all-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.bbhg-sps-copy-all-btn svg {
    width: 14px;
    height: 14px;
    stroke: white;
}

.bbhg-sps-copy-all-btn span {
    color: white !important;
}

/* Hashtags Bar */
.bbhg-sps-hashtags-bar {
    padding: 14px 20px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-top: none;
}

.bbhg-sps-hashtags-bar-label {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
    margin-bottom: 10px;
}

.bbhg-sps-hashtags-items {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.bbhg-sps-hashtag-chip {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.bbhg-sps-hashtag-chip:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    transform: translateY(-1px);
}

/* Stats Overview */
.bbhg-sps-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 16px 20px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-top: none;
}

.bbhg-sps-stat-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
}

.bbhg-sps-stat-icon {
    font-size: 22px;
}

.bbhg-sps-stat-info {
    display: flex;
    flex-direction: column;
}

.bbhg-sps-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    line-height: 1.2;
}

.bbhg-sps-stat-label {
    font-size: 12px;
    color: var(--bbhg-gray-500);
    font-weight: 500;
}

/* Events Grid */
.bbhg-sps-events-grid {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-top: none;
    border-radius: 0 0 var(--bbhg-radius-lg) var(--bbhg-radius-lg);
}

/* Event Card */
.bbhg-sps-event-card {
    display: flex;
    align-items: stretch;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
}

.bbhg-sps-event-card:hover {
    border-color: #10b981;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.1);
    transform: translateY(-1px);
}

.bbhg-sps-event-status-bar {
    width: 5px;
    flex-shrink: 0;
}

.bbhg-sps-event-status-bar.live {
    background: linear-gradient(180deg, #ef4444, #dc2626);
    animation: bbhg-sps-live-pulse 2s ease-in-out infinite;
}

@keyframes bbhg-sps-live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.bbhg-sps-event-status-bar.final {
    background: linear-gradient(180deg, #10b981, #059669);
}

.bbhg-sps-event-status-bar.scheduled {
    background: linear-gradient(180deg, #3b82f6, #2563eb);
}

.bbhg-sps-event-status-bar.postponed {
    background: linear-gradient(180deg, #f59e0b, #d97706);
}

.bbhg-sps-event-content {
    flex: 1;
    padding: 16px 20px;
    min-width: 0;
}

.bbhg-sps-event-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-sps-event-league {
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bbhg-sps-event-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bbhg-sps-event-status-badge.live {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.bbhg-sps-event-status-badge.live::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
    animation: bbhg-sps-live-dot 1.5s ease-in-out infinite;
}

@keyframes bbhg-sps-live-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.bbhg-sps-event-status-badge.final {
    background: #f0fdf4;
    color: #059669;
    border: 1px solid #bbf7d0;
}

.bbhg-sps-event-status-badge.scheduled {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.bbhg-sps-event-status-badge.postponed {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

/* Matchup */
.bbhg-sps-matchup {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.bbhg-sps-team {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.bbhg-sps-team.away {
    flex-direction: row-reverse;
    text-align: right;
}

.bbhg-sps-team-logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: contain;
    background: var(--bbhg-gray-50);
    padding: 2px;
    flex-shrink: 0;
}

.bbhg-sps-team-info {
    min-width: 0;
}

.bbhg-sps-team-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bbhg-sps-team-record {
    font-size: 11px;
    color: var(--bbhg-gray-400);
    font-weight: 500;
}

.bbhg-sps-team-name.winner {
    color: #059669;
}

.bbhg-sps-score-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 10px;
    flex-shrink: 0;
}

.bbhg-sps-score {
    font-size: 22px;
    font-weight: 800;
    color: var(--bbhg-gray-800);
    line-height: 1;
    min-width: 24px;
    text-align: center;
}

.bbhg-sps-score.winner {
    color: #059669;
}

.bbhg-sps-score-divider {
    font-size: 18px;
    color: var(--bbhg-gray-300);
    font-weight: 300;
}

.bbhg-sps-vs {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-400);
    padding: 8px 14px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: 10px;
    text-align: center;
    flex-shrink: 0;
}

/* Event Meta */
.bbhg-sps-event-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--bbhg-gray-500);
}

.bbhg-sps-event-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Event Hashtags */
.bbhg-sps-event-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-sps-event-hashtag {
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #059669;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sps-event-hashtag:hover {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
    transform: translateY(-1px);
}

/* Empty State */
.bbhg-sps-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-sps-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
}

.bbhg-sps-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-sps-empty p {
    font-size: 14px;
    color: var(--bbhg-gray-500);
    max-width: 400px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-sps-empty-features {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bbhg-sps-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-600);
}

.bbhg-sps-feature-icon {
    font-size: 16px;
}

/* Error State */
.bbhg-sps-error {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-sps-error-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.bbhg-sps-error-msg {
    font-size: 14px;
    color: var(--bbhg-gray-600);
    margin: 0 0 16px 0;
}

.bbhg-sps-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 8px;
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-sps-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.bbhg-sps-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-sps-retry-btn span {
    color: white !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bbhg-sps-header {
        padding: 20px 16px;
        flex-direction: column;
        align-items: flex-start;
    }
    .bbhg-sps-input-wrap {
        flex-direction: column;
    }
    .bbhg-sps-search-btn {
        width: 100%;
        justify-content: center;
    }
    .bbhg-sps-select-main {
        width: 100%;
    }
    .bbhg-sps-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .bbhg-sps-matchup {
        gap: 10px;
    }
    .bbhg-sps-team-name {
        font-size: 13px;
    }
    .bbhg-sps-score {
        font-size: 18px;
    }
    .bbhg-sps-team-logo {
        width: 28px;
        height: 28px;
    }
    .bbhg-sps-results-header {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .bbhg-sps-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .bbhg-sps-event-content {
        padding: 12px 14px;
    }
    .bbhg-sps-team.away {
        flex-direction: row;
        text-align: left;
    }
    .bbhg-sps-matchup {
        flex-direction: column;
        gap: 8px;
    }
    .bbhg-sps-score-box {
        align-self: center;
    }
}

/* ==================== END SPORTS PULSE STYLES ==================== */

/* ================================
   MEME TRACKER PANEL STYLES
   Amber/Orange Gradient Theme
   ================================ */

.bbhg-mt-container { padding: 0 4px; }

.bbhg-mt-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px; background: linear-gradient(135deg, #f59e0b 0%, #f97316 50%, #ea580c 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px; position: relative; overflow: hidden; color: white;
}
.bbhg-mt-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-mt-shimmer 10s ease-in-out infinite;
}
@keyframes bbhg-mt-shimmer { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(5%,5%) rotate(2deg); } }

.bbhg-mt-header-glow {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); transform: translate(30%, -30%);
}
.bbhg-mt-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-mt-icon {
    width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.bbhg-mt-icon svg { width: 32px; height: 32px; stroke: white; }
.bbhg-mt-title-section h2 { font-size: 24px; font-weight: 700; color: white !important; margin: 0 0 4px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.bbhg-mt-subtitle { font-size: 14px; color: rgba(255,255,255,0.9) !important; margin: 0; }
.bbhg-mt-status {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: rgba(255,255,255,0.2); border-radius: 24px; font-size: 13px;
    color: white !important; font-weight: 500; position: relative; z-index: 1; backdrop-filter: blur(10px);
}
.bbhg-mt-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; animation: bbhg-pulse 2s ease-in-out infinite; }
.bbhg-mt-status .bbhg-status-text { color: white !important; }

.bbhg-mt-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 20px;
}
.bbhg-mt-input-group { margin-bottom: 0; }
.bbhg-mt-label { display: block; font-size: 14px; font-weight: 600; color: var(--bbhg-gray-700); margin-bottom: 10px; }
.bbhg-mt-input-wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bbhg-mt-select {
    flex: 1; min-width: 160px; padding: 14px 16px; border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius); font-size: 15px; color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50); transition: all 0.2s ease; outline: none;
}
.bbhg-mt-select:focus { border-color: #f59e0b; background: var(--bbhg-white); box-shadow: 0 0 0 4px rgba(245,158,11,0.1); }
.bbhg-mt-search-btn {
    display: flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); border: none;
    border-radius: var(--bbhg-radius); color: white !important; font-size: 15px;
    font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-mt-search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245,158,11,0.4); }
.bbhg-mt-search-btn:active { transform: translateY(0); }
.bbhg-mt-search-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-mt-search-btn span { color: white !important; }

/* Loading */
.bbhg-mt-loading { text-align: center; padding: 60px 20px; }
.bbhg-mt-loading-animation { position: relative; width: 100px; height: 100px; margin: 0 auto 24px; }
.bbhg-mt-loader {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 4px solid var(--bbhg-gray-200); border-top-color: #f59e0b;
    border-radius: 50%; animation: bbhg-mt-spin 1s linear infinite;
}
@keyframes bbhg-mt-spin { to { transform: rotate(360deg); } }
.bbhg-mt-loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 32px; animation: bbhg-mt-bounce 1s ease-in-out infinite; }
@keyframes bbhg-mt-bounce { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-60%); } }
.bbhg-mt-loading-title {
    font-size: 20px; font-weight: 600; margin: 0 0 8px 0;
    background: linear-gradient(135deg, #f59e0b, #f97316); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.bbhg-mt-loading-text { font-size: 14px; color: #1f2937; margin: 0 0 24px 0; }
.bbhg-mt-loading-bar { width: 200px; height: 4px; background: var(--bbhg-gray-200); border-radius: 2px; margin: 0 auto; overflow: hidden; }
.bbhg-mt-loading-progress {
    height: 100%; width: 0%; background: linear-gradient(90deg, #f59e0b, #f97316, #f59e0b);
    background-size: 200% 100%; border-radius: 2px; animation: bbhg-mt-progress 2s ease-in-out infinite;
}
@keyframes bbhg-mt-progress { 0% { width: 0%; background-position: 0% 0%; } 50% { width: 70%; background-position: 100% 0%; } 100% { width: 100%; background-position: 0% 0%; } }

/* Results */
.bbhg-mt-results { background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-xl); padding: 24px; }
.bbhg-mt-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; }
.bbhg-mt-results-title { display: flex; align-items: center; gap: 10px; }
.bbhg-mt-results-icon { font-size: 24px; }
.bbhg-mt-results-title h3 { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0; }
.bbhg-mt-results-count { font-size: 13px; color: #1f2937; background: var(--bbhg-gray-100); padding: 4px 10px; border-radius: 12px; }
.bbhg-mt-results-actions { display: flex; gap: 10px; }
.bbhg-mt-action-btn {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); border: none;
    border-radius: var(--bbhg-radius); font-size: 13px; font-weight: 500;
    color: white !important; cursor: pointer; transition: all 0.2s ease;
}
.bbhg-mt-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.bbhg-mt-action-btn svg { width: 16px; height: 16px; stroke: white; }
.bbhg-mt-action-btn span { color: white !important; }

/* Meme Cards Grid */
.bbhg-mt-memes-grid { display: flex; flex-direction: column; gap: 16px; }
.bbhg-mt-meme-card {
    display: flex; gap: 16px; padding: 20px; background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius); transition: all 0.2s ease;
}
.bbhg-mt-meme-card:hover { border-color: rgba(245,158,11,0.3); box-shadow: 0 4px 12px rgba(245,158,11,0.1); transform: translateY(-2px); }
.bbhg-mt-meme-thumb {
    flex-shrink: 0; width: 100px; height: 100px; border-radius: 12px; overflow: hidden;
    background: var(--bbhg-gray-200); display: flex; align-items: center; justify-content: center;
}
.bbhg-mt-meme-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bbhg-mt-meme-thumb-placeholder { font-size: 40px; }
.bbhg-mt-meme-content { flex: 1; min-width: 0; }
.bbhg-mt-meme-title { font-size: 15px; font-weight: 600; color: var(--bbhg-gray-800); margin: 0 0 6px 0; line-height: 1.4; }
.bbhg-mt-meme-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.bbhg-mt-meme-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    border-radius: 12px; font-size: 11px; font-weight: 600;
}
.bbhg-mt-meme-badge.exploding { background: rgba(239,68,68,0.1); color: #ef4444; }
.bbhg-mt-meme-badge.rising { background: rgba(245,158,11,0.1); color: #f59e0b; }
.bbhg-mt-meme-badge.peak { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.bbhg-mt-meme-badge.stable { background: var(--bbhg-gray-100); color: var(--bbhg-gray-600); }
.bbhg-mt-meme-stats { font-size: 12px; color: #1f2937; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbhg-mt-meme-hashtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bbhg-mt-hashtag {
    padding: 3px 10px; background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(249,115,22,0.08));
    border: 1px solid rgba(245,158,11,0.2); border-radius: 12px; font-size: 12px;
    color: #ea580c; cursor: pointer; transition: all 0.15s ease;
}
.bbhg-mt-hashtag:hover { background: linear-gradient(135deg, #f59e0b, #f97316); color: white; border-color: transparent; }
.bbhg-mt-meme-caption { font-size: 12px; color: #1f2937; font-style: italic; margin-top: 4px; }
.bbhg-mt-meme-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.bbhg-mt-card-btn {
    padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); border: none;
    border-radius: var(--bbhg-radius); font-size: 12px; font-weight: 600;
    color: white !important; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-mt-card-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.bbhg-mt-card-btn svg { width: 14px; height: 14px; stroke: white; }
.bbhg-mt-card-btn span { color: white !important; }
.bbhg-mt-card-btn.secondary { background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); color: var(--bbhg-gray-700) !important; }
.bbhg-mt-card-btn.secondary span { color: var(--bbhg-gray-700) !important; }
.bbhg-mt-card-btn.secondary svg { stroke: var(--bbhg-gray-600); }
.bbhg-mt-card-btn.secondary:hover { border-color: #f59e0b; color: #f59e0b !important; }
.bbhg-mt-card-btn.secondary:hover span { color: #f59e0b !important; }
.bbhg-mt-card-btn.secondary:hover svg { stroke: #f59e0b; }
.bbhg-mt-reddit-btn { color: #1f2937 !important; }
.bbhg-mt-reddit-btn:hover { color: #1f2937 !important; }

/* Empty & Error */
.bbhg-mt-empty, .bbhg-mt-error { text-align: center; padding: 60px 20px; }
.bbhg-mt-empty-icon, .bbhg-mt-error-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-mt-empty h3, .bbhg-mt-error h4 { font-size: 20px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-mt-empty p, .bbhg-mt-error p { font-size: 14px; color: #1f2937; margin: 0 0 24px 0; max-width: 500px; margin-left: auto; margin-right: auto; }
.bbhg-mt-empty-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bbhg-mt-feature { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bbhg-gray-50); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius); font-size: 13px; }
.bbhg-mt-feature-icon { font-size: 16px; }
.bbhg-mt-retry-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); border: none;
    border-radius: var(--bbhg-radius); color: white !important; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bbhg-mt-retry-btn svg { width: 16px; height: 16px; stroke: white; }
.bbhg-mt-retry-btn span { color: white !important; }

@media (max-width: 768px) {
    .bbhg-mt-header { flex-direction: column; align-items: flex-start; }
    .bbhg-mt-input-wrap { flex-direction: column; }
    .bbhg-mt-select { width: 100%; }
    .bbhg-mt-meme-card { flex-direction: column; }
    .bbhg-mt-meme-thumb { width: 100%; height: 200px; }
    .bbhg-mt-meme-actions { flex-direction: row; flex-wrap: wrap; }
    .bbhg-mt-memes-grid, .bbhg-mt-grid { grid-template-columns: 1fr; }
    .bbhg-mt-meme-status { font-size: 10px; padding: 4px 10px; bottom: 8px; left: 8px; max-width: 60%; white-space: nowrap; gap: 5px; }
    .bbhg-mt-meme-source { font-size: 10px; padding: 3px 8px; top: 8px; right: 8px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ==================== END MEME TRACKER STYLES ==================== */

/* ================================
   PETITION PULSE PANEL STYLES
   Rose/Red Gradient Theme
   ================================ */

.bbhg-pp-container { padding: 0 4px; }

.bbhg-pp-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px; background: linear-gradient(135deg, #e11d48 0%, #f43f5e 50%, #fb7185 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px; position: relative; overflow: hidden; color: white;
}
.bbhg-pp-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-pp-shimmer 10s ease-in-out infinite;
}
@keyframes bbhg-pp-shimmer { 0%, 100% { transform: translate(0,0) rotate(0deg); } 50% { transform: translate(5%,5%) rotate(2deg); } }

.bbhg-pp-header-glow {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); transform: translate(30%, -30%);
}
.bbhg-pp-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-pp-icon {
    width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.bbhg-pp-icon svg { width: 32px; height: 32px; stroke: white; }
.bbhg-pp-title-section h2 { font-size: 24px; font-weight: 700; color: white !important; margin: 0 0 4px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.bbhg-pp-subtitle { font-size: 14px; color: rgba(255,255,255,0.9) !important; margin: 0; }
.bbhg-pp-status {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: rgba(255,255,255,0.2); border-radius: 24px; font-size: 13px;
    color: white !important; font-weight: 500; position: relative; z-index: 1; backdrop-filter: blur(10px);
}
.bbhg-pp-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; animation: bbhg-pulse 2s ease-in-out infinite; }
.bbhg-pp-status .bbhg-status-text { color: white !important; }

.bbhg-pp-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 20px;
}
.bbhg-pp-input-group { margin-bottom: 0; }
.bbhg-pp-label { display: block; font-size: 14px; font-weight: 600; color: var(--bbhg-gray-700); margin-bottom: 10px; }
.bbhg-pp-input-wrap { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bbhg-pp-select {
    flex: 1; min-width: 200px; padding: 14px 16px; border: 2px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius); font-size: 15px; color: var(--bbhg-gray-800);
    background: var(--bbhg-gray-50); transition: all 0.2s ease; outline: none;
}
.bbhg-pp-select:focus { border-color: #e11d48; background: var(--bbhg-white); box-shadow: 0 0 0 4px rgba(225,29,72,0.1); }
.bbhg-pp-search-btn {
    display: flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%); border: none;
    border-radius: var(--bbhg-radius); color: white !important; font-size: 15px;
    font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-pp-search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225,29,72,0.4); }
.bbhg-pp-search-btn:active { transform: translateY(0); }
.bbhg-pp-search-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-pp-search-btn span { color: white !important; }

/* Loading */
.bbhg-pp-loading { text-align: center; padding: 60px 20px; }
.bbhg-pp-loading-animation { position: relative; width: 100px; height: 100px; margin: 0 auto 24px; }
.bbhg-pp-loader {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    border: 4px solid var(--bbhg-gray-200); border-top-color: #e11d48;
    border-radius: 50%; animation: bbhg-pp-spin 1s linear infinite;
}
@keyframes bbhg-pp-spin { to { transform: rotate(360deg); } }
.bbhg-pp-loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 32px; animation: bbhg-pp-bounce 1s ease-in-out infinite; }
@keyframes bbhg-pp-bounce { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-60%); } }
.bbhg-pp-loading-title {
    font-size: 20px; font-weight: 600; margin: 0 0 8px 0;
    background: linear-gradient(135deg, #e11d48, #f43f5e); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.bbhg-pp-loading-text { font-size: 14px; color: #1f2937; margin: 0 0 24px 0; }
.bbhg-pp-loading-bar { width: 200px; height: 4px; background: var(--bbhg-gray-200); border-radius: 2px; margin: 0 auto; overflow: hidden; }
.bbhg-pp-loading-progress {
    height: 100%; width: 0%; background: linear-gradient(90deg, #e11d48, #f43f5e, #e11d48);
    background-size: 200% 100%; border-radius: 2px; animation: bbhg-pp-progress 2s ease-in-out infinite;
}
@keyframes bbhg-pp-progress { 0% { width: 0%; background-position: 0% 0%; } 50% { width: 70%; background-position: 100% 0%; } 100% { width: 100%; background-position: 0% 0%; } }

/* Results */
.bbhg-pp-results { background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-xl); padding: 24px; }
.bbhg-pp-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 16px; }
.bbhg-pp-results-title { display: flex; align-items: center; gap: 10px; }
.bbhg-pp-results-icon { font-size: 24px; }
.bbhg-pp-results-title h3 { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0; }
.bbhg-pp-results-count { font-size: 13px; color: #1f2937; background: var(--bbhg-gray-100); padding: 4px 10px; border-radius: 12px; }
.bbhg-pp-results-actions { display: flex; gap: 10px; }
.bbhg-pp-action-btn {
    display: flex; align-items: center; gap: 6px; padding: 10px 16px;
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%); border: none;
    border-radius: var(--bbhg-radius); font-size: 13px; font-weight: 500;
    color: white !important; cursor: pointer; transition: all 0.2s ease;
}
.bbhg-pp-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(225,29,72,0.3); }
.bbhg-pp-action-btn svg { width: 16px; height: 16px; stroke: white; }
.bbhg-pp-action-btn span { color: white !important; }

/* Petition Cards Grid */
.bbhg-pp-petitions-grid { display: flex; flex-direction: column; gap: 16px; }
.bbhg-pp-petition-card {
    display: flex; gap: 16px; padding: 20px; background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius); transition: all 0.2s ease;
}
.bbhg-pp-petition-card:hover { border-color: rgba(225,29,72,0.3); box-shadow: 0 4px 12px rgba(225,29,72,0.1); transform: translateY(-2px); }
.bbhg-pp-petition-icon-wrap {
    flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.bbhg-pp-petition-icon-wrap.critical { background: rgba(239,68,68,0.1); }
.bbhg-pp-petition-icon-wrap.high { background: rgba(245,158,11,0.1); }
.bbhg-pp-petition-icon-wrap.medium { background: rgba(59,130,246,0.1); }
.bbhg-pp-petition-icon-wrap.normal { background: var(--bbhg-gray-100); }
.bbhg-pp-petition-content { flex: 1; min-width: 0; }
.bbhg-pp-petition-title { font-size: 15px; font-weight: 600; color: var(--bbhg-gray-800); margin: 0 0 6px 0; line-height: 1.4; }
.bbhg-pp-petition-title a { color: inherit; text-decoration: none; }
.bbhg-pp-petition-title a:hover { color: #e11d48; }
.bbhg-pp-petition-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.bbhg-pp-petition-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    border-radius: 12px; font-size: 11px; font-weight: 600;
}
.bbhg-pp-petition-badge.critical { background: rgba(239,68,68,0.1); color: #ef4444; }
.bbhg-pp-petition-badge.high { background: rgba(245,158,11,0.1); color: #f59e0b; }
.bbhg-pp-petition-badge.medium { background: rgba(59,130,246,0.1); color: #3b82f6; }
.bbhg-pp-petition-badge.normal { background: var(--bbhg-gray-100); color: var(--bbhg-gray-600); }
.bbhg-pp-petition-source { font-size: 12px; color: #1f2937; }
.bbhg-pp-petition-stats { font-size: 12px; color: #1f2937; }
.bbhg-pp-petition-hashtags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bbhg-pp-hashtag {
    padding: 3px 10px; background: linear-gradient(135deg, rgba(225,29,72,0.08), rgba(244,63,94,0.08));
    border: 1px solid rgba(225,29,72,0.2); border-radius: 12px; font-size: 12px;
    color: #e11d48; cursor: pointer; transition: all 0.15s ease;
}
.bbhg-pp-hashtag:hover { background: linear-gradient(135deg, #e11d48, #f43f5e); color: white; border-color: transparent; }
.bbhg-pp-petition-cta { font-size: 12px; color: #1f2937; font-style: italic; margin-top: 4px; }
.bbhg-pp-petition-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.bbhg-pp-card-btn {
    padding: 8px 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%); border: none;
    border-radius: var(--bbhg-radius); font-size: 12px; font-weight: 600;
    color: white !important; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-pp-card-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(225,29,72,0.3); }
.bbhg-pp-card-btn svg { width: 14px; height: 14px; stroke: white; }
.bbhg-pp-card-btn span { color: white !important; }
.bbhg-pp-card-btn.secondary { background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); color: var(--bbhg-gray-700) !important; }
.bbhg-pp-card-btn.secondary span { color: var(--bbhg-gray-700) !important; }
.bbhg-pp-card-btn.secondary svg { stroke: var(--bbhg-gray-600); }
.bbhg-pp-card-btn.secondary:hover { border-color: #e11d48; color: #e11d48 !important; }
.bbhg-pp-card-btn.secondary:hover span { color: #e11d48 !important; }
.bbhg-pp-card-btn.secondary:hover svg { stroke: #e11d48; }

/* Empty & Error */
.bbhg-pp-empty, .bbhg-pp-error { text-align: center; padding: 60px 20px; }
.bbhg-pp-empty-icon, .bbhg-pp-error-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-pp-empty h3, .bbhg-pp-error h4 { font-size: 20px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px 0; }
.bbhg-pp-empty p, .bbhg-pp-error p { font-size: 14px; color: #1f2937; margin: 0 0 24px 0; max-width: 500px; margin-left: auto; margin-right: auto; }
.bbhg-pp-empty-features { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.bbhg-pp-feature { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--bbhg-gray-50); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius); font-size: 13px; }
.bbhg-pp-feature-icon { font-size: 16px; }
.bbhg-pp-retry-btn {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px;
    background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%); border: none;
    border-radius: var(--bbhg-radius); color: white !important; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bbhg-pp-retry-btn svg { width: 16px; height: 16px; stroke: white; }
.bbhg-pp-retry-btn span { color: white !important; }

@media (max-width: 768px) {
    .bbhg-pp-header { flex-direction: column; align-items: flex-start; }
    .bbhg-pp-input-wrap { flex-direction: column; }
    .bbhg-pp-select { width: 100%; }
    .bbhg-pp-petition-card { flex-direction: column; }
    .bbhg-pp-petition-actions { flex-direction: row; }
}

/* ==================== END PETITION PULSE STYLES ==================== */

/* ==================== MEME TRACKER STYLES ==================== */
.bbhg-mt-container { padding: 0 4px; }

.bbhg-mt-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px;
    position: relative; overflow: hidden; color: white;
}
.bbhg-mt-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-qm-shimmer 10s ease-in-out infinite;
}
.bbhg-mt-header-glow {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}
.bbhg-mt-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-mt-icon {
    width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.bbhg-mt-icon svg { width: 32px; height: 32px; stroke: white; }
.bbhg-mt-title-section h2 { font-size: 24px; font-weight: 700; color: white !important; margin: 0 0 4px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.bbhg-mt-subtitle { font-size: 14px; color: rgba(255,255,255,0.9) !important; margin: 0; }
.bbhg-mt-status {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: rgba(255,255,255,0.2); border-radius: 24px; font-size: 13px;
    color: white !important; font-weight: 500; position: relative; z-index: 1; backdrop-filter: blur(10px);
}
.bbhg-mt-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; animation: bbhg-pulse 2s ease-in-out infinite; }
.bbhg-mt-status .bbhg-status-text { color: white !important; }

.bbhg-mt-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 24px;
}
.bbhg-mt-input-group { margin-bottom: 16px; }
.bbhg-mt-label { display: block; font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 10px; }
.bbhg-mt-input-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.bbhg-mt-select {
    flex: 1; min-width: 140px; padding: 12px 16px; border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius); font-size: 14px; color: #1f2937;
    background: var(--bbhg-white); cursor: pointer;
}
.bbhg-mt-search-btn {
    display: flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: none; border-radius: var(--bbhg-radius); color: white !important;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-mt-search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(245,158,11,0.4); }
.bbhg-mt-search-btn:active { transform: translateY(0); }
.bbhg-mt-search-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-mt-search-btn span { color: white !important; }

.bbhg-mt-quick-topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbhg-mt-quick-label { font-size: 13px; color: #1f2937; font-weight: 500; }
.bbhg-mt-topic-pill {
    padding: 8px 14px; background: var(--bbhg-gray-100); border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--bbhg-gray-700);
    cursor: pointer; transition: all 0.2s ease;
}
.bbhg-mt-topic-pill:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(217,119,6,0.1));
    border-color: #f59e0b; color: #d97706;
}

/* Meme Tracker Loading */
.bbhg-mt-loading { text-align: center; padding: 60px 20px; }
.bbhg-mt-loading-animation { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; }
.bbhg-mt-loader {
    width: 80px; height: 80px; border: 3px solid rgba(245,158,11,0.2);
    border-top-color: #f59e0b; border-radius: 50%; animation: bbhg-spin 1s linear infinite;
}
.bbhg-mt-loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; }
.bbhg-mt-loading-title { font-size: 18px; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
.bbhg-mt-loading-text { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.bbhg-mt-loading-bar { height: 4px; background: rgba(245,158,11,0.15); border-radius: 2px; overflow: hidden; max-width: 300px; margin: 0 auto; }
.bbhg-mt-loading-progress { height: 100%; background: linear-gradient(90deg, #f59e0b, #d97706); border-radius: 2px; animation: bbhg-progress 2s ease-in-out infinite; }

/* Meme Tracker Results */
.bbhg-mt-results-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--bbhg-gray-200);
}
.bbhg-mt-results-title { display: flex; align-items: center; gap: 10px; }
.bbhg-mt-results-title h3 { font-size: 18px; font-weight: 700; color: #1f2937; margin: 0; }
.bbhg-mt-results-icon { font-size: 22px; }
.bbhg-mt-results-count { font-size: 13px; color: #6b7280; background: var(--bbhg-gray-100); padding: 4px 10px; border-radius: 12px; }
.bbhg-mt-results-actions { display: flex; gap: 8px; }
.bbhg-mt-action-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    background: var(--bbhg-gray-100); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius); font-size: 13px; font-weight: 500;
    color: var(--bbhg-gray-700); cursor: pointer; transition: all 0.2s ease;
}
.bbhg-mt-action-btn:hover { background: var(--bbhg-gray-200); }
.bbhg-mt-action-btn svg { width: 14px; height: 14px; }

/* Meme Cards Grid */
.bbhg-mt-memes-grid, .bbhg-mt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.bbhg-mt-meme-card {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg); overflow: hidden; transition: all 0.2s ease;
}
.bbhg-mt-meme-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.bbhg-mt-meme-image-wrap { position: relative; width: 100%; overflow: hidden; background: var(--bbhg-gray-100); }
.bbhg-mt-meme-image-wrap img { display: block; width: 100%; height: auto; object-fit: contain; }
.bbhg-mt-meme-image { width: 100%; height: 200px; object-fit: cover; background: var(--bbhg-gray-100); }
.bbhg-mt-meme-body { padding: 16px; }
.bbhg-mt-meme-meta-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.bbhg-mt-meme-status-inline {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border-radius: 10px; font-size: 11px; font-weight: 600; text-transform: uppercase;
    white-space: nowrap; letter-spacing: 0.3px;
}
.bbhg-mt-meme-status-inline.exploding { background: rgba(239,68,68,0.12); color: #dc2626; }
.bbhg-mt-meme-status-inline.rising { background: rgba(139,92,246,0.12); color: #7c3aed; }
.bbhg-mt-meme-status-inline.peak { background: rgba(245,158,11,0.12); color: #d97706; }
.bbhg-mt-meme-status-inline.stable { background: rgba(107,114,128,0.12); color: #6b7280; }
.bbhg-mt-meme-source-inline {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border-radius: 10px; font-size: 11px; font-weight: 500;
    background: rgba(0,0,0,0.06); color: #4b5563; white-space: nowrap;
}
.bbhg-mt-template-badge-inline {
    display: inline-flex; align-items: center; padding: 3px 10px;
    border-radius: 10px; font-size: 11px; font-weight: 600;
    background: rgba(139,92,246,0.12); color: #7c3aed; white-space: nowrap;
}
.bbhg-mt-meme-title { font-size: 15px; font-weight: 600; color: #1f2937; margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bbhg-mt-meme-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bbhg-mt-meme-source { font-size: 12px; color: white; background: rgba(0,0,0,0.6); padding: 4px 10px; border-radius: 8px; position: absolute; top: 10px; right: 10px; z-index: 2; backdrop-filter: blur(8px); }
.bbhg-mt-meme-stats { font-size: 12px; color: #6b7280; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.bbhg-mt-meme-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
    border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase;
    position: absolute; bottom: 10px; left: 10px; z-index: 2; backdrop-filter: blur(8px);
    white-space: nowrap; line-height: 1;
}
.bbhg-mt-status-emoji { font-size: 13px; line-height: 1; flex-shrink: 0; display: inline-block; }
.bbhg-mt-status-label { display: inline-block; line-height: 1; }
.bbhg-mt-status-exploding { background: rgba(239,68,68,0.9); color: white; }
.bbhg-mt-status-rising { background: rgba(139,92,246,0.9); color: white; }
.bbhg-mt-status-peak { background: rgba(245,158,11,0.9); color: white; }
.bbhg-mt-status-stable { background: rgba(107,114,128,0.8); color: white; }
.bbhg-mt-virality-bar { height: 4px; background: var(--bbhg-gray-100); border-radius: 2px; margin: 10px 0; overflow: hidden; }
.bbhg-mt-virality-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.bbhg-mt-meme-hashtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.bbhg-mt-hashtag {
    font-size: 11px; color: #d97706; background: rgba(245,158,11,0.08);
    padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.bbhg-mt-hashtag:hover { background: rgba(245,158,11,0.2); }
.bbhg-mt-meme-actions { display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bbhg-gray-100); }
.bbhg-mt-card-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 8px; background: var(--bbhg-gray-50); border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--bbhg-gray-600);
    cursor: pointer; transition: all 0.15s;
}
.bbhg-mt-card-btn:hover { background: var(--bbhg-gray-100); color: #d97706; }
.bbhg-mt-card-btn svg { width: 14px; height: 14px; }

/* Meme Tracker Empty & Error */
.bbhg-mt-empty, .bbhg-mt-error { text-align: center; padding: 60px 20px; }
.bbhg-mt-empty-icon, .bbhg-mt-error-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-mt-empty h3, .bbhg-mt-error h4 { font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }
.bbhg-mt-empty p, .bbhg-mt-error p { font-size: 14px; color: #6b7280; max-width: 500px; margin: 0 auto 20px; }
.bbhg-mt-empty-features {
    display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
}
.bbhg-mt-feature {
    display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4b5563; font-weight: 500;
}
.bbhg-mt-feature-icon { font-size: 16px; }
.bbhg-mt-retry-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px;
    background: linear-gradient(135deg, #f59e0b, #d97706); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bbhg-mt-retry-btn svg { width: 16px; height: 16px; stroke: white; }

/* ==================== PETITION PULSE STYLES ==================== */
.bbhg-pp-container { padding: 0 4px; }

.bbhg-pp-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px; background: linear-gradient(135deg, #e11d48 0%, #be185d 50%, #9d174d 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px;
    position: relative; overflow: hidden; color: white;
}
.bbhg-pp-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-qm-shimmer 10s ease-in-out infinite;
}
.bbhg-pp-header-glow {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}
.bbhg-pp-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-pp-icon {
    width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.bbhg-pp-icon svg { width: 32px; height: 32px; stroke: white; }
.bbhg-pp-title-section h2 { font-size: 24px; font-weight: 700; color: white !important; margin: 0 0 4px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.bbhg-pp-subtitle { font-size: 14px; color: rgba(255,255,255,0.9) !important; margin: 0; }
.bbhg-pp-status {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: rgba(255,255,255,0.2); border-radius: 24px; font-size: 13px;
    color: white !important; font-weight: 500; position: relative; z-index: 1; backdrop-filter: blur(10px);
}
.bbhg-pp-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; animation: bbhg-pulse 2s ease-in-out infinite; }
.bbhg-pp-status .bbhg-status-text { color: white !important; }

.bbhg-pp-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 24px;
}
.bbhg-pp-input-group { margin-bottom: 16px; }
.bbhg-pp-label { display: block; font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 10px; }
.bbhg-pp-input-wrap { display: flex; gap: 10px; flex-wrap: wrap; }
.bbhg-pp-select {
    flex: 1; min-width: 160px; padding: 12px 16px; border: 1px solid var(--bbhg-gray-300);
    border-radius: var(--bbhg-radius); font-size: 14px; color: #1f2937;
    background: var(--bbhg-white); cursor: pointer;
}
.bbhg-pp-search-btn {
    display: flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: linear-gradient(135deg, #e11d48 0%, #be185d 100%);
    border: none; border-radius: var(--bbhg-radius); color: white !important;
    font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-pp-search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(225,29,72,0.4); }
.bbhg-pp-search-btn:active { transform: translateY(0); }
.bbhg-pp-search-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-pp-search-btn span { color: white !important; }

.bbhg-pp-quick-topics { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbhg-pp-quick-label { font-size: 13px; color: #1f2937; font-weight: 500; }
.bbhg-pp-topic-pill {
    padding: 8px 14px; background: var(--bbhg-gray-100); border: 1px solid var(--bbhg-gray-200);
    border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--bbhg-gray-700);
    cursor: pointer; transition: all 0.2s ease;
}
.bbhg-pp-topic-pill:hover {
    background: linear-gradient(135deg, rgba(225,29,72,0.1), rgba(190,24,93,0.1));
    border-color: #e11d48; color: #be185d;
}

/* Petition Pulse Loading */
.bbhg-pp-loading { text-align: center; padding: 60px 20px; }
.bbhg-pp-loading-animation { position: relative; width: 80px; height: 80px; margin: 0 auto 20px; }
.bbhg-pp-loader {
    width: 80px; height: 80px; border: 3px solid rgba(225,29,72,0.2);
    border-top-color: #e11d48; border-radius: 50%; animation: bbhg-spin 1s linear infinite;
}
.bbhg-pp-loading-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; }
.bbhg-pp-loading-title { font-size: 18px; font-weight: 600; color: #1f2937; margin-bottom: 8px; }
.bbhg-pp-loading-text { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.bbhg-pp-loading-bar { height: 4px; background: rgba(225,29,72,0.15); border-radius: 2px; overflow: hidden; max-width: 300px; margin: 0 auto; }
.bbhg-pp-loading-progress { height: 100%; background: linear-gradient(90deg, #e11d48, #be185d); border-radius: 2px; animation: bbhg-progress 2s ease-in-out infinite; }

/* Petition Pulse Results */
.bbhg-pp-results-header {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--bbhg-gray-200);
}
.bbhg-pp-results-title { display: flex; align-items: center; gap: 10px; }
.bbhg-pp-results-title h3 { font-size: 18px; font-weight: 700; color: #1f2937; margin: 0; }
.bbhg-pp-results-icon { font-size: 22px; }
.bbhg-pp-results-count { font-size: 13px; color: #6b7280; background: var(--bbhg-gray-100); padding: 4px 10px; border-radius: 12px; }
.bbhg-pp-results-actions { display: flex; gap: 8px; }
.bbhg-pp-action-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 14px;
    background: var(--bbhg-gray-100); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius); font-size: 13px; font-weight: 500;
    color: var(--bbhg-gray-700); cursor: pointer; transition: all 0.2s ease;
}
.bbhg-pp-action-btn:hover { background: var(--bbhg-gray-200); }
.bbhg-pp-action-btn svg { width: 14px; height: 14px; }

/* Petition Cards */
.bbhg-pp-petitions-grid, .bbhg-pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.bbhg-pp-card {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-lg); padding: 20px; transition: all 0.2s ease;
}
.bbhg-pp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.bbhg-pp-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bbhg-pp-card-title { font-size: 15px; font-weight: 600; color: #1f2937; line-height: 1.4; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bbhg-pp-card-urgency {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px;
    border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; white-space: nowrap;
}
.bbhg-pp-urgency-critical { background: rgba(239,68,68,0.1); color: #ef4444; }
.bbhg-pp-urgency-high { background: rgba(245,158,11,0.1); color: #d97706; }
.bbhg-pp-urgency-medium { background: rgba(59,130,246,0.1); color: #3b82f6; }
.bbhg-pp-urgency-low { background: rgba(107,114,128,0.1); color: #6b7280; }
.bbhg-pp-card-desc { font-size: 13px; color: #6b7280; line-height: 1.5; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bbhg-pp-card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bbhg-pp-card-category {
    font-size: 12px; padding: 3px 10px; border-radius: 8px;
    background: rgba(225,29,72,0.08); color: #be185d; font-weight: 500;
}
.bbhg-pp-card-source { font-size: 12px; color: #6b7280; background: var(--bbhg-gray-100); padding: 3px 8px; border-radius: 8px; }
.bbhg-pp-card-stats { font-size: 12px; color: #6b7280; }
.bbhg-pp-momentum-bar { height: 4px; background: var(--bbhg-gray-100); border-radius: 2px; margin: 10px 0; overflow: hidden; }
.bbhg-pp-momentum-fill { height: 100%; border-radius: 2px; transition: width 0.3s ease; }
.bbhg-pp-card-hashtags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.bbhg-pp-hashtag {
    font-size: 11px; color: #be185d; background: rgba(225,29,72,0.06);
    padding: 3px 8px; border-radius: 6px; cursor: pointer; transition: all 0.15s;
}
.bbhg-pp-hashtag:hover { background: rgba(225,29,72,0.15); }
.bbhg-pp-card-cta { font-size: 12px; color: #4b5563; font-style: italic; margin-top: 8px; padding: 8px 12px; background: var(--bbhg-gray-50); border-radius: 8px; }
.bbhg-pp-card-actions { display: flex; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--bbhg-gray-100); }
.bbhg-pp-card-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 4px;
    padding: 8px; background: var(--bbhg-gray-50); border: 1px solid var(--bbhg-gray-200);
    border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--bbhg-gray-600);
    cursor: pointer; transition: all 0.15s;
}
.bbhg-pp-card-btn:hover { background: var(--bbhg-gray-100); color: #be185d; }
.bbhg-pp-card-btn svg { width: 14px; height: 14px; }

/* Petition Pulse Empty & Error */
.bbhg-pp-empty, .bbhg-pp-error { text-align: center; padding: 60px 20px; }
.bbhg-pp-empty-icon, .bbhg-pp-error-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-pp-empty h3, .bbhg-pp-error h4 { font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }
.bbhg-pp-empty p, .bbhg-pp-error p { font-size: 14px; color: #6b7280; max-width: 500px; margin: 0 auto 20px; }
.bbhg-pp-empty-features {
    display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px;
}
.bbhg-pp-feature {
    display: flex; align-items: center; gap: 6px; font-size: 13px; color: #4b5563; font-weight: 500;
}
.bbhg-pp-feature-icon { font-size: 16px; }
.bbhg-pp-retry-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px;
    background: linear-gradient(135deg, #e11d48, #be185d); border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 14px; font-weight: 600; cursor: pointer;
}
.bbhg-pp-retry-btn svg { width: 16px; height: 16px; stroke: white; }

/* Mobile responsive */
@media (max-width: 640px) {
    .bbhg-mt-header, .bbhg-pp-header { flex-direction: column; align-items: flex-start; }
    .bbhg-mt-input-wrap, .bbhg-pp-input-wrap { flex-direction: column; }
    .bbhg-mt-search-btn, .bbhg-pp-search-btn { width: 100%; justify-content: center; }
    .bbhg-mt-memes-grid, .bbhg-mt-grid, .bbhg-pp-petitions-grid, .bbhg-pp-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   TWITCH PULSE STYLES
   ================================================================ */

.bbhg-twp-container {
    padding: 0 4px;
}

/* Header Banner - Twitch Purple with distinct diagonal stripe pattern */
.bbhg-twp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #5c16c5 0%, #772ce8 35%, #9146FF 70%, #bf94ff 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-twp-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(255,255,255,0.03) 20px,
        rgba(255,255,255,0.03) 40px
    );
    pointer-events: none;
}

.bbhg-twp-header::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
    animation: bbhg-twp-shimmer 12s ease-in-out infinite;
}

@keyframes bbhg-twp-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(3deg); }
}

.bbhg-twp-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(191, 148, 255, 0.25) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-twp-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-twp-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
}

.bbhg-twp-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-twp-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.bbhg-twp-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-twp-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
}

.bbhg-twp-status .bbhg-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-twp-status .bbhg-status-text {
    color: white !important;
}

/* Controls */
.bbhg-twp-controls {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.bbhg-twp-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.bbhg-twp-filter-group {
    flex: 0 1 auto;
    min-width: 0;
}

.bbhg-twp-lang-group {
    flex: 0 0 160px;
}

.bbhg-twp-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-twp-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: center;
}

.bbhg-twp-view-tab {
    padding: 10px 16px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.bbhg-twp-view-tab:hover {
    border-color: #9146FF;
    color: #9146FF;
}

.bbhg-twp-view-tab.active {
    background: linear-gradient(135deg, #772ce8 0%, #9146FF 100%);
    border-color: transparent;
    color: white !important;
}

.bbhg-twp-select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    color: var(--bbhg-gray-700);
    background: var(--bbhg-gray-50);
    cursor: pointer;
}

.bbhg-twp-select:focus {
    border-color: #9146FF;
    outline: none;
    box-shadow: 0 0 0 3px rgba(145, 70, 255, 0.1);
}

.bbhg-twp-scan-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #772ce8 0%, #9146FF 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-twp-scan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(145, 70, 255, 0.4);
}

.bbhg-twp-scan-btn:active {
    transform: translateY(0);
}

.bbhg-twp-scan-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-twp-scan-btn span {
    color: white !important;
}

/* Loading */
.bbhg-twp-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-twp-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-twp-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #9146FF;
    border-radius: 50%;
    animation: bbhg-twp-spin 1s linear infinite;
}

@keyframes bbhg-twp-spin {
    to { transform: rotate(360deg); }
}

.bbhg-twp-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-twp-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-twp-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.bbhg-twp-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #772ce8, #9146FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-twp-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
}

.bbhg-twp-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-twp-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #772ce8, #9146FF, #bf94ff);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: bbhg-twp-progress 2s ease-in-out infinite;
}

@keyframes bbhg-twp-progress {
    0% { width: 0%; background-position: 0% 0%; }
    50% { width: 70%; background-position: 100% 0%; }
    100% { width: 100%; background-position: 0% 0%; }
}

/* Stats Section */
.bbhg-twp-stats-section {
    margin-bottom: 20px;
}

.bbhg-twp-mood-card {
    background: linear-gradient(135deg, rgba(145,70,255,0.05) 0%, rgba(145,70,255,0.02) 100%);
    border: 1px solid rgba(145,70,255,0.15);
    border-radius: var(--bbhg-radius-xl, 12px);
    padding: 16px;
    margin-bottom: 12px;
}

.bbhg-twp-mood-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.bbhg-twp-mood-emoji {
    font-size: 28px;
}

.bbhg-twp-mood-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    margin: 0 0 2px 0;
}

.bbhg-twp-mood-label {
    font-size: 16px;
    font-weight: 700;
    color: #9146FF;
    text-transform: capitalize;
}

.bbhg-twp-mood-bar {
    position: relative;
    height: 6px;
    background: linear-gradient(90deg, #94a3b8, #9146FF, #ef4444);
    border-radius: 3px;
    overflow: visible;
    margin-bottom: 2px;
}

.bbhg-twp-mood-fill {
    position: absolute;
    top: -5px;
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid #9146FF;
    border-radius: 50%;
    transition: left 0.5s ease;
    box-shadow: 0 2px 8px rgba(145, 70, 255, 0.3);
}

.bbhg-twp-mood-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    color: #6b7280;
}

.bbhg-twp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.bbhg-twp-stat-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.bbhg-twp-stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.bbhg-twp-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Results Section */
.bbhg-twp-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
}

.bbhg-twp-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-twp-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-twp-results-icon {
    font-size: 24px;
}

.bbhg-twp-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-twp-results-actions {
    display: flex;
    gap: 10px;
}

.bbhg-twp-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #772ce8 0%, #9146FF 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-twp-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(145, 70, 255, 0.3);
}

.bbhg-twp-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-twp-action-btn span {
    color: white !important;
}

/* Stream/Category Cards Grid */
.bbhg-twp-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Stream Card */
.bbhg-twp-card {
    display: flex;
    gap: 16px;
    padding: 18px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
    position: relative;
}

.bbhg-twp-card:hover {
    border-color: rgba(145, 70, 255, 0.3);
    box-shadow: 0 4px 16px rgba(145, 70, 255, 0.1);
    transform: translateY(-2px);
}

.bbhg-twp-card-thumb {
    flex-shrink: 0;
    width: 160px;
    height: 90px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #1a1a2e;
}

.bbhg-twp-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-twp-live-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    background: #ef4444;
    color: white !important;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-twp-viewer-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    padding: 2px 8px;
    background: rgba(0, 0, 0, 0.75);
    color: white !important;
    font-size: 11px;
    font-weight: 600;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-twp-viewer-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
}

.bbhg-twp-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-twp-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bbhg-twp-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-twp-card-streamer {
    font-size: 13px;
    font-weight: 600;
    color: #9146FF;
}

.bbhg-twp-card-game {
    font-size: 12px;
    color: #6b7280;
    padding: 2px 10px;
    background: rgba(145, 70, 255, 0.08);
    border-radius: 12px;
    font-weight: 500;
}

.bbhg-twp-card-lang {
    font-size: 11px;
    color: #6b7280;
    padding: 2px 8px;
    background: var(--bbhg-gray-100);
    border-radius: 10px;
}

/* Hashtags Row */
.bbhg-twp-card-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.bbhg-twp-hashtag {
    font-size: 11px;
    padding: 3px 9px;
    background: rgba(145, 70, 255, 0.08);
    color: #7c3aed;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
    border: 1px solid rgba(145, 70, 255, 0.12);
}

.bbhg-twp-hashtag:hover {
    background: rgba(145, 70, 255, 0.15);
    color: #6d28d9;
}

.bbhg-twp-hashtag.copied {
    background: #10b981;
    color: white !important;
    border-color: #10b981;
}

/* Card Actions */
.bbhg-twp-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: flex-start;
}

.bbhg-twp-card-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-twp-card-btn:hover {
    border-color: #9146FF;
    color: #9146FF;
    background: rgba(145, 70, 255, 0.05);
}

.bbhg-twp-card-btn svg {
    width: 15px;
    height: 15px;
}

.bbhg-twp-deepdive-btn {
    padding: 0 14px;
    width: auto;
    background: linear-gradient(135deg, #772ce8 0%, #9146FF 100%);
    border-color: transparent;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    height: 34px;
}

.bbhg-twp-deepdive-btn:hover {
    border-color: transparent;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(145, 70, 255, 0.3);
}

.bbhg-twp-deepdive-btn svg {
    stroke: white;
}

.bbhg-twp-deepdive-btn span {
    color: white !important;
}

/* Category Card Variant */
.bbhg-twp-cat-card {
    display: flex;
    gap: 16px;
    padding: 18px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-twp-cat-card:hover {
    border-color: rgba(145, 70, 255, 0.3);
    box-shadow: 0 4px 16px rgba(145, 70, 255, 0.1);
    transform: translateY(-2px);
}

.bbhg-twp-cat-art {
    flex-shrink: 0;
    width: 80px;
    height: 107px;
    border-radius: 10px;
    overflow: hidden;
    background: #1a1a2e;
}

.bbhg-twp-cat-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-twp-cat-rank {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #772ce8, #9146FF);
    color: white !important;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid white;
}

.bbhg-twp-cat-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-twp-cat-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-twp-cat-stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #6b7280;
}

.bbhg-twp-cat-stat {
    display: flex;
    align-items: center;
    gap: 4px;
}

.bbhg-twp-cat-stat strong {
    color: var(--bbhg-gray-800);
}

/* Deep Dive Modal */
.bbhg-twp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(4px);
}

.bbhg-twp-modal {
    background: var(--bbhg-white);
    border-radius: var(--bbhg-radius-xl);
    width: 100%;
    max-width: 640px;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
}

.bbhg-twp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--bbhg-gray-200);
    background: linear-gradient(135deg, #772ce8, #9146FF);
    color: white;
}

.bbhg-twp-modal-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: white !important;
    margin: 0;
}

.bbhg-twp-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    font-size: 20px;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-twp-modal-close:hover {
    background: rgba(255,255,255,0.3);
}

.bbhg-twp-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.bbhg-twp-modal-loading {
    text-align: center;
    padding: 40px 20px;
}

.bbhg-twp-modal-loading p {
    color: #6b7280;
    margin-top: 12px;
}

/* Deep Dive Content */
.bbhg-twp-dd-section {
    margin-bottom: 20px;
}

.bbhg-twp-dd-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bbhg-twp-dd-text {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.6;
}

.bbhg-twp-dd-angles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bbhg-twp-dd-angle {
    padding: 14px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    border-left: 3px solid #9146FF;
}

.bbhg-twp-dd-angle-type {
    font-size: 11px;
    font-weight: 700;
    color: #9146FF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.bbhg-twp-dd-angle-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin-bottom: 4px;
}

.bbhg-twp-dd-angle-hook {
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

.bbhg-twp-dd-angle-meta {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.bbhg-twp-dd-angle-badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.bbhg-twp-dd-angle-badge.platform {
    background: rgba(145, 70, 255, 0.1);
    color: #7c3aed;
}

.bbhg-twp-dd-angle-badge.difficulty {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.bbhg-twp-dd-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bbhg-twp-dd-platforms {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bbhg-twp-dd-platform {
    padding: 10px 14px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
}

.bbhg-twp-dd-platform-name {
    font-size: 13px;
    font-weight: 700;
    color: #9146FF;
    text-transform: capitalize;
    margin-bottom: 3px;
}

.bbhg-twp-dd-platform-angle {
    font-size: 13px;
    color: #4b5563;
}

/* Empty State */
.bbhg-twp-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-twp-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-twp-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-twp-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-twp-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-twp-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-twp-feature-icon {
    font-size: 18px;
}

/* Error State */
.bbhg-twp-error {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-twp-error-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.bbhg-twp-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-twp-error p {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 20px 0;
}

.bbhg-twp-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #772ce8 0%, #9146FF 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-twp-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(145, 70, 255, 0.4);
}

.bbhg-twp-retry-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-twp-retry-btn span {
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-twp-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }
    
    .bbhg-twp-filter-row {
        flex-direction: column;
        gap: 12px;
        flex-wrap: wrap;
    }
    
    .bbhg-twp-tabs {
        flex-wrap: nowrap;
        justify-content: center;
        width: 100%;
    }
    
    .bbhg-twp-lang-group {
        flex: 1;
    }
    
    .bbhg-twp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bbhg-twp-card {
        flex-direction: column;
    }
    
    .bbhg-twp-card-thumb {
        width: 100%;
        height: 180px;
    }
    
    .bbhg-twp-card-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .bbhg-twp-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .bbhg-twp-cat-card {
        flex-direction: column;
    }
    
    .bbhg-twp-cat-art {
        width: 100%;
        height: 150px;
    }
}

/* =====================================================
   INSTAGRAM PULSE — Question Miner themed
   ===================================================== */

.bbhg-igp-container { max-width: 100%; }

/* Header — Instagram gradient */
.bbhg-igp-header {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
    border-radius: var(--bbhg-radius-xl); margin-bottom: 24px;
    position: relative; overflow: hidden; color: white;
}
.bbhg-igp-header::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
    animation: bbhg-qm-shimmer 10s ease-in-out infinite;
}
.bbhg-igp-header-glow {
    position: absolute; top: 0; right: 0; width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
    transform: translate(30%, -30%);
}
.bbhg-igp-title-section { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.bbhg-igp-icon {
    width: 56px; height: 56px; background: rgba(255,255,255,0.2); border-radius: 16px;
    display: flex; align-items: center; justify-content: center; backdrop-filter: blur(10px);
}
.bbhg-igp-icon svg { width: 32px; height: 32px; stroke: white; }
.bbhg-igp-title-section h2 { font-size: 24px; font-weight: 700; color: white !important; margin: 0 0 4px 0; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.bbhg-igp-subtitle { font-size: 14px; color: rgba(255,255,255,0.9) !important; margin: 0; }
.bbhg-igp-status {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    background: rgba(255,255,255,0.2); border-radius: 24px;
    font-size: 13px; color: white !important; font-weight: 500;
    position: relative; z-index: 1; backdrop-filter: blur(10px);
}
.bbhg-igp-status .bbhg-status-dot { width: 8px; height: 8px; border-radius: 50%; animation: bbhg-pulse 2s ease-in-out infinite; }
.bbhg-igp-status .bbhg-status-text { color: white !important; }

/* Search Section */
.bbhg-igp-search-section {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 20px;
}
.bbhg-igp-input-group { margin-bottom: 16px; }
.bbhg-igp-label { display: block; font-size: 14px; font-weight: 600; color: var(--bbhg-gray-700); margin-bottom: 10px; }
.bbhg-igp-input-wrap { position: relative; display: flex; gap: 12px; align-items: center; }
.bbhg-igp-input-container { position: relative; flex: 1; }
.bbhg-igp-input-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #374151; pointer-events: none; z-index: 2; display: flex; align-items: center; justify-content: center;
}
.bbhg-igp-input-icon svg { width: 20px; height: 20px; }
.bbhg-igp-input {
    width: 100%; padding: 14px 16px 14px 48px;
    border: 2px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius);
    font-size: 15px; color: var(--bbhg-gray-800); background: var(--bbhg-gray-50);
    transition: all 0.2s ease; outline: none;
}
.bbhg-igp-input:focus { border-color: #833ab4; background: var(--bbhg-white); box-shadow: 0 0 0 4px rgba(131,58,180,0.1); }
.bbhg-igp-input::placeholder { color: #374151; }

/* Button — Instagram gradient, white text+icons */
.bbhg-igp-search-btn {
    display: flex; align-items: center; gap: 8px; padding: 14px 24px;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 100%);
    border: none; border-radius: var(--bbhg-radius);
    color: white !important; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: all 0.2s ease; white-space: nowrap;
}
.bbhg-igp-search-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(131,58,180,0.4); }
.bbhg-igp-search-btn:active { transform: translateY(0); }
.bbhg-igp-search-btn svg { width: 18px; height: 18px; stroke: white; }
.bbhg-igp-search-btn span { color: white !important; }

/* Quick Picks */
.bbhg-igp-quick-picks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bbhg-igp-quick-label { font-size: 13px; color: var(--bbhg-gray-500); font-weight: 500; }
.bbhg-igp-pick-pill {
    padding: 6px 14px; border-radius: 20px;
    background: var(--bbhg-gray-100); border: 1px solid var(--bbhg-gray-200);
    font-size: 13px; color: var(--bbhg-gray-700); cursor: pointer;
    transition: all 0.2s ease;
}
.bbhg-igp-pick-pill:hover { background: linear-gradient(135deg, #833ab4, #fd1d1d); color: white !important; border-color: transparent; }

/* Loading */
.bbhg-igp-loading { text-align: center; padding: 60px 20px; }
.bbhg-igp-loading-animation { position: relative; width: 80px; height: 80px; margin: 0 auto 24px; }
.bbhg-igp-loader {
    width: 80px; height: 80px; border: 3px solid var(--bbhg-gray-200);
    border-top-color: #833ab4; border-right-color: #fd1d1d;
    border-radius: 50%; animation: bbhg-spin 1s linear infinite;
}
@keyframes bbhg-spin { to { transform: rotate(360deg); } }
.bbhg-igp-loading-icon {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px;
}
.bbhg-igp-loading-title { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px; }
.bbhg-igp-loading-text { font-size: 14px; color: var(--bbhg-gray-500); margin: 0 0 20px; }
.bbhg-igp-loading-bar { width: 300px; max-width: 100%; height: 4px; background: var(--bbhg-gray-200); border-radius: 4px; margin: 0 auto; overflow: hidden; }
.bbhg-igp-loading-progress {
    height: 100%; width: 0; border-radius: 4px;
    background: linear-gradient(90deg, #833ab4, #fd1d1d, #fcb045);
    animation: bbhg-igp-progress 4s ease-in-out forwards;
}
@keyframes bbhg-igp-progress { 0% { width: 0; } 40% { width: 60%; } 80% { width: 85%; } 100% { width: 95%; } }

/* Error */
.bbhg-igp-error { text-align: center; padding: 48px 20px; background: var(--bbhg-white); border-radius: var(--bbhg-radius-xl); border: 1px solid var(--bbhg-gray-200); }
.bbhg-igp-error-icon { font-size: 48px; margin-bottom: 16px; }
.bbhg-igp-error h3 { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 8px; }
.bbhg-igp-error p { font-size: 14px; color: var(--bbhg-gray-500); margin: 0 0 20px; max-width: 500px; margin-left: auto; margin-right: auto; }

/* Profile Card */
.bbhg-igp-profile-card {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 20px;
}
.bbhg-igp-avatar { width: 80px; height: 80px; border-radius: 50%; border: 3px solid #833ab4; object-fit: cover; flex-shrink: 0; }
.bbhg-igp-profile-info { flex: 1; }
.bbhg-igp-profile-name { font-size: 20px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 2px; display: flex; align-items: center; gap: 8px; }
.bbhg-igp-verified { color: #3b82f6; display: inline-flex; }
.bbhg-igp-verified svg { width: 18px; height: 18px; fill: #3b82f6; }
.bbhg-igp-profile-username { font-size: 14px; color: var(--bbhg-gray-500); margin: 0 0 8px; }
.bbhg-igp-profile-bio { font-size: 13px; color: var(--bbhg-gray-600); margin: 0; line-height: 1.5; max-width: 600px; }
.bbhg-igp-profile-meta { display: flex; gap: 20px; margin-top: 12px; }
.bbhg-igp-meta-item { text-align: center; }
.bbhg-igp-meta-val { font-size: 18px; font-weight: 700; color: var(--bbhg-gray-800); display: block; }
.bbhg-igp-meta-label { font-size: 11px; color: var(--bbhg-gray-500); text-transform: uppercase; letter-spacing: 0.5px; }
.bbhg-igp-tier-badge {
    display: inline-block; padding: 4px 12px; border-radius: 20px;
    background: linear-gradient(135deg, #833ab4, #fd1d1d);
    color: white !important; font-size: 11px; font-weight: 600; margin-top: 8px;
}

/* Stats Grid */
.bbhg-igp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.bbhg-igp-stat-card {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 20px; text-align: center;
}
.bbhg-igp-stat-icon { font-size: 28px; margin-bottom: 8px; }
.bbhg-igp-stat-value { font-size: 24px; font-weight: 700; color: var(--bbhg-gray-800); }
.bbhg-igp-stat-label { font-size: 12px; color: var(--bbhg-gray-500); margin-top: 4px; }
.bbhg-igp-stat-quality { font-size: 11px; font-weight: 600; padding: 2px 10px; border-radius: 12px; display: inline-block; margin-top: 6px; }
.bbhg-igp-quality-exceptional { background: #dcfce7; color: #16a34a; }
.bbhg-igp-quality-excellent   { background: #dbeafe; color: #2563eb; }
.bbhg-igp-quality-good        { background: #e0f2fe; color: #0284c7; }
.bbhg-igp-quality-average     { background: #fef3c7; color: #d97706; }
.bbhg-igp-quality-low         { background: #fee2e2; color: #dc2626; }

/* Section headers */
.bbhg-igp-section-header {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding-bottom: 12px;
    border-bottom: 1px solid var(--bbhg-gray-200);
}
.bbhg-igp-section-header h3 { font-size: 16px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0; flex: 1; }
.bbhg-igp-action-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px;
    background: linear-gradient(135deg, #833ab4, #fd1d1d);
    border: none; border-radius: var(--bbhg-radius); cursor: pointer;
    font-size: 13px; font-weight: 500; color: white !important; transition: all 0.2s;
}
.bbhg-igp-action-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(131,58,180,0.3); }
.bbhg-igp-action-btn svg { width: 14px; height: 14px; stroke: white; }
.bbhg-igp-action-btn span { color: white !important; }

/* Posts Grid */
.bbhg-igp-posts-section { background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-xl); padding: 20px; margin-bottom: 20px; }
.bbhg-igp-posts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bbhg-igp-post-card {
    position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 1;
    background: var(--bbhg-gray-100); cursor: pointer; transition: transform 0.2s;
}
.bbhg-igp-post-card:hover { transform: scale(1.03); }
.bbhg-igp-post-card img { width: 100%; height: 100%; object-fit: cover; }
.bbhg-igp-post-overlay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.8)); padding: 8px 10px;
    display: flex; gap: 12px; align-items: center; color: white; font-size: 12px; font-weight: 500;
}
.bbhg-igp-post-overlay span { display: flex; align-items: center; gap: 4px; color: white !important; }

/* Hashtags */
.bbhg-igp-hashtags-section { background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200); border-radius: var(--bbhg-radius-xl); padding: 20px; margin-bottom: 20px; }
.bbhg-igp-tags-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.bbhg-igp-tag {
    padding: 6px 14px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(131,58,180,0.1), rgba(253,29,29,0.1));
    border: 1px solid rgba(131,58,180,0.2);
    font-size: 13px; color: #833ab4; font-weight: 500; cursor: pointer; transition: all 0.2s;
}
.bbhg-igp-tag:hover { background: linear-gradient(135deg, #833ab4, #fd1d1d); color: white !important; border-color: transparent; }

/* Deep Dive */
.bbhg-igp-deepdive-section { margin-bottom: 20px; }
.bbhg-igp-deepdive-btn {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px;
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 100%);
    border: none; border-radius: var(--bbhg-radius-xl);
    color: white !important; font-size: 16px; font-weight: 600;
    cursor: pointer; transition: all 0.2s;
}
.bbhg-igp-deepdive-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(131,58,180,0.4); }
.bbhg-igp-deepdive-btn svg { width: 20px; height: 20px; stroke: white; }
.bbhg-igp-deepdive-btn span { color: white !important; }
.bbhg-igp-deepdive-results {
    background: var(--bbhg-white); border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl); padding: 24px; margin-top: 16px;
}
.bbhg-igp-dd-summary { font-size: 14px; color: var(--bbhg-gray-700); line-height: 1.6; margin-bottom: 20px; padding: 16px; background: var(--bbhg-gray-50); border-radius: var(--bbhg-radius); }
.bbhg-igp-dd-section { margin-bottom: 20px; }
.bbhg-igp-dd-section h4 { font-size: 15px; font-weight: 700; color: var(--bbhg-gray-800); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.bbhg-igp-dd-list { list-style: none; padding: 0; margin: 0; }
.bbhg-igp-dd-list li { padding: 10px 14px; background: var(--bbhg-gray-50); border-radius: var(--bbhg-radius); margin-bottom: 8px; font-size: 13px; color: var(--bbhg-gray-700); line-height: 1.5; }
.bbhg-igp-dd-ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bbhg-igp-dd-idea {
    padding: 16px; background: var(--bbhg-gray-50); border-radius: var(--bbhg-radius);
    border-left: 3px solid #833ab4;
}
.bbhg-igp-dd-idea-type { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #833ab4; margin-bottom: 6px; }
.bbhg-igp-dd-idea-title { font-size: 14px; font-weight: 600; color: var(--bbhg-gray-800); margin-bottom: 4px; }
.bbhg-igp-dd-idea-hook { font-size: 12px; color: var(--bbhg-gray-600); }

/* Mobile */
@media (max-width: 768px) {
    .bbhg-igp-header { flex-direction: column; text-align: center; }
    .bbhg-igp-title-section { flex-direction: column; }
    .bbhg-igp-input-wrap { flex-direction: column; }
    .bbhg-igp-search-btn { width: 100%; justify-content: center; }
    .bbhg-igp-profile-card { flex-direction: column; text-align: center; }
    .bbhg-igp-profile-meta { justify-content: center; }
    .bbhg-igp-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .bbhg-igp-posts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   BLUESKY PULSE - Sky Blue Theme
   ============================================================ */
.bbhg-bsky-container {
    padding: 0 4px;
}

/* Header Banner - Sky Blue Gradient with diagonal stripe pattern */
.bbhg-bsky-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #0062bd 0%, #0085ff 35%, #208bfe 70%, #58a6ff 100%);
    border-radius: var(--bbhg-radius-xl);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
    color: white;
}

.bbhg-bsky-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 20px,
        rgba(255,255,255,0.03) 20px,
        rgba(255,255,255,0.03) 40px
    );
    pointer-events: none;
}

.bbhg-bsky-header::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%);
    animation: bbhg-bsky-shimmer 12s ease-in-out infinite;
}

@keyframes bbhg-bsky-shimmer {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5%, 5%) rotate(3deg); }
}

.bbhg-bsky-header-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(88, 166, 255, 0.25) 0%, transparent 70%);
    transform: translate(30%, -30%);
}

.bbhg-bsky-title-section {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.bbhg-bsky-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
}

.bbhg-bsky-icon svg {
    width: 32px;
    height: 32px;
    stroke: white;
}

.bbhg-bsky-title-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: white !important;
    margin: 0 0 4px 0;
    text-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

.bbhg-bsky-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0;
}

.bbhg-bsky-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 24px;
    font-size: 13px;
    color: white !important;
    font-weight: 500;
    position: relative;
    z-index: 1;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.15);
}

.bbhg-bsky-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: bbhg-pulse 2s ease-in-out infinite;
}

.bbhg-bsky-status-text {
    color: white !important;
}

/* Controls */
.bbhg-bsky-controls {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 20px 24px;
    margin-bottom: 20px;
}

.bbhg-bsky-filter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.bbhg-bsky-filter-group {
    flex: 0 1 auto;
    min-width: 0;
}

.bbhg-bsky-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bbhg-bsky-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bbhg-bsky-view-tab {
    padding: 7px 10px;
    background: var(--bbhg-gray-100);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    font-size: 11px;
    font-weight: 600;
    color: var(--bbhg-gray-700);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-bsky-view-tab:hover {
    border-color: #0085ff;
    color: #0085ff;
}

.bbhg-bsky-view-tab.active {
    background: linear-gradient(135deg, #0062bd 0%, #0085ff 100%);
    border-color: transparent;
    color: white !important;
}

/* Scan Button - White text and icons */
.bbhg-bsky-scan-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #0062bd 0%, #0085ff 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.bbhg-bsky-scan-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 133, 255, 0.4);
}

.bbhg-bsky-scan-btn:active {
    transform: translateY(0);
}

.bbhg-bsky-scan-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-bsky-scan-btn span {
    color: white !important;
}

/* Loading */
.bbhg-bsky-loading {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-bsky-loading-animation {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 24px;
}

.bbhg-bsky-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid var(--bbhg-gray-200);
    border-top-color: #0085ff;
    border-radius: 50%;
    animation: bbhg-bsky-spin 1s linear infinite;
}

@keyframes bbhg-bsky-spin {
    to { transform: rotate(360deg); }
}

.bbhg-bsky-loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    animation: bbhg-bsky-bounce 1s ease-in-out infinite;
}

@keyframes bbhg-bsky-bounce {
    0%, 100% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
}

.bbhg-bsky-loading-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
    background: linear-gradient(135deg, #0062bd, #0085ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bbhg-bsky-loading-text {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 24px 0;
}

.bbhg-bsky-loading-bar {
    width: 200px;
    height: 4px;
    background: var(--bbhg-gray-200);
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}

.bbhg-bsky-loading-progress {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0062bd, #0085ff, #58a6ff);
    background-size: 200% 100%;
    border-radius: 2px;
    animation: bbhg-bsky-progress 2s ease-in-out infinite;
}

@keyframes bbhg-bsky-progress {
    0% { width: 0%; background-position: 0% 0%; }
    50% { width: 70%; background-position: 100% 0%; }
    100% { width: 100%; background-position: 0% 0%; }
}

/* Stats Section */
.bbhg-bsky-stats-section {
    margin-bottom: 20px;
}

.bbhg-bsky-mood-card {
    background: linear-gradient(135deg, rgba(0,133,255,0.05) 0%, rgba(0,133,255,0.02) 100%);
    border: 1px solid rgba(0,133,255,0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.bbhg-bsky-mood-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.bbhg-bsky-mood-emoji {
    font-size: 28px;
}

.bbhg-bsky-mood-header h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-600);
    margin: 0 0 2px 0;
}

.bbhg-bsky-mood-label {
    font-size: 16px;
    font-weight: 700;
    color: #0085ff;
    text-transform: capitalize;
}

.bbhg-bsky-mood-bar {
    position: relative;
    height: 6px;
    background: linear-gradient(90deg, #94a3b8, #0085ff, #ef4444);
    border-radius: 3px;
    overflow: visible;
    margin-bottom: 2px;
}

.bbhg-bsky-mood-fill {
    position: absolute;
    top: -5px;
    width: 16px;
    height: 16px;
    background: white;
    border: 3px solid #0085ff;
    border-radius: 50%;
    transition: left 0.5s ease;
    box-shadow: 0 2px 8px rgba(0, 133, 255, 0.3);
}

.bbhg-bsky-mood-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 11px;
    color: #6b7280;
}

.bbhg-bsky-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.bbhg-bsky-stat-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.bbhg-bsky-stat-label {
    font-size: 11px;
    color: #64748b;
    font-weight: 500;
}

.bbhg-bsky-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Categories Breakdown */
.bbhg-bsky-categories {
    margin-top: 12px;
    padding: 16px 20px;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
}

.bbhg-bsky-categories-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.bbhg-bsky-cat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(0, 133, 255, 0.08);
    border: 1px solid rgba(0, 133, 255, 0.15);
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    color: #0062bd;
    text-transform: capitalize;
}

.bbhg-bsky-cat-pill .bbhg-bsky-cat-count {
    background: rgba(0, 133, 255, 0.15);
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

/* Results Section */
.bbhg-bsky-results {
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius-xl);
    padding: 24px;
}

.bbhg-bsky-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.bbhg-bsky-results-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbhg-bsky-results-icon {
    font-size: 24px;
}

.bbhg-bsky-results-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0;
}

.bbhg-bsky-results-actions {
    display: flex;
    gap: 10px;
}

/* Action Buttons - White text and white icons */
.bbhg-bsky-action-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #0062bd 0%, #0085ff 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    font-size: 13px;
    font-weight: 500;
    color: white !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-bsky-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 133, 255, 0.3);
}

.bbhg-bsky-action-btn svg {
    width: 16px;
    height: 16px;
    stroke: white;
}

.bbhg-bsky-action-btn span {
    color: white !important;
}

/* Results Grid */
.bbhg-bsky-grid {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Trend Card */
.bbhg-bsky-card {
    display: flex;
    gap: 16px;
    padding: 18px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
    position: relative;
}

.bbhg-bsky-card:hover {
    border-color: rgba(0, 133, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 133, 255, 0.1);
    transform: translateY(-2px);
}

.bbhg-bsky-card-rank {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #0062bd, #0085ff);
    color: white !important;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.bbhg-bsky-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bbhg-bsky-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0;
    line-height: 1.3;
}

.bbhg-bsky-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.bbhg-bsky-card-status {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.bbhg-bsky-card-status.hot {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.bbhg-bsky-card-status.rising {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.bbhg-bsky-card-status.trending {
    background: rgba(0, 133, 255, 0.1);
    color: #0062bd;
}

.bbhg-bsky-card-category {
    font-size: 12px;
    color: #6b7280;
    padding: 2px 10px;
    background: rgba(0, 133, 255, 0.08);
    border-radius: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.bbhg-bsky-card-posts {
    font-size: 12px;
    color: #6b7280;
    font-weight: 500;
}

.bbhg-bsky-card-posts strong {
    color: var(--bbhg-gray-800);
    font-weight: 700;
}

.bbhg-bsky-card-time {
    font-size: 11px;
    color: #6b7280;
    padding: 2px 8px;
    background: var(--bbhg-gray-100);
    border-radius: 10px;
}

/* Actors / Notable accounts */
.bbhg-bsky-card-actors {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.bbhg-bsky-card-actor {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    cursor: pointer;
}

.bbhg-bsky-card-actor img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-bsky-card-actor-placeholder {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0062bd, #0085ff);
    color: white !important;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

/* Hashtags Row */
.bbhg-bsky-card-hashtags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
}

.bbhg-bsky-hashtag {
    font-size: 11px;
    padding: 3px 9px;
    background: rgba(0, 133, 255, 0.08);
    color: #0062bd;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    font-weight: 500;
    border: 1px solid rgba(0, 133, 255, 0.12);
}

.bbhg-bsky-hashtag:hover {
    background: rgba(0, 133, 255, 0.15);
    color: #004ba0;
}

.bbhg-bsky-hashtag.copied {
    background: #10b981;
    color: white !important;
    border-color: #10b981;
}

/* Card Actions */
.bbhg-bsky-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    align-items: flex-start;
}

.bbhg-bsky-card-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bbhg-white);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.bbhg-bsky-card-btn:hover {
    border-color: #0085ff;
    color: #0085ff;
    background: rgba(0, 133, 255, 0.05);
}

.bbhg-bsky-card-btn svg {
    width: 15px;
    height: 15px;
}

.bbhg-bsky-card-open-btn {
    padding: 0 14px;
    width: auto;
    background: linear-gradient(135deg, #0062bd 0%, #0085ff 100%);
    border-color: transparent;
    color: white !important;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    height: 34px;
    text-decoration: none;
}

.bbhg-bsky-card-open-btn:hover {
    border-color: transparent;
    color: white !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 133, 255, 0.3);
    text-decoration: none;
}

.bbhg-bsky-card-open-btn svg {
    stroke: white;
}

.bbhg-bsky-card-open-btn span {
    color: white !important;
}

/* Feed Card */
.bbhg-bsky-feed-card {
    display: flex;
    gap: 16px;
    padding: 18px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
}

.bbhg-bsky-feed-card:hover {
    border-color: rgba(0, 133, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 133, 255, 0.1);
    transform: translateY(-2px);
}

.bbhg-bsky-feed-avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, #0062bd, #0085ff);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bbhg-bsky-feed-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bbhg-bsky-feed-avatar-fallback {
    font-size: 22px;
}

.bbhg-bsky-feed-body {
    flex: 1;
    min-width: 0;
}

.bbhg-bsky-feed-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 4px 0;
}

.bbhg-bsky-feed-desc {
    font-size: 13px;
    color: #6b7280;
    margin: 0 0 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
}

.bbhg-bsky-feed-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 12px;
    color: #6b7280;
}

.bbhg-bsky-feed-likes {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #0085ff;
}

.bbhg-bsky-feed-creator {
    color: #6b7280;
    font-weight: 500;
}

/* Topic Card (lightweight) */
.bbhg-bsky-topic-card {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: var(--bbhg-gray-50);
    border: 1px solid var(--bbhg-gray-200);
    border-radius: var(--bbhg-radius);
    transition: all 0.2s ease;
    cursor: pointer;
}

.bbhg-bsky-topic-card:hover {
    border-color: rgba(0, 133, 255, 0.3);
    box-shadow: 0 4px 16px rgba(0, 133, 255, 0.1);
    transform: translateY(-2px);
}

.bbhg-bsky-topic-card .bbhg-bsky-topic-icon {
    font-size: 20px;
}

.bbhg-bsky-topic-card .bbhg-bsky-topic-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
}

.bbhg-bsky-topics-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Retry Button - White text and icons */
.bbhg-bsky-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #0062bd 0%, #0085ff 100%);
    border: none;
    border-radius: var(--bbhg-radius);
    color: white !important;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.bbhg-bsky-retry-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 133, 255, 0.4);
}

.bbhg-bsky-retry-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
}

.bbhg-bsky-retry-btn span {
    color: white !important;
}

/* Empty State */
.bbhg-bsky-empty {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-bsky-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.bbhg-bsky-empty h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-bsky-empty p {
    font-size: 14px;
    color: #6b7280;
    max-width: 500px;
    margin: 0 auto 24px;
    line-height: 1.6;
}

.bbhg-bsky-empty-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
}

.bbhg-bsky-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--bbhg-gray-700);
}

.bbhg-bsky-feature-icon {
    font-size: 18px;
}

/* Error State */
.bbhg-bsky-error {
    text-align: center;
    padding: 60px 20px;
}

.bbhg-bsky-error-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.bbhg-bsky-error h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--bbhg-gray-800);
    margin: 0 0 8px 0;
}

.bbhg-bsky-error p {
    font-size: 14px;
    color: #6b7280;
    max-width: 400px;
    margin: 0 auto 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .bbhg-bsky-header { flex-direction: column; text-align: center; }
    .bbhg-bsky-title-section { flex-direction: column; }
    .bbhg-bsky-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .bbhg-bsky-filter-row { flex-direction: column; flex-wrap: wrap; }
    .bbhg-bsky-scan-btn { width: 100%; justify-content: center; }
    .bbhg-bsky-tabs { flex-wrap: nowrap; justify-content: center; width: 100%; gap: 3px; }
    .bbhg-bsky-view-tab { padding: 6px 8px; font-size: 10px; }
    .bbhg-bsky-card { flex-direction: column; }
    .bbhg-bsky-card-actions { flex-wrap: wrap; }
    .bbhg-bsky-results-header { flex-direction: column; }
    .bbhg-bsky-results-actions { width: 100%; }
    .bbhg-bsky-action-btn { flex: 1; justify-content: center; }
    .bbhg-bsky-topics-grid { flex-direction: column; }
    .bbhg-bsky-topic-card { width: 100%; }
}

/* ── Global: cursor + hover for all individually-copyable hashtag elements ── */
.bbhg-audio-tag,
.bbhg-sound-detail-tag,
.bbhg-mv-post-tag,
.bbhg-af-alias-tag,
.bbhg-ci-subniche-tag,
.bbhg-igp-tag,
.bbhg-cpulse-hashtag-chip,
.bbhg-cpulse-category-tag,
.bbhg-wce-idea-tag,
.bbhg-ht-variation-tag,
.bbhg-va-trigger-tag,
.bbhg-va-share-trigger-tag,
.bbhg-rh-tag,
.bbhg-pm-source-tag,
.bbhg-si-tag,
.bbhg-si-ai-tag,
.bbhg-si-hashtag,
.bbhg-socialintel-hashtag-tag,
.bbhg-threadgen-hashtag {
    cursor: pointer !important;
    transition: opacity 0.15s, background 0.15s, color 0.15s !important;
}
.bbhg-audio-tag:hover { background: #ec4899 !important; color: #fff !important; }
.bbhg-mv-post-tag:hover { background: #0d9488 !important; color: #fff !important; }
.bbhg-af-alias-tag:hover { background: #7c3aed !important; color: #fff !important; }
.bbhg-ci-subniche-tag:hover { background: #7c3aed !important; color: #fff !important; }
.bbhg-igp-tag:hover,
.bbhg-cpulse-hashtag-chip:hover,
.bbhg-cpulse-category-tag:hover,
.bbhg-wce-idea-tag:hover,
.bbhg-ht-variation-tag:hover,
.bbhg-rh-tag:hover,
.bbhg-si-tag:hover,
.bbhg-si-ai-tag:hover,
.bbhg-si-hashtag:hover,
.bbhg-socialintel-hashtag-tag:hover,
.bbhg-threadgen-hashtag:hover { opacity: 0.75 !important; outline: 1px dashed #7c3aed !important; }
.bbhg-va-trigger-tag:hover,
.bbhg-va-share-trigger-tag:hover { background: linear-gradient(135deg, #8b5cf6, #6366f1) !important; color: #fff !important; }

/* ══════════════════════════════════════════════════════════════
   GLOBAL TREND PULSE GLOBE
   ══════════════════════════════════════════════════════════════ */

.bbhg-globe-container {
    background: #f8fafc;
    border-radius: 16px;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
}

/* ── Header ── */
.bbhg-globe-header {
    position: relative;
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 40%, #4338ca 70%, #6366f1 100%);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    overflow: hidden;
}
.bbhg-globe-header-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.4) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 20%, rgba(139,92,246,0.3) 0%, transparent 50%);
    pointer-events: none;
}
.bbhg-globe-header-content {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
}
.bbhg-globe-header-icon {
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.15);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.2);
}
.bbhg-globe-header-icon svg { width: 24px; height: 24px; }
.bbhg-globe-title {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.bbhg-globe-subtitle {
    margin: 0;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    line-height: 1.4;
}
.bbhg-globe-status {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    position: relative;
    z-index: 1;
    white-space: nowrap;
    flex-shrink: 0;
}
.bbhg-globe-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
    animation: bbhg-globe-pulse-dot 2s infinite;
}
@keyframes bbhg-globe-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(0.85); }
}

/* ── Empty State ── */
.bbhg-globe-empty {
    padding: 50px 32px;
    text-align: center;
}
.bbhg-globe-empty-icon {
    font-size: 56px;
    margin-bottom: 16px;
    display: block;
    animation: bbhg-globe-float 3s ease-in-out infinite;
}
@keyframes bbhg-globe-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
.bbhg-globe-empty h3 {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}
.bbhg-globe-empty p {
    margin: 0 0 24px;
    font-size: 14px;
    color: #64748b;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}
.bbhg-globe-features-grid {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}
.bbhg-globe-feature {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
}
.bbhg-globe-launch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 13px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 14px rgba(99,102,241,0.4);
}
.bbhg-globe-launch-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.5);
}

/* ── Loading ── */
.bbhg-globe-loading {
    padding: 60px 32px;
    text-align: center;
}
.bbhg-globe-loading-inner {
    display: inline-block;
}
.bbhg-globe-spinner {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
}
.bbhg-globe-spinner-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #6366f1;
    animation: bbhg-globe-spin 1.2s linear infinite;
}
.bbhg-globe-spinner-ring--2 {
    inset: 10px;
    border-top-color: #8b5cf6;
    animation-duration: 1.6s;
    animation-direction: reverse;
}
.bbhg-globe-spinner-ring--3 {
    inset: 20px;
    border-top-color: #a78bfa;
    animation-duration: 2s;
}
.bbhg-globe-spinner-core {
    position: absolute;
    inset: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    animation: bbhg-globe-float 2s ease-in-out infinite;
}
@keyframes bbhg-globe-spin {
    to { transform: rotate(360deg); }
}
.bbhg-globe-loading-text {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px;
    font-weight: 500;
}
.bbhg-globe-loading-bar {
    width: 200px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin: 0 auto;
    overflow: hidden;
}
.bbhg-globe-loading-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #a78bfa);
    border-radius: 2px;
    width: 0%;
    transition: width 0.5s ease;
    animation: bbhg-globe-fill-anim 3s ease-in-out infinite;
}
@keyframes bbhg-globe-fill-anim {
    0%   { width: 0%; }
    50%  { width: 75%; }
    100% { width: 95%; }
}

/* ── Main Layout ── */
.bbhg-globe-main {
    padding: 0;
}

/* Stats bar */
.bbhg-globe-stats-bar {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
}
.bbhg-globe-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-right: 1px solid #e2e8f0;
}
.bbhg-globe-stat:last-child { border-right: none; }
.bbhg-globe-stat-value {
    font-size: 18px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}
.bbhg-globe-stat--hot .bbhg-globe-stat-value {
    color: #ef4444;
}
.bbhg-globe-stat-label {
    font-size: 10px;
    color: #94a3b8;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}

/* Globe + sidebar */
.bbhg-globe-layout {
    display: grid;
    grid-template-columns: 480px 1fr;
    min-height: 500px;
}
.bbhg-globe-canvas-wrap {
    position: relative;
    background: #020818;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid #1e293b;
    overflow: hidden;
    min-height: 480px;
}
/* Starfield background */
.bbhg-globe-canvas-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 30% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 15%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 60% 85%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 75% 40%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 85% 60%, rgba(255,255,255,0.8) 0%, transparent 100%),
        radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,0.4) 0%, transparent 100%),
        radial-gradient(1px 1px at 90% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 55% 55%, rgba(255,255,255,0.9) 0%, transparent 100%),
        radial-gradient(1px 1px at 10% 80%, rgba(255,255,255,0.5) 0%, transparent 100%),
        radial-gradient(1px 1px at 40% 45%, rgba(255,255,255,0.3) 0%, transparent 100%),
        radial-gradient(1px 1px at 70% 10%, rgba(255,255,255,0.7) 0%, transparent 100%),
        radial-gradient(1px 1px at 95% 75%, rgba(255,255,255,0.4) 0%, transparent 100%);
    pointer-events: none;
}
#bbhg-globe-canvas {
    cursor: grab;
    position: relative;
    z-index: 1;
    max-width: 100%;
}
#bbhg-globe-canvas:active { cursor: grabbing; }
.bbhg-globe-hint {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    z-index: 2;
}
.bbhg-globe-legend {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 8px 10px;
    z-index: 2;
}
.bbhg-globe-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: rgba(255,255,255,0.7);
    font-weight: 500;
}
.bbhg-globe-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Sidebar */
.bbhg-globe-sidebar {
    background: #fff;
    overflow-y: auto;
    max-height: 480px;
}
.bbhg-globe-sidebar-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #f1f5f9;
}

/* Region cards in sidebar list */
.bbhg-globe-region-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f8fafc;
    transition: background 0.15s;
    position: relative;
}
.bbhg-globe-region-card:hover {
    background: #f8fafc;
}
.bbhg-globe-region-card.active {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    border-left: 3px solid #6366f1;
}
.bbhg-globe-region-card-flag {
    font-size: 20px;
    flex-shrink: 0;
    line-height: 1;
}
.bbhg-globe-region-card-info {
    flex: 1;
    min-width: 0;
}
.bbhg-globe-region-card-name {
    font-size: 12px;
    font-weight: 700;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.bbhg-globe-region-card-top {
    font-size: 10px;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    margin-top: 1px;
}
.bbhg-globe-region-intensity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.bbhg-globe-intensity-bar {
    width: 40px;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}
.bbhg-globe-intensity-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.bbhg-globe-region-hot-badge {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Region detail view */
.bbhg-globe-back-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: #6366f1;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 16px 8px;
    width: 100%;
    text-align: left;
    transition: color 0.15s;
}
.bbhg-globe-back-btn:hover { color: #4338ca; }
.bbhg-globe-detail-header {
    padding: 0 16px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.bbhg-globe-detail-region-name {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.bbhg-globe-detail-flag { font-size: 22px; }
.bbhg-globe-detail-name {
    font-size: 15px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1.2;
}
.bbhg-globe-detail-countries {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

/* Trend list in detail */
.bbhg-globe-trend-list { padding: 8px 0; }
.bbhg-globe-trend-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f8fafc;
}
.bbhg-globe-trend-item:hover { background: #f8fafc; }
.bbhg-globe-trend-item.selected { background: #eef2ff; }
.bbhg-globe-trend-rank {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.bbhg-globe-trend-rank.rank-1 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.bbhg-globe-trend-rank.rank-2 { background: linear-gradient(135deg, #94a3b8, #64748b); }
.bbhg-globe-trend-rank.rank-3 { background: linear-gradient(135deg, #a78bfa, #6366f1); }
.bbhg-globe-trend-info { flex: 1; min-width: 0; }
.bbhg-globe-trend-title {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bbhg-globe-trend-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bbhg-globe-trend-cat {
    font-size: 9px;
    font-weight: 600;
    color: #8b5cf6;
    background: #f3f0ff;
    padding: 1px 5px;
    border-radius: 4px;
}
.bbhg-globe-trend-views {
    font-size: 9px;
    color: #94a3b8;
    font-weight: 500;
}
.bbhg-globe-analyze-btn {
    display: block;
    width: calc(100% - 32px);
    margin: 10px 16px;
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.bbhg-globe-analyze-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99,102,241,0.4);
}

/* AI Panel */
.bbhg-globe-ai-panel {
    padding: 0 0 8px;
    border-top: 1px solid #e2e8f0;
}
.bbhg-globe-ai-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px;
    font-size: 12px;
    color: #64748b;
}
.bbhg-globe-ai-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid #e2e8f0;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: bbhg-globe-spin 0.8s linear infinite;
    flex-shrink: 0;
}
.bbhg-globe-ai-summary {
    padding: 12px 16px;
    font-size: 11px;
    color: #374151;
    line-height: 1.55;
    background: #fafbff;
    border-bottom: 1px solid #e2e8f0;
}
.bbhg-globe-ai-topic {
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.bbhg-globe-ai-topic-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.bbhg-globe-ai-topic-cat {
    font-size: 12px;
}
.bbhg-globe-ai-topic-title {
    font-size: 11px;
    font-weight: 700;
    color: #1e293b;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bbhg-globe-ai-why {
    font-size: 10px;
    color: #64748b;
    margin-bottom: 5px;
    line-height: 1.4;
}
.bbhg-globe-ai-angle {
    font-size: 10px;
    color: #1d4ed8;
    line-height: 1.4;
    padding: 5px 8px;
    background: #eff6ff;
    border-radius: 6px;
    border-left: 2px solid #3b82f6;
    margin-bottom: 6px;
}
.bbhg-globe-ai-hook {
    font-size: 10px;
    color: #7c3aed;
    font-style: italic;
    padding: 4px 8px;
    background: #f5f3ff;
    border-radius: 6px;
    margin-bottom: 6px;
    line-height: 1.4;
}
.bbhg-globe-ai-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.bbhg-globe-ai-tag {
    font-size: 9px;
    font-weight: 600;
    background: #f3f4f6;
    color: #374151;
    padding: 2px 7px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    transition: all 0.15s;
}
.bbhg-globe-ai-tag:hover {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    border-color: transparent;
}
.bbhg-globe-ai-crossplatform {
    margin: 10px 16px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    border: 1px solid #6ee7b7;
    border-radius: 8px;
    font-size: 10px;
    color: #065f46;
    line-height: 1.5;
}
.bbhg-globe-ai-crossplatform strong {
    display: block;
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 3px;
    color: #047857;
}

/* Footer */
.bbhg-globe-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}
.bbhg-globe-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.bbhg-globe-filter-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}
.bbhg-globe-filter {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.bbhg-globe-filter:hover, .bbhg-globe-filter.active {
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: #fff;
    border-color: transparent;
}
.bbhg-globe-refresh-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.bbhg-globe-refresh-btn:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: #475569;
}

/* Error state */
.bbhg-globe-error {
    padding: 40px 32px;
    text-align: center;
}
.bbhg-globe-error-icon { font-size: 40px; margin-bottom: 12px; }
.bbhg-globe-error p { font-size: 14px; color: #64748b; margin: 0 0 16px; }
.bbhg-globe-retry-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #4338ca, #6366f1);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 780px) {
    .bbhg-globe-layout { grid-template-columns: 1fr; }
    .bbhg-globe-canvas-wrap { min-height: 320px; }
    #bbhg-globe-canvas { width: 320px !important; height: 320px !important; }
    .bbhg-globe-sidebar { max-height: 350px; }
    .bbhg-globe-stats-bar { flex-wrap: wrap; }
    .bbhg-globe-stat { min-width: 50%; }
}

/* ── Globe Panel: guarantee visibility when active ── */
#bbhg-panel-globetrendpulse.active {
    display: block !important;
}
#bbhg-panel-globetrendpulse.active .bbhg-globe-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* Ensure the empty state is always visible as fallback */
#bbhg-panel-globetrendpulse.active #bbhg-globe-empty:not([style*="display: none"]):not([style*="display:none"]) {
    display: block !important;
}