@jjlmoya/utils-diy 1.1.0

package/src/tool/drillCalculator/component.astro

@@ -0,0 +1,1210 @@
+---
+import type { DrillCalculatorUI } from './ui';
+interface Props { ui?: DrillCalculatorUI; }
+const { ui } = Astro.props;
+const t = (ui ?? {}) as DrillCalculatorUI;
+---
+
+<div class="dc-root" data-dc-root
+  data-coolsteel={t.coolSteel}
+  data-coolinox={t.coolInox}
+  data-coolalu={t.coolAlu}
+  data-coolbrass={t.coolBrass}
+  data-coolcastiron={t.coolCastIron}
+  data-coolwood={t.coolWood}
+  data-coolplastic={t.coolPlastic}>
+  <div class="dc-card">
+    <div class="dc-grid">
+      <div class="dc-sidebar">
+        <div class="dc-field">
+          <label class="dc-field-label">{t.labelMaterial}</label>
+          <div class="dc-mat-list" id="dc-mat-list">
+            <div class="dc-mat-chip active" data-id="steel" data-fz="0.1">
+              <div class="dc-mat-icon">
+                <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M2 19.63L13.43 8.2l-.71-.7l1.42-1.43L12 3.89c1.2-1.19 3.09-1.19 4.27 0l3.6 3.61l-1.42 1.41h2.84l.71.71l-3.55 3.59l-.71-.71V9.62l-1.47 1.42l-.71-.71L4.13 21.76z"></path></svg>
+              </div>
+              <span>{t.matSteel}</span>
+            </div>
+            <div class="dc-mat-chip" data-id="inox" data-fz="0.05">
+              <div class="dc-mat-icon">
+                <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12c5.16-1.26 9-6.45 9-12V5z"></path></svg>
+              </div>
+              <span>{t.matInox}</span>
+            </div>
+            <div class="dc-mat-chip" data-id="alu" data-fz="0.15">
+              <div class="dc-mat-icon">
+                <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M23.36 2.26c.59.59.59 1.54 0 2.12l-3.88 3.89l2.12 9.19l-1.41 1.42l-3.88-7.43L9.6 17l.36 2.47l-1.07 1.06l-1.76-3.18l-3.19-1.77L5 14.5l2.5.37L11.37 11L3.94 7.09l1.42-1.41l9.19 2.12l3.89-3.89c.56-.58 1.56-.58 2.12 0"></path></svg>
+              </div>
+              <span>{t.matAlu}</span>
+            </div>
+            <div class="dc-mat-chip" data-id="brass" data-fz="0.1">
+              <div class="dc-mat-icon">
+                <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"></path></svg>
+              </div>
+              <span>{t.matBrass}</span>
+            </div>
+            <div class="dc-mat-chip" data-id="castiron" data-fz="0.2">
+              <div class="dc-mat-icon">
+                <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18s-.41-.06-.57-.18l-7.9-4.44A.99.99 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18s.41.06.57.18l7.9 4.44c.32.17.53.5.53.88zM12 4.15L6.04 7.5L12 10.85l5.96-3.35zM5 15.91l6 3.38v-6.71L5 9.21zm14 0v-6.7l-6 3.37v6.71z"></path></svg>
+              </div>
+              <span>{t.matCastIron}</span>
+            </div>
+            <div class="dc-mat-chip" data-id="wood" data-fz="0.3">
+              <div class="dc-mat-icon">
+                <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M10 21v-3H3l5-5H5l5-5H7l5-5l5 5h-3l5 5h-3l5 5h-7v3z"></path></svg>
+              </div>
+              <span>{t.matWood}</span>
+            </div>
+            <div class="dc-mat-chip" data-id="plastic" data-fz="0.15">
+              <div class="dc-mat-icon">
+                <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M6 22a3 3 0 0 1-3-3c0-.6.18-1.16.5-1.63L9 7.81V6a1 1 0 0 1-1-1V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v1a1 1 0 0 1-1 1v1.81l5.5 9.56c.32.47.5 1.03.5 1.63a3 3 0 0 1-3 3zm-1-3a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1c0-.21-.07-.41-.18-.57l-2.29-3.96L14 17l-5.07-5.07l-3.75 6.5c-.11.16-.18.36-.18.57m8-9a1 1 0 0 0-1 1a1 1 0 0 0 1 1a1 1 0 0 0 1-1a1 1 0 0 0-1-1"></path></svg>
+              </div>
+              <span>{t.matPlastic}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="dc-field">
+          <label class="dc-field-label">{t.labelTool}</label>
+          <div class="dc-toggle-group">
+            <button class="dc-toggle-btn active" data-type="hss">{t.typeHss}</button>
+            <button class="dc-toggle-btn" data-type="carbide">{t.typeWidia}</button>
+          </div>
+        </div>
+
+        <div class="dc-field">
+          <div class="dc-diameter-header">
+            <label class="dc-field-label">{t.labelDiameter}</label>
+            <div class="dc-unit-toggle" id="dc-unit-toggle">
+              <button class="dc-unit-btn active" data-unit="mm">{t.unitMm}</button>
+              <button class="dc-unit-btn" data-unit="in">{t.unitInch}</button>
+            </div>
+          </div>
+          <div class="dc-diameter-display" id="dc-diam-display">10.0 mm</div>
+          <div class="dc-slider-box">
+            <input type="range" id="dc-diam-slider" class="dc-slider" min="0.5" max="50" step="0.5" value="10" />
+          </div>
+        </div>
+
+        <div class="dc-mode-badge">
+          <span class="dc-mode-label">{t.modeColumnDrill}</span>
+          <div class="dc-toggle-switch" id="dc-limit-toggle"></div>
+        </div>
+
+        <div class="dc-advanced">
+          <button class="dc-advanced-trigger" id="dc-adv-trigger">
+            <span>{t.labelAdvanced}</span>
+            <svg id="dc-adv-chevron" class="dc-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+          <div class="dc-advanced-body" id="dc-adv-body">
+            <div class="dc-adv-grid">
+              <div>
+                <label class="dc-field-label">{t.labelLips}</label>
+                <input type="number" id="dc-lips" class="dc-input" value="2" min="1" max="12" />
+              </div>
+              <div>
+                <label class="dc-field-label">{t.labelFz}</label>
+                <input type="number" id="dc-fz" class="dc-input" placeholder="0.1" step="0.01" value="" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="dc-main">
+        <div class="dc-hero">
+          <span class="dc-hero-label">{t.resultRpm}</span>
+          <div class="dc-rpm-number" id="dc-rpm-out">0</div>
+          <span class="dc-hero-unit">{t.rpmUnit}</span>
+          <div class="dc-rotation-visual" id="dc-rot-visual"></div>
+          <div class="dc-status-row">
+            <div id="dc-status-badge" class="hidden dc-badge dc-badge-warning">
+              <svg class="dc-badge-icon" viewBox="0 0 24 24" fill="currentColor">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 7v5M12 16h.01" stroke="white" stroke-width="2" fill="none"/>
+              </svg>
+              <span>{t.statusLimitActive}</span>
+            </div>
+            <div id="dc-warning-badge" class="hidden dc-badge dc-badge-alert">
+              <svg class="dc-badge-icon" viewBox="0 0 24 24" fill="currentColor">
+                <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
+              </svg>
+              <span>{t.statusOutOfRange}</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="dc-tiles">
+          <div class="dc-tile">
+            <div class="dc-tile-icon">
+              <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M13.5 4A1.5 1.5 0 0 0 12 5.5A1.5 1.5 0 0 0 13.5 7A1.5 1.5 0 0 0 15 5.5A1.5 1.5 0 0 0 13.5 4m-.36 4.77c-1.19.1-4.44 2.69-4.44 2.69c-.2.15-.14.14.02.42c.16.27.14.29.33.16c.2-.13.53-.34 1.08-.68c2.12-1.36.34 1.78-.57 7.07c-.36 2.62 2 1.27 2.61.87c.6-.39 2.21-1.5 2.37-1.61c.22-.15.06-.27-.11-.52c-.12-.17-.24-.05-.24-.05c-.65.43-1.84 1.33-2 .76c-.19-.57 1.03-4.48 1.7-7.17c.11-.64.41-2.04-.75-1.94"></path></svg>
+            </div>
+            <div class="dc-tile-content">
+              <span class="dc-tile-label">{t.resultCooling}</span>
+              <span class="dc-tile-value" id="dc-cool-txt">—</span>
+            </div>
+          </div>
+          <div class="dc-tile">
+            <div class="dc-tile-icon">
+              <svg width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg>
+            </div>
+            <div class="dc-tile-content">
+              <span class="dc-tile-label">{t.resultFeed}</span>
+              <span class="dc-tile-value" id="dc-feed-txt">— mm/min</span>
+            </div>
+          </div>
+        </div>
+
+        <div class="dc-machine-card">
+          <span class="dc-field-label">{t.labelMachine}</span>
+          <div class="dc-presets">
+            <button class="dc-preset-btn" data-preset="standard">{t.presetStandard}</button>
+            <button class="dc-preset-btn" data-preset="cnc">{t.presetCnc}</button>
+          </div>
+          <div class="dc-manual-input">
+            <input type="number" id="dc-speed-in" class="dc-input" placeholder={t.addRpmManual} />
+            <button id="dc-add-btn" class="dc-add-btn">+</button>
+          </div>
+          <div class="dc-chips-area" id="dc-chips-area"></div>
+          <div id="dc-closest-box" class="hidden dc-match-box">
+            <div class="dc-match-header">
+              <span class="dc-match-label">{t.recommendedLabel}</span>
+            </div>
+            <div class="dc-match-value" id="dc-closest-val">—</div>
+            <p class="dc-match-hint">{t.recommendedHint}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { calculateDrill, findClosestSpeed, getSpeedDifference, MATERIALS, type DrillContext } from './engine';
+
+  interface DcState { material: string; toolType: 'hss' | 'carbide'; diameter: number; unit: 'mm' | 'in'; isLimited: boolean; machineSpeeds: number[]; }
+
+  const materialCoolMap: Record<string, string> = {
+    steel: 'coolSteel', inox: 'coolInox', alu: 'coolAlu', brass: 'coolBrass',
+    castiron: 'coolCastIron', wood: 'coolWood', plastic: 'coolPlastic'
+  };
+
+  const presets: Record<string, number[]> = {
+    standard: [120, 200, 450, 600, 800, 1100, 1500, 2000, 2500, 3000],
+    cnc: [1000, 2000, 4000, 6000, 8000, 12000, 15000, 20000, 24000]
+  };
+
+  const state: DcState = { material: 'steel', toolType: 'hss', diameter: 10, unit: 'mm', isLimited: false, machineSpeeds: [] };
+
+  function getI18n(key: string): string {
+    const root = document.querySelector('[data-dc-root]');
+    return (root?.getAttribute(`data-${key}`) as string) || '';
+  }
+
+  function getMaterial() { return MATERIALS.find(m => m.id === state.material)!; }
+
+  function dcUpdateRpmDisplay(displayRpm: number, idealRpm: number) {
+    const rpmEl = document.getElementById('dc-rpm-out');
+    if (rpmEl) {
+      rpmEl.textContent = displayRpm.toString();
+      rpmEl.className = 'dc-rpm-number';
+      if (state.isLimited && displayRpm === Math.max(...state.machineSpeeds || [2500])) rpmEl.classList.add('limited');
+      else if (idealRpm < 500) rpmEl.classList.add('slow');
+      else rpmEl.classList.add('optimal');
+    }
+  }
+
+  function dcUpdateVisuals(displayRpm: number) {
+    const rotEl = document.getElementById('dc-rot-visual');
+    if (rotEl) {
+      const dur = Math.max(0.04, 60 / Math.max(1, displayRpm));
+      rotEl.style.animationDuration = `${dur}s`;
+      rotEl.style.animationPlayState = displayRpm > 0 ? 'running' : 'paused';
+    }
+  }
+
+  function dcUpdateClosestSpeed(displayRpm: number) {
+    if (state.machineSpeeds.length === 0) {
+      document.getElementById('dc-closest-box')?.classList.add('hidden');
+      return;
+    }
+    const closest = findClosestSpeed(displayRpm, state.machineSpeeds);
+    const diff = getSpeedDifference(closest, displayRpm);
+    const closestVal = document.getElementById('dc-closest-val');
+    if (closestVal) {
+      closestVal.textContent = `${closest} RPM`;
+      closestVal.style.color = diff > 20 ? 'var(--dc-danger, #ef4444)' : 'var(--dc-accent, #3b82f6)';
+    }
+    document.getElementById('dc-closest-box')?.classList.remove('hidden');
+  }
+
+  function dcGetDiameter(): number {
+    let diam = state.diameter;
+    if (state.unit === 'in') diam = diam * 25.4;
+    return diam;
+  }
+
+  function dcUpdateStatus(warning: string) {
+    document.getElementById('dc-status-badge')?.classList.toggle('hidden', warning !== 'limited');
+    document.getElementById('dc-warning-badge')?.classList.toggle('hidden', warning !== 'outofrange');
+  }
+
+  function dcUpdateMaterialInfo() {
+    const coolEl = document.getElementById('dc-cool-txt');
+    if (coolEl) {
+      const coolKey = materialCoolMap[state.material] || 'coolSteel';
+      coolEl.textContent = getI18n(coolKey);
+    }
+  }
+
+  function dcCalculate() {
+    const diam = dcGetDiameter();
+    const ctx: DrillContext = {
+      lips: parseInt((document.getElementById('dc-lips') as HTMLInputElement)?.value || '2'),
+      fz: parseFloat((document.getElementById('dc-fz') as HTMLInputElement)?.value || '0') || 0,
+      maxRpm: Math.max(...state.machineSpeeds || [2500]),
+      isLimited: state.isLimited
+    };
+
+    const result = calculateDrill(diam, state.toolType, getMaterial(), ctx);
+    dcUpdateRpmDisplay(result.displayRpm, result.idealRpm);
+    dcUpdateVisuals(result.displayRpm);
+    dcUpdateStatus(result.warning);
+    dcUpdateMaterialInfo();
+
+    const feedEl = document.getElementById('dc-feed-txt');
+    if (feedEl) feedEl.textContent = `${result.feed} mm/min`;
+
+    dcUpdateClosestSpeed(result.displayRpm);
+  }
+
+  document.querySelectorAll('.dc-mat-chip').forEach(chip => {
+    chip.addEventListener('click', () => {
+      document.querySelectorAll('.dc-mat-chip').forEach(c => c.classList.remove('active'));
+      chip.classList.add('active');
+      state.material = chip.getAttribute('data-id') || 'steel';
+      (document.getElementById('dc-fz') as HTMLInputElement).value = '';
+      dcCalculate();
+    });
+  });
+
+  document.querySelectorAll('.dc-toggle-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.dc-toggle-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      state.toolType = (btn.getAttribute('data-type') as 'hss' | 'carbide') || 'hss';
+      dcCalculate();
+    });
+  });
+
+  document.querySelectorAll('.dc-unit-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.dc-unit-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+      const newUnit = (btn.getAttribute('data-unit') as 'mm' | 'in') || 'mm';
+      const slider = document.getElementById('dc-diam-slider') as HTMLInputElement;
+      if (newUnit !== state.unit) {
+        let val = parseFloat(slider.value);
+        if (newUnit === 'in') {
+          val = val / 25.4;
+          slider.min = '0.02';
+          slider.max = '2';
+          slider.step = '0.01';
+        } else {
+          val = val * 25.4;
+          slider.min = '0.5';
+          slider.max = '50';
+          slider.step = '0.5';
+        }
+        state.unit = newUnit;
+        slider.value = val.toFixed(newUnit === 'in' ? 2 : 1);
+        (document.getElementById('dc-diam-display') as HTMLElement).textContent = `${slider.value} ${state.unit}`;
+      }
+      dcCalculate();
+    });
+  });
+
+  const slider = document.getElementById('dc-diam-slider') as HTMLInputElement;
+  slider.addEventListener('input', () => {
+    state.diameter = parseFloat(slider.value);
+    (document.getElementById('dc-diam-display') as HTMLElement).textContent = `${slider.value} ${state.unit}`;
+    dcCalculate();
+  });
+
+  [document.getElementById('dc-lips'), document.getElementById('dc-fz')].forEach(el => {
+    el?.addEventListener('input', dcCalculate);
+  });
+
+  const limitToggle = document.getElementById('dc-limit-toggle');
+  limitToggle?.addEventListener('click', () => {
+    state.isLimited = !state.isLimited;
+    limitToggle.classList.toggle('active');
+    dcCalculate();
+  });
+
+  document.getElementById('dc-adv-trigger')?.addEventListener('click', () => {
+    document.getElementById('dc-adv-body')?.classList.toggle('visible');
+    document.getElementById('dc-adv-chevron')?.classList.toggle('rotate');
+  });
+
+  document.querySelectorAll('.dc-preset-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const preset = btn.getAttribute('data-preset') as keyof typeof presets;
+      if (preset && presets[preset]) {
+        state.machineSpeeds = [...presets[preset]];
+        document.querySelectorAll('.dc-preset-btn').forEach(p => p.classList.remove('active'));
+        btn.classList.add('active');
+        dcRenderChips();
+        dcCalculate();
+      }
+    });
+  });
+
+  document.getElementById('dc-add-btn')?.addEventListener('click', () => {
+    const inp = document.getElementById('dc-speed-in') as HTMLInputElement;
+    const val = parseInt(inp.value);
+    if (!isNaN(val) && val > 0 && !state.machineSpeeds.includes(val)) {
+      state.machineSpeeds.push(val);
+      state.machineSpeeds.sort((a, b) => a - b);
+      dcRenderChips();
+      dcCalculate();
+      inp.value = '';
+    }
+  });
+
+  function dcRenderChips() {
+    const area = document.getElementById('dc-chips-area');
+    if (!area) return;
+    area.innerHTML = '';
+    state.machineSpeeds.sort((a, b) => a - b).forEach(v => {
+      const div = document.createElement('div');
+      div.className = 'dc-chip';
+      div.innerHTML = `<span>${v}</span><button type="button">×</button>`;
+      div.querySelector('button')?.addEventListener('click', () => {
+        state.machineSpeeds = state.machineSpeeds.filter(s => s !== v);
+        dcRenderChips();
+        dcCalculate();
+      });
+      area.appendChild(div);
+    });
+  }
+
+  document.querySelector('.dc-mat-chip')?.classList.add('active');
+  dcCalculate();
+</script>
+
+<style>
+  :root {
+    --dc-primary: #6366f1;
+    --dc-primary-dark: #4f46e5;
+    --dc-primary-light: #818cf8;
+    --dc-accent: #f59e0b;
+    --dc-accent-dark: #d97706;
+    --dc-accent-light: #fbbf24;
+    --dc-danger: #ef4444;
+    --dc-success: #10b981;
+    --dc-neutral: #374151;
+    --dc-border: #e5e7eb;
+  }
+
+  :global(.theme-dark) {
+    --dc-primary: #818cf8;
+    --dc-primary-dark: #6366f1;
+    --dc-accent: #fbbf24;
+    --dc-border: rgba(255, 255, 255, 0.1);
+  }
+
+  :global(.hidden) {
+    display: none;
+  }
+
+  .dc-root {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .dc-card {
+    border: 1px solid var(--dc-border);
+    border-radius: 32px;
+    overflow: hidden;
+    background: rgba(255, 255, 255, 0.3);
+  }
+
+  :global(.theme-dark) .dc-card {
+    background: rgba(255, 255, 255, 0.01);
+  }
+
+  .dc-grid {
+    display: grid;
+    grid-template-columns: 1.4fr 1fr;
+    min-height: 600px;
+  }
+
+  .dc-sidebar {
+    padding: 3rem;
+    background: rgba(255, 255, 255, 0.6);
+    border-right: 1px solid var(--dc-border);
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+  }
+
+  :global(.theme-dark) .dc-sidebar {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  .dc-main {
+    padding: 3rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+    background: rgba(255, 255, 255, 0.2);
+  }
+
+  :global(.theme-dark) .dc-main {
+    background: rgba(255, 255, 255, 0.005);
+  }
+
+  .dc-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .dc-field-label {
+    font-size: 0.85rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: #6b7280;
+  }
+
+  :global(.theme-dark) .dc-field-label {
+    color: #9ca3af;
+  }
+
+  .dc-mat-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
+    gap: 1rem;
+  }
+
+  .dc-mat-chip {
+    padding: 1rem;
+    border: 2px solid var(--dc-border);
+    border-radius: 12px;
+    background: white;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: var(--dc-neutral);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    position: relative;
+  }
+
+  .dc-mat-icon {
+    width: 64px;
+    height: 64px;
+    color: var(--dc-primary);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem;
+  }
+
+  .dc-mat-chip:hover {
+    border-color: var(--dc-primary);
+  }
+
+  :global(.dc-mat-chip.active) {
+    background: white;
+    border-color: var(--dc-accent);
+    transform: rotate(5deg) scale(1.05);
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
+  }
+
+  :global(.theme-dark) .dc-mat-chip {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+  }
+
+  :global(.theme-dark .dc-mat-chip.active) {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: var(--dc-accent);
+  }
+
+  .dc-toggle-group {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.5rem;
+  }
+
+  .dc-toggle-btn {
+    padding: 0.8rem 1rem;
+    border: 1px solid var(--dc-border);
+    border-radius: 8px;
+    background: white;
+    color: var(--dc-neutral);
+    font-weight: 700;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dc-toggle-btn:hover {
+    border-color: var(--dc-primary);
+  }
+
+  :global(.dc-toggle-btn.active) {
+    background: var(--dc-primary);
+    border-color: var(--dc-primary);
+    color: white;
+  }
+
+  :global(.theme-dark) .dc-toggle-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+  }
+
+  :global(.theme-dark .dc-toggle-btn.active) {
+    background: var(--dc-primary);
+    border-color: var(--dc-primary);
+    color: white;
+    box-shadow: 0 0 12px rgba(129, 140, 248, 0.4);
+  }
+
+  .dc-diameter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+  }
+
+  .dc-unit-toggle {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.4rem;
+  }
+
+  .dc-unit-btn {
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--dc-border);
+    border-radius: 6px;
+    background: white;
+    color: var(--dc-neutral);
+    font-weight: 700;
+    font-size: 0.7rem;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  :global(.dc-unit-btn.active) {
+    background: white;
+    border-color: var(--dc-primary);
+    color: var(--dc-primary);
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
+  }
+
+  :global(.theme-dark) .dc-unit-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+  }
+
+  .dc-diameter-display {
+    font-size: 1.3rem;
+    font-weight: 900;
+    color: var(--dc-primary);
+    margin-bottom: 0.5rem;
+  }
+
+  :global(.theme-dark) .dc-diameter-display {
+    color: var(--dc-primary-light);
+  }
+
+  .dc-slider-box {
+    width: 100%;
+  }
+
+  .dc-slider {
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    background: var(--dc-border);
+    outline: none;
+    appearance: none;
+    -webkit-appearance: none;
+  }
+
+  .dc-slider::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--dc-primary);
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+  }
+
+  .dc-slider::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: var(--dc-primary);
+    cursor: pointer;
+    border: none;
+    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
+  }
+
+  .dc-mode-badge {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: rgba(99, 102, 241, 0.1);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 12px;
+    padding: 1rem;
+  }
+
+  :global(.theme-dark) .dc-mode-badge {
+    background: rgba(99, 102, 241, 0.15);
+    border-color: rgba(99, 102, 241, 0.3);
+  }
+
+  .dc-mode-label {
+    font-size: 0.75rem;
+    font-weight: 800;
+    color: var(--dc-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.theme-dark) .dc-mode-label {
+    color: var(--dc-primary-light);
+  }
+
+  .dc-toggle-switch {
+    width: 48px;
+    height: 24px;
+    border-radius: 12px;
+    background: var(--dc-border);
+    cursor: pointer;
+    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+  }
+
+  :global(.dc-toggle-switch.active) {
+    background: var(--dc-primary);
+  }
+
+  .dc-toggle-switch::after {
+    content: '';
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: white;
+    top: 2px;
+    left: 2px;
+    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  :global(.dc-toggle-switch.active::after) {
+    left: 26px;
+  }
+
+  .dc-advanced {
+    margin-top: auto;
+  }
+  .dc-advanced-trigger {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    background: white;
+    border: 2px dashed var(--dc-border);
+    border-radius: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    font-weight: 700;
+    color: var(--dc-primary);
+    font-size: 0.8rem;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .dc-advanced-trigger:hover {
+    border-style: solid;
+    background: rgba(99, 102, 241, 0.05);
+  }
+  :global(.theme-dark) .dc-advanced-trigger {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(99, 102, 241, 0.3);
+    color: var(--dc-primary-light);
+  }
+
+  .dc-chevron {
+    width: 16px;
+    height: 16px;
+    color: inherit;
+    transition: transform 0.2s;
+  }
+
+  :global(.dc-chevron.rotate) {
+    transform: rotate(180deg);
+  }
+
+  .dc-advanced-body {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    margin-top: 0;
+  }
+  :global(.dc-advanced-body.visible) {
+    max-height: 500px;
+    margin-top: 1rem;
+  }
+  .dc-adv-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+  }
+
+  .dc-input {
+    width: 100%;
+    padding: 1rem;
+    border: 1px solid var(--dc-border);
+    border-radius: 8px;
+    font-weight: 700;
+    background: white;
+    color: var(--dc-neutral);
+    transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .dc-input:focus {
+    outline: none;
+    border-color: var(--dc-primary);
+  }
+
+  :global(.theme-dark) .dc-input {
+    background: rgba(0, 0, 0, 0.25);
+    border-color: rgba(255, 255, 255, 0.1);
+    color: #f9fafb;
+  }
+
+  .dc-hero {
+    text-align: center;
+    padding: 3rem;
+    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(245, 158, 11, 0.05));
+    border-radius: 16px;
+  }
+
+  .dc-hero-label {
+    font-size: 0.7rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.15em;
+    color: var(--dc-primary);
+  }
+
+  :global(.theme-dark) .dc-hero-label {
+    color: var(--dc-primary-light);
+  }
+
+  .dc-rpm-number {
+    font-size: 6rem;
+    font-weight: 900;
+    color: var(--dc-primary);
+    line-height: 1;
+    margin: 1rem 0;
+  }
+  :global(.dc-rpm-number.limited) { color: var(--dc-danger); }
+  :global(.dc-rpm-number.slow) { color: var(--dc-accent); }
+  :global(.dc-rpm-number.optimal) { color: var(--dc-success); }
+  :global(.theme-dark .dc-rpm-number) { color: var(--dc-primary-light); }
+  :global(.theme-dark .dc-rpm-number.slow) { color: var(--dc-accent-light); }
+
+  .dc-hero-unit {
+    font-size: 0.85rem;
+    font-weight: 800;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  .dc-rotation-visual {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    border: 4px solid;
+    border-top-color: var(--dc-primary);
+    border-right-color: var(--dc-accent);
+    border-bottom-color: var(--dc-primary);
+    border-left-color: var(--dc-accent);
+    margin: 1rem auto;
+    animation: dc-spin 2s linear infinite;
+    animation-play-state: paused;
+  }
+
+  @keyframes dc-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .dc-status-row {
+    min-height: 32px;
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5rem;
+    gap: 0.5rem;
+  }
+
+  :global(.dc-badge) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.7rem;
+    font-weight: 700;
+  }
+
+  :global(.dc-badge-warning) {
+    background: rgba(99, 102, 241, 0.15);
+    color: var(--dc-primary);
+  }
+
+  :global(.theme-dark .dc-badge-warning) {
+    background: rgba(99, 102, 241, 0.25);
+  }
+
+  :global(.dc-badge-alert) {
+    background: rgba(239, 68, 68, 0.15);
+    color: var(--dc-danger);
+  }
+
+  :global(.theme-dark .dc-badge-alert) {
+    background: rgba(239, 68, 68, 0.25);
+  }
+
+  :global(.dc-badge-icon) {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  :global(.dc-badge-icon svg) {
+    width: 100%;
+    height: 100%;
+    stroke: currentcolor;
+    fill: currentcolor;
+  }
+
+  :global(.dc-badge-icon path) {
+    stroke: currentcolor;
+    fill: currentcolor;
+  }
+
+  .dc-tiles {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .dc-tile {
+    padding: 1.5rem;
+    background: rgba(255, 255, 255, 0.5);
+    border: 1px solid rgba(255, 255, 255, 0.7);
+    border-radius: 12px;
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1rem;
+    transition: all 0.2s;
+  }
+
+  .dc-tile:hover {
+    background: rgba(255, 255, 255, 0.7);
+    border-color: var(--dc-border);
+  }
+
+  :global(.theme-dark) .dc-tile {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .dc-tile-icon {
+    width: 56px;
+    height: 56px;
+    color: var(--dc-primary);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2rem;
+  }
+
+  :global(.theme-dark) .dc-tile-icon {
+    color: var(--dc-primary-light);
+  }
+
+  .dc-tile-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+  }
+
+  .dc-tile-label {
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #6b7280;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.theme-dark) .dc-tile-label {
+    color: #9ca3af;
+  }
+
+  .dc-tile-value {
+    font-size: 1.3rem;
+    font-weight: 900;
+    color: var(--dc-primary);
+  }
+
+  :global(.theme-dark) .dc-tile-value {
+    color: var(--dc-primary-light);
+  }
+
+  .dc-machine-card {
+    background: rgba(255, 255, 255, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 12px;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  :global(.theme-dark) .dc-machine-card {
+    background: rgba(255, 255, 255, 0.03);
+    border-color: rgba(255, 255, 255, 0.06);
+  }
+
+  .dc-presets {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0;
+    border-radius: 16px 16px 0 0;
+    overflow: hidden;
+    border: 1px solid var(--dc-border);
+  }
+  .dc-preset-btn {
+    padding: 0.8rem 1rem;
+    border: none;
+    border-right: 1px solid var(--dc-border);
+    background: white;
+    color: var(--dc-neutral);
+    font-weight: 700;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  :global(.dc-preset-btn:last-child) {
+    border-right: none;
+  }
+
+  .dc-preset-btn:hover {
+    background: rgba(99, 102, 241, 0.05);
+  }
+
+  :global(.dc-preset-btn.active) {
+    background: var(--dc-primary);
+    color: white;
+  }
+
+  :global(.theme-dark) .dc-preset-btn {
+    background: rgba(255, 255, 255, 0.05);
+    border-right-color: rgba(255, 255, 255, 0.1);
+    color: #e5e7eb;
+  }
+
+  .dc-manual-input {
+    display: flex;
+    gap: 0;
+    border: 1px solid var(--dc-border);
+    border-radius: 8px;
+    overflow: hidden;
+    background: white;
+    margin-top: 0.75rem;
+  }
+  .dc-manual-input .dc-input {
+    flex: 1;
+    border: none;
+    border-radius: 0;
+    padding: 0.8rem 1rem;
+    font-size: 0.9rem;
+  }
+
+  .dc-input::placeholder {
+    color: #9ca3af;
+  }
+
+  .dc-manual-input .dc-input:focus {
+    background: rgba(99, 102, 241, 0.02);
+  }
+
+  :global(.theme-dark) .dc-manual-input .dc-input {
+    background: rgba(255, 255, 255, 0.08);
+    color: #f9fafb;
+    border-color: rgba(255, 255, 255, 0.1);
+  }
+  .dc-add-btn {
+    padding: 0.8rem 1.2rem;
+    background: var(--dc-primary);
+    color: white;
+    border: none;
+    font-weight: 900;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.2rem;
+  }
+  .dc-add-btn:hover {
+    background: var(--dc-primary-dark);
+  }
+
+  :global(.dc-chips-area) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    min-height: 0;
+  }
+  :global(.dc-chip) {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(99, 102, 241, 0.1);
+    color: var(--dc-primary);
+    padding: 0.5rem 0.8rem;
+    border-radius: 16px;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  :global(.theme-dark .dc-chip) {
+    background: rgba(99, 102, 241, 0.15);
+    color: var(--dc-primary-light);
+  }
+  :global(.dc-chip button) {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font-weight: 900;
+    padding: 0;
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: color 0.2s;
+  }
+  :global(.dc-chip button:hover) { color: var(--dc-danger); }
+
+  :global(.dc-match-box) {
+    background: rgba(99, 102, 241, 0.08);
+    border: 1px solid rgba(99, 102, 241, 0.2);
+    border-radius: 12px;
+    padding: 1.2rem;
+    text-align: center;
+    animation: slide-in-up 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes slide-in-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+  :global(.dc-match-header) {
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    color: var(--dc-primary);
+    margin-bottom: 0.6rem;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.theme-dark .dc-match-header) {
+    color: var(--dc-primary-light);
+  }
+
+  :global(.dc-match-value) {
+    font-size: 1.5rem;
+    font-weight: 900;
+    color: var(--dc-primary);
+  }
+
+  :global(.theme-dark .dc-match-value) {
+    color: var(--dc-primary-light);
+  }
+
+  :global(.dc-match-hint) {
+    font-size: 0.65rem;
+    color: #6b7280;
+    margin: 0.6rem 0 0;
+  }
+
+  @media (max-width: 900px) {
+    .dc-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .dc-sidebar {
+      border-right: none;
+      border-bottom: 1px solid var(--dc-border);
+      padding: 2rem;
+      gap: 2rem;
+    }
+
+    .dc-main {
+      padding: 2rem;
+      gap: 2rem;
+    }
+
+    .dc-tiles {
+      grid-template-columns: 1fr;
+    }
+
+    .dc-mat-list {
+      grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    }
+
+    .dc-rpm-number {
+      font-size: 3.5rem;
+    }
+  }
+</style>