* {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        :root {
            --primary: #2563eb;
            --primary-dark: #1e40af;
            --secondary: #7c3aed;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --sidebar-width: 280px;
            --header-height: 64px;
        }

        /* Fixed header */
        header {
            position: fixed !important;
        }

        /* Smooth scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(0, 0, 0, 0.3);
        }

        /* Dark mode scrollbar */
        .dark ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
        }

        .dark ::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
        }

        .dark ::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* Glass effect */
        .glass {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
        }

        .dark .glass {
            background: rgba(17, 24, 39, 0.7);
        }

        /* Smooth transitions */
        * {
            transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
        }

        /* Button hover effects */
        .btn-hover {
            transition: all 0.2s ease;
        }

        .btn-hover:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .btn-hover:active {
            transform: translateY(0);
        }

        /* Card hover effect */
        .card-hover {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
        }

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

        .gradient-animated {
            background-size: 200% 200%;
            animation: gradient-shift 8s ease infinite;
        }

        /* Pulse animation */
        @keyframes pulse-subtle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }

        .pulse-subtle {
            animation: pulse-subtle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Fade in animation */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .fade-in {
            animation: fadeIn 0.4s ease-out;
        }

        /* Slide in from right */
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        .slide-in-right {
            animation: slideInRight 0.3s ease-out;
        }

        /* Command palette */
        .command-palette {
            max-height: 400px;
            overflow-y: auto;
        }

        /* Monaco editor style */
        .code-editor {
            font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
            font-size: 14px;
            line-height: 1.6;
            white-space: pre-wrap;
            word-break: break-word;
            overflow-x: auto;
        }

        /* Tabs */
        .tab-active {
            position: relative;
        }

        .tab-active::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--primary);
        }

        /* Sidebar */
        .sidebar {
            width: var(--sidebar-width);
            height: calc(100vh - var(--header-height));
            position: fixed;
            top: var(--header-height);
            left: 0;
            overflow-y: auto;
        }

        .main-content {
            margin-left: var(--sidebar-width);
            min-height: calc(100vh - var(--header-height));
        }

        /* Responsive sidebar */
        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
                z-index: 40;
            }

            .sidebar.open {
                transform: translateX(0);
            }

            .main-content {
                margin-left: 0;
            }
        }

        /* Stats counter animation */
        @keyframes countUp {
            from { opacity: 0; transform: scale(0.5); }
            to { opacity: 1; transform: scale(1); }
        }

        .stat-card {
            animation: countUp 0.5s ease-out;
        }

        /* Toggle switch */
        .toggle-checkbox:checked {
            background-color: var(--primary);
            border-color: var(--primary);
        }

        .toggle-checkbox:checked ~ .toggle-label {
            transform: translateX(20px);
        }

        /* Modal backdrop */
        .modal-backdrop {
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }

        /* Tooltip */
        .tooltip {
            position: relative;
        }

        .tooltip::before {
            content: attr(data-tooltip);
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translateX(-50%) translateY(8px);
            padding: 8px 12px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            font-size: 12px;
            border-radius: 6px;
            white-space: pre-line;
            max-width: 200px;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s, transform 0.2s;
            z-index: 1000;
        }

        .tooltip:hover::before {
            opacity: 1;
            transform: translateX(-50%) translateY(4px);
        }

        /* Loading spinner */
        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .spinner {
            animation: spin 1s linear infinite;
        }

        /* Progress bar */
        .progress-bar {
            transition: width 0.3s ease;
        }

        /* Notification animation */
        @keyframes slideInFromRight {
            from { transform: translateX(400px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        @keyframes slideOutToRight {
            from { transform: translateX(0); opacity: 1; }
            to { transform: translateX(400px); opacity: 0; }
        }

        .notification-enter {
            animation: slideInFromRight 0.3s ease-out;
        }

        .notification-exit {
            animation: slideOutToRight 0.3s ease-in;
        }

        /* Split panel resize */
        .resize-handle {
            cursor: col-resize;
            user-select: none;
        }

        .resize-handle:hover {
            background: var(--primary);
        }

        /* Syntax highlighting colors */
        .syntax-keyword { color: #d73a49; }
        .syntax-string { color: #032f62; }
        .syntax-number { color: #005cc5; }
        .syntax-comment { color: #6a737d; font-style: italic; }
        .syntax-function { color: #6f42c1; }

        .dark .syntax-keyword { color: #ff7b72; }
        .dark .syntax-string { color: #a5d6ff; }
        .dark .syntax-number { color: #79c0ff; }
        .dark .syntax-comment { color: #8b949e; }
        .dark .syntax-function { color: #d2a8ff; }

        /* Grid background */
        .grid-bg {
            background-image:
                linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
            background-size: 20px 20px;
        }

        .dark .grid-bg {
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
        }

        /* Skeleton loading */
        @keyframes shimmer {
            0% { background-position: -1000px 0; }
            100% { background-position: 1000px 0; }
        }

        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 1000px 100%;
            animation: shimmer 2s infinite;
        }

        .dark .skeleton {
            background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
            background-size: 1000px 100%;
        }

        /* Focus visible for accessibility */
        *:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 2px;
        }

        /* Print styles */
        @media print {
            .no-print { display: none !important; }
            .sidebar { display: none !important; }
            .main-content { margin-left: 0 !important; }
        }

        /* ============================================ */
        /* ULTRA-ADVANCED ANIMATIONS & EFFECTS */
        /* ============================================ */

        /* Ripple effect */
        .ripple {
            position: relative;
            overflow: hidden;
        }

        .ripple::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .ripple:active::after {
            width: 300px;
            height: 300px;
        }

        /* 3D Card transforms */
        .card-3d {
            transform-style: preserve-3d;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .card-3d:hover {
            transform: rotateX(2deg) rotateY(5deg) scale(1.02);
        }

        /* Animated gradient background */
        @keyframes gradientFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .gradient-flow {
            background: linear-gradient(270deg, #2563eb, #7c3aed, #db2777, #2563eb);
            background-size: 600% 600%;
            animation: gradientFlow 15s ease infinite;
        }

        /* Particle background */
        .particles-bg {
            position: relative;
            overflow: hidden;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) translateX(0px); }
            25% { transform: translateY(-20px) translateX(10px); }
            50% { transform: translateY(-40px) translateX(-10px); }
            75% { transform: translateY(-20px) translateX(5px); }
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            background: rgba(37, 99, 235, 0.1);
            pointer-events: none;
        }

        /* Stagger animation for lists */
        @keyframes staggerFadeIn {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .stagger-item {
            animation: staggerFadeIn 0.5s ease-out backwards;
        }

        .stagger-item:nth-child(1) { animation-delay: 0.05s; }
        .stagger-item:nth-child(2) { animation-delay: 0.1s; }
        .stagger-item:nth-child(3) { animation-delay: 0.15s; }
        .stagger-item:nth-child(4) { animation-delay: 0.2s; }
        .stagger-item:nth-child(5) { animation-delay: 0.25s; }
        .stagger-item:nth-child(6) { animation-delay: 0.3s; }

        /* Smooth number counter */
        @keyframes countUp {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.8);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .counter-animate {
            animation: countUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Enhanced skeleton loader */
        @keyframes shimmerFlow {
            0% {
                background-position: -1000px 0;
            }
            100% {
                background-position: 1000px 0;
            }
        }

        .skeleton-enhanced {
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.0) 0%,
                rgba(255, 255, 255, 0.1) 20%,
                rgba(255, 255, 255, 0.2) 50%,
                rgba(255, 255, 255, 0.1) 80%,
                rgba(255, 255, 255, 0.0) 100%
            );
            background-size: 1000px 100%;
            animation: shimmerFlow 2s infinite linear;
        }

        .dark .skeleton-enhanced {
            background: linear-gradient(
                90deg,
                rgba(0, 0, 0, 0.0) 0%,
                rgba(255, 255, 255, 0.05) 20%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0.05) 80%,
                rgba(0, 0, 0, 0.0) 100%
            );
            background-size: 1000px 100%;
        }

        /* Glow effect */
        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 20px rgba(37, 99, 235, 0.3),
                            0 0 40px rgba(37, 99, 235, 0.1);
            }
            50% {
                box-shadow: 0 0 30px rgba(37, 99, 235, 0.5),
                            0 0 60px rgba(37, 99, 235, 0.2);
            }
        }

        .glow-effect {
            animation: glow 3s ease-in-out infinite;
        }

        /* Page transition */
        @keyframes pageSlideIn {
            from {
                opacity: 0;
                transform: translateX(30px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .page-transition {
            animation: pageSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Enhanced hover lift */
        .hover-lift {
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hover-lift:hover {
            transform: translateY(-4px) scale(1.01);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12),
                        0 10px 20px rgba(0, 0, 0, 0.08);
        }

        /* Micro-interaction: Scale bounce */
        @keyframes scaleBounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        .scale-bounce {
            animation: scaleBounce 0.6s ease-in-out;
        }

        /* Success checkmark animation */
        @keyframes checkmarkDraw {
            0% {
                stroke-dashoffset: 100;
            }
            100% {
                stroke-dashoffset: 0;
            }
        }

        .checkmark-animate {
            stroke-dasharray: 100;
            stroke-dashoffset: 100;
            animation: checkmarkDraw 0.5s ease-out forwards;
        }

        /* Floating badge */
        @keyframes floatBadge {
            0%, 100% {
                transform: translateY(0px) rotate(0deg);
            }
            50% {
                transform: translateY(-10px) rotate(3deg);
            }
        }

        .float-badge {
            animation: floatBadge 3s ease-in-out infinite;
        }

        /* Star favorite animation */
        @keyframes starPop {
            0% {
                transform: scale(0) rotate(0deg);
            }
            50% {
                transform: scale(1.3) rotate(180deg);
            }
            100% {
                transform: scale(1) rotate(360deg);
            }
        }

        .star-pop {
            animation: starPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        /* Tag slide in */
        @keyframes tagSlide {
            from {
                opacity: 0;
                transform: translateX(-20px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .tag-slide {
            animation: tagSlide 0.3s ease-out;
        }

        /* Chart bar grow */
        @keyframes barGrow {
            from {
                transform: scaleY(0);
                opacity: 0;
            }
            to {
                transform: scaleY(1);
                opacity: 1;
            }
        }

        .bar-grow {
            transform-origin: bottom;
            animation: barGrow 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }

        /* Tooltip elegant appear */
        @keyframes tooltipAppear {
            from {
                opacity: 0;
                transform: translateY(10px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .tooltip-appear {
            animation: tooltipAppear 0.2s ease-out;
        }

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

        /* Enhanced focus visible */
        *:focus-visible {
            outline: 3px solid var(--primary);
            outline-offset: 3px;
            border-radius: 4px;
        }

        /* High contrast mode support */
        @media (prefers-contrast: high) {
            .glass {
                background: rgba(255, 255, 255, 0.95);
            }
            .dark .glass {
                background: rgba(17, 24, 39, 0.95);
            }
        }

        /* Placeholder text styling for better visibility */
        ::placeholder {
            color: #9ca3af; /* gray-400 */
            opacity: 1;
        }

        .dark ::placeholder {
            color: #6b7280; /* gray-500 for better visibility in dark mode */
            opacity: 1;
        }

        /* Specific placeholder rules for advanced options inputs - Light mode */
        main.main-content input#prefixText::placeholder,
        main.main-content input#suffixText::placeholder,
        main.main-content textarea#customWords::placeholder {
            color: #9ca3af !important; /* gray-400 - better visibility on white background */
        }

        /* Specific placeholder rules for advanced options inputs - Dark mode */
        .dark main.main-content input#prefixText::placeholder,
        .dark main.main-content input#suffixText::placeholder,
        .dark main.main-content textarea#customWords::placeholder {
            color: #6b7280 !important; /* gray-500 */
        }

        /* Ensure form inputs have proper text color in dark mode */
        input, textarea, select {
            color: inherit;
        }

        .dark input,
        .dark textarea,
        .dark select {
            color: #f3f4f6; /* gray-100 */
        }

        /* ============================================ */
        /* HEADER BUTTON TEXT COLOR FIX */
        /* Ultra-specific selectors to override Tailwind */
        /* ============================================ */

        /* Light mode - Black text for all header buttons */
        header.fixed nav.hidden.lg\:flex button[onclick^="switchView"],
        header.fixed nav button[onclick="switchView('generator')"],
        header.fixed nav button[onclick="switchView('templates')"],
        header.fixed nav button[onclick="switchView('analytics')"],
        header.fixed nav button[onclick="switchView('api')"],
        header.fixed button[onclick="toggleTheme()"],
        header.fixed button[onclick="openSettings()"],
        header.fixed button[onclick="toggleSidebar()"],
        header.fixed button[onclick="toggleCommandPalette()"] {
            color: #000000 !important;
        }

        /* Light mode - Black color for SVG icons */
        header.fixed button[onclick="toggleTheme()"] svg,
        header.fixed button[onclick="openSettings()"] svg,
        header.fixed button[onclick="toggleSidebar()"] svg,
        header.fixed button[onclick="toggleCommandPalette()"] svg {
            color: #000000 !important;
        }

        /* Dark mode - White text for all header buttons */
        .dark header.fixed nav.hidden.lg\:flex button[onclick^="switchView"],
        .dark header.fixed nav button[onclick="switchView('generator')"],
        .dark header.fixed nav button[onclick="switchView('templates')"],
        .dark header.fixed nav button[onclick="switchView('analytics')"],
        .dark header.fixed nav button[onclick="switchView('api')"],
        .dark header.fixed button[onclick="toggleTheme()"],
        .dark header.fixed button[onclick="openSettings()"],
        .dark header.fixed button[onclick="toggleSidebar()"],
        .dark header.fixed button[onclick="toggleCommandPalette()"] {
            color: #ffffff !important;
        }

        /* Dark mode - White color for SVG icons */
        .dark header.fixed button[onclick="toggleTheme()"] svg,
        .dark header.fixed button[onclick="openSettings()"] svg,
        .dark header.fixed button[onclick="toggleSidebar()"] svg,
        .dark header.fixed button[onclick="toggleCommandPalette()"] svg {
            color: #ffffff !important;
        }

        /* Command Palette Inner Elements - Light mode */
        header.fixed button[onclick="toggleCommandPalette()"] span,
        header.fixed button[onclick="toggleCommandPalette()"] kbd {
            color: #000000 !important;
        }

        /* Command Palette kbd element - Light mode background */
        header.fixed button[onclick="toggleCommandPalette()"] kbd {
            background-color: #F9FAFB !important; /* gray-50 - very light gray */
        }

        /* Command Palette Inner Elements - Dark mode */
        .dark header.fixed button[onclick="toggleCommandPalette()"] span,
        .dark header.fixed button[onclick="toggleCommandPalette()"] kbd {
            color: #ffffff !important;
        }

        /* Command Palette kbd element - Dark mode background */
        .dark header.fixed button[onclick="toggleCommandPalette()"] kbd {
            background-color: #111827 !important; /* gray-900 - dark */
        }

        /* ============================================ */
        /* HEADER BUTTON HOVER EFFECTS */
        /* Purple border on hover, no background change */
        /* ============================================ */

        /* Light mode - Purple border on hover */
        header.fixed nav button[onclick="switchView('generator')"]:hover,
        header.fixed nav button[onclick="switchView('templates')"]:hover,
        header.fixed nav button[onclick="switchView('analytics')"]:hover,
        header.fixed nav button[onclick="switchView('api')"]:hover,
        header.fixed button[onclick="toggleTheme()"]:hover,
        header.fixed button[onclick="openSettings()"]:hover,
        header.fixed button[onclick="toggleSidebar()"]:hover,
        header.fixed button[onclick="toggleCommandPalette()"]:hover {
            border-color: #9333ea !important; /* purple-600 */
            background-color: transparent !important;
        }

        /* Dark mode - Lighter purple border on hover */
        .dark header.fixed nav button[onclick="switchView('generator')"]:hover,
        .dark header.fixed nav button[onclick="switchView('templates')"]:hover,
        .dark header.fixed nav button[onclick="switchView('analytics')"]:hover,
        .dark header.fixed nav button[onclick="switchView('api')"]:hover,
        .dark header.fixed button[onclick="toggleTheme()"]:hover,
        .dark header.fixed button[onclick="openSettings()"]:hover,
        .dark header.fixed button[onclick="toggleSidebar()"]:hover,
        .dark header.fixed button[onclick="toggleCommandPalette()"]:hover {
            border-color: #a855f7 !important; /* purple-500 */
            background-color: transparent !important;
        }

        /* ============================================ */
        /* PREVIEW MODE BUTTON HOVER EFFECTS */
        /* Light purple for light mode, gray for dark mode */
        /* ============================================ */

        /* Light mode - Light purple background on hover (only for inactive buttons) */
        button[onclick*="togglePreviewMode"][class*="border-gray"]:hover {
            background-color: #F3E8FF !important; /* purple-100 */
        }

        /* Dark mode - Gray background on hover (only for inactive buttons) */
        .dark button[onclick*="togglePreviewMode"][class*="border-gray"]:hover {
            background-color: #374151 !important; /* gray-700 */
        }

        /* ============================================ */
        /* SELECT OPTION BACKGROUND FIX */
        /* Fix dropdown option backgrounds in light mode */
        /* ============================================ */

        /* All select option elements - Light mode */
        select option {
            background-color: #ffffff !important; /* Pure white */
            color: #111827 !important; /* Dark text */
        }

        /* All select option elements - Dark mode */
        .dark select option {
            background-color: #374151 !important; /* gray-700 */
            color: #f3f4f6 !important; /* Light text */
        }

        /* Select element itself (closed dropdown) - Light mode */
        select#outputFormat,
        select#textTransform,
        select#batchFormat,
        select#themeSelect {
            background-color: #ffffff !important; /* Pure white */
        }

        /* Select element itself (closed dropdown) - Dark mode */
        .dark select#outputFormat,
        .dark select#textTransform,
        .dark select#batchFormat,
        .dark select#themeSelect {
            background-color: #374151 !important; /* gray-700 */
        }

        /* Input/Textarea elements background fix - Light mode */
        input#prefixText,
        input#suffixText,
        textarea#customWords {
            background-color: #ffffff !important; /* Pure white */
        }

        /* Input/Textarea elements background fix - Dark mode */
        .dark input#prefixText,
        .dark input#suffixText,
        .dark textarea#customWords {
            background-color: #374151 !important; /* gray-700 */
        }

        /* Action buttons background fix - Light mode */
        button[onclick="copyToClipboard()"],
        button[onclick="downloadText()"],
        button[onclick="toggleShareMenu()"] {
            background-color: #f3f4f6 !important; /* gray-100 */
        }

        /* Action buttons background fix - Dark mode */
        .dark button[onclick="copyToClipboard()"],
        .dark button[onclick="downloadText()"],
        .dark button[onclick="toggleShareMenu()"] {
            background-color: #374151 !important; /* gray-700 */
        }

        /* Action buttons border fix - Light mode */
        button[onclick="copyToClipboard()"],
        button[onclick="downloadText()"],
        button[onclick="toggleShareMenu()"] {
            border: 1px solid #d1d5db !important; /* gray-300 - darker for better visibility */
        }

        /* Action buttons border fix - Dark mode */
        .dark button[onclick="copyToClipboard()"],
        .dark button[onclick="downloadText()"],
        .dark button[onclick="toggleShareMenu()"] {
            border: 1px solid #4b5563 !important; /* gray-600 */
        }

        /* Share dropdown menu background fix - Light mode */
        div#shareMenu {
            background-color: #ffffff !important; /* Pure white */
            border-color: #e5e7eb !important; /* gray-200 */
        }

        /* Share dropdown menu background fix - Dark mode */
        .dark div#shareMenu {
            background-color: #1f2937 !important; /* gray-800 */
            border-color: #374151 !important; /* gray-700 */
        }

        /* Share dropdown menu buttons hover fix - Light mode */
        div#shareMenu button:hover {
            background-color: #f3f4f6 !important; /* gray-100 */
        }

        /* Share dropdown menu buttons hover fix - Dark mode */
        .dark div#shareMenu button:hover {
            background-color: #374151 !important; /* gray-700 */
        }

        /* Share dropdown menu button text color fix - Light mode */
        div#shareMenu button {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Share dropdown menu button text color fix - Dark mode */
        .dark div#shareMenu button {
            color: #f3f4f6 !important; /* gray-100 / light */
        }

        /* Clear button (Custom Word Bank) base background fix - Light mode */
        button[onclick="clearCustomWords()"] {
            background-color: #e5e7eb !important; /* gray-200 */
        }

        /* Clear button (Custom Word Bank) base background fix - Dark mode */
        .dark button[onclick="clearCustomWords()"] {
            background-color: #374151 !important; /* gray-700 */
        }

        /* Clear button (Custom Word Bank) hover fix - Light mode */
        button[onclick="clearCustomWords()"]:hover {
            background-color: #d1d5db !important; /* gray-300 - darker on hover */
        }

        /* Preview footer bar (stats bar) background fix - Light mode */
        div.border-t.px-6.py-3.bg-gray-50 {
            background-color: #f9fafb !important; /* gray-50 */
        }

        /* Preview footer bar (stats bar) background fix - Dark mode */
        .dark div.border-t.px-6.py-3.bg-gray-50 {
            background-color: rgba(17, 24, 39, 0.5) !important; /* gray-900/50 */
        }

        /* Copy button in preview footer - Light mode */
        button[onclick="copyToClipboard()"][class*="bg-blue-600"] {
            background-color: #2563eb !important; /* blue-600 */
            border: 1px solid #1d4ed8 !important; /* blue-700 */
        }

        /* Download button in preview footer (icon only) - Light mode */
        div.border-t.px-6.py-3 button[onclick="downloadText()"][title="Download text"] {
            background-color: #4b5563 !important; /* gray-600 */
            border: 1px solid #374151 !important; /* gray-700 */
        }

        /* Clear button in preview footer - Light mode */
        button[onclick="clearPreview()"] {
            color: #6b7280 !important; /* gray-500 */
            border: 1px solid #d1d5db !important; /* gray-300 */
            border-radius: 0.5rem !important;
            padding: 0.375rem 0.75rem !important;
        }

        /* Clear button (Custom Word Bank) hover fix - Dark mode */
        .dark button[onclick="clearCustomWords()"]:hover {
            background-color: #4b5563 !important; /* gray-600 */
        }

        /* Template filter buttons (inactive tabs) - Light mode WHITE text */
        div#templatesView button.template-filter[data-filter="all"],
        div#templatesView button.template-filter[data-filter="web"],
        div#templatesView button.template-filter[data-filter="mobile"],
        div#templatesView button.template-filter[data-filter="email"],
        div#templatesView button.template-filter[data-filter="social"] {
            color: #ffffff !important; /* White text */
        }

        /* Template filter buttons (inactive tabs) - Dark mode */
        .dark div#templatesView button.template-filter[data-filter="all"],
        .dark div#templatesView button.template-filter[data-filter="web"],
        .dark div#templatesView button.template-filter[data-filter="mobile"],
        .dark div#templatesView button.template-filter[data-filter="email"],
        .dark div#templatesView button.template-filter[data-filter="social"] {
            color: #f3f4f6 !important; /* gray-100 / light */
        }

        /* Template Preview Modal - Main container - LIGHT MODE ONLY */
        html:not(.dark) div#templatePreviewModal > div {
            background-color: #ffffff !important; /* White modal background */
        }

        /* Template Preview Modal - Configuration section - LIGHT MODE ONLY */
        html:not(.dark) div#templatePreviewModal div.bg-gray-100 {
            background-color: #f3f4f6 !important; /* gray-100 */
        }

        /* Template Preview Modal - Sample Output section - LIGHT MODE ONLY */
        html:not(.dark) div#templatePreviewModal div.bg-gray-50 {
            background-color: #f9fafb !important; /* gray-50 */
        }

        /* Template Preview Modal - All text elements - LIGHT MODE ONLY */
        html:not(.dark) div#templatePreviewModal h2,
        html:not(.dark) div#templatePreviewModal h3,
        html:not(.dark) div#templatePreviewModal p,
        html:not(.dark) div#templatePreviewModal span,
        html:not(.dark) div#templatePreviewModal div {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Template Preview Modal - Label text - LIGHT MODE ONLY */
        html:not(.dark) div#templatePreviewModal span.text-gray-500 {
            color: #6b7280 !important; /* gray-500 / medium gray */
        }

        /* Template Preview Modal - Cancel button - RED - LIGHT MODE ONLY */
        html:not(.dark) div#templatePreviewModal button[onclick="closeTemplatePreview()"] {
            background-color: #dc2626 !important; /* red-600 */
            color: #ffffff !important; /* white text */
        }

        /* Template Preview Modal - Cancel button hover - LIGHT MODE ONLY */
        html:not(.dark) div#templatePreviewModal button[onclick="closeTemplatePreview()"]:hover {
            background-color: #b91c1c !important; /* red-700 - darker on hover */
        }

        /* ============================================ */
        /* ANALYTICS - GENERATION ACTIVITY CHART FIX */
        /* ============================================ */

        /* Analytics - Generation Activity chart background bars - LIGHT MODE ONLY */
        html:not(.dark) div#activityChart div.bg-gray-200 {
            background-color: #e5e7eb !important; /* gray-200 / light gray */
        }

        /* Analytics - Generation Activity chart bars (alternate selector) - LIGHT MODE ONLY */
        html:not(.dark) div#analyticsView div.bg-gray-200 {
            background-color: #e5e7eb !important; /* gray-200 / light gray */
        }

        /* ============================================ */
        /* API SIMULATOR - ENDPOINT FIELDS FIX */
        /* ============================================ */

        /* API Simulator - Endpoint dropdown (GET/POST) background - LIGHT MODE ONLY */
        html:not(.dark) div#apiView select.bg-white {
            background-color: #ffffff !important; /* white */
        }

        /* API Simulator - Endpoint input field (/api/v1/generate) background - LIGHT MODE ONLY */
        html:not(.dark) div#apiView input[value="/api/v1/generate"] {
            background-color: #ffffff !important; /* white */
        }

        /* API Simulator - Status badge with gradient border - LIGHT MODE ONLY */
        html:not(.dark) div#apiView span#apiStatus {
            background: linear-gradient(white, white) padding-box,
                        linear-gradient(to right, #2563eb, #7c3aed) border-box !important;
            border: 2px solid transparent !important;
            color: #111827 !important; /* black text */
        }

        /* API Simulator - Request Body textarea text color - LIGHT MODE ONLY */
        html:not(.dark) div#apiView textarea#apiRequest {
            color: #ffffff !important; /* white text */
        }

        /* API Simulator - Example button text colors - LIGHT MODE ONLY */
        html:not(.dark) div#apiView button[onclick="fillAPIExample(1)"],
        html:not(.dark) div#apiView button[onclick="fillAPIExample(2)"],
        html:not(.dark) div#apiView button[onclick="fillAPIExample(3)"],
        html:not(.dark) div#apiView button[onclick="fillAPIExample(4)"] {
            color: #111827 !important; /* black / gray-900 */
        }

        /* ============================================ */
        /* SETTINGS MODAL - LIGHT MODE FIX */
        /* ============================================ */

        /* Settings modal - Main container background - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal > div {
            background-color: #ffffff !important; /* white */
        }

        /* Settings modal - Theme dropdown background - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal select#themeSelect {
            background-color: #ffffff !important; /* white */
        }

        /* Settings modal - Storage info box background - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal div.bg-gray-100 {
            background-color: #f3f4f6 !important; /* gray-100 / light gray */
        }

        /* Settings modal - Storage bar background - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal div.bg-gray-300 {
            background-color: #d1d5db !important; /* gray-300 / medium light gray */
        }

        /* Settings modal - Keyboard shortcut badges (kbd) background - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal kbd {
            background-color: #f3f4f6 !important; /* gray-100 / light gray */
        }

        /* Settings modal - All headings (h2, h3) text color - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal h2,
        html:not(.dark) div#settingsModal h3 {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Settings modal - All labels and body text - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal label,
        html:not(.dark) div#settingsModal span,
        html:not(.dark) div#settingsModal div.text-sm,
        html:not(.dark) div#settingsModal select {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Settings modal - Secondary text (gray-600) - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal span.text-gray-600 {
            color: #4b5563 !important; /* gray-600 / medium gray */
        }

        /* Settings modal - Tertiary text (gray-500) - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal p.text-xs {
            color: #6b7280 !important; /* gray-500 / light gray */
        }

        /* Settings modal - Keyboard shortcut text (kbd) - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal kbd {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Settings modal - Close button icon - LIGHT MODE ONLY */
        html:not(.dark) div#settingsModal button[onclick="closeSettings()"] svg {
            color: #111827 !important; /* gray-900 / black */
        }

        /* ============================================ */
        /* COMMAND PALETTE MODAL - LIGHT MODE FIX */
        /* ============================================ */

        /* Command Palette - Main container background - LIGHT MODE ONLY */
        html:not(.dark) div#commandPalette > div {
            background-color: #ffffff !important; /* white */
        }

        /* Command Palette - Search input text - LIGHT MODE ONLY */
        html:not(.dark) div#commandPalette input#commandInput {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Command Palette - ESC badge background and text - LIGHT MODE ONLY */
        html:not(.dark) div#commandPalette kbd {
            background-color: #f3f4f6 !important; /* gray-100 / light gray */
            color: #111827 !important; /* gray-900 / black */
        }

        /* Command Palette - Command items hover background - LIGHT MODE ONLY */
        html:not(.dark) div#commandPalette button.command-item:hover {
            background-color: #f3f4f6 !important; /* gray-100 / light gray */
        }

        /* Command Palette - Command items selected/first background - LIGHT MODE ONLY */
        html:not(.dark) div#commandPalette button.command-item.bg-gray-100 {
            background-color: #f3f4f6 !important; /* gray-100 / light gray */
        }

        /* Command Palette - Command item text - LIGHT MODE ONLY */
        html:not(.dark) div#commandPalette button.command-item span {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Command Palette - Search icon - LIGHT MODE ONLY */
        html:not(.dark) div#commandPalette svg.text-gray-400 {
            color: #9ca3af !important; /* gray-400 */
        }

        /* ============================================ */
        /* FOOTER SECTION - LIGHT MODE FIX */
        /* ============================================ */

        /* Footer - Background - LIGHT MODE ONLY */
        html:not(.dark) footer {
            background-color: #ffffff !important; /* white */
        }

        /* Footer - All headings (h3, h4) - LIGHT MODE ONLY */
        html:not(.dark) footer h3,
        html:not(.dark) footer h4 {
            color: #111827 !important; /* gray-900 / black */
        }

        /* Footer - All paragraphs and spans - LIGHT MODE ONLY */
        html:not(.dark) footer p,
        html:not(.dark) footer span {
            color: #4b5563 !important; /* gray-600 / medium gray */
        }

        /* Footer - Small text (copyright) - LIGHT MODE ONLY */
        html:not(.dark) footer p.text-sm {
            color: #6b7280 !important; /* gray-500 / light gray */
        }

        /* Footer - Link text - LIGHT MODE ONLY */
        html:not(.dark) footer a {
            color: #4b5563 !important; /* gray-600 / medium gray */
        }

        /* Footer - Link hover text - LIGHT MODE ONLY */
        html:not(.dark) footer a:hover {
            color: #2563eb !important; /* blue-600 */
        }

        /* Footer - Blue tagline text - LIGHT MODE ONLY */
        html:not(.dark) footer p.text-blue-600 {
            color: #2563eb !important; /* blue-600 */
        }

        /* Footer - Border lines - LIGHT MODE ONLY */
        html:not(.dark) footer .border-gray-200,
        html:not(.dark) footer .border-t {
            border-color: #e5e7eb !important; /* gray-200 / light gray */
        }

        /* ============================================ */
        /* MAIN TITLE - GRADIENT TEXT FIX */
        /* ============================================ */

        /* Main title and subtitle - Blue to Purple gradient - LIGHT MODE ONLY */
        html:not(.dark) h1,
        html:not(.dark) h2 {
            background: linear-gradient(to right, #2563eb, #7c3aed) !important;
            -webkit-background-clip: text !important;
            -webkit-text-fill-color: transparent !important;
            background-clip: text !important;
        }

        /* ============================================ */
        /* WORKSPACE BADGE STYLING */
        /* ============================================ */

        /* Workspace badges in history items */
        .workspace-badge {
            background: linear-gradient(to right, #2563eb, #7c3aed);
            color: #ffffff;
            font-weight: 500;
            border-radius: 0.375rem;
            display: inline-block;
            transition: all 0.2s ease;
        }

        .workspace-badge:hover {
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
        }

        /* Workspace badge - white background for light mode */
        html:not(.dark) .workspace-badge {
            background: #ffffff !important;
            color: #2563eb !important;
            border: 1px solid #e5e7eb !important;
        }

        html:not(.dark) .workspace-badge:hover {
            background: #f9fafb !important;
            border-color: #2563eb !important;
        }

        /* ============================================ */
        /* WORKSPACE UI - LIGHT MODE FIXES */
        /* ============================================ */

        /* Workspace Filter Dropdown */
        html:not(.dark) select#workspaceFilter {
            background-color: #ffffff !important;
            color: #111827 !important;
        }

        /* Workspace List Buttons */
        html:not(.dark) div#workspaceList button {
            background-color: #ffffff !important;
        }

        /* Workspace List Button Text */
        html:not(.dark) div#workspaceList button span {
            color: #111827 !important;
        }

        /* Active Workspace Button (blue border) - Keep blue text */
        html:not(.dark) div#workspaceList button.border-blue-600 span,
        html:not(.dark) div#workspaceList button.text-blue-600 span {
            color: #2563eb !important;
        }

        /* Rename/Delete Icon Buttons */
        html:not(.dark) div#workspaceList button svg {
            color: currentColor !important;
        }

        /* ============================================ */
        /* ADVANCED FILTERS MODAL - LIGHT MODE FIXES */
        /* ============================================ */

        /* Modal container background - target by classes */
        html:not(.dark) .rounded-xl.shadow-2xl.max-w-md {
            background-color: #ffffff !important;
        }

        /* Filter select dropdowns */
        html:not(.dark) select#filterTheme,
        html:not(.dark) select#filterDate {
            background-color: #ffffff !important;
            color: #111827 !important;
        }

        /* All labels in modals with specific classes */
        html:not(.dark) label.block.text-sm.font-medium {
            color: #111827 !important;
        }

        /* Checkbox label span */
        html:not(.dark) label.flex.items-center span {
            color: #111827 !important;
        }

        /* Cancel button in modal */
        html:not(.dark) button.bg-gray-200 {
            background-color: #e5e7eb !important;
            color: #111827 !important;
        }

        /* Option elements in filter selects */
        html:not(.dark) select#filterTheme option,
        html:not(.dark) select#filterDate option {
            background-color: #ffffff !important;
            color: #111827 !important;
        }

        /* Modal heading/title */
        html:not(.dark) .rounded-xl.shadow-2xl h3 {
            color: #111827 !important;
        }

        /* ============================================ */
        /* SIDEBAR BUTTON TEXT COLOR FIX */
        /* Ultra-specific selectors to override Tailwind */
        /* ============================================ */

        /* Light mode - Black text for sidebar buttons */
        aside#sidebar button[onclick="toggleWorkspaceDropdown()"],
        aside#sidebar button[onclick="quickGenerate()"],
        aside#sidebar button[onclick="openTemplates()"],
        aside#sidebar button[onclick="openPresets()"],
        aside#sidebar button[onclick="selectAllItems()"],
        aside#sidebar button[onclick="deselectAllItems()"],
        aside#sidebar button[onclick="openAdvancedFilters()"] {
            color: #000000 !important;
        }

        /* Light mode - Black color for sidebar button SVG icons */
        aside#sidebar button[onclick="toggleWorkspaceDropdown()"] svg,
        aside#sidebar button[onclick="quickGenerate()"] svg,
        aside#sidebar button[onclick="openTemplates()"] svg,
        aside#sidebar button[onclick="openPresets()"] svg {
            color: #000000 !important;
        }

        /* Dark mode - White text for sidebar buttons */
        .dark aside#sidebar button[onclick="toggleWorkspaceDropdown()"],
        .dark aside#sidebar button[onclick="quickGenerate()"],
        .dark aside#sidebar button[onclick="openTemplates()"],
        .dark aside#sidebar button[onclick="openPresets()"],
        .dark aside#sidebar button[onclick="selectAllItems()"],
        .dark aside#sidebar button[onclick="deselectAllItems()"],
        .dark aside#sidebar button[onclick="openAdvancedFilters()"] {
            color: #ffffff !important;
        }

        /* Dark mode - White color for sidebar button SVG icons */
        .dark aside#sidebar button[onclick="toggleWorkspaceDropdown()"] svg,
        .dark aside#sidebar button[onclick="quickGenerate()"] svg,
        .dark aside#sidebar button[onclick="openTemplates()"] svg,
        .dark aside#sidebar button[onclick="openPresets()"] svg {
            color: #ffffff !important;
        }

        /* ============================================ */
        /* DELETE ALL HISTORY BUTTON - RED COLOR */
        /* ============================================ */

        /* Light mode - Red color for delete button and icon */
        aside#sidebar button[onclick="clearHistory()"] {
            color: #dc2626 !important; /* red-600 */
        }

        aside#sidebar button[onclick="clearHistory()"]:hover {
            color: #991b1b !important; /* red-800 */
        }

        /* Dark mode - Red color for delete button and icon */
        .dark aside#sidebar button[onclick="clearHistory()"] {
            color: #f87171 !important; /* red-400 */
        }

        .dark aside#sidebar button[onclick="clearHistory()"]:hover {
            color: #fca5a5 !important; /* red-300 */
        }

        /* ============================================ */
        /* SIDEBAR BUTTON HOVER EFFECTS */
        /* Purple border on hover, no background change */
        /* ============================================ */

        /* Light mode - Purple border on hover */
        aside#sidebar button[onclick="toggleWorkspaceDropdown()"]:hover,
        aside#sidebar button[onclick="quickGenerate()"]:hover,
        aside#sidebar button[onclick="openTemplates()"]:hover,
        aside#sidebar button[onclick="openPresets()"]:hover,
        aside#sidebar button[onclick="selectAllItems()"]:hover,
        aside#sidebar button[onclick="deselectAllItems()"]:hover,
        aside#sidebar button[onclick="openAdvancedFilters()"]:hover {
            border-color: #9333ea !important; /* purple-600 */
            background-color: transparent !important;
        }

        /* Dark mode - Lighter purple border on hover */
        .dark aside#sidebar button[onclick="toggleWorkspaceDropdown()"]:hover,
        .dark aside#sidebar button[onclick="quickGenerate()"]:hover,
        .dark aside#sidebar button[onclick="openTemplates()"]:hover,
        .dark aside#sidebar button[onclick="openPresets()"]:hover,
        .dark aside#sidebar button[onclick="selectAllItems()"]:hover,
        .dark aside#sidebar button[onclick="deselectAllItems()"]:hover,
        .dark aside#sidebar button[onclick="openAdvancedFilters()"]:hover {
            border-color: #a855f7 !important; /* purple-500 */
            background-color: transparent !important;
        }

        /* ============================================ */
        /* SIDEBAR KBD ELEMENT & INPUT FIELD FIX */
        /* Explicit background and text colors */
        /* ============================================ */

        /* Sidebar kbd element (⌘G) - Light mode */
        aside#sidebar button[onclick="quickGenerate()"] kbd {
            background-color: #F9FAFB !important; /* gray-50 */
            color: #000000 !important;
        }

        /* Sidebar kbd element (⌘G) - Dark mode */
        .dark aside#sidebar button[onclick="quickGenerate()"] kbd {
            background-color: #111827 !important; /* gray-900 */
            color: #ffffff !important;
        }

        /* Sidebar search input field - Light mode */
        aside#sidebar input#historySearch {
            color: #000000 !important;
            background-color: #F9FAFB !important; /* gray-50 */
        }

        /* Sidebar search input field - Dark mode */
        .dark aside#sidebar input#historySearch {
            color: #ffffff !important;
            background-color: #111827 !important; /* gray-900 */
        }

        /* Search icon in input field - Light mode */
        aside#sidebar .relative svg.absolute {
            color: #6B7280 !important; /* gray-500 - intentionally gray for subtle appearance */
        }

        /* Search icon in input field - Dark mode */
        .dark aside#sidebar .relative svg.absolute {
            color: #9CA3AF !important; /* gray-400 */
        }

        /* New Workspace button in dropdown - Light mode */
        aside#sidebar div#workspaceDropdown button {
            color: #2563eb !important; /* blue-600 - keep blue accent */
        }

        /* New Workspace button in dropdown - Dark mode */
        .dark aside#sidebar div#workspaceDropdown button {
            color: #60a5fa !important; /* blue-400 */
        }

        /* New Workspace button hover - Light mode */
        aside#sidebar div#workspaceDropdown button:hover {
            border-color: #9333ea !important; /* purple-600 */
            background-color: transparent !important;
        }

        /* New Workspace button hover - Dark mode */
        .dark aside#sidebar div#workspaceDropdown button:hover {
            border-color: #a855f7 !important; /* purple-500 */
            background-color: transparent !important;
        }

        /* ============================================ */
        /* WORKSPACE DROPDOWN BACKGROUND COLORS */
        /* Force white backgrounds with explicit hex colors */
        /* ============================================ */

        /* Workspace Dropdown Container - Light mode */
        aside#sidebar div#workspaceDropdown {
            background-color: #ffffff !important;
        }

        /* Workspace Dropdown Container - Dark mode */
        .dark aside#sidebar div#workspaceDropdown {
            background-color: #111827 !important; /* gray-900 exact hex */
        }

        /* Workspace list item buttons - Light mode */
        aside#sidebar div#workspaceList button {
            background-color: #ffffff !important;
        }

        /* Workspace list item buttons - Dark mode */
        .dark aside#sidebar div#workspaceList button {
            background-color: #111827 !important;
        }

        /* New Workspace button - Light mode */
        aside#sidebar div#workspaceDropdown button[onclick*="createWorkspace"] {
            background-color: #ffffff !important;
        }

        /* New Workspace button - Dark mode */
        .dark aside#sidebar div#workspaceDropdown button[onclick*="createWorkspace"] {
            background-color: #111827 !important;
        }

        /* ============================================ */
        /* SIDEBAR SOLID BACKGROUND OVERRIDE */
        /* Override glass effect for solid backgrounds */
        /* ============================================ */

        /* Sidebar - Solid white background in light mode */
        aside#sidebar.glass {
            background: #ffffff !important; /* Solid white, no transparency */
            backdrop-filter: none !important; /* Remove blur effect */
            -webkit-backdrop-filter: none !important;
        }

        /* Sidebar - Solid dark background in dark mode */
        .dark aside#sidebar.glass {
            background: #111827 !important; /* Solid gray-900, no transparency */
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* ============================================ */
        /* HEADER SOLID BACKGROUND OVERRIDE */
        /* Override glass effect for solid backgrounds */
        /* ============================================ */

        /* Header - Solid white background in light mode */
        header.fixed.glass {
            background: #ffffff !important; /* Solid white, no transparency */
            backdrop-filter: none !important; /* Remove blur effect */
            -webkit-backdrop-filter: none !important;
        }

        /* Header - Solid dark background in dark mode */
        .dark header.fixed.glass {
            background: #111827 !important; /* Solid gray-900, no transparency */
            backdrop-filter: none !important;
            -webkit-backdrop-filter: none !important;
        }

        /* ============================================ */
        /* BODY/MAIN CONTENT SOLID BACKGROUND OVERRIDE */
        /* Override for light and dark mode backgrounds */
        /* ============================================ */

        /* Body - Light gray background in light mode */
        body {
            background-color: #F9FAFB !important; /* gray-50 exact hex */
            color: #111827 !important; /* gray-900 exact hex - DARK TEXT */
        }

        /* Body - Dark background in dark mode */
        .dark body {
            background-color: #111827 !important; /* gray-900 exact hex */
            color: #F3F4F6 !important; /* gray-100 exact hex - LIGHT TEXT */
        }

        /* ============================================ */
        /* MAIN CONTENT HEADINGS TEXT COLOR FIX */
        /* Hero headings and all h1/h2 in main content */
        /* ============================================ */

        /* Light mode - Dark text for h1, h2, h3 headings */
        main.main-content h1,
        main.main-content h2,
        main.main-content h3 {
            color: #111827 !important; /* gray-900 exact hex - DARK TEXT */
        }

        /* Dark mode - White text for h1, h2, h3 headings */
        .dark main.main-content h1,
        .dark main.main-content h2,
        .dark main.main-content h3 {
            color: #ffffff !important; /* pure white */
        }

        /* Light mode - Paragraph with dark text (text-gray-900) - stat card numbers */
        main.main-content p[class*="text-gray-900"] {
            color: #111827 !important; /* gray-900 exact hex - DARK TEXT */
        }

        /* Dark mode - Paragraph with dark text (text-gray-900) */
        .dark main.main-content p[class*="text-gray-900"] {
            color: #ffffff !important; /* white */
        }

        /* Light mode - Paragraph with medium gray text (text-gray-600, text-gray-500) */
        main.main-content p[class*="text-gray-600"],
        main.main-content p[class*="text-gray-500"] {
            color: #6B7280 !important; /* gray-500 exact hex - Medium gray */
        }

        /* Dark mode - Paragraph with medium gray text */
        .dark main.main-content p[class*="text-gray-600"],
        .dark main.main-content p[class*="text-gray-500"] {
            color: #9CA3AF !important; /* gray-400 exact hex - Light gray */
        }

        /* Light mode - Labels */
        main.main-content label {
            color: #111827 !important; /* gray-900 exact hex - DARK TEXT */
        }

        /* Dark mode - Labels */
        .dark main.main-content label {
            color: #E5E7EB !important; /* gray-200 exact hex - Light gray */
        }

        /* Light mode - Divs and spans with dark text (gray-900) */
        main.main-content div[class*="text-gray-900"],
        main.main-content span[class*="text-gray-900"] {
            color: #111827 !important; /* gray-900 exact hex - DARK TEXT */
        }

        /* Light mode - Divs and spans with medium gray text (gray-500) */
        main.main-content div[class*="text-gray-500"],
        main.main-content span[class*="text-gray-500"] {
            color: #6B7280 !important; /* gray-500 exact hex - Medium gray */
        }

        /* Dark mode - Divs and spans with text classes */
        .dark main.main-content div[class*="text-gray-900"],
        .dark main.main-content span[class*="text-gray-900"] {
            color: #F3F4F6 !important; /* gray-100 exact hex - Light gray */
        }

        .dark main.main-content div[class*="text-gray-500"],
        .dark main.main-content span[class*="text-gray-500"] {
            color: #9CA3AF !important; /* gray-400 exact hex - Light gray */
        }

        /* Light mode - Buttons with dark text (gray-900) */
        main.main-content button[class*="text-gray-900"] {
            color: #111827 !important; /* gray-900 exact hex - DARK TEXT */
        }

        /* Light mode - Buttons with medium gray text (gray-500) */
        main.main-content button[class*="text-gray-500"] {
            color: #6B7280 !important; /* gray-500 exact hex - Medium gray */
        }

        /* Dark mode - Buttons with text-gray-900 */
        .dark main.main-content button[class*="text-gray-900"] {
            color: #F3F4F6 !important; /* gray-100 exact hex - Light gray */
        }

        /* Dark mode - Buttons with text-gray-500 */
        .dark main.main-content button[class*="text-gray-500"] {
            color: #9CA3AF !important; /* gray-400 exact hex - Light gray */
        }

        /* ============================================ */
        /* MAIN CONTENT CARD/PANEL BACKGROUNDS FIX */
        /* All cards, panels, and containers with bg-white */
        /* ============================================ */

        /* Light mode - White backgrounds for all cards/panels */
        main.main-content div[class*="bg-white"] {
            background-color: #ffffff !important; /* Pure white */
        }

        /* Dark mode - Dark backgrounds for all cards/panels */
        .dark main.main-content div[class*="bg-white"] {
            background-color: #1F2937 !important; /* gray-800 exact hex */
        }

        /* ============================================ */
        /* SIDEBAR SECTION LABELS TEXT COLOR FIX */
        /* Section headings: Workspace, Quick Actions, Recent, Saved Presets */
        /* ============================================ */

        /* Light mode - Black text for section labels */
        aside#sidebar label.block.text-xs,
        aside#sidebar h3.text-xs {
            color: #000000 !important;
        }

        /* Dark mode - White text for section labels */
        .dark aside#sidebar label.block.text-xs,
        .dark aside#sidebar h3.text-xs {
            color: #ffffff !important;
        }

        /* ============================================ */
        /* DYNAMICALLY GENERATED HISTORY LIST ITEMS */
        /* Items created by JavaScript in updateHistoryList() */
        /* ============================================ */

        /* Drag handle - Light mode */
        aside#sidebar div#historyList .cursor-move {
            color: #000000 !important;
        }

        /* Drag handle - Dark mode */
        .dark aside#sidebar div#historyList .cursor-move {
            color: #ffffff !important;
        }

        /* History list buttons - Light mode text colors */
        aside#sidebar div#historyList button {
            color: #000000 !important;
        }

        /* History list buttons - Dark mode text colors */
        .dark aside#sidebar div#historyList button {
            color: #ffffff !important;
        }

        /* History list item container hover - Light mode */
        aside#sidebar div#historyList div.stagger-item:hover {
            border-color: #9333ea !important; /* purple-600 */
        }

        /* History list item container hover - Dark mode */
        .dark aside#sidebar div#historyList div.stagger-item:hover {
            border-color: #a855f7 !important; /* purple-500 */
        }

        /* History item text content - Light mode */
        aside#sidebar div#historyList .font-medium,
        aside#sidebar div#historyList .text-xs {
            color: #000000 !important;
        }

        /* History item text content - Dark mode */
        .dark aside#sidebar div#historyList .font-medium,
        .dark aside#sidebar div#historyList .text-xs {
            color: #ffffff !important;
        }

        /* Favorite button icon - Keep yellow when favorited */
        aside#sidebar div#historyList button svg.text-yellow-500 {
            color: #eab308 !important; /* yellow-500 */
        }

        /* Favorite button icon - Gray when not favorited (light mode) */
        aside#sidebar div#historyList button svg.text-gray-400 {
            color: #9CA3AF !important; /* gray-400 */
        }

        /* Delete button - Keep red color */
        aside#sidebar div#historyList button.text-red-500 {
            color: #ef4444 !important; /* red-500 */
        }

        .dark aside#sidebar div#historyList button.text-red-500 {
            color: #ef4444 !important; /* red-500 - same in dark */
        }

        /* Comparison button - Keep blue color */
        aside#sidebar div#historyList button.text-blue-500 {
            color: #3b82f6 !important; /* blue-500 */
        }

        .dark aside#sidebar div#historyList button.text-blue-500 {
            color: #3b82f6 !important; /* blue-500 - same in dark */
        }

        /* Context menu buttons - Light mode */
        .context-menu button {
            color: #000000 !important;
        }

        /* Context menu buttons - Dark mode */
        .dark .context-menu button {
            color: #ffffff !important;
        }

        /* Context menu delete button - Keep red */
        .context-menu button.text-red-600 {
            color: #dc2626 !important; /* red-600 */
        }

        .dark .context-menu button.text-red-400 {
            color: #f87171 !important; /* red-400 */
        }

        /* Context menu button hover */
        .context-menu button:hover {
            border-color: #9333ea !important; /* purple-600 */
            background-color: transparent !important;
        }

        .dark .context-menu button:hover {
            border-color: #a855f7 !important; /* purple-500 */
            background-color: transparent !important;
        }

        /* History text overflow fix - Allow flex button to shrink properly */
        aside#sidebar div#historyList button.flex-1 {
            min-width: 0 !important;
            overflow: hidden !important;
        }

        /* History text - Enforce 2-line truncation */
        aside#sidebar div#historyList button div.line-clamp-2 {
            display: -webkit-box !important;
            -webkit-line-clamp: 2 !important;
            -webkit-box-orient: vertical !important;
            overflow: hidden !important;
            text-overflow: ellipsis !important;
            word-break: break-word !important;
        }

        /* ============================================ */
        /* SAVED PRESETS - Light/Dark Mode Fixes */
        /* ============================================ */

        /* Preset item container - Light mode border */
        aside#sidebar div#presetsList > div.flex.items-center {
            border-color: #d1d5db !important; /* gray-300 */
        }

        /* Preset item container - Dark mode border */
        .dark aside#sidebar div#presetsList > div.flex.items-center {
            border-color: #4b5563 !important; /* gray-600 */
        }

        /* Preset item container hover - Light mode */
        aside#sidebar div#presetsList > div.flex.items-center:hover {
            border-color: #9333ea !important; /* purple-600 */
        }

        /* Preset item container hover - Dark mode */
        .dark aside#sidebar div#presetsList > div.flex.items-center:hover {
            border-color: #a855f7 !important; /* purple-500 */
        }

        /* Preset text colors - Light mode */
        aside#sidebar div#presetsList button div {
            color: #000000 !important;
        }

        /* Preset text colors - Dark mode */
        .dark aside#sidebar div#presetsList button div {
            color: #ffffff !important;
        }

        /* Preset buttons - Light mode borders */
        aside#sidebar div#presetsList button.border {
            border-color: #d1d5db !important; /* gray-300 */
        }

        /* Preset buttons - Dark mode borders */
        .dark aside#sidebar div#presetsList button.border {
            border-color: #4b5563 !important; /* gray-600 */
        }

        /* Export button - Preserve blue color */
        aside#sidebar div#presetsList button.text-blue-500 {
            color: #3b82f6 !important; /* blue-500 */
        }

        /* Delete button - Preserve red color */
        aside#sidebar div#presetsList button.text-red-500 {
            color: #ef4444 !important; /* red-500 */
        }