.color-picker{flex:1 1 auto;margin-bottom:1.5rem}.color-picker,.color-picker__main{display:flex;flex-direction:column}.color-picker__main{gap:.5rem}.color-picker__input-group{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}.color-picker__color-input{width:42px;height:42px;border:2px solid var(--theme-elevation-150,#e0e0e0);border-radius:var(--style-radius-s);cursor:pointer;padding:0;background:none;transition:all .2s ease}.color-picker__color-input:hover:not(:disabled){border-color:var(--theme-elevation-400,#999)}.color-picker__color-input:focus{outline:none;border-color:var(--theme-elevation-500,#4a90e2);box-shadow:0 0 0 3px var(--theme-elevation-50,rgba(74,144,226,.1))}.color-picker__color-input:disabled{opacity:.5;cursor:not-allowed;background-color:var(--theme-elevation-100,#f5f5f5)}.color-picker__color-input::-webkit-color-swatch-wrapper{padding:0;border-radius:var(--style-radius-s)}.color-picker__color-input::-webkit-color-swatch{border:none}.color-picker__color-input::-moz-color-swatch{border:none;border-radius:var(--style-radius-s)}.color-picker__error{font-size:var(--font-size-small,.75rem);color:var(--theme-error-500,#e63946);padding:.25rem .5rem;background-color:var(--theme-error-50,#ffe5e5);display:inline-block}.color-picker__presets{display:flex;flex-direction:column;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--theme-elevation-150,#e0e0e0)}.color-picker__presets--disabled{opacity:.6}.color-picker__presets-label{font-size:var(--font-size-small,.8125rem);font-weight:500;color:var(--theme-elevation-600,#666)}.color-picker__presets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:.5rem;max-width:100%}.color-picker__preset{width:36px;height:36px;border:2px solid var(--theme-elevation-150,#e0e0e0);cursor:pointer;transition:all .2s ease;padding:0;position:relative;overflow:hidden;border-radius:var(--style-radius-s)}.color-picker__preset:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px var(--theme-elevation-200,rgba(0,0,0,.15));border-color:var(--theme-elevation-400,#999)}.color-picker__preset:focus{outline:none;border-color:var(--theme-elevation-500,#4a90e2);box-shadow:0 0 0 3px var(--theme-elevation-100,rgba(74,144,226,.2))}.color-picker__preset:active:not(:disabled){transform:translateY(0)}.color-picker__preset:disabled{opacity:.5;cursor:not-allowed}.color-picker__preset:disabled:hover{transform:none;box-shadow:none;border-color:var(--theme-elevation-150,#e0e0e0)}.color-picker__preset--active{border-color:var(--theme-elevation-500,#4a90e2);border-width:3px;box-shadow:0 0 0 3px var(--theme-elevation-100,rgba(74,144,226,.2))}@media(max-width:768px){.color-picker__input-group{flex-wrap:wrap}.color-picker__presets-grid{grid-template-columns:repeat(auto-fill,minmax(32px,1fr))}.color-picker__preset{width:32px;height:32px}}.color-cell{display:flex;align-items:center;gap:.25rem}.color-cell .cell-indicator{width:18px;height:18px;border-radius:var(--border-radius-xs,3px);border:2px solid var(--theme-elevation-150,#e0e0e0);background-color:#fff;box-shadow:0 1px 2px var(--theme-elevation-100,rgba(0,0,0,.05));transition:border-color .2s}