/* Palette layout only; color-tools.js and favorite provenance remain unchanged. */
.palettes-page .up-button { font-size: 16px; }
.palettes-page .base-color-section { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 12px; }
.palettes-page .base-color-picker { width: 100%; height: 48px; padding: 4px; border: 1px solid var(--up-control-border); border-radius: var(--up-radius); background: var(--up-surface); cursor: pointer; }
.palettes-page .harmony-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.palettes-page .harmony-btn { font-size: 16px; padding-inline: 8px; }
.palettes-page .palettes-summary { font-size: 14px; margin-bottom: 12px; }
.palettes-page .palette-strip { display: grid; gap: 8px; }
.palettes-page .palette-color { display: flex; align-items: center; gap: 12px; min-height: 64px; width: 100%; min-width: 0; border: 1px solid var(--up-border); border-radius: var(--up-radius); background: var(--up-surface); padding: 8px 12px; color: var(--up-ink); text-align: left; font-size: 16px; cursor: pointer; }
.palettes-page .palette-color:hover { background: var(--up-tint); }
.palettes-page .palette-color:focus-visible { outline-color: #fff; }
.palettes-page .palette-color-swatch { display: block; flex-shrink: 0; width: 48px; height: 48px; border: 1px solid var(--up-control-border); border-radius: var(--up-radius-small); }
.palettes-page .palette-color-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.palettes-page .palette-color-hex { font-weight: 650; font-variant-numeric: tabular-nums; }
.palettes-page .palette-color-name { font-size: 13px; color: var(--up-muted); }
.palettes-page .palette-color-action { font-size: 14px; font-weight: 600; color: var(--up-green); }
.palettes-page .palette-color.copied .palette-color-action { font-size: 0; }
.palettes-page .palette-color.copied .palette-color-action::after { content: 'Copiado!'; font-size: 14px; }
.palettes-page .palette-actions .up-button { font-size: 16px; padding-inline: 12px; }
.palettes-page .palettes-warning { margin-top: 12px; }
.palettes-page .export-section { margin-top: 24px; border-top: 1px solid var(--up-border); padding-top: 16px; }
.palettes-page .export-section[hidden] { display: none; }
.palettes-page .export-section h2 { font-size: 16px; margin-bottom: 12px; }
.palettes-page .export-tab { font-size: 16px; }
.palettes-page .export-code { max-width: 100%; padding: 16px; background: var(--up-forest); color: #fff; border-radius: var(--up-radius); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.palettes-page .export-copy-btn { margin-top: 12px; }
.palettes-page .saved-palettes { margin-top: 24px; border-top: 1px solid var(--up-border); padding-top: 16px; }
.palettes-page .saved-palettes-title { font-size: 16px; margin-bottom: 12px; }
.palettes-page .saved-palette-item { display: flex; align-items: center; gap: 16px; padding-block: 16px; border-bottom: 1px solid var(--up-border); }
.palettes-page .saved-palette-details { min-width: 0; flex: 1; }
.palettes-page .saved-palette-meta { font-size: 14px; color: var(--up-muted); margin-bottom: 8px; overflow-wrap: anywhere; }
.palettes-page .saved-palette-colors { display: flex; min-height: 24px; border: 1px solid var(--up-control-border); border-radius: var(--up-radius-small); overflow: hidden; }
.palettes-page .saved-palette-color { min-width: 0; flex: 1; }
.palettes-page .saved-palette-codes { font-size: 13px; margin-top: 4px; color: var(--up-muted); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.palettes-page .saved-palette-actions { display: flex; gap: 8px; }
.palettes-page .saved-palette-btn { font-size: 16px; padding-inline: 12px; }
.palettes-page .saved-palette-btn.delete { color: var(--up-error); }
.palettes-page #saved-list > p { color: var(--up-muted); font-size: 14px; }
@media (max-width: 767px) {
  .palettes-page .base-color-section { grid-template-columns: 128px minmax(0, 1fr); gap: 8px; }
  .palettes-page .palette-color { padding: 8px; gap: 8px; }
  .palettes-page .palette-actions { flex-direction: column; align-items: stretch; }
  .palettes-page .saved-palette-item { align-items: stretch; flex-direction: column; gap: 8px; }
  .palettes-page .saved-palette-actions .up-button { flex: 1; }
  .palettes-page .export-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}