#blendFloatingWindow {
display:none;
position:fixed;
top:50px;
left:50px;
width:90%;
height:90%;
overflow:hidden;
box-shadow:0 0 15px rgba(0,0,0,0.2);
resize:both;
padding:0;
background-color:var(--background-color-A);
border:2px solid var(--fjm-border-color);
border-radius:var(--fjm-border-radius);
color:var(--component-text-color);
flex-direction:column;
z-index:var(--fjm-z-index)
}

#blendFloatingWindowHeader {
background-color:var(--background-color-B);
color:var(--component-text-color);
padding:5px;
cursor:move;
display:flex;
align-items:center;
justify-content:space-between
}

#blendCloseButton {
background:none;
border:none;
color:var(--component-text-color);
font-size:18px;
cursor:pointer;
padding:0 6px;
line-height:1;
opacity:0.7;
transition:opacity 0.2s
}

#blendCloseButton:hover {
opacity:1
}

#blendControls {
position:sticky;
top:0;
background-color:var(--background-color-B);
padding:5px;
display:flex;
align-items:center;
gap:8px;
z-index:1000;
flex-wrap:wrap
}

#blendControls button {
margin:0
}

.blend-control-group {
display:flex;
align-items:center;
gap:6px;
padding-left:8px;
border-left:1px solid var(--fjm-border-color)
}

.blend-control-group:last-child {
margin-left:auto
}

#blendSelectedInfo {
font-size:12px;
color:var(--color-text-secondary);
white-space:nowrap
}

#blendApplyButton {
background-color:var(--fjm-button-bg-color);
color:var(--component-text-color);
border:1px solid var(--fjm-border-color);
padding:5px 16px;
cursor:default;
font-weight:bold;
border-radius:var(--fjm-button-border-radius);
opacity:0.5;
pointer-events:none;
transition:all 0.2s
}

#blendApplyButton.active {
background-color:var(--color-accent);
color:var(--color-text-primary);
border-color:var(--color-accent);
opacity:1;
pointer-events:auto;
cursor:pointer
}

#blendApplyButton.active:hover {
filter:brightness(1.2)
}

#blendMainContent {
display:flex;
flex:1;
overflow:hidden
}

#blendLeftPanel {
flex:1;
overflow-y:auto;
min-width:0
}

#sourceImages {
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
justify-content:center;
padding:5px
}

#blendModes {
padding:5px
}

#blendImageList {
width:250px;
min-width:200px;
border-left:1px solid var(--fjm-border-color);
display:flex;
flex-direction:column;
overflow:hidden
}

#blendImageListHeader {
padding:8px;
font-size:12px;
font-weight:bold;
background-color:var(--background-color-B);
border-bottom:1px solid var(--fjm-border-color)
}

#blendImageListBody {
flex:1;
overflow-y:auto;
padding:4px
}

.blend-image-list-item {
display:flex;
align-items:center;
gap:6px;
padding:4px 6px;
border-radius:var(--fjm-button-border-radius);
cursor:pointer;
transition:background-color 0.15s
}

.blend-image-list-item:hover {
background-color:var(--fjm-button-hover-bg-color)
}

.blend-image-list-item.checked {
background-color:rgba(var(--color-accent-rgb,66,133,244),0.1)
}

.blend-image-checkbox {
flex-shrink:0;
cursor:pointer;
width:16px;
height:16px
}

.blend-image-thumb {
flex-shrink:0;
width:50px;
height:50px;
overflow:hidden;
border-radius:var(--fjm-button-border-radius);
border:1px solid var(--fjm-border-color)
}

.blend-image-thumb canvas {
width:100%;
height:100%;
object-fit:contain
}

.blend-image-name {
flex:1;
font-size:11px;
color:var(--component-text-color);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
min-width:0
}

.layer-preview-blend.blend-preview-dragging {
opacity:0.7;
z-index:10;
position:relative
}

.blend-category {
margin-bottom:8px
}

.blend-category-header {
display:flex;
align-items:center;
gap:6px;
padding:4px 8px;
cursor:pointer;
background-color:var(--fjm-button-bg-color);
border-radius:var(--fjm-button-border-radius);
user-select:none;
font-size:12px;
font-weight:bold;
color:var(--component-text-color)
}

.blend-category-header:hover {
background-color:var(--fjm-button-hover-bg-color)
}

.blend-category-toggle {
display:inline-block;
transition:transform 0.2s;
font-size:10px
}

.blend-category.collapsed .blend-category-toggle {
transform:rotate(-90deg)
}

.blend-category.collapsed .blend-category-grid {
display:none
}

.blend-category-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
gap:6px;
padding:6px 0
}

.layer-preview-blend,
.blend-mode-container {
margin:3px;
text-align:center;
position:relative
}

.blend-mode-container {
border:2px solid transparent;
border-radius:var(--fjm-button-border-radius);
padding:3px;
cursor:pointer;
transition:border-color 0.2s,box-shadow 0.2s
}

.blend-mode-container.blend-mode-loading {
min-height:80px;
display:flex;
align-items:center;
justify-content:center;
background-color:var(--fjm-button-bg-color);
cursor:default
}

.blend-mode-container:not(.blend-mode-loading):hover {
border-color:var(--color-accent-hover);
box-shadow:0 0 5px rgba(0,0,255,0.3)
}

.blend-mode-container.blend-mode-selected {
border-color:var(--color-accent);
box-shadow:0 0 8px rgba(255,0,0,0.3)
}

.blend-mode-container canvas {
border:1px solid var(--fjm-border-color);
cursor:pointer;
width:100%;
height:auto
}

.blend-mode-label {
font-size:11px;
padding:2px 0;
color:var(--component-text-color)
}

.layer-preview-blend {
position:relative;
cursor:grab
}

.layer-preview-blend:hover {
outline:2px dashed var(--color-accent);
outline-offset:2px
}

.blend-preview-drag-indicator {
position:absolute;
top:2px;
left:50%;
transform:translateX(-50%);
font-size:14px;
color:var(--component-text-color);
opacity:0;
transition:opacity 0.2s;
z-index:1;
pointer-events:none;
background-color:rgba(0,0,0,0.5);
border-radius:var(--fjm-button-border-radius);
padding:0 6px;
line-height:20px
}

.layer-preview-blend:hover .blend-preview-drag-indicator {
opacity:1
}

.layer-preview-blend canvas {
border:1px solid var(--fjm-border-color);
cursor:grab;
transition:all 0.3s ease
}

.layer-preview-blend.unchecked canvas {
opacity:0.35
}

.layer-preview-blend .layer-status-overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:20px;
display:flex;
align-items:center;
justify-content:center;
pointer-events:none;
font-size:28px
}

.layer-preview-blend.unchecked .layer-status-overlay {
background-color:rgba(0,0,0,0.3);
color:#ff4444
}

.layer-preview-blend.checked .layer-status-overlay {
color:#44ff44
}

.layer-checkbox-blend {
display:none
}

#enlargedImageContainerBlend {
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:var(--z-overlay);
cursor:pointer
}

#enlargedImage {
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
max-width:90%;
max-height:90%
}

#layerPreviewsBlend {
display:flex;
flex-wrap:nowrap;
overflow-x:auto;
padding:10px 0
}

.blend-layer-editor {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background-color:var(--background-color-A);
color:var(--component-text-color);
border:2px solid var(--fjm-border-color);
border-radius:var(--fjm-border-radius);
padding:20px;
z-index:var(--z-font-manager);
box-shadow:0 4px 20px rgba(0,0,0,0.3);
display:flex;
flex-direction:column;
gap:10px;
min-width:220px
}

.blend-layer-editor h3 {
margin:0;
font-size:14px
}

.blend-layer-editor button {
cursor:pointer
}

.blend-editor-label {
font-size:12px;
color:var(--color-text-secondary)
}

.blend-editor-buttons {
display:flex;
gap:8px;
justify-content:flex-end
}