/* 新设计文本生成页面样式 - 完全对标WPF客户端 */

/* 全局表格样式重置 - 确保表格正确显示 */
.text-generation-page table,
.text-generation-page .content-display table,
.text-generation-page .editable-content table,
.text-generation-page .generated-content table {
    display: table !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin: 15px 0 !important;
    border: 2px solid #999 !important; /* 使用更明显的边框 */
    background: white !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    visibility: visible !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
}

.text-generation-page table tr,
.text-generation-page .content-display table tr,
.text-generation-page .editable-content table tr,
.text-generation-page .generated-content table tr {
    display: table-row !important;
    visibility: visible !important;
}

.text-generation-page table th,
.text-generation-page table td,
.text-generation-page .content-display table th,
.text-generation-page .content-display table td,
.text-generation-page .editable-content table th,
.text-generation-page .editable-content table td,
.text-generation-page .generated-content table th,
.text-generation-page .generated-content table td {
    display: table-cell !important;
    padding: 10px 8px !important;
    border: 1px solid #999 !important; /* 使用更明显的边框颜色 */
    visibility: visible !important;
    white-space: normal !important; /* 仅表格单元格使用normal */
    word-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

/* 确保可编辑内容区域保持文本格式，但表格除外 */
.text-generation-page .editable-content {
    white-space: pre-wrap !important;
}

.text-generation-page .generated-content {
    white-space: pre-wrap !important;
}

.text-generation-page table th,
.text-generation-page .content-display table th,
.text-generation-page .editable-content table th,
.text-generation-page .generated-content table th {
    background: #f5f5f5 !important;
    font-weight: bold !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.text-generation-page table td,
.text-generation-page .content-display table td,
.text-generation-page .editable-content table td,
.text-generation-page .generated-content table td {
    text-align: left !important;
    vertical-align: top !important;
}

.text-generation-page table td:first-child,
.text-generation-page .content-display table td:first-child,
.text-generation-page .editable-content table td:first-child,
.text-generation-page .generated-content table td:first-child {
    text-align: center !important;
    font-weight: 500 !important;
}

.text-generation-page table tr:nth-child(even),
.text-generation-page .content-display table tr:nth-child(even),
.text-generation-page .editable-content table tr:nth-child(even),
.text-generation-page .generated-content table tr:nth-child(even) {
    background: #fafafa !important;
}

.text-generation-page table tr:hover,
.text-generation-page .content-display table tr:hover,
.text-generation-page .editable-content table tr:hover,
.text-generation-page .generated-content table tr:hover {
    background: #f0f0f0 !important;
}

.text-generation-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh; /* 固定为视口高度，避免页面整体出现滚动条 */
    overflow: hidden; /* 由内部区域自行处理滚动 */
    background: linear-gradient(180deg, #FFF8F0 0%, #F5F5F5 100%); /* 橙色主题背景 */
}

/* 设计文本生成的按钮使用蓝色对比色 */
.text-generation-page .el-button--primary {
    background: #2196F3;
    border-color: #2196F3;
}

.text-generation-page .el-button--primary:hover {
    background: #1976D2;
    border-color: #1976D2;
}

/* 左侧面板标题保持橙色 */
.text-generation-page .panel-header {
    color: #F57C00;
}

/* 右侧面板标题统一为黑色 */
.text-generation-page .form-title {
    color: #000000;
}

/* 右侧面板子标题统一为蓝色 */
.text-generation-page .form-subtitle {
    color: #2196F3;
}

/* 泊位标题为蓝色 */
.text-generation-page .berth-header {
    color: #2196F3;
}

/* 7.1.1章节特殊处理 - 所有文字统一为黑色 */
.text-generation-page .form-section[data-chapter="7.1.1"] .form-subtitle,
.text-generation-page .form-section[data-chapter="7.1.1"] .berth-header {
    color: #000000;
}

/* 输入框焦点状态 */
.text-generation-page .el-input__inner:focus,
.text-generation-page .el-textarea__inner:focus {
    border-color: #F57C00;
}

/* 标签样式 */
.text-generation-page .el-tag--success {
    background-color: #FFF3E0;
    border-color: #F57C00;
    color: #F57C00;
}

/* 链接颜色 */
.text-generation-page a {
    color: #F57C00;
}

/* 表单标签颜色 - 使用默认颜色 */
.text-generation-page .form-label {
    color: #303133;
    font-weight: normal;
}

/* 顶部标题栏 - 橙色主题（对应主界面的设计文本生成卡片）*/
.top-bar {
    height: 60px;
    background: linear-gradient(135deg, #F57C00 0%, #FF9800 100%);
    border-radius: 0 0 0 10px;
    border-bottom: 3px solid #E65100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    color: white;
    flex-shrink: 0; /* 防止被压缩 */
    box-shadow: 0 2px 8px rgba(245, 124, 0, 0.3);
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.top-bar-logo {
    height: 36px;
    width: auto;
}

.top-bar-app-title {
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.5px;
}

.top-bar-separator {
    height: 28px;
    width: 2px;
    background: rgba(255, 255, 255, 0.5);
}

.top-bar-icon {
    font-size: 20px;
}

.top-bar-title {
    font-size: 18px;
    font-weight: bold;
}

.top-bar-right .back-button {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
}

.top-bar-right .back-button:hover {
    background: #1976D2;
    border-color: #1976D2;
}

/* 菜单栏 */
.menu-bar {
    background: white;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 60px; /* 固定最小高度 */
    flex-shrink: 0; /* 防止被压缩 */
}

.menu-bar-left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.menu-bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.menu-label {
    font-weight: bold;
    font-size: 14px;
}

/* 按钮样式 */
.upload-button {
    background: #9C27B0;
    color: white;
    border: none;
    font-size: 12px;
}

.upload-button:hover {
    background: #7B1FA2;
}

.stop-button {
    background: #F44336;
    color: white;
    border: none;
    font-weight: bold;
    font-size: 12px;
}

.stop-button:hover {
    background: #E53935;
}

.generate-button {
    background: #4CAF50;
    color: white;
    border: none;
    font-weight: bold;
    font-size: 12px;
}

.generate-button:hover {
    background: #45A049;
}

.generate-button:disabled {
    background: #CCCCCC;
    color: #666666;
}

/* 文件预览标签 */
.file-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F3E5F5;
    border-radius: 4px;
    padding: 5px 10px;
    max-width: 250px;
}

.file-count {
    font-size: 11px;
    color: #7B1FA2;
}

.clear-files-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    min-width: 20px;
    background: #CE93D8;
    color: white;
    border: none;
    font-size: 10px;
}

/* 主要内容区域 - 三栏布局 */
.main-content-area {
    flex: 1;
    display: grid;
    grid-template-columns: 280px 1fr 350px;
    gap: 10px;
    padding: 20px;
    overflow: hidden;
    /* 不设置固定高度，使用flex: 1占满剩余空间 */
}

/* 左侧面板 - 章节树 */
.left-panel {
    background: white;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%; /* 占满父容器高度 */
}

.panel-header {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #303133;
}

.tree-container {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 10px;
}

.custom-tree-node {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding-right: 10px;
}

.custom-tree-node.generated {
    color: #F57C00;
    font-weight: bold;
}

.check-icon {
    color: #F57C00;
    font-weight: bold;
}

.add-chapter-button {
    width: 100%;
    background: #FF9800;
    color: white;
    border: none;
    font-size: 12px;
    height: 35px;
}

.add-chapter-button:hover {
    background: #FB8C00;
}

/* 中间面板 - 内容显示 */
.center-panel {
    background: white;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%; /* 占满父容器高度 */
}

.panel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-shrink: 0; /* 防止被压缩 */
}

.content-title {
    font-size: 18px;
    font-weight: bold;
    color: #303133;
}

.open-word-button {
    background: #4CAF50;
    color: white;
    border: none;
}

.content-display {
    flex: 1;
    overflow-y: auto;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding: 15px;
    background: white;
    font-size: 14px;
    line-height: 1.8;
    min-height: 400px; /* 设置最小高度，确保显示框足够大 */
    max-height: 100%; /* 不超过父容器 */
    position: relative; /* 为保存指示器提供定位上下文 */
}

/* 当内容可编辑时，调整content-display的样式 */
.content-display .editable-content {
    padding: 15px;
    border: none;
    border-radius: 0;
    background: transparent;
    margin: 0;
    white-space: pre-wrap !important; /* 保持文本格式，包括换行和空格 */
    line-height: 1.8;
}

/* 液态玻璃主题 - 覆盖content-display的白色背景 */
body.skin-glassmorphism .content-display,
body.skin-glassmorphism .text-generation-page .content-display,
body.skin-glassmorphism .text-generation-page .center-panel .content-display,
#app.skin-glassmorphism .content-display,
#app.skin-glassmorphism .text-generation-page .content-display,
#app.skin-glassmorphism .text-generation-page .center-panel .content-display {
    background: linear-gradient(135deg, 
        #171516 0%, 
        #394A3A 33.33%, 
        #26232E 66.66%, 
        #3A232A 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

.placeholder-text {
    color: #999999;
    font-style: italic;
    line-height: 1.8;
}

.placeholder-text p {
    margin: 8px 0;
}

.generated-content {
    color: #303133;
    white-space: pre-wrap;
    line-height: 1.8;
}

/* 生成/编辑区域段落首行缩进，两字宽 */
.generated-content p,
.editable-content p {
    text-indent: 2em;
    margin: 8px 0;
}

/* 居中的标题/图名/表名：去掉首行缩进，并加粗 */
.generated-content p[style*="text-align: center"],
.editable-content p[style*="text-align: center"] {
    text-indent: 0;
    font-weight: bold;
}

/* 确保生成内容中的表格不受white-space影响 */
.generated-content table {
    white-space: normal !important;
}

.editable-content {
    white-space: pre-wrap; /* 保持文本格式，包括换行和空格 */
    line-height: 1.8;
}

/* 确保可编辑内容中的表格不受white-space影响 */
.editable-content table {
    white-space: normal !important;
}

/* 强制表格显示 - 最高优先级规则 */
.text-generation-page .content-display table,
.text-generation-page .editable-content table,
.text-generation-page .generated-content table {
    display: table !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.text-generation-page .content-display table tr,
.text-generation-page .editable-content table tr,
.text-generation-page .generated-content table tr {
    display: table-row !important;
    visibility: visible !important;
}

.text-generation-page .content-display table th,
.text-generation-page .content-display table td,
.text-generation-page .editable-content table th,
.text-generation-page .editable-content table td,
.text-generation-page .generated-content table th,
.text-generation-page .generated-content table td {
    display: table-cell !important;
    visibility: visible !important;
}

/* 可编辑内容样式 */
.editable-content {
    outline: none;
    min-height: 400px;
    padding: 15px;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: all 0.3s;
    width: 100%;
    display: block;
}

/* 确保可编辑内容中的表格能正确显示 - 使用更高优先级 */
.editable-content table,
.content-display .editable-content table,
.text-generation-page .editable-content table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px 0 !important;
    border: 2px solid #999 !important; /* 使用更明显的边框 */
    background: white !important;
    table-layout: fixed !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
}

.editable-content table tr,
.content-display .editable-content table tr,
.text-generation-page .editable-content table tr {
    display: table-row !important;
    white-space: normal !important;
}

.editable-content table th,
.editable-content table td,
.content-display .editable-content table th,
.content-display .editable-content table td,
.text-generation-page .editable-content table th,
.text-generation-page .editable-content table td {
    display: table-cell !important;
    padding: 10px 8px !important;
    border: 1px solid #999 !important; /* 使用更明显的边框颜色 */
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
}

.editable-content table th,
.content-display .editable-content table th,
.text-generation-page .editable-content table th {
    background: #f5f5f5 !important;
    font-weight: bold !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.editable-content table td,
.content-display .editable-content table td,
.text-generation-page .editable-content table td {
    text-align: left !important;
    vertical-align: top !important;
}

.editable-content table td:first-child,
.content-display .editable-content table td:first-child,
.text-generation-page .editable-content table td:first-child {
    text-align: center !important;
    font-weight: 500 !important;
}

.content-display .editable-content:focus {
    outline: 2px solid #409EFF;
    outline-offset: -2px;
}

.content-display:hover {
    border-color: #C0C4CC;
}

/* 保存指示器 */
.saving-indicator,
.saved-indicator {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.saving-indicator {
    animation: pulse 1.5s ease-in-out infinite;
}

.saved-indicator {
    background: rgba(64, 158, 255, 0.9);
}

.saving-text,
.saved-text {
    display: inline-block;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* 液态玻璃主题下的可编辑内容 */
body.skin-glassmorphism .editable-content,
#app.skin-glassmorphism .editable-content {
    background: linear-gradient(135deg, 
        #171516 0%, 
        #394A3A 33.33%, 
        #26232E 66.66%, 
        #3A232A 100%) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

body.skin-glassmorphism .editable-content:focus,
#app.skin-glassmorphism .editable-content:focus {
    border-color: rgba(64, 158, 255, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

/* 生成内容中的表格样式 */
.generated-content table,
.editable-content table,
.content-display table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 15px 0 !important;
    border: 2px solid #999 !important; /* 使用更明显的边框 */
    background: white !important;
    table-layout: fixed !important; /* 固定表格布局，确保列宽一致 */
    word-wrap: break-word !important; /* 允许长文本换行 */
    display: table !important; /* 确保表格显示 */
    box-sizing: border-box !important;
}

.generated-content table th,
.generated-content table td,
.editable-content table th,
.editable-content table td,
.content-display table th,
.content-display table td {
    padding: 10px 8px !important;
    border: 1px solid #999 !important; /* 使用更明显的边框颜色 */
    vertical-align: top !important; /* 顶部对齐，适合多行文本 */
    word-wrap: break-word !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    display: table-cell !important; /* 确保单元格显示 */
    box-sizing: border-box !important;
}

.generated-content table th,
.editable-content table th,
.content-display table th {
    background: #f5f5f5 !important;
    font-weight: bold !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.generated-content table td,
.editable-content table td,
.content-display table td {
    text-align: left !important;
}

/* 第一列（通常是名称列）居中显示 */
.generated-content table td:first-child,
.editable-content table td:first-child,
.content-display table td:first-child {
    text-align: center !important;
    font-weight: 500 !important;
}

.generated-content table tr,
.editable-content table tr,
.content-display table tr {
    display: table-row !important; /* 确保行显示 */
}

.generated-content table tr:nth-child(even),
.editable-content table tr:nth-child(even),
.content-display table tr:nth-child(even) {
    background: #fafafa !important;
}

.generated-content table tr:hover,
.editable-content table tr:hover,
.content-display table tr:hover {
    background: #f0f0f0 !important;
}

/* 夜间主题 - 生成内容中的表格样式 */
body.skin-glassmorphism .generated-content table,
#app.skin-glassmorphism .generated-content table {
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.skin-glassmorphism .generated-content table th,
body.skin-glassmorphism .generated-content table td,
#app.skin-glassmorphism .generated-content table th,
#app.skin-glassmorphism .generated-content table td {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.9) !important;
    word-wrap: break-word;
    word-break: break-word;
    overflow-wrap: break-word;
}

body.skin-glassmorphism .generated-content table th,
#app.skin-glassmorphism .generated-content table th {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 1) !important;
}

body.skin-glassmorphism .generated-content table td:first-child,
body.skin-glassmorphism .editable-content table td:first-child,
body.skin-glassmorphism .content-display table td:first-child,
#app.skin-glassmorphism .generated-content table td:first-child,
#app.skin-glassmorphism .editable-content table td:first-child,
#app.skin-glassmorphism .content-display table td:first-child {
    text-align: center !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 1) !important;
}

body.skin-glassmorphism .generated-content table tr,
body.skin-glassmorphism .editable-content table tr,
body.skin-glassmorphism .content-display table tr,
#app.skin-glassmorphism .generated-content table tr,
#app.skin-glassmorphism .editable-content table tr,
#app.skin-glassmorphism .content-display table tr {
    display: table-row !important;
}

body.skin-glassmorphism .generated-content table tr:nth-child(even),
body.skin-glassmorphism .editable-content table tr:nth-child(even),
body.skin-glassmorphism .content-display table tr:nth-child(even),
#app.skin-glassmorphism .generated-content table tr:nth-child(even),
#app.skin-glassmorphism .editable-content table tr:nth-child(even),
#app.skin-glassmorphism .content-display table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03) !important;
}

body.skin-glassmorphism .generated-content table tr:hover,
body.skin-glassmorphism .editable-content table tr:hover,
body.skin-glassmorphism .content-display table tr:hover,
#app.skin-glassmorphism .generated-content table tr:hover,
#app.skin-glassmorphism .editable-content table tr:hover,
#app.skin-glassmorphism .content-display table tr:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

.generation-progress {
    margin-top: 10px;
    height: 4px;
    flex-shrink: 0; /* 防止被压缩 */
}

/* 右侧面板 - 项目信息 */
.right-panel {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    height: 100%; /* 占满父容器高度 */
}

.right-panel-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 20px 20px 20px 20px;
}

/* 表单样式 */
.form-section {
    margin-bottom: 20px;
}

.form-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #000000;
}

.form-subtitle {
    font-size: 14px;
    font-weight: bold;
    margin: 15px 0 10px 0;
    color: #2196F3;
}

.form-group {
    margin-bottom: 15px;
}

.form-label {
    display: block;
    font-size: 13px;
    margin-bottom: 5px;
    color: #303133;
}

/* 带单位的输入框 */
.input-with-unit {
    display: flex;
    align-items: center;
    gap: 5px;
}

.input-with-unit .el-input {
    flex: 1;
}

.input-with-unit .unit {
    font-size: 13px;
    color: #606266;
    white-space: nowrap;
}

/* 泊位项样式 */
.berth-item {
    background: #F5F5F5;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.berth-header {
    font-size: 13px;
    font-weight: bold;
    color: #2196F3;
    margin-bottom: 10px;
}

/* 按钮组 */
.button-group {
    display: flex;
    gap: 10px;
    margin: 15px 0;
}

.form-input {
    width: 100%;
}

.form-input .el-input__inner {
    height: 30px;
    font-size: 13px;
    border-color: #DDDDDD;
    background: #FAFAFA;
}

.form-textarea .el-textarea__inner {
    font-size: 13px;
    border-color: #DDDDDD;
    background: #FAFAFA;
    min-height: 100px;
}

/* 操作提示框 */
.hint-box {
    background: #E3F2FD;
    border-radius: 8px;
    padding: 15px;
    margin-top: auto;
}

.hint-title {
    font-size: 14px;
    font-weight: bold;
    color: #1976D2;
    margin-bottom: 8px;
}

.hint-content {
    font-size: 12px;
    color: #424242;
    line-height: 20px;
}

/* 底部状态栏 */
.bottom-status-bar {
    height: 50px;
    background: #E0E0E0;
    border-top: 1px solid #CCCCCC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    flex-shrink: 0; /* 防止被压缩，始终贴在页面底部 */
}

.status-left .status-text {
    font-size: 12px;
    color: #666666;
}

.status-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.generated-count,
.version {
    font-size: 12px;
    color: #666666;
}

/* Element Plus组件自定义 */
.text-generation-page .el-tree {
    background: transparent;
}

.text-generation-page .el-tree-node__content {
    height: 32px;
    font-size: 13px;
}

.text-generation-page .el-tree-node__content:hover {
    background-color: #F5F5F5;
}

.text-generation-page .el-tree-node.is-current > .el-tree-node__content {
    background-color: #E3F2FD;
    color: #2196F3;
}

/* 响应式调整 - 始终保持三栏布局 */
@media (max-width: 1400px) {
    .main-content-area {
        grid-template-columns: 240px 1fr 320px;
    }
}

@media (max-width: 1200px) {
    .main-content-area {
        grid-template-columns: 220px 1fr 300px;
    }
}

@media (max-width: 992px) {
    .main-content-area {
        grid-template-columns: 200px 1fr 280px;
    }
}

@media (max-width: 768px) {
    .main-content-area {
        grid-template-columns: 180px 1fr 260px;
        gap: 5px;
        padding: 10px;
    }
}

/* 滚动条样式 */
.tree-container::-webkit-scrollbar,
.content-display::-webkit-scrollbar,
.right-panel-scroll::-webkit-scrollbar {
    width: 6px;
}

.tree-container::-webkit-scrollbar-thumb,
.content-display::-webkit-scrollbar-thumb,
.right-panel-scroll::-webkit-scrollbar-thumb {
    background: #CCCCCC;
    border-radius: 3px;
}

.tree-container::-webkit-scrollbar-thumb:hover,
.content-display::-webkit-scrollbar-thumb:hover,
.right-panel-scroll::-webkit-scrollbar-thumb:hover {
    background: #999999;
}