body[data-calculator-slug="tools/color-temperature"] .ct-shell {
  display: grid;
  gap: 16px;
  align-items: start;
}

body[data-calculator-slug="tools/color-temperature"] .ct-main-panel,
body[data-calculator-slug="tools/color-temperature"] .ct-nearby-panel,
body[data-calculator-slug="tools/color-temperature"] .ct-variants-panel,
body[data-calculator-slug="tools/color-temperature"] .ct-result-block,
body[data-calculator-slug="tools/color-temperature"] .ct-variant-card,
body[data-calculator-slug="tools/color-temperature"] .ct-metrics > div,
body[data-calculator-slug="tools/color-temperature"] .ct-metric {
  min-width: 0;
}

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

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

body[data-calculator-slug="tools/color-temperature"] .ct-input-hint {
  color: var(--muted, #64748b);
  font-size: 0.92rem;
  font-weight: 400;
}

body[data-calculator-slug="tools/color-temperature"] .ct-status {
  min-height: 48px;
  border-color: #93c5fd;
  background: #eff6ff;
  color: #172554;
}

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

body[data-calculator-slug="tools/color-temperature"] .ct-status--success {
  border-color: #86efac;
  background: #f0fdf4;
  color: #14532d;
}

body[data-calculator-slug="tools/color-temperature"] .ct-result-block {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

body[data-calculator-slug="tools/color-temperature"] .ct-result-copy {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 10px;
}

body[data-calculator-slug="tools/color-temperature"] .ct-temperature-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid #64748b;
  border-radius: 999px;
  background: var(--surface-subtle, #f8fafc);
  color: var(--fg, #0f172a);
  font: inherit;
  font-weight: 800;
  overflow-wrap: anywhere;
}

body[data-calculator-slug="tools/color-temperature"] .ct-temperature-badge[data-temperature="warm"] {
  border-color: #c2410c;
  background: #fff7ed;
  color: #7c2d12;
}

body[data-calculator-slug="tools/color-temperature"] .ct-temperature-badge[data-temperature="cool"] {
  border-color: #1d4ed8;
  background: #eff6ff;
  color: #1e3a8a;
}

body[data-calculator-slug="tools/color-temperature"] .ct-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 0;
}

body[data-calculator-slug="tools/color-temperature"] .ct-metric {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 12px;
  background: var(--surface-subtle, #f8fafc);
}

body[data-calculator-slug="tools/color-temperature"] .ct-metrics dt,
body[data-calculator-slug="tools/color-temperature"] .ct-metric dt {
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  font-weight: 700;
}

body[data-calculator-slug="tools/color-temperature"] .ct-metrics dd,
body[data-calculator-slug="tools/color-temperature"] .ct-metric dd {
  min-width: 0;
  margin: 0;
}

body[data-calculator-slug="tools/color-temperature"] .ct-metrics code,
body[data-calculator-slug="tools/color-temperature"] .ct-metric code,
body[data-calculator-slug="tools/color-temperature"] .ct-variant-card code {
  color: var(--fg, #0f172a);
  background: transparent;
  overflow-wrap: anywhere;
  white-space: normal;
}

body[data-calculator-slug="tools/color-temperature"] .ct-swatch {
  min-height: 120px;
  border: 2px solid rgba(15, 23, 42, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

body[data-calculator-slug="tools/color-temperature"] .ct-variants,
body[data-calculator-slug="tools/color-temperature"] .ct-variant-grid {
  display: grid;
  gap: 12px;
}

body[data-calculator-slug="tools/color-temperature"] .ct-variant-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 12px;
  background: var(--surface-subtle, #f8fafc);
}

body[data-calculator-slug="tools/color-temperature"] .ct-variant-card .ct-swatch {
  min-height: 96px;
}

body[data-calculator-slug="tools/color-temperature"] .ct-variant-metrics {
  display: grid;
  gap: 8px;
  margin: 0;
}

body[data-calculator-slug="tools/color-temperature"] .ct-variant-metrics > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

body[data-calculator-slug="tools/color-temperature"] .ct-variant-metrics dt {
  color: var(--muted, #64748b);
  font-size: 0.9rem;
  font-weight: 700;
}

body[data-calculator-slug="tools/color-temperature"] .ct-variant-metrics dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

body[data-calculator-slug="tools/color-temperature"] .ct-form-actions,
body[data-calculator-slug="tools/color-temperature"] .ct-result-actions,
body[data-calculator-slug="tools/color-temperature"] .ct-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

body[data-calculator-slug="tools/color-temperature"] .ct-form-actions .button,
body[data-calculator-slug="tools/color-temperature"] .ct-result-actions .button,
body[data-calculator-slug="tools/color-temperature"] .ct-actions .button,
body[data-calculator-slug="tools/color-temperature"] .ct-variant-card .button {
  min-width: 44px;
  min-height: 44px;
}

body[data-calculator-slug="tools/color-temperature"] .button[disabled] {
  cursor: not-allowed;
  opacity: 0.58;
}

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

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

:root.dark body[data-calculator-slug="tools/color-temperature"] .ct-status--success {
  border-color: #16a34a;
  background: rgba(20, 83, 45, 0.36);
  color: #dcfce7;
}

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

:root.dark body[data-calculator-slug="tools/color-temperature"] .ct-temperature-badge[data-temperature="warm"] {
  border-color: #fb923c;
  background: rgba(124, 45, 18, 0.32);
  color: #ffedd5;
}

:root.dark body[data-calculator-slug="tools/color-temperature"] .ct-temperature-badge[data-temperature="cool"] {
  border-color: #60a5fa;
  background: rgba(30, 58, 138, 0.34);
  color: #dbeafe;
}

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

  body[data-calculator-slug="tools/color-temperature"] .ct-result-block {
    grid-template-columns: minmax(160px, 2fr) minmax(0, 3fr);
    align-items: stretch;
  }
}

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