@jjlmoya/utils-social 1.1.0

package/src/tool/socialValueCalculator/component.astro

@@ -0,0 +1,829 @@
+---
+import type { KnownLocale } from '../../types';
+import type { SocialValueCalculatorUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as SocialValueCalculatorUI;
+
+const ICON_VIDEO = `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M14,2H4A2,2 0 0,0 2,4V16A2,2 0 0,0 4,18H14A2,2 0 0,0 16,16V4A2,2 0 0,0 14,2M14,16H4V4H14V16M22,4L18,8V16L22,20V4Z"/></svg>`;
+const ICON_INSTAGRAM = `<svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z"/></svg>`;
+const ICON_EYE = `<svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18"><path d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/></svg>`;
+const ICON_INFO = `<svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"/></svg>`;
+---
+
+<div
+  class="svc-root"
+  data-label-views-tiktok={t.labelAvgViewsTiktok}
+  data-label-views-ig={t.labelAvgViewsIg}
+  data-range-label={t.rangeLabel}
+  data-currency-symbol={t.currencySymbol}
+  data-number-locale={t.numberLocale}
+  data-insight-text={t.insightText}
+>
+  <div class="svc-glass">
+    <header class="svc-nav">
+      <div class="svc-toggle" role="tablist">
+        <button class="svc-toggle-btn svc-active" data-platform="tiktok" id="svc-btn-tiktok" role="tab">
+          <span class="svc-nav-icon" set:html={ICON_VIDEO} />
+          <span>TikTok</span>
+        </button>
+        <div class="svc-slider"></div>
+        <button class="svc-toggle-btn" data-platform="instagram" id="svc-btn-instagram" role="tab">
+          <span class="svc-nav-icon" set:html={ICON_INSTAGRAM} />
+          <span>Instagram</span>
+        </button>
+      </div>
+    </header>
+
+    <div class="svc-grid">
+      <aside class="svc-sidebar">
+        <div class="svc-section-tag">{t.sectionTag}</div>
+
+        <div class="svc-inputs">
+          <div class="svc-input-box">
+            <label for="svc-followers">
+              <svg class="svc-input-icon" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M16,13C15.71,13 15.38,13.04 15.07,13.07C16.03,13.86 16.75,14.82 16.75,16V19H23V16C23,14.17 19.33,13 16,13M8,13C4.67,13 1,14.17 1,16V19H15V16C15,14.17 11.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"/></svg>
+              {t.labelFollowers}
+            </label>
+            <div class="svc-input-wrap">
+              <input type="number" id="svc-followers" placeholder="0" min="0" />
+            </div>
+          </div>
+
+          <div class="svc-input-box">
+            <label for="svc-avg-views" id="svc-label-views">
+              <span class="svc-label-icon" set:html={ICON_EYE} />
+              <span id="svc-label-views-text">{t.labelAvgViewsTiktok}</span>
+              <span class="svc-info-trigger">
+                <span set:html={ICON_INFO} />
+                <span class="svc-tooltip">{t.tooltipViews}</span>
+              </span>
+            </label>
+            <div class="svc-input-wrap">
+              <input type="number" id="svc-avg-views" placeholder="0" min="0" />
+            </div>
+          </div>
+
+          <div class="svc-input-box">
+            <label for="svc-avg-engagement">
+              <svg class="svc-input-icon" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,3.18L19,6.3V11C19,15.5 16.2,19.77 12,21.17C7.8,19.77 5,15.5 5,11V6.3L12,3.18M12,7L10.5,10H7.5L9.5,12.5L8.5,16L12,14L15.5,16L14.5,12.5L16.5,10H13.5L12,7Z"/></svg>
+              {t.labelEngagement}
+              <span class="svc-info-trigger">
+                <span set:html={ICON_INFO} />
+                <span class="svc-tooltip">{t.tooltipEngagement}</span>
+              </span>
+            </label>
+            <div class="svc-input-wrap">
+              <input type="number" id="svc-avg-engagement" placeholder="0" min="0" />
+            </div>
+          </div>
+
+          <div class="svc-input-box">
+            <label for="svc-niche">
+              <svg class="svc-input-icon" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M18,15H16V17H18M18,11H16V13H18M20,19H12V17H14V15H12V13H14V11H12V9H20M10,7H8V5H10M10,11H8V9H10M10,15H8V13H10M10,19H8V17H10M6,7H4V5H6M6,11H4V9H6M6,15H4V13H6M6,19H4V17H6M12,7V3H2V21H22V7H12Z"/></svg>
+              {t.labelNiche}
+            </label>
+            <div class="svc-input-wrap svc-select-wrap">
+              <select id="svc-niche">
+                <option value="entertainment">{t.nicheEntertainment}</option>
+                <option value="finance">{t.nicheFinance}</option>
+                <option value="tech">{t.nicheTech}</option>
+                <option value="fitness">{t.nicheFitness}</option>
+                <option value="fashion">{t.nicheFashion}</option>
+                <option value="travel">{t.nicheTravel}</option>
+                <option value="food">{t.nicheFood}</option>
+                <option value="gaming">{t.nicheGaming}</option>
+                <option value="home">{t.nicheHome}</option>
+              </select>
+              <svg class="svc-select-arrow" viewBox="0 0 24 24" fill="currentColor" width="20" height="20"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"/></svg>
+            </div>
+          </div>
+        </div>
+
+        <div class="svc-sidebar-action">
+          <button id="svc-btn-calculate" class="svc-btn-primary">
+            {t.btnCalculate}
+            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" class="svc-sparkle"><path d="M7.5,5.6L5,7L6.4,4.5L5,2L7.5,3.4L10,2L8.6,4.5L10,7L7.5,5.6M19.5,17.6L22,16L20.6,18.5L22,21L19.5,19.6L17,21L18.4,18.5L17,16L19.5,17.6M22,2L18,6L15,3L5,13L8,16L18,6L20,8L22,2M4.41,14.41L2,16.83L7.17,22L9.59,19.59L4.41,14.41Z"/></svg>
+          </button>
+        </div>
+      </aside>
+
+      <main class="svc-viewport" id="svc-viewport">
+        <div class="svc-empty" id="svc-empty">
+          <div class="svc-placeholder">
+            <div class="svc-circle svc-c1"></div>
+            <div class="svc-circle svc-c2"></div>
+            <svg class="svc-placeholder-icon" viewBox="0 0 24 24" fill="currentColor"><path d="M6,16.5L3,19.44V11H6M11,14.66L9.43,13.32L8,14.64V7H11M16,13L13,16V3H16M18.81,12.81L17,11H22V16L20.21,14.21L13,21.36L9.53,18.34L5.75,22H3L9.47,15.66L13,18.64"/></svg>
+          </div>
+          <h3>{t.emptyTitle}</h3>
+          <p>{t.emptyDesc}</p>
+        </div>
+
+        <div class="svc-results svc-hidden" id="svc-results">
+          <div class="svc-valuation">
+            <div class="svc-roi-label" id="svc-roi-label">{t.roiLabel}</div>
+            <div class="svc-amount" id="svc-price">0</div>
+            <div class="svc-range" id="svc-range"></div>
+          </div>
+
+          <div class="svc-analytics">
+            <div class="svc-stat-card">
+              <div class="svc-stat-header">
+                <span class="svc-stat-title">{t.audienceQuality}</span>
+                <svg class="svc-stat-icon svc-icon-warn" viewBox="0 0 24 24" fill="currentColor" width="22" height="22"><path d="M7,2V13H10V22L17,10H13L17,2H7Z"/></svg>
+              </div>
+              <div class="svc-stat-value" id="svc-metric-er">0%</div>
+              <div class="svc-stat-desc">{t.metricER}</div>
+              <div class="svc-progress"><div class="svc-bar svc-bar-er" id="svc-er-bar"></div></div>
+            </div>
+
+            <div class="svc-stat-card">
+              <div class="svc-stat-header">
+                <span class="svc-stat-title">{t.investmentEfficiency}</span>
+                <svg class="svc-stat-icon svc-icon-ok" viewBox="0 0 24 24" fill="currentColor" width="22" height="22"><path d="M5,6H23V18H5V6M14,9A3,3 0 0,1 17,12A3,3 0 0,1 14,15A3,3 0 0,1 11,12A3,3 0 0,1 14,9M9,8A2,2 0 0,1 7,10V14A2,2 0 0,1 9,16H19A2,2 0 0,1 21,14V10A2,2 0 0,1 19,8H9M1,10H3V20H19V22H1V10Z"/></svg>
+              </div>
+              <div class="svc-stat-value" id="svc-metric-cpm">0</div>
+              <div class="svc-stat-desc">{t.metricCPM}</div>
+              <div class="svc-progress"><div class="svc-bar svc-bar-cpm" id="svc-cpm-bar"></div></div>
+            </div>
+          </div>
+
+          <div class="svc-insight">
+            <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" class="svc-insight-icon"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"/></svg>
+            <p id="svc-insight-text"></p>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculateValue } from './logic';
+  import type { CalcResult } from './logic';
+
+  type Platform = 'tiktok' | 'instagram';
+
+  let platform: Platform = 'tiktok';
+  let labelViewsTiktok = '';
+  let labelViewsIg = '';
+  let rangeLabel = '';
+  let currencySymbol = '€';
+  let numberLocale = 'es-ES';
+
+  let btnTiktok: HTMLButtonElement | null = null;
+  let btnInstagram: HTMLButtonElement | null = null;
+  let inputFollowers: HTMLInputElement | null = null;
+  let inputAvgViews: HTMLInputElement | null = null;
+  let inputEngagement: HTMLInputElement | null = null;
+  let selectNiche: HTMLSelectElement | null = null;
+  let emptyState: HTMLElement | null = null;
+  let results: HTMLElement | null = null;
+  let priceEl: HTMLElement | null = null;
+  let rangeEl: HTMLElement | null = null;
+  let erEl: HTMLElement | null = null;
+  let cpmEl: HTMLElement | null = null;
+  let erBar: HTMLElement | null = null;
+  let cpmBar: HTMLElement | null = null;
+  let labelViewsText: HTMLElement | null = null;
+  let toggle: Element | null = null;
+
+  function applyTiktok() {
+    toggle?.classList.remove('svc-switch');
+    btnTiktok?.classList.add('svc-active');
+    btnInstagram?.classList.remove('svc-active');
+    if (labelViewsText) labelViewsText.textContent = labelViewsTiktok;
+  }
+
+  function applyInstagram() {
+    toggle?.classList.add('svc-switch');
+    btnInstagram?.classList.add('svc-active');
+    btnTiktok?.classList.remove('svc-active');
+    if (labelViewsText) labelViewsText.textContent = labelViewsIg;
+  }
+
+  function switchPlatform(p: Platform) {
+    platform = p;
+    if (p === 'tiktok') { applyTiktok(); } else { applyInstagram(); }
+  }
+
+  function fmt(n: number) {
+    return n.toLocaleString(numberLocale, { maximumFractionDigits: 0 });
+  }
+
+  function parseInputs() {
+    if (!inputFollowers || !inputAvgViews || !inputEngagement || !selectNiche) return null;
+    return {
+      followers: parseFloat(inputFollowers.value) || 0,
+      avgViews: parseFloat(inputAvgViews.value) || 0,
+      avgEngagement: parseFloat(inputEngagement.value) || 0,
+      niche: selectNiche.value,
+    };
+  }
+
+  function resolveEls() {
+    if (!emptyState || !results || !priceEl || !rangeEl || !erEl || !cpmEl) return null;
+    return { emptyState, results, priceEl, rangeEl, erEl, cpmEl };
+  }
+
+  function applyBars(result: CalcResult) {
+    if (erBar) erBar.style.width = `${Math.min(result.er * 8, 100)}%`;
+    if (cpmBar) cpmBar.style.width = `${Math.min(result.projectedCPM * 3, 100)}%`;
+  }
+
+  function renderResult(result: CalcResult | null) {
+    if (!result) return;
+    const els = resolveEls();
+    if (!els) return;
+    els.priceEl.textContent = `${fmt(result.tariff)} ${currencySymbol}`;
+    els.rangeEl.textContent = `${rangeLabel} ${fmt(result.lowRange)} ${currencySymbol} — ${fmt(result.highRange)} ${currencySymbol}`;
+    els.erEl.textContent = `${result.er.toFixed(1)}%`;
+    els.cpmEl.textContent = `${result.projectedCPM.toFixed(2)} ${currencySymbol}`;
+    applyBars(result);
+    els.emptyState.classList.add('svc-hidden');
+    els.results.classList.remove('svc-hidden');
+    els.results.classList.remove('svc-fadein');
+    void els.results.offsetWidth;
+    els.results.classList.add('svc-fadein');
+  }
+
+  function calculate() {
+    const inputs = parseInputs();
+    if (!inputs) return;
+    renderResult(calculateValue({ ...inputs, platform }));
+  }
+
+  function setupElements() {
+    btnTiktok = document.getElementById('svc-btn-tiktok') as HTMLButtonElement | null;
+    btnInstagram = document.getElementById('svc-btn-instagram') as HTMLButtonElement | null;
+    inputFollowers = document.getElementById('svc-followers') as HTMLInputElement | null;
+    inputAvgViews = document.getElementById('svc-avg-views') as HTMLInputElement | null;
+    inputEngagement = document.getElementById('svc-avg-engagement') as HTMLInputElement | null;
+    selectNiche = document.getElementById('svc-niche') as HTMLSelectElement | null;
+    emptyState = document.getElementById('svc-empty');
+    results = document.getElementById('svc-results');
+    priceEl = document.getElementById('svc-price');
+    rangeEl = document.getElementById('svc-range');
+    erEl = document.getElementById('svc-metric-er');
+    cpmEl = document.getElementById('svc-metric-cpm');
+    erBar = document.getElementById('svc-er-bar');
+    cpmBar = document.getElementById('svc-cpm-bar');
+    labelViewsText = document.getElementById('svc-label-views-text');
+    toggle = document.querySelector('.svc-toggle');
+  }
+
+  function setupData(root: HTMLElement) {
+    labelViewsTiktok = root.dataset.labelViewsTiktok || '';
+    labelViewsIg = root.dataset.labelViewsIg || '';
+    rangeLabel = root.dataset.rangeLabel || '';
+    currencySymbol = root.dataset.currencySymbol || '€';
+    numberLocale = root.dataset.numberLocale || 'es-ES';
+    const insightEl = document.getElementById('svc-insight-text');
+    if (insightEl) insightEl.textContent = root.dataset.insightText || '';
+  }
+
+  function init() {
+    const root = document.querySelector('.svc-root') as HTMLElement | null;
+    if (!root) return;
+    setupData(root);
+    setupElements();
+    btnTiktok?.addEventListener('click', () => switchPlatform('tiktok'));
+    btnInstagram?.addEventListener('click', () => switchPlatform('instagram'));
+    document.getElementById('svc-btn-calculate')?.addEventListener('click', calculate);
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>
+
+<style>
+  .svc-root {
+    --glass-bg: rgba(255, 255, 255, 0.75);
+    --glass-border: rgba(255, 255, 255, 0.5);
+    --glass-shadow: rgba(0, 0, 0, 0.08);
+    --nav-bg: rgba(255, 255, 255, 0.3);
+    --nav-border: rgba(0, 0, 0, 0.05);
+    --toggle-bg: rgba(0, 0, 0, 0.04);
+    --slider-bg: #fff;
+    --slider-shadow: rgba(0, 0, 0, 0.1);
+    --btn-active-color: #0f172a;
+    --btn-color: #64748b;
+    --sidebar-bg: rgba(0, 0, 0, 0.015);
+    --sidebar-border: rgba(0, 0, 0, 0.05);
+    --label-color: #475569;
+    --input-bg: #fff;
+    --input-border: rgba(0, 0, 0, 0.1);
+    --input-text: #0f172a;
+    --tooltip-bg: #1e293b;
+    --card-bg: #fff;
+    --card-border: rgba(0, 0, 0, 0.05);
+    --stat-value: #0f172a;
+    --text-muted: #64748b;
+    --insight-bg: #f8fafc;
+    --progress-bg: rgba(0, 0, 0, 0.05);
+    --empty-title: #1e293b;
+
+    max-width: 1000px;
+    margin: 2rem auto 5rem;
+  }
+
+  :global(.theme-dark) .svc-root {
+    --glass-bg: rgba(15, 23, 42, 0.85);
+    --glass-border: rgba(255, 255, 255, 0.08);
+    --glass-shadow: rgba(0, 0, 0, 0.6);
+    --nav-bg: rgba(30, 41, 59, 0.3);
+    --nav-border: rgba(255, 255, 255, 0.05);
+    --toggle-bg: rgba(255, 255, 255, 0.05);
+    --slider-bg: #1e293b;
+    --slider-shadow: rgba(0, 0, 0, 0.3);
+    --btn-active-color: #fff;
+    --btn-color: #94a3b8;
+    --sidebar-bg: rgba(0, 0, 0, 0.2);
+    --sidebar-border: rgba(255, 255, 255, 0.05);
+    --label-color: #94a3b8;
+    --input-bg: #0f172a;
+    --input-border: rgba(255, 255, 255, 0.1);
+    --input-text: #fff;
+    --tooltip-bg: #0f172a;
+    --card-bg: rgba(255, 255, 255, 0.03);
+    --card-border: rgba(255, 255, 255, 0.05);
+    --stat-value: #fff;
+    --text-muted: #94a3b8;
+    --insight-bg: rgba(255, 255, 255, 0.02);
+    --progress-bg: rgba(255, 255, 255, 0.05);
+    --empty-title: #f1f5f9;
+  }
+
+  .svc-glass {
+    background: var(--glass-bg);
+    backdrop-filter: blur(25px) saturate(180%);
+    -webkit-backdrop-filter: blur(25px) saturate(180%);
+    border: 1px solid var(--glass-border);
+    border-radius: 32px;
+    box-shadow: 0 25px 50px -12px var(--glass-shadow), inset 0 0 0 1px var(--glass-border);
+    overflow: hidden;
+  }
+
+  .svc-nav {
+    padding: 1.5rem;
+    display: flex;
+    justify-content: center;
+    background: var(--nav-bg);
+    border-bottom: 1px solid var(--nav-border);
+  }
+
+  .svc-toggle {
+    position: relative;
+    display: flex;
+    background: var(--toggle-bg);
+    padding: 4px;
+    border-radius: 16px;
+    width: 340px;
+  }
+
+  .svc-toggle-btn {
+    flex: 1;
+    z-index: 2;
+    background: transparent;
+    border: none;
+    padding: 12px 0;
+    font-size: 0.95rem;
+    font-weight: 700;
+    color: var(--btn-color);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: color 0.4s ease;
+  }
+
+  .svc-toggle-btn.svc-active { color: var(--btn-active-color); }
+
+  .svc-slider {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: calc(50% - 4px);
+    height: calc(100% - 8px);
+    background: var(--slider-bg);
+    border-radius: 12px;
+    box-shadow: 0 4px 12px var(--slider-shadow);
+    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
+  }
+
+  .svc-toggle.svc-switch .svc-slider { transform: translateX(100%); }
+
+  .svc-nav-icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .svc-grid {
+    display: grid;
+    grid-template-columns: 400px 1fr;
+    min-height: 550px;
+  }
+
+  .svc-sidebar {
+    padding: 2.5rem;
+    background: var(--sidebar-bg);
+    border-right: 1px solid var(--sidebar-border);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .svc-section-tag {
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: #94a3b8;
+    margin-bottom: 2rem;
+  }
+
+  .svc-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 1.75rem;
+    margin-bottom: 3rem;
+  }
+
+  .svc-input-box {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .svc-input-box label {
+    font-size: 0.9rem;
+    font-weight: 700;
+    color: var(--label-color);
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .svc-input-icon {
+    color: #6366f1;
+    flex-shrink: 0;
+  }
+
+  .svc-label-icon {
+    display: flex;
+    align-items: center;
+    color: #6366f1;
+    flex-shrink: 0;
+  }
+
+  .svc-info-trigger {
+    position: relative;
+    color: #94a3b8;
+    cursor: help;
+    display: flex;
+    align-items: center;
+    transition: color 0.2s;
+  }
+
+  .svc-info-trigger:hover { color: #6366f1; }
+
+  .svc-tooltip {
+    position: absolute;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%) translateY(10px);
+    background: var(--tooltip-bg);
+    color: white;
+    padding: 0.75rem 1rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    line-height: 1.4;
+    width: 200px;
+    text-align: center;
+    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    z-index: 100;
+  }
+
+  .svc-tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--tooltip-bg) transparent transparent transparent;
+  }
+
+  .svc-info-trigger:hover .svc-tooltip {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  .svc-input-wrap { position: relative; }
+
+  .svc-input-wrap input,
+  .svc-input-wrap select {
+    width: 100%;
+    padding: 14px 18px;
+    background: var(--input-bg);
+    border: 1px solid var(--input-border);
+    border-radius: 14px;
+    font-size: 1.05rem;
+    color: var(--input-text);
+    font-weight: 600;
+    transition: all 0.3s ease;
+    appearance: none;
+  }
+
+  .svc-input-wrap input:focus {
+    outline: none;
+    border-color: #6366f1;
+    box-shadow: 0 0 0 5px rgba(99, 102, 241, 0.1);
+  }
+
+  .svc-select-wrap { position: relative; }
+
+  .svc-select-arrow {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: #94a3b8;
+  }
+
+  .svc-sidebar-action { margin-top: auto; }
+
+  .svc-btn-primary {
+    width: 100%;
+    padding: 18px;
+    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
+    border: none;
+    border-radius: 16px;
+    color: #fff;
+    font-weight: 800;
+    font-size: 1.1rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    box-shadow: 0 12px 24px -6px rgba(79, 70, 229, 0.4);
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  }
+
+  .svc-btn-primary:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 20px 30px -8px rgba(79, 70, 229, 0.5);
+    filter: brightness(1.1);
+  }
+
+  .svc-sparkle { animation: svc-pulse 2s infinite; }
+
+  .svc-viewport {
+    padding: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .svc-empty {
+    text-align: center;
+    max-width: 360px;
+  }
+
+  .svc-placeholder {
+    position: relative;
+    width: 120px;
+    height: 120px;
+    margin: 0 auto 2rem;
+  }
+
+  .svc-circle {
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    border-radius: 100px;
+  }
+
+  .svc-c1 {
+    background: rgba(99, 102, 241, 0.05);
+    animation: svc-pulse 3s infinite;
+  }
+
+  .svc-c2 {
+    background: rgba(99, 102, 241, 0.08);
+    animation: svc-pulse 3s infinite 1.5s;
+    transform: scale(0.8);
+  }
+
+  .svc-placeholder-icon {
+    position: absolute;
+    top: 50%; left: 50%;
+    transform: translate(-50%, -50%);
+    width: 48px; height: 48px;
+    color: #6366f1;
+  }
+
+  .svc-empty h3 {
+    font-size: 1.4rem;
+    font-weight: 800;
+    color: var(--empty-title);
+    margin-bottom: 0.75rem;
+  }
+
+  .svc-empty p {
+    font-size: 1rem;
+    color: var(--text-muted);
+    line-height: 1.6;
+  }
+
+  .svc-results {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  .svc-valuation {
+    text-align: center;
+    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
+    padding: 3rem;
+    border-radius: 28px;
+    color: #fff;
+    box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.4);
+  }
+
+  .svc-roi-label {
+    font-size: 0.8rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    color: #818cf8;
+    margin-bottom: 1.5rem;
+    letter-spacing: 0.1em;
+  }
+
+  .svc-amount {
+    font-size: 4.5rem;
+    font-weight: 900;
+    letter-spacing: -3px;
+    margin-bottom: 0.5rem;
+  }
+
+  .svc-range {
+    font-size: 1rem;
+    color: #94a3b8;
+    font-weight: 600;
+    opacity: 0.8;
+  }
+
+  .svc-analytics {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  .svc-stat-card {
+    background: var(--card-bg);
+    border: 1px solid var(--card-border);
+    border-radius: 20px;
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .svc-stat-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .svc-stat-title {
+    font-size: 0.8rem;
+    font-weight: 800;
+    color: #94a3b8;
+    text-transform: uppercase;
+  }
+
+  .svc-stat-value {
+    font-size: 2rem;
+    font-weight: 900;
+    color: var(--stat-value);
+  }
+
+  .svc-stat-desc {
+    font-size: 0.85rem;
+    font-weight: 600;
+    color: var(--text-muted);
+    margin-bottom: 0.75rem;
+  }
+
+  .svc-icon-warn { color: #f59e0b; }
+  .svc-icon-ok { color: #10b981; }
+
+  .svc-progress {
+    height: 8px;
+    background: var(--progress-bg);
+    border-radius: 100px;
+    overflow: hidden;
+  }
+
+  .svc-bar {
+    height: 100%;
+    width: 0%;
+    transition: width 1.2s cubic-bezier(0.19, 1, 0.22, 1);
+    border-radius: 100px;
+  }
+
+  .svc-bar-er { background: linear-gradient(to right, #6366f1, #c084fc); }
+  .svc-bar-cpm { background: #10b981; }
+
+  .svc-insight {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    background: var(--insight-bg);
+    padding: 1rem 1.5rem;
+    border-radius: 14px;
+    border-left: 4px solid #6366f1;
+  }
+
+  .svc-insight-icon {
+    color: #6366f1;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+
+  .svc-insight p {
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin: 0;
+    line-height: 1.5;
+    font-weight: 500;
+  }
+
+  .svc-hidden {
+    display: none;
+  }
+
+  .svc-fadein { animation: svc-fadein 0.4s ease; }
+
+  @keyframes svc-pulse {
+    0%, 100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    50% {
+      opacity: 0.6;
+      transform: scale(1.1);
+    }
+  }
+
+  @keyframes svc-fadein {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 900px) {
+    .svc-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .svc-sidebar {
+      border-right: none;
+      border-bottom: 1px solid var(--sidebar-border);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .svc-analytics {
+      grid-template-columns: 1fr;
+    }
+
+    .svc-amount {
+      font-size: 3rem;
+    }
+  }
+</style>