@jjlmoya/utils-tools 1.1.0

package/src/tool/env-badge-spain/component.astro

@@ -0,0 +1,303 @@
+---
+import type { EnvBadgeSpainUI } from './ui';
+import BadgeForm from './components/BadgeForm.astro';
+import BadgeResult from './components/BadgeResult.astro';
+
+interface Props {
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as EnvBadgeSpainUI;
+---
+
+<div class="deb-root" data-ui={JSON.stringify(t)}>
+  <div class="deb-main-container">
+    <BadgeForm t={t} />
+    <BadgeResult t={t} />
+  </div>
+</div>
+
+<style>
+  .deb-root {
+    --deb-bg: #f8fafc;
+    --deb-card-bg: #fff;
+    --deb-card-border: #e2e8f0;
+    --deb-text-main: #1e293b;
+    --deb-text-muted: #64748b;
+    --deb-text-sub: #475569;
+    --deb-label-border: #e2e8f0;
+    --deb-option-bg: #f1f5f9;
+    --deb-option-border: #e2e8f0;
+    --deb-option-hover: #e2e8f0;
+    --deb-result-bg: #fff;
+    
+    width: 100%;
+    max-width: 720px;
+    margin: 0 auto;
+  }
+
+  :global(.theme-dark) .deb-root {
+    --deb-bg: #0f172a;
+    --deb-card-bg: #1e293b;
+    --deb-card-border: rgba(255, 255, 255, 0.08);
+    --deb-text-main: #f8fafc;
+    --deb-text-muted: #94a3b8;
+    --deb-text-sub: #cbd5e1;
+    --deb-label-border: rgba(255, 255, 255, 0.1);
+    --deb-option-bg: rgba(15, 23, 42, 0.5);
+    --deb-option-border: rgba(255, 255, 255, 0.1);
+    --deb-option-hover: rgba(255, 255, 255, 0.05);
+    --deb-result-bg: rgba(15, 23, 42, 0.3);
+  }
+
+  .deb-main-container {
+    background: var(--deb-card-bg);
+    border: 1px solid var(--deb-card-border);
+    border-radius: 2rem;
+    padding: 2.5rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
+  }
+
+  @media (max-width: 640px) {
+    .deb-main-container {
+      padding: 1.5rem;
+      border-radius: 1.5rem;
+    }
+  }
+
+  :global(.deb-badge-display h3) {
+    font-size: 1.5rem;
+    margin: 0;
+    color: var(--deb-text-main);
+    font-weight: 800;
+  }
+
+  :global(.deb-replica) {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    border: 6px solid #111;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    background: #fff;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  }
+
+  :global(.deb-replica)::after {
+    content: "DGT";
+    position: absolute;
+    top: 25px;
+    right: 35px;
+    font-size: 1.125rem;
+    font-weight: 900;
+    color: #000;
+    opacity: 0.6;
+    letter-spacing: -1px;
+    z-index: 10;
+  }
+
+  :global(.deb-big-letter) {
+    font-size: 7rem;
+    font-weight: 900;
+    line-height: 1;
+    z-index: 2;
+    margin-top: 15px;
+  }
+
+  :global(.deb-sub-text) {
+    font-size: 1rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    z-index: 2;
+    margin-top: -5px;
+  }
+
+  :global(.deb-replica-0) {
+    background: #005aa3;
+    color: #fff;
+  }
+
+  :global(.deb-replica-0)::after {
+    color: #fff;
+    opacity: 0.9;
+  }
+
+  :global(.deb-replica-eco) {
+    background: linear-gradient(90deg, #00a455 50%, #005aa3 50%);
+    color: #fff;
+  }
+
+  :global(.deb-replica-eco)::after {
+    color: #fff;
+    opacity: 0.9;
+  }
+
+  :global(.deb-replica-eco) :global(.deb-big-letter) {
+    font-size: 5rem;
+    margin-top: 25px;
+  }
+
+  :global(.deb-replica-c) {
+    background: #00a455;
+    color: #000;
+  }
+
+  :global(.deb-replica-c) :global(.deb-sub-text) { display: none; }
+
+  :global(.deb-replica-b) {
+    background: #ffdf00;
+    color: #000;
+  }
+
+  :global(.deb-replica-b) :global(.deb-sub-text) { display: none; }
+
+  :global(.deb-replica-a) {
+    width: 200px;
+    height: 120px;
+    border-radius: 1rem;
+    border: 6px solid #dc2626;
+    background: #fff;
+    color: #dc2626;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  :global(.deb-replica-a) :global(.deb-big-letter) {
+    font-size: 4rem;
+    margin-top: 0;
+  }
+</style>
+
+<script>
+  import type { EnvBadgeSpainUI } from './ui';
+
+  const root = document.querySelector('.deb-root') as HTMLElement;
+  const t = JSON.parse(root?.dataset.ui ?? '{}') as EnvBadgeSpainUI;
+
+  const form = document.getElementById('deb-form') as HTMLFormElement;
+  const resultBox = document.getElementById('deb-result') as HTMLDivElement;
+  const badgeDisplay = document.getElementById('deb-badge-display') as HTMLDivElement;
+  const resultDesc = document.getElementById('deb-result-desc') as HTMLParagraphElement;
+  const resetBtn = document.getElementById('deb-reset') as HTMLButtonElement;
+
+  type BadgeKey = 'ZERO' | 'ECO' | 'C' | 'B' | 'A';
+
+  interface BadgeData {
+    label: string;
+    letter: string;
+    sub: string;
+    desc: string;
+    cssClass: string;
+  }
+
+  const BADGES: Record<BadgeKey, BadgeData> = {
+    ZERO: { label: t.badge0Label, letter: t.badge0Letter, sub: t.badge0Sub, desc: t.badge0Desc, cssClass: 'deb-replica-0' },
+    ECO: { label: t.badgeEcoLabel, letter: t.badgeEcoLetter, sub: '', desc: t.badgeEcoDesc, cssClass: 'deb-replica-eco' },
+    C: { label: t.badgeCLabel, letter: t.badgeCLetter, sub: '', desc: t.badgeCDesc, cssClass: 'deb-replica-c' },
+    B: { label: t.badgeBLabel, letter: t.badgeBLetter, sub: '', desc: t.badgeBDesc, cssClass: 'deb-replica-b' },
+    A: { label: t.badgeALabel, letter: t.badgeALetter, sub: t.badgeASub, desc: t.badgeADesc, cssClass: 'deb-replica-a' },
+  };
+
+  function calculateBadge(vType: string, fType: string, year: string): BadgeKey {
+    if (fType === 'electric' || fType === 'phev_high') return 'ZERO';
+    if (fType === 'phev_low' || fType === 'hybrid_gas') return 'ECO';
+
+    if (vType === 'moto') {
+      if (year === 'pre2000' || year === '2000-2005') return 'B';
+      return 'C';
+    }
+
+    if (fType === 'gasoline') {
+      if (year === 'pre2000') return 'A';
+      if (year === '2000-2005') return 'B';
+      return 'C';
+    }
+
+    if (fType === 'diesel') {
+      if (year === 'pre2000' || year === '2000-2005') return 'A';
+      if (year === '2006-2013') return 'B';
+      return 'C';
+    }
+
+    return 'A';
+  }
+
+  function getBadgeHTML(key: BadgeKey): string {
+    const d = BADGES[key];
+    if (key === 'A') {
+      return `<div class="deb-replica-a"><span class="deb-big-letter">${d.letter}</span><span class="deb-sub-text">${d.sub}</span></div><h3>${d.label}</h3>`;
+    }
+    return `<div class="deb-replica ${d.cssClass}"><span class="deb-big-letter">${d.letter}</span><span class="deb-sub-text">${d.sub}</span></div><h3>${d.label}</h3>`;
+  }
+
+  function showError(id: string, show: boolean): void {
+    const err = document.getElementById(`deb-err-${id}`);
+    if (err) err.style.opacity = show ? '1' : '0';
+    form.querySelectorAll<HTMLElement>(`.deb-option[data-group="${id}"]`).forEach((c) => {
+      if (show) c.style.borderColor = '#ef4444';
+      else c.style.borderColor = '';
+    });
+  }
+
+  form.querySelectorAll<HTMLButtonElement>('.deb-option').forEach((card) => {
+    card.addEventListener('click', () => {
+      const group = card.dataset.group;
+      const val = card.dataset.val;
+      if (!group || !val) return;
+
+      form.querySelectorAll<HTMLElement>(`.deb-option[data-group="${group}"]`).forEach((c) => {
+        c.classList.remove('deb-selected');
+      });
+      card.classList.add('deb-selected');
+
+      const hidden = document.getElementById(group) as HTMLInputElement | null;
+      if (hidden) {
+        hidden.value = val;
+        showError(group, false);
+      }
+    });
+  });
+
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+
+    const vehicleType = document.getElementById('vehicleType') as HTMLInputElement;
+    const fuelType = document.getElementById('fuelType') as HTMLInputElement;
+    const registrationYear = document.getElementById('registrationYear') as HTMLInputElement;
+
+    let valid = true;
+    if (!vehicleType.value) { showError('vehicleType', true); valid = false; }
+    if (!fuelType.value) { showError('fuelType', true); valid = false; }
+    if (!registrationYear.value) { showError('registrationYear', true); valid = false; }
+
+    if (!valid) return;
+
+    const key = calculateBadge(vehicleType.value, fuelType.value, registrationYear.value);
+    badgeDisplay.innerHTML = getBadgeHTML(key);
+    resultDesc.textContent = BADGES[key].desc;
+
+    form.style.display = 'none';
+    resultBox.style.display = 'flex';
+  });
+
+  resetBtn.addEventListener('click', () => {
+    form.querySelectorAll<HTMLElement>('.deb-option').forEach((c) => {
+      c.classList.remove('deb-selected');
+      c.style.borderColor = '';
+    });
+    form.querySelectorAll<HTMLInputElement>('input[type="hidden"]').forEach((inp) => {
+      inp.value = '';
+    });
+    ['vehicleType', 'fuelType', 'registrationYear'].forEach((id) => showError(id, false));
+
+    form.style.display = 'flex';
+    resultBox.style.display = 'none';
+  });
+</script>

package/src/tool/env-badge-spain/components/BadgeForm.astro

@@ -0,0 +1,243 @@
+---
+interface Props {
+  t: Record<string, string>;
+}
+
+const { t } = Astro.props;
+---
+
+<form class="deb-form" id="deb-form" novalidate>
+  <div class="deb-group">
+    <label class="deb-step-label">{t.step1Label}</label>
+    <div class="deb-grid deb-grid-3">
+      <button type="button" class="deb-option deb-vehicle" data-group="vehicleType" data-val="car">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 17H3a2 2 0 0 1-2-2V9l3.5-6h11L19 9h2v6a2 2 0 0 1-2 2h-2"/><circle cx="7.5" cy="17" r="2.5"/><circle cx="16.5" cy="17" r="2.5"/></svg>
+        <span>{t.vehicleCar}</span>
+      </button>
+      <button type="button" class="deb-option deb-vehicle" data-group="vehicleType" data-val="moto">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="5.5" cy="17.5" r="3"/><circle cx="18.5" cy="17.5" r="3"/><path d="M15 6h-3l-2 7h9"/><path d="M9 6l4 4"/></svg>
+        <span>{t.vehicleMoto}</span>
+      </button>
+      <button type="button" class="deb-option deb-vehicle" data-group="vehicleType" data-val="heavy">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13" rx="1"/><path d="M16 8h4l3 5v3h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg>
+        <span>{t.vehicleHeavy}</span>
+      </button>
+    </div>
+    <input type="hidden" id="vehicleType" />
+    <div class="deb-error" id="deb-err-vehicleType">{t.errVehicle}</div>
+  </div>
+
+  <div class="deb-group">
+    <label class="deb-step-label">{t.step2Label}</label>
+    <div class="deb-grid deb-grid-3">
+      <button type="button" class="deb-option deb-fuel" data-group="fuelType" data-val="electric">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
+        <span>{t.fuelElectric}</span>
+      </button>
+      <button type="button" class="deb-option deb-fuel" data-group="fuelType" data-val="phev_high">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22v-6"/><path d="M9 11V7a3 3 0 0 1 6 0v4"/><rect x="5" y="11" width="14" height="8" rx="2"/></svg>
+        <span>{t.fuelPhevHigh}</span>
+      </button>
+      <button type="button" class="deb-option deb-fuel" data-group="fuelType" data-val="phev_low">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22v-6"/><path d="M9 11V8a3 3 0 0 1 5.12-2.12"/><rect x="5" y="11" width="14" height="8" rx="2"/></svg>
+        <span>{t.fuelPhevLow}</span>
+      </button>
+      <button type="button" class="deb-option deb-fuel" data-group="fuelType" data-val="hybrid_gas">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 22c1.25-1.25 2.5-2.5 3.5-3.5C7.5 15 12 6 20 2c0 8-5 12-9 13.5-1.5.5-3 1-4 2L2 22z"/></svg>
+        <span>{t.fuelHybridGas}</span>
+      </button>
+      <button type="button" class="deb-option deb-fuel" data-group="fuelType" data-val="gasoline">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 22V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v17"/><path d="M3 10h12"/><path d="M15 7l4 3v9a1 1 0 0 1-1 1h-3"/></svg>
+        <span>{t.fuelGasoline}</span>
+      </button>
+      <button type="button" class="deb-option deb-fuel" data-group="fuelType" data-val="diesel">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z"/></svg>
+        <span>{t.fuelDiesel}</span>
+      </button>
+    </div>
+    <input type="hidden" id="fuelType" />
+    <div class="deb-error" id="deb-err-fuelType">{t.errFuel}</div>
+  </div>
+
+  <div class="deb-group">
+    <label class="deb-step-label">{t.step3Label}</label>
+    <div class="deb-grid deb-grid-4">
+      <button type="button" class="deb-option deb-year" data-group="registrationYear" data-val="pre2000">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
+        <span>{t.yearPre2000}</span>
+      </button>
+      <button type="button" class="deb-option deb-year" data-group="registrationYear" data-val="2000-2005">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+        <span>{t.year20002005}</span>
+      </button>
+      <button type="button" class="deb-option deb-year" data-group="registrationYear" data-val="2006-2013">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><path d="M8 14h4l-2 2 2 2H8"/></svg>
+        <span>{t.year20062013}</span>
+      </button>
+      <button type="button" class="deb-option deb-year" data-group="registrationYear" data-val="post2014">
+        <svg class="deb-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/><polyline points="9 15 11 17 15 13"/></svg>
+        <span>{t.yearPost2014}</span>
+      </button>
+    </div>
+    <input type="hidden" id="registrationYear" />
+    <div class="deb-error" id="deb-err-registrationYear">{t.errYear}</div>
+    <p class="deb-help">{t.helpText}</p>
+  </div>
+
+  <button type="submit" class="deb-submit">
+    {t.submitBtn}
+    <svg width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14m-7-7l7 7-7 7"/></svg>
+  </button>
+</form>
+
+<style>
+  .deb-form {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .deb-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .deb-step-label {
+    font-size: 0.875rem;
+    font-weight: 800;
+    color: var(--deb-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .deb-step-label::after {
+    content: "";
+    flex: 1;
+    height: 1px;
+    background: var(--deb-label-border);
+  }
+
+  .deb-grid {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .deb-grid-3 { grid-template-columns: repeat(3, 1fr); }
+  .deb-grid-4 { grid-template-columns: repeat(4, 1fr); }
+
+  .deb-option {
+    border-radius: 1rem;
+    padding: 1rem 0.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    background: var(--deb-option-bg);
+    border: 2px solid var(--deb-option-border);
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    color: var(--deb-text-main);
+  }
+
+  .deb-icon {
+    width: 2.25rem;
+    height: 2.25rem;
+    stroke: currentcolor;
+    opacity: 0.7;
+    transition: transform 0.2s;
+  }
+
+  .deb-option span {
+    font-size: 0.8125rem;
+    font-weight: 700;
+    line-height: 1.2;
+  }
+
+  .deb-option:hover {
+    transform: translateY(-2px);
+    background: var(--deb-option-hover);
+    border-color: var(--deb-accent);
+  }
+
+  .deb-option:hover .deb-icon {
+    transform: scale(1.1);
+    opacity: 1;
+  }
+
+  :global(.deb-selected).deb-option {
+    background: var(--deb-accent-bg);
+    border-color: var(--deb-accent);
+    color: #fff;
+    box-shadow: 0 8px 16px -4px var(--deb-accent-shadow);
+  }
+
+  :global(.deb-selected) .deb-icon { opacity: 1; }
+
+  .deb-vehicle {
+    --deb-accent: #0ea5e9;
+    --deb-accent-bg: #0ea5e9;
+    --deb-accent-shadow: rgba(14, 165, 233, 0.4);
+  }
+
+  .deb-fuel {
+    --deb-accent: #10b981;
+    --deb-accent-bg: #10b981;
+    --deb-accent-shadow: rgba(16, 185, 129, 0.4);
+  }
+
+  .deb-year {
+    --deb-accent: #8b5cf6;
+    --deb-accent-bg: #8b5cf6;
+    --deb-accent-shadow: rgba(139, 92, 246, 0.4);
+  }
+
+  .deb-error {
+    color: #ef4444;
+    font-size: 0.75rem;
+    font-weight: 700;
+    opacity: 0;
+    transition: opacity 0.2s;
+    margin-top: -0.5rem;
+  }
+
+  .deb-help {
+    font-size: 0.75rem;
+    color: var(--deb-text-muted);
+    line-height: 1.5;
+    font-style: italic;
+  }
+
+  .deb-submit {
+    width: 100%;
+    padding: 1.25rem;
+    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+    color: #fff;
+    border: none;
+    border-radius: 1.25rem;
+    font-weight: 800;
+    font-size: 1.125rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.75rem;
+    box-shadow: 0 10px 15px -3px rgba(217, 119, 6, 0.3);
+  }
+
+  .deb-submit:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 20px 25px -5px rgba(217, 119, 6, 0.4);
+    filter: brightness(1.1);
+  }
+
+  @media (max-width: 480px) {
+    .deb-grid-3, .deb-grid-4 { grid-template-columns: repeat(2, 1fr); }
+  }
+</style>

package/src/tool/env-badge-spain/components/BadgeResult.astro

@@ -0,0 +1,151 @@
+---
+interface Props {
+  t: Record<string, string>;
+}
+
+const { t } = Astro.props;
+---
+
+<div class="deb-result" id="deb-result" style="display: none">
+  <div class="deb-result-card">
+    <h2 class="deb-result-title">{t.resultTitle}</h2>
+
+    <div class="deb-badge-container">
+      <div id="deb-badge-display" class="deb-badge-display"></div>
+    </div>
+
+    <div class="deb-result-info">
+      <p class="deb-result-desc" id="deb-result-desc"></p>
+      <div class="deb-warning-box">
+        <svg
+          width="20"
+          height="20"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="#f59e0b"
+          stroke-width="2"
+          ><path
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          ></path></svg
+        >
+        <p class="deb-result-warn">{t.warningText}</p>
+      </div>
+    </div>
+
+    <button type="button" class="deb-reset-btn" id="deb-reset">
+      <svg
+        width="18"
+        height="18"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+        stroke-width="2.5"
+        ><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8m0 0V3m0 5h5"
+        ></path></svg
+      >
+      {t.resetBtn}
+    </button>
+  </div>
+</div>
+
+<style>
+  .deb-result {
+    display: none;
+    flex-direction: column;
+    animation: deb-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  .deb-result-card {
+    background: var(--deb-result-bg);
+    border-radius: 1.5rem;
+    padding: 2.5rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    border: 1px solid var(--deb-card-border);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  }
+
+  .deb-result-title {
+    font-size: 1.25rem;
+    font-weight: 800;
+    color: var(--deb-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    margin-bottom: 2rem;
+  }
+
+  .deb-badge-container {
+    margin-bottom: 2rem;
+    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
+  }
+
+  .deb-result-info {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 640px;
+    width: 100%;
+  }
+
+  .deb-result-desc {
+    font-size: 1.125rem;
+    font-weight: 600;
+    line-height: 1.6;
+    color: var(--deb-text-main);
+  }
+
+  .deb-warning-box {
+    display: flex;
+    gap: 1rem;
+    padding: 1rem;
+    background: rgba(245, 158, 11, 0.08);
+    border-radius: 1rem;
+    border: 1px solid rgba(245, 158, 11, 0.2);
+    text-align: left;
+  }
+
+  .deb-result-warn {
+    font-size: 0.8125rem;
+    color: #b45309;
+    font-weight: 500;
+    line-height: 1.5;
+  }
+
+  :global(.theme-dark) .deb-result-warn {
+    color: #fbbf24;
+  }
+
+  .deb-reset-btn {
+    margin-top: 2.5rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.875rem 2rem;
+    background: var(--deb-option-bg);
+    border: 1px solid var(--deb-option-border);
+    border-radius: 100px;
+    color: var(--deb-text-main);
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .deb-reset-btn:hover {
+    background: var(--deb-option-hover);
+    transform: scale(1.05);
+  }
+
+  @keyframes deb-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+</style>