diff --git a/src/translate-modal.js b/src/translate-modal.js
index f2944ec..44516cb 100644
--- a/src/translate-modal.js
+++ b/src/translate-modal.js
@@ -52,7 +52,7 @@ export function openTranslateModal() {
 
 	// Translation mode tabs
 	const tabNav = document.createElement("nav");
-	tabNav.style.marginBottom = "20px";
+	// CSS class already handles margin-bottom
 
 	const tabList = document.createElement("ul");
 	tabList.setAttribute("role", "tablist");
@@ -95,7 +95,7 @@ export function openTranslateModal() {
 	customContent.id = "custom-panel";
 	customContent.setAttribute("role", "tabpanel");
 	customContent.setAttribute("aria-labelledby", "custom-tab");
-	customContent.style.display = "none";
+	customContent.className = "translate-tab-content";
 
 	// Page translation content
 	const pageInfo = document.createElement("p");
@@ -114,13 +114,12 @@ export function openTranslateModal() {
 
 	// Language selection
 	const languageContainer = document.createElement("div");
-	languageContainer.style.cssText = "margin: 20px 0;";
+	languageContainer.className = "translate-language-container";
 
 	const languageLabel = document.createElement("label");
 	languageLabel.textContent = getUIText("translateToLabel");
 	languageLabel.setAttribute("data-i18n", "translateToLabel");
-	languageLabel.style.display = "block";
-	languageLabel.style.marginBottom = "8px";
+	languageLabel.className = "translate-label";
 
 	const languageSelect = document.createElement("select");
 	languageSelect.className = "translate-language-select";
@@ -144,7 +143,7 @@ export function openTranslateModal() {
 
 	// Result area
 	const resultContainer = document.createElement("div");
-	resultContainer.style.cssText = "margin-top: 20px; display: none;";
+	resultContainer.className = "translate-result-container";
 
 	const resultLabel = document.createElement("h3");
 	resultLabel.textContent = "Translation:";
@@ -170,8 +169,8 @@ export function openTranslateModal() {
 			
 			// Visual styles are now handled by CSS classes
 			
-			pageContent.style.display = "block";
-			customContent.style.display = "none";
+			pageContent.classList.add("active");
+			customContent.classList.remove("active");
 			translateButton.textContent = getUIText("translatePageButton");
 		}
 	};
diff --git a/src/uncloseai-embed-modal.js b/src/uncloseai-embed-modal.js
index d7a0369..7b79331 100644
--- a/src/uncloseai-embed-modal.js
+++ b/src/uncloseai-embed-modal.js
@@ -169,6 +169,17 @@ async function openUncloseaiEmbeddedModalNew() {
 	// Get theme colors
 	const theme = detectCurrentTheme();
 	const colors = getThemeColors(theme);
+	
+	// Set CSS custom properties for theme support
+	const root = document.documentElement;
+	root.style.setProperty('--uncloseai-button-background', colors.buttonBackground);
+	root.style.setProperty('--uncloseai-button-hover', colors.buttonHover);
+	root.style.setProperty('--uncloseai-button-border', colors.buttonBorder);
+	root.style.setProperty('--uncloseai-primary-text', colors.primaryText);
+	root.style.setProperty('--uncloseai-action-background', colors.actionBackground);
+	root.style.setProperty('--uncloseai-action-hover', colors.actionHover);
+	root.style.setProperty('--uncloseai-action-border', colors.actionBorder);
+	root.style.setProperty('--uncloseai-action-text', colors.primaryText);
 
 	const modal = document.createElement("dialog");
 	modal.id = "uncloseai-embedded-modal";
@@ -1565,6 +1576,17 @@ async function openUncloseaiEmbeddedModalNew() {
 		const newTheme = detectCurrentTheme();
 		const newColors = getThemeColors(newTheme);
 		modal.setAttribute("data-theme", newTheme);
+		
+		// Update CSS custom properties for theme support
+		const root = document.documentElement;
+		root.style.setProperty('--uncloseai-button-background', newColors.buttonBackground);
+		root.style.setProperty('--uncloseai-button-hover', newColors.buttonHover);
+		root.style.setProperty('--uncloseai-button-border', newColors.buttonBorder);
+		root.style.setProperty('--uncloseai-primary-text', newColors.primaryText);
+		root.style.setProperty('--uncloseai-action-background', newColors.actionBackground);
+		root.style.setProperty('--uncloseai-action-hover', newColors.actionHover);
+		root.style.setProperty('--uncloseai-action-border', newColors.actionBorder);
+		root.style.setProperty('--uncloseai-action-text', newColors.primaryText);
 
 		// Update modal background and main color
 		modal.style.background = newColors.modalBackground;
diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index bd460ce..43ee651 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -277,6 +277,34 @@ dialog#translate-modal {
   padding: 0;
   border-bottom: 2px solid #e9ecef;
   gap: 0;
+  margin-bottom: 20px;
+}
+
+.translate-tab-content {
+  display: none;
+}
+
+.translate-tab-content.active {
+  display: block;
+}
+
+.translate-language-container {
+  margin: 20px 0;
+}
+
+.translate-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.translate-result-container {
+  margin-top: 20px;
+  display: none;
+}
+
+.translate-result-container.show {
+  display: block;
 }
 
 .translate-tab-nav li {
@@ -584,21 +612,21 @@ dialog#tts-modal {
   padding: 16px;
 }
 
-/* Button Classes */
+/* Button Classes with CSS Variables */
 .uncloseai-btn-primary {
   padding: 8px 16px;
-  background: #f8f9fa;
-  border: 1px solid #dee2e6;
+  background: var(--uncloseai-button-background, #f8f9fa);
+  border: 1px solid var(--uncloseai-button-border, #dee2e6);
   border-radius: 20px;
   cursor: pointer;
   font-size: 14px;
-  color: #495057;
+  color: var(--uncloseai-primary-text, #495057);
   transition: all 0.2s;
   white-space: nowrap;
 }
 
 .uncloseai-btn-primary:hover {
-  background: #e9ecef;
+  background: var(--uncloseai-button-hover, #e9ecef);
 }
 
 .uncloseai-btn-small {
@@ -607,29 +635,29 @@ dialog#tts-modal {
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
-  border: 1px solid #dee2e6;
-  background: #f8f9fa;
-  color: #495057;
+  border: 1px solid var(--uncloseai-action-border, rgba(255, 255, 255, 0.3));
+  background: var(--uncloseai-action-background, rgba(255, 255, 255, 0.2));
+  color: var(--uncloseai-action-text, #495057);
 }
 
 .uncloseai-btn-small:hover {
-  background: #e9ecef;
+  background: var(--uncloseai-action-hover, rgba(255, 255, 255, 0.3));
 }
 
 .uncloseai-btn-control {
   padding: 8px 12px;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--uncloseai-button-border, #dee2e6);
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
-  color: #495057;
-  background: #f8f9fa;
+  color: var(--uncloseai-primary-text, #495057);
+  background: var(--uncloseai-button-background, #f8f9fa);
   transition: all 0.2s;
   white-space: nowrap;
 }
 
 .uncloseai-btn-control:hover {
-  background: #e9ecef;
+  background: var(--uncloseai-button-hover, #e9ecef);
 }
 
 .uncloseai-btn-close {
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 303ed6e..342f320 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -309,6 +309,34 @@ dialog#translate-modal {
   padding: 0;
   border-bottom: 2px solid #e9ecef;
   gap: 0;
+  margin-bottom: 20px;
+}
+
+.translate-tab-content {
+  display: none;
+}
+
+.translate-tab-content.active {
+  display: block;
+}
+
+.translate-language-container {
+  margin: 20px 0;
+}
+
+.translate-label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 600;
+}
+
+.translate-result-container {
+  margin-top: 20px;
+  display: none;
+}
+
+.translate-result-container.show {
+  display: block;
 }
 
 .translate-tab-nav li {
@@ -635,21 +663,21 @@ dialog#tts-modal {
   padding: 16px;
 }
 
-/* Button Classes */
+/* Button Classes with CSS Variables */
 .uncloseai-btn-primary {
   padding: 8px 16px;
-  background: #f8f9fa;
-  border: 1px solid #dee2e6;
+  background: var(--uncloseai-button-background, #f8f9fa);
+  border: 1px solid var(--uncloseai-button-border, #dee2e6);
   border-radius: 20px;
   cursor: pointer;
   font-size: 14px;
-  color: #495057;
+  color: var(--uncloseai-primary-text, #495057);
   transition: all 0.2s;
   white-space: nowrap;
 }
 
 .uncloseai-btn-primary:hover {
-  background: #e9ecef;
+  background: var(--uncloseai-button-hover, #e9ecef);
 }
 
 .uncloseai-btn-small {
@@ -658,29 +686,29 @@ dialog#tts-modal {
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.2s;
-  border: 1px solid #dee2e6;
-  background: #f8f9fa;
-  color: #495057;
+  border: 1px solid var(--uncloseai-action-border, rgba(255, 255, 255, 0.3));
+  background: var(--uncloseai-action-background, rgba(255, 255, 255, 0.2));
+  color: var(--uncloseai-action-text, #495057);
 }
 
 .uncloseai-btn-small:hover {
-  background: #e9ecef;
+  background: var(--uncloseai-action-hover, rgba(255, 255, 255, 0.3));
 }
 
 .uncloseai-btn-control {
   padding: 8px 12px;
-  border: 1px solid #dee2e6;
+  border: 1px solid var(--uncloseai-button-border, #dee2e6);
   border-radius: 6px;
   cursor: pointer;
   font-size: 13px;
-  color: #495057;
-  background: #f8f9fa;
+  color: var(--uncloseai-primary-text, #495057);
+  background: var(--uncloseai-button-background, #f8f9fa);
   transition: all 0.2s;
   white-space: nowrap;
 }
 
 .uncloseai-btn-control:hover {
-  background: #e9ecef;
+  background: var(--uncloseai-button-hover, #e9ecef);
 }
 
 .uncloseai-btn-close {