/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */

body {
    margin: 0px;
    overflow: hidden;
    user-select: none;
}

/* 主布局容器 - 使用 flexbox 自动分配空间 */
.main-layout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    z-index: 1;
    transition: all 0.3s ease;
    /* ✅ 设置背景色，与 Verge3D 场景背景一致，避免拖动时露出灰色 */
    background: #c3c3c3;
    /* 默认灰色，可根据实际场景背景调整 */
}

#v3d-container {
    flex: 1;
    /* 自动占据 stage-wrap 右侧的所有剩余空间 */
    height: 100%;
    position: relative;
    /* 添加定位上下文 */
    z-index: 1;
    /* 在 stage-wrap 下层 */
    /* transition: all 0.3s ease; */
    /* ✅ 注释掉transition，避免延迟 */
}

/* 面板切换拖动条 */
#panel-toggle-handle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 80px;
    background: rgba(67, 121, 179, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 10px 0 0 10px;
    cursor: col-resize;
    z-index: 10000;
    /* 提高z-index，确保在画布之上 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    pointer-events: auto;
    /* 确保可以接收鼠标事件 */
    user-select: none;
    /* 防止文本选择 */
}

#panel-toggle-handle:hover {
    background: rgba(67, 121, 179, 1);
    width: 35px;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.3);
}

#panel-toggle-handle:active {
    background: rgba(67, 121, 179, 1);
}

.handle-icon {
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    opacity: 0.9;
}

/* stage-wrap 隐藏状态 */
#stage-wrap.hidden {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    flex-shrink: 1 !important;
    flex-grow: 0 !important;
    flex-basis: 0 !important;
    overflow: hidden;
    opacity: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* v3d-container 隐藏状态 */
#v3d-container.hidden {
    width: 0 !important;
    min-width: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden;
    opacity: 0;
}

/* v3d-container 全屏状态（演示模式） */
/* 当 stage-wrap 隐藏时，v3d-container 应该占据全部空间 */
.main-layout:has(#stage-wrap.hidden) #v3d-container:not(.hidden) {
    flex: 1 1 100% !important;
    min-width: 100% !important;
    width: 100% !important;
}

/* ✅ 增强版：v3d-container 全屏模式类（更可靠，不依赖 :has 选择器） */
#v3d-container.fullscreen-mode {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    z-index: 1 !important;
    transition: none !important;
    /* 移除transition，立即生效 */
}

/* ✅ 确保在全屏模式下 stage-wrap 完全不占空间 */
.main-layout.v3d-fullscreen-active #stage-wrap {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* stage-wrap 全屏状态（100%宽度时的额外样式） */
#stage-wrap {
    /* transition: all 0.3s ease; */
    /* ✅ 注释掉transition */
}

#v3d-container {
    /* transition: all 0.3s ease; */
    /* ✅ 注释掉transition */
}

.fullscreen-button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
}

#Drawing_board {
    position: fixed;
    top: 50vh;
    left: 50vw;
    transform: translate(-50%, -50%);
}



/* removes tap blinking on ios devices */
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* =====================
   05 顶部状态容器样式（居中滚动版本）
   ===================== */

.Container-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* ✅ 注意：工具栏 z-index 是 9999，不会被遮挡 */
    pointer-events: none;
    display: flex;
    justify-content: center;
    /* 水平居中 */
    padding: 5px 0;
    /* 移除背景、阴影、边线 */
}

.Container-wrapper * {
    pointer-events: auto;
    /* ✅ 确保不影响工具栏的鼠标事件 */
}

/* 居中的滚动包裹层（约10个缩略图宽度，第11个时出现滑块） */
.container-scroll-wrapper {
    width: min(90vw, 950px);
    /* ✅ 调整宽度：约10个缩略图宽度（每个约120px），第11个时出现滑块 */
    max-height: 120px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    /* 滚动区域和按钮的间距 */
}

/* 滚动区域容器 */
.container-scroll-area {
    flex: 1;
    /* 占据剩余空间 */
    position: relative;
    overflow: hidden;
    /* ✅ 确保内容完整显示，避免半个缩略图 */
    display: flex;
}

/* 缩略图列表容器 */
.container-list {
    display: flex;
    gap: 1em;
    flex-wrap: nowrap;
    /* 不换行，启用水平滚动 */
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px;
    padding-top: 12px;
    /* 为顶部自定义滚动条留出空间 */
    cursor: grab;
    user-select: none;
    -webkit-overflow-scrolling: touch;
    /* iOS 平滑滚动 */
    align-items: center;
    /* 垂直居中对齐 */
    width: 100%;

    /* 隐藏原生滚动条 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */

    /* ✅ 确保滚动时不会出现半个缩略图 */
    scroll-snap-type: x proximity;
    /* 轻量级对齐，不强制 */

    /* ✅ 当内容未超出时，缩略图居中显示 */
    justify-content: center;
}

/* ✅ 当内容超出容器宽度时，改为左对齐以便滚动（通过 JS 动态添加类） */
.container-list.scrollable {
    justify-content: flex-start;
}

/* Webkit 隐藏原生滚动条 */
.container-list::-webkit-scrollbar {
    display: none;
}

.container-list:active {
    cursor: grabbing;
}

/* ========== 自定义滚动条样式 ========== */
.custom-scrollbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 70px;
    /* 为右侧添加按钮留出空间 */
    height: 7px;
    z-index: 10;
    padding: 0 10px;
}

.custom-scrollbar-track {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    position: relative;
}

.custom-scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #888;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    min-width: 30px;
    /* 最小滑块宽度 */
}

.custom-scrollbar-thumb:hover {
    background: #555;
}

.custom-scrollbar-thumb:active {
    background: #333;
}

/* ========== 添加按钮包装器（固定在右侧） ========== */
.add-btn-wrapper {
    flex-shrink: 0;
    width: 0;
    /* ✅ 初始宽度为 0，由 JS 动态控制 */
    height: 80px;
    /* ✅ 与滚动区域高度匹配 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    /* ✅ 允许按钮在宽度为 0 时也显示 */
    transition: width 0.2s ease;
    /* ✅ 平滑过渡 */
}

/* add-btn 在插件中创建后，会被移到 wrapper 中 */
/* .add-btn-wrapper .add-btn 保持原有样式，不需要额外定位 */


/* 移动端优化 */
@media (max-width: 768px) {
    .container-scroll-wrapper {
        width: 100vw;
        max-height: 100px;
    }

    .container-list {
        gap: 0.8em;
        padding: 8px;
        padding-top: 16px;
        padding-right: 60px;
        /* 移动端为小按钮留空间 */
    }

    .container-list .add-btn {
        right: 8px;
    }

    .custom-scrollbar {
        right: 60px;
        /* 移动端为小按钮留空间 */
    }
}

/* stage-wrap 画布容器 - 自适应画布宽度 */
#stage-wrap {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.25);
    width: auto;
    /* 自适应画布宽度，不占据额外空间 */
    height: calc(100% - 70px);
    /* 高度减去 70px，为底部留出空间 */
    flex-shrink: 0;
    /* 不缩小，保持画布固定尺寸 */
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    /* 确保在 v3d-container 上层 */
    outline: none;

    /* ✅ 裁剪超出的画布内容 */
    overflow: clip;
}

#konva-container {
    pointer-events: auto;
    position: relative;

    /* background: rgb(247 247 247); */
    width: auto;
    /* 改为 auto 以适应画布宽度 */
    height: auto;
    /* 改为 auto 以适应画布高度 */
    /* 移除 max-width 和 max-height 限制，让画布保持固定尺寸，不随窗口缩小 */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    /* 改为 visible，允许画布在窗口缩小时仍保持原尺寸 */

    /* ✅ 设置 transform-origin 为中心，确保缩放从中心开始 */
    transform-origin: center center;
    will-change: transform;
}

/* Konva Stage 容器 - 居中显示 */
#konva-container>div {
    display: flex !important;
    justify-content: center;
    align-items: center;
    /* 移除尺寸限制，保持画布固定大小，不随窗口缩放 */
}

/* Canvas 居中显示 - 保持固定尺寸，不随窗口缩放 */
#konva-container canvas {
    display: block;
    /* 移除 max-width 和 max-height，让画布保持固定像素尺寸 */
}

#status {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    z-index: 10000;
    /* ✅ 提高层级，确保在画布之上 */
    pointer-events: auto;
    /* ✅ 默认可交互，空格键按下时通过 JS 动态禁用 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

/* 缩放比例显示 */
#zoom-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.95);
    color: #333;
    padding: 0px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    z-index: 10000;
    /* ✅ 提高层级，确保在画布之上 */
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 重置视图按钮 */
.zoom-reset-btn {
    background: transparent;
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #2b8beb;
    flex-shrink: 0;
}

.zoom-reset-btn:hover {
    background: rgba(43, 139, 235, 0.1);
    transform: scale(1.1);
}

.zoom-reset-btn:active {
    transform: scale(0.95);
}

.zoom-reset-btn svg {
    width: 18px;
    height: 18px;
}

#zoom-percentage {
    min-width: 45px;
    text-align: center;
    color: #2b8beb;
    white-space: nowrap;
    font-weight: 700;
    pointer-events: none;
}

/* ✅ 空格键平移时的光标样式 */
#stage-wrap.grab-cursor,
#stage-wrap.grab-cursor * {
    cursor: grab !important;
}

#stage-wrap.grabbing-cursor,
#stage-wrap.grabbing-cursor * {
    cursor: grabbing !important;
}

/* ✅ 强制覆盖：status 和 zoom-indicator 保持正常光标样式 */
#stage-wrap.grab-cursor #status,
#stage-wrap.grabbing-cursor #status {
    cursor: default !important;
}

#stage-wrap.grab-cursor #zoom-indicator,
#stage-wrap.grabbing-cursor #zoom-indicator,
#stage-wrap.grab-cursor #zoom-indicator *,
#stage-wrap.grabbing-cursor #zoom-indicator * {
    cursor: pointer !important;
}

#stage-wrap.grab-cursor #zoom-percentage,
#stage-wrap.grabbing-cursor #zoom-percentage {
    cursor: default !important;
}

#zoom-indicator .zoom-icon {
    color: #2b8beb;
    flex-shrink: 0;
    pointer-events: none;
}

/* 重置视图按钮图标尺寸调整 */
#resetViewBtn svg {
    width: 23px;
    height: 23px;
}

/* 缩放按钮样式 */
.zoom-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #2b8beb;
    flex-shrink: 0;
    outline: none;
    padding: 0;
}

.zoom-btn:hover {
    background: rgba(43, 139, 235, 0.1);
    transform: scale(1.05);
}

.zoom-btn:active {
    transform: scale(0.95);
}

.zoom-btn:focus {
    outline: none;
}

.zoom-btn svg {
    width: 20px;
    height: 20px;
}

.zoom-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.zoom-btn:disabled:hover {
    background: transparent;
    transform: scale(1);
}

/* 锁按钮样式 */
.lock-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: rgba(158, 158, 158, 0.9);
    /* ✅ 默认解锁状态：灰色背景 */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    color: #fff;
    /* ✅ 解锁状态：白色图标 */
    z-index: 10000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    outline: none;
    padding: 0;
    opacity: 0.5;
    /* ✅ 默认状态：半透明显示（更清晰可见） */
    transition: opacity 2s ease 2s;
    /* ✅ 2秒延迟 + 2秒过渡时间，回到初始透明度 0.7 */
}

.lock-btn:hover {
    opacity: 1;
    /* ✅ 鼠标悬停：立即变清晰 */
    transition: opacity 0.2s ease 0s;
    /* ✅ 悬停时：立即变清晰，无延迟 */
    background: rgba(158, 158, 158, 1);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* ✅ 确保鼠标离开后，按钮本身也回到初始透明度 */
.lock-btn:not(:hover):not(:active) {
    opacity: 0.5 !important;
    transition: opacity 2s ease 2s !important;
}

.lock-btn:active {
    transform: scale(0.95);
}

.lock-btn:focus {
    outline: none;
}

.lock-btn svg {
    width: 20px;
    height: 20px;
    opacity: 0.5;
    /* ✅ 默认状态：半透明显示（更清晰可见） */
    transition: opacity 2s ease 2s;
    /* ✅ 鼠标离开后：2秒延迟 + 2秒过渡时间，回到初始透明度 0.7 */
}

.lock-btn:hover svg {
    opacity: 1;
    /* ✅ 鼠标悬停：立即变清晰 */
    transition: opacity 0.2s ease 0s;
    /* ✅ 悬停时：立即变清晰，无延迟 */
}

/* ✅ 确保点击后鼠标离开时，SVG 回到初始透明度 */
.lock-btn:active svg {
    opacity: 1;
    /* ✅ 点击时保持清晰（如果鼠标还在按钮上） */
    transition: opacity 0.2s ease 0s;
}

/* ✅ 确保鼠标离开后（无论从 hover 还是 active 状态），SVG 都回到初始透明度 */
.lock-btn:not(:hover):not(:active) svg {
    opacity: 0.5 !important;
    /* ✅ 最终状态：与初始透明度一致，更清晰可见 */
    transition: opacity 2s ease 2s !important;
}

/* ✅ 确保锁定状态下，鼠标离开后 SVG 也回到初始透明度 */
.lock-btn.locked:not(:hover):not(:active) svg {
    opacity: 0.5 !important;
    transition: opacity 2s ease 2s !important;
}

/* ✅ 确保解锁状态下，鼠标离开后 SVG 也回到初始透明度 */
.lock-btn:not(.locked):not(:hover):not(:active) svg {
    opacity: 0.5 !important;
    transition: opacity 2s ease 2s !important;
}



.status-container {
    position: relative;
    background: #fff;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #0000004d;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    /* ✅ 防止缩略图被压缩 */
    /* ✅ 滚动对齐，确保显示完整缩略图 */
    scroll-snap-align: start;
}

.status-container.active {
    background-color: #eaf8ff;
    box-shadow: 0 0 0 2px #2b8beb;
}

.status-header {
    background: #4379b3;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 0.35em 1em;
    border-radius: 5px;
    margin-bottom: 0.5em;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-header input {
    width: 90%;
    padding: 2px;
    font-size: 12px;
    border: none;
    border-radius: 3px;
    text-align: center;
}

.status-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;
}

.status-img img {
    border-radius: 50%;
    height: 50px;
    width: 50px;
    object-fit: contain;
    border: 2px solid #e9ecef;
}

.remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 20;
    /* ✅ 确保删除按钮在滑块上层 */
}

.status-container:hover .remove-btn {
    opacity: 1;
    visibility: visible;
}

.remove-btn:hover {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.add-btn {
    align-self: center;
    width: 50px;
    height: 50px;
    color: #2b8beb;
    border-radius: 50%;
    background-color: white;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    /* ✅ 防止按钮被压缩 */
    scroll-snap-align: start;
    /* ✅ 滚动对齐 */
}

.add-btn:hover {
    background-color: #eaf8ff;
    transform: scale(1.05);
}




/* =====================================================
   Canvas 编辑器样式（从 Abox_StyleSheet.css 移过来）
   ===================================================== */

/* 悬浮工具栏样式 */
.floating-toolbar {
    position: absolute;
    background: #2c2c2c;
    border-radius: 6px;
    padding: 4px;
    display: flex;
    gap: 2px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    pointer-events: auto;
}

.float-tool-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: white;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    padding: 0;
}

.float-tool-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.float-tool-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.float-tool-btn svg {
    pointer-events: none;
}

/* 右键菜单 */
.context-menu,
.submenu {
    position: absolute;
    background-color: #2f323a;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
    padding: 6px 0;
    width: 160px;
    display: none;
    z-index: 1000;
}

.context-menu-item {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    white-space: nowrap;
    color: #fff;
    font-size: 14px;
}

.context-menu-item:hover {
    background-color: #3e4451;
}

.context-menu-item svg {
    margin-right: 8px;
    width: 16px;
    height: 16px;
}

.submenu {
    left: 100%;
    top: 0;
}

.submenu .context-menu-item {
    justify-content: flex-start;
}

/* 裁切模式样式 */
.crop-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    pointer-events: none;
}

.crop-toolbar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #2c2c2c;
    border-radius: 8px;
    padding: 15px 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    z-index: 1001;
    min-width: 300px;
    pointer-events: auto;
}

.crop-hint {
    color: #fff;
    font-size: 13px;
    text-align: center;
    margin-bottom: 5px;
    opacity: 0.9;
}

.crop-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.crop-toolbar button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    flex: 1;
}

.crop-toolbar button.confirm {
    background: #2b8beb;
    color: white;
}

.crop-toolbar button.confirm:hover {
    background: #1a7ad9;
    transform: translateY(-1px);
}

.crop-toolbar button.cancel {
    background: #666;
    color: white;
}

.crop-toolbar button.cancel:hover {
    background: #555;
    transform: translateY(-1px);
}

/* =====================
   演示模式深色样式（缩略图容器）
   ===================== */

/* 深色模式下的缩略图容器 - 只针对Container-wrapper */
.Container-wrapper.show-mode-dark .status-container {
    background: rgba(40, 40, 40, 0.95) !important;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.Container-wrapper.show-mode-dark .status-container.active {
    background-color: rgba(0, 122, 255, 0.2) !important;
    box-shadow: 0 0 0 2px #007aff !important;
}

.Container-wrapper.show-mode-dark .status-container:hover {
    background: rgba(50, 50, 50, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* 深色模式下的状态头部 */
.Container-wrapper.show-mode-dark .status-header {
    background: rgba(67, 121, 179, 0.9) !important;
    color: #ffffff !important;
}

.Container-wrapper.show-mode-dark .status-header input {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.Container-wrapper.show-mode-dark .status-header input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* 深色模式下的状态图片 */
.Container-wrapper.show-mode-dark .status-img img {
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    background: rgba(30, 30, 30, 0.5) !important;
}

/* 深色模式下的删除按钮 */
.Container-wrapper.show-mode-dark .remove-btn {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

.Container-wrapper.show-mode-dark .remove-btn:hover {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

/* 深色模式下的添加按钮 */
.Container-wrapper.show-mode-dark .add-btn {
    background-color: rgba(40, 40, 40, 0.95) !important;
    color: #007aff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.Container-wrapper.show-mode-dark .add-btn:hover {
    background-color: rgba(0, 122, 255, 0.2) !important;
    border-color: #007aff !important;
    transform: scale(1.05);
}

/* 深色模式下的自定义滚动条 */
.Container-wrapper.show-mode-dark .custom-scrollbar-track {
    background: rgba(255, 255, 255, 0.1) !important;
}

.Container-wrapper.show-mode-dark .custom-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3) !important;
}

.Container-wrapper.show-mode-dark .custom-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5) !important;
}

.Container-wrapper.show-mode-dark .custom-scrollbar-thumb:active {
    background: rgba(255, 255, 255, 0.6) !important;
}

/* 深色模式下的滚动容器和包装器 - 不添加背景色 */