@jjlmoya/utils-diy 1.1.0

package/src/tool/voltageDropCalculator/component.astro

@@ -0,0 +1,1022 @@
+---
+import type { VoltageDropCalculatorUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+const { ui } = Astro.props;
+const t = (ui ?? {}) as VoltageDropCalculatorUI;
+
+const SECTIONS = [
+  { val: 0.5, label: '0.5', fill: 6 },
+  { val: 0.75, label: '0.75', fill: 8 },
+  { val: 1.0, label: '1.0', fill: 10 },
+  { val: 1.5, label: '1.5', fill: 12 },
+  { val: 2.5, label: '2.5', fill: 16 },
+  { val: 4.0, label: '4.0', fill: 20 },
+  { val: 6.0, label: '6.0', fill: 24 },
+  { val: 10.0, label: '10', fill: 28 },
+  { val: 16.0, label: '16', fill: 32 },
+  { val: 25.0, label: '25', fill: 36 },
+  { val: 35.0, label: '35', fill: 40 },
+  { val: 50.0, label: '50', fill: 44 },
+];
+---
+
+<div
+  class="vd-root"
+  data-vd-root
+  data-vd-s-excellent={t.statusExcellent}
+  data-vd-s-acceptable={t.statusAcceptable}
+  data-vd-s-critical={t.statusCritical}
+  data-vd-unit-watts={t.unitWatts}
+  data-vd-unit-amps={t.unitAmps}
+>
+  <div class="vd-hero">
+    <div class="vd-pulse" data-vd-pulse></div>
+    <div class="vd-hero-body">
+      <div class="vd-hero-main">
+        <div class="vd-drop-label">{t.heroDropLabel}</div>
+        <div class="vd-drop-row">
+          <span class="vd-drop-val" data-vd-drop-v>0.00</span>
+          <span class="vd-drop-unit">{t.heroVoltsUnit}</span>
+        </div>
+        <div class="vd-status-row">
+          <div class="vd-status-pill" data-vd-status-pill data-vd-status="excellent">
+            <span class="vd-status-dot"></span>
+            <span data-vd-status-text>{t.statusExcellent}</span>
+          </div>
+          <div class="vd-pct-wrap">
+            <span data-vd-drop-p>0.00</span>{t.heroPctLoss}
+          </div>
+        </div>
+      </div>
+      <div class="vd-eff-card">
+        <div class="vd-eff-label">{t.heroEffLabel}</div>
+        <div class="vd-eff-val-row">
+          <span class="vd-eff-val" data-vd-eff>100.0</span>
+          <span class="vd-eff-pct">%</span>
+        </div>
+        <div class="vd-eff-bar-wrap">
+          <div class="vd-eff-bar-fill" data-vd-bar-eff style="width:100%"></div>
+          <div class="vd-eff-bar-loss"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="vd-body">
+    <div class="vd-row-2">
+      <div class="vd-card">
+        <label class="vd-field-label">{t.fieldVoltage}</label>
+        <div class="vd-toggle-wrap">
+          <div class="vd-volt-bg" data-vd-volt-bg></div>
+          <button class="vd-volt-btn vd-active" data-vd-volt-btn="12">12V</button>
+          <button class="vd-volt-btn" data-vd-volt-btn="24">24V</button>
+          <button class="vd-volt-btn" data-vd-volt-btn="230">230V</button>
+        </div>
+      </div>
+      <div class="vd-card">
+        <label class="vd-field-label">{t.fieldMaterial}</label>
+        <div class="vd-material-wrap">
+          <label class="vd-material-item vd-material-copper">
+            <input type="radio" name="vd-material" value="copper" class="vd-material-input" checked />
+            <div class="vd-material-box">
+              <span class="vd-wire-dot vd-wire-dot-copper"></span>
+              <span>{t.materialCopper}</span>
+            </div>
+          </label>
+          <label class="vd-material-item vd-material-alum">
+            <input type="radio" name="vd-material" value="aluminum" class="vd-material-input" />
+            <div class="vd-material-box">
+              <span class="vd-wire-dot vd-wire-dot-alum"></span>
+              <span>{t.materialAlum}</span>
+            </div>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="vd-card vd-load-card">
+      <div class="vd-load-top">
+        <label class="vd-field-label">{t.fieldLoad}</label>
+        <div class="vd-mode-wrap">
+          <button class="vd-mode-btn vd-active" data-vd-mode-btn="watts">{t.modeW}</button>
+          <button class="vd-mode-btn" data-vd-mode-btn="amps">{t.modeA}</button>
+        </div>
+      </div>
+      <div class="vd-load-input-row">
+        <input type="number" data-vd-load-val value="60" class="vd-load-input" />
+        <span class="vd-load-unit" data-vd-load-unit>{t.unitWatts}</span>
+      </div>
+    </div>
+
+    <div class="vd-card">
+      <div class="vd-len-top">
+        <label class="vd-field-label">{t.fieldLength}</label>
+        <span class="vd-len-info"><span data-vd-len-display>10</span> {t.unitMeters}</span>
+      </div>
+      <div class="vd-slider-wrap">
+        <input type="range" data-vd-len-slider min="1" max="100" step="1" value="10" class="vd-slider-input" />
+        <div class="vd-slider-track">
+          <div class="vd-slider-fill" data-vd-len-track style="width:9.09%"></div>
+        </div>
+        <div class="vd-slider-thumb" data-vd-len-thumb style="left:9.09%">
+          <div class="vd-slider-knob"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="vd-card">
+      <div class="vd-section-top">
+        <label class="vd-field-label">{t.fieldSection}</label>
+        <span class="vd-section-badge">{t.sectionInfo}</span>
+      </div>
+      <div class="vd-gauge-outer">
+        <div class="vd-gauge-fade-l"></div>
+        <div class="vd-gauge-fade-r"></div>
+        <div class="vd-gauge-scroll" data-vd-gauge-scroll>
+          {SECTIONS.map((s) => (
+            <label class="vd-gauge-item">
+              <input
+                type="radio"
+                name="vd-section"
+                value={s.val}
+                class="vd-gauge-input"
+                checked={s.val === 1.5}
+              />
+              <div class="vd-gauge-box">
+                <div class="vd-wire-circle" style={`width:${s.fill}px;height:${s.fill}px`}></div>
+                <span class="vd-gauge-val">{s.label}</span>
+                <span class="vd-gauge-unit">mm²</span>
+              </div>
+            </label>
+          ))}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  interface VdState {
+    voltage: number;
+    load: number;
+    isWatts: boolean;
+    length: number;
+    section: number;
+    material: string;
+  }
+
+  function vdCalc(root: Element, state: VdState): void {
+    const current = state.isWatts && state.voltage > 0 ? state.load / state.voltage : state.load;
+    const rho = state.material === 'aluminum' ? 0.028 : 0.0178;
+    const dropV = (2 * state.length * current * rho) / state.section;
+    const dropP = state.voltage > 0 ? (dropV / state.voltage) * 100 : 0;
+    vdUpdateHero(root, dropV, dropP);
+    vdUpdateStatus(root, dropP);
+  }
+
+  function vdUpdateHero(root: Element, dropV: number, dropP: number): void {
+    const ev = root.querySelector('[data-vd-drop-v]');
+    const ep = root.querySelector('[data-vd-drop-p]');
+    const eff = root.querySelector('[data-vd-eff]');
+    const bar = root.querySelector('[data-vd-bar-eff]') as HTMLElement | null;
+    if (ev) ev.textContent = dropV.toFixed(2);
+    if (ep) ep.textContent = dropP.toFixed(2);
+    const kept = Math.max(0, 100 - dropP);
+    if (eff) eff.textContent = kept.toFixed(1);
+    if (bar) bar.style.width = kept + '%';
+  }
+
+  function vdStatusFor(root: Element, dropP: number): [string, string] {
+    if (dropP < 3) return ['excellent', root.getAttribute('data-vd-s-excellent') ?? ''];
+    if (dropP < 5) return ['acceptable', root.getAttribute('data-vd-s-acceptable') ?? ''];
+    return ['critical', root.getAttribute('data-vd-s-critical') ?? ''];
+  }
+
+  function vdUpdateStatus(root: Element, dropP: number): void {
+    const [status, label] = vdStatusFor(root, dropP);
+    const pill = root.querySelector('[data-vd-status-pill]');
+    const txt = root.querySelector('[data-vd-status-text]');
+    const pulse = root.querySelector('[data-vd-pulse]');
+    if (pill) pill.setAttribute('data-vd-status', status);
+    if (pulse) pulse.setAttribute('data-vd-pulse-status', status);
+    if (txt) txt.textContent = label;
+  }
+
+  function vdAttachVoltage(root: Element, state: VdState): void {
+    const btns = Array.from(root.querySelectorAll('[data-vd-volt-btn]'));
+    const bg = root.querySelector('[data-vd-volt-bg]') as HTMLElement | null;
+    btns.forEach((btn, idx) => {
+      btn.addEventListener('click', () => {
+        state.voltage = parseFloat((btn as HTMLElement).dataset.vdVoltBtn ?? '0');
+        btns.forEach((b, i) => b.classList.toggle('vd-active', i === idx));
+        if (bg) bg.style.left = `${idx * 33.3 + 1}%`;
+        vdCalc(root, state);
+      });
+    });
+  }
+
+  function vdAttachLoad(root: Element, state: VdState): void {
+    const inp = root.querySelector('[data-vd-load-val]');
+    const unit = root.querySelector('[data-vd-load-unit]');
+    if (inp) inp.addEventListener('input', () => {
+      state.load = parseFloat((inp as HTMLInputElement).value) || 0;
+      vdCalc(root, state);
+    });
+    root.querySelectorAll('[data-vd-mode-btn]').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const mode = (btn as HTMLElement).dataset.vdModeBtn;
+        state.isWatts = mode === 'watts';
+        root.querySelectorAll('[data-vd-mode-btn]').forEach((b) => {
+          b.classList.toggle('vd-active', (b as HTMLElement).dataset.vdModeBtn === mode);
+        });
+        const key = state.isWatts ? 'data-vd-unit-watts' : 'data-vd-unit-amps';
+        if (unit) unit.textContent = root.getAttribute(key) ?? '';
+        vdCalc(root, state);
+      });
+    });
+  }
+
+  function vdAttachSlider(root: Element, state: VdState): void {
+    const slider = root.querySelector('[data-vd-len-slider]') as HTMLInputElement | null;
+    if (!slider) return;
+    slider.addEventListener('input', () => {
+      state.length = parseFloat(slider.value);
+      const pct = ((state.length - 1) / 99) * 100;
+      const track = root.querySelector('[data-vd-len-track]') as HTMLElement | null;
+      const thumb = root.querySelector('[data-vd-len-thumb]') as HTMLElement | null;
+      const display = root.querySelector('[data-vd-len-display]');
+      if (track) track.style.width = pct + '%';
+      if (thumb) thumb.style.left = pct + '%';
+      if (display) display.textContent = state.length.toString();
+      vdCalc(root, state);
+    });
+  }
+
+  function vdAttachSection(root: Element, state: VdState): void {
+    const box = root.querySelector('[data-vd-gauge-scroll]');
+    if (!box) return;
+    box.addEventListener('change', (e) => {
+      const tgt = e.target as HTMLInputElement;
+      if (tgt.name === 'vd-section') {
+        state.section = parseFloat(tgt.value);
+        vdCalc(root, state);
+      }
+    });
+  }
+
+  function vdAttachMaterial(root: Element, state: VdState): void {
+    root.querySelectorAll('input[name="vd-material"]').forEach((r) => {
+      r.addEventListener('change', (e) => {
+        state.material = (e.target as HTMLInputElement).value;
+        root.setAttribute('data-vd-material', state.material);
+        vdCalc(root, state);
+      });
+    });
+  }
+
+  function vdInit(root: Element): void {
+    const state: VdState = { voltage: 12, load: 60, isWatts: true, length: 10, section: 1.5, material: 'copper' };
+    root.setAttribute('data-vd-material', 'copper');
+    vdAttachVoltage(root, state);
+    vdAttachLoad(root, state);
+    vdAttachSlider(root, state);
+    vdAttachSection(root, state);
+    vdAttachMaterial(root, state);
+    vdCalc(root, state);
+  }
+
+  document.querySelectorAll('[data-vd-root]').forEach(vdInit);
+</script>
+
+<style>
+  .vd-root {
+    max-width: 700px;
+    margin: 0 auto;
+    border-radius: 1.5rem;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
+    border: 1px solid #e2e8f0;
+    overflow: hidden;
+  }
+
+  :global(.theme-dark) .vd-root {
+    border-color: #1e293b;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+  }
+
+  .vd-hero {
+    background: #0f172a;
+    color: #fff;
+    padding: 2rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .vd-pulse {
+    position: absolute;
+    top: -125px;
+    right: -125px;
+    width: 350px;
+    height: 350px;
+    background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 70%);
+    border-radius: 50%;
+    pointer-events: none;
+    transition: background 0.7s ease;
+  }
+
+  .vd-pulse[data-vd-pulse-status="acceptable"] {
+    background: radial-gradient(circle, rgba(245, 158, 11, 0.2), transparent 70%);
+  }
+
+  .vd-pulse[data-vd-pulse-status="critical"] {
+    background: radial-gradient(circle, rgba(239, 68, 68, 0.25), transparent 70%);
+  }
+
+  .vd-hero-body {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  .vd-drop-label {
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #94a3b8;
+    margin-bottom: 0.5rem;
+  }
+
+  .vd-drop-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+  }
+
+  .vd-drop-val {
+    font-size: 3.5rem;
+    font-weight: 900;
+    line-height: 1;
+    letter-spacing: -0.02em;
+  }
+
+  .vd-drop-unit {
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: #64748b;
+  }
+
+  .vd-status-row {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
+
+  .vd-status-pill {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.25rem 0.75rem;
+    border-radius: 999px;
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    background: rgba(34, 197, 94, 0.2);
+    border: 1px solid rgba(34, 197, 94, 0.5);
+    color: #4ade80;
+    transition: all 0.3s ease;
+  }
+
+  .vd-status-pill[data-vd-status="acceptable"] {
+    background: rgba(245, 158, 11, 0.2);
+    border-color: rgba(245, 158, 11, 0.5);
+    color: #fbbf24;
+  }
+
+  .vd-status-pill[data-vd-status="critical"] {
+    background: rgba(239, 68, 68, 0.2);
+    border-color: rgba(239, 68, 68, 0.5);
+    color: #f87171;
+  }
+
+  .vd-status-dot {
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: currentcolor;
+  }
+
+  .vd-status-pill[data-vd-status="critical"] .vd-status-dot {
+    animation: vd-blink 1s ease-in-out infinite;
+  }
+
+  @keyframes vd-blink {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.2;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .vd-pct-wrap {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #94a3b8;
+  }
+
+  .vd-eff-card {
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 1rem;
+    padding: 1rem;
+    min-width: 150px;
+  }
+
+  .vd-eff-label {
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    color: #94a3b8;
+    margin-bottom: 0.5rem;
+  }
+
+  .vd-eff-val-row {
+    display: flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .vd-eff-val {
+    font-size: 1.875rem;
+    font-weight: 700;
+  }
+
+  .vd-eff-pct {
+    font-size: 0.875rem;
+    color: #94a3b8;
+  }
+
+  .vd-eff-bar-wrap {
+    display: flex;
+    height: 8px;
+    background: rgba(51, 65, 85, 0.5);
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  .vd-eff-bar-fill {
+    height: 100%;
+    background: #4ade80;
+    transition: width 0.5s ease;
+  }
+
+  .vd-eff-bar-loss {
+    height: 100%;
+    flex: 1;
+    background: rgba(239, 68, 68, 0.5);
+  }
+
+  .vd-body {
+    padding: 1.5rem 2rem;
+    background: #f8fafc;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  :global(.theme-dark) .vd-body {
+    background: rgba(15, 23, 42, 0.5);
+  }
+
+  .vd-row-2 {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1.5rem;
+  }
+
+  .vd-card {
+    background: #fff;
+    border: 1px solid #e2e8f0;
+    border-radius: 1rem;
+    padding: 1.25rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  }
+
+  :global(.theme-dark) .vd-card {
+    background: #1e293b;
+    border-color: #334155;
+  }
+
+  .vd-field-label {
+    display: block;
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #94a3b8;
+    margin-bottom: 0.75rem;
+  }
+
+  .vd-toggle-wrap {
+    position: relative;
+    display: flex;
+    background: #f1f5f9;
+    padding: 4px;
+    border-radius: 0.75rem;
+  }
+
+  :global(.theme-dark) .vd-toggle-wrap {
+    background: rgba(15, 23, 42, 0.8);
+  }
+
+  .vd-volt-bg {
+    position: absolute;
+    top: 4px;
+    left: 1%;
+    width: 32.9%;
+    height: calc(100% - 8px);
+    background: #fff;
+    border-radius: 0.5rem;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    transition: left 0.3s ease;
+    pointer-events: none;
+  }
+
+  :global(.theme-dark) .vd-volt-bg {
+    background: #334155;
+  }
+
+  .vd-volt-btn {
+    flex: 1;
+    position: relative;
+    z-index: 1;
+    padding: 0.375rem 0;
+    font-size: 0.8125rem;
+    font-weight: 700;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    cursor: pointer;
+    border-radius: 0.5rem;
+    transition: color 0.15s;
+  }
+
+  .vd-volt-btn.vd-active {
+    color: #1e293b;
+  }
+
+  :global(.theme-dark) .vd-volt-btn {
+    color: #94a3b8;
+  }
+
+  :global(.theme-dark) .vd-volt-btn.vd-active {
+    color: #fff;
+  }
+
+  .vd-material-wrap {
+    display: flex;
+    gap: 1rem;
+  }
+
+  .vd-material-item {
+    flex: 1;
+    cursor: pointer;
+  }
+
+  .vd-material-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .vd-material-box {
+    height: 2.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    border-radius: 0.75rem;
+    border: 1px solid #e2e8f0;
+    background: #f8fafc;
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #64748b;
+    transition: all 0.15s ease;
+  }
+
+  :global(.theme-dark) .vd-material-box {
+    background: #0f172a;
+    border-color: #334155;
+    color: #94a3b8;
+  }
+
+  .vd-material-copper .vd-material-input:checked + .vd-material-box {
+    border-color: #d97706;
+    background: #fffbeb;
+    color: #92400e;
+  }
+
+  .vd-material-alum .vd-material-input:checked + .vd-material-box {
+    border-color: #64748b;
+    background: #f1f5f9;
+    color: #1e293b;
+  }
+
+  :global(.theme-dark) .vd-material-copper .vd-material-input:checked + .vd-material-box {
+    background: rgba(180, 83, 9, 0.2);
+    border-color: #d97706;
+    color: #fbbf24;
+  }
+
+  :global(.theme-dark) .vd-material-alum .vd-material-input:checked + .vd-material-box {
+    background: rgba(51, 65, 85, 0.8);
+    border-color: #64748b;
+    color: #fff;
+  }
+
+  .vd-wire-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+  }
+
+  .vd-wire-dot-copper {
+    background: linear-gradient(to bottom right, #fbbf24, #d97706);
+  }
+
+  .vd-wire-dot-alum {
+    background: linear-gradient(to bottom right, #cbd5e1, #64748b);
+  }
+
+  .vd-load-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 1rem;
+  }
+
+  .vd-load-top .vd-field-label {
+    margin-bottom: 0;
+  }
+
+  .vd-mode-wrap {
+    display: flex;
+    background: #f1f5f9;
+    padding: 4px;
+    border-radius: 0.5rem;
+  }
+
+  :global(.theme-dark) .vd-mode-wrap {
+    background: #0f172a;
+  }
+
+  .vd-mode-btn {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    border: none;
+    background: transparent;
+    color: #6b7280;
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: all 0.15s;
+  }
+
+  .vd-mode-btn.vd-active {
+    background: #fff;
+    color: #1e293b;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.theme-dark) .vd-mode-btn.vd-active {
+    background: #334155;
+    color: #fff;
+  }
+
+  .vd-load-input-row {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .vd-load-input {
+    width: 5rem;
+    background: transparent;
+    font-size: 1.5rem;
+    font-weight: 900;
+    text-align: right;
+    border: none;
+    border-bottom: 2px solid #e2e8f0;
+    color: #1e293b;
+    outline: none;
+    padding: 0;
+    transition: border-color 0.15s;
+  }
+
+  .vd-load-input:focus {
+    border-color: #6366f1;
+  }
+
+  :global(.theme-dark) .vd-load-input {
+    color: #fff;
+    border-color: #334155;
+  }
+
+  :global(.theme-dark) .vd-load-input:focus {
+    border-color: #6366f1;
+  }
+
+  .vd-load-unit {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #94a3b8;
+    margin-top: 0.5rem;
+  }
+
+  .vd-len-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .vd-len-top .vd-field-label {
+    margin-bottom: 0;
+  }
+
+  .vd-len-info {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #6366f1;
+  }
+
+  :global(.theme-dark) .vd-len-info {
+    color: #a5b4fc;
+  }
+
+  .vd-slider-wrap {
+    position: relative;
+    height: 24px;
+    display: flex;
+    align-items: center;
+  }
+
+  .vd-slider-input {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .vd-slider-track {
+    width: 100%;
+    height: 8px;
+    background: #f1f5f9;
+    border-radius: 4px;
+    overflow: hidden;
+  }
+
+  :global(.theme-dark) .vd-slider-track {
+    background: #334155;
+  }
+
+  .vd-slider-fill {
+    height: 100%;
+    background: #6366f1;
+    transition: width 0.075s;
+  }
+
+  .vd-slider-thumb {
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background: #fff;
+    border: 2px solid #6366f1;
+    border-radius: 50%;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+    z-index: 1;
+    pointer-events: none;
+    transition: left 0.075s;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.theme-dark) .vd-slider-thumb {
+    background: #1e293b;
+  }
+
+  .vd-slider-knob {
+    width: 6px;
+    height: 6px;
+    background: #6366f1;
+    border-radius: 50%;
+  }
+
+  .vd-section-top {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .vd-section-top .vd-field-label {
+    margin-bottom: 0;
+  }
+
+  .vd-section-badge {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #64748b;
+    background: #f1f5f9;
+    padding: 0.25rem 0.5rem;
+    border-radius: 0.375rem;
+  }
+
+  :global(.theme-dark) .vd-section-badge {
+    background: #0f172a;
+    color: #94a3b8;
+  }
+
+  .vd-gauge-outer {
+    position: relative;
+  }
+
+  .vd-gauge-fade-l,
+  .vd-gauge-fade-r {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 3rem;
+    z-index: 2;
+    pointer-events: none;
+  }
+
+  .vd-gauge-fade-l {
+    left: 0;
+    background: linear-gradient(to right, #fff, transparent);
+  }
+
+  .vd-gauge-fade-r {
+    right: 0;
+    background: linear-gradient(to left, #fff, transparent);
+  }
+
+  :global(.theme-dark) .vd-gauge-fade-l {
+    background: linear-gradient(to right, #1e293b, transparent);
+  }
+
+  :global(.theme-dark) .vd-gauge-fade-r {
+    background: linear-gradient(to left, #1e293b, transparent);
+  }
+
+  .vd-gauge-scroll {
+    display: flex;
+    gap: 1rem;
+    overflow-x: auto;
+    padding: 1rem 3rem;
+    scrollbar-width: none;
+    cursor: grab;
+  }
+
+  .vd-gauge-scroll:active {
+    cursor: grabbing;
+  }
+
+  .vd-gauge-scroll::-webkit-scrollbar {
+    display: none;
+  }
+
+  .vd-gauge-item {
+    flex-shrink: 0;
+    cursor: pointer;
+  }
+
+  .vd-gauge-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .vd-gauge-box {
+    width: 4rem;
+    height: 6rem;
+    border-radius: 999px;
+    background: #f8fafc;
+    border: 2px solid #e2e8f0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    padding-bottom: 0.75rem;
+    transition: all 0.2s ease;
+    cursor: pointer;
+  }
+
+  :global(.theme-dark) .vd-gauge-box {
+    background: #0f172a;
+    border-color: #334155;
+  }
+
+  .vd-gauge-input:checked + .vd-gauge-box {
+    border-color: #6366f1;
+    background: #fff;
+    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
+    transform: translateY(-8px);
+  }
+
+  :global(.theme-dark) .vd-gauge-input:checked + .vd-gauge-box {
+    background: #1e293b;
+    border-color: #6366f1;
+  }
+
+  .vd-wire-circle {
+    margin-top: auto;
+    margin-bottom: 0.5rem;
+    border-radius: 50%;
+    background: linear-gradient(to bottom right, #fbbf24, #d97706);
+    transition: background 0.3s ease;
+  }
+
+  .vd-root[data-vd-material="aluminum"] .vd-wire-circle {
+    background: linear-gradient(to bottom right, #cbd5e1, #64748b);
+  }
+
+  .vd-gauge-val {
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: #64748b;
+  }
+
+  .vd-gauge-input:checked + .vd-gauge-box .vd-gauge-val {
+    color: #6366f1;
+  }
+
+  :global(.theme-dark) .vd-gauge-val {
+    color: #94a3b8;
+  }
+
+  :global(.theme-dark) .vd-gauge-input:checked + .vd-gauge-box .vd-gauge-val {
+    color: #a5b4fc;
+  }
+
+  .vd-gauge-unit {
+    font-size: 0.625rem;
+    color: #94a3b8;
+  }
+
+  @media (max-width: 640px) {
+    .vd-hero {
+      padding: 1.5rem;
+    }
+
+    .vd-hero-body {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .vd-eff-card {
+      width: 100%;
+      min-width: unset;
+    }
+
+    .vd-body {
+      padding: 1rem;
+    }
+
+    .vd-row-2 {
+      grid-template-columns: 1fr;
+    }
+
+    .vd-drop-val {
+      font-size: 2.5rem;
+    }
+  }
+</style>