@jjlmoya/utils-audiovisual 1.16.0 → 1.18.0

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

@@ -0,0 +1,141 @@
+import { bibliography } from '../bibliography';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { DepthOfFieldUI, DepthOfFieldLocaleContent } from '../index';
+
+const slug = 'alan-derinligi-hesaplama';
+const title = 'Alan Derinliği Hesaplama: Tüm Kameralar İçin Gerçek Zamanlı DoF';
+const description = 'Alan derinliğini, hiperfokal mesafeyi ve odak sınırlarını gerçek zamanlı hesaplayın. 1/3 durak diyafram hassasiyetiyle tüm sensörleri destekler.';
+
+const ui: DepthOfFieldUI = {
+    title: 'Alan Derinliği Hesaplama',
+    paramsTitle: 'Parametreler',
+    sensorLabel: 'Kamera Sensörü',
+    moreLabel: 'Daha fazla sensör…',
+    apertureLabel: 'Diyafram',
+    focalLabel: 'Odak Uzaklığı',
+    distanceLabel: 'Obje Mesafesi',
+    metersLabel: 'm',
+    feetLabel: 'ft',
+    resultsTitle: 'Sonuçlar',
+    totalDofLabel: 'Toplam Alan Derinliği',
+    infiniteLabel: 'Sonsuz',
+    nearLimitLabel: 'Yakın Sınır',
+    farLimitLabel: 'Uzak Sınır',
+    hyperfocalLabel: 'Hiperfokal',
+    cocLabel: 'Bulanıklık Halkası',
+    cocUnit: 'mm',
+    showDetailsLabel: 'Teknik detayları göster',
+    hideDetailsLabel: 'Teknik detayları gizle',
+    errorBelowFocal: 'Obje mesafesi odak uzaklığından büyük olmalıdır.',
+};
+
+const faq: DepthOfFieldLocaleContent['faq'] = [
+    {
+        question: 'Alan derinliği nedir?',
+        answer: 'Alan derinliği (DoF), bir sahnedeki kabul edilebilir düzeyde net görünen mesafe aralığıdır. Diyafram, odak uzaklığı, obje mesafesi ve sensör boyutu tarafından belirlenir.',
+    },
+    {
+        question: 'Hiperfokal mesafe nedir?',
+        answer: 'Hiperfokal mesafe, sonsuzdaki nesnelerin hala kabul edilebilir düzeyde net olduğu en yakın odaklama mesafesidir. Bu mesafeye odaklanmak alan derinliğini maksimize eder.',
+    },
+    {
+        question: 'Daha geniş diyafram (küçük f-değeri) neden alan derinliğini azaltır?',
+        answer: 'Geniş diyafram, lensin daha büyük bir alanından ışık toplar, bu da odak dışı noktalar için bulanıklık halkasını büyüterek net alan derinliğini daraltır.',
+    },
+    {
+        question: 'Sensör boyutu alan derinliğini nasıl etkiler?',
+        answer: 'Büyük sensörler daha yüksek bulanıklık halkası eşiği kullanır. Ancak eşdeğer bakış açılarında, büyük sensörler daha uzun odak uzaklığı gerektirdiği için genellikle daha sığ alan derinliği üretir.',
+    },
+];
+
+const howTo: DepthOfFieldLocaleContent['howTo'] = [
+    {
+        name: 'Kamera sensörünüzü seçin',
+        text: 'Kamera gövdenize uygun olan sensör formatını seçin. Bu, hesaplamalarda kullanılacak bulanıklık halkası (CoC) değerini belirler.',
+    },
+    {
+        name: 'Diyafram ve odak uzaklığını ayarlayın',
+        text: 'Diyaframı 1/3 durak adımlarla seçin. Odak uzaklığı sürgüsü, geniş açıda daha hassas ayar yapabilmeniz için logaritmik ölçek kullanır.',
+    },
+    {
+        name: 'Obje mesafesini belirleyin',
+        text: 'Kamera ile ana objeniz arasındaki mesafeyi ayarlayın. İhtiyacınıza göre metre ve fit birimleri arasında geçiş yapın.',
+    },
+    {
+        name: 'Sonuçları okuyun',
+        text: 'Odak Çubuğu, objenizin etrafındaki net bölgeyi görselleştirir. Yakın ve uzak sınırlar kabul edilebilir odak sınırlarını gösterir.',
+    },
+];
+
+const seo: DepthOfFieldLocaleContent['seo'] = [
+    { type: 'title', text: 'Fotoğraf ve Sinemada Alan Derinliğini Anlamak', level: 2 },
+    { type: 'paragraph', html: 'Alan derinliği, fotoğrafçılar ve sinemacılar için en güçlü yaratıcı araçlardan biridir. <strong>Sığ alan derinliği</strong> konuyu arka plandan ayırırken, <strong>geniş alan derinliği</strong> manzarayı net tutar.' },
+
+    { type: 'title', text: 'Alan Derinliğini Kontrol Eden Üç Değişken', level: 3 },
+    { type: 'table', headers: ['Değişken', 'Artış →', 'DoF Üzerindeki Etkisi'], rows: [
+        ['Diyafram', 'f/1.4 → f/16', 'Daha geniş diyafram = daha sığ DoF'],
+        ['Odak Uzaklığı', '24mm → 200mm', 'Daha uzun odak = aynı mesafede daha sığ DoF'],
+        ['Obje Mesafesi', '1m → 10m', 'Daha uzak obje = daha geniş DoF'],
+    ]},
+
+    { type: 'title', text: 'Hiperfokal Mesafe: Maksimum Netlik', level: 3 },
+    { type: 'paragraph', html: '<strong>Hiperfokal mesafeye</strong> odaklandığınızda, bu mesafenin yarısından sonsuza kadar her şey net görünür. Manzara fotoğrafçıları bu tekniği sıkça kullanır.' },
+    { type: 'tip', title: 'Pratik ipucu', html: 'Sokak fotoğrafçılığı için odağınızı hiperfokal mesafeye ayarlayın. APS-C sensörde 35mm lens ve f/8 ile hiperfokal yaklaşık <strong>4 metredir</strong>: 2 metreden sonsuza her şey net olacaktır.' },
+
+    { type: 'title', text: 'Sensör Boyutu ve Bulanıklık Halkası', level: 3 },
+    { type: 'paragraph', html: '<strong>Bulanıklık halkası (CoC)</strong>, kabul edilebilir netliğin sınırıdır. Full Frame sensörde CoC 0.030mm iken akıllı telefonda ~0.006mm\'dir. Daha küçük CoC, daha katı netlik kriteri demektir.' },
+    { type: 'stats', columns: 3, items: [
+        { label: 'Full Frame', value: '0.030 mm', icon: 'mdi:camera' },
+        { label: 'APS-C', value: '0.019 mm', icon: 'mdi:camera-outline' },
+        { label: 'Akıllı Telefon', value: '0.006 mm', icon: 'mdi:cellphone' },
+    ]},
+
+    { type: 'title', text: 'Sinemada DoF: Odak Uzaklığı vs Sensör', level: 3 },
+    { type: 'paragraph', html: 'Super 35 formatında çekim yapan sinemacılar, "sinematik görünüm" oluşturmak için genellikle perspektifi sıkıştıran uzun odak uzaklıklarını tercih ederler.' },
+    { type: 'diagnostic', variant: 'success', title: 'Odak Dağılım Kuralı', icon: 'mdi:lightbulb-outline', badge: 'Profil Teknik', html: '3 metredeki bir obje için 50mm ve f/2.8 ile: Net alan objenin arkasında, önüne göre her zaman daha fazladır; oran yaklaşık <strong>2:1</strong>\'dir.' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'tr',
+};
+
+export const content: DepthOfFieldLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

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

@@ -0,0 +1,141 @@
+import { bibliography } from '../bibliography';
+import type { WithContext, FAQPage, HowTo, SoftwareApplication } from 'schema-dts';
+import type { DepthOfFieldUI, DepthOfFieldLocaleContent } from '../index';
+
+const slug = 'depth-of-field-calculator';
+const title = '景深计算器：全相机实时景深计算';
+const description = '实时计算景深、超焦距和焦点限制。支持所有传感器尺寸，具备 1/3 档光圈精度。';
+
+const ui: DepthOfFieldUI = {
+    title: '景深计算器',
+    paramsTitle: '设定参数',
+    sensorLabel: '相机传感器',
+    moreLabel: '更多传感器…',
+    apertureLabel: '光圈值',
+    focalLabel: '焦距',
+    distanceLabel: '拍摄距离',
+    metersLabel: 'm',
+    feetLabel: 'ft',
+    resultsTitle: '计算结果',
+    totalDofLabel: '总景深',
+    infiniteLabel: '无穷远',
+    nearLimitLabel: '近景界限',
+    farLimitLabel: '远景界限',
+    hyperfocalLabel: '超焦距',
+    cocLabel: '弥散圆 (CoC)',
+    cocUnit: 'mm',
+    showDetailsLabel: '显示技术细节',
+    hideDetailsLabel: '隐藏技术细节',
+    errorBelowFocal: '拍摄距离必须大于焦距。',
+};
+
+const faq: DepthOfFieldLocaleContent['faq'] = [
+    {
+        question: '什么是景深？',
+        answer: '景深 (DoF) 是指场景中在最终图像里显得清晰的范围。它由光圈、焦距、拍摄距离和传感器尺寸决定。',
+    },
+    {
+        question: '什么是超焦距？',
+        answer: '超焦距是指在对无穷远处的物体依然能保持清晰的情况下，最近的对焦距离。对焦在此距离可以最大化景深。',
+    },
+    {
+        question: '为什么较大的光圈（较小的 f 值）会减小景深？',
+        answer: '较大的光圈通过镜头的更大区域收集光线，这增加了焦点外点的弥散圆大小，从而收窄了清晰范围。',
+    },
+    {
+        question: '传感器尺寸如何影响景深？',
+        answer: '较大的传感器使用更大的弥散圆阈值。但在相同视角下，大传感器通常产生更浅的景深，因为它们需要更长的焦距。',
+    },
+];
+
+const howTo: DepthOfFieldLocaleContent['howTo'] = [
+    {
+        name: '选择相机传感器',
+        text: '选择与您的相机机身匹配的传感器格式。这将设定计算中使用的弥散圆 (CoC) 值。',
+    },
+    {
+        name: '设定光圈和焦距',
+        text: '以 1/3 档为增量选择光圈。焦距滑块采用对数刻度，便于在广角端进行精细调整。',
+    },
+    {
+        name: '设定拍摄距离',
+        text: '设置相机与主主体之间的距离。根据需要切换米和英尺单位。',
+    },
+    {
+        name: '查看结果',
+        text: '对焦条可视化主体周围的清晰区域。近景和远景界限显示了精确的焦点边界。',
+    },
+];
+
+const seo: DepthOfFieldLocaleContent['seo'] = [
+    { type: 'title', text: '深入理解摄影与电影中的景深', level: 2 },
+    { type: 'paragraph', html: '景深是摄影师和摄像师最强大的创意工具之一。<strong>浅景深</strong>可以将主体从干扰背景中分离，而<strong>深景深</strong>则能让整个风景从前景到地平线保持清晰。' },
+
+    { type: 'title', text: '控制景深的三大变量', level: 3 },
+    { type: 'table', headers: ['变量', '变化趋势 →', '对景深的影响'], rows: [
+        ['光圈', 'f/1.4 → f/16', '光圈越大 = 景深越浅'],
+        ['焦距', '24mm → 200mm', '焦距越长 = 景深越浅（同一距离下）'],
+        ['拍摄距离', '1m → 10m', '主体越远 = 景深越深'],
+    ]},
+
+    { type: 'title', text: '超焦距：实现最大清晰度', level: 3 },
+    { type: 'paragraph', html: '当您对焦在<strong>超焦距</strong>时，从该距离的一半到无穷远的一切都会显得清晰。风景摄影师常用此技术确保前景和远山同时清晰。' },
+    { type: 'tip', title: '实践建议', html: '对于街头摄影，将焦点设为超焦距。在 APS-C 上使用 35mm 镜头并设置 f/8 时，超焦距约为 <strong>4 米</strong>：从 2 米到无穷远的一切都将保持清晰。' },
+
+    { type: 'title', text: '传感器尺寸与弥散圆', level: 3 },
+    { type: 'paragraph', html: '<strong>弥散圆 (CoC)</strong> 是定义“清晰度”的阈值。全画幅传感器的 CoC 为 0.030mm，而智能手机约为 0.006mm。CoC 值越小意味着清晰度要求越严格。' },
+    { type: 'stats', columns: 3, items: [
+        { label: '全画幅', value: '0.030 mm', icon: 'mdi:camera' },
+        { label: 'APS-C', value: '0.019 mm', icon: 'mdi:camera-outline' },
+        { label: '智能手机', value: '0.006 mm', icon: 'mdi:cellphone' },
+    ]},
+
+    { type: 'title', text: '电影中的景深：焦距 vs. 传感器', level: 3 },
+    { type: 'paragraph', html: '在 Super 35（接近 APS-C）上拍摄的电影人经常使用较长焦距来压缩透视，这也会收窄景深，营造出“电影感”。大光圈 85mm 是经典人像选择。' },
+    { type: 'diagnostic', variant: 'success', title: '焦点分布规律', icon: 'mdi:lightbulb-outline', badge: '专家技法', html: '对于 3 米处的主体，使用 50mm f/2.8 全画幅拍摄：主体后的清晰区域总是比主体前大，比例约为 <strong>2:1</strong>。' },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faq.map((item) => ({
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: { '@type': 'Answer', text: item.answer },
+    })),
+};
+
+const howToSchema: WithContext<HowTo> = {
+    '@context': 'https://schema.org',
+    '@type': 'HowTo',
+    name: title,
+    description,
+    step: howTo.map((step) => ({
+        '@type': 'HowToStep',
+        name: step.name,
+        text: step.text,
+    })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+    '@context': 'https://schema.org',
+    '@type': 'SoftwareApplication',
+    name: title,
+    description,
+    applicationCategory: 'UtilitiesApplication',
+    operatingSystem: 'Web',
+    offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+    inLanguage: 'zh',
+};
+
+export const content: DepthOfFieldLocaleContent = {
+    slug,
+    title,
+    description,
+    ui,
+    seo,
+    faq,
+    bibliography,
+    howTo,
+    schemas: [faqSchema as any, howToSchema as any, appSchema],
+};

package/src/tool/depthOfFieldCalculator/index.ts

@@ -0,0 +1,10 @@
+import type { ToolDefinition, AudiovisualToolEntry } from '../../types';
+import { depthOfFieldCalculator } from './entry';
+export * from './entry';
+
+export const DEPTH_OF_FIELD_CALCULATOR_TOOL: ToolDefinition = {
+    entry: depthOfFieldCalculator as unknown as AudiovisualToolEntry,
+    Component: () => import('./component.astro'),
+    SEOComponent: () => import('./seo.astro'),
+    BibliographyComponent: () => import('./bibliography.astro'),
+};

package/src/tool/depthOfFieldCalculator/logic.ts

@@ -0,0 +1,91 @@
+
+export interface SensorPreset {
+    key: string;
+    label: string;
+    shortLabel: string;
+    coc: number;
+}
+
+export const SENSOR_PRESETS: SensorPreset[] = [
+    { key: 'ff',         label: 'Full Frame (35mm)',   shortLabel: 'FF',    coc: 0.030 },
+    { key: 'apsc-canon', label: 'APS-C Canon',          shortLabel: 'APS-C', coc: 0.019 },
+    { key: 'apsc',       label: 'APS-C Nikon / Sony',   shortLabel: 'APS-N', coc: 0.020 },
+    { key: 'mft',        label: 'Micro Four Thirds',     shortLabel: 'MFT',   coc: 0.015 },
+    { key: '1inch',      label: '1" Sensor',             shortLabel: '1"',    coc: 0.011 },
+    { key: 'phone',      label: 'Smartphone',            shortLabel: 'Phone', coc: 0.006 },
+];
+
+export const QUICK_SENSOR_KEYS = ['ff', 'apsc-canon', 'mft', 'phone'];
+
+export const F_STOPS: number[] = [
+    1.0, 1.1, 1.2, 1.4, 1.6, 1.8,
+    2.0, 2.2, 2.5, 2.8, 3.2, 3.5,
+    4.0, 4.5, 5.0, 5.6, 6.3, 7.1,
+    8.0, 9.0, 10, 11, 13, 14, 16, 18, 20, 22,
+];
+
+export interface DoFResult {
+    hyperfocal: number;
+    nearLimit: number;
+    farLimit: number;
+    totalDoF: number;
+    isInfinite: boolean;
+    hasError: boolean;
+    errorCode: 'BELOW_FOCAL' | null;
+}
+
+export function calculateDoF(
+    subjectMetres: number,
+    focalMm: number,
+    aperture: number,
+    cocMm: number,
+): DoFResult {
+    const fM = focalMm / 1000;
+    const cM = cocMm / 1000;
+
+    if (subjectMetres <= fM) {
+        return { hyperfocal: 0, nearLimit: 0, farLimit: 0, totalDoF: 0, isInfinite: false, hasError: true, errorCode: 'BELOW_FOCAL' };
+    }
+
+    const H = (fM * fM) / (aperture * cM) + fM;
+    const nearLimit = (subjectMetres * (H - fM)) / (H + subjectMetres - 2 * fM);
+    const isInfinite = subjectMetres >= H;
+    const farLimit = isInfinite ? Infinity : (subjectMetres * (H - fM)) / (H - subjectMetres);
+    const totalDoF = isInfinite ? Infinity : farLimit - nearLimit;
+
+    return { hyperfocal: H, nearLimit, farLimit, totalDoF, isInfinite, hasError: false, errorCode: null };
+}
+
+const LOG_FOCAL_MIN = Math.log(8);
+const LOG_FOCAL_MAX = Math.log(800);
+const LOG_SUBJECT_MIN = Math.log(0.5);
+const LOG_SUBJECT_MAX = Math.log(200);
+
+export function sliderToFocal(index: number, steps: number): number {
+    const t = index / (steps - 1);
+    return Math.round(Math.exp(LOG_FOCAL_MIN + t * (LOG_FOCAL_MAX - LOG_FOCAL_MIN)));
+}
+
+export function focalToSlider(focal: number, steps: number): number {
+    const t = (Math.log(focal) - LOG_FOCAL_MIN) / (LOG_FOCAL_MAX - LOG_FOCAL_MIN);
+    return Math.round(t * (steps - 1));
+}
+
+export function sliderToSubject(index: number, steps: number): number {
+    const t = index / (steps - 1);
+    return Math.exp(LOG_SUBJECT_MIN + t * (LOG_SUBJECT_MAX - LOG_SUBJECT_MIN));
+}
+
+export function subjectToSlider(subject: number, steps: number): number {
+    const t = (Math.log(subject) - LOG_SUBJECT_MIN) / (LOG_SUBJECT_MAX - LOG_SUBJECT_MIN);
+    return Math.round(t * (steps - 1));
+}
+
+export function formatDistance(metres: number, useFeet: boolean): string {
+    if (!isFinite(metres)) return '∞';
+    const value = useFeet ? metres * 3.28084 : metres;
+    const unit = useFeet ? 'ft' : 'm';
+    if (value >= 1000) return `${(value / 1000).toFixed(1)} km`;
+    if (value < 1) return `${(value * 100).toFixed(0)} cm`;
+    return value >= 10 ? `${value.toFixed(1)} ${unit}` : `${value.toFixed(2)} ${unit}`;
+}

package/src/tool/depthOfFieldCalculator/seo.astro

@@ -0,0 +1,15 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { depthOfFieldCalculator } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props;
+const content = await depthOfFieldCalculator.i18n[locale]?.();
+if (!content) return null;
+---
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/exifCleaner/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+    {
+        name: "Exchangeable Image File Format (EXIF) - Wikipedia",
+        url: "https://de.wikipedia.org/wiki/Exchangeable_Image_File_Format",
+    },
+    {
+        name: "W3C - Metadaten in Bildern",
+        url: "https://www.w3.org/community/image-metadata/",
+    },
+];

package/src/tool/exifCleaner/entry.ts

@@ -51,3 +51,5 @@ export const exifCleaner: AudiovisualToolEntry<ExifCleanerUI> = {
         zh: async () => (await import('./i18n/zh')).content as unknown as ExifCleanerLocaleContent,
     },
 };
+
+export { bibliography } from './bibliography';

package/src/tool/exifCleaner/exif-metadata-cleaner-remove-gps-photo-privacy.css

@@ -1,4 +1,4 @@
-:global(.ec-root) {
+.ec-root {
   --ec-bg: #fff;
   --ec-bg-elevated: #f8fafc;
   --ec-border: #e2e8f0;
@@ -14,7 +14,7 @@
   margin: 0 auto;
 }
 
-:global(.theme-dark .ec-root) {
+.theme-dark .ec-root {
   --ec-bg: #18181b;
   --ec-bg-elevated: #27272a;
   --ec-border: #3f3f46;
@@ -26,7 +26,7 @@
   --ec-shadow: rgba(0, 0, 0, 0.3);
 }
 
-:global(.ec-card) {
+.ec-card {
   background: var(--ec-bg);
   border: 1px solid var(--ec-border);
   border-radius: 3rem;
@@ -36,7 +36,7 @@
   overflow: hidden;
 }
 
-:global(.ec-drop) {
+.ec-drop {
   padding: 4rem 2rem;
   border: 3px dashed var(--ec-border);
   border-radius: 2.5rem;
@@ -49,13 +49,13 @@
   transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-:global(.ec-drop:hover),
-:global(.ec-drop-active) {
+.ec-drop:hover,
+.ec-drop-active {
   border-color: var(--ec-accent);
   background: var(--ec-accent-alpha-hover);
 }
 
-:global(.ec-drop-icon) {
+.ec-drop-icon {
   width: 6rem;
   height: 6rem;
   background: var(--ec-accent-alpha);
@@ -66,19 +66,19 @@
   color: var(--ec-accent);
 }
 
-:global(.ec-drop-icon svg) {
+.ec-drop-icon svg {
   width: 3rem;
   height: 3rem;
 }
 
-:global(.ec-title) {
+.ec-title {
   font-size: 2.5rem;
   font-weight: 950;
   color: var(--ec-text);
   margin: 0;
 }
 
-:global(.ec-subtitle) {
+.ec-subtitle {
   font-size: 1.15rem;
   color: var(--ec-text-muted);
   max-width: 500px;
@@ -86,14 +86,14 @@
   font-weight: 700;
 }
 
-:global(.ec-badges) {
+.ec-badges {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap;
   justify-content: center;
 }
 
-:global(.ec-badge) {
+.ec-badge {
   padding: 0.6rem 1.25rem;
   background: var(--ec-bg-elevated);
   border-radius: 2rem;
@@ -105,13 +105,13 @@
   gap: 0.5rem;
 }
 
-:global(.ec-badge svg) {
+.ec-badge svg {
   width: 1rem;
   height: 1rem;
   flex-shrink: 0;
 }
 
-:global(.ec-processing) {
+.ec-processing {
   padding: 5rem;
   display: flex;
   flex-direction: column;
@@ -120,7 +120,7 @@
   gap: 1.5rem;
 }
 
-:global(.ec-spinner) {
+.ec-spinner {
   width: 4rem;
   height: 4rem;
   border: 4px solid var(--ec-accent-alpha);
@@ -129,45 +129,45 @@
   animation: ec-spin 0.8s linear infinite;
 }
 
-:global(.ec-processing-text) {
+.ec-processing-text {
   font-weight: 800;
   color: var(--ec-text);
   margin: 0;
 }
 
-:global(.ec-result) {
+.ec-result {
   padding: 2.5rem;
   display: flex;
   flex-direction: column;
   animation: ec-slide-up 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
 }
 
-:global(.ec-result-layout) {
+.ec-result-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 3rem;
 }
 
 @media (max-width: 800px) {
-  :global(.ec-result-layout) {
+  .ec-result-layout {
     grid-template-columns: 1fr;
   }
 }
 
-:global(.ec-preview-col) {
+.ec-preview-col {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-:global(.ec-preview-img) {
+.ec-preview-img {
   width: 100%;
   border-radius: 1.5rem;
   box-shadow: 0 20px 50px var(--ec-shadow);
   display: block;
 }
 
-:global(.ec-metadata) {
+.ec-metadata {
   background: var(--ec-bg-elevated);
   border: 1px solid var(--ec-border);
   border-radius: 1.25rem;
@@ -178,7 +178,7 @@
   justify-content: center;
 }
 
-:global(.ec-no-metadata) {
+.ec-no-metadata {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -187,14 +187,14 @@
   text-align: center;
 }
 
-:global(.ec-metadata-title) {
+.ec-metadata-title {
   color: var(--ec-accent);
   font-weight: 700;
   margin-bottom: 1rem;
   font-size: 0.9rem;
 }
 
-:global(.ec-metadata-list) {
+.ec-metadata-list {
   list-style: none;
   padding: 0;
   margin: 0;
@@ -203,7 +203,7 @@
   gap: 0.75rem;
 }
 
-:global(.ec-metadata-list li) {
+.ec-metadata-list li {
   display: flex;
   justify-content: space-between;
   gap: 1rem;
@@ -212,21 +212,21 @@
   color: var(--ec-text);
 }
 
-:global(.ec-metadata-list li span:first-child) {
+.ec-metadata-list li span:first-child {
   font-weight: 700;
 }
 
-:global(.ec-metadata-list li span:last-child) {
+.ec-metadata-list li span:last-child {
   color: var(--ec-text-muted);
 }
 
-:global(.ec-actions-col) {
+.ec-actions-col {
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
 }
 
-:global(.ec-btn) {
+.ec-btn {
   padding: 1.25rem;
   border-radius: 1.5rem;
   font-weight: 950;
@@ -240,29 +240,29 @@
   transition: all 0.2s;
 }
 
-:global(.ec-btn svg) {
+.ec-btn svg {
   width: 1.25rem;
   height: 1.25rem;
 }
 
-:global(.ec-btn-primary) {
+.ec-btn-primary {
   background: var(--ec-accent);
   color: #fff;
   box-shadow: 0 15px 35px -10px var(--ec-accent);
 }
 
-:global(.ec-btn-primary:hover) {
+.ec-btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 20px 45px -10px var(--ec-accent);
 }
 
-:global(.ec-btn-secondary) {
+.ec-btn-secondary {
   background: var(--ec-bg-elevated);
   border: 1px solid var(--ec-border);
   color: var(--ec-text);
 }
 
-:global(.ec-btn-secondary:hover) {
+.ec-btn-secondary:hover {
   border-color: var(--ec-accent);
   color: var(--ec-accent);
 }
@@ -286,4 +286,4 @@
     opacity: 1;
     transform: translateY(0);
   }
-}
+}