/* --- 样式保持不变 --- */
        /* === Qulab SDM IDE Pro 优化样式 === */
:root { 
    --bg-dark: var(--ws-app-bg-dark, #1e1e1e); 
    --bg-sidebar: var(--ws-app-bg-sidebar, #252526); 
    --bg-header: var(--ws-app-bg-header, #333333); 
    --border-color: var(--ws-app-border, #3e3e3e); 
    --accent-color: var(--ws-app-accent, #3794ff); 
    --text-color: var(--ws-app-text, #d4d4d4); 
    --hover-bg: var(--ws-app-hover, #2a2d2e);
    --selected-bg: var(--ws-app-selected, #37373d);
    --input-bg: var(--ws-app-input, #3c3c3c); 
    --focus-border: var(--ws-app-focus, #3794ff);
    --ui-grad-a: color-mix(in srgb, var(--bg-dark) 88%, #000000 12%);
    --ui-grad-b: color-mix(in srgb, var(--bg-sidebar) 82%, #ffffff 18%);
    --ui-accent-soft: color-mix(in srgb, var(--accent-color) 24%, transparent);
}

.modal-wide-20 {
    max-width: 92vw;   /* 大约比 modal-xl 宽 ~20% */
}

/* =========================================
   === [优化 1] 全局暗色滚动条样式 ===
   ========================================= */
/* 滚动条整体宽度 */
::-webkit-scrollbar {
    width: 10px;  /* 纵向滚动条宽度 */
    height: 10px; /* 横向滚动条高度 */
}

/* 滚动条轨道 (背景) */
::-webkit-scrollbar-track {
    background: var(--theme-scroll-track, var(--bg-dark));
    border-radius: 0px;
}

/* 滚动条滑块 (也就是你能拖动的那块) */
::-webkit-scrollbar-thumb {
    background-color: var(--theme-scroll-thumb, var(--border-color));
    border-radius: 5px;        /* 圆角 */
    border: 2px solid var(--theme-scroll-track, var(--bg-dark));
}

/* 鼠标悬停在滑块上 */
::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--theme-scroll-thumb, #5a5a5a) 80%, #ffffff 20%);
}

/* 针对 Firefox 的兼容 (可选) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--theme-scroll-thumb, #424242) var(--theme-scroll-track, #1e1e1e);
}

/* index.html - <style> */

body { 
    height: 100vh;
    height: 100dvh;
    margin: 0;          /* <--- 新增：清除浏览器默认边距 */
    padding: 0;         /* <--- 新增 */
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
    background:
        radial-gradient(1200px 620px at 86% -15%, color-mix(in srgb, var(--accent-color) 18%, transparent), transparent 60%),
        radial-gradient(860px 500px at -8% 0%, color-mix(in srgb, var(--accent-color) 14%, transparent), transparent 62%),
        linear-gradient(160deg, color-mix(in srgb, var(--bg-dark) 88%, #000000 12%), var(--bg-dark) 52%, var(--bg-sidebar));
    color: var(--text-color); 
    font-family: 'Segoe UI', system-ui, Tahoma, Geneva, Verdana, sans-serif; 
    font-size: 14px;
    user-select: none; 
}

body.ai-app-fullscreen .navbar,
body.ai-app-fullscreen .status-bar,
body.ai-app-fullscreen #terminal-panel {
    display: none !important;
}
body.ai-app-fullscreen .main-container,
body.ai-app-fullscreen #main-layout {
    top: 0 !important;
    bottom: 0 !important;
}
.docker-builder-embed .navbar,
.docker-builder-embed .status-bar,
.docker-builder-embed #terminal-panel,
.docker-builder-embed .sidebar {
    display: none !important;
}
.docker-builder-embed #main-layout {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}
.docker-builder-embed .editor-area {
    width: 100% !important;
}
.docker-builder-embed #modal-docker .modal-dialog {
    max-width: 96vw !important;
}
.docker-builder-modal-body {
    height: min(72vh, 600px);
}
body.docker-builder-page {
    overflow: hidden !important;
    background: var(--wsx-bg-page, #e8f2fb) !important;
    background:
        radial-gradient(1000px 520px at 88% -12%, color-mix(in srgb, var(--wsx-accent) 12%, transparent), transparent 60%),
        radial-gradient(760px 420px at 10% 0%, color-mix(in srgb, var(--wsx-accent) 10%, transparent), transparent 62%),
        linear-gradient(155deg, var(--wsx-bg-page), color-mix(in srgb, var(--wsx-bg-page) 68%, var(--theme-bg-page-2, #dceaf8) 32%)) !important;
}
body.docker-builder-page #drop-zone-overlay,
body.docker-builder-page .navbar,
body.docker-builder-page .status-bar,
body.docker-builder-page #terminal-panel,
body.docker-builder-page .sidebar,
body.docker-builder-page .main-container,
body.docker-builder-page .ctx-menu,
body.docker-builder-page #modal-ai-workbench,
body.docker-builder-page #modal-fast-program,
body.docker-builder-page #modal-docker-edit,
body.docker-builder-page .toast-container {
    display: none !important;
}
body.docker-builder-page .modal-backdrop {
    display: none !important;
}
body.docker-builder-page #modal-docker {
    position: fixed !important;
    inset: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
}
body.docker-builder-page #modal-docker:not(.show) {
    display: none !important;
}
body.docker-builder-page #modal-docker .modal-dialog {
    margin: 0 !important;
    max-width: none !important;
    width: 100vw !important;
    height: 100dvh !important;
    padding: 0 !important;
}
body.docker-builder-page #modal-docker .modal-content {
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    background: var(--wsx-bg-panel, #f2f7fc) !important;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--wsx-bg-panel-2) 94%, #ffffff 6%),
            color-mix(in srgb, var(--wsx-bg-panel) 96%, #ffffff 4%)
        ) !important;
    box-shadow: none !important;
}
body.docker-builder-page #modal-docker [data-bs-dismiss="modal"] {
    display: none !important;
}
body.docker-builder-page #modal-docker .modal-header,
body.docker-builder-page #modal-docker .modal-footer {
    flex: 0 0 auto !important;
    background: var(--wsx-bg-panel-2, #f7fbff) !important;
    background: linear-gradient(180deg, color-mix(in srgb, var(--wsx-bg-panel-2) 96%, #ffffff 4%), var(--wsx-bg-panel-2)) !important;
    border-color: var(--wsx-border) !important;
}
body.docker-builder-page #modal-docker .docker-builder-modal-body {
    height: auto !important;
}
body.docker-builder-page #modal-docker .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    display: flex !important;
    overflow: hidden !important;
}
body.docker-builder-page #modal-docker .modal-body > .d-flex {
    display: grid !important;
    grid-template-columns: minmax(252px, 290px) minmax(440px, 1.14fr) minmax(380px, 1fr);
    grid-template-areas: "stats config preview";
    height: 100% !important;
    min-height: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}
body.docker-builder-page #modal-docker .modal-body .col-md-3,
body.docker-builder-page #modal-docker .modal-body .col-md-4,
body.docker-builder-page #modal-docker .modal-body .col-md-5 {
    min-height: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 1 1 auto !important;
    overflow: auto !important;
}
body.docker-builder-page #modal-docker .modal-body .col-md-3 {
    grid-area: stats;
}
body.docker-builder-page #modal-docker .modal-body .col-md-4 {
    grid-area: config;
}
body.docker-builder-page #modal-docker .modal-body .col-md-5 {
    grid-area: preview;
}
body.docker-builder-page #modal-docker .tab-content,
body.docker-builder-page #modal-docker .tab-pane,
body.docker-builder-page #modal-docker #docker-stats-list,
body.docker-builder-page #modal-docker #docker-preview {
    min-height: 0 !important;
}
body.docker-builder-page #modal-docker .bg-dark,
body.docker-builder-page #modal-docker .bg-black,
body.docker-builder-page #modal-docker .bg-secondary,
body.docker-builder-page #modal-docker [style*="background:#252526"],
body.docker-builder-page #modal-docker [style*="background: #252526"],
body.docker-builder-page #modal-docker [style*="background:#1f1f1f"],
body.docker-builder-page #modal-docker [style*="background: #1f1f1f"],
body.docker-builder-page #modal-docker [style*="background:#111"],
body.docker-builder-page #modal-docker [style*="background: #111"] {
    background: var(--wsx-bg-panel, #f2f7fc) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%) !important;
}
body.docker-builder-page #modal-docker .text-light,
body.docker-builder-page #modal-docker .text-white,
body.docker-builder-page #modal-docker .text-white-50 {
    color: var(--wsx-text) !important;
}
body.docker-builder-page #modal-docker .text-muted,
body.docker-builder-page #modal-docker .small.text-muted {
    color: var(--wsx-muted-strong) !important;
}
body.docker-builder-page #modal-docker .border-secondary,
body.docker-builder-page #modal-docker .vr,
body.docker-builder-page #modal-docker hr {
    border-color: var(--wsx-border) !important;
}
body.docker-builder-page #modal-docker .btn-dark,
body.docker-builder-page #modal-docker .btn-outline-secondary,
body.docker-builder-page #modal-docker .btn-outline-light,
body.docker-builder-page #modal-docker .btn-outline-info,
body.docker-builder-page #modal-docker .btn-outline-warning {
    background: var(--wsx-bg-panel-2, #fbfdff) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%) !important;
    color: var(--wsx-text) !important;
    border-color: var(--wsx-border) !important;
}
body.docker-builder-page #modal-docker .btn-dark:hover,
body.docker-builder-page #modal-docker .btn-outline-secondary:hover,
body.docker-builder-page #modal-docker .btn-outline-light:hover,
body.docker-builder-page #modal-docker .btn-outline-info:hover,
body.docker-builder-page #modal-docker .btn-outline-warning:hover {
    background: color-mix(in srgb, var(--wsx-accent) 14%, var(--wsx-bg-panel-2) 86%) !important;
    color: var(--wsx-text) !important;
    border-color: var(--wsx-border-strong) !important;
}
body.docker-builder-page #modal-docker .form-control,
body.docker-builder-page #modal-docker .form-select,
body.docker-builder-page #modal-docker .input-group-text,
body.docker-builder-page #modal-docker textarea,
body.docker-builder-page #modal-docker input[type="text"],
body.docker-builder-page #modal-docker input[type="number"],
body.docker-builder-page #modal-docker select {
    background: var(--wsx-bg-panel-2, #fbfdff) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 94%, #ffffff 6%) !important;
    color: var(--wsx-text) !important;
    border-color: var(--wsx-border) !important;
}
body.docker-builder-page #modal-docker .form-control:focus,
body.docker-builder-page #modal-docker .form-select:focus,
body.docker-builder-page #modal-docker textarea:focus,
body.docker-builder-page #modal-docker input:focus,
body.docker-builder-page #modal-docker select:focus {
    border-color: var(--wsx-accent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wsx-accent) 24%, transparent) !important;
}
body.docker-builder-page #modal-docker .list-group-item {
    background: transparent !important;
    color: var(--wsx-text-soft) !important;
    border-color: color-mix(in srgb, var(--wsx-border) 72%, transparent) !important;
}
body.docker-builder-page #modal-docker .nav-tabs-dark .nav-link {
    color: var(--wsx-muted) !important;
}
body.docker-builder-page #modal-docker .nav-tabs-dark .nav-link.active {
    color: var(--wsx-text) !important;
    background: var(--wsx-bg-panel, #f2f7fc) !important;
    background: color-mix(in srgb, var(--wsx-accent) 14%, var(--wsx-bg-panel) 86%) !important;
    border-color: var(--wsx-border) !important;
}
body.docker-builder-page #modal-docker #docker-preview,
body.docker-builder-page #modal-docker #docker-reqs-content,
body.docker-builder-page #modal-docker #docker-ignore-content,
body.docker-builder-page #modal-docker #docker-env-vars {
    background: var(--wsx-bg-panel-2, #fbfdff) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel-2) 92%, #ffffff 8%) !important;
    color: var(--wsx-text) !important;
}
body.docker-builder-page #modal-docker #dockerfile-toolbar,
body.docker-builder-page #modal-docker #docker-stats-list {
    background: var(--wsx-bg-panel, #f2f7fc) !important;
    background: color-mix(in srgb, var(--wsx-bg-panel) 94%, #ffffff 6%) !important;
}
body.docker-builder-page #modal-docker #preview-badge {
    background: var(--wsx-bg-panel-2, #fbfdff) !important;
    background: color-mix(in srgb, var(--wsx-accent) 20%, var(--wsx-bg-panel-2) 80%) !important;
    color: var(--wsx-text) !important;
}
@media (max-width: 1180px) {
    body.docker-builder-page #modal-docker .modal-body > .d-flex {
        grid-template-columns: minmax(244px, 282px) minmax(0, 1fr);
        grid-template-areas:
            "stats config"
            "stats preview";
    }
}
@media (max-width: 900px) {
    body.docker-builder-page #modal-docker .modal-body > .d-flex {
        grid-template-columns: 1fr;
        grid-template-areas:
            "stats"
            "config"
            "preview";
    }
}
.nav-ai-group .dropdown-menu {
    margin-top: 0;
}

/* 顶部导航栏美化 */
.navbar { 
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar) 92%, #ffffff 8%), var(--bg-sidebar)); 
    border-bottom: 1px solid var(--border-color); 
    height: 40px; 
    padding: 0 15px; 
    box-shadow: 0 4px 14px rgba(0,0,0,0.28);
    backdrop-filter: blur(10px);
}
.navbar-brand { 
    font-size: 15px; 
    font-weight: 600; 
    letter-spacing: 0.5px; 
    color: var(--theme-text, #fff) !important; 
}

.navbar .btn {
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

.navbar .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.28);
}

.ws-theme-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-color);
    font-size: 12px;
}
.ws-theme-inline i {
    color: var(--accent-color);
    font-size: 12px;
}
#ws-theme-select-workspace {
    min-width: 130px;
    max-width: 150px;
    border: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--bg-sidebar) 85%, #000000 15%);
    color: var(--text-color);
    padding: 2px 8px;
}
#ws-theme-select-workspace:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

/* 工具栏按钮 */
.btn-icon { 
    color: #aaa; 
    background: transparent; 
    border: none; 
    padding: 5px 10px; 
    border-radius: 4px; 
    transition: 0.2s; 
    position: relative; 
}
.btn-icon:hover, .btn-icon.active { 
    background: rgba(255,255,255,0.1); 
    color: white; 
}

/* 主容器 */
/* 修改 .main-container：使用绝对定位锁死上下边界 */
.main-container { 
    /* 核心修改：改为 fixed 或 absolute，脱离文档流 */
    position: fixed; 
    
    /* Top = 顶部导航栏高度 */
    top: 40px; 
    
    /* Bottom = 状态栏(25px) + 控制台收起高度(30px) = 55px */
    bottom: 55px; 
    
    left: 0; 
    right: 0;
    
    display: flex; 
    overflow: hidden; /* 禁止容器整体滚动 */
    background: transparent; 
    color: var(--text-color); 
    /* 增加动画过渡，配合控制台伸缩 */
    transition: bottom 0.3s ease; 
    z-index: 10; 
}

/* 找到 #main-layout 并修改 */
#main-layout {
    display: flex;
    width: 100%;
    position: fixed;
    
    /* 1. 修改 Top：避开 40px 的顶部导航栏 */
    top: 40px; 
    
    /* 2. 初始 Bottom：避开 25px 状态栏 + 30px 收起的控制台 = 55px */
    bottom: 55px; 
    
    left: 0;
    right: 0;
    transition: bottom 0.3s ease;/*  确保动画平滑 */
    overflow: hidden;
    z-index: 10;
}

/* 修改 .sidebar：去掉 overflow-y: auto，强制禁止主轴滚动 */
.sidebar { 
    width: 260px; 
    background: linear-gradient(180deg, rgba(23,34,51,0.95), rgba(18,28,43,0.94)); 
    border-right: 1px solid #233a52; 
    display: flex; 
    flex-direction: column; 
    transition: width 0.2s ease;
    height: 100%;      /* 强制高度撑满 #main-layout */
    overflow: hidden;  /* 禁止侧边栏本身滚动 */
}
.sidebar.collapsed { 
    width: 0; 
    border: none; 
    overflow: hidden; 
}
.sidebar-header { 
    padding: 10px; 
    font-size: 12px; 
    font-weight: bold; 
    text-transform: uppercase; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    letter-spacing: 1px; 
}

/* 确保侧边栏和编辑器各自处理滚动，而不是让 main-layout 滚动 */
.sidebar, .editor-container {
    height: 100%; /* 撑满 main-layout 的高度 */
    overflow-y: auto; /* 内容过多时显示滚动条 */
}

/* 修改 .file-tree：确保只有文件列表区域滚动 */
.file-tree { 
    flex: 1; 
    overflow-y: auto; /* 滚动条加在这里 */
    padding-top: 5px; 
    padding-bottom: 20px; /* 底部增加留白，防止最后一个文件贴边 */
    position: relative; 
    height: 0; /* 关键 Hack：配合 flex:1 让浏览器正确计算剩余高度 */
}

/* 树形项美化 */
.tree-item { 
    padding: 4px 12px; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    font-size: 13px; 
    color: #bbb; 
    border-left: 3px solid transparent; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    height: 30px; 
    transition: background 0.1s;
}
.tree-item:hover { 
    background: rgba(66, 95, 124, 0.32); 
    color: #fff; 
}
.tree-item.active, .tree-item.selected { 
    background: var(--selected-bg); 
    border-left-color: var(--accent-color); 
    color: #fff; 
}
.tree-item.cut-mode { 
    opacity: 0.6; 
    border-style: dashed; 
}
.tree-item i { 
    width: 20px; 
    text-align: center; 
    margin-right: 6px; 
    font-size: 14px; 
    flex-shrink: 0; 
}
.name-span { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

/* 内联输入框 */
.inline-input { 
    background: var(--input-bg); 
    color: white; 
    border: 1px solid var(--focus-border); 
    padding: 2px 5px; 
    font-size: 13px; 
    width: calc(100% - 20px); 
    margin-left: 10px; 
    height: 24px; 
    outline: none; 
    border-radius: 2px; 
}

/* 编辑器区域 */
.editor-area { 
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    background: var(--bg-dark); 
    position: relative; 
    min-width: 0; 
}
.tabs-header { 
    height: 35px; 
    background: var(--bg-sidebar); 
    display: flex; 
    overflow-x: auto; 
    border-bottom: 1px solid var(--bg-dark); 
}
.tab-item { 
    min-width: 120px; 
    max-width: 200px; 
    height: 100%; 
    background: #2d2d2d; 
    border-right: 1px solid var(--border-color); 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 0 10px; 
    font-size: 13px; 
    cursor: pointer; 
    color: #999; 
}
.tab-item.active { 
    background: var(--bg-dark); 
    color: #fff; 
    border-top: 2px solid var(--accent-color); 
}
.tab-close { 
    margin-left: 8px; 
    visibility: hidden; 
}
.tab-item:hover .tab-close { 
    visibility: visible; 
}
/* 1. 主内容区域：改为 Flex 行布局 */
.content-body {
    flex: 1;
    display: flex;       /* 开启 Flex 布局 */
    flex-direction: row; /* 水平排列 */
    overflow: hidden;
    position: relative;
    background: #1e1e1e;
}

/* 2. 编辑器窗格 (Pane) */

.editor-pane {
    flex: 1;             /* 默认平分宽度 */
    display: flex;
    flex-direction: column; 
    min-width: 0;        /* 防止内容溢出 */
    border-right: 1px solid #2b2b2b;
    position: relative;
    background: #1e1e1e;
}
.editor-pane:last-child { border-right: none; }

/* 1. 激活的窗格：增加明显的边框和微弱的背景提亮 */
.editor-pane.active-pane {
    box-shadow: inset 0 0 0 2px #3794ff; /* 边框变粗为 2px */
    z-index: 10;
    background-color: #1f1f22; /* 稍微提亮背景，与非激活区分 */
}

/* 2. 激活窗格的标签栏：颜色更深，与边框融合 */
.editor-pane.active-pane .pane-header-tabs {
    background-color: #1e1e1e; /* 激活时颜色更深 */
    border-bottom: 1px solid #3794ff; /* 底部线条也变蓝 */
}

/* 3. 非激活窗格：让它看起来稍微"暗淡"一点 */
/* 让非激活窗格的标签栏稍微暗淡，区分主次 */
.editor-pane:not(.active-pane) .pane-header-tabs {
    opacity: 0.6;
    background-color: #1a1a1a;
    border-bottom: 1px solid #333;
}
/* 鼠标悬停在非激活窗格的标签栏时，恢复高亮 */
.editor-pane:not(.active-pane) .pane-header-tabs:hover {
    opacity: 1;
}

/* 3. 独立的 Tab 栏容器 */
.pane-header-tabs {
    height: 35px;
    background: #252526;
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: 1px solid #2b2b2b;
    flex-shrink: 0; /* 防止被挤压 */
    position: relative;
    z-index: 20;
}

/* 4. 标签样式 (复用你原有的 tab-item，稍作调整) */
/* 修改 .editor-tab 样式 */
.editor-tab {
    height: 100%;
    padding: 0 10px;
    display: flex;
    align-items: center;
    color: #969696;
    background: linear-gradient(180deg, rgba(40,49,61,0.96), rgba(34,43,54,0.96));
    font-size: 13px;
    border-right: 1px solid #1e1e1e;
    cursor: pointer;
    
    /* 限制标签最大宽度，超出部分准备截断 */
    min-width: 80px;  
    max-width: 200px;
    user-select: none;
    position: relative; /* 确保子元素定位准确 */
}

/* tab title */
.editor-tab .tab-title {
    flex: 1;                  /* 占据剩余空间 */
    white-space: nowrap;      /* 不换行 */
    overflow: hidden;         /* 超出隐藏 */
    text-overflow: ellipsis;  /* 显示省略号 */
    min-width: 0;             /* Flex 布局中文字截断的关键属性 */
}

/* === 修改：确保图标不会被挤扁 === */
.editor-tab i {
    flex-shrink: 0;
    margin-right: 6px;
}

.editor-tab.active {
    background: linear-gradient(180deg, rgba(21,31,45,0.98), rgba(18,27,39,0.98));
    color: #fff;
    border-top: 2px solid var(--accent-color);
    box-shadow: inset 0 1px 0 rgba(115, 187, 242, 0.2);
}

.editor-tab .tab-dirty {
    margin-left: 5px;
    font-size: 12px;
    color: #ffc107;
    flex-shrink: 0;
}

.editor-tab .tab-close {
    margin-left: 6px;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #b7c7d8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: visible;
    transition: opacity .12s ease, background .12s ease;
    flex-shrink: 0;
}

.editor-tab:hover .tab-close,
.editor-tab.active .tab-close {
    opacity: 1;
}

.editor-tab .tab-close:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.editor-tab:hover {
    background: linear-gradient(180deg, rgba(49,62,78,0.98), rgba(41,53,68,0.98));
}

/* global hover tools panel for tab actions */
.tab-hover-panel {
    position: fixed;
    z-index: 2500;
    display: none;
    width: max-content;
    min-width: 116px;
    max-width: 260px;
    background: #202733;
    border: 1px solid #3b4a5f;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.45);
    padding: 5px 6px;
    pointer-events: auto;
}
.tab-hover-panel .tab-hover-name {
    font-size: 11px;
    color: #d5e6ff;
    line-height: 1.35;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 248px;
}
.tab-hover-panel .tab-hover-actions {
    display: flex;
    align-items: center;
    gap: 3px;
}
.tab-hover-panel .tab-hover-btn {
    width: 24px;
    height: 24px;
    border: 1px solid #4b5f78;
    border-radius: 5px;
    background: #162033;
    color: #cbe0ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 11px;
    cursor: pointer;
}
.tab-hover-panel .tab-hover-btn:hover {
    background: #2b4c79;
    border-color: #78a7e2;
    color: #ffffff;
}

/* 5. 窗格内容区 */
.pane-content {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex; 
    flex-direction: column;
}

/* Monaco 容器必须撑满 */
.monaco-full {
    width: 100%;
    height: 100%;
    display: block; /* 默认显示 */
}

/* 6. 通用容器显隐类 */
.view-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    display: none; /* 默认隐藏 */
}
.view-container.active {
    display: flex; /* 激活时显示 (注意 monaco 需要 block) */
}

/* Monaco 容器特殊处理 */
.monaco-host {
    width: 100%;
    height: 100%;
    display: none;
}
.monaco-host.active {
    display: block;
}

/* 空状态提示 */
.empty-state {
    display: none;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #555;
    flex-direction: column;
}

/* 修复图片预览居中 */
#preview-container {
    flex: 1; 
    display: flex; /* JS控制 */
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    background: #1e1e1e; 
    color: #ccc;
    height: 100%; /* 确保高度 */
}

#preview-container.hidden { display: none !important; }

/* === 修复后的 Dashboard 样式 === */
.dashboard-view { 
    padding: 20px; 
    overflow-y: auto; 
    height: 100%; 
    display: none; /* 默认必须隐藏！不要设为 flex */
    flex-direction: column; /* 保持垂直排列 */
}

.dashboard-view.hidden { display: none !important; }

/* 只有加上 active 类时才显示 */
.dashboard-view.active { 
    display: flex !important; /* 强制覆盖其他设置 */
}

/* =========================================
   === [优化 2] Dashboard 背景水印优化 ===
   ========================================= */
#dashboard-view,
#dashboard-view-1 {
    position: relative; /* 作为定位基准 */
}

.dashboard-watermark {
    position: absolute;   /* 绝对定位，脱离文档流，不占空间 */
    top: 50%;             /* 垂直居中 */
    left: 50%;            /* 水平居中 */
    transform: translate(-50%, -50%); /* 修正中心点偏移 */
    z-index: 0;           /* 放在最底层 */
    pointer-events: none; /* 让鼠标点击能穿透它，点到下面的空白处 */
    text-align: center;
    width: 100%;          /* 防止文字换行过窄 */
    opacity: 0.3;         /* 稍微降低透明度，更像背景 */
}

/* 确保文件网格在背景之上 */
#file-grid,
#file-grid-1 {
    position: relative;
    z-index: 1; 
    /* 只有当有文件时，文件会盖住背景；没文件时背景显示出来 */
}

.breadcrumb-item-custom { 
    cursor: pointer; 
    color: var(--accent-color); 
    margin: 0 5px; 
}
.grid-container { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 15px; 
    flex: 1; /* 占据剩余空间 */
}
.grid-item { 
    width: 100px; 
    height: 110px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    padding: 10px 5px; 
    border-radius: 6px; 
    cursor: pointer; 
    border: 1px solid transparent; 
    color: #ccc; 
    transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s;
}

.grid-item .name-span {
    display: block;          /* 必须变成块级元素才能设置宽度 */
    width: 100%;             /* 撑满父容器宽度 */
    margin-top: 5px;         /* 图标和文字的间距 */
    
    /* 核心截断逻辑 */
    white-space: nowrap;     /* 强制不换行 */
    overflow: hidden;        /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示 ... */
    
    text-align: center;      /* 文字居中 */
    font-size: 0.9em;        /* 稍微调小一点字体更精致 */
}

.grid-item:hover { 
    background: var(--hover-bg); 
    border-color: var(--border-color); 
}
.grid-item.selected { 
    background: var(--selected-bg); 
    border-color: var(--accent-color); 
    color: #fff; 
}
.grid-item i { 
    font-size: 36px; 
    margin-bottom: 10px; 
}
.grid-item span { 
    font-size: 12px; 
    text-align: center; 
    word-break: break-word; 
    line-height: 1.3; 
}
/* 确保面包屑和网格正常显示 */
.breadcrumb-nav {
    flex-shrink: 0; /* 防止被压缩 */
}

/* 1. 状态栏：强制固定在最底部，层级设为最高 */
.status-bar { 
    height: 25px !important; /* 增加高度以容纳双排布局 */
    background: var(--accent-color); 
    color: white; 
    display: flex; 
    align-items: center; 
    padding: 0 8px; /* 减少左右内边距 */
    font-size: 11px; 
    justify-content: space-between; 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: 2000;
    line-height: 1.2; /* 紧凑行高 */
    overflow: visible; /* allow record popup to escape status bar bounds */
}
.status-record-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 3200;
}
.status-record-pop {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    min-width: 280px;
    max-width: 360px;
    border: 1px solid #34516b;
    border-radius: 8px;
    background: #111a25;
    color: #dbe9f6;
    padding: 8px 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    line-height: 1.45;
    font-size: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
    pointer-events: none;
    white-space: normal;
    z-index: 3001;
}
.status-record-wrap.is-open .status-record-pop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}
.status-record-pop a {
    color: #9fd0ff;
    text-decoration: none;
}
.status-record-pop a:hover {
    color: #d6eeff;
    text-decoration: underline;
}
.status-record-icon {
    display: inline-block;
    width: 14px;
    text-align: center;
    margin-right: 4px;
    line-height: 1;
    transform: translateY(1px);
}
/* 监控列模块：上下结构 */
.monitor-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    min-width: 60px; /* 给每个列一个最小宽度 */
    padding: 2px 0; /* 上下留一点呼吸空间 */
}
/* 进度条轨道背景 */
.monitor-track {
    height: 6px; /* 条的高度 */
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    width: 100%;
    margin-bottom: 1px; /* 条和文字的间距 */
    overflow: hidden;
}
/* 进度条本身 */
.monitor-bar {
    height: 100%;
    transition: width 0.3s ease;
}
/* 数值文字 */
.monitor-val {
    font-size: 9px;
    line-height: 1;
    color: #ccc;
    text-align: right; /* 数值靠右对齐，整齐 */
    font-family: 'Consolas', monospace;
}
/* 分隔线 */
.status-divider {
    width: 1px;
    height: 16px;
    background: #444;
    margin: 0 10px;
}

/* 迷你进度条容器优化 */
.mini-bar-container {
    display: flex;
    align-items: center;
    height: 100%;
}

/* 终端面板 */
.terminal-panel { 
    height: 0; 
    background: var(--bg-dark); 
    border-top: 1px solid var(--border-color); 
    transition: height 0.2s ease; 
    display: flex; 
    flex-direction: column; 
}
.terminal-panel.open { 
    height: 200px; 
}
.term-header { 
    padding: 5px 15px; 
    background: var(--bg-header); 
    font-size: 12px; 
    display: flex; 
    justify-content: space-between; 
}
.term-content { 
    flex: 1; 
    padding: 10px; 
    font-family: 'Consolas', monospace; 
    font-size: 13px; 
    overflow-y: auto; 
    color: #ccc; 
}

/* 右键菜单美化 */
.ctx-menu { 
    position: fixed; 
    background: #252526; 
    border: 1px solid #454545; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); 
    z-index: 9999; 
    min-width: 180px; 
    display: none; 
    padding: 5px 0; 
    border-radius: 4px; 
}
.ctx-item { 
    padding: 6px 16px; 
    font-size: 13px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    color: #ccc; 
    align-items: center; 
}
.ctx-item:hover { 
    background: #094771; 
    color: white; 
}
.ctx-item i { 
    width: 20px; 
    text-align: center; 
    margin-right: 8px; 
    font-size: 14px; 
}
.ctx-divider { 
    height: 1px; 
    background: #3e3e3e; 
    margin: 4px 0; 
}

/* 模态框 */
.modal-content { 
    background: #252526; 
    color: #ccc; 
    border: 1px solid #454545; 
}
.form-control, .form-select { 
    background: #3c3c3c; 
    border: 1px solid #3c3c3c; 
    color: #eee; 
    font-size: 13px; 
}
.form-control:focus { 
    background: #444; 
    color: #fff; 
    border-color: var(--accent-color); 
    box-shadow: none; 
}
.btn-close { 
    filter: invert(1); 
}
.docker-preview-code { 
    background: #1e1e1e; 
    border: 1px solid #444; 
    color: #4ec9b0; 
    padding: 10px; 
    font-family: 'Consolas', monospace; 
    font-size: 12px; 
    height: 150px; 
    overflow-y: auto; 
    white-space: pre-wrap; 
}
/* 针对上帝入口的特殊样式 (通过 icon 类名匹配，或者后续 JS 逻辑) */
/* 这里我们简单处理，只要是 text-danger 的文件夹，加粗 */
.fa-globe.text-danger + .name-span {
    color: #ff6b6b;
    font-weight: bold;
    letter-spacing: 0.5px;
}
/* 特殊置顶文件夹：加粗，底部加分隔线 */
.tree-item[data-special="true"] {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid #3e3e3e;
    font-weight: 500;
}
.tree-item[data-special="true"]:last-of-type {
    margin-bottom: 8px; /* 与普通文件拉开距离 */
}

/* 拖拽上传覆盖层 */
#drop-zone-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 122, 204, 0.3);
    border: 4px dashed #007acc;
    z-index: 10000;
    pointer-events: none; /* 让事件穿透，方便逻辑处理，或者 block 处理 */
    display: none;
    justify-content: center; align-items: center;
    color: white; font-size: 24px; font-weight: bold;
    text-shadow: 0 0 10px rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
}
/* 2. 底部控制台面板：底部留出 25px 给状态栏 */
#terminal-panel {
    position: fixed; 
    /* bottom: 0; <--- 原代码 */
    bottom: 25px; /* <--- 修改：抬高 25px，刚好坐在状态栏上面 */
    left: 0; 
    width: 100%;
    height: 30px; /* 默认收起高度 */
    background: #1e1e1e; 
    border-top: 1px solid #333; 
    z-index: 1000;
    transition: height 0.3s ease; 
    display: flex; 
    flex-direction: column;
}
#terminal-panel.open { height: 320px; } /* 展开高度 */

.terminal-header {
    height: 30px; padding: 0 10px; background: #252526;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; font-size: 12px; color: #ccc; flex-shrink: 0;
}
.terminal-header:hover { background: #2a2d2e; }

/* === 三栏布局核心 === */
#terminal-body {
    flex: 1; display: flex; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
#terminal-panel.open #terminal-body { opacity: 1; pointer-events: auto; }

/* 左栏：任务列表 (绝对固定宽度) */
/* 1. 左侧栏容器：限制高度，禁止整体滚动 */
#term-col-left {
    width: 220px; 
    min-width: 220px; 
    max-width: 220px;
    border-right: 1px solid #333; 
    background: #252526;
    
    /* 核心修改 */
    display: flex; 
    flex-direction: column;
    height: 100%;       /* 强制撑满父容器高度 */
    overflow: hidden;   /* 防止 Header 跟着一起滚出去 */
}

/* 2. 任务列表容器：占据剩余空间，开启独立滚动 */
#task-list-container {
    /* 核心修改 */
    flex: 1;            /* 自动填满除去 Header 剩下的所有高度 */
    overflow-y: auto;   /* 内容超长时显示滚动条 */
    overflow-x: hidden; /* 禁止横向滚动 */
    min-height: 0;      /* Firefox/Flexbox 嵌套滚动的关键修复 */
    
    padding-bottom: 2px; /* 底部留一点空隙，防止最后一个任务贴边 */
}

/* 中栏：操作按钮 (绝对固定宽度) */
#term-col-center {
    width: 150px; min-width: 150px; max-width: 150px; /* 锁死宽度 */
    border-right: 1px solid #333; background: #1e1e1e;
    padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
}

/* 右栏：终端与日志 (自适应剩余空间) */
#term-col-right {
    flex: 1; min-width: 0; display: flex; flex-direction: column; background: #000; position: relative;
}

/* === 模式切换逻辑 === */
/* 默认模式：未选中任务时，隐藏中间栏，左侧显示列表，右侧显示系统日志 */
.system-log-mode #term-col-center { display: none !important; }

/* 列表项样式 */
.task-item {
    padding: 8px 12px; cursor: pointer; border-left: 3px solid transparent;
    font-size: 13px; color: #aaa; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2d2d2d;
}
.task-item:hover { background: #2a2d2e; color: #fff; }
.task-item.active { background: #37373d; border-left-color: #007acc; color: #fff; }

.task-status-dot { width: 8px; height: 8px; border-radius: 50%; }
.bg-running { background-color: #28a745; box-shadow: 0 0 5px #28a745; }
.bg-done { background-color: #6c757d; }
.bg-error { background-color: #dc3545; }
/* === 1. 呼吸灯动画 (让运行状态更明显) === */
@keyframes pulse-green {
    0% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7); }
    70% { box-shadow: 0 0 0 6px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}
.bg-running {
    background-color: #28a745;
    /* 呼吸特效 */
    animation: pulse-green 2s infinite; 
}

/* === 2. 中间栏网格布局 (解决太挤的问题) === */
.control-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 一行两列 */
    gap: 8px; /* 间距 */
}

/* 按钮微调 */
.btn-ctrl {
    font-size: 11px;
    padding: 6px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center; /* 居中对齐 */
    display: flex; align-items: center; justify-content: center;
}
.btn-ctrl i { margin-right: 4px; }

/* === 3. 系统监控选项样式 === */
.system-monitor-item {
    border-bottom: 1px solid #444;
    background: #2d2d30;
    color: #fff;
    font-weight: bold;
    font-style: italic;
}

/* === 修复控制台选择与右键复制 === */
.xterm-viewport, .xterm-rows, .xterm-screen {
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;
}
/* 确保选中内容的背景色清晰可见 */
.xterm-selection-layer {
    background-color: rgba(255, 255, 255, 0.3) !important; 
    z-index: 99 !important; /* 确保在最上层 */
}

#system-log-view,             /* <--- 新增: 系统日志容器 */
#system-log-view * {          /* <--- 新增: 系统日志内的文字 */
    user-select: text !important;
    -webkit-user-select: text !important;
    cursor: text !important;  /* 鼠标变成文本输入工字形 */
}

/* 2. 修复控制台显示不全的问题 */
/* 确保 xterm 的容器撑满剩余空间 */
#xterm-container {
    flex: 1;              /* 占据所有剩余高度 */
    width: 100%;
    height: 100%;         /* 强制撑满父容器 */
    overflow: hidden;     /* 防止双滚动条 */
    background: #000;
    padding: 5px;         /* 稍微给点内边距 */
    user-select: text !important;
    -webkit-user-select: text !important;
}
/* 确保父容器也是 Flex 且高度正确 */
#task-view-container {
    height: 100%;
    display: none;        /* JS控制显示 */
    flex-direction: column;
}
/* 任务列表里的资源小标签 */
.task-stats-badge {
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    background: #333;
    color: #ccc;
    font-family: 'Consolas', monospace;
    margin-left: 4px;
    display: none; /* 默认隐藏，有数据时显示 */
}
.task-stats-cpu { color: #f0ad4e; }
.task-stats-mem { color: #5bc0de; }

/* 统计数值的大字体样式 */
.stat-value {
    font-family: 'Consolas', 'Monaco', monospace;
    font-weight: bold;
    font-size: 14px;
}
/* 面板容器微调 */
#task-stats-panel {
    border: 1px solid #333;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

/* === Toast 通知位置优化 === */
.toast-container {
    /* 默认位置：避开底部状态栏(25px) + 收起的控制台(30px) + 留一点空隙 */
    bottom: 63px !important; 
    transition: bottom 0.3s ease; /* 添加平滑移动动画 */
    z-index: 2100 !important; /* 确保比状态栏(2000)还要高 */
}

/* 当控制台展开时，Toast 自动上移的样式类 */
.toast-container.moved-up {
    /* 展开高度(320px) + 状态栏(25px) + 空隙(18px) */
    bottom: 363px !important; 
}
/* =========================================
   === [新增] Docker 任务管理器 (资源管理器) 样式 ===
   ========================================= */
.task-toolbar { 
    padding: 6px 8px; 
    background: #1e1e1e; 
    border-bottom: 1px solid #333; 
    display: flex; 
    gap: 5px; 
    align-items: center; 
}
.task-search-input { 
    flex: 1; 
    background: #2d2d2d; 
    color: #fff; 
    border: 1px solid #444; 
    border-radius: 3px; 
    padding: 2px 6px; 
    font-size: 11px; 
    outline: none; 
    min-width: 0;
}
.task-search-input:focus { border-color: var(--accent-color); }
.task-tool-btn { 
    background: none; border: none; color: #888; 
    cursor: pointer; padding: 2px 5px; border-radius: 3px; 
    font-size: 12px; transition: 0.2s;
}
.task-tool-btn:hover { color: #fff; background: #333; }
.task-tool-btn.active { color: #f1c40f; background: rgba(241, 196, 15, 0.1); }

/* 文件夹头部 */
.task-folder-header { 
    padding: 6px 8px; 
    font-size: 11px; 
    font-weight: bold; 
    color: #888; 
    background: #252526; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    border-bottom: 1px solid #2d2d2d; 
    user-select: none;
}
.task-folder-header:hover { color: #ccc; background: #2a2d2e; }
.task-folder-icon { width: 16px; text-align: center; margin-right: 4px; transition: transform 0.2s; }
.task-folder-header.collapsed .task-folder-icon { transform: rotate(-90deg); }
.task-folder-content { display: block; }
.task-folder-content.collapsed { display: none; }

/* 任务项缩进与星标 */
.task-folder-content .task-item { padding-left: 24px; }
.task-star-icon { color: #f1c40f; margin-right: 5px; font-size: 10px; }