body {
    /* font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px; */

    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: white;
    min-height: 100vh;
    overflow-x: hidden;
    background: transparent;
}



.status-container {
    /* display: flex; */
    display: none;
    /* 初始隐藏 */
    gap: 10px;
    /* margin-bottom: 10px; */
    justify-content: space-between;
    /* 新增：水平居中 */
    align-items: center;
    /* 保持垂直居中 */
    width: 100%;
    /* 新增：确保容器宽度充满 */
    position: fixed;
    /* 新增：固定在顶部 */
    top: 10pxc;
    /* 新增：距离顶部0 */
    left: 0;
    /* 新增：距离左侧0 */
    /* background-color: white; 新增：白色背景 */
    padding: 10px 0;
    /* 新增：上下内边距 */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); 新增：轻微阴影 */
    z-index: 1000;
    /* 新增：确保在最上层 */
}

/* 添加状态栏变灰效果 */
.status-container.blurred {
    filter: grayscale(80%);
    opacity: 0.7;
    pointer-events: none;
    /* 防止点击状态栏元素 */
}

.popup-container.active {
    display: flex;
}


.status-boxes-container {
    display: flex;
    gap: 100px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.status-box {
    padding: 10px 15px;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 4px;
    min-width: 180px;
    text-align: center;
    transition: background-color 0.3s;
    /* 添加过渡效果 */
}

.status-box.highlight {
    background-color: orange;
    color: white;
}

.next-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
}

/* File loading buttons */
.button-container {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

button {
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #ddd;
    background-color: #f5f5f5;
    border-radius: 4px;
}

input[type="file"] {
    display: none;
}

/* Main content */
#main-content {
    display: none;
    margin-top: 0px;
}

/* 传输数据按钮样式 */
.transfer-button {
    padding: 10px 20px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px auto;
    /* 上下20px，左右自动（居中） */
    display: block;
    /* 使margin auto生效 */
    width: fit-content;
    /* 根据内容自动调整宽度 */
}

/* .transfer-button {
    padding: 10px 20px;
    background-color: #2196F3;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 20px;
} */

/* Visualization row */
/* 修改可视化行布局 */
.visualization-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    height: 400px;
    align-items: stretch;
    /* 确保所有子项等高 */
}

.data-container,
.blank-container,
.graph-container {
    flex: 1;
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
}

.data-container {
    min-width: 300px;
    overflow-x: auto;
}

.blank-container {
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: center;
}

.graph-container {
    min-width: 400px;
}

table {
    border-collapse: collapse;
    width: 100%;
    flex-grow: 1;
}

th,
td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

th {
    background-color: #f2f2f2;
}



#blank-svg {
    white-space: normal;
    /* 需要确保不是 pre 或 pre-wrap */
    overflow: visible;
}

/* Text display area */
.text-display {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.text-box {
    flex: 1;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 4px;
    min-height: 100px;
    background-color: #f9f9f9;
}

.text-box h3 {
    margin-top: 0;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}


.node text {
    font-size: 12px;
}

.link {
    stroke: #999;
    stroke-opacity: 0.6;
}

#infoBox {
    position: absolute;
    border: 1px solid rgba(92, 204, 210, 0.6); /* 使用更柔和的边框 */
    background-color: transparent; /* 背景透明 */
    color: white;
    /* background-color: rgba(92, 204, 210, 0.9); 淡蓝色背景色，透明度为 0.9 */
    padding: 15px; /* 增加内边距，避免内容太紧凑 */
    border-radius: 10px; /* 增加圆角，使其更加圆润 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); /* 更加柔和的阴影，增加深度感 */
    pointer-events: none; /* 防止 infoBox 干扰点击 */
    z-index: 100;
    display: none; /* 默认隐藏 */
}




.section-title {
    font-weight: bold;
    margin-bottom: 5px;
    color: white;
}

.section p {
    margin: 3px 0;
    color: white;
}

/* 新修改的 */
.data-container {
    min-width: 300px;
    overflow: hidden;
    /* 改为hidden */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.table-container {
    width: 100%;            /* 父容器宽度 */
    overflow-x: hidden;     /* 隐藏水平滚动条 */
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 确保填满父容器 */
    min-height: 0;
    /* 重要：允许内部滚动 */
}


/* 确保按钮可见 */
#toggle-mode {
    display: block;
    /* 确保不是 none */
    position: relative;
    /* 或 absolute/fixed 如果需要 */
    z-index: 10;
    /* 确保不被覆盖 */
    background-color: #4CAF50;
    /* 绿色背景 */
    color: white;
    /* 白色文字 */
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 10px 0;
    /* 添加外边距避免紧贴边界 */
}


/* 简单弹窗样式 */
.popup-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.popup-content {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 70%;
    max-height: 80vh;
    overflow: auto;
    position: relative;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

#json-display {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 4px;
    overflow: auto;
    max-height: 60vh;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* 模型展示区域样式 */
/* 模型展示区域样式 - 水平排列 */
.model-view {
    display: flex;
    /* flex-direction: row; 确保水平排列 */
    gap: 20px;
    padding: 0px;
    margin-top: 60px;
    margin-bottom: 19px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;
    /* 如果内容过多可以水平滚动 */
}

.model-section {
    flex: 1;
    min-width: 300px;
    /* 设置最小宽度防止挤压 */
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
}

.model-section h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}



.model-section-table {
    flex: 1;
    min-width: 300px;
    /* 设置最小宽度防止挤压 */
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
}

.model-section-table h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
}



/* 决策树容器样式 */
.decision-tree-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    min-height: 300px;
    background-color: white;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 日志容器样式 */
.log-container {
    flex: 1;
    background-color: #333;
    color: #fff;
    font-family: monospace;
    padding: 10px;
    overflow: auto;
    border-radius: 4px;
}

#log-content {
    margin: 0;
    white-space: pre-wrap;
}




/* 决策树图片样式 */
.decision-tree-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tree-download {
    margin-top: 10px;
    text-align: center;
}

.tree-download a {
    color: #2196F3;
    text-decoration: none;
}

.tree-download a:hover {
    text-decoration: underline;
}












/* 预测区域样式 */
.prediction-area {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}






/* 预测结果样式 */
.result-container {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
}

.predicted-label {
    color: #28a745;
    font-weight: bold;
    font-size: 1.1em;
}

.probabilities {
    margin-top: 10px;
    padding: 10px;
    background: white;
    border-radius: 3px;
}

.error {
    color: #dc3545;
    background: #f8d7da;
    padding: 10px;
    border-radius: 3px;
}

.data-container h3 {
    background-color: white;
    padding: 8px 15px;
    /* 添加一些内边距看起来更好 */
    margin: 0;
    /* 移除默认的外边距 */
    border: 1px solid #ddd;
    /* 可选：添加边框与表格风格一致 */
    border-bottom: none;
    /* 可选：移除底部边框与表格无缝连接 */
    border-radius: 4px 4px 0 0;
    /* 可选：圆角只在上部 */
}

#main-content {
    display: none;
    margin-top: 0px;
    background: transparent;
    /* Main content background transparent */
    color: white;
    /* Default text color white */
}

/* Tables should have white background */
#main-content table {
    background: white;
    color: black;
    /* Table text remains black for readability */
}

#main-content th,
#main-content td {
    background: white;
    color: black;
    border-color: #ddd;
    /* Keep original border color */
}

/* Table wrapper (scrollable container) */
/* #main-content .table-wrapper {
    background: white;
    border-color: #ddd;
} */

/* Headers inside tables (h3) should be white when outside, black inside */
#main-content h3 {
    color: white;
    /* Default white */
}

#main-content .table-container h3 {
    color: black;
    /* Black inside tables for contrast */
    background: white;
}

/* Containers (transparent background, white text) */
#main-content .data-container,
#main-content .blank-container,
#main-content .graph-container,
#main-content .text-box {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Buttons (semi-transparent white) */
#main-content .transfer-button,
#main-content #toggle-mode {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* SVG backgrounds (transparent) */
#main-content .blank-svg,
#main-content .graph-svg {
    background: transparent;
}

/* 通用边框样式 */


/* 表格边框更细 */
table {
    border-collapse: collapse;
}

th,
td {
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* 更浅的白色边框 */
}

/* 状态栏边框 */
.status-box {
    border: 1px solid white;
}

/* 按钮边框 */
button {
    border: 1px solid white;
    background: transparent;
    color: white;
}

/* 弹窗边框 */
.popup-content {
    border: 2px solid white;
}

/* 鼠标悬停效果增强可视性 */
button:hover,
.status-box:hover {
    border-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

/* 特殊容器边框调整 */
.visualization-row>div {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

.text-display>div {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 模型展示区域边框 */
.model-view>div {
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 表格容器边框
.table-wrapper {
    border: 1px solid rgba(255, 255, 255, 0.5);
} */

/* 模态框边框 */
.modal-content {
    border: 2px solid white;
}

/* 模型展示区域样式 */
.model-view {
    display: block;
    /* 改为block布局 */
    margin-top: 60px;
    width: 100%;
    box-sizing: border-box;
}



.model-section {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
    height: 100%;
    /* 继承父容器高度 */
}

.model-section h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    /* 防止标题被压缩 */
}

.model-section-table {
    flex: 1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #f9f9f9;
    height: 100%;
    /* 继承父容器高度 */
}

.model-section-table h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
    /* 防止标题被压缩 */
}


/* 决策树容器样式 */
.decision-tree-container {
    flex: 1;
    min-height: 0;
    /* 重要：允许内部滚动 */
    overflow: auto;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* 日志容器样式 */
.log-container {
    flex: 1;
    min-height: 0;
    /* 重要：允许内部滚动 */
    background-color: #333;
    color: #fff;
    font-family: monospace;
    padding: 10px;
    overflow: auto;
    border-radius: 4px;
}

#log-content {
    margin: 0;
    white-space: pre-wrap;
}

/* 表格容器样式 - 固定表头 */
/* 表格容器样式 - 可滚动表格 */
.table-wrapper {
    flex: 1;
    /* 在flex布局中占据剩余空间 */
    min-height: 0;
    /* 重要：允许内部滚动 */
    /* border: 1px solid #ddd; */
    /* overflow: auto; */
    /* 关键：允许整个表格滚动 */
}

#model-data-table th {
    position: sticky;
    top: 0;
}

/* 表格内容区域滚动 */
.table-content {
    flex: 1;
    overflow: auto;
}

/* 预测区域样式 */
.prediction-area {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
}

/* 决策树图片样式 */
.decision-tree-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}


.text-display {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    /* 缩小间隙 */
    margin-top: 15px;
}

.text-box {
    flex: 1;
    min-width: 280px;
    /* 稍微缩小最小宽度 */
    border: 1px solid #e0e0e0;
    /* 更浅的边框颜色 */
    padding: 12px;
    /* 减少内边距 */
    border-radius: 4px;
    /* 更小的圆角 */
    background-color: #fafafa;
    /* 更浅的背景 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    /* 添加轻微阴影 */
}










/* 状态栏的调试区域 */
.status-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 15px;
    /* 上下padding从15px减少到10px */
    flex-wrap: wrap;
    max-width: 1800px;
    margin: 0 auto 10px;
    /* 添加下边距10px替代原来的间距 */
    position: relative;
    width: 100%;
}

.status-box {
    background: rgba(10, 20, 30, 0.8);
    border: 2px solid #00f7ff;
    border-radius: 10px;
    /* 稍微减小圆角 */
    padding: 12px 25px;
    /* 大幅减少垂直内边距(原20px)，保持水平内边距 */
    margin: 0 70px;/* 左右间距为15px */
    width: 180px;
    min-width: 150px;
    text-align: center;
    /* 发光代码捏 */
    box-shadow: 0 0 15px rgba(0, 247, 255, 0.3);
    /* 发光代码捏 */
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    cursor: pointer;
    height: auto;
    /* 确保高度自适应内容 */
}

.status-box:hover {
    transform: translateY(-3px);
    /* 减少悬停上移距离 */
    /* 发光效果增强捏 */
    box-shadow: 0 0 25px rgba(0, 247, 255, 0.6);
    /* 发光效果增强捏 */
    background: rgba(20, 40, 60, 0.9);
}

.status-box.active {
    background: rgba(0, 100, 120, 0.8);
    /* 发光效果最强捏 */
    box-shadow: 0 0 25px rgba(0, 247, 255, 0.8);
    /* 发光效果最强捏 */
}

.status-title {
    font-size: 1.2rem;
    /* 稍微减小字体大小 */
    margin-bottom: 6px;
    /* 减少标题下边距 */
    color: #00f7ff;
    font-weight: 600;
    /* 文字发光捏 */
    text-shadow: 0 0 8px rgba(0, 247, 255, 0.5);
    /* 文字发光捏 */
}

.status-desc {
    font-size: 0.9rem;
    /* 减小描述字体大小 */
    opacity: 0.9;
    color: #a0f0ff;
    line-height: 1.3;
    /* 减小行高 */
    margin-top: 0;
    /* 移除可能的上边距 */
}

.connector {
    position: absolute;
    top: 40%; /* 调整 top 值，使连接线向上偏移 */
    transform: translateY(-50%) translateX(-5%); /* 保持居中对齐，但稍微左偏 */
    z-index: 1;
    height: 20px; /* 线的“粗细”，可调 */
    width: 60px; /* 默认宽度，JS 会覆盖 */
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
}


.connector::before {
    content: '>>'; /* 显示左箭头 */
    font-size: 100px;/* 可调箭头大小 */
    letter-spacing: -20px; /* 调整两个 < 的距离 */
    color: rgba(0, 247, 255, 0.2); /* 初始暗色 */
    text-shadow: none; /* 初始不发光 */
    transition: all 0.3s ease;
}

.connector.active::before {
    color: rgba(0, 247, 255, 1); /* 亮蓝色 */
    text-shadow: 0 0 6px rgba(0, 247, 255, 0.8); /* 发光效果 */
}


.connector.hover::before {
    color: rgba(0, 247, 255, 0.6); /* 比初始更亮 */
    text-shadow: 0 0 4px rgba(0, 247, 255, 0.5);
}




/* 状态栏的调试区域 */


/* 主区域的调试区域 */
.data-panel {
    display: flex;
    flex-direction: row;
    /* 明确设置为水平排列 */
    justify-content: space-between;
    /* 从space-around改为space-between更紧凑 */
    height: calc(100vh - 120px);
    /* 视口高度减去上下padding */
    align-items: stretch;
    /* 使所有面板高度一致 */
    padding: 10px 20px;
    /* 上下padding从40px减到10px，左右从40px减到20px */
    gap: 10px;
    /* 间隙从20px减到10px */
    box-sizing: border-box;
    /* 确保padding包含在高度内 */
    margin-top: 0;
    /* 确保没有额外上边距 */
}

.panel-block {
    position: relative;
    /* 确保父元素有相对定位 */
    /* background: #1a1a2e; */
    border-radius: 20px;
    width: 39%;
    /* 从30%增加到32%使间距更小 */
    /* 主面板发光效果 */
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    /* 主面板发光效果 */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 继承父容器高度 */
}
.panel-block1 {
    position: relative;
    /* 确保父元素有相对定位 */
    /* background: #1a1a2e; */
    border-radius: 20px;
    width: 39%;
    /* 从30%增加到32%使间距更小 */
    /* 主面板发光效果 */
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    /* 主面板发光效果 */
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 继承父容器高度 */
}

.panel-header {
    background: #0f2027;
    padding: 10px;
    font-weight: bold;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom: 1px solid #00f2ff;
    flex-shrink: 0;
    color: white;
}

/* 新增中方数据的小块样式 */
/* 新增中方数据的小块样式 */
.data-label {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    background: #0f2027;
    border-radius: 6px;
    border: 1px solid #00f2ff;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    line-height: 28px;              /* 行高，使文字在30px高的块中垂直居中 */
    color: white;
    width: 100px;                   /* 宽度100px */
    height: 30px;                   /* 高度30px */
}



.panel-section {
    padding: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    /* 隐藏溢出内容 */
    box-sizing: border-box;
}

/* aaaaaaaaaaaaaaaaaaa修改的地方aaaaaaaaaaaaaaaaaaa */
/* 表格区域 - 固定高度+滚动条 */
.panel-section.table-area {
    height: 60%;
    /* 占面板60%高度 */
    overflow-y: auto;
    /* 垂直滚动条 */
    background: rgba(0, 255, 255, 0.1);
}

/* SVG区域 - 固定高度 */
.panel-section.svg-area {
    height: 60%;
    /* 占面板60%高度 */
    background: rgba(0, 100, 255, 0.1);
}

/* 日志区域 - 固定高度+滚动条 */
.panel-section.log-area {
    position: absolute;
    /* 将元素绝对定位 */
    bottom: 0;
    /* 固定到父元素的底部 */
    left: 0;
    /* 从父元素的左侧开始 */
    width: 100%;
    /* 占满父元素的宽度 */

    height: 32%;
    /* 占剩余40%高度 */
    overflow-y: auto;
    /* 垂直滚动条 */
    background: rgba(255, 255, 255, 0.05);
}

/* aaaaaaaaaaaaaaaaaaa修改的地方aaaaaaaaaaaaaaaaaaa */

/* 主区域的调试区域 */
/* 确保容器有明确尺寸 */
/* #graph-svg,
#blank-svg {
    width: 100%;
    height: 60%; 
} */


/* 透明表格样式 */
#cn-data-table {
    width: 100%;
    height: 60%;
    /*继承父容器高度的60% */
    color: white;
    overflow: hidden;
    background-color: transparent;
}

.table-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: transparent;
}

.table-header {
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: transparent;
}

.table-header table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}

.table-body {
    flex-grow: 1;
    overflow-y: auto;
    background-color: transparent;
}

.table-body table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent;
}




/* 列宽设置 */
.avatar-col {
    width: 80px;
    min-width: 80px;
    background-color: transparent;
}

.id-col {
    width: 150px;
    min-width: 150px;
    background-color: transparent;
}

.label-col {
    width: 80px;
    min-width: 80px;
    background-color: transparent;
}

th,
td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    background-color: transparent;
}

th {
    font-weight: bold;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    margin: 0 auto;
}

.no-label {
    color: #ff6b6b;
    font-style: italic;
}

.no-data {
    padding: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    background-color: transparent;
}

.table-container {
    background: transparent !important;
    border-collapse: collapse;
}

.table-header,
.table-body {
    background: transparent !important;
}

table {
    border-collapse: collapse;
    background: transparent;
}

th,
td {
    background: transparent !important;
}

/* 鼠标悬停时表格行的效果 */
.table-container tr:hover {
    background-color: rgba(0, 255, 255, 0.2) !important; /* 轻微的蓝绿色背景色 */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); /* 为行添加轻微阴影 */
    transform: scale(0.98); /* 略微放大表格行 */
    transition: all 0.3s ease; /* 添加平滑过渡效果 */
}

/* 点击时表格行的效果 */
.table-container tr:active {
    background-color: rgba(0, 255, 255, 0.3) !important; /* 按下时颜色稍深 */
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.15); /* 强化阴影效果 */
    transform: scale(1); /* 点击时稍微缩小表格行 */
    transition: all 0.1s ease; /* 点击时的快速过渡 */
}



/* 新添加的 */
/* 全局滚动条样式 */
::-webkit-scrollbar {
    width: 10px; /* 垂直滚动条宽度 */
    height: 10px; /* 水平滚动条高度 */
    background-color: rgba(0, 0, 0, 0.1); /* 半透明背景 */
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
    background: transparent; /* 完全透明轨道 */
    border-radius: 5px;
    box-shadow: inset 0 0 5px rgba(0, 242, 255, 0.1); /* 发光内阴影 */
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, #00f7ff, #0066ff); /* 蓝绿色渐变 */
    border-radius: 5px;
    border: 1px solid rgba(0, 242, 255, 0.5); /* 发光边框 */
    box-shadow: 
        0 0 5px rgba(0, 247, 255, 0.8), /* 内发光 */
        inset 0 0 5px rgba(0, 0, 0, 0.2); /* 内阴影 */
    transition: all 0.3s ease;
}

/* 滚动条滑块悬停效果 */
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, #00ffea, #0055ff); /* 更亮的渐变 */
    box-shadow: 
        0 0 10px rgba(0, 255, 255, 1), /* 更强的发光 */
        inset 0 0 5px rgba(0, 0, 0, 0.3);
}

/* 滚动条滑块激活效果 */
::-webkit-scrollbar-thumb:active {
    background: linear-gradient(45deg, #00ffe0, #0044ff);
    box-shadow: 
        0 0 15px rgba(0, 255, 255, 1.2),
        inset 0 0 8px rgba(0, 0, 0, 0.4);
}

/* Firefox兼容性 */
* {
    scrollbar-width: thin;
    scrollbar-color: #00f7ff rgba(0, 0, 0, 0.1);
}


/* 日志区域主容器 */
/* 日志区域主容器 */
/* 日志区域主容器 */
/* 日志区域主容器 - 保持不变 */
.panel-section.log-area {
    position: relative;
    padding: 15px;
    border-radius: 4px;
    margin: 10px 0;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    color: white;
    text-align: left;
}

/* 日志标题样式 */
.log-title {
    position: absolute;
    top: 10px;
    left: 15px;
    font-weight: bold;
    font-size: 14px;
    color: white;
    background-color: rgba(64, 158, 255, 0.3);
    padding: 4px 15px;
    border-radius: 3px;
    box-shadow: 0 0 8px rgba(64, 158, 255, 0.5);
    text-align: center;
    min-width: 120px;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    z-index: 10;
}

/* 修改日志内容区域 - 增大字体 */
#system-log {
    position: relative;
    margin-top: 70px;
    padding: 5px 0;
    overflow-y: scroll;
    white-space: pre-wrap;
    font-size: 14px; /* 从12px增大到14px */
    line-height: 1.5;
    color: white;
    background-color: transparent;
    text-align: left;
    height: 200px;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 158, 255, 0.5) transparent;
    margin-left: 0;
    padding-left: 5px;
    width: calc(100% - 5px);
}

#rus-log, #cn-log {
    position: relative;
    margin-top: 70px;
    padding: 5px 0; 
    overflow-y: scroll;
    white-space: pre-wrap;
    font-size: 14px; 
    line-height: 1.5;
    color: white;
    background-color: transparent;
    text-align: left;
    height: 200px;
    scrollbar-width: thin;
    scrollbar-color: rgba(64, 158, 255, 0.5) transparent;
    margin-left: 0;
    padding-left: 5px;
    width: calc(100% - 5px); 
}

/* 滚动条样式保持不变 */
/* #rus-log, #cn-log, #system-log::-webkit-scrollbar {
    width: 6px;
    height: 6px;
} */

#rus-log, #cn-log, #system-log::-webkit-scrollbar-thumb {
    background-color: rgba(64, 158, 255, 0.5);
    border-radius: 3px;
}

#rus-log, #cn-log, #system-log::-webkit-scrollbar-track {
    background-color: transparent;
}



/* 切换按钮 */
/* 切换按钮样式 */
.svg-container {
    position: relative;
}

.toggle-container {
    position: relative;
    left: -5px;
    bottom: 30px;
    z-index: 10;
}

.toggle-label {
    color: white;
    font-size: 14px;
    margin-left: 5px;
}

.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    background-color: #ff9999; /* 中方颜色 */
    transition: .4s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .toggle-slider {
    background-color: #9999ff; /* 俄方颜色 */
}

input:checked + .toggle-slider + .toggle-label {
    display: none;
}

input:checked + .toggle-slider:before {
    transform: translateX(26px);
}

input:not(:checked) + .toggle-slider + .toggle-label {
    display: inline;
}


.toggle-switch {
    margin: 0 10px;
}

.chinese-glow .toggle-label:first-child {
    color: #ff9999;
    text-shadow: 0 0 5px rgba(255, 153, 153, 0.7);
}

.russian-glow .toggle-label:last-child {
    color: #9999ff;
    text-shadow: 0 0 5px rgba(153, 153, 255, 0.7);
}











/* 预测css */
/* 模态框基础样式 */
.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.5); */
    backdrop-filter: blur(5px);
}

.modal-content {
    position: relative;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    margin: 5% auto;
    padding: 30px;
    width: 70%;
    min-height: 60vh;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    display: flex;
    overflow: hidden;
}

/* 关闭按钮样式 */
.close-modal {
    position: absolute;
    right: 25px;
    top: 15px;
    font-size: 28px;
    font-weight: bold;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s;
}

.close-modal:hover {
    color: #1f2937;
    transform: scale(1.2);
}

/* 标题样式 */
.modal-content h3 {
    text-align: center;
    color: #374151;
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 600;
    width: 100%;
}

/* 表单容器样式 */
#data-input-form {
    width: 50%;
    padding-right: 30px;
    border-right: 1px solid #d1d5db;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    /* color: #4b5563; */
    color: white;
    font-size: 14px;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #fff;
    font-size: 14px;
    color: #374151;
    transition: all 0.3s;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* 按钮样式 */
#data-input-form button[type="submit"] {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    margin-top: 10px;
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#data-input-form button[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

#data-input-form button[type="submit"]:active {
    transform: translateY(0);
}



/* 响应式设计 */
@media (max-width: 992px) {
    .modal-content {
        width: 85%;
        flex-direction: column;
    }
    
    #data-input-form,
    #prediction-output {
        width: 100%;
        padding: 0;
        border: none;
    }
    
    #prediction-output {
        padding-top: 30px;
        margin-top: 30px;
        border-top: 1px solid #d1d5db;
    }
}



/* 科幻风格基础变量 - 透明版本 */
:root {
    --sci-fi-primary: #00f0ff;
    --sci-fi-secondary: #ff00e6;
    --sci-fi-accent: #00ff88;
    --sci-fi-text: #e0f8ff;
    --sci-fi-border: rgba(0, 240, 255, 0.3);
  }
  
  /* 模型视图容器 - 透明背景 */
  .model-view {
      display: flex;
      gap: 10px;
      padding: 0px;
      margin-top: -20px;
      width: 100%;
      box-sizing: border-box;
      overflow-x: auto;
      background: transparent;
      min-height: 790px; /* 增加整体容器的最小高度 */
  }
  
  /* 水平排列的三个部分 - 透明背景 */
  .horizontal-sections {
      display: flex;
      gap: 20px;
      /* margin-bottom: 20px; */
      height: 680px; /* 增加整体容器的最小高度 */
      background: transparent;
  }
  
  /* 模型部分 - 透明背景科幻风格 */
  .model-section-table {
      flex: 1;
      min-width: 300px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--sci-fi-border);
      border-radius: 2px;
      padding: 10px;
      background: transparent;
      backdrop-filter: blur(2px);
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
  }

  .model-section {
      flex: 1;
      min-width: 300px;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--sci-fi-border);
      border-radius: 2px;
      padding: 10px;
      background: transparent;
      backdrop-filter: blur(2px);
      box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
  }

  .model-section-tree {
    flex: 7;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--sci-fi-border);
    border-radius: 2px;
    padding: 10px;
    background: transparent;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
    max-height: 100%;  /* 确保容器的内容不超出 */
    overflow: hidden;  /* 禁止滚动条 */
    /* height: 500px; 设置固定高度 */
}
.model-section-tree h2 {
    margin-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sci-fi-primary);
    color: var(--sci-fi-primary);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 18px;
}
  
  .model-section h2 {
      margin-top: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--sci-fi-primary);
      color: var(--sci-fi-primary);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 18px;
  }

  .model-section-table h2 {
      margin-top: 0;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--sci-fi-primary);
      color: var(--sci-fi-primary);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 18px;
  }
  
  /* 决策树容器 - 透明科幻风格 */
  .decision-tree-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    background: transparent;
    padding: 10px;
    border: 1px solid var(--sci-fi-border);
    border-radius: 2px;
    max-height: 100%;
}

  /* 日志容器 - 透明科幻风格 */
  .log-container {
      flex: 1;
      background: rgba(15, 15, 25, 0.7);
      color: var(--sci-fi-accent);
      font-family: 'Courier New', monospace;
      padding: 10px;
      overflow: auto;
      border-radius: 2px;
      border: 1px solid var(--sci-fi-border);
      box-shadow: inset 0 0 10px rgba(0, 240, 255, 0.1);
  }
  
  #log-content {
      margin: 0;
      white-space: pre-wrap;
      font-size: 13px;
  }
  
  /* 表格容器 - 完全透明 */
.table-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
    border: 1px solid var(--sci-fi-border); /* 科幻边框 */
    background: transparent; /* 完全透明 */
}

#model-data-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--sci-fi-text); /* 白色文字 */
    background: transparent; /* 表格完全透明 */
}

/* 表头 - 透明但有科幻边框 */
#model-data-table th {
    color: var(--sci-fi-primary); /* 科幻风格的主色(可能是青色/蓝色) */
    font-weight: 600;
    background: transparent; /* 完全透明 */
    position: sticky;
    top: 0;
    backdrop-filter: blur(2px); /* 轻微毛玻璃效果 */
}

/* 单元格 - 透明但保留边框 */
#model-data-table th,
#model-data-table td {
    border: 1px solid var(--sci-fi-border); /* 霓虹边框 */
    padding: 8px;
    text-align: left;
    background: transparent; /* 单元格也完全透明 */
}

/* 悬停效果 - 极淡的高亮 */
#model-data-table tbody tr:hover {
    background: rgba(0, 240, 255, 0.08); /* 非常淡的悬停效果 */
}

】


  /* 决策树图片样式 */
  .decision-tree-container img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      filter: drop-shadow(0 0 5px var(--sci-fi-primary));
      max-height: 100%;  /* 确保容器的内容不超出 */
      overflow: hidden;  /* 禁止滚动条 */
  }
  
  /* 预测区域 - 透明科幻风格 */
  .prediction-area {
      margin-top: 20px;
      padding: 20px;
      border: none; /* 移除边框 */
      background: rgba(15, 15, 25, 0.5);
      backdrop-filter: blur(2px);
  }
  
  /* 科幻风格按钮 */
#input-data-btn {
    margin-top: 30px; /*新增上边距*/
    margin-left: 750px; /*新增：向右移动按钮*/
    padding: 12px 30px; /* 增大按钮的内边距，变大按钮 */
    background: linear-gradient(90deg, var(--sci-fi-primary) 0%, var(--sci-fi-accent) 100%);
    color: #050510;
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 18px; /* 增大字体大小 */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s;
    box-shadow: 0 0 15px var(--sci-fi-primary);
    position: relative;
    overflow: hidden;
}

/* 鼠标悬停时 */
#input-data-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px var(--sci-fi-primary);
}

/* 鼠标点击时 */
#input-data-btn:active {
    transform: translateY(0);
}

/* 按钮后部的发光效果 */
#input-data-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

/* 鼠标悬停时发光效果 */
#input-data-btn:hover::after {
    left: 100%;
}

  
  /* 响应式设计 */
  @media (max-width: 992px) {
      .horizontal-sections {
          flex-direction: column;
      }
      
      .model-section {
          min-width: 100%;
      }

      .model-section-table {
          min-width: 100%;
      }

  }



/* 图传播 */

/* 图传播 */
/* 基础节点样式 */
/* 基础节点样式 */
.node {
    fill: rgba(0, 51, 160, 0.9);
    r: 8;
}

/* 预测节点样式 */
.node.predicted {
    fill: orange;
    r: 10;
    filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.6));  /* 修改为橙色 */
}

/* 波纹动画样式 */
/* 预测节点的特殊样式 */
#predicted-node {
    cursor: pointer;
    filter: drop-shadow(0 0 8px rgba(255, 165, 0, 0.6));  /* 修改为橙色 */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* 金属光泽渐变 */
    fill: radial-gradient(circle at 30% 30%,
            #ffa500 20%,   /* 修改为橙色 */
            #ff8c00 40%,   /* 修改为橙色 */
            #ff7f00 80%);  /* 修改为橙色 */
    
    /* 脉冲动画 */
    animation: pulse 2s infinite;
}

/* 悬浮效果 */
#predicted-node:hover {
    transform: scale(1.2);
    filter: drop-shadow(0 0 12px rgba(255, 165, 0, 0.8));  /* 修改为橙色 */
    animation: hover-glow 1.5s infinite;
}

/* 点击效果 */
#predicted-node:active {
    transform: scale(0.9);
    filter: drop-shadow(0 0 4px rgba(255, 165, 0, 0.4));  /* 修改为橙色 */
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        stroke-width: 0;
        stroke-opacity: 1;
    }

    100% {
        stroke-width: 20;
        stroke-opacity: 0;
        stroke: #ffa500;  /* 修改为橙色 */
    }
}

/* 悬浮光效动画 */
@keyframes hover-glow {
    0% {
        box-shadow: 0 0 10px 0px rgba(255, 165, 0, 0.8),  /* 修改为橙色 */
            inset 0 0 20px 2px rgba(255, 140, 0, 0.6);  /* 修改为橙色 */
    }

    50% {
        box-shadow: 0 0 20px 8px rgba(255, 165, 0, 0.9),  /* 修改为橙色 */
            inset 0 0 30px 4px rgba(255, 165, 0, 0.8);  /* 修改为橙色 */
    }

    100% {
        box-shadow: 0 0 10px 0px rgba(255, 165, 0, 0.8),  /* 修改为橙色 */
            inset 0 0 20px 2px rgba(255, 140, 0, 0.6);  /* 修改为橙色 */
    }
}

/* 添加环绕光点 */
#predicted-node::after {
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    border-radius: 50%;
    background: radial-gradient(circle,
            rgba(255, 165, 0, 0.4) 0%,  /* 修改为橙色 */
            rgba(255, 140, 0, 0.2) 50%,  /* 修改为橙色 */
            transparent 70%);
    animation: orbital 3s linear infinite;
    pointer-events: none;
}


@keyframes orbital {
    from {
        transform: rotate(0deg) translateX(25px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateX(25px) rotate(-360deg);
    }
}






/* 光束动画 */
/* 光束动画 */
#cn-data-table tr.highlight-beam {
    position: relative;
    overflow: hidden;  
}

#cn-data-table tr.highlight-beam::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(11, 24, 28, 0) 0%,
        rgba(173, 216, 230, 0.6) 50%,
        rgba(173, 216, 230, 0) 100%);
    animation: beam-sweep 1s ease-in-out;
    pointer-events: none;
    box-sizing: border-box;
}



@keyframes beam-sweep {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0%);
    }
}



/* 呼吸动画（浅蓝色渐变闪烁） */
#cn-data-table tr.breathing-effect {
    animation: breathing 2s infinite ease-in-out;
    background-color: rgba(173, 216, 230, 0.1);
    /* 初始浅蓝底色 */
}

@keyframes breathing {

    0%,
    100% {
        background-color: rgba(173, 216, 230, 0.1);
        /* 淡蓝色 */
    }

    50% {
        background-color: rgba(173, 216, 230, 0.3);
        /* 稍深的蓝色 */
    }
}


/* 图传播 */

/* 过渡的效果 */
/* 设置父容器的 3D 变换 */

/* 为 SVG 添加过渡效果 */
#blank-svg {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;  /* 设置透明度和变换的过渡 */
    opacity: 1;  /* 默认状态为完全不透明 */
}

/* 当切换时改变透明度 */
#blank-svg.fade-out {
    opacity: 0;  /* 过渡时变为透明 */
}


/* 添加过渡效果 */


/* 表格的头像 */
.avatar-wrapper {
    background-color: transparent;
    border: none;
    text-align: left;
  }
  
  .avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }
  
  /* 小屏幕适配（可选，看你需不需要） */
  @media (max-width: 600px) {
    .avatar-img {
      width: 30px;
      height: 30px;
    }
  }
  

/* 表格的头像 */


/* 只针对特定容器内的表格 */
#cn-data-table table {
    table-layout: fixed;
    width: 100%;
    background: transparent;
    color: white;
    border: none;
    border-collapse: collapse;
}

/* 设置表头和每一列的宽度，仅适用于该表格 */
#cn-data-table th, #cn-data-table td {
    border: none;
    text-align: left;
    padding: 8px;
    overflow: hidden;
}

/* 设置每一列的固定宽度 */
#cn-data-table th.avatar-col, #cn-data-table td.avatar-col {
    width: 20%; /* 例如，头像列占20%的宽度 */
}

#cn-data-table th.id-col, #cn-data-table td.id-col {
    width: 30%; /* 例如，ID列占30%的宽度 */
}

#cn-data-table th.label-col, #cn-data-table td.label-col {
    width: 50%; /* 例如，标签列占50%的宽度 */
}

/* 可选：为行设置背景色，确保行内元素宽度固定 */
#cn-data-table tr {
    background: transparent;
    color: white;
    border: none;
}


/* model表格 */
#model-data-table-container {
        max-height: 500px;
        overflow-y: auto;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    #model-data-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        table-layout: auto; /* 使列宽自动根据表头内容调整 */
    }
    
    #model-data-table thead th {
        position: sticky;
        top: -1px;
        /* 修复1像素的晃动问题 */
        background-color: #02566d;
        color: white;
        padding: 12px 15px;
        text-align: left;
        font-weight: 500;
        border-bottom: 2px solid #013d4f;
        z-index: 10;
        white-space: nowrap; /* 防止文字换行 */
    }
    
    #model-data-table tbody td {
        padding: 10px 15px;
        border-bottom: 1px solid #e0e0e0;
        transition: background-color 0.2s;
        white-space: nowrap; /* 防止文字换行 */
    }
    
    #model-data-table tbody tr:hover td {
        background-color: #e6f7ff;
    }
    
    #model-data-table tbody tr:last-child td {
        border-bottom: none;
    }
    
    /* modle表格 */
    #log-content {
        max-height: 600px;
        overflow-y: auto; /* 保持滚动功能 */
    }


















/* 弹出的表单 */
/* 弹窗基础样式 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 20px;
    margin-top: -80px; /* 往上移动 */
    justify-content: center;
    align-items: center;
}

/* 弹窗内容 */
.modal-content {
    background:white;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    max-width: 1250px;/*弹窗宽度*/
    width: 100%;
}

/* 关闭按钮样式 */
.close-modal {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 20px;
}

/* 输入框和选择框样式 */
.form-group {
    margin-bottom: 20px;
}

label {
    font-size: 16px;
    margin-bottom: 5px;
    /* color: #333; */
    color: white;
}

input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #ccc;
    margin-top: 5px;
}

input[type="text"]:focus,
input[type="number"]:focus,
select:focus {
    outline: none;
    border-color: #007BFF;
}
.modal-content h3 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 22px;
    /* color: #333; */
    color: white
}

/* 提交按钮 */
button[type="submit"] {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    border: none;
    color: white;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
}

button[type="submit"]:hover {
    background-color: #0056b3;
}

/* 结果输出部分 */
.prediction-output {
    margin: 20px auto;  /* 上下间距20px，左右自动居中 */
    font-size: 16px;
    /* color: #333; */
    color: white;
    text-align: center;
    max-width: 800px;    /* 可选：限制宽度 */
}



.saved-data {
    padding: 15px;
    border-radius: 5px;
    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); */
}

.saved-data h3 {
    margin: 0;
    color: #28a745;
    font-size: 24px;
    font-weight: 600;
}

.prediction-output-container {
  text-align: center;
  padding: 20px;
}

.result-box {
  padding: 20px;
  border-radius: 10px;
  display: inline-block;
}

.main-category {
  color: #333 !important;
  font-size: 2rem;
  margin-bottom: 20px;
}

.probability-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
  color: #333;
}

.probability-list {
  padding: 15px; /* 增大内边距 */
  background: white;
  border-radius: 10px; /* 增大圆角 */
  font-size: 1.2rem; /* 显著增大字体 */ /* 原1.2rem */
  display: flex;
  flex-direction: column;
  gap: 20px; /* 增大行间距 */ /* 原12px */
  text-align: left;
  letter-spacing: 0.1em; /* 增加字符间距 */
  line-height: 1.6; /* 增加行高 */
  margin-bottom: 30px;
  margin-top: 20px;
}
#view-raw-data {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 1.2rem;
  background-color: #4CAF50;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#view-raw-data:hover {
  background-color: #45a049;
}

.raw-data {
  margin-top: 20px;
  padding: 20px;
  /* background: #f1f1f1; */
  background: rgba(10, 20, 30, 0.8);
  border-radius: 8px;
  color: #333;
  /* color: white; */
  font-size: 1rem;
  text-align: left;
}




/* 加载中的样式 */
.loading {
    text-align: center;
    color: #007bff;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 错误信息 */
.error {
    background: #f8d7da;
    padding: 15px;
    border-radius: 5px;
    color: #721c24;
}

/* 原始数据展示按钮 */
#view-raw-data {
    background: #28a745;
    border: none;
    padding: 10px 15px;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 15px;
}

#view-raw-data:hover {
    background: #218838;
}

.raw-data {
    display: none;
    /* background: #f1f1f1; */
    background: rgba(10, 20, 30, 0.8);
    padding: 10px;
    border-radius: 5px;
    font-size: 14px;
    margin-top: 15px;
    /* color: black; */
    color: white;
}




/* 数据融合 */
.toggle-box {
    display: block;
    margin: 10px auto;
    width: 100px;
    height: 30px;
    padding: 6px 12px;
    font-size: 14px;
    background: #0f2027;
    border-radius: 6px;
    border: 1px solid #00f2ff;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    cursor: pointer;
    user-select: none;
    line-height: 28px;
    text-align: center;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

/* 默认状态 hover 效果 */
.toggle-box:hover {
    background: #173a47;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.8);
    transform: scale(1.05);
}

/* 鼠标点击压缩效果（所有状态通用） */
.toggle-box:active {
    transform: scale(0.95);
}

/* active 状态样式（点击后激活） */
.toggle-box.active {
    background: #173a47;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.8);
}

/* active 状态下的 hover 效果（与非active状态区分） */
.toggle-box.active:hover {
    background: #173a47;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.5);
    transform: scale(1.05);
}




/* SVG 展示区域包裹器：初始状态 */
.svg-wrapper {
    z-index: 1;
    transform: translateX(0%); /* 水平居中 */
    width: 100%;
    height: 100%;                /* 保证包含内容的高度 */
    max-height: 0;               /* 初始时隐藏内容 */
    clip-path: circle(15px at 50% 50%); /* 从中心开始的圆形裁剪 */
    overflow: hidden;
    transition: all 1s ease;     /* 平滑过渡动画 */
}

/* 展开时设置圆形裁剪的半径增大，显示内容 */
.svg-wrapper.active {
    max-height: 450px;           /* 设置一个足够大的最大高度 */
    clip-path: circle(1000px at 50% 50%); /* 圆形逐渐展开，直到覆盖全部区域 */
}

/* SVG 本体样式 */
.blank-area {
    width: 100%;
    height: 100%;
    background: rgba(0, 100, 255, 0.1);
}






/* 系统日志始终固定在下方 */
#system {
    position: absolute;  /* 或 relative/fixed/sticky 根据需求 */
    bottom: -5px;           /* 距离底部 100 像素 */
    left: 0px;           /* 距离左边 50 像素 */
    /* border-top: 2px solid #ccc; */
}





.connection-channel {
    position: absolute;
    height: 8px; /* 稍微细一点，更精致 */
    background: linear-gradient(90deg,
        rgba(0, 242, 255, 0.2) 0%,
        rgba(0, 242, 255, 0.6) 50%,
        rgba(0, 242, 255, 0.2) 100%); /* 和 data-label 一致的蓝色 */
    border-radius: 4px; /* 更圆润过渡 */
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0, 242, 255, 0.4); /* 呼应标签的光影 */
    transition: all 0.3s ease-in-out;
}


.cn-channel {
    left: 20.7%; /* 更灵活的定位 */
    top: 129px; /* 下移避免遮挡标题 */
    width: 443px; /* 动态宽度 */
    transform-origin: left center; /* 变换基准点 */
}

.ru-channel {
    right: 20.6%; /* 更灵活的定位 */
    top: 129px; /* 下移避免遮挡标题 */
    width: 443px; /* 动态宽度 */
    transform-origin: right center;
}

.data-flow {
    position: absolute;
    height: 120%; /* 超出通道高度 */
    width: 25px; /* 加宽光点 */
    top: -10%; /* 垂直居中 */
    background: linear-gradient(90deg, 
        rgba(255, 255, 255, 0) 0%, 
        rgba(255, 255, 255, 0.9) 50%, 
        rgba(255, 255, 255, 0) 100%); /* 更亮的光点 */
    animation: dataFlowCN 1.5s infinite cubic-bezier(0.4, 0, 0.6, 1); /* 默认从左到右 */
    filter: drop-shadow(0 0 5px rgba(100, 180, 255, 1)); /* 增强发光 */
    opacity: 0; /* 初始状态光点是隐藏的 */
}

/* 修改光点的动画对于不同的通道 */
.cn-channel .data-flow {
    animation: dataFlowCN 1s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

.ru-channel .data-flow {
    animation: dataFlowRU 1s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* CN通道光点动画 */
@keyframes dataFlowCN {
    0% {
        left: -30px; /* 从更左侧进入 */
        opacity: 0;
        transform: scaleX(0.8);
    }
    20% {
        opacity: 1;
        transform: scaleX(1);
    }
    80% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        left: 100%; /* 到达最右侧 */
        opacity: 0;
        transform: scaleX(0.8);
    }
}

/* RU通道光点动画 */
@keyframes dataFlowRU {
    0% {
        right: -30px; /* 从更右侧进入 */
        opacity: 0;
        transform: scaleX(0.8);
    }
    20% {
        opacity: 1;
        transform: scaleX(1);
    }
    80% {
        opacity: 1;
        transform: scaleX(1);
    }
    100% {
        right: 100%; /* 到达最左侧 */
        opacity: 0;
        transform: scaleX(0.8);
    }
}



.connection-channel:hover {
    background: linear-gradient(90deg, 
        rgba(0, 255, 255, 0.3) 0%, 
        rgba(0, 255, 255, 0.8) 50%, 
        rgba(0, 255, 255, 0.3) 100%);
    box-shadow: 0 0 16px rgba(0, 242, 255, 0.8);
    transform: translateY(-1px); /* 微上浮 */
}


.cn-channel .data-flow:nth-child(1) {
    animation-delay: 0s;
}

.cn-channel .data-flow:nth-child(2) {
    animation-delay: 0.5s;
}

.cn-channel .data-flow:nth-child(3) {
    animation-delay: 1s;
}

.cn-channel .data-flow:nth-child(4) {
    animation-delay: 1.5s;
}

.cn-channel .data-flow:nth-child(5) {
    animation-delay: 2s;
}

.ru-channel .data-flow:nth-child(1) {
    animation-delay: 0s;
}

.ru-channel .data-flow:nth-child(2) {
    animation-delay: 0.5s;
}

.ru-channel .data-flow:nth-child(3) {
    animation-delay: 1s;
}

.ru-channel .data-flow:nth-child(4) {
    animation-delay: 1.5s;
}

.ru-channel .data-flow:nth-child(5) {
    animation-delay: 2s;
}

/* 下拉框＋历史记录 */
/* 确保状态栏容器是相对定位的，以便内部组件可绝对定位 */

  /* 历史记录方框样式：靠左 */
  /* .history-box {
    position: absolute;
    right: 3%;
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: bold;
    background: #0f2027;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
  } */

.history-box {
    display: block;
    margin: 10px auto;
    width: 100px;
    height: 30px;
    padding: 6px 12px;
    font-size: 14px;
    background: #0f2027;
    border-radius: 6px;
    border: 1px solid #00f2ff;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    cursor: pointer;
    user-select: none;
    line-height: 28px;
    text-align: center;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
    position: absolute;
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
}

/* 默认状态 hover 效果 */
.history-box:hover {
    background: #173a47;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.8);
}

/* 鼠标点击压缩效果（所有状态通用） */
/* 鼠标点击压缩效果（所有状态通用） */
.history-box:active {
    transform: translateY(-50%) scale(0.95);
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.6);
    background: #0c1a22;
}



  
/* demo下拉框样式：靠右 */
.demo-dropdown-box {
    position: absolute;
    left: 2%;
    top: 60%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 10;
}

.demo-dropdown-box select {
    padding: 10px 0; /* 左右 padding 设置为 0 让文字居中 */
    width: 120px;
    height: 40px;
    font-size: 14px;
    background: #0f2027;
    color: #ffffff;
    border: 1px solid #00f2ff;
    border-radius: 6px;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    cursor: pointer;
    transition: all 0.3s ease;

    /* 隐藏原生箭头 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    text-align: center;  /* 水平居中 */
}

/* Hover 效果 */
.demo-dropdown-box select:hover {
    background: #173a47;
    box-shadow: 0 0 25px rgba(0, 242, 255, 0.8);
}

/* 点击效果 */
.demo-dropdown-box select:active {
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.6);
    background: #0c1a22;
}

  /* 下拉框＋历史记录 */
/* 历史记录样式 */


/* 日志显示区域样式 */
.log-display-area {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    z-index: 1000;
    overflow-y: auto;
    gap: 20px;
}

.log-block {
    width: 500px; /* 固定宽度500像素 */
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.log-content {
    width: 500px; /* 固定宽度500像素 */
    max-height: 680px;
    overflow-y: auto;
    margin: 10px 0;
    border: 1px solid #eee;
}
  /* 标题的大小 */

  /* 表格的颜色 */
/* 中方数据标题 - 使用中国国旗的红色和黄色 */
.china-label {
    display: inline-block;
    padding: 6px 12px;
    background: #0f2027;
    /* background: rgba(222, 41, 16, 0.7); */
    border-radius: 6px;
    line-height: 28px;              /* 行高，使文字在30px高的块中垂直居中 */
    color: white;
    width: 100px;                   /* 宽度100px */
    height: 30px;                   /* 高度30px */
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid #00f2ff;
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    /* box-shadow: 0 0 10px rgba(222, 41, 16, 0.7); 
    border: 1px solid rgba(222, 41, 16, 0.7); */
} 

/* 俄方数据标题 - 使用俄罗斯国旗的蓝、红、白三色 */
.russia-label {
    display: inline-block;
    padding: 6px 12px;
    background: #0f2027;
    border-radius: 6px;
    line-height: 28px;              /* 行高，使文字在30px高的块中垂直居中 */
    color: white;
    width: 100px;                   /* 宽度100px */
    height: 30px;                   /* 高度30px */
    font-weight: bold;
    font-size: 16px;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid #00f2ff; 
    box-shadow: 0 0 20px rgba(0, 242, 255, 0.5);
    /* 俄罗斯蓝 #0033a0 */
    /* box-shadow: 0 0 10px rgba(0, 51, 160, 0.9); 
    border: 1px solid rgba(0, 51, 160, 0.9);  */
}

/* 标题的大小 */
/* .china-header {
    background: rgba(222, 41, 16, 0.7);
}
.russia-header {
    background: rgba(0, 51, 160, 0.9);
} */

/* Modal Overlay */


.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    animation: fadeIn 0.3s ease-out;
}

/* Modal Content */
.modal-content {
    position: relative;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    margin: 5% auto;
    padding: 20px;
    width: 80%;
    height: 89%;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    overflow: hidden;
    display: flex; /* 新增：启用 Flexbox 布局 */
    gap: 20px; /* 新增：两个子元素之间的间距 */
}

/* 表单区域占 50% */
#data-input-form {
    flex: 1; /* 占一半空间 */
    max-width: 48%; /* 确保不超过 50% */
    padding-right: 15px; /* 可选：增加右边距 */
}


.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
}

/* Close Button */
.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    color: #888;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.close-modal:hover {
    color: #555;
    transform: scale(1.1);
}

/* Form Styling */
#data-input-form h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
    font-size: 24px;
    font-weight: 600;
    position: relative;
    padding-bottom: 10px;
}

#data-input-form h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    border-radius: 3px;
}

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.3s;
    background-color: #fff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-group input:focus,
.form-group select:focus {
    border-color: #6a11cb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.1);
}

.form-group input,
.form-group select {
    box-sizing: border-box;  /* 确保宽度包含 padding 和 border */
    width: 100%;            /* 宽度100%（或固定值如300px） */
    padding: 12px 15px;     /* 统一内边距 */
    border: 1px solid #ddd; /* 统一边框 */
    /* 其他样式保持不变 */
}

/* Button Styling */
#data-input-form button {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#data-input-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(90deg, #5a0db5 0%, #1a65e5 100%);
}

#data-input-form button:active {
    transform: translateY(0);
}


.prediction-output {
    color: #333;
    font-size: 22px;
    font-weight: 600;

}

.prediction-output.show {
    opacity: 1;
    transform: translateY(0);
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .modal-content {
        margin: 10% auto;
        width: 85%;
        padding: 25px 20px;
    }
}




















/* 下拉框容器 */
.select-tree {
  position: relative;
  display: inline-block;
  margin-top: -5px;
  width: 150px; /* 可调整整体宽度 */
}

/* 下拉框主体样式 */
.select-tree select {
  width: 100%; /* 继承容器宽度 */
  padding: 6px 12px;
  background-color: transparent; /* 透明背景 */
  border: 1px solid #d9d9d9; /* 浅灰色边框 */
  border-radius: 4px; /* 圆角 */
  color: white; /* 文字颜色 */
  font-size: 14px;
  appearance: none; /* 移除默认样式 */
  -webkit-appearance: none; /* Safari兼容 */
  -moz-appearance: none; /* Firefox兼容 */
  cursor: pointer;
  transition: all 0.3s; /* 平滑过渡效果 */
}

/* 自定义下拉箭头 */
.select-tree::after {
  content: "▼";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #666;
  pointer-events: none; /* 防止箭头遮挡点击 */
}

/* 悬浮效果 */
.select-tree select:hover {
  border-color: #1890ff; /* 蓝色边框 */
}

/* 聚焦效果 */
.select-tree select:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2); /* 蓝色光晕 */
}

/* 下拉选项样式 */
.select-tree select option {
  background: #fff; /* 选项背景保持白色 */
  color: #333;
}

    /* Footer 固定在底部 */

/* 页脚整体样式 */
.fl_footer_wrap {
  width: 100%;
  font-family: "PingFang SC", "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  box-sizing: border-box;
  transform: translateY(-15px);
}

/* 版权信息容器（横向排列） */
.fl_footer_copyright {
  max-width: 1180px; /* 限制最大宽度，居中 */
  height: 20px;
  margin: 0 auto;
  display: flex;
  flex-direction: row; /* 横向排列 */
  align-items: center;
  justify-content: center;
  gap: 20px; /* 元素间距 */
  flex-wrap: wrap; /* 允许换行 */
}

/* 文本样式 */
.fl_copyright_text,
.fl_icp_link {
  margin: 0;
  color: #666;
  font-size: 12px;
  line-height: 1.5;
}

/* 链接样式 */
.fl_link {
  color: #666;
  text-decoration: none;
  transition: color 0.2s ease; /* 悬停动画 */
}

.fl_link:hover {
  color: #0086f6; /* Trip.com 主题蓝色 */
}