.color-picker{margin-bottom:1rem}.field-label{display:block;font-weight:600;margin-bottom:.5rem;color:#374151}.required{color:#ef4444;margin-left:.25rem}.color-picker-row{flex-wrap:wrap}.color-picker-row,.custom-color-section{display:flex;align-items:center;gap:.5rem}.color-input-container{position:relative}.color-input-container input[type=color]{width:40px;height:40px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;padding:2px;background:none}.color-input-container input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-input-container input[type=color]::-webkit-color-swatch{border:none;border-radius:4px}.color-input-container input[type=color]::-moz-color-swatch{border:none;border-radius:4px}.color-picker-row input[type=text]{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;width:100px}.color-picker-row input[type=text]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.color-picker-row select{padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;min-width:200px;margin-right:8px}.color-picker-row select:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.color-picker-row button{padding:8px 12px;font-size:12px;color:#6b7280;border:1px solid #d1d5db;border-radius:6px;background:white;cursor:pointer;transition:all .2s}.color-picker-row button:hover{color:#374151;border-color:#9ca3af;background:#f9fafb}.color-picker-row button:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.lexical-color-picker{position:relative;display:inline-block}.lexical-color-picker-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem;border:1px solid #d1d5db;border-radius:6px;background:white;cursor:pointer;transition:all .2s}.lexical-color-picker-button:hover{border-color:#9ca3af;background:#f9fafb}.lexical-color-picker-button:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.lexical-color-picker-preview{width:20px;height:20px;border-radius:4px;border:1px solid #d1d5db}.lexical-color-picker-dropdown{position:absolute;top:100%;left:0;z-index:1000;background:white;border:1px solid #d1d5db;border-radius:6px;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);padding:.5rem;min-width:200px}.lexical-color-picker-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(40px,1fr));gap:.5rem;margin-bottom:.5rem}.lexical-color-picker-option{width:40px;height:40px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;transition:all .2s}.lexical-color-picker-option:hover{border-color:#3b82f6;transform:scale(1.05)}.lexical-color-picker-option.selected{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}.lexical-color-picker-custom{display:flex;align-items:center;gap:.5rem;padding:.5rem;border-top:1px solid #e5e7eb;margin-top:.5rem}.lexical-color-picker-custom input[type=color]{width:40px;height:40px;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;padding:2px}.lexical-color-picker-custom input[type=text]{flex:1;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}.lexical-color-picker-custom input[type=text]:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}