/* Dark Mode Theme Variables */
[data-theme="dark"] {
  --primary-color: #60a5fa;
  --secondary-color: #94a3b8;
  --success-color: #34d399;
  --error-color: #f87171;
  --warning-color: #fbbf24;
  --background-color: #0f172a;
  --surface-color: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --border-color: #334155;
  --border-radius: 8px;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / .5), 0 1px 2px -1px rgb(0 0 0 / .5);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .4);
  --transition: all .2s ease-in-out;
  --card-bg: #1e293b;
  --input-bg: #334155;
  --hover-bg: #475569;
  --text-muted: #94a3b8;
  --border-muted: #475569;
}

/* Theme Toggle Button Styles */
.theme-toggle {
  background: var(--surface-color);
  border: 2px solid var(--border-color);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

.theme-toggle:hover {
  background: var(--hover-bg);
  border-color: var(--primary-color);
  transform: scale(1.05);
}

.theme-toggle:active {
  transform: scale(0.95);
}

.theme-icon {
  font-size: 1.2rem;
  transition: var(--transition);
}

/* Header Controls Layout */
.header-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Update header layout for better spacing */
.header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

/* Dark mode specific adjustments */
[data-theme="dark"] .theme-icon {
  transform: rotate(0deg);
}

[data-theme="light"] .theme-icon {
  transform: rotate(0deg);
}

/* Update icon for dark mode */
[data-theme="dark"] .theme-toggle .theme-icon::before {
  content: "☀️";
}

[data-theme="light"] .theme-toggle .theme-icon::before {
  content: "🌙";
}

/* Override the original emoji with pseudo-element */
.theme-toggle .theme-icon {
  color: transparent;
  position: relative;
}

.theme-toggle .theme-icon::before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--text-primary);
  font-size: 1.2rem;
}

/* Dark mode adjustments for better visibility */
[data-theme="dark"] .hero-section {
  background: linear-gradient(135deg, #0f172a, #1e293b);
}

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

[data-theme="dark"] .ad-container {
  background: var(--surface-color);
  border-radius: var(--border-radius);
  padding: 1rem;
}

[data-theme="dark"] .ad-placeholder {
  background: var(--input-bg);
  border-color: var(--primary-color);
  color: var(--primary-color);
}

/* Content sections styling for dark mode */
[data-theme="dark"] .intro-content,
[data-theme="dark"] .tutorial-section,
[data-theme="dark"] .seo-content,
[data-theme="dark"] .faq-section {
  background: var(--surface-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .intro-content h2,
[data-theme="dark"] .tutorial-section h2,
[data-theme="dark"] .tutorial-section h3,
[data-theme="dark"] .seo-content h2,
[data-theme="dark"] .seo-content h3,
[data-theme="dark"] .faq-section h2,
[data-theme="dark"] .faq-section h3 {
  color: var(--primary-color) !important;
}

[data-theme="dark"] .intro-content p,
[data-theme="dark"] .tutorial-section p,
[data-theme="dark"] .seo-content p,
[data-theme="dark"] .faq-section p {
  color: var(--text-secondary) !important;
}

/* Stats section colors */
[data-theme="dark"] .stats-section div {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color);
}

[data-theme="dark"] .stats-section h3,
[data-theme="dark"] .stats-section p {
  color: var(--text-primary) !important;
}

/* Info cards and content boxes */
[data-theme="dark"] .info-card,
[data-theme="dark"] .content-article div[style*="background"] {
  background: var(--input-bg) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .info-card h3,
[data-theme="dark"] .info-card h4 {
  color: var(--primary-color) !important;
}

[data-theme="dark"] .info-card p,
[data-theme="dark"] .content-article li {
  color: var(--text-secondary) !important;
}

/* Special background sections */
[data-theme="dark"] div[style*="background: #f8f9fa"],
[data-theme="dark"] div[style*="background: #e8f4fd"],
[data-theme="dark"] div[style*="background: #fff3cd"],
[data-theme="dark"] div[style*="background: #d1ecf1"],
[data-theme="dark"] div[style*="background: #d4edda"],
[data-theme="dark"] div[style*="background: #f0f7ff"],
[data-theme="dark"] div[style*="background: #fff5f5"],
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#f8f9fa"],
[data-theme="dark"] div[style*="background:#e8f4fd"],
[data-theme="dark"] div[style*="background:#fff3cd"],
[data-theme="dark"] div[style*="background:#d1ecf1"],
[data-theme="dark"] div[style*="background:#d4edda"],
[data-theme="dark"] div[style*="background:#f0f7ff"],
[data-theme="dark"] div[style*="background:#fff5f5"],
[data-theme="dark"] div[style*="background:#ffffff"],
[data-theme="dark"] div[style*="background:white"] {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* Target specific white backgrounds that cause text visibility issues */
[data-theme="dark"] .json-best-practices div[style*="background: white"],
[data-theme="dark"] .json-examples div[style*="background: white"],
[data-theme="dark"] .technical-info-section div[style*="background: white"],
[data-theme="dark"] .faq-section div[style*="background: white"],
[data-theme="dark"] div[style*="background: white; padding"],
[data-theme="dark"] div[style*="background:white"],
[data-theme="dark"] div[style*="background:#fff"] {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* List items and text content */
[data-theme="dark"] ul li,
[data-theme="dark"] ol li {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] strong {
  color: var(--text-primary) !important;
}

/* Gradient backgrounds for dark mode */
[data-theme="dark"] div[style*="linear-gradient"] {
  background: var(--surface-color) !important;
  border: 2px solid var(--primary-color) !important;
}

[data-theme="dark"] div[style*="linear-gradient"] h3,
[data-theme="dark"] div[style*="linear-gradient"] h4 {
  color: var(--primary-color) !important;
}

[data-theme="dark"] div[style*="linear-gradient"] p {
  color: var(--text-secondary) !important;
}

/* Input and form elements in dark mode */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--input-bg);
  border-color: var(--border-color);
  color: var(--text-primary);
}

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

/* Smooth transition for theme switching */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .header-controls {
    gap: 0.5rem;
  }
  
  .theme-toggle {
    width: 40px;
    height: 40px;
  }
  
  .theme-icon::before {
    font-size: 1rem;
  }
}

/* Animation for theme transition */
.theme-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ensure proper contrast in dark mode */
[data-theme="dark"] .copy-message {
  background: var(--success-color);
  color: white;
}

[data-theme="dark"] .error-message {
  background: var(--error-color);
  color: white;
}

/* Dark mode scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--surface-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Additional text color fixes for dark mode */
[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(--text-primary) !important;
}

[data-theme="dark"] p {
  color: var(--text-secondary) !important;
}

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

[data-theme="dark"] .tool-description {
  color: var(--text-secondary) !important;
}

/* Button text colors */
[data-theme="dark"] .btn {
  border-color: var(--border-color);
}

[data-theme="dark"] .btn-outline {
  background: transparent;
  color: var(--primary-color);
  border-color: var(--primary-color);
}

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

/* Footer adjustments */
[data-theme="dark"] .footer {
  background: var(--surface-color);
  border-top-color: var(--border-color);
  color: var(--text-secondary);
}

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

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

/* Breadcrumbs */
[data-theme="dark"] .breadcrumbs {
  color: var(--text-secondary);
}

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

/* Labels and form elements */
[data-theme="dark"] label {
  color: var(--text-primary) !important;
}

/* Ensure all inline styles are overridden */
[data-theme="dark"] div[style*="color: #666"],
[data-theme="dark"] p[style*="color: #666"],
[data-theme="dark"] h3[style*="color: #333"],
[data-theme="dark"] h4[style*="color: #333"] {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] div[style*="color: #333"],
[data-theme="dark"] p[style*="color: #333"] {
  color: var(--text-primary) !important;
}

/* Override specific inline text colors */
[data-theme="dark"] *[style*="color: #666"] {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] *[style*="color: #333"] {
  color: var(--text-primary) !important;
}

[data-theme="dark"] *[style*="color: #000"] {
  color: var(--text-primary) !important;
}

[data-theme="dark"] *[style*="color: black"] {
  color: var(--text-primary) !important;
}

[data-theme="dark"] *[style*="color: #212529"] {
  color: var(--text-primary) !important;
}

[data-theme="dark"] *[style*="color: #495057"] {
  color: var(--text-secondary) !important;
}

/* Force visibility for all text elements */
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] p,
[data-theme="dark"] li,
[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: inherit !important;
}

[data-theme="dark"] .content-article *,
[data-theme="dark"] .intro-content *,
[data-theme="dark"] .tutorial-section *,
[data-theme="dark"] .seo-content *,
[data-theme="dark"] .faq-section *,
[data-theme="dark"] .json-best-practices *,
[data-theme="dark"] .json-examples *,
[data-theme="dark"] .technical-info-section * {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .content-article h1,
[data-theme="dark"] .content-article h2,
[data-theme="dark"] .content-article h3,
[data-theme="dark"] .content-article h4,
[data-theme="dark"] .intro-content h1,
[data-theme="dark"] .intro-content h2,
[data-theme="dark"] .intro-content h3,
[data-theme="dark"] .tutorial-section h1,
[data-theme="dark"] .tutorial-section h2,
[data-theme="dark"] .tutorial-section h3,
[data-theme="dark"] .seo-content h1,
[data-theme="dark"] .seo-content h2,
[data-theme="dark"] .seo-content h3,
[data-theme="dark"] .faq-section h1,
[data-theme="dark"] .faq-section h2,
[data-theme="dark"] .faq-section h3,
[data-theme="dark"] .json-best-practices h1,
[data-theme="dark"] .json-best-practices h2,
[data-theme="dark"] .json-best-practices h3,
[data-theme="dark"] .json-examples h1,
[data-theme="dark"] .json-examples h2,
[data-theme="dark"] .json-examples h3,
[data-theme="dark"] .technical-info-section h1,
[data-theme="dark"] .technical-info-section h2,
[data-theme="dark"] .technical-info-section h3 {
  color: var(--primary-color) !important;
}

/* Specific overrides for pre and code elements */
[data-theme="dark"] pre,
[data-theme="dark"] code {
  background: var(--input-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Override any remaining text visibility issues */
[data-theme="dark"] .json-best-practices ul li,
[data-theme="dark"] .json-examples p,
[data-theme="dark"] .technical-info-section p,
[data-theme="dark"] .content-article ul li {
  color: var(--text-secondary) !important;
}

/* Ensure strong elements are visible */
[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: var(--text-primary) !important;
  font-weight: 600;
}

/* Make sure all gradient backgrounds get proper text colors */
[data-theme="dark"] div[style*="linear-gradient"] *,
[data-theme="dark"] div[style*="background: linear-gradient"] * {
  color: var(--text-primary) !important;
}

/* Fix any remaining invisible text */
[data-theme="dark"] * {
  color: inherit;
}

[data-theme="dark"] body,
[data-theme="dark"] body * {
  color: var(--text-secondary);
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, 
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6,
[data-theme="dark"] .tool-title,
[data-theme="dark"] .hero-title {
  color: var(--text-primary) !important;
}

/* Emergency override for any missed text */
[data-theme="dark"] .main *:not(button):not(input):not(select):not(textarea) {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .main h1, [data-theme="dark"] .main h2, [data-theme="dark"] .main h3,
[data-theme="dark"] .main h4, [data-theme="dark"] .main h5, [data-theme="dark"] .main h6 {
  color: var(--primary-color) !important;
}

/* Override ALL white and light backgrounds that might hide text */
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background:#fff"],
[data-theme="dark"] *[style*="background: white"],
[data-theme="dark"] *[style*="background:white"],
[data-theme="dark"] *[style*="background: #ffffff"],
[data-theme="dark"] *[style*="background:#ffffff"],
[data-theme="dark"] *[style*="background-color: white"],
[data-theme="dark"] *[style*="background-color:white"],
[data-theme="dark"] *[style*="background-color: #fff"],
[data-theme="dark"] *[style*="background-color:#fff"] {
  background: var(--surface-color) !important;
  background-color: var(--surface-color) !important;
}

/* Force all text in potentially problematic containers to be visible */
[data-theme="dark"] div[style*="background"] *,
[data-theme="dark"] .json-best-practices *,
[data-theme="dark"] .json-examples *,
[data-theme="dark"] .technical-info-section *,
[data-theme="dark"] .tutorial-section *,
[data-theme="dark"] .faq-section * {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] div[style*="background"] h1,
[data-theme="dark"] div[style*="background"] h2,
[data-theme="dark"] div[style*="background"] h3,
[data-theme="dark"] div[style*="background"] h4,
[data-theme="dark"] .json-best-practices h1,
[data-theme="dark"] .json-best-practices h2,
[data-theme="dark"] .json-best-practices h3,
[data-theme="dark"] .json-examples h1,
[data-theme="dark"] .json-examples h2,
[data-theme="dark"] .json-examples h3,
[data-theme="dark"] .technical-info-section h1,
[data-theme="dark"] .technical-info-section h2,
[data-theme="dark"] .technical-info-section h3 {
  color: var(--primary-color) !important;
}

/* FINAL AGGRESSIVE OVERRIDE FOR WHITE BACKGROUNDS */
[data-theme="dark"] div[style*="background"],
[data-theme="dark"] .format-options,
[data-theme="dark"] .json-input-section,
[data-theme="dark"] .json-output-section,
[data-theme="dark"] .json-best-practices,
[data-theme="dark"] .json-examples,
[data-theme="dark"] .technical-info-section,
[data-theme="dark"] .tool-container,
[data-theme="dark"] .option-group,
[data-theme="dark"] .input-container,
[data-theme="dark"] .output-container {
  background: var(--surface-color) !important;
  background-color: var(--surface-color) !important;
}

/* Force specific problematic areas */
[data-theme="dark"] div[style*="padding: 25px"],
[data-theme="dark"] div[style*="padding: 30px"],
[data-theme="dark"] div[style*="padding: 20px"] {
  background: var(--surface-color) !important;
  color: var(--text-secondary) !important;
}

/* Make all text visible regardless of container */
[data-theme="dark"] .format-options *,
[data-theme="dark"] .json-input-section *,
[data-theme="dark"] .json-output-section *,
[data-theme="dark"] .option-group *,
[data-theme="dark"] .input-container *,
[data-theme="dark"] .output-container * {
  color: var(--text-secondary) !important;
}

/* Override specific white box-shadow and borders */
[data-theme="dark"] div[style*="box-shadow"] {
  box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
  background: var(--surface-color) !important;
}

/* Ensure all labels and text are visible */
[data-theme="dark"] label,
[data-theme="dark"] .option-group label {
  color: var(--text-primary) !important;
}

/* ULTIMATE TEXT VISIBILITY OVERRIDE - SIMPLIFIED */
/* Only target specific problematic areas instead of everything */

/* Target specific white background containers */
[data-theme="dark"] div[style*="background: white"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] div[style*="background: #ffffff"] {
  background: var(--surface-color) !important;
}

/* Make text in white containers visible */
[data-theme="dark"] div[style*="background: white"] *,
[data-theme="dark"] div[style*="background:#fff"] *,
[data-theme="dark"] div[style*="background: #ffffff"] * {
  color: var(--text-secondary) !important;
}

/* Headers should be prominent */
[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(--text-primary) !important;
}

/* Force visibility for any missed white containers */
[data-theme="dark"] div[style*="background: white"] *,
[data-theme="dark"] div[style*="background:#fff"] *,
[data-theme="dark"] div[style*="background: #ffffff"] *,
[data-theme="dark"] .intro-content *,
[data-theme="dark"] .tutorial-section *,
[data-theme="dark"] .faq-section *,
[data-theme="dark"] .json-best-practices *,
[data-theme="dark"] .json-examples *,
[data-theme="dark"] .technical-info-section *,
[data-theme="dark"] .content-article * {
  color: var(--text-secondary) !important;
}

/* Headers in white containers */
[data-theme="dark"] div[style*="background: white"] h1,
[data-theme="dark"] div[style*="background: white"] h2,
[data-theme="dark"] div[style*="background: white"] h3,
[data-theme="dark"] div[style*="background:#fff"] h1,
[data-theme="dark"] div[style*="background:#fff"] h2,
[data-theme="dark"] div[style*="background:#fff"] h3,
[data-theme="dark"] .intro-content h1,
[data-theme="dark"] .intro-content h2,
[data-theme="dark"] .intro-content h3,
[data-theme="dark"] .tutorial-section h1,
[data-theme="dark"] .tutorial-section h2,
[data-theme="dark"] .tutorial-section h3,
[data-theme="dark"] .faq-section h1,
[data-theme="dark"] .faq-section h2,
[data-theme="dark"] .faq-section h3 {
  color: var(--primary-color) !important;
}

/* Remove any potentially invisible text styles */
[data-theme="dark"] span[style*="color"],
[data-theme="dark"] p[style*="color"],
[data-theme="dark"] div[style*="color"] {
  color: var(--text-secondary) !important;
}

/* SELECTIVE BACKGROUND OVERRIDE - NOT ALL DIVS */
/* Only override specific containers that need dark backgrounds */
[data-theme="dark"] .tool-container,
[data-theme="dark"] .content-section,
[data-theme="dark"] .info-section {
  background: var(--surface-color) !important;
}

/* Keep hero section gradient */
[data-theme="dark"] .hero-section {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

/* Keep main background dark */
[data-theme="dark"] body,
[data-theme="dark"] html {
  background: var(--background-color) !important;
}

/* CRITICAL: Override any light gray or white backgrounds */
[data-theme="dark"] *[style*="background: #f8f9fa"],
[data-theme="dark"] *[style*="background:#f8f9fa"],
[data-theme="dark"] *[style*="background: #e9ecef"],
[data-theme="dark"] *[style*="background:#e9ecef"],
[data-theme="dark"] *[style*="background: #dee2e6"],
[data-theme="dark"] *[style*="background:#dee2e6"],
[data-theme="dark"] *[style*="background: #ced4da"],
[data-theme="dark"] *[style*="background:#ced4da"],
[data-theme="dark"] *[style*="background: #adb5bd"],
[data-theme="dark"] *[style*="background:#adb5bd"],
[data-theme="dark"] *[style*="background: #e2e3e5"],
[data-theme="dark"] *[style*="background:#e2e3e5"] {
  background: var(--surface-color) !important;
  background-color: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* Force all text in gray/white containers to be visible */
[data-theme="dark"] *[style*="background: #f8f9fa"] *,
[data-theme="dark"] *[style*="background:#f8f9fa"] *,
[data-theme="dark"] *[style*="background: #e9ecef"] *,
[data-theme="dark"] *[style*="background:#e9ecef"] *,
[data-theme="dark"] *[style*="background: #dee2e6"] *,
[data-theme="dark"] *[style*="background:#dee2e6"] *,
[data-theme="dark"] *[style*="background: #ced4da"] *,
[data-theme="dark"] *[style*="background:#ced4da"] *,
[data-theme="dark"] *[style*="background: #adb5bd"] *,
[data-theme="dark"] *[style*="background:#adb5bd"] *,
[data-theme="dark"] *[style*="background: #e2e3e5"] *,
[data-theme="dark"] *[style*="background:#e2e3e5"] * {
  color: var(--text-secondary) !important;
}

/* Make strong elements in gray containers prominent */
[data-theme="dark"] *[style*="background: #e2e3e5"] strong,
[data-theme="dark"] *[style*="background:#e2e3e5"] strong {
  color: var(--primary-color) !important;
  font-weight: bold !important;
}

/* Ensure ALL text elements have proper color */
[data-theme="dark"] span,
[data-theme="dark"] p,
[data-theme="dark"] div,
[data-theme="dark"] text {
  color: var(--text-secondary) !important;
}

/* SUPER AGGRESSIVE BACKGROUND AND TEXT OVERRIDE - REMOVED FOR STABILITY */
/* Commenting out overly aggressive rules that break layout */
/*
[data-theme="dark"] *,
[data-theme="dark"] *::before,
[data-theme="dark"] *::after {
  background: var(--surface-color) !important;
  color: var(--text-secondary) !important;
}
*/

/* Keep specific elements with their intended backgrounds */
[data-theme="dark"] body,
[data-theme="dark"] html {
  background: var(--background-color) !important;
}

[data-theme="dark"] .hero-section {
  background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

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

/* Restore proper card backgrounds */
[data-theme="dark"] .tool-card {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
}

/* Make sure headers are visible */
[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(--text-primary) !important;
  background: transparent !important;
}

/* Special styling for main title in dark mode */
[data-theme="dark"] .hero-title,
[data-theme="dark"] .main-title,
[data-theme="dark"] h1.hero-title {
  color: #fbbf24 !important; /* لون ذهبي مميز */
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3) !important;
  background: transparent !important;
}

/* Specific styling for "Useful Tools Collection" title */
[data-theme="dark"] .hero-section h1,
[data-theme="dark"] .hero-section .hero-title,
[data-theme="dark"] .hero-content h1,
[data-theme="dark"] .main-hero h1 {
  color: #34d399 !important; /* لون أخضر فيروزي جميل */
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.4) !important;
  background: transparent !important;
  font-weight: bold !important;
}

/* Override any conflicting rules for hero section titles */
[data-theme="dark"] .hero-section h1 {
  color: #34d399 !important;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.4) !important;
}

/* Alternative title colors for variety */
[data-theme="dark"] .page-title {
  color: #34d399 !important; /* لون أخضر فاتح */
  background: transparent !important;
}

[data-theme="dark"] .section-title {
  color: #60a5fa !important; /* لون أزرق فاتح */
  background: transparent !important;
}

/* Remove any box shadows that might be white */
[data-theme="dark"] * {
  box-shadow: none !important;
}

/* FINAL OVERRIDE: Force hero section title color */
[data-theme="dark"] .hero-section h1,
[data-theme="dark"] .hero-section .hero-title {
  color: #34d399 !important;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.4) !important;
  background: transparent !important;
  font-weight: bold !important;
}

/* ULTIMATE OVERRIDE FOR HERO TITLE H2 */
[data-theme="dark"] .hero-title,
[data-theme="dark"] h2.hero-title,
[data-theme="dark"] .hero-section h2 {
  color: #34d399 !important;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.4) !important;
  background: transparent !important;
  font-weight: bold !important;
}

/* FINAL NUCLEAR OPTION - OVERRIDE EVERYTHING FOR HERO TITLE */
[data-theme="dark"] .hero-title {
  color: #34d399 !important;
  text-shadow: 0 0 15px rgba(52, 211, 153, 0.4) !important;
  visibility: visible !important;
  display: block !important;
  white-space: normal !important;
  text-align: center !important;
  direction: ltr !important;
}

/* Ensure hero title text is fully visible */
[data-theme="dark"] .hero-title::before,
[data-theme="dark"] .hero-title::after {
  display: none !important;
}

/* Special fixes for feature lists and info boxes */
[data-theme="dark"] ul[style*="background: #f0f7ff"],
[data-theme="dark"] div[style*="background: #f0f7ff"],
[data-theme="dark"] ul[style*="background:#f0f7ff"],
[data-theme="dark"] div[style*="background:#f0f7ff"],
[data-theme="dark"] ul[style*="background: #fff5f5"],
[data-theme="dark"] div[style*="background: #fff5f5"],
[data-theme="dark"] ul[style*="background:#fff5f5"],
[data-theme="dark"] div[style*="background:#fff5f5"] {
  background: var(--surface-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-secondary) !important;
}

/* Make all text in feature lists visible */
[data-theme="dark"] ul[style*="background: #f0f7ff"] li,
[data-theme="dark"] div[style*="background: #f0f7ff"] li,
[data-theme="dark"] ul[style*="background:#f0f7ff"] li,
[data-theme="dark"] div[style*="background:#f0f7ff"] li,
[data-theme="dark"] ul[style*="background: #fff5f5"] li,
[data-theme="dark"] div[style*="background: #fff5f5"] li,
[data-theme="dark"] ul[style*="background:#fff5f5"] li,
[data-theme="dark"] div[style*="background:#fff5f5"] li {
  color: var(--text-secondary) !important;
}

/* Make strong elements in feature lists prominent */
[data-theme="dark"] ul[style*="background: #f0f7ff"] strong,
[data-theme="dark"] div[style*="background: #f0f7ff"] strong,
[data-theme="dark"] ul[style*="background:#f0f7ff"] strong,
[data-theme="dark"] div[style*="background:#f0f7ff"] strong,
[data-theme="dark"] ul[style*="background: #fff5f5"] strong,
[data-theme="dark"] div[style*="background: #fff5f5"] strong,
[data-theme="dark"] ul[style*="background:#fff5f5"] strong,
[data-theme="dark"] div[style*="background:#fff5f5"] strong {
  color: var(--primary-color) !important;
  font-weight: bold !important;
}

/* Fix emojis and special characters visibility */
[data-theme="dark"] ul[style*="background"] li::before,
[data-theme="dark"] div[style*="background"] li::before {
  color: var(--text-secondary) !important;
}

/* Clean up - Remove overly aggressive universal selectors */
/* Specific text visibility fixes only where needed */
[data-theme="dark"] .content-with-white-bg {
  background: var(--surface-color) !important;
}

[data-theme="dark"] .content-with-white-bg * {
  color: var(--text-secondary) !important;
}

/* Enhanced borders and visibility for boxes in dark mode */
[data-theme="dark"] .tool-card {
  background: var(--surface-color) !important;
  border: 2px solid var(--primary-color) !important;
  box-shadow: 0 4px 12px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .tool-card:hover {
  border-color: #34d399 !important;
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.3) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] .info-card {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .upload-area {
  background: var(--surface-color) !important;
  border: 3px dashed var(--primary-color) !important;
  box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .upload-area:hover {
  border-color: #34d399 !important;
  background: rgba(52, 211, 153, 0.1) !important;
}

[data-theme="dark"] .tool-container {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .compression-settings,
[data-theme="dark"] .images-results {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  margin: 20px 0 !important;
}

/* Enhanced input and button styling */
[data-theme="dark"] input[type="range"] {
  background: var(--input-bg) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 20px !important;
}

[data-theme="dark"] select,
[data-theme="dark"] input[type="number"] {
  background: var(--input-bg) !important;
  border: 2px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
}

[data-theme="dark"] select:focus,
[data-theme="dark"] input[type="number"]:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .btn {
  border: 2px solid var(--primary-color) !important;
  box-shadow: 0 2px 8px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .btn:hover {
  border-color: #34d399 !important;
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3) !important;
}

/* Special styling for Color Picker tool */
[data-theme="dark"] .color-preview {
  border: 3px solid var(--border-color) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .color-palette-grid .color-swatch,
[data-theme="dark"] .color-history-grid .color-swatch {
  border: 2px solid var(--border-color) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .color-palette-grid .color-swatch:hover,
[data-theme="dark"] .color-history-grid .color-swatch:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 4px 16px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.1) !important;
}

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

[data-theme="dark"] .color-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

[data-theme="dark"] .color-picker-controls input[type="color"] {
  border: 3px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .manual-inputs input {
  background: var(--input-bg) !important;
  border: 2px solid var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .copy-btn {
  background: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: white !important;
}

[data-theme="dark"] .copy-btn:hover {
  background: #34d399 !important;
  border-color: #34d399 !important;
  box-shadow: 0 4px 12px rgba(52, 211, 153, 0.3) !important;
}

[data-theme="dark"] .palette-placeholder,
[data-theme="dark"] .history-placeholder {
  background: var(--surface-color) !important;
  border: 2px dashed var(--primary-color) !important;
  color: var(--text-primary) !important;
  padding: 20px !important;
  border-radius: 8px !important;
  text-align: center !important;
}

/* Enhanced styling for Color Picker main sections */
[data-theme="dark"] .color-picker-section {
  background: var(--surface-color) !important;
  border: 2px solid var(--primary-color) !important;
  border-radius: 15px !important;
  padding: 25px !important;
  margin: 20px 0 !important;
  box-shadow: 0 8px 25px rgba(96, 165, 250, 0.2) !important;
}

[data-theme="dark"] .color-picker-main {
  background: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

[data-theme="dark"] .color-display {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
}

[data-theme="dark"] .color-info {
  background: var(--background-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 15px !important;
}

[data-theme="dark"] .color-codes {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

[data-theme="dark"] .color-code-group {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

[data-theme="dark"] .color-picker-controls {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

[data-theme="dark"] .color-palette-section,
[data-theme="dark"] .color-history-section {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 15px !important;
  padding: 25px !important;
  margin: 30px 0 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .palette-header {
  background: var(--background-color) !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 8px !important;
  padding: 15px !important;
  margin-bottom: 20px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

[data-theme="dark"] .palette-controls {
  display: flex !important;
  gap: 10px !important;
}

/* Enhanced borders for color swatches */
[data-theme="dark"] .color-swatch {
  border: 3px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
}

[data-theme="dark"] .color-swatch:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 6px 20px rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.05) !important;
}

[data-theme="dark"] .color-swatch:active {
  transform: scale(0.95) !important;
}

/* Better contrast for RGB inputs */
[data-theme="dark"] .rgb-group {
  display: flex !important;
  gap: 10px !important;
}

[data-theme="dark"] .rgb-group input {
  background: var(--input-bg) !important;
  border: 2px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  text-align: center !important;
  font-weight: bold !important;
}

[data-theme="dark"] .rgb-group input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}

/* Make section titles more prominent */
[data-theme="dark"] .color-picker-section h3,
[data-theme="dark"] .color-palette-section h3,
[data-theme="dark"] .color-history-section h3 {
  color: var(--primary-color) !important;
  font-size: 1.5rem !important;
  font-weight: bold !important;
  margin-bottom: 15px !important;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.3) !important;
}

/* Enhance visibility of color swatches in palette */
[data-theme="dark"] .color-palette-grid,
[data-theme="dark"] .color-history-grid {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 15px !important;
}

/* Make sure color values are readable */
[data-theme="dark"] .color-code-group label {
  color: var(--text-primary) !important;
  font-weight: bold !important;
}

[data-theme="dark"] .color-display {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* Enhanced visual feedback for interactive elements */
[data-theme="dark"] .color-picker-section:hover {
  box-shadow: 0 12px 35px rgba(96, 165, 250, 0.3) !important;
  transform: translateY(-2px) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .color-palette-section:hover,
[data-theme="dark"] .color-history-section:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4) !important;
  border-color: var(--primary-color) !important;
  transition: all 0.3s ease !important;
}

/* Better contrast for the main color preview */
[data-theme="dark"] #color-preview {
  border: 4px solid var(--border-color) !important;
  border-radius: 15px !important;
  box-shadow: 
    0 0 0 2px var(--surface-color),
    0 8px 25px rgba(0, 0, 0, 0.6) !important;
  min-height: 120px !important;
  min-width: 120px !important;
  position: relative !important;
}

[data-theme="dark"] #color-preview:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 2px var(--primary-color),
    0 12px 35px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.02) !important;
  transition: all 0.3s ease !important;
}

/* Enhanced styling for manual color input */
[data-theme="dark"] #manual-hex {
  background: var(--input-bg) !important;
  border: 2px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  padding: 12px !important;
  border-radius: 8px !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-align: center !important;
}

[data-theme="dark"] #manual-hex:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
  background: rgba(96, 165, 250, 0.1) !important;
}

/* Color picker input styling */
[data-theme="dark"] #color-picker {
  border: 4px solid var(--border-color) !important;
  border-radius: 15px !important;
  width: 80px !important;
  height: 80px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] #color-picker:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 0 6px 20px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Input group styling */
[data-theme="dark"] .input-group {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  padding: 15px !important;
  margin: 10px 0 !important;
}

[data-theme="dark"] .rgb-inputs {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 10px !important;
  padding: 15px !important;
  margin: 10px 0 !important;
}

/* Labels styling */
[data-theme="dark"] .input-group label,
[data-theme="dark"] .rgb-inputs label {
  color: var(--primary-color) !important;
  font-weight: bold !important;
  font-size: 1.1rem !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Button hover effects */
[data-theme="dark"] .btn-primary:hover {
  background: #34d399 !important;
  border-color: #34d399 !important;
  box-shadow: 0 6px 20px rgba(52, 211, 153, 0.4) !important;
  transform: translateY(-2px) !important;
}

[data-theme="dark"] .btn-outline:hover {
  background: rgba(96, 165, 250, 0.1) !important;
  border-color: var(--primary-color) !important;
  color: var(--primary-color) !important;
  box-shadow: 0 4px 15px rgba(96, 165, 250, 0.3) !important;
}

/* Final touches for perfect visibility in dark mode */
[data-theme="dark"] .color-picker-section .tool-content {
  background: transparent !important;
}

[data-theme="dark"] .color-picker-main .color-display .color-info h3 {
  color: var(--primary-color) !important;
  font-size: 1.3rem !important;
  margin-bottom: 15px !important;
  text-align: center !important;
}

/* Enhanced text contrast for all color picker elements */
[data-theme="dark"] .color-picker-section *,
[data-theme="dark"] .color-palette-section *,
[data-theme="dark"] .color-history-section * {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .color-picker-section label,
[data-theme="dark"] .color-palette-section label,
[data-theme="dark"] .color-history-section label {
  color: var(--primary-color) !important;
  font-weight: bold !important;
}

/* Placeholder text visibility */
[data-theme="dark"] .palette-placeholder p,
[data-theme="dark"] .history-placeholder p {
  color: var(--text-secondary) !important;
  font-style: italic !important;
  text-align: center !important;
  font-size: 1.1rem !important;
}

/* Copy button text contrast */
[data-theme="dark"] .copy-btn {
  background: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  color: white !important;
  font-weight: bold !important;
  padding: 8px 15px !important;
  border-radius: 6px !important;
  transition: all 0.3s ease !important;
}

/* Enhanced visual hierarchy */
[data-theme="dark"] .color-theory-section h3,
[data-theme="dark"] .color-formats-section h3,
[data-theme="dark"] .usage-tips-section h3 {
  color: var(--primary-color) !important;
  border-bottom: 2px solid var(--primary-color) !important;
  padding-bottom: 10px !important;
  margin-bottom: 20px !important;
}

/* Improve overall section spacing and borders */
[data-theme="dark"] .tool-container {
  background: var(--background-color) !important;
  border: none !important;
  padding: 0 !important;
}

[data-theme="dark"] .main-content {
  background: var(--background-color) !important;
}

/* Force visibility of any missed elements */
[data-theme="dark"] .color-picker-section p,
[data-theme="dark"] .color-palette-section p,
[data-theme="dark"] .color-history-section p {
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}

/* Style for color value inputs to be more readable */
[data-theme="dark"] .color-input {
  background: var(--input-bg) !important;
  border: 2px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-family: 'Courier New', monospace !important;
  font-weight: bold !important;
  text-align: center !important;
  padding: 10px !important;
  border-radius: 6px !important;
}

[data-theme="dark"] .color-input:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
  background: rgba(96, 165, 250, 0.1) !important;
}

/* CRITICAL FIX: Ensure actual colors show in color swatches */
[data-theme="dark"] .color-swatch {
  border: 3px solid var(--border-color) !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  position: relative !important;
  /* IMPORTANT: Don't override background color set by JavaScript */
  background: inherit !important;
}

/* Override any background that might hide the actual color */
[data-theme="dark"] .color-history-grid .color-swatch,
[data-theme="dark"] .color-palette-grid .color-swatch {
  background: inherit !important; /* Let the actual color show through */
  border: 3px solid var(--text-primary) !important;
  box-shadow: 
    0 0 0 1px var(--border-color),
    0 4px 12px rgba(0, 0, 0, 0.6) !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 8px !important;
}

[data-theme="dark"] .color-history-grid .color-swatch:hover,
[data-theme="dark"] .color-palette-grid .color-swatch:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 2px var(--primary-color),
    0 6px 20px rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.1) !important;
}

/* Ensure color preview shows actual color */
[data-theme="dark"] #color-preview {
  border: 4px solid var(--text-primary) !important;
  border-radius: 15px !important;
  box-shadow: 
    0 0 0 2px var(--border-color),
    0 8px 25px rgba(0, 0, 0, 0.6) !important;
  min-height: 120px !important;
  min-width: 120px !important;
  position: relative !important;
  /* Don't override the background set by JavaScript */
  background: inherit !important;
}

/* Color picker main input should show actual color */
[data-theme="dark"] #color-picker {
  border: 4px solid var(--text-primary) !important;
  border-radius: 15px !important;
  width: 80px !important;
  height: 80px !important;
  cursor: pointer !important;
  box-shadow: 
    0 0 0 1px var(--border-color),
    0 4px 15px rgba(0, 0, 0, 0.4) !important;
  /* Don't override the color input value */
  background: inherit !important;
}

[data-theme="dark"] #color-picker:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 2px var(--primary-color),
    0 6px 20px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Make sure any color elements with inline styles show their actual colors */
[data-theme="dark"] [style*="background-color:"],
[data-theme="dark"] [style*="background: rgb"],
[data-theme="dark"] [style*="background: #"],
[data-theme="dark"] [style*="background:rgb"],
[data-theme="dark"] [style*="background:#"] {
  background: inherit !important; /* Keep the original color */
  border: 2px solid var(--text-primary) !important;
  box-shadow: 0 0 0 1px var(--border-color) !important;
}

/* Specific override for color palette and history items */
[data-theme="dark"] .color-palette-grid div,
[data-theme="dark"] .color-history-grid div {
  background: inherit !important; /* Don't override JavaScript-set colors */
  border: 3px solid var(--text-primary) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 0 1px var(--border-color),
    0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .color-palette-grid div:hover,
[data-theme="dark"] .color-history-grid div:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 2px var(--primary-color),
    0 4px 16px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Ensure color codes display container doesn't interfere */
[data-theme="dark"] .color-codes .color-code-group {
  background: var(--surface-color) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 10px !important;
}

/* Make sure any elements with data-color attribute show their colors */
[data-theme="dark"] [data-color] {
  background: inherit !important;
  border: 2px solid var(--text-primary) !important;
}

/* ULTIMATE COLOR VISIBILITY FIX */
/* Remove any CSS that might override JavaScript-set background colors */
[data-theme="dark"] .color-swatch,
[data-theme="dark"] .color-history-grid > *,
[data-theme="dark"] .color-palette-grid > *,
[data-theme="dark"] .color-preview,
[data-theme="dark"] input[type="color"] {
  /* Remove all background overrides */
  background: revert !important;
  background-color: revert !important;
}

/* But keep the enhanced borders and effects */
[data-theme="dark"] .color-swatch,
[data-theme="dark"] .color-history-grid > *,
[data-theme="dark"] .color-palette-grid > * {
  border: 3px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  min-width: 40px !important;
  min-height: 40px !important;
}

[data-theme="dark"] .color-swatch:hover,
[data-theme="dark"] .color-history-grid > *:hover,
[data-theme="dark"] .color-palette-grid > *:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 3px var(--primary-color),
    0 6px 20px rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.1) !important;
}

/* Color preview should show the actual selected color */
[data-theme="dark"] #color-preview {
  border: 4px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 15px !important;
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.3),
    0 8px 25px rgba(0, 0, 0, 0.6) !important;
  min-height: 120px !important;
  min-width: 120px !important;
  /* Let JavaScript set the background color */
  background: revert !important;
  background-color: revert !important;
}

[data-theme="dark"] #color-preview:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 3px var(--primary-color),
    0 12px 35px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.02) !important;
}

/* Color picker input should show the actual color */
[data-theme="dark"] #color-picker {
  border: 4px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 15px !important;
  width: 80px !important;
  height: 80px !important;
  cursor: pointer !important;
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.4) !important;
  /* Don't override the native color input */
  background: revert !important;
  background-color: revert !important;
}

[data-theme="dark"] #color-picker:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 3px var(--primary-color),
    0 6px 20px rgba(96, 165, 250, 0.4) !important;
  transform: scale(1.05) !important;
}

/* Ensure all color elements in the tool show their actual colors */
[data-theme="dark"] .color-picker-section [style*="background"],
[data-theme="dark"] .color-palette-section [style*="background"],
[data-theme="dark"] .color-history-section [style*="background"] {
  /* Don't override inline background colors set by JavaScript */
  background: revert !important;
  background-color: revert !important;
  border: 2px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 6px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) !important;
}

/* Force actual colors to show through any overrides */
[data-theme="dark"] .color-history-grid .color-item,
[data-theme="dark"] .color-palette-grid .color-item,
[data-theme="dark"] .color-history-grid .swatch,
[data-theme="dark"] .color-palette-grid .swatch {
  background: inherit !important;
  background-color: inherit !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* FINAL SOLUTION: Target specific elements that JavaScript creates */
[data-theme="dark"] .palette-color,
[data-theme="dark"] .history-color {
  /* Don't override the background-color set by JavaScript */
  background-color: inherit !important;
  background: inherit !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  min-width: 60px !important;
  min-height: 60px !important;
  position: relative !important;
  margin: 5px !important;
  display: inline-block !important;
}

[data-theme="dark"] .palette-color:hover,
[data-theme="dark"] .history-color:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 3px var(--primary-color),
    0 6px 20px rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.1) !important;
}

/* Style the color code text inside color swatches */
[data-theme="dark"] .palette-color-code,
[data-theme="dark"] .history-color-code {
  position: absolute !important;
  bottom: 2px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  font-size: 10px !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: monospace !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

[data-theme="dark"] .palette-color:hover .palette-color-code,
[data-theme="dark"] .history-color:hover .history-color-code {
  opacity: 1 !important;
}

/* Remove button styling */
[data-theme="dark"] .remove-color {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  background: #e74c3c !important;
  color: white !important;
  border: none !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 12px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

[data-theme="dark"] .palette-color:hover .remove-color {
  opacity: 1 !important;
}

[data-theme="dark"] .remove-color:hover {
  background: #c0392b !important;
  transform: scale(1.1) !important;
}

/* CRITICAL: Override any CSS that blocks inline background colors */
/* Super specific targeting for color elements */
[data-theme="dark"] .color-palette-grid > div[style*="background-color"],
[data-theme="dark"] .color-history-grid > div[style*="background-color"] {
  /* Allow the inline background-color to show */
  background: inherit !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.6) !important;
  min-width: 60px !important;
  min-height: 60px !important;
  display: inline-block !important;
  margin: 5px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .color-palette-grid > div[style*="background-color"]:hover,
[data-theme="dark"] .color-history-grid > div[style*="background-color"]:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 3px var(--primary-color),
    0 6px 20px rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.1) !important;
}

/* Remove any universal background overrides that might interfere */
[data-theme="dark"] div:not(.tool-card):not(.hero-section):not(.palette-placeholder):not(.history-placeholder) {
  background: inherit;
}

/* ULTIMATE FIX FOR COLOR SWATCHES - HIGHEST PRIORITY */
[data-theme="dark"] .color-palette-grid .palette-color,
[data-theme="dark"] .color-history-grid .history-color,
[data-theme="dark"] .color-palette-grid > div,
[data-theme="dark"] .color-history-grid > div {
  background: transparent !important;
  background-color: transparent !important;
}

/* Force inline styles to take precedence */
[data-theme="dark"] .color-palette-grid [style*="background-color"],
[data-theme="dark"] .color-history-grid [style*="background-color"] {
  background: inherit !important;
  background-color: inherit !important;
}

/* NUCLEAR OPTION: Remove all background overrides for color elements */
[data-theme="dark"] .palette-color,
[data-theme="dark"] .history-color {
  all: revert !important;
  display: inline-block !important;
  width: 60px !important;
  height: 60px !important;
  margin: 5px !important;
  cursor: pointer !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
  box-shadow: 
    0 0 0 1px rgba(255, 255, 255, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .palette-color:hover,
[data-theme="dark"] .history-color:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 3px var(--primary-color),
    0 6px 20px rgba(96, 165, 250, 0.5) !important;
  transform: scale(1.1) !important;
}

/* ========== ULTIMATE COLOR SWATCH FIX ========== */
/* Remove any dark mode background overrides for color elements */
[data-theme="dark"] .color-palette-grid > div,
[data-theme="dark"] .color-history-grid > div {
  background: transparent !important;
  background-color: transparent !important;
}

/* Force any element with inline background-color to show it */
[data-theme="dark"] div[style*="background-color"],
[data-theme="dark"] .palette-color[style*="background-color"],
[data-theme="dark"] .history-color[style*="background-color"] {
  background: inherit !important;
  background-color: inherit !important;
}

/* NUCLEAR OPTION: Reset all backgrounds for color swatches */
[data-theme="dark"] .palette-color,
[data-theme="dark"] .history-color {
  background: unset !important;
  background-color: unset !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 8px !important;
  width: 60px !important;
  height: 60px !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
}

/* ========== ULTIMATE COLOR SWATCH FIX ========== */
/* This rule has the highest priority and forces colors to show */
html body[data-theme="dark"] .color-palette-grid .palette-color[style],
html body[data-theme="dark"] .color-history-grid .history-color[style] {
  background: inherit !important;
  background-color: inherit !important;
  background-image: none !important;
  filter: none !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

/* ========== SIMPLE AND DIRECT FIX ========== */
/* Remove ALL CSS interference for color elements */
[data-theme="dark"] .palette-color,
[data-theme="dark"] .history-color {
  all: unset !important;
  display: block !important;
  width: 80px !important;
  height: 60px !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin: 4px !important;
  position: relative !important;
}

/* Force inline styles to work */
[data-theme="dark"] .palette-color[style*="background"],
[data-theme="dark"] .history-color[style*="background"] {
  all: unset !important;
  display: block !important;
  width: 80px !important;
  height: 60px !important;
  border: 2px solid #ffffff !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  margin: 4px !important;
  position: relative !important;
}

/* Enhanced visibility for all color elements */
[data-theme="dark"] .color-preview,
[data-theme="dark"] #color-preview {
  background: unset !important;
  background-color: unset !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 15px !important;
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.3),
    0 8px 25px rgba(0, 0, 0, 0.7) !important;
  min-height: 120px !important;
  min-width: 120px !important;
}

/* CRITICAL FIX: Force Current Color preview to show actual color */
[data-theme="dark"] .color-display .color-preview,
[data-theme="dark"] .color-display #color-preview,
[data-theme="dark"] .color-picker-main .color-preview,
[data-theme="dark"] .color-picker-main #color-preview {
  background: transparent !important;
  background-color: transparent !important;
  /* Remove any CSS that might override JavaScript colors */
}

/* Super specific targeting for the main color preview box */
[data-theme="dark"] div.color-preview,
[data-theme="dark"] div#color-preview {
  background: inherit !important;
  background-color: inherit !important;
  /* Force inline styles to take precedence */
}

/* Remove any container backgrounds that might interfere */
[data-theme="dark"] .color-display {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
}

/* Make sure the color display container doesn't override child colors */
[data-theme="dark"] .color-display > * {
  background: inherit;
}

/* Color picker input enhancement */
[data-theme="dark"] #color-picker,
[data-theme="dark"] input[type="color"] {
  background: unset !important;
  background-color: unset !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 12px !important;
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.3),
    0 4px 15px rgba(0, 0, 0, 0.5) !important;
}

/* Make sure RGB input boxes are also visible */
[data-theme="dark"] .rgb-group input {
  background: var(--input-bg) !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  color: var(--text-primary) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  text-align: center !important;
  font-weight: bold !important;
}

/* Hover effects for better interaction */
[data-theme="dark"] .palette-color:hover,
[data-theme="dark"] .history-color:hover,
[data-theme="dark"] .color-preview:hover,
[data-theme="dark"] #color-preview:hover {
  border-color: var(--primary-color) !important;
  box-shadow: 
    0 0 0 3px var(--primary-color),
    0 8px 25px rgba(96, 165, 250, 0.6) !important;
  transform: scale(1.05) !important;
}

/* ========== FINAL FIX FOR CURRENT COLOR PREVIEW ========== */
/* Target the exact element that shows the current selected color */
[data-theme="dark"] #color-preview {
  background: revert !important;
  background-color: revert !important;
  /* Remove all CSS overrides and let JavaScript set the color */
}

/* Alternative targeting for color preview */
[data-theme="dark"] .color-preview {
  background: revert !important;
  background-color: revert !important;
}

/* Force any element with id color-preview to show its inline style */
[data-theme="dark"] [id="color-preview"] {
  background: inherit !important;
  background-color: inherit !important;
}

/* Nuclear option: remove all background CSS for color preview elements */
[data-theme="dark"] *[id*="color-preview"],
[data-theme="dark"] *[class*="color-preview"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Ensure the JavaScript-set background color is visible */
[data-theme="dark"] div[id="color-preview"][style*="background-color"],
[data-theme="dark"] div[class*="color-preview"][style*="background-color"] {
  background: inherit !important;
  background-color: inherit !important;
}

/* ========== MAKE ALL COLOR ELEMENTS WORK THE SAME WAY ========== */
/* Copy the working behavior from color-picker to color-preview */
[data-theme="dark"] #color-preview,
[data-theme="dark"] .color-preview,
[data-theme="dark"] #color-picker,
[data-theme="dark"] input[type="color"] {
  /* Remove ALL background overrides */
  background: none !important;
  background-color: transparent !important;
  /* Force the browser default color picker behavior */
}

/* Alternative approach: completely reset color display elements */
[data-theme="dark"] .color-display .color-preview,
[data-theme="dark"] .color-display #color-preview {
  all: revert;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 15px !important;
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.3),
    0 8px 25px rgba(0, 0, 0, 0.7) !important;
  min-height: 120px !important;
  min-width: 120px !important;
  display: block !important;
}

/* Force inline background-color styles to work */
[data-theme="dark"] *[style*="background-color"]:not(.tool-card):not(.hero-section) {
  background: inherit !important;
  background-color: inherit !important;
}

/* Remove any parent container background that might interfere */
[data-theme="dark"] .color-picker-main *[style*="background"],
[data-theme="dark"] .color-display *[style*="background"],
[data-theme="dark"] .color-info *[style*="background"] {
  background: inherit !important;
  background-color: inherit !important;
}

/* ========== ULTIMATE FIX: COPY WORKING BEHAVIOR ========== */
/* Make color-preview work exactly like color-picker input */
[data-theme="dark"] #color-preview {
  /* Reset everything and use browser defaults like color input */
  all: unset !important;
  display: block !important;
  width: 120px !important;
  height: 120px !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 15px !important;
  box-shadow: 
    0 0 0 2px rgba(255, 255, 255, 0.3),
    0 8px 25px rgba(0, 0, 0, 0.7) !important;
  cursor: pointer !important;
  /* Allow JavaScript to set background-color freely */
}

/* Ensure no CSS interferes with JavaScript color setting */
[data-theme="dark"] #color-preview[style] {
  background: inherit !important;
}

/* Force all color elements to behave consistently */
[data-theme="dark"] .color-preview,
[data-theme="dark"] #color-preview,
[data-theme="dark"] input[type="color"],
[data-theme="dark"] #color-picker {
  /* Remove any background overrides from dark theme */
  background: revert-layer !important;
  background-color: revert-layer !important;
}

/* ========== FINAL NUCLEAR SOLUTION ========== */
/* Remove ALL dark theme CSS interference with color elements */
[data-theme="dark"] #color-preview {
  background: initial !important;
  background-color: initial !important;
  background-image: none !important;
  /* Remove all possible CSS interference */
}

/* Force JavaScript colors to always show */
[data-theme="dark"] #color-preview[style*="background-color"] {
  background: initial !important;
  /* Let the inline style work */
}

/* Alternative IDs and classes that might be used */
[data-theme="dark"] .color-preview,
[data-theme="dark"] [id*="preview"],
[data-theme="dark"] [class*="preview"] {
  background: initial !important;
  background-color: initial !important;
}

/* SUPER NUCLEAR: Remove any universal background rules */
[data-theme="dark"] div:not(.hero-section):not(.tool-card):not(.footer) {
  background: inherit !important;
}

/* Make sure color display containers don't interfere */
[data-theme="dark"] .color-display,
[data-theme="dark"] .color-picker-main,
[data-theme="dark"] .color-info {
  background: var(--surface-color) !important;
}

/* But their children should show actual colors */
[data-theme="dark"] .color-display #color-preview,
[data-theme="dark"] .color-picker-main #color-preview,
[data-theme="dark"] .color-info #color-preview {
  background: transparent !important;
  background-color: transparent !important;
}

/* ========== EMERGENCY OVERRIDE ALL CSS ========== */
/* Force any element with background-color style to show it */
[data-theme="dark"] *[style*="background-color"] {
  background: inherit !important;
  background-color: inherit !important;
  /* This should override everything */
}

/* Target the specific element by attribute */
[data-theme="dark"] div[id="color-preview"] {
  background: none !important;
  background-color: none !important;
  /* Force it to use inline styles only */
}

/* Last resort: use !important with highest specificity */
[data-theme="dark"] html body .color-picker-section .color-picker-main .color-display #color-preview {
  background: transparent !important;
  background-color: transparent !important;
  /* This should be the most specific rule */
}

/* Override any possible CSS rule that might exist */
[data-theme="dark"] html body div#color-preview[style] {
  background: inherit !important;
  background-color: inherit !important;
}

/* ========== CLEAN SLATE APPROACH ========== */
/* Remove all previous complex rules and use simple approach */

/* Step 1: Reset color preview completely */
[data-theme="dark"] #color-preview {
  /* Remove everything and start fresh */
  all: initial !important;
  display: block !important;
  width: 120px !important;
  height: 120px !important;
  border: 4px solid white !important;
  border-radius: 15px !important;
  margin: 10px !important;
  /* Let JavaScript handle the background */
}

/* Step 2: Ensure no CSS interferes with JavaScript */
[data-theme="dark"] .color-preview,
[data-theme="dark"] #color-preview,
[data-theme="dark"] .palette-color,
[data-theme="dark"] .history-color {
  background: initial;
  background-color: initial;
  /* Use browser defaults */
}

/* Step 3: Simple border styling only */
[data-theme="dark"] .color-preview:not(#color-preview),
[data-theme="dark"] .palette-color,
[data-theme="dark"] .history-color {
  border: 3px solid white !important;
  border-radius: 8px !important;
  width: 60px !important;
  height: 60px !important;
  margin: 5px !important;
  cursor: pointer !important;
  display: inline-block !important;
}

/* ========== LAST RESORT SOLUTION ========== */
/* Maybe the issue is with container overflow or z-index */
[data-theme="dark"] .color-display {
  background: var(--surface-color) !important;
  border: 2px solid var(--border-color) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  overflow: visible !important;
  position: relative !important;
}

/* Try using CSS custom property approach */
[data-theme="dark"] #color-preview {
  background: var(--preview-color, transparent) !important;
}

/* Remove all possible interference */
[data-theme="dark"] .color-picker-section,
[data-theme="dark"] .color-picker-main,
[data-theme="dark"] .color-display,
[data-theme="dark"] .color-info {
  /* Make sure no parent blocks the color */
  background-clip: padding-box !important;
  isolation: auto !important;
}

/* Force any element with background-color attribute to show */
[data-theme="dark"] #color-preview[style*="background-color"] {
  background: inherit !important;
  background-color: inherit !important;
  /* This should definitely work */
}

/* Ultimate fallback: manually set common colors */
[data-theme="dark"] #color-preview[style*="#"] {
  background: inherit !important;
}

[data-theme="dark"] #color-preview[style*="rgb"] {
  background: inherit !important;
}

/* ========== FINAL JAVASCRIPT COMPATIBILITY FIX ========== */
/* The JavaScript uses backgroundColor property, ensure it works */
[data-theme="dark"] #color-preview {
  /* Remove all background CSS and let JavaScript take control */
  background: none !important;
  background-color: none !important;
  background-image: none !important;
  /* Force the element to accept JavaScript backgroundColor */
}

/* Ensure JavaScript style.backgroundColor works */
[data-theme="dark"] #color-preview {
  /* Reset all background properties */
  background: initial !important;
  /* Let JavaScript set backgroundColor freely */
}

/* Alternative: Use important to force JavaScript values */
[data-theme="dark"] #color-preview[style] {
  /* When JavaScript adds style attribute, respect it */
  background-color: inherit !important;
  background: inherit !important;
}

/* If nothing else works, create a transparent background */
[data-theme="dark"] #color-preview {
  background: rgba(0,0,0,0) !important;
  /* Completely transparent, let JS set the color */
}

/* Force the container to not interfere */
[data-theme="dark"] .color-display .color-preview,
[data-theme="dark"] .color-display #color-preview {
  background: transparent !important;
  background-color: transparent !important;
}

/* ========== PALETTE AND HISTORY COLORS FIX ========== */
/* Fix palette colors */
[data-theme="dark"] .palette-color {
  background: inherit !important;
  background-color: inherit !important;
  background-image: none !important;
}

[data-theme="dark"] .palette-color[style*="background-color"] {
  /* When JavaScript sets background-color, let it show */
  background: inherit !important;
}

/* Fix history colors */
[data-theme="dark"] .history-color {
  background: inherit !important;
  background-color: inherit !important;
  background-image: none !important;
}

[data-theme="dark"] .history-color[style*="background-color"] {
  /* When JavaScript sets background-color, let it show */
  background: inherit !important;
}

/* Remove any gray overlay */
[data-theme="dark"] .color-palette .palette-color,
[data-theme="dark"] .color-history .history-color {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  /* Let inline styles work */
}