@jjlmoya/utils-textiles 1.1.0

package/src/tool/knittingGauge/component.astro

@@ -0,0 +1,828 @@
+---
+import type { KnittingGaugeUI } from './ui';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui = {} } = Astro.props;
+const gaugeUI = ui as unknown as KnittingGaugeUI;
+---
+
+<div class="knitting-gauge-card" id="knitting-gauge-app">
+  <aside class="gauge-sidebar">
+    <div class="config-section">
+      <h3>{gaugeUI.sectionOriginalGauge}</h3>
+      <div class="input-grid">
+        <div class="gauge-field">
+          <label>{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
+          <div class="stepper-container">
+            <button class="stepper-btn" data-step="-0.5" data-for="pattern-sts">−</button>
+            <input type="number" id="pattern-sts" class="gauge-input" value="20" step="0.5" />
+            <button class="stepper-btn" data-step="0.5" data-for="pattern-sts">+</button>
+          </div>
+        </div>
+        <div class="gauge-field">
+          <label>{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
+          <div class="stepper-container">
+            <button class="stepper-btn" data-step="-0.5" data-for="pattern-rows">−</button>
+            <input type="number" id="pattern-rows" class="gauge-input" value="28" step="0.5" />
+            <button class="stepper-btn" data-step="0.5" data-for="pattern-rows">+</button>
+          </div>
+        </div>
+      </div>
+      <div class="gauge-field">
+        <label>{gaugeUI.labelUnit}</label>
+        <select id="gauge-unit" class="gauge-select">
+          <option value="10">{gaugeUI.unitEU}</option>
+          <option value="10.16">{gaugeUI.unitUS}</option>
+        </select>
+      </div>
+    </div>
+
+    <div class="config-section">
+      <h3>{gaugeUI.sectionMyGauge}</h3>
+      <div class="input-grid">
+        <div class="gauge-field">
+          <label>{gaugeUI.labelStitches} <span class="label-sub">({gaugeUI.labelWidth})</span></label>
+          <div class="stepper-container">
+            <button class="stepper-btn" data-step="-0.5" data-for="my-sts">−</button>
+            <input type="number" id="my-sts" class="gauge-input" value="22" step="0.5" />
+            <button class="stepper-btn" data-step="0.5" data-for="my-sts">+</button>
+          </div>
+        </div>
+        <div class="gauge-field">
+          <label>{gaugeUI.labelRows} <span class="label-sub">({gaugeUI.labelLength})</span></label>
+          <div class="stepper-container">
+            <button class="stepper-btn" data-step="-0.5" data-for="my-rows">−</button>
+            <input type="number" id="my-rows" class="gauge-input" value="30" step="0.5" />
+            <button class="stepper-btn" data-step="0.5" data-for="my-rows">+</button>
+          </div>
+        </div>
+      </div>
+      <div class="input-grid">
+        <div class="gauge-field">
+          <label>{gaugeUI.labelNeedleMm}</label>
+          <input type="number" id="my-needle" class="gauge-input gauge-input-bordered" value="4.0" step="0.25" />
+        </div>
+        <div class="gauge-field">
+          <label>{gaugeUI.labelWeight} <span class="label-sub">{gaugeUI.labelWeightOptional}</span></label>
+          <input type="number" id="sample-weight" class="gauge-input gauge-input-bordered" placeholder="5" />
+        </div>
+      </div>
+    </div>
+
+    <div class="config-section">
+      <h3>{gaugeUI.sectionProject}</h3>
+      <div class="input-grid">
+        <div class="gauge-field">
+          <label>{gaugeUI.labelPatternSts}</label>
+          <input type="number" id="target-sts" class="gauge-input gauge-input-bordered" value="100" />
+        </div>
+        <div class="gauge-field">
+          <label>{gaugeUI.labelPatternRows}</label>
+          <input type="number" id="target-rows" class="gauge-input gauge-input-bordered" value="140" />
+        </div>
+      </div>
+      <div class="gauge-field">
+        <label>{gaugeUI.labelMultiples} <span class="label-sub">{gaugeUI.labelMultiplesExample}</span></label>
+        <input
+          type="text"
+          id="pattern-multiples"
+          class="gauge-input gauge-input-bordered"
+          placeholder={gaugeUI.labelMultiplesPlaceholder}
+        />
+      </div>
+    </div>
+
+    <div class="btn-group">
+      <button id="btn-clear" class="ui-btn ui-btn-secondary">{gaugeUI.btnClear}</button>
+      <button id="btn-share" class="ui-btn ui-btn-primary">{gaugeUI.btnShare}</button>
+    </div>
+  </aside>
+
+  <main class="gauge-main">
+    <div class="top-display">
+      <div class="visualizer-container">
+        <div id="gauge-visual-swatch" class="knit-swatch"></div>
+      </div>
+      <div class="main-stat">
+        <h2>{gaugeUI.resSuggestedSts}</h2>
+        <div class="val" id="res-total-sts">110</div>
+        <div class="val-detail" id="res-multiples-note"></div>
+        <div id="res-danger-info" class="alert-card alert-card-err"></div>
+      </div>
+    </div>
+
+    <div class="metrics-grid">
+      <div class="metric-item">
+        <span class="sl">
+          {gaugeUI.resNewRows}
+          <i class="info-icon" data-tooltip={gaugeUI.resNewRowsTooltip}>i</i>
+        </span>
+        <div class="sv" id="res-total-rows">150</div>
+      </div>
+      <div class="metric-item">
+        <span class="sl">
+          {gaugeUI.resScaleFactor}
+          <i class="info-icon" data-tooltip={gaugeUI.resScaleFactorTooltip}>i</i>
+        </span>
+        <div class="sv" id="res-scale-factor">+10%</div>
+      </div>
+      <div class="metric-item">
+        <span class="sl">
+          {gaugeUI.resSuggestion}
+          <i class="info-icon" data-tooltip={gaugeUI.resSuggestionTooltip}>i</i>
+        </span>
+        <div class="sv sv-suggestion" id="res-size-suggestion"></div>
+      </div>
+    </div>
+
+    <div id="yarn-estimate-box" class="yarn-calc-extra">
+      <p class="yarn-title" id="yarn-title">{gaugeUI.yarnTitle}</p>
+      <p id="yarn-result"></p>
+    </div>
+
+    <div id="res-multiples-info" class="alert-card alert-card-warn"></div>
+  </main>
+</div>
+
+<script define:vars={{ ui }} is:inline>
+  window.__knittingGaugeUI = ui;
+</script>
+
+<script>
+  import type { KnittingGaugeUI } from './ui';
+
+  declare global {
+    interface Window {
+      __knittingGaugeUI: KnittingGaugeUI;
+    }
+  }
+
+  const INPUT_IDS = [
+    'pattern-sts', 'pattern-rows', 'my-sts', 'my-rows',
+    'target-sts', 'target-rows', 'pattern-multiples',
+    'gauge-unit', 'my-needle', 'sample-weight',
+  ] as const;
+
+  let previousUnit = '10';
+
+  function getNum(id: string): number {
+    const el = document.getElementById(id) as HTMLInputElement | null;
+    return parseFloat(el?.value || '0') || 0;
+  }
+
+  function getStr(id: string): string {
+    const el = document.getElementById(id) as HTMLInputElement | null;
+    return el?.value || '';
+  }
+
+  function setText(id: string, text: string): void {
+    const el = document.getElementById(id);
+    if (el) el.textContent = text;
+  }
+
+  function setHTML(id: string, html: string): void {
+    const el = document.getElementById(id);
+    if (el) el.innerHTML = html;
+  }
+
+  function showEl(id: string, visible: boolean): void {
+    const el = document.getElementById(id);
+    if (el) el.style.display = visible ? 'block' : 'none';
+  }
+
+  function parseMultiplesStr(str: string): { base: number; offset: number } {
+    if (!str) return { base: 0, offset: 0 };
+    const match = str.replace(/\s+/g, '').match(/(\d+)(?:\+(\d+))?/);
+    if (!match) return { base: 0, offset: 0 };
+    return { base: parseInt(match[1] ?? '0') || 0, offset: parseInt(match[2] ?? '0') || 0 };
+  }
+
+  function adjustForMultiples(raw: number, base: number, offset: number): number {
+    const low = Math.floor((raw - offset) / base) * base + offset;
+    const high = Math.ceil((raw - offset) / base) * base + offset;
+    return Math.abs(raw - low) <= Math.abs(raw - high) ? low : high;
+  }
+
+  function buildSuggestionHTML(scaleDiff: number, needle: number): string {
+    const u = window.__knittingGaugeUI;
+    if (Math.abs(scaleDiff) < 2) {
+      return `<span style="color:#10b981">${u.suggestionIdeal}</span>`;
+    }
+    const step = Math.ceil(Math.abs(scaleDiff) / 5) * 0.25;
+    if (scaleDiff > 0) {
+      const adj = Math.max(2, needle - step);
+      const detail = u.suggestionDownDetail.replace('{n}', String(adj));
+      return `${u.suggestionDown}<br><small style="opacity:0.7;font-weight:400">${detail}</small>`;
+    }
+    const adj = needle + step;
+    const detail = u.suggestionUpDetail.replace('{n}', String(adj));
+    return `${u.suggestionUp}<br><small style="opacity:0.7;font-weight:400">${detail}</small>`;
+  }
+
+  function computeStitches(patternSts: number, mySts: number, targetSts: number): number {
+    const raw = Math.round(targetSts * mySts / patternSts);
+    const { base, offset } = parseMultiplesStr(getStr('pattern-multiples'));
+    if (base <= 0) {
+      showEl('res-multiples-note', false);
+      return raw;
+    }
+    const adj = adjustForMultiples(raw, base, offset);
+    const label = offset > 0 ? `${base}+${offset}` : String(base);
+    const note = window.__knittingGaugeUI.multiplesNoteFormat
+      .replace('{n}', String(raw))
+      .replace('{m}', label);
+    setText('res-multiples-note', note);
+    showEl('res-multiples-note', true);
+    return adj;
+  }
+
+  function updateSwatch(patternSts: number, mySts: number): void {
+    const swatch = document.getElementById('gauge-visual-swatch');
+    if (!swatch) return;
+    const scale = Math.min(Math.max(patternSts / mySts, 0.5), 1.3);
+    const density = 12 * mySts / patternSts;
+    swatch.style.transform = `scale(${scale})`;
+    swatch.style.backgroundSize = `${density}px ${density}px`;
+  }
+
+  function updateYarnEstimate(weight: number, totalScale: number): void {
+    if (weight <= 0) {
+      showEl('yarn-estimate-box', false);
+      return;
+    }
+    const grams = Math.ceil(weight * totalScale);
+    const safety = Math.ceil(grams * 0.1);
+    const u = window.__knittingGaugeUI;
+    const result = u.yarnResultFormat.replace('{g}', String(grams));
+    const safetyStr = u.yarnSafetyFormat.replace('{s}', String(safety));
+    setHTML('yarn-result', `${result} <small>${safetyStr}</small>`);
+    showEl('yarn-estimate-box', true);
+  }
+
+  function updateUrl(): void {
+    const params = new URLSearchParams();
+    INPUT_IDS.forEach((id) => {
+      const el = document.getElementById(id) as HTMLInputElement | null;
+      if (el?.value) params.set(id, el.value);
+    });
+    window.history.replaceState({}, '', `${window.location.pathname}?${params.toString()}`);
+  }
+
+  function calculate(): void {
+    const patternSts = getNum('pattern-sts');
+    const patternRows = getNum('pattern-rows');
+    const mySts = getNum('my-sts');
+    const myRows = getNum('my-rows');
+    const targetSts = getNum('target-sts');
+    const targetRows = getNum('target-rows');
+    const weight = getNum('sample-weight');
+    const needle = getNum('my-needle');
+    if (!patternSts || !mySts) return;
+    const finalSts = computeStitches(patternSts, mySts, targetSts);
+    setText('res-total-sts', String(finalSts));
+    setText('res-total-rows', String(Math.round(targetRows * myRows / patternRows)));
+    const scaleDiff = (patternSts / mySts - 1) * 100;
+    const sign = scaleDiff >= 0 ? '+' : '';
+    setText('res-scale-factor', `${sign}${scaleDiff.toFixed(1)}%`);
+    setHTML('res-size-suggestion', buildSuggestionHTML(scaleDiff, needle));
+    showEl('res-danger-info', Math.abs(scaleDiff) > 25);
+    if (Math.abs(scaleDiff) > 25) setText('res-danger-info', window.__knittingGaugeUI.alertDanger);
+    updateSwatch(patternSts, mySts);
+    updateYarnEstimate(weight, (targetSts / patternSts) * (targetRows / patternRows));
+    updateUrl();
+  }
+
+  function handleUnitConversion(): void {
+    const currentUnit = getStr('gauge-unit');
+    if (currentUnit === previousUnit) return;
+    const ratio = parseFloat(currentUnit) / parseFloat(previousUnit);
+    ['pattern-sts', 'pattern-rows', 'my-sts', 'my-rows'].forEach((id) => {
+      const el = document.getElementById(id) as HTMLInputElement | null;
+      if (el?.value) el.value = (parseFloat(el.value) * ratio).toFixed(1);
+    });
+    previousUnit = currentUnit;
+    calculate();
+  }
+
+  function handleClear(): void {
+    INPUT_IDS.forEach((id) => {
+      if (id === 'gauge-unit') return;
+      const el = document.getElementById(id) as HTMLInputElement | null;
+      if (!el) return;
+      el.value = (el.id.includes('sts') || el.id.includes('rows')) ? '20' : '';
+    });
+    calculate();
+  }
+
+  function handleShare(): void {
+    navigator.clipboard.writeText(window.location.href);
+    const btn = document.getElementById('btn-share');
+    if (!btn) return;
+    const orig = btn.textContent;
+    btn.textContent = window.__knittingGaugeUI.btnCopied;
+    setTimeout(() => { if (btn) btn.textContent = orig; }, 2000);
+  }
+
+  function restoreFromUrl(): void {
+    const params = new URLSearchParams(window.location.search);
+    params.forEach((val, key) => {
+      const el = document.getElementById(key) as HTMLInputElement | null;
+      if (el) el.value = val;
+    });
+    previousUnit = getStr('gauge-unit') || '10';
+  }
+
+  function attachStepperListeners(): void {
+    document.querySelectorAll('.stepper-btn').forEach((btn) => {
+      btn.addEventListener('click', (ev) => {
+        const target = ev.currentTarget as HTMLButtonElement;
+        const forId = target.getAttribute('data-for') || '';
+        const step = parseFloat(target.getAttribute('data-step') || '1');
+        const input = document.getElementById(forId) as HTMLInputElement | null;
+        if (input) {
+          input.value = String(parseFloat(input.value || '0') + step);
+          calculate();
+        }
+      });
+    });
+  }
+
+  function init(): void {
+    restoreFromUrl();
+    attachStepperListeners();
+    const unitSel = document.getElementById('gauge-unit');
+    if (unitSel) unitSel.addEventListener('change', handleUnitConversion);
+    INPUT_IDS.forEach((id) => {
+      const el = document.getElementById(id);
+      if (el) el.addEventListener('input', calculate);
+    });
+    document.getElementById('btn-clear')?.addEventListener('click', handleClear);
+    document.getElementById('btn-share')?.addEventListener('click', handleShare);
+    calculate();
+  }
+
+  document.addEventListener('astro:page-load', init);
+  init();
+</script>
+
+<style>
+  .knitting-gauge-card {
+    --gauge-primary: #b06161;
+    --gauge-secondary: #ead7bb;
+    --gauge-accent: #d37676;
+    --gauge-bg: rgba(255, 255, 255, 0.75);
+    --gauge-sidebar-bg: rgba(255, 255, 255, 0.45);
+    --gauge-item-bg: rgba(255, 255, 255, 0.45);
+    --gauge-border: rgba(0, 0, 0, 0.05);
+    --gauge-input-bg: rgba(255, 255, 255, 0.6);
+    --gauge-radius: 24px;
+    --gauge-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
+
+    display: grid;
+    grid-template-columns: 320px 1fr;
+    max-width: 1150px;
+    width: 95%;
+    margin: 2rem auto;
+    background: var(--gauge-bg);
+    backdrop-filter: blur(15px);
+    border-radius: var(--gauge-radius);
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    box-shadow: var(--gauge-shadow);
+    color: #444;
+  }
+
+  :global(.theme-dark) .knitting-gauge-card {
+    --gauge-primary: #ff7e7e;
+    --gauge-secondary: #2d2d30;
+    --gauge-accent: #ffa4a4;
+    --gauge-bg: rgba(13, 13, 15, 0.95);
+    --gauge-sidebar-bg: rgba(0, 0, 0, 0.3);
+    --gauge-item-bg: rgba(255, 255, 255, 0.03);
+    --gauge-border: rgba(255, 255, 255, 0.1);
+    --gauge-input-bg: rgba(255, 255, 255, 0.05);
+    --gauge-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
+
+    color: #f3f4f6;
+    border-color: var(--gauge-border);
+  }
+
+  .gauge-sidebar {
+    background: var(--gauge-sidebar-bg);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    border-right: 1px solid var(--gauge-border);
+    max-height: 85vh;
+    overflow-y: auto;
+  }
+
+  .config-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .config-section h3 {
+    font-size: 0.7rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 0.1rem;
+    color: var(--gauge-primary);
+    margin: 0;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .input-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.75rem;
+  }
+
+  .gauge-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    position: relative;
+  }
+
+  .gauge-field label {
+    font-size: 0.6rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    opacity: 0.6;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .label-sub {
+    font-weight: 400;
+    opacity: 0.8;
+    text-transform: none;
+  }
+
+  .stepper-container {
+    display: flex;
+    align-items: center;
+    background: var(--gauge-input-bg);
+    border: 1px solid var(--gauge-border);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  .stepper-container:focus-within {
+    border-color: var(--gauge-primary);
+    box-shadow: 0 0 0 2px rgba(176, 97, 97, 0.2);
+  }
+
+  .stepper-btn {
+    width: 32px;
+    height: 32px;
+    border: none;
+    background: rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.2s;
+    color: inherit;
+  }
+
+  :global(.theme-dark) .stepper-btn {
+    background: rgba(255, 255, 255, 0.04);
+  }
+
+  .stepper-btn:hover {
+    background: var(--gauge-secondary);
+  }
+
+  .gauge-input {
+    flex: 1;
+    width: 100%;
+    border: none;
+    background: transparent;
+    padding: 0.4rem 0.5rem;
+    font-size: 0.9rem;
+    text-align: center;
+    font-weight: 600;
+    color: inherit;
+  }
+
+  .gauge-input:focus {
+    outline: none;
+  }
+
+  .gauge-input-bordered {
+    border: 1px solid var(--gauge-border);
+    border-radius: 8px;
+    background: var(--gauge-input-bg);
+  }
+
+  .gauge-select {
+    width: 100%;
+    padding: 0.5rem;
+    border-radius: 8px;
+    border: 1px solid var(--gauge-border);
+    background: var(--gauge-input-bg);
+    font-size: 0.8rem;
+    color: inherit;
+  }
+
+  .gauge-main {
+    padding: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    justify-content: center;
+  }
+
+  .top-display {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: 3rem;
+    align-items: center;
+  }
+
+  .visualizer-container {
+    position: relative;
+    width: 180px;
+    height: 180px;
+    background: var(--gauge-sidebar-bg);
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px dashed var(--gauge-border);
+    overflow: hidden;
+  }
+
+  .knit-swatch {
+    width: 130px;
+    height: 130px;
+    background-color: var(--gauge-primary);
+    background-image: radial-gradient(circle at 50% 50%, var(--gauge-accent) 1px, transparent 1px);
+    background-size: 12px 12px;
+    border-radius: 12px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    position: relative;
+  }
+
+  .main-stat h2 {
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    opacity: 0.6;
+    margin: 0 0 0.5rem;
+  }
+
+  .main-stat .val {
+    font-size: 4rem;
+    font-weight: 950;
+    color: var(--gauge-primary);
+    line-height: 1;
+  }
+
+  .val-detail {
+    font-size: 0.8rem;
+    font-weight: 600;
+    opacity: 0.8;
+  }
+
+  .metrics-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+  }
+
+  .metric-item {
+    padding: 1.2rem;
+    background: var(--gauge-item-bg);
+    border: 1px solid var(--gauge-border);
+    border-radius: 18px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    position: relative;
+  }
+
+  .metric-item .sv {
+    font-size: 1.5rem;
+    font-weight: 800;
+    color: var(--gauge-accent);
+  }
+
+  .sv-suggestion {
+    font-size: 1rem;
+    line-height: 1.2;
+  }
+
+  .metric-item .sl {
+    font-size: 0.65rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    opacity: 0.5;
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+  }
+
+  .info-icon {
+    font-size: 0.75rem;
+    font-style: normal;
+    cursor: help;
+    opacity: 0.5;
+    background: rgba(0, 0, 0, 0.08);
+    border-radius: 50%;
+    width: 14px;
+    height: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.theme-dark) .info-icon {
+    background: rgba(255, 255, 255, 0.12);
+  }
+
+  .info-icon:hover {
+    opacity: 1;
+  }
+
+  [data-tooltip] {
+    position: relative;
+  }
+
+  [data-tooltip]::before {
+    content: attr(data-tooltip);
+    position: absolute;
+    bottom: 125%;
+    left: 50%;
+    transform: translateX(-50%);
+    background: #333;
+    color: white;
+    padding: 0.5rem 0.8rem;
+    border-radius: 6px;
+    font-size: 0.7rem;
+    white-space: normal;
+    width: 200px;
+    text-align: center;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
+    z-index: 100;
+    pointer-events: none;
+  }
+
+  :global(.theme-dark) [data-tooltip]::before {
+    background: #1f2937;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  [data-tooltip]:hover::before {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  .yarn-calc-extra {
+    padding: 1rem;
+    background: rgba(176, 97, 97, 0.05);
+    border-radius: 12px;
+    font-size: 0.8rem;
+    border: 1px solid rgba(176, 97, 97, 0.1);
+    display: none;
+  }
+
+  :global(.theme-dark) .yarn-calc-extra {
+    background: rgba(255, 126, 126, 0.08);
+    border-color: rgba(255, 126, 126, 0.15);
+  }
+
+  .yarn-title {
+    margin: 0;
+    font-weight: 700;
+    color: var(--gauge-primary);
+  }
+
+  .alert-card {
+    padding: 1rem;
+    border-radius: 12px;
+    font-size: 0.82rem;
+    margin-top: 0.5rem;
+    display: none;
+    animation: fade-in 0.4s ease;
+  }
+
+  .alert-card-warn {
+    background: #fffbeb;
+    color: #92400e;
+    border: 1px solid #fde68a;
+  }
+
+  :global(.theme-dark) .alert-card-warn {
+    background: rgba(245, 158, 11, 0.15);
+    color: #fbbf24;
+    border-color: rgba(245, 158, 11, 0.3);
+  }
+
+  .alert-card-err {
+    background: #fef2f2;
+    color: #991b1b;
+    border: 1px solid #fecaca;
+  }
+
+  :global(.theme-dark) .alert-card-err {
+    background: rgba(239, 68, 68, 0.15);
+    color: #f87171;
+    border-color: rgba(239, 68, 68, 0.3);
+  }
+
+  .btn-group {
+    display: grid;
+    grid-template-columns: 1fr 1.5fr;
+    gap: 0.75rem;
+    margin-top: auto;
+    padding-top: 1rem;
+  }
+
+  .ui-btn {
+    padding: 0.8rem;
+    border-radius: 12px;
+    border: none;
+    font-size: 0.75rem;
+    font-weight: 800;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: all 0.2s;
+  }
+
+  .ui-btn-primary {
+    background: var(--gauge-primary);
+    color: white;
+  }
+
+  .ui-btn-primary:hover {
+    filter: brightness(1.1);
+    transform: translateY(-1px);
+  }
+
+  .ui-btn-secondary {
+    background: rgba(0, 0, 0, 0.05);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    color: inherit;
+  }
+
+  :global(.theme-dark) .ui-btn-secondary {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  .ui-btn-secondary:hover {
+    background: rgba(0, 0, 0, 0.08);
+  }
+
+  :global(.theme-dark) .ui-btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.12);
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+      transform: translateY(10px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @media (max-width: 900px) {
+    .knitting-gauge-card {
+      grid-template-columns: 1fr;
+      max-height: none;
+    }
+
+    .gauge-sidebar {
+      border-right: none;
+      border-bottom: 1px solid var(--gauge-border);
+      max-height: none;
+    }
+
+    .top-display {
+      grid-template-columns: 1fr;
+      text-align: center;
+      justify-items: center;
+    }
+
+    .metrics-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>