/**
 * 场景编辑器独立样式表
 * 参考Wick Editor的Canvas设计
 * 舞台尺寸：960x540，原点在左上角（CSS标准）
 */

/* ==================== 画布容器 ==================== */
.scene-editor__canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #0d1117;
    /* 确保整个区域可用 */
    min-height: 0;
}

/* 
 * Wick风格画布（固定960x540逻辑尺寸）
 * 
 * 坐标系统：
 * - Wick坐标：原点在中心(0,0)，X: -480 to 480, Y: -270 to 270
 * - 屏幕坐标：原点在左上角(0,0)，X: 0 to 960, Y: 0 to 540
 * - 显示缩放：使用CSS transform: scale(displayScale)
 */
.scene-editor__canvas {
    position: relative;
    width: 960px;
    height: 540px;
    background: #1e2328;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    overflow: visible;  /* 允许元素超出画布显示 */
    /* transform-origin确保缩放从左上角，与坐标系一致 */
    transform-origin: top left;
}

/* ==================== 背景层 ==================== */
.scene-editor__bg-container {
    position: absolute;
    cursor: move;
    z-index: 1;
    /* 背景锚点在中心 */
    transform-origin: center center;
    /* 【关键修复】默认禁用pointer-events，让点击穿透到人物层 */
    /* 背景拖拽改用画布的mousedown处理 */
    pointer-events: none;
}

.scene-editor__bg-container--dragging {
    cursor: grabbing;
}

.scene-editor__bg-image {
    display: block;
    max-width: none;
    pointer-events: none;
}

.scene-editor__no-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    gap: 12px;
    z-index: 1;
}

/* 背景缩放控制点 */
.scene-editor__bg-handles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.scene-editor__bg-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #4fc3f7;
    border: 1px solid #fff;
    border-radius: 2px;
    pointer-events: auto;
    z-index: 10;
}

.scene-editor__bg-handle--tl { top: -5px; left: -5px; cursor: nw-resize; }
.scene-editor__bg-handle--tr { top: -5px; right: -5px; cursor: ne-resize; }
.scene-editor__bg-handle--bl { bottom: -5px; left: -5px; cursor: sw-resize; }
.scene-editor__bg-handle--br { bottom: -5px; right: -5px; cursor: se-resize; }

/* ==================== 人物层 ==================== */
.scene-editor__character {
    position: absolute;
    cursor: grab;
    user-select: none;
    /* 人物锚点在底部中心，通过transform设置 */
    z-index: 10;
    /* 【关键修复】非选中人物不接收点击事件，让点击穿透到画布 */
    /* 由画布的 selectNearestCharacter 函数计算应该选择哪个人物 */
    pointer-events: none;
}

.scene-editor__character:active {
    cursor: grabbing;
}

.scene-editor__character--selected {
    z-index: 100;
    /* 【关键修复】只有选中的人物接收点击/拖拽事件 */
    pointer-events: auto;
}

.scene-editor__character--locked {
    cursor: not-allowed;
    opacity: 0.8;
}

.scene-editor__character--dragging {
    opacity: 0.9;
}

/* ==================== 人物Canvas渲染 ==================== */
/* 
 * Canvas逻辑尺寸: 720x800 (宽高比 9:10)
 * 显示尺寸由容器控制，保持宽高比
 */
.scene-editor__char-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.scene-editor__char-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.scene-editor__char-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(100,100,100,0.3);
    border-radius: 8px;
    color: #666;
}

/* ==================== 人物信息标签 ==================== */
/* 人物信息按钮 - 位置由JS计算，基于人物边界居中 */
.scene-editor__char-info {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    z-index: 15;
    pointer-events: auto;
    white-space: nowrap;
    padding-bottom: 8px;
}

.scene-editor__char-edit-btn {
    pointer-events: auto;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.scene-editor__char-edit-btn:hover {
    background: #059669;
}

.scene-editor__char-replace-btn {
    pointer-events: auto;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    background: #8b5cf6;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.scene-editor__char-replace-btn:hover {
    background: #7c3aed;
}

.scene-editor__char-name {
    padding: 2px 6px;
    font-size: 10px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    border-radius: 3px;
    white-space: nowrap;
}

/* 锁定图标 */
.scene-editor__char-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 20;
}

/* ==================== 选中框（完全匹配Wick Editor样式） ==================== */
/*
 * Wick Editor SelectionWidget 样式参数:
 * BOX_STROKE_COLOR: rgba(100,150,255,1.0) - 蓝色
 * HANDLE_RADIUS: 5
 * HANDLE_FILL_COLOR: rgba(255,255,255,0.3)
 * ROTATION_HOTSPOT_FILLCOLOR: rgba(100,150,255,0.5)
 */
.scene-editor__char-bounds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* 选中边框 - Wick风格蓝色 */
.scene-editor__bounds-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(100, 150, 255, 1.0);
    box-sizing: border-box;
    pointer-events: none;
}

/* 四角缩放手柄 - Wick风格大方形 */
.scene-editor__bounds-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    background: rgba(100, 150, 255, 0.9);
    border: 2px solid #fff;
    border-radius: 2px;
    pointer-events: auto;
    z-index: 20;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
}

.scene-editor__bounds-corner:hover {
    background: rgba(80, 130, 255, 1.0);
}

.scene-editor__bounds-corner--tl { top: -7px; left: -7px; cursor: nw-resize; }
.scene-editor__bounds-corner--tr { top: -7px; right: -7px; cursor: ne-resize; }
.scene-editor__bounds-corner--bl { bottom: -7px; left: -7px; cursor: sw-resize; }
.scene-editor__bounds-corner--br { bottom: -7px; right: -7px; cursor: se-resize; }

/* 四边中间缩放手柄 - Wick风格圆形 */
.scene-editor__bounds-edge {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(100, 150, 255, 1.0);
    border-radius: 50%;
    pointer-events: auto;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}

.scene-editor__bounds-edge:hover {
    background: #fff;
    border-color: rgba(80, 130, 255, 1.0);
}

.scene-editor__bounds-edge--top { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.scene-editor__bounds-edge--bottom { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.scene-editor__bounds-edge--left { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }
.scene-editor__bounds-edge--right { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }

/* 旋转控制点 - Wick风格 */
.scene-editor__bounds-rotate {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: rgba(100, 150, 255, 0.8);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 20;
    pointer-events: auto;
}

.scene-editor__bounds-rotate:hover {
    background: rgba(80, 130, 255, 1.0);
}

.scene-editor__bounds-rotate:active {
    cursor: grabbing;
}

/* 旋转连接线 */
.scene-editor__bounds-rotate-line {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background: rgba(100, 150, 255, 1.0);
    pointer-events: none;
}

/* ==================== 摄像头框/安全区 ==================== */
.scene-editor__camera-frame {
    position: absolute;
    border: 2px solid #f59e0b;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 50;
}

.scene-editor__camera-frame--editable {
    border-style: solid;
    pointer-events: auto;
    cursor: move;
}

/* 安全区遮罩 */
.scene-editor__safe-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 40;
}

/* 安全区中心锁图标 */
.scene-editor__safe-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(16, 185, 129, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 45;
}

/* ==================== 图层面板 ==================== */
.scene-editor__layers {
    width: 280px;
    background: #1e2128;
    border-left: 1px solid #3a3f4b;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.scene-editor__layers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #3a3f4b;
    background: #252830;
}

.scene-editor__layers-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.scene-editor__layers-count {
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.scene-editor__layers-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.scene-editor__layer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #252830;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.scene-editor__layer-item:hover {
    background: #2d323d;
}

.scene-editor__layer-item--selected {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.scene-editor__layer-thumb {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: #1a1d24;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-editor__layer-thumb img,
.scene-editor__layer-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scene-editor__layer-info {
    flex: 1;
    min-width: 0;
}

.scene-editor__layer-name {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.scene-editor__layer-type {
    font-size: 11px;
    color: #9ca3af;
}

.scene-editor__layer-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.scene-editor__layer-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    border-radius: 4px;
    cursor: pointer;
}

.scene-editor__layer-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* 图层底部按钮 */
.scene-editor__layers-footer {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #3a3f4b;
}

.scene-editor__layers-footer button {
    flex: 1;
    padding: 8px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}


 * 参考Wick Editor的Canvas设计
 * 舞台尺寸：960x540，原点在左上角（CSS标准）
 */

/* ==================== 画布容器 ==================== */
.scene-editor__canvas-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: #0d1117;
    /* 确保整个区域可用 */
    min-height: 0;
}

/* 
 * Wick风格画布（固定960x540逻辑尺寸）
 * 
 * 坐标系统：
 * - Wick坐标：原点在中心(0,0)，X: -480 to 480, Y: -270 to 270
 * - 屏幕坐标：原点在左上角(0,0)，X: 0 to 960, Y: 0 to 540
 * - 显示缩放：使用CSS transform: scale(displayScale)
 */
.scene-editor__canvas {
    position: relative;
    width: 960px;
    height: 540px;
    background: #1e2328;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    overflow: visible;  /* 允许元素超出画布显示 */
    /* transform-origin确保缩放从左上角，与坐标系一致 */
    transform-origin: top left;
}

/* ==================== 背景层 ==================== */
.scene-editor__bg-container {
    position: absolute;
    cursor: move;
    z-index: 1;
    /* 背景锚点在中心 */
    transform-origin: center center;
    /* 【关键修复】默认禁用pointer-events，让点击穿透到人物层 */
    /* 背景拖拽改用画布的mousedown处理 */
    pointer-events: none;
}

.scene-editor__bg-container--dragging {
    cursor: grabbing;
}

.scene-editor__bg-image {
    display: block;
    max-width: none;
    pointer-events: none;
}

.scene-editor__no-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #4a5568;
    gap: 12px;
    z-index: 1;
}

/* 背景缩放控制点 */
.scene-editor__bg-handles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.scene-editor__bg-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #4fc3f7;
    border: 1px solid #fff;
    border-radius: 2px;
    pointer-events: auto;
    z-index: 10;
}

.scene-editor__bg-handle--tl { top: -5px; left: -5px; cursor: nw-resize; }
.scene-editor__bg-handle--tr { top: -5px; right: -5px; cursor: ne-resize; }
.scene-editor__bg-handle--bl { bottom: -5px; left: -5px; cursor: sw-resize; }
.scene-editor__bg-handle--br { bottom: -5px; right: -5px; cursor: se-resize; }

/* ==================== 人物层 ==================== */
.scene-editor__character {
    position: absolute;
    cursor: grab;
    user-select: none;
    /* 人物锚点在底部中心，通过transform设置 */
    z-index: 10;
    /* 【关键修复】非选中人物不接收点击事件，让点击穿透到画布 */
    /* 由画布的 selectNearestCharacter 函数计算应该选择哪个人物 */
    pointer-events: none;
}

.scene-editor__character:active {
    cursor: grabbing;
}

.scene-editor__character--selected {
    z-index: 100;
    /* 【关键修复】只有选中的人物接收点击/拖拽事件 */
    pointer-events: auto;
}

.scene-editor__character--locked {
    cursor: not-allowed;
    opacity: 0.8;
}

.scene-editor__character--dragging {
    opacity: 0.9;
}

/* ==================== 人物Canvas渲染 ==================== */
/* 
 * Canvas逻辑尺寸: 720x800 (宽高比 9:10)
 * 显示尺寸由容器控制，保持宽高比
 */
.scene-editor__char-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    pointer-events: none;
}

.scene-editor__char-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.scene-editor__char-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(100,100,100,0.3);
    border-radius: 8px;
    color: #666;
}

/* ==================== 人物信息标签 ==================== */
/* 人物信息按钮 - 位置由JS计算，基于人物边界居中 */
.scene-editor__char-info {
    position: absolute;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    z-index: 15;
    pointer-events: auto;
    white-space: nowrap;
    padding-bottom: 8px;
}

.scene-editor__char-edit-btn {
    pointer-events: auto;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.scene-editor__char-edit-btn:hover {
    background: #059669;
}

.scene-editor__char-replace-btn {
    pointer-events: auto;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 500;
    background: #8b5cf6;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
}

.scene-editor__char-replace-btn:hover {
    background: #7c3aed;
}

.scene-editor__char-name {
    padding: 2px 6px;
    font-size: 10px;
    background: rgba(0,0,0,0.85);
    color: #fff;
    border-radius: 3px;
    white-space: nowrap;
}

/* 锁定图标 */
.scene-editor__char-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 20;
}

/* ==================== 选中框（完全匹配Wick Editor样式） ==================== */
/*
 * Wick Editor SelectionWidget 样式参数:
 * BOX_STROKE_COLOR: rgba(100,150,255,1.0) - 蓝色
 * HANDLE_RADIUS: 5
 * HANDLE_FILL_COLOR: rgba(255,255,255,0.3)
 * ROTATION_HOTSPOT_FILLCOLOR: rgba(100,150,255,0.5)
 */
.scene-editor__char-bounds {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

/* 选中边框 - Wick风格蓝色 */
.scene-editor__bounds-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(100, 150, 255, 1.0);
    box-sizing: border-box;
    pointer-events: none;
}

/* 四角缩放手柄 - Wick风格大方形 */
.scene-editor__bounds-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    background: rgba(100, 150, 255, 0.9);
    border: 2px solid #fff;
    border-radius: 2px;
    pointer-events: auto;
    z-index: 20;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    cursor: pointer;
}

.scene-editor__bounds-corner:hover {
    background: rgba(80, 130, 255, 1.0);
}

.scene-editor__bounds-corner--tl { top: -7px; left: -7px; cursor: nw-resize; }
.scene-editor__bounds-corner--tr { top: -7px; right: -7px; cursor: ne-resize; }
.scene-editor__bounds-corner--bl { bottom: -7px; left: -7px; cursor: sw-resize; }
.scene-editor__bounds-corner--br { bottom: -7px; right: -7px; cursor: se-resize; }

/* 四边中间缩放手柄 - Wick风格圆形 */
.scene-editor__bounds-edge {
    position: absolute;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(100, 150, 255, 1.0);
    border-radius: 50%;
    pointer-events: auto;
    z-index: 20;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
}

.scene-editor__bounds-edge:hover {
    background: #fff;
    border-color: rgba(80, 130, 255, 1.0);
}

.scene-editor__bounds-edge--top { top: -5px; left: 50%; transform: translateX(-50%); cursor: n-resize; }
.scene-editor__bounds-edge--bottom { bottom: -5px; left: 50%; transform: translateX(-50%); cursor: s-resize; }
.scene-editor__bounds-edge--left { top: 50%; left: -5px; transform: translateY(-50%); cursor: w-resize; }
.scene-editor__bounds-edge--right { top: 50%; right: -5px; transform: translateY(-50%); cursor: e-resize; }

/* 旋转控制点 - Wick风格 */
.scene-editor__bounds-rotate {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: rgba(100, 150, 255, 0.8);
    border: 2px solid #fff;
    border-radius: 50%;
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    z-index: 20;
    pointer-events: auto;
}

.scene-editor__bounds-rotate:hover {
    background: rgba(80, 130, 255, 1.0);
}

.scene-editor__bounds-rotate:active {
    cursor: grabbing;
}

/* 旋转连接线 */
.scene-editor__bounds-rotate-line {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 20px;
    background: rgba(100, 150, 255, 1.0);
    pointer-events: none;
}

/* ==================== 摄像头框/安全区 ==================== */
.scene-editor__camera-frame {
    position: absolute;
    border: 2px solid #f59e0b;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 50;
}

.scene-editor__camera-frame--editable {
    border-style: solid;
    pointer-events: auto;
    cursor: move;
}

/* 安全区遮罩 */
.scene-editor__safe-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 40;
}

/* 安全区中心锁图标 */
.scene-editor__safe-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(16, 185, 129, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 45;
}

/* ==================== 图层面板 ==================== */
.scene-editor__layers {
    width: 280px;
    background: #1e2128;
    border-left: 1px solid #3a3f4b;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow: hidden;
}

.scene-editor__layers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #3a3f4b;
    background: #252830;
}

.scene-editor__layers-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.scene-editor__layers-count {
    background: #3b82f6;
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
}

.scene-editor__layers-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.scene-editor__layer-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #252830;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: background 0.15s;
    border: 1px solid transparent;
}

.scene-editor__layer-item:hover {
    background: #2d323d;
}

.scene-editor__layer-item--selected {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
}

.scene-editor__layer-thumb {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: #1a1d24;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scene-editor__layer-thumb img,
.scene-editor__layer-thumb canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scene-editor__layer-info {
    flex: 1;
    min-width: 0;
}

.scene-editor__layer-name {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.scene-editor__layer-type {
    font-size: 11px;
    color: #9ca3af;
}

.scene-editor__layer-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.scene-editor__layer-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #9ca3af;
    border-radius: 4px;
    cursor: pointer;
}

.scene-editor__layer-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

/* 图层底部按钮 */
.scene-editor__layers-footer {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #3a3f4b;
}

.scene-editor__layers-footer button {
    flex: 1;
    padding: 8px;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}