.cf-color-field{justify-content:space-between;align-items:center;gap:10px;display:flex}.cf-color-label{color:var(--text-muted);white-space:nowrap;flex-shrink:0;font-size:13px}.cf-color-control{align-items:center;gap:8px;display:flex;position:relative}.cf-color-swatch{border-radius:var(--panel-radius-sm);border:1px solid var(--border-strong);cursor:pointer;width:26px;height:26px;transition:border-color var(--ui-transition), transform var(--ui-transition);flex-shrink:0;padding:0}.cf-color-swatch:hover{border-color:var(--accent-border);transform:scale(1.08)}.cf-color-control input[type=color]{opacity:0;pointer-events:none;border:none;width:1px;height:1px;padding:0;position:absolute;top:0;left:0}.cf-hex-input{background:var(--surface-sunken);width:76px;box-shadow:var(--sunken-shadow);border:1px solid var(--border);border-radius:var(--panel-radius-sm);color:var(--text-primary);transition:border-color var(--ui-transition);text-transform:lowercase;padding:5px 8px;font-family:JetBrains Mono,Fira Code,monospace;font-size:12px}.cf-hex-input:focus{border-color:var(--accent-border-hover)}.cf-color-reset{width:18px;height:18px;color:var(--text-muted);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:14px;line-height:1;display:flex}.cf-color-reset:not(:disabled):hover{color:var(--accent-text)}.cf-color-reset:disabled{opacity:0;pointer-events:none}