/* Renk örnekleri içerik rengidir; panel ve etkileşimler NUI tema tokenlarını kullanır. */
.nui-color-picker { width: 240px; min-width: 0; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: var(--nui-gap-2); gap: var(--nui-gap-2); }
.nui-color-picker-heading, .nui-color-picker-native-row { display: flex; align-items: center; justify-content: space-between; gap: var(--nui-gap-2); min-width: 0; }
.nui-color-picker-title { font-size: var(--nui-font-size-sm); overflow-wrap: anywhere; }
.nui-color-picker-close { width: var(--nui-control-height-sm); min-width: var(--nui-control-height-sm); min-height: var(--nui-control-height-sm); font-size: var(--nui-font-size-lg); }
.nui-color-picker-native-row, .nui-color-picker-field { font-size: var(--nui-font-size-sm); color: var(--nui-text-muted); }
.nui-color-picker-native { width: 58px; height: var(--nui-control-height); flex: 0 0 auto; padding: 3px; border: 1px solid var(--nui-border-strong); border-radius: var(--nui-radius-sm); background: var(--nui-input); cursor: pointer; }
.nui-color-picker-native:focus-visible, .nui-color-picker-swatch:focus-visible { outline: 2px solid var(--nui-ring); outline-offset: 2px; }
.nui-color-picker-presets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--nui-gap-1); }
.nui-color-picker-swatch { height: var(--nui-control-height-sm); min-width: 0; padding: 0; border: 1px solid var(--nui-border-strong); border-radius: var(--nui-radius-sm); background: var(--nui-color-swatch); cursor: pointer; }
.nui-color-picker-swatch:hover { box-shadow: 0 0 0 1px var(--nui-text-muted); }
.nui-color-picker-swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--nui-raised), 0 0 0 2px var(--nui-accent); }
.nui-color-picker-field { display: flex; flex-direction: column; gap: var(--nui-gap-1); }
.nui-color-picker-hex { width: 100%; min-width: 0; font-family: var(--nui-font-mono); }
.nui-color-picker-hex[aria-invalid="true"] { border-color: var(--nui-danger); }
.nui-color-picker-error { min-height: 2.7em; font-size: var(--nui-font-size-xs); line-height: 1.35; color: var(--nui-danger); visibility: hidden; margin-top: calc(-1 * var(--nui-gap-1)); }
.nui-color-picker-error.is-visible { visibility: visible; }
.nui-color-picker-clear { width: 100%; }
nui-color-picker { display: inline-block; }
.nui-color-picker-indicator { display: inline-block; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--nui-border-strong); border-radius: var(--nui-radius-sm); background: var(--nui-color-swatch, transparent); }