@jjlmoya/utils-textiles 1.1.0

package/src/tool/clothingSizeConverter/component.astro

@@ -0,0 +1,1226 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { ClothingSizeConverterUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const sizeUI = ui as ClothingSizeConverterUI;
+
+const fitLabels: Record<string, string> = {
+  small: sizeUI.fitSmall ?? 'Small',
+  regular: sizeUI.fitRegular ?? 'Regular',
+  large: sizeUI.fitLarge ?? 'Large',
+};
+
+const brands = [
+  { brand: 'Zara', fit: 'regular' },
+  { brand: 'H&M', fit: 'large' },
+  { brand: 'ASOS', fit: 'regular' },
+  { brand: 'Uniqlo', fit: 'small' },
+  { brand: 'Nike', fit: 'small' },
+  { brand: 'Adidas', fit: 'regular' },
+] as const;
+---
+
+<div class="clothing-converter">
+  <div class="converter-card">
+
+    <div class="selector-section">
+      <div class="selector-group">
+        <span class="selector-label">{sizeUI.categoryLabel ?? 'Category'}</span>
+        <div class="btn-group">
+          <button class="cat-btn active" data-category="shirts">
+            <Icon name="mdi:tshirt-crew" />
+            <span>{sizeUI.categoryShirts ?? 'Shirts'}</span>
+          </button>
+          <button class="cat-btn" data-category="pants">
+            <Icon name="mdi:human-handsdown" />
+            <span>{sizeUI.categoryPants ?? 'Pants'}</span>
+          </button>
+          <button class="cat-btn" data-category="dresses">
+            <Icon name="mdi:human-female" />
+            <span>{sizeUI.categoryDresses ?? 'Dresses'}</span>
+          </button>
+          <button class="cat-btn" data-category="jackets">
+            <Icon name="mdi:hanger" />
+            <span>{sizeUI.categoryJackets ?? 'Jackets'}</span>
+          </button>
+        </div>
+      </div>
+
+      <div class="selector-group">
+        <span class="selector-label">{sizeUI.genderLabel ?? 'Gender'}</span>
+        <div class="btn-group">
+          <button class="gender-btn active" data-gender="men">
+            <Icon name="mdi:gender-male" />
+            <span>{sizeUI.genderMen ?? 'Men'}</span>
+          </button>
+          <button class="gender-btn" data-gender="women">
+            <Icon name="mdi:gender-female" />
+            <span>{sizeUI.genderWomen ?? 'Women'}</span>
+          </button>
+          <button class="gender-btn" data-gender="unisex">
+            <Icon name="mdi:gender-male-female" />
+            <span>{sizeUI.genderUnisex ?? 'Unisex'}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="tabs">
+      <button class="tab-btn active" data-tab="by-size">
+        <Icon name="mdi:ruler" />
+        {sizeUI.tabBySize ?? 'By Size'}
+      </button>
+      <button class="tab-btn" data-tab="by-measurements">
+        <Icon name="mdi:tape-measure" />
+        {sizeUI.tabByMeasurements ?? 'By Measurements'}
+      </button>
+    </div>
+
+    <div class="tab-content active" id="by-size-tab">
+      <div class="control-row">
+        <div class="field-group">
+          <label class="field-label" for="region-select">{sizeUI.regionLabel ?? 'Size System'}</label>
+          <div class="select-wrap">
+            <select id="region-select" class="region-select">
+              <option value="EU">{sizeUI.regionEU ?? 'Europe (EU)'}</option>
+              <option value="US">{sizeUI.regionUS ?? 'United States (US)'}</option>
+              <option value="UK">{sizeUI.regionUK ?? 'United Kingdom (UK)'}</option>
+              <option value="IT">{sizeUI.regionIT ?? 'Italy (IT)'}</option>
+            </select>
+          </div>
+        </div>
+        <div class="field-group">
+          <label class="field-label" for="size-select">{sizeUI.sizeLabel ?? 'Select Size'}</label>
+          <div class="select-wrap">
+            <select id="size-select" class="size-select"></select>
+          </div>
+        </div>
+      </div>
+
+      <div class="results-grid">
+        <div class="result-card">
+          <span class="result-label" id="label-1">-</span>
+          <span class="result-value" id="val-1">-</span>
+        </div>
+        <div class="result-card">
+          <span class="result-label" id="label-2">-</span>
+          <span class="result-value" id="val-2">-</span>
+        </div>
+        <div class="result-card">
+          <span class="result-label" id="label-3">-</span>
+          <span class="result-value" id="val-3">-</span>
+        </div>
+      </div>
+
+      <div class="quick-grid-section">
+        <h3 class="section-title">{sizeUI.quickGridTitle ?? 'Quick Reference (EU)'}</h3>
+        <div class="size-grid" id="quick-grid"></div>
+      </div>
+    </div>
+
+    <div class="tab-content" id="by-measurements-tab">
+      <div class="measurements-layout">
+        <div class="measurements-inputs">
+          <h3 class="measurements-section-title">{sizeUI.measurementsTitle ?? 'Enter Your Measurements'}</h3>
+          <div class="measure-field">
+            <label class="measure-label" for="chest-input">{sizeUI.chestLabel ?? 'Chest (cm)'}</label>
+            <input type="number" id="chest-input" class="measure-input"
+              placeholder={sizeUI.chestPlaceholder ?? 'E.g. 95'} min="50" max="150" />
+          </div>
+          <div class="measure-field">
+            <label class="measure-label" for="waist-input">{sizeUI.waistLabel ?? 'Waist (cm)'}</label>
+            <input type="number" id="waist-input" class="measure-input"
+              placeholder={sizeUI.waistPlaceholder ?? 'E.g. 85'} min="40" max="140" />
+          </div>
+          <div class="measure-field">
+            <label class="measure-label" for="hip-input">{sizeUI.hipLabel ?? 'Hip (cm)'}</label>
+            <input type="number" id="hip-input" class="measure-input"
+              placeholder={sizeUI.hipPlaceholder ?? 'E.g. 95'} min="50" max="150" />
+          </div>
+          <button class="btn-recommend" id="recommend-btn">
+            <Icon name="mdi:lightbulb-on" />
+            {sizeUI.recommendBtnLabel ?? 'Recommend Size'}
+          </button>
+        </div>
+
+        <div class="tips-card">
+          <h4 class="tips-title">
+            <Icon name="mdi:lightbulb-outline" />
+            {sizeUI.tipsTitle ?? 'Measurement Tips'}
+          </h4>
+          <div class="tips-grid">
+            <div class="tip-item">
+              <Icon name="mdi:tshirt-crew" />
+              <span>{sizeUI.tipOverClothes ?? 'Over clothes'}</span>
+            </div>
+            <div class="tip-item">
+              <Icon name="mdi:arrow-expand-horizontal" />
+              <span>{sizeUI.tipStraight ?? 'Straight and parallel'}</span>
+            </div>
+            <div class="tip-item">
+              <Icon name="mdi:minus" />
+              <span>{sizeUI.tipNoTight ?? 'Without pulling tight'}</span>
+            </div>
+            <div class="tip-item">
+              <Icon name="mdi:weather-sunset" />
+              <span>{sizeUI.tipEndOfDay ?? 'At the end of the day'}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="recommendation-box" id="recommendation-box">
+        <div class="recommend-header">
+          <Icon name="mdi:check-circle" />
+          <h4>{sizeUI.recommendationTitle ?? 'Recommended Size'}</h4>
+        </div>
+        <p id="recommendation-text"></p>
+        <div id="size-details"></div>
+      </div>
+    </div>
+
+    <div class="fit-guide">
+      <h3 class="section-title">{sizeUI.fitGuideTitle ?? 'Brand Fit Guide'}</h3>
+      <div class="fit-grid">
+        {brands.map(({ brand, fit }) => (
+          <button class="fit-card" data-brand={brand} data-fit={fit}>
+            <span class="fit-brand">{brand}</span>
+            <span class="fit-size-label">{fitLabels[fit]}</span>
+          </button>
+        ))}
+      </div>
+      <div class="fit-notification" id="fit-notification"></div>
+      <p class="fit-info" id="fit-info-text">
+        <Icon name="mdi:information-outline" />
+        {sizeUI.fitInfoDefault ?? 'Click a brand for specific recommendations.'}
+      </p>
+    </div>
+
+    <div class="table-section">
+      <h3 class="section-title">{sizeUI.tableTitle ?? 'Full Conversion Table'}</h3>
+      <div class="table-wrap">
+        <table class="conv-table">
+          <thead>
+            <tr>
+              <th>EU</th>
+              <th>US</th>
+              <th>UK</th>
+              <th>IT</th>
+            </tr>
+          </thead>
+          <tbody id="table-body"></tbody>
+        </table>
+      </div>
+    </div>
+
+    <div class="info-banner">
+      <Icon name="mdi:lightbulb-on" />
+      <p>
+        <strong>{sizeUI.infoBannerTitle ?? 'Pro Tip:'}</strong>
+        {' '}{sizeUI.infoBannerText ?? ''}
+      </p>
+    </div>
+
+  </div>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__clothingSizeUI = ui;
+</script>
+
+<script>
+  import type { ClothingSizeConverterUI } from './ui';
+  import type { SizeData, ClothingRegion, MeasurementRange } from './logic';
+  import { findBestSize } from './logic';
+
+  const rawUI = (window as unknown as { __clothingSizeUI: ClothingSizeConverterUI }).__clothingSizeUI;
+
+  const dataMap: Record<string, Record<string, SizeData[]>> = {
+    shirts: rawUI.shirtsData,
+    pants: rawUI.pantsData,
+    dresses: rawUI.dressesData,
+    jackets: rawUI.jacketsData,
+  };
+
+  const regionLabels: Record<ClothingRegion, string> = {
+    EU: rawUI.labelEU,
+    US: rawUI.labelUS,
+    UK: rawUI.labelUK,
+    IT: rawUI.labelIT,
+  };
+
+  let currentCategory = 'shirts';
+  let currentGender = 'men';
+
+  function getEl(id: string): HTMLElement | null {
+    return document.getElementById(id);
+  }
+
+  function getCurrentData(): SizeData[] {
+    return dataMap[currentCategory]?.[currentGender] ?? [];
+  }
+
+  function populateSizeSelect(data: SizeData[], region: string): void {
+    const sel = document.getElementById('size-select') as HTMLSelectElement | null;
+    if (!sel) return;
+    sel.innerHTML = '';
+    for (const item of data) {
+      const opt = document.createElement('option');
+      opt.value = item[region];
+      opt.textContent = item[region];
+      sel.appendChild(opt);
+    }
+  }
+
+  function makeGridCell(item: SizeData): HTMLDivElement {
+    const cell = document.createElement('div');
+    cell.className = 'size-cell';
+    cell.textContent = item.EU;
+    cell.addEventListener('click', () => {
+      const rs = document.getElementById('region-select') as HTMLSelectElement | null;
+      const ss = document.getElementById('size-select') as HTMLSelectElement | null;
+      if (rs) rs.value = 'EU';
+      if (ss) ss.value = item.EU;
+      calculate();
+    });
+    return cell;
+  }
+
+  function renderQuickGrid(data: SizeData[]): void {
+    const grid = getEl('quick-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+    for (const item of data) grid.appendChild(makeGridCell(item));
+  }
+
+  function makeTableRow(item: SizeData): HTMLTableRowElement {
+    const row = document.createElement('tr');
+    row.innerHTML = `<td class="eu-cell">${item.EU}</td><td>${item.US}</td><td>${item.UK}</td><td>${item.IT}</td>`;
+    return row;
+  }
+
+  function renderTable(data: SizeData[]): void {
+    const tbody = getEl('table-body');
+    if (!tbody) return;
+    tbody.innerHTML = '';
+    for (const item of data) tbody.appendChild(makeTableRow(item));
+  }
+
+  function updateResults(match: SizeData, region: string): void {
+    const others = (['EU', 'US', 'UK', 'IT'] as ClothingRegion[]).filter((r) => r !== region);
+    others.forEach((r, i) => {
+      const valEl = getEl(`val-${i + 1}`);
+      const labelEl = getEl(`label-${i + 1}`);
+      if (valEl) valEl.textContent = match[r];
+      if (labelEl) labelEl.textContent = regionLabels[r];
+    });
+  }
+
+  function updateActiveState(match: SizeData): void {
+    document.querySelectorAll('.size-cell').forEach((cell) => {
+      cell.classList.toggle('active', cell.textContent === match.EU);
+    });
+    document.querySelectorAll('.eu-cell').forEach((cell) => {
+      cell.classList.toggle('active', cell.textContent === match.EU);
+    });
+  }
+
+  function calculate(): void {
+    const regionSel = document.getElementById('region-select') as HTMLSelectElement | null;
+    const sizeSel = document.getElementById('size-select') as HTMLSelectElement | null;
+    const region = regionSel?.value ?? 'EU';
+    const val = sizeSel?.value;
+    if (!val) return;
+    const data = getCurrentData();
+    const match = data.find((item) => item[region] === val);
+    if (!match) return;
+    updateActiveState(match);
+    updateResults(match, region);
+  }
+
+  function updateControls(): void {
+    const regionSel = document.getElementById('region-select') as HTMLSelectElement | null;
+    const region = regionSel?.value ?? 'EU';
+    const data = getCurrentData();
+    populateSizeSelect(data, region);
+    renderQuickGrid(data);
+    renderTable(data);
+    calculate();
+  }
+
+  function getInputVal(id: string): number | null {
+    const el = document.getElementById(id) as HTMLInputElement | null;
+    const v = el?.value;
+    return v ? parseFloat(v) : null;
+  }
+
+  function getMeasurements(): { chest: number; waist: number; hip: number } | null {
+    const chest = getInputVal('chest-input');
+    const waist = getInputVal('waist-input');
+    const hip = getInputVal('hip-input');
+    if (chest === null || waist === null || hip === null) return null;
+    return { chest, waist, hip };
+  }
+
+  function showRecommendationBox(html: string, detailsHTML: string): void {
+    const box = getEl('recommendation-box');
+    const text = getEl('recommendation-text');
+    const details = getEl('size-details');
+    if (box) box.style.display = 'block';
+    if (text) text.innerHTML = html;
+    if (details) details.innerHTML = detailsHTML;
+  }
+
+  function buildDetailsHTML(sizeData: SizeData): string {
+    return (
+      '<div class="recommend-details">' +
+      `<div class="recommend-item"><span class="rec-label">EU</span><strong>${sizeData.EU}</strong></div>` +
+      `<div class="recommend-item"><span class="rec-label">US</span><strong>${sizeData.US}</strong></div>` +
+      `<div class="recommend-item"><span class="rec-label">UK</span><strong>${sizeData.UK}</strong></div>` +
+      '</div>'
+    );
+  }
+
+  function buildRecommendHTML(best: MeasurementRange, chest: number, waist: number, hip: number): string {
+    const measured = `${rawUI.measuredBy} ${rawUI.chestShort} ${chest}cm, ${rawUI.waistShort} ${waist}cm, ${rawUI.hipShort} ${hip}cm`;
+    return `<strong class="rec-size-label">${rawUI.recommendedSizePrefix} <em class="rec-size">${best.size}</em></strong><span class="rec-info">${measured}</span>`;
+  }
+
+  function recommendSize(): void {
+    const m = getMeasurements();
+    if (!m) {
+      showRecommendationBox(`<span class="rec-error">${rawUI.recommendationError}</span>`, '');
+      return;
+    }
+    const ranges: MeasurementRange[] = rawUI.measurementRanges[currentCategory] ?? [];
+    if (!ranges.length) {
+      showRecommendationBox(`<span class="rec-error">${rawUI.recommendationNoData}</span>`, '');
+      return;
+    }
+    const best = findBestSize(m.chest, m.waist, m.hip, ranges);
+    const sizeData = getCurrentData().find((item) => item.EU === best.size);
+    showRecommendationBox(
+      buildRecommendHTML(best, m.chest, m.waist, m.hip),
+      sizeData ? buildDetailsHTML(sizeData) : '',
+    );
+  }
+
+  function getFitTypeLabel(fit: string): string {
+    if (fit === 'small') return rawUI.fitNotifSmall;
+    if (fit === 'large') return rawUI.fitNotifLarge;
+    return rawUI.fitNotifRegular;
+  }
+
+  function getFitAdvice(fit: string): string {
+    if (fit === 'small') return rawUI.fitAdviceSmall;
+    if (fit === 'large') return rawUI.fitAdviceLarge;
+    return rawUI.fitAdviceRegular;
+  }
+
+  function showFitNotification(brand: string, fit: string): void {
+    const notif = getEl('fit-notification');
+    const infoText = getEl('fit-info-text');
+    if (!notif) return;
+    notif.innerHTML = `<strong>${brand}</strong>${rawUI.fitNotif1}<strong>${getFitTypeLabel(fit)}</strong>. ${rawUI.fitNotif2} <em>${getFitAdvice(fit)}</em> ${rawUI.fitNotif3}`;
+    notif.style.display = 'block';
+    if (infoText) infoText.textContent = `${brand} ${rawUI.fitSelectedSuffix}`;
+  }
+
+  function attachCategoryListeners(): void {
+    const catBtns = document.querySelectorAll('[data-category]');
+    catBtns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        catBtns.forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentCategory = (btn as HTMLElement).dataset.category ?? 'shirts';
+        currentGender = 'men';
+        document.querySelectorAll('[data-gender]').forEach((b, i) => b.classList.toggle('active', i === 0));
+        updateControls();
+      });
+    });
+  }
+
+  function attachGenderListeners(): void {
+    document.querySelectorAll('[data-gender]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('[data-gender]').forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        currentGender = (btn as HTMLElement).dataset.gender ?? 'men';
+        updateControls();
+      });
+    });
+  }
+
+  function attachTabListeners(): void {
+    document.querySelectorAll('[data-tab]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const tab = (btn as HTMLElement).dataset.tab;
+        document.querySelectorAll('[data-tab]').forEach((b) => b.classList.remove('active'));
+        document.querySelectorAll('.tab-content').forEach((c) => c.classList.remove('active'));
+        btn.classList.add('active');
+        if (tab) getEl(`${tab}-tab`)?.classList.add('active');
+      });
+    });
+  }
+
+  function attachFitListeners(): void {
+    document.querySelectorAll('[data-brand]').forEach((card) => {
+      card.addEventListener('click', () => {
+        document.querySelectorAll('[data-brand]').forEach((c) => c.classList.remove('active'));
+        card.classList.add('active');
+        const brand = (card as HTMLElement).dataset.brand ?? '';
+        const fit = (card as HTMLElement).dataset.fit ?? 'regular';
+        showFitNotification(brand, fit);
+      });
+    });
+  }
+
+  function init(): void {
+    attachCategoryListeners();
+    attachGenderListeners();
+    attachTabListeners();
+    const regionSel = document.getElementById('region-select') as HTMLSelectElement | null;
+    const sizeSel = document.getElementById('size-select') as HTMLSelectElement | null;
+    regionSel?.addEventListener('change', updateControls);
+    sizeSel?.addEventListener('change', calculate);
+    getEl('recommend-btn')?.addEventListener('click', recommendSize);
+    attachFitListeners();
+    updateControls();
+  }
+
+  function startInit(): void {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', init);
+    } else {
+      setTimeout(init, 100);
+    }
+    document.addEventListener('astro:page-load', init);
+  }
+
+  startInit();
+</script>
+
+<style>
+  .clothing-converter {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 1rem 1rem 4rem;
+  }
+
+  .converter-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 2.5rem;
+    padding: 2.5rem;
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  .theme-dark .converter-card {
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+  }
+
+  .selector-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .selector-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .selector-label {
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .btn-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+    gap: 0.75rem;
+  }
+
+  .cat-btn,
+  .gender-btn {
+    padding: 0.875rem;
+    border-radius: 1rem;
+    border: 2px solid transparent;
+    background: var(--bg-page);
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--text-muted);
+    font-weight: 600;
+    font-size: 0.875rem;
+  }
+
+  .cat-btn svg,
+  .gender-btn svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .cat-btn.active,
+  .gender-btn.active {
+    background: #3b82f6;
+    border-color: #1e40af;
+    color: white;
+    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3);
+    transform: translateY(-2px);
+  }
+
+  .cat-btn:hover,
+  .gender-btn:hover {
+    border-color: #3b82f6;
+  }
+
+  .tabs {
+    display: flex;
+    gap: 0.5rem;
+    border-bottom: 2px solid var(--border-color);
+  }
+
+  .tab-btn {
+    padding: 0.875rem 1.5rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: var(--text-muted);
+    font-weight: 600;
+    border-bottom: 3px solid transparent;
+    margin-bottom: -2px;
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    transition: color 0.2s;
+  }
+
+  .tab-btn svg {
+    width: 1.1rem;
+    height: 1.1rem;
+  }
+
+  .tab-btn.active {
+    color: #3b82f6;
+    border-bottom-color: #3b82f6;
+  }
+
+  .tab-content {
+    display: none;
+  }
+
+  .tab-content.active {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    animation: tab-fade-in 0.3s ease;
+  }
+
+  @keyframes tab-fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .control-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  .field-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .field-label {
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .select-wrap {
+    position: relative;
+  }
+
+  .select-wrap::after {
+    content: '▾';
+    position: absolute;
+    right: 1.25rem;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: var(--text-muted);
+  }
+
+  .region-select,
+  .size-select {
+    appearance: none;
+    width: 100%;
+    background: var(--bg-page);
+    border: 1.5px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 0.875rem 2.75rem 0.875rem 1.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-main);
+    outline: none;
+    cursor: pointer;
+    transition: border-color 0.2s;
+  }
+
+  .region-select:focus,
+  .size-select:focus {
+    border-color: #3b82f6;
+  }
+
+  .results-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+
+  .result-card {
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    transition: all 0.3s;
+  }
+
+  .result-card:hover {
+    transform: translateY(-2px);
+    border-color: #3b82f6;
+  }
+
+  .result-label {
+    font-size: 0.7rem;
+    font-weight: 800;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .result-value {
+    font-size: 2.5rem;
+    font-weight: 900;
+    color: #3b82f6;
+    line-height: 1;
+  }
+
+  .quick-grid-section {
+    border-top: 1px solid var(--border-color);
+    padding-top: 1.5rem;
+  }
+
+  .section-title {
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    margin: 0 0 1rem;
+  }
+
+  .size-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(65px, 1fr));
+    gap: 0.75rem;
+  }
+
+  :global(.size-cell) {
+    aspect-ratio: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.75rem;
+    background: var(--bg-surface);
+    border: 1.5px solid var(--border-color);
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  :global(.size-cell:hover) {
+    border-color: #3b82f6;
+    color: #3b82f6;
+    transform: scale(1.05);
+  }
+
+  :global(.size-cell.active) {
+    background: #3b82f6;
+    border-color: #1e40af;
+    color: white;
+    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.35);
+    transform: scale(1.05);
+  }
+
+  .measurements-layout {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+
+  .measurements-inputs {
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .measurements-section-title {
+    font-size: 1.1rem;
+    font-weight: 800;
+    color: var(--text-main);
+    margin: 0;
+  }
+
+  .measure-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .measure-label {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .measure-input {
+    width: 100%;
+    background: var(--bg-page);
+    border: 1.5px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 0.875rem 1.25rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-main);
+    outline: none;
+    transition: border-color 0.2s;
+  }
+
+  .measure-input:focus {
+    border-color: #3b82f6;
+  }
+
+  .btn-recommend {
+    padding: 1rem;
+    background: #10b981;
+    color: white;
+    border: none;
+    border-radius: 1rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.3s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    font-size: 1rem;
+  }
+
+  .btn-recommend:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
+  }
+
+  .btn-recommend svg {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .tips-card {
+    background: rgba(59, 130, 246, 0.05);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    color: #1e40af;
+  }
+
+  .theme-dark .tips-card {
+    background: rgba(59, 130, 246, 0.08);
+    color: #93c5fd;
+  }
+
+  .tips-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.9rem;
+    font-weight: 700;
+    margin: 0 0 1rem;
+  }
+
+  .tips-title svg {
+    width: 1.1rem;
+    height: 1.1rem;
+    flex-shrink: 0;
+  }
+
+  .tips-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .tip-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background: rgba(59, 130, 246, 0.08);
+    border-radius: 0.75rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+  }
+
+  .theme-dark .tip-item {
+    background: rgba(59, 130, 246, 0.12);
+  }
+
+  .tip-item svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+    color: #3b82f6;
+  }
+
+  .recommendation-box {
+    display: none;
+    background: #ecfdf5;
+    border: 2px solid #10b981;
+    border-radius: 1.25rem;
+    padding: 1.5rem;
+    color: #047857;
+    animation: slide-down 0.3s ease;
+  }
+
+  .theme-dark .recommendation-box {
+    background: rgba(6, 78, 59, 0.3);
+    color: #6ee7b7;
+  }
+
+  @keyframes slide-down {
+    from {
+      opacity: 0;
+      transform: translateY(-8px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .recommend-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+  }
+
+  .recommend-header svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+
+  .recommend-header h4 {
+    margin: 0;
+    font-size: 1rem;
+    font-weight: 700;
+  }
+
+  :global(.rec-size-label) {
+    display: block;
+    font-size: 1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  :global(.rec-size) {
+    color: #10b981;
+    font-style: normal;
+    font-size: 1.2em;
+  }
+
+  :global(.rec-info) {
+    display: block;
+    font-size: 0.875rem;
+    opacity: 0.85;
+  }
+
+  :global(.rec-error) {
+    color: #dc2626;
+  }
+
+  :global(.recommend-details) {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 0.75rem;
+    margin-top: 1rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(16, 185, 129, 0.3);
+  }
+
+  :global(.recommend-item) {
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  :global(.rec-label) {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    opacity: 0.7;
+  }
+
+  :global(.recommend-item strong) {
+    font-weight: 700;
+    color: #10b981;
+  }
+
+  .fit-guide {
+    border-top: 1px solid var(--border-color);
+    padding-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .fit-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+    gap: 1rem;
+  }
+
+  .fit-card {
+    background: var(--bg-page);
+    border: 2px solid var(--border-color);
+    border-radius: 1rem;
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    transition: all 0.3s;
+    color: inherit;
+    text-align: center;
+  }
+
+  .fit-card:hover {
+    border-color: #3b82f6;
+    background: rgba(59, 130, 246, 0.04);
+    transform: translateY(-2px);
+  }
+
+  .fit-card.active {
+    border-color: #0284c7;
+    background: rgba(2, 132, 199, 0.08);
+    box-shadow: 0 4px 12px rgba(2, 132, 199, 0.15);
+  }
+
+  .theme-dark .fit-card.active {
+    background: rgba(2, 132, 199, 0.12);
+  }
+
+  .fit-brand {
+    font-weight: 700;
+    color: var(--text-main);
+    font-size: 0.95rem;
+  }
+
+  .fit-size-label {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    font-weight: 600;
+  }
+
+  .fit-notification {
+    display: none;
+    padding: 1.25rem;
+    background: rgba(3, 105, 161, 0.06);
+    border: 2px solid #0284c7;
+    border-radius: 1rem;
+    color: #0369a1;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .theme-dark .fit-notification {
+    background: rgba(3, 105, 161, 0.1);
+    color: #7dd3fc;
+  }
+
+  .fit-info {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    margin: 0;
+  }
+
+  .fit-info svg {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+  }
+
+  .table-section {
+    border-top: 1px solid var(--border-color);
+    padding-top: 1.5rem;
+  }
+
+  .table-wrap {
+    overflow-x: auto;
+    border-radius: 1.25rem;
+    border: 1px solid var(--border-color);
+    margin-top: 1rem;
+  }
+
+  .conv-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--bg-surface);
+  }
+
+  .conv-table thead {
+    background: var(--bg-page);
+    border-bottom: 2px solid var(--border-color);
+  }
+
+  .conv-table th {
+    padding: 1rem 1.25rem;
+    text-align: left;
+    font-weight: 700;
+    color: var(--text-main);
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .conv-table td {
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid var(--border-color);
+    color: var(--text-muted);
+    font-weight: 500;
+  }
+
+  .conv-table tbody tr:hover td {
+    background: var(--bg-page);
+  }
+
+  :global(.eu-cell) {
+    font-weight: 700;
+    color: #3b82f6;
+  }
+
+  :global(.eu-cell.active) {
+    background: rgba(59, 130, 246, 0.1);
+  }
+
+  .info-banner {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+    padding: 1.25rem;
+    background: rgba(59, 130, 246, 0.05);
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    border-radius: 1.25rem;
+    color: #1e40af;
+    font-size: 0.875rem;
+    line-height: 1.5;
+  }
+
+  .theme-dark .info-banner {
+    background: rgba(59, 130, 246, 0.08);
+    color: #bfdbfe;
+  }
+
+  .info-banner svg {
+    width: 1.25rem;
+    height: 1.25rem;
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+  }
+
+  .info-banner p {
+    margin: 0;
+  }
+
+  .info-banner strong {
+    display: block;
+    margin-bottom: 0.25rem;
+  }
+
+  @media (max-width: 640px) {
+    .converter-card {
+      padding: 1.5rem;
+      gap: 2rem;
+      border-radius: 1.5rem;
+    }
+
+    .btn-group {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .control-row {
+      grid-template-columns: 1fr;
+    }
+
+    .results-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .measurements-layout {
+      grid-template-columns: 1fr;
+    }
+
+    .fit-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (max-width: 400px) {
+    .btn-group {
+      grid-template-columns: 1fr;
+    }
+
+    .fit-grid {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+</style>