@jjlmoya/utils-developer 1.13.0 → 1.15.0

package/src/tool/svgSanitizer/i18n/ru.ts

@@ -13,7 +13,7 @@ const faqData = [
   },
   {
     question: 'Работает ли это с SVG из Illustrator?',
-    answer: 'Да. Illustrator экспортирует SVG с XML-объявлениями, метаданными и собственными пространствами имён, которые очиститель удаляет. Результат — это SVG, совместимый со всеми современными браузерами.',
+    answer: 'Да. Illustrator экспортирует SVG с XML-объявлениями, метаданными и собственными пространствами имён, которые очиститель удаляет. Результат - это SVG, совместимый со всеми современными браузерами.',
   },
   {
     question: 'Какая разница между очисткой и минификацией?',
@@ -21,7 +21,7 @@ const faqData = [
   },
   {
     question: 'Может ли удаление ID-элементов повредить SVG?',
-    answer: 'Только если элемент в SVG ссылается на другой по ID, например через fill="url(#gradient)". В этом случае отключите опцию «Удалить ID». Она отключена по умолчанию именно чтобы избежать этой проблемы.',
+    answer: 'Только если элемент в SVG ссылается на другой по ID, например через fill="url(#gradient)". В этом случае отключите опцию "Удалить ID". Она отключена по умолчанию именно чтобы избежать этой проблемы.',
   },
   {
     question: 'Передаётся ли код SVG на какой-нибудь сервер?',
@@ -32,7 +32,7 @@ const faqData = [
 const howToData = [
   { name: 'Вставьте SVG', text: 'Вставьте код SVG, экспортированный из Figma, Illustrator или Inkscape, в текстовое поле.' },
   { name: 'Настройте параметры', text: 'Включите или отключите опции: удалить ID, убрать ширину/высоту и минифицировать в зависимости от ваших нужд.' },
-  { name: 'Очистите', text: 'Нажмите «Очистить SVG», чтобы обработать код и получить оптимизированный результат.' },
+  { name: 'Очистите', text: 'Нажмите "Очистить SVG", чтобы обработать код и получить оптимизированный результат.' },
   { name: 'Скопируйте или скачайте', text: 'Используйте кнопки копирования или загрузки, чтобы получить чистый SVG, готовый для продакшена.' },
 ];
 
@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Ссылки',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
@@ -108,7 +108,7 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
     { type: 'title', text: 'Почему экспортированные SVG такие грязные?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Когда вы экспортируете SVG из Figma, вы получаете файл, перегруженный атрибутами, которые имеют смысл только внутри приложения: <code>data-name</code>, <code>xml:space</code>, ссылки на внутренние слои и метаданные дизайна. Результат — это SVG, весящий на 40-70% больше необходимого.',
+      html: 'Когда вы экспортируете SVG из Figma, вы получаете файл, перегруженный атрибутами, которые имеют смысл только внутри приложения: <code>data-name</code>, <code>xml:space</code>, ссылки на внутренние слои и метаданные дизайна. Результат - это SVG, весящий на 40-70% больше необходимого.',
     },
     { type: 'title', text: 'Что удаляет очиститель', level: 3 },
     {

package/src/tool/svgSanitizer/i18n/sv.ts

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Referenser',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

package/src/tool/svgSanitizer/i18n/tr.ts

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: 'Referanslar',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

package/src/tool/svgSanitizer/i18n/zh.ts

@@ -93,9 +93,9 @@ export const content: ToolLocaleContent<SvgSanitizerUI> = {
   faq: faqData,
   bibliographyTitle: '参考资料',
   bibliography: [
-    { name: 'SVG Specification — W3C', url: 'https://www.w3.org/TR/SVG2/' },
-    { name: 'Figma SVG Export — Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
-    { name: 'SVGO — SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
+    { name: 'SVG Specification - W3C', url: 'https://www.w3.org/TR/SVG2/' },
+    { name: 'Figma SVG Export - Official Documentation', url: 'https://help.figma.com/hc/en-us/articles/360040028114-Export-from-Figma' },
+    { name: 'SVGO - SVG Optimizer (open source reference)', url: 'https://github.com/svg/svgo' },
   ],
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],

package/src/tool/svgSanitizer/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await svgSanitizer.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/svgSanitizer/svg-sanitizer.css

@@ -30,7 +30,7 @@
     gap: 1rem;
   }
 
-  :global(.theme-dark) .ss-panel {
+  .theme-dark .ss-panel {
     background: rgba(15, 23, 42, 0.75);
     border-color: rgba(255, 255, 255, 0.06);
   }
@@ -43,7 +43,7 @@
     letter-spacing: 0.06em;
   }
 
-  :global(.theme-dark) .ss-panel-label {
+  .theme-dark .ss-panel-label {
     color: rgb(148, 163, 184);
   }
 
@@ -63,7 +63,7 @@
     box-sizing: border-box;
   }
 
-  :global(.theme-dark) .ss-textarea {
+  .theme-dark .ss-textarea {
     background: rgba(255, 255, 255, 0.04);
     border-color: rgb(51, 65, 85);
     color: rgb(203, 213, 225);
@@ -95,7 +95,7 @@
     user-select: none;
   }
 
-  :global(.theme-dark) .ss-toggle-label {
+  .theme-dark .ss-toggle-label {
     color: rgb(148, 163, 184);
   }
 
@@ -199,7 +199,7 @@
     transition: all 0.2s ease;
   }
 
-  :global(.theme-dark) .ss-btn-action {
+  .theme-dark .ss-btn-action {
     background: rgb(30, 41, 59);
     border-color: rgb(51, 65, 85);
     color: rgb(148, 163, 184);
@@ -245,7 +245,7 @@
     border-top: 2px solid rgb(226, 232, 240);
   }
 
-  :global(.theme-dark) .ss-stat-chip {
+  .theme-dark .ss-stat-chip {
     background: rgba(255, 255, 255, 0.04);
     border-color: rgb(51, 65, 85);
   }
@@ -273,7 +273,7 @@
     line-height: 1.2;
   }
 
-  :global(.theme-dark) .ss-chip-value {
+  .theme-dark .ss-chip-value {
     color: white;
   }
 

package/src/tool/svgToCss/i18n/de.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: 'Wie ändere ich die Farbe eines in CSS eingebetteten SVGs?',
     answer:
-      'Der beste Weg ist über „mask-image“. Indem Sie das SVG als Maske definieren, können Sie die „background-color“ verwenden, um die Farbe dynamisch zu ändern, sogar in :hover-Zuständen.',
+      'Der beste Weg ist über "mask-image". Indem Sie das SVG als Maske definieren, können Sie die "background-color" verwenden, um die Farbe dynamisch zu ändern, sogar in :hover-Zuständen.',
   },
   {
     question: 'Welche Browser unterstützen CSS-Masken?',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Ergebnis kopieren',
-    text: 'Klicken Sie auf „Kopieren“, um den generierten CSS-Code in Ihre Zwischenablage zu übernehmen.',
+    text: 'Klicken Sie auf "Kopieren", um den generierten CSS-Code in Ihre Zwischenablage zu übernehmen.',
   },
   {
     name: 'In Ihr Projekt übernehmen',

package/src/tool/svgToCss/i18n/es.ts

@@ -9,7 +9,7 @@ const description =
 
 const faqData = [
   {
-    question: '¿Es mejor usar Data URI o un archivo .svg externo?',
+    question: '¿Es mejor usar Data URI o un archivo SVG externo?',
     answer:
       'Depende del uso. Los Data URIs eliminan peticiones HTTP (ideal para iconos pequeños), pero aumentan el tamaño del CSS. Para ilustraciones grandes o ricas en detalles, es preferible un archivo externo.',
   },

package/src/tool/svgToCss/i18n/fr.ts

@@ -164,7 +164,7 @@ export const content: ToolLocaleContent<SvgToCssUI> = {
     },
     {
       type: 'paragraph',
-      html: "Beaucoup de développeurs utilisent simplement <code>background-image</code> pour intégrer des vecteurs, mais cela a une limitation : vous ne pouvez pas changer la couleur du SVG dynamiquement depuis le CSS.",
+      html: "Beaucoup de développeurs utilisent simplement <code>background-image</code> pour intégrer des vecteurs, mais cela a une limitation: vous ne pouvez pas changer la couleur du SVG dynamiquement depuis le CSS.",
     },
     {
       type: 'paragraph',

package/src/tool/svgToCss/i18n/pl.ts

@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Skopiuj wynik',
-    text: 'Kliknij „Kopiuj”, aby pobrać wygenerowany kod CSS do schowka.',
+    text: 'Kliknij "Kopiuj", aby pobrać wygenerowany kod CSS do schowka.',
   },
   {
     name: 'Zastosuj w swoim projekcie',

package/src/tool/svgToCss/i18n/ru.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: 'Как изменить цвет SVG, встроенного в CSS?',
     answer:
-      "Лучший способ — через 'mask-image'. Определив SVG как маску, вы можете использовать 'background-color' для динамического изменения его цвета, даже в состояниях :hover.",
+      "Лучший способ - через 'mask-image'. Определив SVG как маску, вы можете использовать 'background-color' для динамического изменения его цвета, даже в состояниях :hover.",
   },
   {
     question: ' какие браузеры поддерживают CSS Masks?',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: 'Скопируйте результат',
-    text: 'Нажмите «Копировать», чтобы перенести сгенерированный CSS-код в буфер обмена.',
+    text: 'Нажмите "Копировать", чтобы перенести сгенерированный CSS-код в буфер обмена.',
   },
   {
     name: 'Примените в своем проекте',

package/src/tool/svgToCss/i18n/zh.ts

@@ -16,7 +16,7 @@ const faqData = [
   {
     question: '如何更改嵌入 CSS 的 SVG 的颜色？',
     answer:
-      '最好的方法是通过“mask-image”。通过将 SVG 定义为遮罩（mask），您可以使用“background-color”动态更改其颜色，甚至在 :hover 状态下也可以。',
+      '最好的方法是通过"mask-image"。通过将 SVG 定义为遮罩（mask），您可以使用"background-color"动态更改其颜色，甚至在 :hover 状态下也可以。',
   },
   {
     question: '哪些浏览器支持 CSS 遮罩（Masks）？',
@@ -46,7 +46,7 @@ const howToData = [
   },
   {
     name: '复制结果',
-    text: '点击“复制”将生成的 CSS 代码获取到剪贴板中。',
+    text: '点击"复制"将生成的 CSS 代码获取到剪贴板中。',
   },
   {
     name: '在项目中使用',

package/src/tool/svgToCss/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await svgToCss.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/svgToCss/svg-to-css-converter.css

@@ -13,7 +13,7 @@
     color: var(--stc-text);
   }
 
-  :global(.theme-dark) .stc-container {
+  .theme-dark .stc-container {
     --stc-card-bg: #1e293b;
     --stc-text: #f8fafc;
     --stc-text-muted: #94a3b8;
@@ -187,7 +187,7 @@
     transition: all 0.2s;
   }
 
-  :global(.stc-tab-btn.active) {
+  .stc-tab-btn.active {
     background: var(--stc-card-bg);
     color: var(--stc-primary);
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

package/src/tool/urlCleaner/component.astro

@@ -15,7 +15,7 @@ const t = (ui ?? {}) as UrlCleanerUI;
       <label for="uc-url-input" class="uc-label">{t.labelInput}</label>
       <div class="uc-input-group">
         <input type="url" id="uc-url-input" class="uc-input" placeholder="https://example.com?utm_source=twitter&fbclid=123..." />
-        <button id="uc-btn-clean" class="uc-btn-primary">
+        <button id="uc-btn-clean" class="uc-btn-primary" type="button">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19.36 2.72L20.78 4.14L15.06 9.85C16.13 11.39 16.28 13.24 15.38 14.44L9.06 8.12C10.26 7.22 12.11 7.38 13.65 8.44L19.36 2.72M5.93 17.57C3.92 15.56 2.69 13.16 2.35 10.92L7.23 8.83L14.67 16.27L12.58 21.15C10.34 20.81 7.94 19.58 5.93 17.57Z"/></svg>
           {t.btnClean}
         </button>
@@ -26,7 +26,7 @@ const t = (ui ?? {}) as UrlCleanerUI;
       <div class="uc-result-card">
         <div class="uc-card-header">
           <h3 class="uc-card-title">{t.labelCleaned}</h3>
-          <button id="uc-btn-copy" class="uc-copy-btn">
+          <button id="uc-btn-copy" class="uc-copy-btn" type="button">
             <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"/></svg>
             {t.btnCopy}
           </button>
@@ -161,14 +161,32 @@ const t = (ui ?? {}) as UrlCleanerUI;
     if (e.key === 'Enter') cleanUrl();
   });
 
+  async function copyText(text: string): Promise<void> {
+    if (navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return;
+    }
+
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'fixed';
+    textarea.style.inset = '0 auto auto 0';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    document.execCommand('copy');
+    textarea.remove();
+  }
+
   copyBtn.addEventListener('click', () => {
     const text = cleanedUrlEl.textContent || '';
-    navigator.clipboard.writeText(text).then(() => {
-      const origText = copyBtn.textContent;
+    copyText(text).then(() => {
+      const origHtml = copyBtn.innerHTML;
       copyBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"/></svg> ${t.btnCopied}`;
       copyBtn.classList.add('uc-copied');
       setTimeout(() => {
-        copyBtn.textContent = origText;
+        copyBtn.innerHTML = origHtml;
         copyBtn.classList.remove('uc-copied');
       }, 2000);
     });

package/src/tool/urlCleaner/i18n/de.ts

@@ -13,15 +13,15 @@ const faqData = [
   },
   {
     question: 'Beeinträchtigt das die Funktionalität der Website?',
-    answer: 'In der Regel nicht. Diese Parameter werden fast ausschließlich für Analyse und Marketing verwendet. Wenn du sie entfernst, lädt die Seite ganz normal – nur der Websitebetreiber kann nicht mehr nachvollziehen, woher dein Klick stammte.',
+    answer: 'In der Regel nicht. Diese Parameter werden fast ausschließlich für Analyse und Marketing verwendet. Wenn du sie entfernst, lädt die Seite ganz normal - nur der Websitebetreiber kann nicht mehr nachvollziehen, woher dein Klick stammte.',
   },
   {
     question: 'Ist es sicher, meine Links hier zu verarbeiten?',
-    answer: 'Absolut. Wie alle unsere Tools läuft der Prozess zu 100 % clientseitig ab. Deine Links werden niemals an unsere Server übertragen – alles geschieht privat in deinem eigenen Browser.',
+    answer: 'Absolut. Wie alle unsere Tools läuft der Prozess zu 100 % clientseitig ab. Deine Links werden niemals an unsere Server übertragen - alles geschieht privat in deinem eigenen Browser.',
   },
   {
     question: 'Warum sind meine Facebook-Links so lang?',
-    answer: 'Facebook hängt an jeden Link, der die Plattform verlässt, einen Parameter namens „fbclid" an. Damit können sie deine Aktivitäten auf anderen Websites verfolgen – selbst wenn du Drittanbieter-Werbung blockiert hast.',
+    answer: 'Facebook hängt an jeden Link, der die Plattform verlässt, einen Parameter namens "fbclid" an. Damit können sie deine Aktivitäten auf anderen Websites verfolgen - selbst wenn du Drittanbieter-Werbung blockiert hast.',
   },
 ];
 

package/src/tool/urlCleaner/i18n/es.ts

@@ -98,7 +98,7 @@ export const content: ToolLocaleContent<UrlCleanerUI> = {
     { type: 'title', text: '¿Qué es un Limpiador de Tracking de URL y por qué lo necesitas?', level: 3 },
     {
       type: 'paragraph',
-      html: 'Alguna vez has copiado un enlace para enviárselo a un amigo y te has dado cuenta de que es tres veces más largo de lo que debería ser? Ese "ruido" extra son los parámetros de rastreo. Un <strong>limpiador de tracking</strong> es una herramienta diseñada para "desnudar" la dirección web de toda la información publicitaria y de seguimiento que las grandes plataformas inyectan en cada clic que haces.',
+      html: '¿Alguna vez has copiado un enlace para enviárselo a un amigo y te has dado cuenta de que es tres veces más largo de lo que debería ser? Ese "ruido" extra son los parámetros de rastreo. Un <strong>limpiador de tracking</strong> es una herramienta diseñada para "desnudar" la dirección web de toda la información publicitaria y de seguimiento que las grandes plataformas inyectan en cada clic que haces.',
     },
     { type: 'title', text: 'Parámetros de rastreo más comunes', level: 3 },
     {

package/src/tool/urlCleaner/i18n/id.ts

@@ -13,7 +13,7 @@ const faqData = [
   },
   {
     question: 'Apakah ini mempengaruhi fungsionalitas website?',
-    answer: 'Umumnya tidak. Parameter-parameter ini hampir sepenuhnya digunakan untuk analitik dan pemasaran. Saat Anda menghapusnya, halaman akan tetap terbuka seperti biasa — hanya saja pemilik website tidak bisa melacak dari mana asal klik Anda.',
+    answer: 'Umumnya tidak. Parameter-parameter ini hampir sepenuhnya digunakan untuk analitik dan pemasaran. Saat Anda menghapusnya, halaman akan tetap terbuka seperti biasa - hanya saja pemilik website tidak bisa melacak dari mana asal klik Anda.',
   },
   {
     question: 'Apakah aman memproses tautan saya di sini?',

package/src/tool/urlCleaner/i18n/nl.ts

@@ -13,7 +13,7 @@ const faqData = [
   },
   {
     question: 'Heeft dit invloed op de werking van de website?',
-    answer: 'Doorgaans niet. Deze parameters worden vrijwel uitsluitend gebruikt voor analyse en marketing. Als je ze verwijdert, laadt de pagina gewoon — alleen kan de websitebeheerder niet meer zien waar jouw klik vandaan kwam.',
+    answer: 'Doorgaans niet. Deze parameters worden vrijwel uitsluitend gebruikt voor analyse en marketing. Als je ze verwijdert, laadt de pagina gewoon - alleen kan de websitebeheerder niet meer zien waar jouw klik vandaan kwam.',
   },
   {
     question: 'Is het veilig om mijn links hier te verwerken?',

package/src/tool/urlCleaner/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await urlCleaner.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/urlCleaner/url-tracking-cleaner.css

@@ -1,14 +1,17 @@
 .uc-root {
     width: 100%;
+    min-width: 0;
   }
 
   .uc-container {
+    container-type: inline-size;
     max-width: 900px;
     margin: 0 auto;
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
     padding-bottom: 2rem;
+    min-width: 0;
   }
 
   .uc-input-card {
@@ -22,9 +25,10 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    min-width: 0;
   }
 
-  :global(.theme-dark) .uc-input-card {
+  .theme-dark .uc-input-card {
     background: rgba(15, 23, 42, 0.75);
     border-color: rgba(255, 255, 255, 0.06);
   }
@@ -37,17 +41,19 @@
     letter-spacing: 0.05em;
   }
 
-  :global(.theme-dark) .uc-label {
+  .theme-dark .uc-label {
     color: rgb(148, 163, 184);
   }
 
   .uc-input-group {
     display: flex;
     gap: 0.75rem;
+    min-width: 0;
   }
 
   .uc-input {
     flex-grow: 1;
+    min-width: 0;
     background: white;
     border: 1px solid rgb(226, 232, 240);
     border-radius: 0.75rem;
@@ -58,7 +64,7 @@
     color: rgb(51, 65, 85);
   }
 
-  :global(.theme-dark) .uc-input {
+  .theme-dark .uc-input {
     background: rgb(15, 23, 42);
     border-color: rgb(51, 65, 85);
     color: rgb(203, 213, 225);
@@ -82,6 +88,14 @@
     gap: 0.5rem;
     transition: all 0.2s ease;
     font-size: 0.875rem;
+    justify-content: center;
+    min-height: 2.875rem;
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .uc-btn-primary svg {
+    flex: 0 0 auto;
   }
 
   .uc-btn-primary:hover {
@@ -91,7 +105,7 @@
 
   .uc-results {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: 1.5rem;
   }
 
@@ -112,9 +126,10 @@
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    min-width: 0;
   }
 
-  :global(.theme-dark) .uc-result-card {
+  .theme-dark .uc-result-card {
     background: rgba(15, 23, 42, 0.75);
     border-color: rgba(255, 255, 255, 0.06);
   }
@@ -123,6 +138,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 1rem;
   }
 
   .uc-card-title {
@@ -132,9 +148,10 @@
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 0.05em;
+    overflow-wrap: anywhere;
   }
 
-  :global(.theme-dark) .uc-card-title {
+  .theme-dark .uc-card-title {
     color: rgb(203, 213, 225);
   }
 
@@ -146,9 +163,10 @@
     padding: 1rem;
     border-radius: 0.5rem;
     border: 1px solid rgba(0, 0, 0, 0.05);
+    min-width: 0;
   }
 
-  :global(.theme-dark) .uc-url-display {
+  .theme-dark .uc-url-display {
     background: rgb(30, 41, 59);
     border-color: rgb(51, 65, 85);
     color: rgb(129, 140, 148);
@@ -167,9 +185,11 @@
     color: rgb(71, 85, 105);
     cursor: pointer;
     transition: all 0.2s ease;
+    flex: 0 0 auto;
+    white-space: nowrap;
   }
 
-  :global(.theme-dark) .uc-copy-btn {
+  .theme-dark .uc-copy-btn {
     background: rgb(30, 41, 59);
     border-color: rgb(51, 65, 85);
     color: rgb(148, 163, 184);
@@ -199,7 +219,7 @@
     border-left: 3px solid rgb(59, 130, 246);
   }
 
-  :global(.theme-dark) .uc-removed-item {
+  .theme-dark .uc-removed-item {
     background: rgba(255, 255, 255, 0.03);
   }
 
@@ -209,7 +229,7 @@
     font-size: 0.875rem;
   }
 
-  :global(.theme-dark) .uc-item-key {
+  .theme-dark .uc-item-key {
     color: rgb(203, 213, 225);
   }
 
@@ -217,6 +237,7 @@
     font-size: 0.75rem;
     color: rgb(100, 116, 139);
     margin-left: 0.5rem;
+    overflow-wrap: anywhere;
   }
 
   .uc-item-desc {
@@ -225,7 +246,7 @@
     margin: 0.25rem 0;
   }
 
-  :global(.theme-dark) .uc-item-desc {
+  .theme-dark .uc-item-desc {
     color: rgb(148, 163, 184);
   }
 
@@ -246,9 +267,10 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 1.5rem;
+    min-width: 0;
   }
 
-  :global(.theme-dark) .uc-stats-card {
+  .theme-dark .uc-stats-card {
     background: rgba(15, 23, 42, 0.75);
     border-color: rgba(255, 255, 255, 0.06);
   }
@@ -275,6 +297,74 @@
     letter-spacing: 0.04em;
   }
 
-  :global(.theme-dark) .uc-stat-label {
+  .theme-dark .uc-stat-label {
     color: rgb(148, 163, 184);
-  }
+  }
+
+  @container (max-width: 520px) {
+    .uc-container {
+      gap: 1rem;
+    }
+
+    .uc-input-card,
+    .uc-result-card,
+    .uc-stats-card {
+      border-radius: 1rem;
+      padding: 1rem;
+    }
+
+    .uc-input-group {
+      flex-direction: column;
+    }
+
+    .uc-btn-primary {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      white-space: normal;
+    }
+
+    .uc-card-header {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: 0.75rem;
+    }
+
+    .uc-copy-btn {
+      justify-content: center;
+      width: 100%;
+      border-radius: 0.75rem;
+      padding: 0.65rem 0.875rem;
+    }
+
+    .uc-stats-card {
+      grid-template-columns: 1fr;
+    }
+
+    .uc-item-val {
+      display: block;
+      margin: 0.25rem 0 0;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .uc-container {
+      gap: 1rem;
+    }
+
+    .uc-input-card,
+    .uc-result-card,
+    .uc-stats-card {
+      border-radius: 1rem;
+      padding: 1rem;
+    }
+
+    .uc-input-group {
+      flex-direction: column;
+    }
+
+    .uc-btn-primary {
+      width: 100%;
+      padding: 0.75rem 1rem;
+      white-space: normal;
+    }
+  }