/* ============================================
   DARK MODE THEME
   ============================================ */

/* Dark Mode Variables */
:root[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-card: #1e293b;
    --bg-hover: #334155;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --text-muted: #64748b;

    /* Brand Colors (slightly adjusted for dark) */
    --color-primary: #818cf8;
    --color-secondary: #a78bfa;
    --color-accent: #38bdf8;

    /* Border Colors */
    --border-color: #334155;
    --border-hover: #475569;

    /* Shadow */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
}

/* Improved dark theme variables & accessible widget styles */
[data-theme="dark"] {
    --color-bg: #0B1220;                /* page background */
    --color-bg-secondary: #0f1724;      /* cards, panels */
    --color-bg-tertiary: #0b141f;       /* code block bg */
    --color-text-primary: #E6F0FF;      /* main body text */
    --color-text-secondary: #B8C7DB;    /* secondary text */
    --color-text-tertiary: #9aa9bf;     /* muted text */
    --color-border-primary: rgba(255,255,255,0.06);
    --color-primary: #7C9CFF;           /* accent / links */
    --color-primary-dark: #5A77E6;
    --color-accent: #9AE6B4;
    --color-error: #FFB4B4;
    --shadow-elev-1: 0 6px 18px rgba(2,6,23,0.6);
}

/* Ensure code and pre contrast well */
[data-theme="dark"] code,
[data-theme="dark"] pre {
    color: #E6F0FF;
    background: #071120;
    border-color: rgba(255,255,255,0.04);
}

/* Dark Mode Styles */
[data-theme="dark"] body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .navbar {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav-link:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

[data-theme="dark"] .content-card,
[data-theme="dark"] .feature-card,
[data-theme="dark"] .stat-card {
    background: var(--bg-card);
    border-color: var(--border-color);
    box-shadow: var(--shadow-md);
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--color-primary);
    background: var(--bg-secondary);
}

[data-theme="dark"] .btn,
[data-theme="dark"] button:not(.theme-toggle):not(.toast-close):not(.share-btn):not(.scroll-to-top) {
    background: var(--color-primary);
    color: white;
}

[data-theme="dark"] .btn:hover {
    background: var(--color-secondary);
}

[data-theme="dark"] a {
    color: var(--color-accent);
}

[data-theme="dark"] a:hover {
    color: var(--color-primary);
}

/* Dark Mode Hero Sections */
[data-theme="dark"] .hero-section {
    background: linear-gradient(-45deg, #1e293b, #334155, #0f172a, #1e293b);
}

/* Dark Mode Cards */
[data-theme="dark"] .blog-card-enhanced,
[data-theme="dark"] .feature-card-enhanced,
[data-theme="dark"] .stat-card-enhanced {
    background: var(--bg-card);
    border-color: var(--border-color);
}

[data-theme="dark"] .blog-card-enhanced:hover,
[data-theme="dark"] .feature-card-enhanced:hover,
[data-theme="dark"] .stat-card-enhanced:hover {
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* Dark Mode Footer */
[data-theme="dark"] footer {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

/* Dark Mode Form Elements */
[data-theme="dark"] .input-modern,
[data-theme="dark"] .select-modern {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Dark Mode Search/Filter */
[data-theme="dark"] .search-filter-modern {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
    z-index: 1000;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.theme-toggle:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}

.theme-toggle:active {
    transform: translateY(-3px) scale(1.05);
}

/* Theme Toggle Icon */
.theme-toggle-icon {
    position: relative;
    width: 24px;
    height: 24px;
    transition: transform 0.5s ease;
}

.theme-toggle-light {
    display: block;
}

.theme-toggle-dark {
    display: none;
}

[data-theme="dark"] .theme-toggle-light {
    display: none;
}

[data-theme="dark"] .theme-toggle-dark {
    display: block;
}

/* Theme Toggle Animation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.theme-toggle.changing .theme-toggle-icon {
    animation: rotate 0.5s ease;
}

/* Theme Transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

* {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Prevent transition on page load */
.no-transition * {
    transition: none !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .theme-toggle {
        width: 50px;
        height: 50px;
        bottom: 90px;
        left: 20px;
        font-size: 1.3rem;
    }
}

/* Dark Mode Specific Component Adjustments */

/* Toast in Dark Mode */
[data-theme="dark"] .toast {
    background: var(--bg-card);
    border-left-width: 4px;
}

[data-theme="dark"] .toast-title {
    color: var(--text-primary);
}

[data-theme="dark"] .toast-message {
    color: var(--text-secondary);
}

/* Skeleton in Dark Mode */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

/* Reading Progress in Dark Mode */
[data-theme="dark"] .reading-progress {
    background: rgba(255, 255, 255, 0.1);
}

/* Share Buttons in Dark Mode */
[data-theme="dark"] .share-container {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Accessibility */
.theme-toggle:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Print */
@media print {
    .theme-toggle {
        display: none;
    }

    /* Force light mode for printing */
    :root {
        --bg-primary: #ffffff;
        --text-primary: #000000;
    }
}

/* Additional Dark Mode Refinements */
[data-theme="dark"] .hero-animated,
[data-theme="dark"] .hero-animated-about {
    background: linear-gradient(-45deg, #0f172a, #1e293b, #334155, #1e293b);
}

[data-theme="dark"] .cta-final-enhanced {
    background: linear-gradient(-45deg, #1e293b, #334155, #475569, #334155);
}

[data-theme="dark"] .breadcrumb-modern {
    background: var(--bg-secondary);
}

[data-theme="dark"] .pagination-btn-inactive {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--color-accent);
}

[data-theme="dark"] .filter-btn-modern {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
}

[data-theme="dark"] .empty-state-modern {
    background: var(--bg-secondary);
}

[data-theme="dark"] .blogger-cta-modern {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

[data-theme="dark"] .ad-space-modern {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] code {
    background: var(--bg-tertiary);
    color: var(--color-accent);
}

[data-theme="dark"] pre {
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

[data-theme="dark"] blockquote {
    background: var(--bg-secondary);
    border-left-color: var(--color-primary);
    color: var(--text-secondary);
}

[data-theme="dark"] table {
    border-color: var(--border-color);
}

[data-theme="dark"] th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

[data-theme="dark"] td {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

[data-theme="dark"] tr:hover {
    background: var(--bg-hover);
}

/* Theme toggle pill (compact, non-intrusive) */
.theme-toggle-pill {
    position: fixed;
    left: 1rem;
    bottom: 1.25rem;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    color: var(--color-text-primary);
    box-shadow: var(--shadow-elev-1);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.04);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    z-index: 9999;
    font-weight: 700;
    font-size: .9rem;
}

/* Reduced footprint on small screens (icon-only) */
@media (max-width: 640px) {
    .theme-toggle-pill { padding: .4rem; gap: .35rem; font-size: .82rem; left: .6rem; bottom: .9rem; }
    .theme-toggle-pill .pill-label { display: none; }
}

/* Hover/Focus expansion */
.theme-toggle-pill:hover,
.theme-toggle-pill:focus {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(2,6,23,0.65);
    outline: none;
}

.theme-toggle-pill:focus {
    border-color: var(--color-primary);
    box-shadow: 0 8px 28px rgba(92,112,255,0.18);
}

/* Icon styles inside pill */
.theme-toggle-pill .pill-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .4rem;
    background: rgba(255,255,255,0.02);
    color: var(--color-primary);
    font-size: 1rem;
}

/* subtle accessible label */
.theme-toggle-pill .pill-label {
    color: var(--color-text-primary);
    opacity: .95;
    transition: opacity .15s ease;
}

/* when no-transition class is present, avoid animations */
.no-transition *, .no-transition {
    transition: none !important;
}

/* ========================================
   GLOBAL DARK MODE OVERRIDES
   Fix hardcoded white backgrounds across ALL pages
   ======================================== */

/* Force all cards, containers, and content areas to use CSS variables */
[data-theme="dark"] .content-card,
[data-theme="dark"] .card,
[data-theme="dark"] .post-card,
[data-theme="dark"] .settings-card,
[data-theme="dark"] .admin-card,
[data-theme="dark"] .support-card,
[data-theme="dark"] .about-card {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-primary);
}

/* Headers and titles */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: var(--color-text-primary);
}

/* Paragraphs and general text */
[data-theme="dark"] p,
[data-theme="dark"] li,
[data-theme="dark"] span:not(.badge):not([class*="gradient"]) {
    color: var(--color-text-secondary);
}

/* All white background divs */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #FFF"],
[data-theme="dark"] div[style*="background:#FFF"] {
    background: var(--color-bg-secondary) !important;
}

/* Settings page specific */
[data-theme="dark"] .settings-section {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .settings-section h2,
[data-theme="dark"] .settings-section h3 {
    color: var(--color-text-primary);
}

[data-theme="dark"] .settings-section label {
    color: var(--color-text-secondary);
}

/* Blog list page specific */
[data-theme="dark"] .blog-card,
[data-theme="dark"] .blog-card-enhanced {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .blog-card-title,
[data-theme="dark"] .blog-card-title a {
    color: var(--color-text-primary);
}

[data-theme="dark"] .blog-card-meta,
[data-theme="dark"] .blog-card-excerpt,
[data-theme="dark"] .blog-card-stats {
    color: var(--color-text-secondary);
}

/* About page specific */
[data-theme="dark"] .about-hero,
[data-theme="dark"] .about-section,
[data-theme="dark"] .team-card,
[data-theme="dark"] .value-card {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .team-card h3,
[data-theme="dark"] .value-card h3 {
    color: var(--color-text-primary);
}

/* Support page specific */
[data-theme="dark"] .faq-item,
[data-theme="dark"] .support-section {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .faq-question {
    color: var(--color-text-primary);
}

[data-theme="dark"] .faq-answer {
    color: var(--color-text-secondary);
}

/* Admin page specific */
[data-theme="dark"] .admin-dashboard,
[data-theme="dark"] .admin-stat-card,
[data-theme="dark"] .admin-table-container {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .admin-stat-card h3 {
    color: var(--color-text-primary);
}

/* Social share buttons */
[data-theme="dark"] .share-btn {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
}

[data-theme="dark"] .share-btn:hover {
    background: var(--color-bg-hover);
}

/* Breadcrumb navigation */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb-modern {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .breadcrumb a {
    color: var(--color-text-secondary);
}

[data-theme="dark"] .breadcrumb a:hover {
    color: var(--color-primary);
}

/* Search and filter components */
[data-theme="dark"] .search-filter,
[data-theme="dark"] .search-filter-modern {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

/* Pagination */
[data-theme="dark"] .pagination-btn,
[data-theme="dark"] .pagination-btn-inactive {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
}

[data-theme="dark"] .pagination-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-primary);
}

/* Empty states */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .empty-state-modern {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-primary);
}

[data-theme="dark"] .empty-state h3 {
    color: var(--color-text-primary);
}

[data-theme="dark"] .empty-state p {
    color: var(--color-text-secondary);
}

/* Ads (for free users) */
[data-theme="dark"] .ad-space,
[data-theme="dark"] .ad-space-modern {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
}

/* Category and filter pills */
[data-theme="dark"] .filter-pill {
    background: var(--color-bg-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-secondary);
}

/* Ensure gradients remain vibrant in dark mode */
[data-theme="dark"] [style*="linear-gradient"] {
    /* Gradients should keep their original colors for visual impact */
}

/* Reading progress bar */
[data-theme="dark"] .reading-progress-container {
    background: var(--color-bg-tertiary);
}

/* Skeleton loaders */
[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--color-bg-tertiary) 25%, var(--color-bg-hover) 50%, var(--color-bg-tertiary) 75%);
    background-size: 200% 100%;
}

/* ========================================
   AGGRESSIVE INLINE STYLE OVERRIDES
   Override hardcoded inline white backgrounds
   ======================================== */

/* Target all elements with white/light inline backgrounds */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #FFF"],
[data-theme="dark"] div[style*="background:#FFF"],
[data-theme="dark"] div[style*="background: #ffffff"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] section[style*="background: white"],
[data-theme="dark"] section[style*="background: #fff"],
[data-theme="dark"] article[style*="background: white"],
[data-theme="dark"] aside[style*="background: white"] {
    background: var(--color-bg-secondary) !important;
}

/* Override light gray backgrounds */
[data-theme="dark"] [style*="background: #f8f9fa"],
[data-theme="dark"] [style*="background:#f8f9fa"],
[data-theme="dark"] [style*="background: #f0f4f8"],
[data-theme="dark"] [style*="background:#f0f4f8"],
[data-theme="dark"] [style*="background: #f3f4f6"],
[data-theme="dark"] [style*="background:#f3f4f6"],
[data-theme="dark"] [style*="background: #e5e7eb"],
[data-theme="dark"] [style*="background:#e5e7eb"],
[data-theme="dark"] [style*="background: #f8fafc"],
[data-theme="dark"] [style*="background:#f8fafc"],
[data-theme="dark"] [style*="background: #f9fafb"],
[data-theme="dark"] [style*="background:#f9fafb"],
[data-theme="dark"] [style*="background-color: #f8fafc"],
[data-theme="dark"] [style*="background-color:#f8fafc"],
[data-theme="dark"] [style*="background-color: #f9fafb"],
[data-theme="dark"] [style*="background-color:#f9fafb"] {
    background-color: var(--color-bg-tertiary) !important;
}

/* Text color overrides for common dark colors */
[data-theme="dark"] [style*="color: #1e293b"],
[data-theme="dark"] [style*="color:#1e293b"],
[data-theme="dark"] [style*="color: #334155"],
[data-theme="dark"] [style*="color:#334155"],
[data-theme="dark"] [style*="color: #0D1B2A"],
[data-theme="dark"] [style*="color:#0D1B2A"],
[data-theme="dark"] [style*="color: #1a202c"],
[data-theme="dark"] [style*="color:#1a202c"],
[data-theme="dark"] [style*="color: #000"],
[data-theme="dark"] [style*="color:#000"],
[data-theme="dark"] [style*="color: black"],
[data-theme="dark"] [style*="color:black"],
[data-theme="dark"] h1[style*="color"],
[data-theme="dark"] h2[style*="color"],
[data-theme="dark"] h3[style*="color"],
[data-theme="dark"] label[style*="color: #334155"],
[data-theme="dark"] label[style*="color:#334155"] {
    color: var(--color-text-primary) !important;
}

[data-theme="dark"] [style*="color: #64748b"],
[data-theme="dark"] [style*="color:#64748b"],
[data-theme="dark"] [style*="color: #94a3b8"],
[data-theme="dark"] [style*="color:#94a3b8"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#666"] {
    color: var(--color-text-secondary) !important;
}

/* Border overrides */
[data-theme="dark"] [style*="border: 1px solid #e"],
[data-theme="dark"] [style*="border: 2px solid #e"],
[data-theme="dark"] [style*="border: 3px solid white"],
[data-theme="dark"] [style*="border:3px solid white"],
[data-theme="dark"] [style*="border-color: #e"],
[data-theme="dark"] [style*="border-color:#e"],
[data-theme="dark"] [style*="border-left: 4px solid #f59e0b"],
[data-theme="dark"] [style*="border-left:4px solid #f59e0b"] {
    border-color: var(--color-border-primary) !important;
}

/* Specific warning/info box borders */
[data-theme="dark"] [style*="background: #fef3c7"][style*="border-left: 4px solid #f59e0b"] {
    background: rgba(245, 158, 11, 0.2) !important;
    border-left-color: #f59e0b !important;
}

[data-theme="dark"] [style*="background: #fef3c7"] {
    background: rgba(245, 158, 11, 0.2) !important;
}

/* Home page specific card overrides */
[data-theme="dark"] .pricing-grid > div[style],
[data-theme="dark"] .features-modern > div[style],
[data-theme="dark"] .testimonials-grid > div[style],
[data-theme="dark"] .stats-grid-modern > div[style] {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* List items with inline color styles */
[data-theme="dark"] li[style*="color: #334155"],
[data-theme="dark"] li[style*="color:#334155"] {
    color: var(--color-text-primary) !important;
}

/* Paragraph text overrides */
[data-theme="dark"] p[style*="color: #334155"],
[data-theme="dark"] p[style*="color:#334155"],
[data-theme="dark"] p[style*="color: #64748b"],
[data-theme="dark"] p[style*="color:#64748b"] {
    color: var(--color-text-secondary) !important;
}

/* Light gray text colors (poor contrast) - override for dark mode */
[data-theme="dark"] [style*="color: #888"],
[data-theme="dark"] [style*="color:#888"],
[data-theme="dark"] [style*="color: #666"],
[data-theme="dark"] [style*="color:#666"],
[data-theme="dark"] [style*="color: #999"],
[data-theme="dark"] [style*="color:#999"] {
    color: var(--color-text-secondary) !important;
}

/* Div elements with light gray text */
[data-theme="dark"] div[style*="color: #888"],
[data-theme="dark"] div[style*="color: #666"],
[data-theme="dark"] td[style*="color: #666"],
[data-theme="dark"] span[style*="color: #999"] {
    color: var(--color-text-secondary) !important;
}

/* Input fields with inline background */
[data-theme="dark"] input[style*="background-color: #f8fafc"],
[data-theme="dark"] input[style*="background-color:#f8fafc"],
[data-theme="dark"] textarea[style*="background-color: #f8fafc"],
[data-theme="dark"] textarea[style*="background-color:#f8fafc"] {
    background-color: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
}

/* Anchor/link text color overrides */
[data-theme="dark"] a[style*="color: white"],
[data-theme="dark"] a[style*="color:white"],
[data-theme="dark"] a[style*="color: #fff"],
[data-theme="dark"] a[style*="color:#fff"] {
    /* Keep white text for links on colored backgrounds */
    color: white !important;
}

/* ========================================
   SECTION BACKGROUND GRADIENT OVERRIDES
   Fix light gradient backgrounds on sections
   ======================================== */

/* Light gradient backgrounds (pricing, how it works sections) */
[data-theme="dark"] .section-modern[style*="background: linear-gradient"][style*="#f8fafc"],
[data-theme="dark"] .section-modern[style*="background: linear-gradient"][style*="#f0f4f8"],
[data-theme="dark"] div[style*="background: linear-gradient(135deg, #f8fafc"],
[data-theme="dark"] div[style*="background: linear-gradient(135deg, #f0f4f8"] {
    background: linear-gradient(135deg, var(--color-bg-tertiary) 0%, var(--color-bg-secondary) 100%) !important;
}

/* Recommended posts card backgrounds */
[data-theme="dark"] div[style*="background: white"][style*="border-radius: 16px"][style*="padding: 1.5rem"] {
    background: var(--color-bg-secondary) !important;
}

/* Heading colors in inline styles */
[data-theme="dark"] h3[style*="color: #1e293b"],
[data-theme="dark"] h2[style*="color: #0D1B2A"] {
    color: var(--color-text-primary) !important;
}

/* ========================================
   PAGE-SPECIFIC FIXES
   ======================================== */

/* Blog View Page - Edit/Delete button container */
[data-theme="dark"] div[style*="background: rgba(102, 126, 234, 0.1)"] {
    background: rgba(102, 126, 234, 0.2) !important;
}

/* Blog View Page - Related posts cards */
[data-theme="dark"] div[style*="background: white"][style*="border: 2px solid #e2e8f0"] {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Blog List Page - Stats container */
[data-theme="dark"] .blog-card-stats {
    background: rgba(102, 126, 234, 0.1) !important;
    border-color: var(--color-border-primary) !important;
    color: var(--color-text-secondary) !important;
}

/* Blog List Page - Excerpt text */
[data-theme="dark"] .blog-card-excerpt {
    color: var(--color-text-secondary);
}

/* Settings Page - White button backgrounds */
[data-theme="dark"] a[style*="background: white"][style*="color: #667eea"],
[data-theme="dark"] button[style*="background: white"] {
    background: var(--color-bg-tertiary) !important;
    border: 1px solid var(--color-border-primary) !important;
}

/* Link hover states - preserve white text on colored backgrounds */
[data-theme="dark"] a[style*="color: #0D1B2A"] {
    color: var(--color-text-primary) !important;
}

/* ============================================
   BLOG VIEW PAGE - Text Contrast & Dark Mode
   ============================================ */

/* Blog content - proper text contrast for both light and dark mode */
.blog-content {
    color: #1e293b; /* Dark gray for light mode - much better contrast than #b9b2b2 */
}

[data-theme="dark"] .blog-content {
    color: var(--color-text-primary);
}

/* Related posts title */
.related-posts-title {
    color: #0D1B2A; /* Dark color for light mode */
}

[data-theme="dark"] .related-posts-title {
    color: var(--color-text-primary);
}

/* Related post cards */
.related-post-card {
    background: white;
}

[data-theme="dark"] .related-post-card {
    background: var(--color-bg-secondary) !important;
    border-color: var(--color-border-primary) !important;
}

/* Blog View Page - Edit/Delete button container */
.blog-edit-delete-container {
    background: rgba(102, 126, 234, 0.1);
}

[data-theme="dark"] .blog-edit-delete-container {
    background: rgba(102, 126, 234, 0.2);
}

/* ============================================
   SETTINGS PAGE - Button Backgrounds
   ============================================ */

/* Settings upgrade button (on gradient background) */
.settings-upgrade-btn {
    background: white;
    color: #667eea;
}

[data-theme="dark"] .settings-upgrade-btn {
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

/* Settings support button */
.settings-support-btn {
    background: white;
    color: #667eea;
}

[data-theme="dark"] .settings-support-btn {
    background: var(--color-bg-tertiary) !important;
    color: var(--color-text-primary) !important;
    border: 2px solid var(--color-border-primary) !important;
}