body[data-calculator-slug="tools/color-difference"] .w40-field {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

body[data-calculator-slug="tools/color-difference"] input[type="color"] {
  width: 64px;
  min-height: 44px;
}

body[data-calculator-slug="tools/color-difference"] .w40-banner {
  border-color: #93c5fd;
  background: #eff6ff;
  color: #172554;
}

body[data-calculator-slug="tools/color-difference"] .w40-banner--error {
  border-color: #fda4af;
  background: #fff1f2;
  color: #881337;
}

:root.dark body[data-calculator-slug="tools/color-difference"] .w40-banner {
  border-color: #3b82f6;
  background: rgba(30, 64, 175, 0.3);
  color: #dbeafe;
}

:root.dark body[data-calculator-slug="tools/color-difference"] .w40-banner--error {
  border-color: #be123c;
  background: rgba(159, 18, 57, 0.24);
  color: #ffe4e6;
}

:root.dark body[data-calculator-slug="tools/color-difference"] .button.primary {
  border-color: #245bdf;
  background: #245bdf;
}

body[data-calculator-slug="tools/color-difference"] .w40-metric {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 6px;
}

body[data-calculator-slug="tools/color-difference"] .w40-metric-label {
  display: block;
  color: var(--muted, #64748b);
  font-size: 0.9rem;
}

body[data-calculator-slug="tools/color-difference"] .w40-metric-value {
  display: block;
  margin: 0;
  color: var(--fg, #0f172a);
  font-size: 1.15rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

body[data-calculator-slug="tools/color-difference"] .w40-code-list {
  display: grid;
  justify-items: start;
  gap: 8px;
  min-width: 0;
}

body[data-calculator-slug="tools/color-difference"] .w40-code-list .w40-code,
body[data-calculator-slug="tools/color-difference"] .w40-channel-list .w40-code {
  display: block;
  max-width: 100%;
  padding: 7px 10px;
  line-height: 1.4;
}

body[data-calculator-slug="tools/color-difference"] .w40-channel-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

body[data-calculator-slug="tools/color-difference"] .w40-result-note {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-inline-start: 4px solid var(--accent, #0a66d6);
  background: var(--surface-50, #f8fafc);
  color: var(--muted, #64748b);
}

body[data-calculator-slug="tools/color-difference"] .w40-result-summary {
  color: var(--fg, #0f172a);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.6;
}

body[data-calculator-slug="tools/color-difference"] .w40-swatch {
  overflow-wrap: anywhere;
}

@media (min-width: 960px) {
  body[data-calculator-slug="tools/color-difference"] .w40-shell {
    grid-template-columns: minmax(280px, 2fr) minmax(0, 3fr);
    align-items: start;
  }

  body[data-calculator-slug="tools/color-difference"] #cd-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-calculator-slug="tools/color-difference"] #cd-form .w40-inline-pair {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body[data-calculator-slug="tools/color-difference"] .w40-metrics {
    grid-template-columns: 1fr;
  }
}

@media (forced-colors: active) {
  body[data-calculator-slug="tools/color-difference"] .w40-swatch {
    border: 2px solid CanvasText;
    forced-color-adjust: auto;
  }
}