/* Color presentation only; color-tools.js owns parsing and conversions. */
.colors-page .up-button { font-size: 16px; }
.colors-page .color-preview-container { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; align-items: end; }
.colors-page .color-picker-input { width: 100%; height: 104px; padding: 4px; border: 1px solid var(--up-control-border); border-radius: var(--up-radius); background: var(--up-surface); cursor: pointer; }
.colors-page .color-preview { min-width: 0; min-height: 104px; border: 1px solid var(--up-control-border); border-radius: var(--up-radius); display: flex; align-items: center; justify-content: center; }
.colors-page .color-preview-text { padding: 8px 12px; border-radius: var(--up-radius-small); font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
.colors-page .slider-group { display: grid; gap: 8px; margin-top: 8px; }
.colors-page .slider-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 72px; gap: 8px; align-items: center; }
.colors-page .slider-input { width: 100%; min-width: 0; min-height: 48px; accent-color: var(--up-green); cursor: pointer; }
.colors-page .slider-value { padding-inline: 8px; }
.colors-page .color-formats { min-width: 0; display: grid; gap: 12px; }
.colors-page .color-formats .up-result-title { margin-bottom: 0; }
.colors-page .format-card { min-width: 0; }
.colors-page .format-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.colors-page .format-label { font-size: 16px; font-weight: 650; }
.colors-page .format-copy-btn { font-size: 16px; padding-inline: 12px; }
.colors-page .format-input { font-variant-numeric: tabular-nums; }
.colors-page .format-copy-btn.copied { background: var(--up-tint); }
.colors-page .quick-colors { margin-top: 24px; }
.colors-page .quick-colors-title { font-size: 16px; margin-bottom: 12px; }
.colors-page .quick-colors-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.colors-page .quick-color { min-width: 0; justify-content: flex-start; font-size: 16px; padding-inline: 12px; }
.colors-page .colors-quick-swatch { display: block; width: 24px; height: 24px; flex-shrink: 0; border: 1px solid var(--up-control-border); border-radius: var(--up-radius-small); }
@media (max-width: 1023px) {
  .colors-page .quick-colors-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .colors-page .color-preview-container { grid-template-columns: 96px minmax(0, 1fr); }
  .colors-page .color-picker-input, .colors-page .color-preview { height: 72px; min-height: 72px; }
  .colors-page .slider-row { grid-template-columns: 72px minmax(0, 1fr) 64px; }
  .colors-page .quick-colors-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .colors-page .quick-color { padding-inline: 8px; gap: 8px; }
}