@jjlmoya/utils-social 1.1.0

package/src/tool/tinderPhotoOptimizer/component.astro

@@ -0,0 +1,1514 @@
+---
+import type { KnownLocale } from '../../types';
+import type { TinderPhotoOptimizerUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as TinderPhotoOptimizerUI;
+---
+
+<div class="tfo-root">
+  <div class="tfo-container" id="tfo-optimizer">
+    <input type="file" id="image-input" accept=".jpg,.jpeg,.png,.webp,.gif" style="display: none;" />
+
+    <section class="tfo-editor">
+      <div class="tfo-simulator-wrapper" id="preview-container">
+        <div id="ai-loader" class="tfo-ai-loader tfo-hidden">
+          <div class="tfo-loader-content">
+            <div class="tfo-scanner-bar"></div>
+            <p id="ai-loader-text">{t.loaderAnalyzing}</p>
+          </div>
+        </div>
+
+        <div class="tfo-device">
+          <div class="tfo-status-bar">
+            <span class="tfo-time">9:41</span>
+            <div class="tfo-dynamic-island"></div>
+            <div class="tfo-status-icons">
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3C6.95 3 3.15 4.85 0 7.23L12 22 24 7.25C20.85 4.87 17.05 3 12 3z"/></svg>
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/></svg>
+            </div>
+          </div>
+
+          <div class="tfo-app-header">
+            <div class="tfo-icon-placeholder"></div>
+            <div class="tfo-logo">
+              <svg width="30" height="30" viewBox="0 0 24 24">
+                <defs>
+                  <linearGradient id="tfoFlameGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+                    <stop offset="0%" stop-color="#FD297B" />
+                    <stop offset="100%" stop-color="#FF5864" />
+                  </linearGradient>
+                </defs>
+                <path fill="url(#tfoFlameGrad)" d="M12.51 21s4.89-2 4.89-7.14c0-3.32-2.55-5.26-4.52-6.57-1.42.34-3.53 1.55-3.53 4.28 0 2.27 1.89 3.1 1.89 4.84 0 2.11-2.14 3.03-3.6 3.03-1.63 0-3.14-.98-3.14-3.32 0-3.8 2.55-6.68 5.4-10.12C11.51 2 12.51 2 12.51 2c-.67 2.01 1.39 3.63 2.5 5.23C16.89 9.87 19.33 11.52 19.33 15c0 5-5.83 6-6.82 6z"/>
+              </svg>
+            </div>
+            <div class="tfo-settings-icon">
+              <button id="reset-tool" class="tfo-reset-btn" title="Reset" style="display: none;">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
+              </button>
+            </div>
+          </div>
+
+          <div class="tfo-card-container">
+            <div class="tfo-main-card" id="drop-zone">
+              <canvas id="editor-canvas" class="tfo-canvas"></canvas>
+
+              <div class="tfo-upload-overlay" id="upload-overlay">
+                <div class="tfo-upload-circle">
+                  <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                </div>
+                <h3>{t.uploadTitle}</h3>
+                <p>{t.uploadSubtitle}</p>
+              </div>
+
+              <div class="tfo-card-overlay">
+                <div class="tfo-progress">
+                  <div class="tfo-segment tfo-segment--active"></div>
+                  <div class="tfo-segment"></div>
+                  <div class="tfo-segment"></div>
+                </div>
+                <div class="tfo-card-info">
+                  <div class="tfo-primary-info">
+                    <h2 class="tfo-name">{t.simulatorName}</h2>
+                    <div class="tfo-badge">
+                      <svg width="12" height="12" viewBox="0 0 24 24" fill="#fff" stroke="#fff" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
+                    </div>
+                  </div>
+                  <div class="tfo-secondary-info">
+                    <span class="tfo-job">{t.simulatorJob}</span>
+                    <div class="tfo-tags">
+                      <span class="tfo-tag">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
+                        {t.simulatorCity}
+                      </span>
+                      <span class="tfo-tag">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
+                        {t.simulatorDistance}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="tfo-grid-overlay" id="grid-overlay" style="display: grid;">
+                <div></div><div></div><div></div>
+                <div></div><div></div><div></div>
+                <div></div><div></div><div></div>
+              </div>
+
+              <div class="tfo-deadzones" id="deadzones-overlay" style="display: block;">
+                <div class="tfo-deadzone tfo-deadzone--top"><span>{t.deadzoneTop}</span></div>
+                <div class="tfo-deadzone tfo-deadzone--bottom"><span>{t.deadzoneBottom}</span></div>
+              </div>
+            </div>
+          </div>
+
+          <div class="tfo-device-actions">
+            <button class="tfo-btn-circular tfo-btn-rewind" title="Rewind">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#f6be00" stroke-width="2.5"><path d="M2.5 2v6h6M2.66 15.57a10 10 0 1 0 .57-8.38"/></svg>
+            </button>
+            <button class="tfo-btn-circular tfo-btn-nope" title="Nope">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#f63a6e" stroke-width="3"><path d="M18 6L6 18M6 6l12 12"/></svg>
+            </button>
+            <button class="tfo-btn-circular tfo-btn-superlike" title="Super Like">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="#3CA4FF"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
+            </button>
+            <button class="tfo-btn-circular tfo-btn-like" title="Like">
+              <svg width="28" height="28" viewBox="0 0 24 24" fill="#1BE4A1"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+            </button>
+            <button class="tfo-btn-circular tfo-btn-boost" title="Boost">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="#a65cf0"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
+            </button>
+          </div>
+
+          <div class="tfo-nav-bar">
+            <div class="tfo-nav-item tfo-nav-item--active">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M12.51 21s4.89-2 4.89-7.14c0-3.32-2.55-5.26-4.52-6.57-1.42.34-3.53 1.55-3.53 4.28 0 2.27 1.89 3.1 1.89 4.84 0 2.11-2.14 3.03-3.6 3.03-1.63 0-3.14-.98-3.14-3.32 0-3.8 2.55-6.68 5.4-10.12C11.51 2 12.51 2 12.51 2c-.67 2.01 1.39 3.63 2.5 5.23C16.89 9.87 19.33 11.52 19.33 15c0 5-5.83 6-6.82 6z"/></svg>
+            </div>
+            <div class="tfo-nav-item"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></div>
+            <div class="tfo-nav-item"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></div>
+            <div class="tfo-nav-item"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+            <div class="tfo-nav-item"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div>
+          </div>
+        </div>
+      </div>
+
+      <div class="tfo-analysis-board">
+        <div class="tfo-analysis-col tfo-analysis-col--success" id="group-success">
+          <div class="tfo-col-header">
+            <div class="tfo-col-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
+            </div>
+            <span>{t.analysisSuccess}</span>
+          </div>
+          <div class="tfo-alerts-stack" id="stack-success"></div>
+        </div>
+        <div class="tfo-analysis-col tfo-analysis-col--warning" id="group-warning">
+          <div class="tfo-col-header">
+            <div class="tfo-col-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+            </div>
+            <span>{t.analysisWarning}</span>
+          </div>
+          <div class="tfo-alerts-stack" id="stack-warning"></div>
+        </div>
+        <div class="tfo-analysis-col tfo-analysis-col--error" id="group-error">
+          <div class="tfo-col-header">
+            <div class="tfo-col-icon">
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
+            </div>
+            <span>{t.analysisError}</span>
+          </div>
+          <div class="tfo-alerts-stack" id="stack-error"></div>
+        </div>
+      </div>
+    </section>
+
+    <aside class="tfo-sidebar">
+      <div class="tfo-panel">
+        <h3>{t.panelManual}</h3>
+        <div class="tfo-control-group">
+          <label>{t.labelZoom} <span>1.0x</span></label>
+          <input type="range" id="zoom-slider" min="1" max="3" step="0.1" value="1" />
+        </div>
+        <div class="tfo-control-group">
+          <label>{t.labelBrightness} <span>100%</span></label>
+          <input type="range" id="brightness-slider" min="50" max="150" step="1" value="100" />
+        </div>
+      </div>
+
+      <div class="tfo-panel">
+        <h3>{t.panelVisualization}</h3>
+        <div class="tfo-toggles-grid">
+          <label class="tfo-switch-item">
+            <div class="tfo-switch-info">
+              <span class="tfo-switch-label">{t.toggleGrid}</span>
+              <span class="tfo-switch-desc">{t.toggleGridDesc}</span>
+            </div>
+            <div class="tfo-switch-wrapper">
+              <input type="checkbox" id="toggle-grid-switch" checked />
+              <span class="tfo-track"></span>
+            </div>
+          </label>
+          <label class="tfo-switch-item">
+            <div class="tfo-switch-info">
+              <span class="tfo-switch-label">{t.toggleDeadzones}</span>
+              <span class="tfo-switch-desc">{t.toggleDeadzonesDesc}</span>
+            </div>
+            <div class="tfo-switch-wrapper">
+              <input type="checkbox" id="toggle-deadzones-switch" checked />
+              <span class="tfo-track"></span>
+            </div>
+          </label>
+          <label class="tfo-switch-item" id="face-box-container" style="opacity: 0.5; pointer-events: none;">
+            <div class="tfo-switch-info">
+              <span class="tfo-switch-label">{t.toggleFaceBox}</span>
+              <span class="tfo-switch-desc">{t.toggleFaceBoxDesc}</span>
+            </div>
+            <div class="tfo-switch-wrapper">
+              <input type="checkbox" id="toggle-face-box-switch" checked />
+              <span class="tfo-track"></span>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      <div class="tfo-panel">
+        <h3>{t.panelMetrics}</h3>
+        <div class="tfo-metrics-grid">
+          <div class="tfo-metric-card">
+            <span class="tfo-metric-value" id="metric-face-size">0%</span>
+            <span class="tfo-metric-label">{t.metricFaceSize}</span>
+          </div>
+          <div class="tfo-metric-card">
+            <span class="tfo-metric-value" id="metric-eye-line">--</span>
+            <span class="tfo-metric-label">{t.metricEyeLine}</span>
+          </div>
+          <div class="tfo-metric-card">
+            <span class="tfo-metric-value" id="metric-coverage">--</span>
+            <span class="tfo-metric-label">{t.metricCoverage}</span>
+          </div>
+          <div class="tfo-metric-card">
+            <span class="tfo-metric-value" id="metric-mood">--</span>
+            <span class="tfo-metric-label">{t.metricMood}</span>
+          </div>
+          <div class="tfo-metric-card">
+            <span class="tfo-metric-value" id="metric-quality">--</span>
+            <span class="tfo-metric-label">{t.metricQuality}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="tfo-panel tfo-actions-panel">
+        <div class="tfo-action-grid">
+          <button class="tfo-action-btn" id="relaunch-ai">
+            <div class="tfo-btn-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M23 4v6h-6M1 20v-6h6M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+            </div>
+            <span>{t.btnRescan}</span>
+          </button>
+          <button class="tfo-action-btn" id="auto-focus" style="display: none;">
+            <div class="tfo-btn-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="3"/></svg>
+            </div>
+            <span>{t.btnAutoFocus}</span>
+          </button>
+          <button class="tfo-action-btn" id="manual-face">
+            <div class="tfo-btn-icon">
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6"/><path d="M16 11h6"/></svg>
+            </div>
+            <span>{t.btnMarkFace}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="tfo-panel">
+        <h3>{t.panelExport}</h3>
+        <p class="tfo-export-desc">{t.panelExportDesc}</p>
+        <button class="tfo-export-btn" id="export-button">{t.btnDownload}</button>
+      </div>
+    </aside>
+  </div>
+</div>
+
+<script is:inline src="https://cdn.jsdelivr.net/npm/face-api.js@0.22.2/dist/face-api.min.js"></script>
+
+<script>
+  import { TinderOptimizerEngine } from './logic';
+
+  class TinderOptimizerUI {
+    private engine: TinderOptimizerEngine;
+    private canvas: HTMLCanvasElement;
+    private input: HTMLInputElement;
+    private dropZone: HTMLElement;
+    private zoomSlider: HTMLInputElement;
+    private brightnessSlider: HTMLInputElement;
+    private exportBtn: HTMLButtonElement;
+    private toggleGridSwitch: HTMLInputElement;
+    private toggleDeadzonesSwitch: HTMLInputElement;
+    private toggleFaceBoxSwitch: HTMLInputElement;
+    private faceBoxContainer: HTMLElement;
+    private relaunchAiBtn: HTMLButtonElement;
+    private autofocusBtn: HTMLButtonElement;
+    private manualFaceBtn: HTMLButtonElement;
+    private aiLoader: HTMLElement;
+    private aiLoaderText: HTMLElement;
+    private resetBtn: HTMLButtonElement;
+    private uploadOverlay: HTMLElement;
+
+    private isDragging = false;
+    private isSelecting = false;
+    private selectionRect = { x: 0, y: 0, w: 0, h: 0 };
+    private lastPos = { x: 0, y: 0 };
+
+    constructor() {
+      this.canvas = document.getElementById('editor-canvas') as HTMLCanvasElement;
+      this.engine = new TinderOptimizerEngine(this.canvas);
+      this.input = document.getElementById('image-input') as HTMLInputElement;
+      this.dropZone = document.getElementById('drop-zone') as HTMLElement;
+      this.zoomSlider = document.getElementById('zoom-slider') as HTMLInputElement;
+      this.brightnessSlider = document.getElementById('brightness-slider') as HTMLInputElement;
+      this.exportBtn = document.getElementById('export-button') as HTMLButtonElement;
+      this.toggleGridSwitch = document.getElementById('toggle-grid-switch') as HTMLInputElement;
+      this.toggleDeadzonesSwitch = document.getElementById('toggle-deadzones-switch') as HTMLInputElement;
+      this.toggleFaceBoxSwitch = document.getElementById('toggle-face-box-switch') as HTMLInputElement;
+      this.faceBoxContainer = document.getElementById('face-box-container') as HTMLElement;
+      this.relaunchAiBtn = document.getElementById('relaunch-ai') as HTMLButtonElement;
+      this.autofocusBtn = document.getElementById('auto-focus') as HTMLButtonElement;
+      this.manualFaceBtn = document.getElementById('manual-face') as HTMLButtonElement;
+      this.aiLoader = document.getElementById('ai-loader') as HTMLElement;
+      this.aiLoaderText = document.getElementById('ai-loader-text') as HTMLElement;
+      this.resetBtn = document.getElementById('reset-tool') as HTMLButtonElement;
+      this.uploadOverlay = document.getElementById('upload-overlay') as HTMLElement;
+      this.init();
+    }
+
+    private setupDropZone() {
+      this.dropZone.addEventListener('click', () => {
+        if (!this.engine.image) this.input.click();
+      });
+      this.input.addEventListener('change', (e) => this.handleImage(e));
+      this.dropZone.addEventListener('dragover', (e) => { e.preventDefault(); });
+      this.dropZone.addEventListener('drop', (e) => { e.preventDefault(); this.loadFile((e as DragEvent).dataTransfer?.files[0]); });
+    }
+
+    private setupSliders() {
+      this.zoomSlider.addEventListener('input', () => {
+        const val = parseFloat(this.zoomSlider.value);
+        this.updateState();
+        const span = this.zoomSlider.parentElement?.querySelector('span');
+        if (span) span.textContent = `${val.toFixed(1)}x`;
+      });
+      this.brightnessSlider.addEventListener('input', () => {
+        const val = parseInt(this.brightnessSlider.value);
+        this.updateState();
+        const span = this.brightnessSlider.parentElement?.querySelector('span');
+        if (span) span.textContent = `${val}%`;
+      });
+    }
+
+    private setupToggles() {
+      this.toggleGridSwitch.addEventListener('change', () => {
+        const grid = document.getElementById('grid-overlay');
+        if (grid) grid.style.display = this.toggleGridSwitch.checked ? 'grid' : 'none';
+      });
+      this.toggleDeadzonesSwitch.addEventListener('change', () => {
+        const dead = document.getElementById('deadzones-overlay');
+        if (dead) dead.style.display = this.toggleDeadzonesSwitch.checked ? 'block' : 'none';
+      });
+      this.toggleFaceBoxSwitch.addEventListener('change', () => this.draw());
+    }
+
+    private setupButtons() {
+      this.relaunchAiBtn.addEventListener('click', () => this.runDetection());
+      this.autofocusBtn.addEventListener('click', () => this.applyAutoFocus());
+      this.manualFaceBtn.addEventListener('click', () => {
+        this.isSelecting = !this.isSelecting;
+        this.manualFaceBtn.classList.toggle('is-active', this.isSelecting);
+      });
+      this.canvas.addEventListener('mousedown', (e) => this.onStart(e));
+      window.addEventListener('mousemove', (e) => this.onMove(e));
+      window.addEventListener('mouseup', () => this.onEnd());
+      this.canvas.addEventListener('touchstart', (e) => this.onStart(e), { passive: false });
+      window.addEventListener('touchmove', (e) => this.onMove(e), { passive: false });
+      window.addEventListener('touchend', () => this.onEnd());
+      this.exportBtn.addEventListener('click', () => {
+        this.draw(false);
+        const link = document.createElement('a');
+        link.download = `tinder-opt-${Date.now()}.jpg`;
+        link.href = this.canvas.toDataURL('image/jpeg', 0.9);
+        link.click();
+        this.draw();
+      });
+      this.resetBtn.addEventListener('click', () => this.reset());
+    }
+
+    private init() {
+      this.setupDropZone();
+      this.setupSliders();
+      this.setupToggles();
+      this.setupButtons();
+    }
+
+    private reset() {
+      this.engine.image = null;
+      this.engine.faceDetection = null;
+      this.uploadOverlay.classList.remove('tfo-hidden');
+      this.resetBtn.style.display = 'none';
+      this.autofocusBtn.style.display = 'none';
+      this.faceBoxContainer.style.opacity = '0.5';
+      this.faceBoxContainer.style.pointerEvents = 'none';
+      const ctx = this.canvas.getContext('2d');
+      if (ctx) ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.updateAnalysis();
+    }
+
+    private handleImage(e: Event) {
+      const input = e.target as HTMLInputElement;
+      if (input.files?.[0]) this.loadFile(input.files[0]);
+    }
+
+    private async loadFile(file?: File) {
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const img = new Image();
+        img.onload = async () => {
+          this.canvas.width = 1080;
+          this.canvas.height = 1920;
+          await this.runDetection(img);
+          this.draw();
+          this.uploadOverlay.classList.add('tfo-hidden');
+          this.resetBtn.style.display = 'flex';
+        };
+        img.src = e.target?.result as string;
+      };
+      reader.readAsDataURL(file);
+    }
+
+    private async runDetection(img?: HTMLImageElement) {
+      const targetImg = img || this.engine.image;
+      if (!targetImg) return;
+      this.aiLoader.classList.remove('tfo-hidden');
+      this.aiLoaderText.textContent = 'Cargando modelos de visión...';
+      await this.engine.loadModels();
+      this.aiLoaderText.textContent = 'Analizando composición...';
+      const face = await this.engine.detect(targetImg);
+      if (face) {
+        this.autofocusBtn.style.display = 'flex';
+        this.faceBoxContainer.style.opacity = '1';
+        this.faceBoxContainer.style.pointerEvents = 'auto';
+      }
+      this.aiLoader.classList.add('tfo-hidden');
+      this.updateState();
+    }
+
+    private onStart(e: MouseEvent | TouchEvent) {
+      if (e instanceof TouchEvent) e.preventDefault();
+      const clientX = e instanceof MouseEvent ? e.clientX : e.touches[0].clientX;
+      const clientY = e instanceof MouseEvent ? e.clientY : e.touches[0].clientY;
+      const rect = this.canvas.getBoundingClientRect();
+      const x = (clientX - rect.left) * (this.canvas.width / rect.width);
+      const y = (clientY - rect.top) * (this.canvas.height / rect.height);
+      if (this.isSelecting) {
+        this.selectionRect = { x, y, w: 0, h: 0 };
+      } else {
+        this.isDragging = true;
+        this.lastPos = { x: clientX, y: clientY };
+      }
+    }
+
+    private getClientPos(e: MouseEvent | TouchEvent) {
+      const src = e instanceof MouseEvent ? e : e.touches[0];
+      return { x: src.clientX, y: src.clientY };
+    }
+
+    private handleSelectionMove(clientX: number, clientY: number) {
+      const rect = this.canvas.getBoundingClientRect();
+      this.selectionRect.w = (clientX - rect.left) * (this.canvas.width / rect.width) - this.selectionRect.x;
+      this.selectionRect.h = (clientY - rect.top) * (this.canvas.height / rect.height) - this.selectionRect.y;
+      this.draw();
+    }
+
+    private handleDragMove(clientX: number, clientY: number) {
+      const dx = (clientX - this.lastPos.x) * (this.canvas.width / this.canvas.clientWidth);
+      const dy = (clientY - this.lastPos.y) * (this.canvas.height / this.canvas.clientHeight);
+      const offset = this.engine.offset;
+      this.engine.updateState(parseFloat(this.zoomSlider.value), { x: offset.x + dx, y: offset.y + dy }, parseInt(this.brightnessSlider.value));
+      this.lastPos = { x: clientX, y: clientY };
+      this.draw();
+      this.updateAnalysis();
+    }
+
+    private isActivePress(e: MouseEvent | TouchEvent) {
+      return e instanceof MouseEvent ? e.buttons === 1 : e.touches.length > 0;
+    }
+
+    private onMove(e: MouseEvent | TouchEvent) {
+      if (this.isDragging || this.isSelecting) {
+        if (e instanceof TouchEvent) e.preventDefault();
+      }
+      const { x: clientX, y: clientY } = this.getClientPos(e);
+      if (this.isSelecting && (this.selectionRect.w !== 0 || this.isActivePress(e))) {
+        this.handleSelectionMove(clientX, clientY);
+      } else if (this.isDragging) {
+        this.handleDragMove(clientX, clientY);
+      }
+    }
+
+    private onEnd() {
+      if (this.isSelecting && Math.abs(this.selectionRect.w) > 20) {
+        this.engine.setManualFace(this.selectionRect);
+        this.isSelecting = false;
+        this.manualFaceBtn.classList.remove('is-active');
+        this.autofocusBtn.style.display = 'flex';
+        this.faceBoxContainer.style.opacity = '1';
+        this.faceBoxContainer.style.pointerEvents = 'auto';
+        this.updateState();
+      }
+      this.isDragging = false;
+      this.selectionRect = { x: 0, y: 0, w: 0, h: 0 };
+      this.draw();
+    }
+
+    private updateState() {
+      this.engine.updateState(parseFloat(this.zoomSlider.value), this.engine.offset, parseInt(this.brightnessSlider.value));
+      this.draw();
+      this.updateAnalysis();
+    }
+
+    private applyAutoFocus() {
+      const transform = this.engine.getOptimalTransform();
+      if (transform) {
+        this.zoomSlider.value = transform.zoom.toString();
+        const span = this.zoomSlider.parentElement?.querySelector('span');
+        if (span) span.textContent = `${transform.zoom.toFixed(1)}x`;
+        this.engine.updateState(transform.zoom, { x: transform.x, y: transform.y }, parseInt(this.brightnessSlider.value));
+        this.draw();
+        this.updateAnalysis();
+      }
+    }
+
+    private updateMetrics() {
+      const { metrics } = this.engine.getAnalysis();
+      const mFace = document.getElementById('metric-face-size');
+      const mEye = document.getElementById('metric-eye-line');
+      const mCoverage = document.getElementById('metric-coverage');
+      const mMood = document.getElementById('metric-mood');
+      const mQuality = document.getElementById('metric-quality');
+      if (mFace) mFace.textContent = metrics.faceSize;
+      if (mEye) mEye.textContent = metrics.eyeLine;
+      if (mCoverage) mCoverage.textContent = metrics.coverage;
+      if (mMood) mMood.textContent = metrics.mood;
+      if (mQuality) mQuality.textContent = metrics.quality;
+    }
+
+    private renderAlerts(alerts: { type: string; text: string }[], stacks: Record<string, HTMLElement | null>) {
+      Object.values(stacks).forEach((s) => { if (s) s.innerHTML = ''; });
+      if (alerts.length === 0) {
+        if (stacks.success) stacks.success.innerHTML = '<div class="tfo-alert tfo-alert--success">Composición técnica excelente.</div>';
+      } else {
+        alerts.forEach((a) => {
+          const stack = stacks[a.type];
+          if (stack) {
+            const div = document.createElement('div');
+            div.className = `tfo-alert tfo-alert--${a.type}`;
+            div.textContent = a.text;
+            stack.appendChild(div);
+          }
+        });
+      }
+      ['success', 'warning', 'error'].forEach((type) => {
+        const group = document.getElementById(`group-${type}`);
+        const stack = stacks[type];
+        if (group && stack) group.style.display = stack.children.length > 0 ? 'flex' : 'none';
+      });
+    }
+
+    private updateAnalysis() {
+      const { alerts } = this.engine.getAnalysis();
+      this.updateMetrics();
+      const stacks: Record<string, HTMLElement | null> = {
+        success: document.getElementById('stack-success'),
+        warning: document.getElementById('stack-warning'),
+        error: document.getElementById('stack-error'),
+      };
+      this.renderAlerts(alerts, stacks);
+    }
+
+    draw(forceShowFaceBox?: boolean) {
+      const showFaceBox = forceShowFaceBox !== undefined ? forceShowFaceBox : this.toggleFaceBoxSwitch.checked;
+      this.engine.draw(showFaceBox);
+      if (this.isSelecting && this.selectionRect.w !== 0) {
+        const ctx = this.canvas.getContext('2d')!;
+        ctx.strokeStyle = '#FD297B';
+        ctx.setLineDash([10, 5]);
+        ctx.strokeRect(this.selectionRect.x, this.selectionRect.y, this.selectionRect.w, this.selectionRect.h);
+        ctx.setLineDash([]);
+      }
+    }
+  }
+
+  let uiInstance: TinderOptimizerUI | null = null;
+
+  function init() {
+    if (uiInstance) return;
+    const container = document.getElementById('tfo-optimizer');
+    if (!container) return;
+    uiInstance = new TinderOptimizerUI();
+  }
+
+  document.addEventListener('astro:page-load', () => {
+    uiInstance = null;
+    init();
+  });
+
+  init();
+</script>
+
+<style>
+  .tfo-root {
+    --tfo-pink: #FD297B;
+    --tfo-orange: #FF5864;
+    --tfo-gradient: linear-gradient(45deg, #FD297B, #FF5864, #FF655B);
+    --tfo-text: #1a1a1a;
+    --tfo-muted: #64748b;
+    --tfo-bg: #f8fafc;
+    --tfo-panel-bg: rgba(255, 255, 255, 0.95);
+    --tfo-panel-border: rgba(255, 255, 255, 0.3);
+    --tfo-metric-bg: #f8fafc;
+    --tfo-metric-border: #f1f5f9;
+    --tfo-action-bg: #fff;
+    --tfo-action-border: #f1f5f9;
+    --tfo-action-color: #475569;
+    --tfo-btn-icon-bg: #f8fafc;
+    --tfo-btn-icon-color: #64748b;
+    --tfo-analysis-bg: #fff;
+    --tfo-alert-color: #1a1a1a;
+    --tfo-switch-off: #e2e8f0;
+  }
+
+  :global(.theme-dark) .tfo-root {
+    --tfo-text: #f1f5f9;
+    --tfo-muted: #94a3b8;
+    --tfo-bg: #0f172a;
+    --tfo-panel-bg: rgba(15, 23, 42, 0.85);
+    --tfo-panel-border: rgba(255, 255, 255, 0.08);
+    --tfo-metric-bg: rgba(255, 255, 255, 0.05);
+    --tfo-metric-border: rgba(255, 255, 255, 0.08);
+    --tfo-action-bg: rgba(255, 255, 255, 0.04);
+    --tfo-action-border: rgba(255, 255, 255, 0.08);
+    --tfo-action-color: #94a3b8;
+    --tfo-btn-icon-bg: rgba(255, 255, 255, 0.06);
+    --tfo-btn-icon-color: #94a3b8;
+    --tfo-analysis-bg: rgba(15, 23, 42, 0.6);
+    --tfo-alert-color: #e2e8f0;
+    --tfo-switch-off: #334155;
+  }
+
+  .tfo-container {
+    display: grid;
+    grid-template-columns: 1fr 380px;
+    gap: 3rem;
+    padding: 3rem;
+    max-width: 1300px;
+    margin: 2rem auto;
+    color: var(--tfo-text);
+    background: var(--tfo-bg);
+    border-radius: 3rem;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
+    position: relative;
+    overflow: hidden;
+  }
+
+  :global(.theme-dark) .tfo-container {
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .tfo-container::before {
+    content: '';
+    position: absolute;
+    top: -20%;
+    right: -10%;
+    width: 60%;
+    height: 60%;
+    background: radial-gradient(circle at center, rgba(254, 60, 114, 0.08) 0%, transparent 70%);
+    pointer-events: none;
+  }
+
+  @media (max-width: 1200px) {
+    .tfo-container {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+      padding: 2rem;
+      margin: 1rem;
+      border-radius: 2rem;
+    }
+    .tfo-sidebar { order: 2; }
+    .tfo-editor { order: 1; }
+  }
+
+  @media (max-width: 640px) {
+    .tfo-container {
+      padding: 1.25rem;
+      margin: 0.5rem;
+      gap: 1.5rem;
+      border-radius: 1.5rem;
+    }
+    .tfo-panel {
+      padding: 1.25rem;
+      border-radius: 20px;
+    }
+    .tfo-analysis-board { margin-top: 1.5rem; }
+    .tfo-alert { font-size: 0.9rem; }
+  }
+
+  .tfo-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    min-width: 0;
+  }
+
+  .tfo-simulator-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 380px;
+    margin: 0 auto;
+  }
+
+  .tfo-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .tfo-panel {
+    background: var(--tfo-panel-bg);
+    backdrop-filter: blur(20px);
+    border: 1px solid var(--tfo-panel-border);
+    border-radius: 28px;
+    padding: 1.8rem;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03), 0 1px 1px rgba(0, 0, 0, 0.01);
+    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .tfo-panel:hover {
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
+    transform: translateY(-4px);
+    border-color: rgba(253, 41, 123, 0.1);
+  }
+
+  .tfo-panel h3 {
+    font-size: 0.75rem;
+    margin: 0 0 1.2rem;
+    color: var(--tfo-pink);
+    text-transform: uppercase;
+    letter-spacing: 1.2px;
+    font-weight: 800;
+  }
+
+  .tfo-control-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+    margin-bottom: 1.2rem;
+  }
+
+  .tfo-control-group label {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--tfo-muted);
+    display: flex;
+    justify-content: space-between;
+  }
+
+  input[type="range"] {
+    width: 100%;
+    accent-color: var(--tfo-pink);
+  }
+
+  .tfo-toggles-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 1.2rem;
+  }
+
+  .tfo-switch-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    padding: 0.5rem 0;
+  }
+
+  .tfo-switch-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2rem;
+  }
+
+  .tfo-switch-label {
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--tfo-text);
+    transition: color 0.2s;
+  }
+
+  .tfo-switch-item:hover .tfo-switch-label { color: var(--tfo-pink); }
+
+  .tfo-switch-desc {
+    font-size: 0.75rem;
+    color: var(--tfo-muted);
+  }
+
+  .tfo-switch-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 44px;
+    height: 24px;
+    flex-shrink: 0;
+  }
+
+  .tfo-switch-wrapper input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .tfo-track {
+    position: absolute;
+    cursor: pointer;
+    inset: 0;
+    background-color: var(--tfo-switch-off);
+    transition: 0.4s;
+    border-radius: 24px;
+  }
+
+  .tfo-track::before {
+    position: absolute;
+    content: "";
+    height: 18px;
+    width: 18px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  input:checked + .tfo-track { background: var(--tfo-gradient); }
+  input:checked + .tfo-track::before { transform: translateX(20px); }
+
+  .tfo-metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.8rem;
+    margin-top: 0.5rem;
+  }
+
+  @media (max-width: 480px) {
+    .tfo-metrics-grid { grid-template-columns: repeat(2, 1fr); }
+  }
+
+  .tfo-metric-card {
+    background: var(--tfo-metric-bg);
+    padding: 0.8rem 0.4rem;
+    border-radius: 16px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    border: 1px solid var(--tfo-metric-border);
+    transition: all 0.3s ease;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .tfo-metric-card:hover {
+    border-color: var(--tfo-pink);
+    box-shadow: 0 4px 12px rgba(253, 41, 123, 0.05);
+    transform: scale(1.05);
+  }
+
+  .tfo-metric-value {
+    font-size: 0.85rem;
+    font-weight: 800;
+    color: var(--tfo-pink);
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  .tfo-metric-label {
+    font-size: 0.65rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--tfo-muted);
+    font-weight: 600;
+  }
+
+  .tfo-actions-panel { padding: 1.2rem; }
+
+  .tfo-action-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .tfo-action-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.6rem;
+    padding: 1rem 0.5rem;
+    background: var(--tfo-action-bg);
+    border: 1.5px solid var(--tfo-action-border);
+    border-radius: 16px;
+    color: var(--tfo-action-color);
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .tfo-btn-icon {
+    width: 40px;
+    height: 40px;
+    background: var(--tfo-btn-icon-bg);
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--tfo-btn-icon-color);
+    transition: all 0.3s;
+  }
+
+  .tfo-action-btn span {
+    font-size: 0.8rem;
+    font-weight: 700;
+  }
+
+  .tfo-action-btn:hover {
+    border-color: var(--tfo-pink);
+    transform: translateY(-4px);
+    box-shadow: 0 10px 20px rgba(253, 41, 123, 0.1);
+  }
+
+  .tfo-action-btn:hover .tfo-btn-icon {
+    background: #fff5f7;
+    color: var(--tfo-pink);
+  }
+
+  :global(.theme-dark) .tfo-action-btn:hover .tfo-btn-icon {
+    background: rgba(253, 41, 123, 0.15);
+    color: var(--tfo-pink);
+  }
+
+  .tfo-action-btn.is-active {
+    background: #fff5f7;
+    border-color: var(--tfo-pink);
+    color: var(--tfo-pink);
+  }
+
+  :global(.theme-dark) .tfo-action-btn.is-active {
+    background: rgba(253, 41, 123, 0.1);
+  }
+
+  .tfo-action-btn.is-active .tfo-btn-icon {
+    background: var(--tfo-pink);
+    color: white;
+  }
+
+  .tfo-export-desc {
+    font-size: 11px;
+    margin-bottom: 1rem;
+    color: var(--tfo-muted);
+  }
+
+  .tfo-export-btn {
+    width: 100%;
+    padding: 1.2rem;
+    background: var(--tfo-gradient);
+    border: none;
+    border-radius: 16px;
+    color: white;
+    font-weight: 800;
+    font-size: 1.05rem;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 10px 25px rgba(253, 41, 123, 0.2);
+  }
+
+  .tfo-export-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 15px 35px rgba(253, 41, 123, 0.35);
+    filter: brightness(1.05);
+  }
+
+  .tfo-analysis-board {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-top: 2rem;
+    width: 100%;
+  }
+
+  .tfo-analysis-col {
+    display: none;
+    background: var(--tfo-analysis-bg);
+    border-radius: 20px;
+    padding: 1rem;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    flex-direction: column;
+    gap: 0.5rem;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
+  }
+
+  :global(.theme-dark) .tfo-analysis-col {
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .tfo-col-header {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    opacity: 0.7;
+    margin-bottom: 0.2rem;
+  }
+
+  .tfo-col-icon {
+    width: 18px;
+    height: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tfo-analysis-col--success .tfo-col-header { color: #10b981; }
+  .tfo-analysis-col--warning .tfo-col-header { color: #f59e0b; }
+  .tfo-analysis-col--error .tfo-col-header { color: #ef4444; }
+
+  .tfo-alerts-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .tfo-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.8rem;
+    padding: 0.6rem 0;
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--tfo-alert-color);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+    line-height: 1.4;
+    overflow-wrap: break-word;
+  }
+
+  :global(.theme-dark) .tfo-alert {
+    border-bottom-color: rgba(255, 255, 255, 0.04);
+  }
+
+  .tfo-alert:last-child { border-bottom: none; }
+
+  .tfo-alert::before {
+    content: '';
+    margin-top: 0.6rem;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+
+  .tfo-alert--success::before {
+    background: #10b981;
+    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
+  }
+
+  .tfo-alert--warning::before {
+    background: #f59e0b;
+    box-shadow: 0 0 10px rgba(245, 158, 11, 0.4);
+  }
+
+  .tfo-alert--error::before {
+    background: #ef4444;
+    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
+  }
+
+  .tfo-ai-loader {
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.85);
+    backdrop-filter: blur(12px);
+    z-index: 5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 40px;
+  }
+
+  :global(.theme-dark) .tfo-ai-loader {
+    background: rgba(15, 23, 42, 0.85);
+  }
+
+  .tfo-loader-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    color: var(--tfo-pink);
+  }
+
+  .tfo-scanner-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 4px;
+    background: var(--tfo-gradient);
+    box-shadow: 0 0 20px var(--tfo-pink);
+    animation: tfo-scan 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+    z-index: 1001;
+  }
+
+  @keyframes tfo-scan {
+    0% { top: 10%; }
+    50% { top: 90%; }
+    100% { top: 10%; }
+  }
+
+  .tfo-hidden {
+    display: none;
+  }
+
+  .tfo-device {
+    width: 100%;
+    aspect-ratio: 9/19;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    user-select: none;
+    border-radius: 54px;
+    border: 14px solid #1a1a1a;
+    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.15);
+    overflow: hidden;
+  }
+
+  @media (max-width: 640px) {
+    .tfo-device {
+      border-width: 8px;
+      border-radius: 36px;
+    }
+
+    .tfo-status-bar {
+      height: 34px;
+      padding: 0 15px;
+    }
+
+    .tfo-dynamic-island {
+      width: 80px;
+      height: 20px;
+    }
+
+    .tfo-app-header {
+      height: 44px;
+      padding: 0 15px;
+    }
+
+    .tfo-card-info {
+      padding-bottom: 15px;
+    }
+
+    .tfo-name {
+      font-size: 22px;
+    }
+
+    .tfo-job {
+      font-size: 14px;
+    }
+
+    .tfo-tags {
+      font-size: 10px;
+    }
+  }
+
+  .tfo-status-bar {
+    height: 44px;
+    padding: 0 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 600;
+    color: #1a1a1a;
+  }
+
+  .tfo-dynamic-island {
+    width: 100px;
+    height: 25px;
+    background: #000;
+    border-radius: 20px;
+  }
+
+  .tfo-status-icons {
+    display: flex;
+    gap: 6px;
+  }
+
+  .tfo-app-header {
+    height: 50px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    border-bottom: 1px solid #f1f5f9;
+    background: #fff;
+  }
+
+  .tfo-logo {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+  }
+
+  .tfo-icon-placeholder, .tfo-settings-icon {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #cbd5e1;
+  }
+
+  .tfo-card-container {
+    flex: 1;
+    padding: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #fff;
+  }
+
+  .tfo-main-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 24px;
+    overflow: hidden;
+    background: #000;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  }
+
+  .tfo-canvas {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .tfo-card-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 12px;
+    pointer-events: none;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 40%),
+                linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, transparent 15%);
+  }
+
+  .tfo-progress {
+    display: flex;
+    gap: 4px;
+  }
+
+  .tfo-segment {
+    flex: 1;
+    height: 3px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 2px;
+  }
+
+  .tfo-segment--active { background: #fff; }
+
+  .tfo-card-info {
+    color: #fff;
+    padding-bottom: 20px;
+    z-index: 20;
+  }
+
+  .tfo-primary-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+  }
+
+  .tfo-badge {
+    width: 20px;
+    height: 20px;
+    background: #1da1f2;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tfo-name {
+    font-size: 28px;
+    font-weight: 800;
+    margin: 0;
+  }
+
+  .tfo-secondary-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .tfo-job {
+    font-size: 16px;
+    font-weight: 600;
+  }
+
+  .tfo-tags {
+    display: flex;
+    gap: 12px;
+    font-size: 12px;
+    font-weight: 500;
+    opacity: 0.9;
+  }
+
+  .tfo-tag {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+
+  .tfo-device-actions {
+    height: 100px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    padding: 0 10px;
+    background: #fff;
+  }
+
+  .tfo-btn-circular {
+    width: 44px;
+    height: 44px;
+    border-radius: 50%;
+    background: #fff;
+    border: none;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .tfo-btn-nope, .tfo-btn-like {
+    width: 54px;
+    height: 54px;
+    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.12);
+  }
+
+  .tfo-btn-circular:active { transform: scale(0.92); }
+  .tfo-btn-circular:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+  }
+
+  .tfo-nav-bar {
+    height: 60px;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    border-top: 1px solid #f1f5f9;
+    color: #94a3b8;
+    background: #fff;
+  }
+
+  .tfo-nav-item--active { color: #FD297B; }
+
+  .tfo-grid-overlay {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: repeat(3, 1fr);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .tfo-grid-overlay div {
+    border: 0.5px solid rgba(255, 255, 255, 0.3);
+  }
+
+  .tfo-deadzones {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: 2;
+  }
+
+  .tfo-deadzone {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    background: rgba(255, 0, 0, 0.2);
+    border: 2px dashed rgba(255, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    font-size: 10px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .tfo-deadzone--top {
+    top: 0;
+    height: 15%;
+  }
+
+  .tfo-deadzone--bottom {
+    bottom: 0;
+    height: 28%;
+  }
+
+  .tfo-deadzone span {
+    background: #ff4458;
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
+
+  .tfo-reset-btn {
+    background: none;
+    border: none;
+    color: #94a3b8;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 50%;
+    transition: all 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .tfo-reset-btn:hover {
+    background: #f1f5f9;
+    color: var(--tfo-pink);
+  }
+
+  .tfo-upload-overlay {
+    position: absolute;
+    inset: 0;
+    background: #0a0a0a;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    cursor: pointer;
+    z-index: 3;
+    transition: all 0.4s ease;
+    padding: 2rem;
+    text-align: center;
+  }
+
+  .tfo-upload-overlay.tfo-hidden {
+    opacity: 0;
+    pointer-events: none;
+    transform: scale(1.1);
+  }
+
+  .tfo-upload-circle {
+    width: 80px;
+    height: 80px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 2px dashed rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 1.5rem;
+    transition: all 0.3s ease;
+  }
+
+  .tfo-main-card:hover .tfo-upload-circle {
+    background: rgba(253, 41, 123, 0.1);
+    border-color: var(--tfo-pink);
+    color: var(--tfo-pink);
+    transform: translateY(-5px);
+  }
+
+  .tfo-upload-overlay h3 {
+    margin: 0;
+    font-size: 1.2rem;
+    font-weight: 700;
+  }
+
+  .tfo-upload-overlay p {
+    margin: 0.5rem 0 0;
+    font-size: 0.9rem;
+    opacity: 0.5;
+  }
+</style>