.attempt-hidden-column {
    display: none;
}

/* 板块单元格样式 - 显示板块名称并支持工具提示 */
.plate-cell {
    color: var(--text-plate);        /* 板块文本颜色 */
    cursor: default;                /* 默认光标 */
    position: relative;             /* 相对定位，用于工具提示定位 */
    text-align: left;               /* 文本左对齐 */
    display: inline-block;          /* 内联块显示 */
    width: 100%;                    /* 宽度100% */
    margin-left: 0;                 /* 左外边距0 */
}

/* 表格计数样式 - 显示表格行数 */
.table-count {
    margin-left: 5px;               /* 右移3px */
}

/* 工具提示样式 - 鼠标悬停时显示详细信息 */
.tooltip {
    display: none;                  /* 默认隐藏 */
    position: absolute;             /* 绝对定位 */
    background-color: var(--bg-dark); /* 深色背景 */
    border-radius: var(--radius-md); /* 圆角 */
    padding: var(--pad-md);         /* 添加内边距 */
    z-index: 9999;                  /* 最高层级 */
    width: 300px;                    /* 固定宽度 */
    min-width: var(--tooltip-min-w); /* 最小宽度 */
    max-width: var(--tooltip-max-w); /* 最大宽度 */
    height: auto;
    box-shadow: var(--shadow-md);   /* 阴影 */
    color: var(--text);             /* 文本颜色 */
    font-size: var(--font-size);    /* 字体大小 */
    line-height: var(--line-height); /* 行高 */
    word-wrap: break-word;          /* 自动换行 */
    white-space: normal;            /* 允许文字正常换行 */
}

.tooltip h4 {
    margin: 0;
    color: var(--text-tooltip-title);
    border-bottom: var(--border-thin) solid var(--border-light);
    padding: 0;
}

.tooltip p {
    margin: 0;
    word-wrap: break-word;
    line-height: var(--line-height);
}

.tooltip .plate-reason {
    margin: 0;
    padding: 0;
}

/* 板块容器样式 - 显示所有板块的可折叠容器 */
.plate-container {
    display: none;                  /* 默认隐藏 */
    flex-direction: column;         /* 垂直排列 */
    margin: 0;
    padding: 0;
    background: var(--bg-primary);  /* 背景色 */
    border-bottom: 0 solid transparent; /* 底部边框 */
    align-items: stretch;           /* 子元素拉伸对齐 */
    width: 100%;
    transition: opacity var(--transition-fast); /* 透明度过渡效果 */
}

/* 板块行样式 - 水平排列多个板块 */
.plates-row {
    display: flex;
    flex-wrap: nowrap;              /* 不换行 */
    justify-content: flex-start;    /* 左对齐 */
    margin: 5px 0 0px 0px;
    padding: 3px 0;
    overflow-x: auto;               /* 水平滚动 */
    white-space: nowrap;            /* 不换行 */
}

.plate-checkbox {
    display: flex;
    align-items: center;
    margin: 0 2px;
}

.plate-checkbox label {
    margin-left: 4px;
    font-size: 12px;
    cursor: default;
    color: var(--color-text-plate);
}

/* 面板模态框样式 - 居中显示的模态窗口 */
.panel-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7); /* 半透明背景 */
    display: flex;
    justify-content: center;        /* 水平居中 */
    align-items: center;            /* 垂直居中 */
    z-index: 10000;                 /* 最高层级 */
    padding: 0;
}

.panel-modal-content {
    background: var(--bg-primary);
    border-radius: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
}

.panel-modal-body {
    color: var(--panel-text);
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

.panel-modal-body .modal-title {
    color: var(--pink);
    text-decoration: none;
    font-size: 20px;
}


.panel-modal-body .modal-update-info {
    color: var(--yellow);
    text-decoration: none;
    font-size: var(--font-size);
    line-height: 12px;
}

.panel-modal-body .modal-content {
    color: var(--text);
    text-decoration: none;
    font-size: var(--font-size);
    line-height: 12px;
}

.panel-modal-body .modal-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 10px 0;
}

.panel-modal-body .modal-content td {
    padding: 5px 10px;
    border: var(--border-thin) solid var(--border);
    text-align: left;
    white-space: nowrap;
}

/* CSS变量模块 - 统一管理主题颜色、尺寸和样式属性 */
:root {
    /* 主题背景色 */
    --bg-primary: #13253C;      /* 页面主背景色 */
    --bg-dark: #0e1b2c;         /* 深色背景，用于按钮和卡片 */
    --bg-hover: #888888;        /* 鼠标悬停时的背景色 */
    
    /* 面板相关变量 */
    --panel-bg: #13253C;        /* 面板背景色 */
    --panel-header: linear-gradient(to bottom, #1e232d, #0e1b2c); /* 面板头部渐变背景 */
    --panel-header-green: transparent; /* 绿色面板头部背景 */
    --panel-header-orange: transparent; /* 橙色面板头部背景 */
    --shadow: rgba(0, 0, 0, 0.486); /* 通用阴影颜色 */
    --row-hover: var(--bg-dark); /* 表格行悬停背景色 */
    --row-selected: #2B2B2B;    /* 表格行选中背景色 */
    --border: #2d3846;          /* 主要边框颜色 */
    --border-light: #555555;    /* 浅色边框颜色 */
    --scrollbar: #444444;       /* 滚动条颜色 */
    
    /* 文本颜色 */
    --text: #d2d2d2;            /* 主要文本颜色 */
    --text-muted: #1f477a;      /* 次要文本颜色 */
    --text-plate: #01bcdd;      /* 板块文本颜色 */
    --text-tooltip-title: #FFA500; /* 工具提示标题颜色 */
    --text-tertiary: #888888;   /* 第三级文本颜色 */
    --text-light: #d2d2d2;      /* 浅色文本颜色 */
    
    /* 功能颜色 */
    --pink: #FF03CB;            /* 粉色，用于天梯等特殊标签 */
    --red: #DE292E;             /* 红色，用于涨停标签 */
    --success: #006006;         /* 成功颜色，用于跌停标签 */
    --green: #4ecdc4;           /* 绿色，用于上涨相关元素 */
    --orange: #FFA500;          /* 橙色，用于炸板和冲板标签 */
    --yellow: #FFFF00;          /* 黄色，用于首板标签 */
    
    /* 面板文本变量 */
    --panel-text: #d2d2d2;      /* 面板文本颜色 */
    --panel-title: var(--panel-text); /* 面板标题颜色 */
    --panel-title-green: var(--panel-text); /* 绿色面板标题颜色 */
    
    /* 尺寸 - 高度 */
    --default-h: 25px;          /* 默认元素高度 */
    --toolbar-h: 25px;          /* 工具栏高度 */
    --table-header-h: 25px;     /* 表格头部高度 */
    --table-cell-h: 21px;       /* 表格单元格高度 */
    --indicator-h: 100px;       /* 指标行高度 */
    --indicator-item-w: 100px;  /* 指标项宽度 */
    --indicator-column-min-width-2: 100px; /* 指标列最小宽度2 */
    --indicator-min-h: 30px;    /* 指标最小高度 */
    --indicator-column-max-width-1: 300px; /* 指标列最大宽度1 */
    --tooltip-w: 300px;         /* 工具提示宽度 */
    --tooltip-min-w: 300px;     /* 工具提示最小宽度 */
    --indicator-column-width-2: 90px; /* 指标列宽度2 */
    --indicator-column-width-3: 59px; /* 指标列宽度3 */
    --indicator-column-width-other: 150px; /* 其他指标列宽度 */
    --tooltip-max-w: 600px;     /* 工具提示最大宽度 */
    
    /* 间距与内边距 */
    --space: 3px;               /* 基本间距单位 */
    --space-xl: 10px;           /* 大间距单位 */
    --pad-xs: 0;                /* 极小内边距 */
    --pad-sm: 2px;              /* 小内边距 */
    --pad-md: 5px;              /* 中等内边距 */
    --pad-table-cell: 0px;      /* 表格单元格内边距 */
    --pad-table-header: 0 1px;  /* 表格头部内边距 */
    --pad-right: 6px;           /* 右侧内边距 */
    --pad-left: 6px;            /* 左侧内边距 */
    --pad-name-col: 1px;        /* 名称列内边距 */
    
    /* 边框与圆角 */
    --radius-sm: 3px;           /* 小圆角 */
    --radius-md: 4px;           /* 中等圆角 */
    --border-thin: 1px;         /* 细边框 */
    --border-thick: 2px;        /* 粗边框 */
    --border-solid: solid;      /* 实线边框 */
    --border-dashed: dashed;    /* 虚线边框 */
    
    /* 字体 */
    --font: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif; /* 全局字体族 */
    --font-size: 11px;          /* 全局字体大小 */
    --line-height: 1.4;         /* 全局行高 */
    
    /* 过渡动画 */
    --transition-fast: 0.3s ease-out; /* 快速过渡动画 */
    --transition: all 0.3s ease-out; /* 通用过渡动画 */
    
    /* 阴影 */
    --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.3); /* 小阴影 */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5); /* 中等阴影 */
}
/* 标签按钮容器样式 - 股票类型切换按钮组 */
.tab-buttons {
    display: flex;               /* 弹性布局，按钮水平排列 */
    align-items: center;         /* 按钮垂直居中 */
    overflow-x: auto;            /* 当按钮过多时，允许水平滚动 */
    overflow-y: hidden;          /* 隐藏垂直滚动条 */
    white-space: nowrap;         /* 防止按钮换行 */
    -webkit-overflow-scrolling: touch; /* 移动端触摸滚动优化 */
    scrollbar-width: none;       /* Firefox：隐藏滚动条 */
    -ms-overflow-style: none;    /* IE和Edge：隐藏滚动条 */
    margin-left: var(--space-xl); /* 与左侧元素保持较大间距 */
}

/* 隐藏Chrome、Safari和Edge的滚动条 - 保持滚动功能同时隐藏视觉元素 */
.tab-buttons::-webkit-scrollbar {
    display: none;
}
/* 全局样式重置与基础设置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font);
}
body {
    background-color: var(--bg-primary);
    color: var(--text);
    font-family: var(--font);
    font-size: var(--font-size);
}
/* 隐藏所有滚动条但保留滚动功能 */
/* 适用于Chrome, Safari和Opera */
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
/* 适用于IE, Edge和Firefox */
* {
    -ms-overflow-style: none;
    scrollbar-width: none;
    /* 全局禁止文字选中 */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* 板块内容允许被选中 */
.plate-cell,
.plate-reason {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
/* 确保板块内容内部元素也能被选中 */
.plate-cell *,
.plate-reason * {
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    user-select: text !important;
}
/* 容器布局 - 页面整体结构 */
#container {
    height: 100vh;           /* 容器高度占满整个视口高度 */
    display: flex;           /* 使用弹性布局 */
    flex-direction: column;  /* 子元素垂直排列，形成上下布局 */
    /* 垂直弹性布局确保工具栏固定在顶部，股票表格占据剩余空间 */
}

/* 工具栏样式 - 页面顶部控制栏 */
#toolbar {
    height: var(--toolbar-h);        /* 使用CSS变量定义高度，便于统一管理 */
    padding: var(--pad-xs) var(--space);  /* 内边距：上下为0，左右为基础间距 */
    display: flex;                   /* 工具栏内部使用弹性布局 */
    align-items: center;             /* 子元素垂直居中对齐 */
    background-color: var(--bg-primary); /* 与页面背景色一致 */
    white-space: nowrap;             /* 防止内容换行，保持在同一行 */
    overflow-x: visible;             /* 允许水平溢出可见 */
    overflow-y: hidden;              /* 隐藏垂直溢出 */
    box-shadow: var(--shadow-sm);    /* 添加底部阴影，与下方内容区分 */
}

/* 标签按钮基础样式 - 所有股票类型按钮的默认样式 */
.tab-buttons button {
    background-color: var(--bg-dark);        /* 深色背景 */
    color: var(--text);                     /* 主要文本颜色 */
    border: 0px solid var(--text);          /* 无边框 */
    border-radius: var(--radius-sm);        /* 小圆角 */
    margin: 0 var(--space);                 /* 按钮之间的间距 */
    padding: var(--pad-sm) var(--pad-md);   /* 内边距 */
    cursor: default;                        /* 默认光标 */
    user-select: none;                      /* 禁止文本选择 */
    transition: var(--transition);          /* 过渡动画效果 */
    font-size: var(--font-size);            /* 字体大小 */
}

/* 标签按钮悬停效果 */
.tab-buttons button:hover {
    background-color: rgba(90, 105, 83, 0.8); /* 悬停时的背景色 */
}

/* 激活状态基础样式 - 所有激活按钮的通用样式 */
.tab-buttons button.active {
    color: var(--text);                     /* 保持文本颜色 */
    font-weight: normal;                    /* 正常字重 */
}

/* 炸板标签 (limit_up_broken) - 涨停后打开的股票 */
.tab-buttons button[data-type="limit_up_broken"].active {
    background-color: var(--orange);        /* 激活时为橙色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="limit_up_broken"] {
    border-bottom: var(--border-thick) solid var(--orange); /* 非激活时底部橙色粗边框 */
}

/* 跌停标签 (limit_down) - 跌停的股票 */
.tab-buttons button[data-type="limit_down"].active {
    background-color: var(--success);       /* 激活时为绿色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="limit_down"] {
    border-bottom: var(--border-thick) solid var(--green); /* 非激活时底部绿色粗边框 */
}

/* 天梯标签 (yesterday_limit_up) - 昨日涨停的股票 */
.tab-buttons button[data-type="yesterday_limit_up"].active {
    background-color: var(--pink);          /* 激活时为粉色背景 */
    color: var(--text);                     /* 白色文本 */
    cursor: default;
}
.tab-buttons button[data-type="yesterday_limit_up"] {
    border-bottom: var(--border-thick) solid var(--pink); /* 非激活时底部粉色粗边框 */
}

/* 涨停标签 (limit_up) - 涨停的股票 */
.tab-buttons button[data-type="limit_up"].active {
    background-color: var(--red);           /* 激活时为红色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="limit_up"] {
    border-bottom: var(--border-thick) solid var(--red); /* 非激活时底部红色粗边框 */
}

/* 一字标签 (one_word_limit_up) - 一字涨停的股票 */
.tab-buttons button[data-type="one_word_limit_up"].active {
    background-color: blue;           /* 激活时为蓝色背景 */
    color: #d2d2d2;                     /* 白色文本 */
}
.tab-buttons button[data-type="one_word_limit_up"] {
    border-bottom: var(--border-thick) solid blue; /* 非激活时底部蓝色粗边框 */
    color: #d2d2d2;                     /* 文本颜色 */
}

/* 首板标签 (first_limit_up) - 首次涨停的股票 */
.tab-buttons button[data-type="first_limit_up"].active {
    background-color: var(--yellow);        /* 激活时为黄色背景 */
    color: var(--bg-dark);                  /* 深色文本（与黄色对比） */
    cursor: default;
}
.tab-buttons button[data-type="first_limit_up"] {
    border-bottom: var(--border-thick) solid var(--yellow); /* 非激活时底部黄色粗边框 */
}

/* 冲板标签 (limit_up_attempt) - 尝试涨停的股票 */
.tab-buttons button[data-type="limit_up_attempt"].active {
    background-color: var(--orange);        /* 激活时为橙色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="limit_up_attempt"] {
    border-left: var(--border-thick) solid var(--orange); /* 非激活时左侧橙色粗边框 */
}
/* 冲板按钮点击样式 */
.tab-buttons button[data-type="limit_up_attempt"]:active,
.tab-buttons button[data-type="limit_up_attempt"]:focus {
    background-color: var(--bg-dark);       /* 点击时恢复深色背景 */
    outline: none;                          /* 移除焦点轮廓 */
    box-shadow: none;                       /* 移除阴影 */
}

/* 接力标签 (relay) - 接力涨停的股票 */
.tab-buttons button[data-type="relay"].active {
    background-color: var(--pink);          /* 激活时为粉色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="relay"] {
    border-left: var(--border-thick) solid var(--pink); /* 非激活时左侧粉色粗边框 */
}
/* 接力按钮点击样式 */
.tab-buttons button[data-type="relay"]:active,
.tab-buttons button[data-type="relay"]:focus {
    background-color: var(--bg-dark);       /* 点击时恢复深色背景 */
    outline: none;                          /* 移除焦点轮廓 */
    box-shadow: none;                       /* 移除阴影 */
}

/* 吃面标签 (noodle) - 大跌的股票 */
.tab-buttons button[data-type="noodle"].active {
    background-color: var(--green);         /* 激活时为绿色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="noodle"] {
    border-left: var(--border-thick) solid var(--green); /* 非激活时左侧绿色粗边框 */
}
/* 吃面按钮点击样式 */
.tab-buttons button[data-type="noodle"]:active,
.tab-buttons button[data-type="noodle"]:focus {
    background-color: var(--bg-dark);       /* 点击时恢复深色背景 */
    outline: none;                          /* 移除焦点轮廓 */
    box-shadow: none;                       /* 移除阴影 */
}

/* 双创标签 (innovation) - 科创板和创业板股票 */
.tab-buttons button[data-type="innovation"].active {
    background-color: #8701e6;          /* 激活时为粉色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="innovation"] {
    border-bottom: var(--border-thick) solid #8701e6; /* 非激活时底部粉色粗边框 */
}

/* 豆宝标签 (template) - 自定义模板股票 */
.tab-buttons button[data-type="template"].active {
    background-color: var(--red);           /* 激活时为红色背景 */
    color: var(--text);                     /* 白色文本 */
}
.tab-buttons button[data-type="template"] {
    border-bottom: var(--border-thick) solid var(--red); /* 非激活时底部红色粗边框 */
}

/* 特殊标签组 - 妖股、次新、新股 */
.tab-buttons button[data-type="super_stock"].active,
.tab-buttons button[data-type="nearly_new"].active,
.tab-buttons button[data-type="new_stock"].active {
    background-color: #2c6abd;              /* 激活时为深色背景 */
}
/* 日期选择器基础样式 */
input.date-picker {
    background-color: transparent;
    border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--pad-sm) var(--pad-sm);
    padding-right: 25px;
    color: var(--text);
    font-size: var(--font-size);
    position: relative;
    white-space: nowrap;
    /* 确保日期不换行 */
    min-width: 120px;
    /* 确保有足够空间显示完整日期 */
    text-indent: 0;
    /* 确保在Safari上日期显示完整 */
    text-align: left;
    /* 修复Safari日期输入框的文本对齐问题 */
}
/* 隐藏清除按钮 */
.date-picker::-webkit-clear-button {
    display: none;
}
/* 隐藏微调按钮 */
.date-picker::-webkit-inner-spin-button {
    display: none;
}
/* 保留日历选择功能但隐藏原生图标 */
.date-picker::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: default;
}
/* 自定义下拉箭头 */
.date-picker::after {
    content: "";
    position: absolute;
    right: var(--pad-md);
    top: 50%;
    transform: translateY(-50%);
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0'%3e%3cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zM5 8V6h14v2H5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    pointer-events: none;
}
/* 日期选择器样式 */
.date-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    /* 日期控件不换行 */
}
.date-arrow {
    cursor: default;
    font-size: 10px;
    color: var(--text-light);
    padding: 2px;
    background-color: var(--bg-primary);
    border-radius: 3px;
    width: 14px;
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    user-select: none;
}
.date-arrow:hover {
    background-color: var(--bg-dark);
    color: white;
}
/* 股票表格容器 - 自适应布局与滚动控制 */
#stocktable {
    flex: 1;                    /* 占据容器剩余的所有垂直空间 */
    overflow-x: auto;           /* 水平内容溢出时显示滚动条 */
    overflow-y: auto;           /* 垂直内容溢出时显示滚动条 */
    padding: 0px;               /* 无内边距 */
    min-width: 0;               /* 允许容器在弹性布局中收缩 */
    white-space: nowrap;        /* 防止表格内容换行 */
    min-height: 400px;          /* 最小高度，确保表格有足够的显示空间 */
    background-color: var(--bg-primary); /* 与页面背景色一致 */
    /* 结合#container的flex布局，使表格自动填充工具栏下方的所有空间 */
}

/* 表格主体样式 - tablesorter插件样式定制 */
.tablesorter-blue {
    background-color: var(--bg-primary); /* 表格背景色 */
    border: none;               /* 无边框 */
    font-family: var(--font);   /* 全局字体 */
    font-size: var(--font-size); /* 全局字体大小 */
    text-align: center;         /* 默认文本居中 */
    border-collapse: collapse;  /* 合并边框，消除单元格间隙 */
    border-spacing: 0;          /* 单元格间距为0 */
    table-layout: fixed;        /* 固定布局，列宽由CSS决定，提高渲染性能 */
    /* 固定布局确保表格列宽不会因为内容而自动调整，保持布局稳定 */
}

/* 表格头部样式 - 固定表头实现 */
.tablesorter-blue th {
    background-color: var(--bg-primary); /* 表头背景色 */
    border: none;               /* 无边框 */
    text-align: center;         /* 文本居中 */
    cursor: default;            /* 默认光标 */
    position: sticky;           /* 粘性定位，滚动时固定在顶部 */
    top: 0;                     /* 固定在容器顶部 */
    z-index: 2;                 /* 层级高于表格内容，确保可见 */
    color: var(--text);         /* 文本颜色 */
    padding: 0 1px;             /* 内边距 */
    height: var(--table-header-h); /* 表头高度 */
    outline: none;              /* 移除焦点轮廓 */
    /* 粘性定位实现了表格滚动时表头固定的效果，提升用户体验 */
}
/* 表格间距设置 - 统一管理所有表格相关的间距样式 */
.tablesorter-header-inner {
    text-align: center;
    padding-left: var(--pad-xs);
    padding-right: var(--pad-xs);
}
.plate-header-col .tablesorter-header-inner {
    text-align: left;
}
.text-right-value {
    text-align: right;
    padding-right: var(--pad-md);
}
.left-padding {
    padding-left: var(--pad-md);
}
.name-column {
    padding-left: var(--pad-sm);
    padding-right: var(--pad-sm);
}
.tablesorter-blue thead {
    background-color: var(--bg-primary);
    color: var(--text);
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
    /* 同时添加上方和下方阴影 */
}
.tablesorter-blue th,
.tablesorter-blue td {
    white-space: nowrap;
    overflow: hidden;
    max-width: none;
    /* 移除width: auto，让JavaScript设置的固定宽度生效 */
}
.tablesorter-blue tbody tr td {
    padding: 0 3px 0 3px;
    border: none;
    color: var(--text);
    height: var(--table-cell-h);
}
/* 设置默认列标题背景色 */
.tablesorter-blue thead .tablesorter-header {
    background-color: #0e1b2c;
    font-size: var(--font-size);
    height: var(--table-header-h);
    line-height: var(--table-header-h);
    background-image: none;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}
/* 改变鼠标悬停时的背景色 */
.tablesorter-blue .tablesorter-header:hover {
    background-color: var(--bg-dark);
}
.tablesorter-blue .headerSortUp,
.tablesorter-blue .headerSortDown {
    background-color: var(--success);
}
/* 拖动时的样式 */
.tablesorter-blue .tablesorter-header.dragging {
    background-color: var(--green);
    border: 1px dashed var(--border-light);
    opacity: 0.8;
    position: relative;
}
/* 拖动过程中指示放置位置的样式 */
.tablesorter-blue .tablesorter-header.drag-over {
    border-right: 2px solid var(--text);
}
/* 右对齐样式类 */
.tablesorter-blue td.text-right,
.tablesorter-blue th.text-right {
    text-align: right;
}
#datatable tbody tr.selected-row {
    background-color: var(--bg-dark);
    /* 深色背景，用于选中行 */
}
/* 悬停色与选中色保持一致 */
#datatable tbody tr:hover {
    background-color: var(--bg-dark);
}
/* 序号列样式 */
.tablesorter-blue tbody tr td:first-child {
    color: var(--text-tertiary);
}
/* 接力表格样式 */
.relay-table-container {
    margin-bottom: var(--space-xl);
    overflow-x: auto;
    overflow-y: hidden;
}
.relay-table {
    width: auto;
    table-layout: auto;
}
.relay-table thead th {
    min-width: 80px;
    text-align: center;
    padding: var(--pad-md);
    border: 1px solid var(--border);
}
.relay-table tbody tr {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.relay-table tbody td {
    min-width: 80px;
    text-align: center;
    vertical-align: middle;
    padding: var(--pad-md);
    border: none;
}
.stock-info {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.stock-name {
    font-weight: bold;
    margin-right: var(--space);
    text-align: left;
    flex: 1;
    min-width: 0;
}
.stock-change {
    font-size: var(--font-size);
    text-align: right;
    white-space: nowrap;
    min-width: 30px;
}
.relay-table td {
    width: var(--indicator-column-width-2);
    min-width: var(--indicator-column-width-2);
    max-width: var(--indicator-column-width-2);
    text-align: left;
}
.relay-table .stock-name {
    font-weight: normal;
    font-size: 11px;
}
.table-separator {
    height: 2px;
    background-color: var(--border-light);
    margin: var(--space-xl) 0;
}
.table-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 0px;
    margin-left: var(--pad-md);
    padding: var(--pad-md) 0;
}
.table-title {
    font-weight: bold;
    font-size: 11px;
    color: var(--text-plate);
}
/* 指标行容器 - 市场数据指标的水平排列布局 */
.indicators-row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* 从左侧开始排列，确保所有列都能显示 */
    align-items: flex-start;
    margin: 0;
    /* 移除所有外边距 */
    padding: 0;
    /* 移除所有内边距 */
    border: none;
    /* 隐藏边框 */
    overflow-x: auto;
    /* 水平内容溢出时可滚动 */
    overflow-y: hidden;
    /* 隐藏垂直溢出 */
    white-space: nowrap;
    /* 防止指标项换行 */
    width: 100%;
    /* 确保完全填充父容器 */
    max-width: 100%;
    max-height: 300px;
    /* 限制最大高度，控制指标区显示范围 */
    transition: opacity 0.3s ease-out;
    /* 只对透明度应用过渡，避免布局动画 */
    position: relative;
    /* 相对定位，让子元素可以基于它定位 */
    box-sizing: border-box;
    /* 确保边框包含在宽度内 */
}
/* 指标行隐藏状态 - 通过高度和溢出控制实现平滑隐藏 */
.indicators-row.hidden {
    max-height: 0;
    /* 隐藏时高度为0，配合transition实现平滑动画 */
    margin: 0;
    /* 隐藏时移除边距 */
    padding: 0;
    /* 隐藏时移除内边距 */
    overflow: hidden;
    /* 隐藏溢出内容 */
}
/* 板块行容器 - 股票板块标签的水平排列 */
.plates-row {
    display: flex;
    align-items: center;
    /* 子元素垂直居中 */
    flex-wrap: nowrap;
    /* 不换行，保持水平排列 */
    white-space: nowrap;
    /* 防止板块标签换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    margin: 0;
    /* 移除外边距 */
    padding: 0;
    /* 移除内边距 */
    box-sizing: border-box;
    /* 确保边框包含在宽度内 */
}
/* 导出板块按钮样式 */
#exportPlateBtn {
    width: var(--default-h);
    height: var(--default-h);
    background-color: var(--bg-dark);
    color: var(--yellow);
    border: none;
    border-radius: var(--radius-sm);
    cursor: default;
    margin: 0 var(--space-xl) 0 var(--space);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size);
    flex-shrink: 0;
    flex-grow: 0;
    min-width: var(--default-h);
    max-width: var(--default-h);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    /* 确保按钮不会被拉伸或压缩 */
    flex-basis: var(--default-h);
    /* 防止文本换行 */
    word-break: keep-all;
    white-space: nowrap;
    /* 防止用户调整大小 */
    resize: none;
    /* 确保背景色覆盖整个按钮 */
    background-clip: padding-box;
    /* 防止边框影响尺寸 */
    outline: none;
}
.indicator-column {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
    height: 50px;
    margin: 0 15px 0 0;
    border: none;
    box-sizing: border-box;
}
.indicator-column:nth-child(1) {
    width: auto;
    display: flex;
    flex-direction: column;
    height: 75px;
    margin: 0;
    /* 移除所有外边距 */
    padding: 0;
    /* 移除所有内边距 */
    border: none;
    /* 隐藏边框 */
    position: relative;
    left: 0;
    /* 移除左侧偏移 */
    box-sizing: border-box;
    /* 确保边框包含在尺寸内 */
    flex-shrink: 0;
    /* 防止被压缩 */
}
/* 第一列的第一行和第二行各自占50%高度并上下居中 */
.indicator-column:nth-child(1) .indicator-row:nth-child(1),
.indicator-column:nth-child(1) .indicator-row:nth-child(2) {
    height: 50%;
    /* 明确设置各自占50%的高度 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: flex-start;
    /* 水平靠左 */
    width: auto;
    /* 自适应内容宽度 */
    padding-left: 0;
    /* 移除左侧内边距 */
    margin-left: 0;
    /* 移除左侧外边距 */
    min-height: 30px;
    /* 确保有足够的显示空间 */
}
/* 第一列第三行保持正常间距 */
.indicator-column:nth-child(1) .indicator-row:nth-child(3) {
    margin-top: 0;
}
/* 调整第一行的两个指标样式，使其完全靠近左侧 */
.indicator-column:nth-child(1) .indicator-row:nth-child(1) .indicator-item {
    width: auto;
    /* 自适应内容宽度 */
    margin: 0 10px 0 0;
    /* 右侧间距 */
    padding: 0;
    /* 移除内边距 */
    display: flex;
    align-items: center;
    /* 确保指标项内文字上下居中 */
    justify-content: flex-start;
    /* 确保指标项内文字水平靠左 */
}
/* 调整下方单个指标样式，使其完全靠近左侧 */
.indicator-column:nth-child(1) .indicator-row:nth-child(2) .indicator-item {
    width: auto;
    /* 自适应内容宽度 */
    margin: 0;
    padding: 0;
    /* 移除内边距 */
    display: flex;
    align-items: center;
    /* 确保指标项内文字上下居中 */
    justify-content: flex-start;
    /* 确保指标项内文字水平靠左 */
}
/* 第一列的indicator-value样式 */
.indicator-column:nth-child(1) .indicator-value {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 0;
    margin-left: 0;
    font-weight: normal;
    color: #ffff00;
    text-indent: 7px;
    font-size: 11px;
}
/* 第二列样式设置 */
.indicator-column:nth-child(2) {
    width: var(--indicator-column-width-2);
    min-width: var(--indicator-column-min-width-2);
    flex-shrink: 1;
    margin-right: 0;
}
/* 第三列到最后一列设置为相同宽度并设置间距 */
.indicator-column:nth-child(n+3) {
    width: var(--indicator-column-width-3);
    min-width: var(--indicator-column-width-3);
    max-width: 150px;
    margin-right: 3px;
    /* 设置列间距为3px */
}
/* 第三列特殊样式 */
.indicator-column:nth-child(3) {
    position: relative;
    /* 相对定位，作为绝对定位元素的父容器 */
}
/* 第二列的第一行和第二行均匀分配剩余空间 */
.indicator-column:nth-child(2) .indicator-row:nth-child(1),
.indicator-column:nth-child(2) .indicator-row:nth-child(2) {
    flex: 1;
    /* 均匀分配剩余高度 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    min-height: 30px;
    /* 确保最小高度 */
}
/* 第二列第三行放在最下方 */
.indicator-column:nth-child(2) .indicator-row:nth-child(3) {
    display: flex;
    align-items: flex-end;
    /* 紧贴底部 */
    justify-content: center;
    /* 水平居中 */
    min-height: 30px;
    /* 确保最小高度 */
    cursor: default;
}
/* 第三列的所有行左对齐 */
.indicator-column:nth-child(3) .indicator-row {
    flex: 1;
    /* 均匀分配高度 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: flex-start;
    /* 水平左对齐 */
    min-height: 30px;
    /* 确保最小高度 */
    padding-left: 5px;
    /* 统一添加左侧内边距 */
}
/* 第四列和第五列的所有行垂直居中 */
.indicator-column:nth-child(4) .indicator-row,
.indicator-column:nth-child(5) .indicator-row {
    flex: 1;
    /* 均匀分配高度 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    min-height: 30px;
    /* 确保最小高度 */
}
/* 第二列、第四列、第五列的指标项内容居中对齐 */
.indicator-column:nth-child(2) .indicator-item,
.indicator-column:nth-child(4) .indicator-item,
.indicator-column:nth-child(5) .indicator-item {
    align-items: center;
    /* 确保水平居中对齐 */
    text-align: center;
    /* 确保文本内容左右居中 */
    width: 100px;
    /* 设置统一的宽度 */
    max-width: 100px;
    /* 设置最大宽度 */
    min-width: 100px;
    /* 设置最小宽度 */
}
/* 第三列的所有指标项内容左对齐 */
.indicator-column:nth-child(3) .indicator-item {
    align-items: flex-start;
    text-align: left;
    width: 100%;
}
/* 市场指标区中内容为'-'的td元素设置颜色 */
#data6-cell:contains('-'),
#data8-cell:contains('-'),
#data9-cell:contains('-'),
#data10-cell:contains('-'),
#data11-cell:contains('-'),
#data12-cell:contains('-'),
#data18-cell:contains('-') {
    color: var(--text-muted);
}
/* 设置空间数值的颜色 */
#data6-cell {
    color: var(--red);
}
/* 第五列有3行，每行高度均匀分配并垂直居中 */
.indicator-column:nth-child(5) .indicator-row {
    flex: 1;
    /* 均匀分配高度 */
    display: flex;
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    min-height: 30px;
    /* 确保最小高度 */
}
/* 第三列及以后列的通用样式 */
.indicator-column:nth-child(n+3) .indicator-item {
    margin: 0;
    padding: 0;
}
/* 第三列及以后列的指标值样式 */
.indicator-column:nth-child(n+3) .indicator-value {
    margin: 0;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
}
.indicator-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    flex-shrink: 0;
    height: 100%;
    margin-bottom: 15px;
    border: none;
}
/* 热度和炸板率保持水平排列 */
.indicator-item.indicator--heat,
.indicator-item.indicator--broken-plate-ratio {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    /* 缩小宽度以适应并排显示 */
    margin-right: 0;
}
/* 确保第一列和第二列表格上下不留内间距 */
.indicator-column:nth-child(1) .indicator-item,
.indicator-column:nth-child(2) .indicator-item {
    margin: 0;
    padding: 0;
}
/* indicator-value基础样式 */
.indicator-value {
    /* 字号已在addMarketIndicatorStyles函数中全局设置为12px */
    font-weight: normal;
    color: var(--text-light);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 为每个指标的名称和数值添加独立的类名，可单独设置字号和颜色 */
.indicator-item.indicator--heat .indicator-name {
    /* 字号已在addMarketIndicatorStyles函数中全局设置为12px */
    color: var(--text-tertiary);
}
.indicator-item.indicator--heat .indicator-value {
    color: var(--yellow);
    margin-left: 2px;
    width: 100%;
    text-align: left;
}
.indicator-item[data-name="红绿比"] .indicator-name {
    color: var(--text-tertiary);
}
.indicator-item[data-name="红绿比"] .indicator-value {
    text-align: center;
    width: 100%;
}
.indicator-item[data-name="板核炸"] .indicator-name {
    display: none;
}
.indicator-item[data-name="板核炸"] .indicator-value {
    text-align: center;
    width: 100%;
    position: relative;
    top: -3px;
}
.indicator-item.indicator--broken-plate-ratio .indicator-name {
    color: var(--text-muted);
}
.indicator-item.indicator--broken-plate-ratio .indicator-value {
    text-align: center;
    width: 100%;
}
.indicator-value .indicator-name-separate {
    margin: 0;
    padding: 0;
    line-height: 1;
    color: #1f477a;
}
/* 比例指标样式设置 - 可单独设置字号和颜色 */
.ratio-left {
    color: var(--red);
    /* 左侧数值默认红色 */
    font-size: 11px;
    padding: 0 0px;
}
.ratio-separator {
    color: #1f477a;
    /* 分隔符颜色与百分比号一致 */
    font-size: 11px;
    padding: 0;
    /* 移除间距，设置为0 */
}
.ratio-right {
    /* 默认样式，可根据需要调整 */
    color: #4ecdc4;
    /* 右侧数值设置为青色 */
    font-size: 11px;
    padding: 0 2px;
}
/* 第一列的指标名称样式 */
.indicator-column:nth-child(1) .indicator-name {
    font-size: 11px;
    color: var(--text-tertiary);
}
/* 设置指标颜色 */
.indicator-value .percent-value,
.indicator-value .normal-value {
    color: var(--orange);
}
/* 百分比数字样式 - 可单独设置颜色 */
.indicator-value .percent-number {
    /* 默认样式，可根据需要调整 */
    /* 字号已在addMarketIndicatorStyles函数中全局设置为12px */
    color: #d2d2d2;
}
/* 百分比符号样式 - 可单独设置颜色 */
.indicator-value .percent-sign,
.percent-sign {
    /* 默认样式，可根据需要调整 */
    color: #1f477a;
    /* 字号已在addMarketIndicatorStyles函数中全局设置为12px */
}
/* 根据数值正负设置不同颜色 */
.indicator-value .percent-negative {
    color: #006006;
}
.indicator-value .percent-positive {
    color: #DE292E;
}
/* 设置涨跌停比的数值颜色 */
.indicator-value .limit-up {
    color: #DE292E;
}
.indicator-value .limit-down {
    color: #006006;
}
.indicator-item[data-name="红绿比"],
.indicator-item[data-name="板核炸"] {
    padding-top: 0px;
}
.indicator-item[data-name="溢价率"] {
    padding-top: 0px;
}
/* 成交量指标 - 移除负边距，避免布局不稳定 */
.volume-row,
.volume-predict-row {
    margin-left: 0;
}
/* 股票概念 */
/* 股票概念标签样式 */
.cat {
    color: var(--pink);
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    text-align: center;
    line-height: 1.2;
    display: inline-block;
    margin: 0 var(--pad-md) 0 0;
    white-space: nowrap;
    vertical-align: middle;
}

/* 模态框内容样式 */
.modal-content span.zhangfu {
    background-color: #DE292E;
}

.modal-content span.zhangfu-yellow {
    background-color: #DE292E;
    color: yellow;
}

.modal-content span.orange {
    color: #FFA500;
}

.modal-content span.ocean {
    color: #01bcdd;
}

.modal-content span.white-link {
    color: #fff;
    text-decoration: none;
    line-height: 12px;
}

/* 市场指标和情绪指标样式 */
/* 市场指标全局样式 - 所有元素字号统一为11px，且不显示粗体 */
.indicators-row, .indicator-column, .indicator-row, .indicator-item, 
.indicator-name, .indicator-value,
.indicators-row *, .indicator-column *, .indicator-row *, .indicator-item * {
    font-size: 11px;
    font-weight: normal;
}

/* 第三列到最后一列的所有文字上下居中对齐 */
.indicator-column:nth-child(n+3) .indicator-item, .indicator-column:nth-child(n+3) .indicator-name, .indicator-column:nth-child(n+3) .indicator-value {
    display: flex;
    align-items: center;
}

/* 第三列右移30px并设置文字右对齐 */
.indicator-column:nth-child(3) {
    margin-left: 30px;
}

/* 第三列文字右对齐 */
.indicator-column:nth-child(3) .indicator-item, 
.indicator-column:nth-child(3) .indicator-name, 
.indicator-column:nth-child(3) .indicator-value {
    text-align: right;
}

/* 第一列特定指标样式 */
.indicator-column:nth-child(1) .indicator-item[data-name="热度"] .indicator-value,
.indicator-column:nth-child(1) .indicator-item[data-name="热度"] .indicator-value span {
    font-size: 18px;
    color: #FFFF00; /* 黄色 */
}

/* 炸板率数值样式 - 不包括百分比符号 */
.indicator-column:nth-child(1) .indicator-item[data-name="炸板率"] .indicator-value,
.indicator-column:nth-child(1) .indicator-item[data-name="炸板率"] .indicator-value .percent-number {
    font-size: 16px;
    color: #FFA500; /* 橙色 */
}

/* 板核炸字号 */
.indicator-column:nth-child(1) .indicator-item[data-name="板核炸"] .indicator-value,
.indicator-column:nth-child(1) .indicator-item[data-name="板核炸"] .indicator-value span {
    font-size: 14px;
}

/* 成交量相关样式 */
.volume-label, .volume-change-label {
    color: #888888;
    font-size: 11px;
}

.volume-unit {
    color: #888888;
    font-size: 11px;
}

.volume-value, .volume-change-value {
    cursor: default;
    transition: all 0.3s ease;
    display: inline-block;
    font-size: 11px;
}

/* 红绿比字号设置为15px */
.indicator-item[data-name="红绿比"] .ratio-left,
.indicator-item[data-name="红绿比"] .ratio-separator,
.indicator-item[data-name="红绿比"] .ratio-right {
    font-size: 15px;
}

/* 数值颜色样式 */
.value-up {
    color: #DE292E;
}

.value-down {
    color: #4ecdc4;
}

.value-neutral {
    color: #000000;
}

/* 确保所有子元素也应用11px字号 */
.indicators-row *, .indicator-column *, .indicator-row *, .indicator-item *,
.indicator-value span, .indicator-value div, .indicator-value p, .indicator-value b {
    font-size: 11px;
}

/* 隐藏所有div元素内表格的外框线 */
div table,
div table td,
div table th {
    border: none;
    outline: none;
}

/* 确保所有表格没有边框间距 */
div table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 特别针对市场指标区域的表格额外加强隐藏效果 */
.indicators-row table,
.indicators-row table td,
.indicators-row table th,
.indicator-column table,
.indicator-column table td,
.indicator-column table th,
.indicator-item table,
.indicator-item table td,
.indicator-item table th {
    border: none;
    outline: none;
    border-width: 0;
    border-style: none;
}

/* 位置调整样式 */
/* 第一列容器，确保两个指标在同一行不换行且总宽度居中 */
.indicator-column:nth-child(1) .indicator-row:nth-child(1) {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center; /* 添加居中对齐 */
    width: 100%; /* 确保容器占满宽度 */
}

/* 确保红绿比指标所在行容器左对齐，与热度容器保持一致 */
.indicator-column:nth-child(1) .indicator-row:nth-child(2) {
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.indicator-column:nth-child(2) .indicator-row .indicator-item {
    margin: 0;
    padding: 0;
    border: none;
}

/* 确保第二列的指标行没有间距 */
.indicator-column:nth-child(2) .indicator-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
}

/* 百分比符号样式 */
.percent-sign {
    font-size: inherit;
    color: #888888;
}

/* 指标值样式 */
.indicator-value-positive {
    color: #DE292E;
}

.indicator-value-negative {
    color: #4ecdc4;
}

.indicator-value-neutral {
    color: #d2d2d2;
}

/* 热度指标样式 */
.heat-value {
    color: yellow;
    font-weight: bold;
    margin-left: 5px;
}

/* 成交量相关样式 */
.volume-label {
    color: #1f477a;
}

.volume-change-row {
    display: block;
}

.volume-change-label {
    color: #1f477a;
}

/* 预测成交量样式 */
.predict-volume-label {
    color: #1f477a;
}

.predict-volume-unit {
    color: #1f477a;
}

.predict-volume-change {
    color: #1f477a;
}

/* 缩放量百分悬停窗样式 */
#volume-predict-value-cell span[data-tooltip] {
    position: relative;
}

#volume-predict-value-cell span[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFFF00;
    color: #000000;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 1000;
    font-size: 11px;
    font-weight: bold;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 5px;
}

#volume-predict-value-cell span[data-tooltip]:hover::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #FFFF00 transparent transparent transparent;
    margin-bottom: -5px;
    z-index: 1001;
}

/* 指标行内边距调整 */
.indicator-padding-left {
    margin-left: -31px;
}

.indicator-padding-right {
    margin-left: -4px;
}

/* 响应式设计 - 平板设备适配 (最大宽度768px) */
@media (max-width: 768px) {
    /* 在小屏幕上调整工具栏布局 */
    #toolbar {
        flex-wrap: wrap;
        /* 允许工具栏项目换行 */
        height: auto;
        /* 高度自适应内容 */
        padding: var(--space) var(--pad-md);
        /* 调整内边距 */
    }
    
    /* 标签按钮容器在小屏幕上占满宽度 */
    .tab-buttons {
        width: 100%;
        /* 占满父容器宽度 */
        margin-left: 0;
        /* 重置左侧外边距 */
        margin-top: var(--space);
        /* 与上方元素保持间距 */
        order: 2;
        /* 调整显示顺序，将标签按钮放在下方 */
    }
    
    /* 指标行在小屏幕上允许换行 */
    .indicators-row {
        flex-wrap: wrap;
        /* 允许指标列换行显示 */
    }
    
    /* 调整指标列在小屏幕上的宽度和间距 */
    .indicator-column {
        width: calc(50% - var(--space-xl) / 2);
        /* 两列布局，每列占据一半宽度减去间距 */
        min-width: auto;
        /* 允许列宽自适应 */
        margin-right: var(--space-xl) / 2;
        /* 右侧间距 */
        margin-bottom: var(--space-xl);
        /* 底部间距 */
        flex-shrink: 0;
        /* 防止列被压缩 */
    }
    
    /* 每行显示两列，第二列清除右侧间距 */
    .indicator-column:nth-child(2n) {
        margin-right: 0;
        /* 偶数列清除右侧间距，确保两列对齐 */
    }
    
    /* 调整表格样式，确保内容可以滚动 */
    .tablesorter-blue {
        font-size: 10px;
        /* 缩小字体大小以适应小屏幕 */
    }
    
    .tablesorter-blue th,
    .tablesorter-blue td {
        padding: 0 var(--pad-xs);
        /* 减少内边距，增加显示内容 */
    }
    
    /* 调整日期选择器大小 */
    input.date-picker {
        font-size: 10px;
        /* 缩小字体大小 */
        padding: var(--pad-sm) var(--pad-md);
        /* 调整内边距 */
    }
}

/* 响应式设计 - 手机设备适配 (最大宽度480px) */
@media (max-width: 480px) {
    /* 指标列在超小屏幕上堆叠显示 */
    .indicator-column {
        width: 100%;
        /* 单列布局，占满宽度 */
        margin-right: 0;
        /* 清除右侧间距 */
    }
    
    /* 调整表格单元格内边距 */
    .tablesorter-blue td {
        padding: 0 2px;
        /* 进一步减少内边距，最大化显示内容 */
    }
    
    /* 调整标签按钮大小 */
    .tab-buttons button {
        padding: 2px 4px;
        /* 减少内边距 */
        font-size: 10px;
        /* 缩小字体 */
        margin: 0 1px;
        /* 减少按钮间距 */
    }
}
#toggle-plate-btn {
    background: transparent;
    color: #d2d2d2;
    border: none;
    padding: 0;
    border-radius: 0;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
    margin-left: 5px;
}
#toggle-plate-btn:active,
#toggle-plate-btn:focus {
    outline: none;
    box-shadow: none;
}
/* 工具栏省略号样式 */
.toolbar-ellipsis {
    margin-left: 5px;
    margin-right: 5px;
    color: var(--text);
    font-size: 11px;
    transform: translateY(-3px);
    cursor: pointer;
}
.popup-menu {
    background: var(--panel-bg);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.popup-menu-item {
    padding: 15px 30px;
    cursor: default;
    user-select: none;
    font-size: 18px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    width: 100%;
    text-align: center;
}
.popup-menu-item:last-child {
    border-bottom: none;
}
.popup-menu-item:hover {
    background-color: var(--bg-hover);
    color: var(--text);
}
/* 刷新按钮样式 */
.nav-button.refresh {
    background: none;
    border: none;
    cursor: default;
    font-size: 11px;
    color: var(--text);
    padding: 2px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}
.nav-button.refresh:hover {
    color: yellow;
}
/* 自动刷新状态样式 */
.nav-button.refresh.auto-refresh {
    color: orange;
}
.nav-button.refresh:not(.auto-refresh) {
    color: gray;
}
/* 刷新图标样式 */
.refresh-icon {
    display: inline-block;
}
/* 刷新时只转一圈 */
.nav-button.refresh.loading .refresh-icon,
#toggle-plate-btn.loading .refresh-icon {
    animation: spin 1s linear;
    animation-iteration-count: 1;
}
/* 自动刷新状态下保持橙色，但不持续旋转 */
.nav-button.refresh.auto-refresh .refresh-icon,
#toggle-plate-btn.auto-refresh .refresh-icon {
    /* 自动刷新时不持续旋转，只在数据刷新时通过添加loading类触发旋转 */
    color: #FFA500;
}

/* 列显示/隐藏按钮样式 */
.column-toggle-btn {
    display: inline-block;
    margin-right: 5px;
    color: #d2d2d2;
    cursor: pointer;
    transition: color 0.3s ease, transform 0.2s ease;
    font-size: 12px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.column-toggle-btn:hover {
    color: var(--yellow);
    transform: scale(1.1);
}
.column-toggle-btn:active {
    transform: scale(0.95);
}
.column-toggle-btn.active {
    color: var(--yellow);
    transform: scale(1.05);
}
/* 面板容器 - 可拖拽、可调整大小的浮动面板 */
.panel {
    position: absolute;
    /* 绝对定位，支持拖拽功能 */
    background: var(--panel-bg);
    /* 使用面板背景色变量 */
    border: 1px solid var(--border);
    /* 边框样式 */
    border-radius: 5px;
    /* 圆角边框 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    min-width: 200px;
    /* 最小宽度限制 */
    min-height: 100px;
    /* 最小高度限制 */
    resize: both;
    /* 支持双向调整大小 */
    box-shadow: 0 2px 8px var(--shadow);
    /* 添加阴影效果，增强立体感 */
}
/* 面板折叠状态 - 最小化面板高度 */
.panel-collapsed {
    min-height: auto;
    /* 折叠时高度自适应内容 */
    height: auto;
    /* 高度自适应 */
}
/* 折叠面板内容 - 隐藏面板主体内容 */
.panel-collapsed .panel-content {
    max-height: 0;
    /* 高度为0，隐藏内容 */
    padding: 0;
    /* 移除内边距 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    min-height: 0;
    /* 重置最小高度 */
}
/* 面板头部 - 面板标题栏，支持拖拽 */
.panel-header {
    background: var(--panel-header);
    /* 使用面板头部渐变背景 */
    color: var(--panel-title);
    /* 面板标题颜色 */
    padding: 3px 0px 3px 8px;
    /* 内边距：上下3px，左右8px */
    cursor: default;
    /* 默认光标 */
    user-select: none;
    /* 禁止文本选择 */
    font-size: 12px;
    /* 字体大小 */
    font-weight: 700;
    /* 粗体字 */
    border-bottom: 1px solid var(--border);
    /* 底部边框，分隔头部和内容 */
    display: flex;
    justify-content: space-between;
    /* 标题和操作按钮两端对齐 */
    align-items: center;
    /* 垂直居中 */
    position: relative;
    /* 相对定位，支持拖拽功能 */
}
.panel-header--green {
    color: var(--panel-title-green);
    background: var(--panel-header-green);
}
.panel-header--orange {
    color: var(--panel-title);
    background: var(--panel-header-orange);
}
.panel-header--orange-solid {
    background: transparent;
}
.panel-header__left {
    display: flex;
    align-items: center;
    gap: 8px;
}
.panel-header__refresh {
    padding: 1px 1px;
    font-size: 10px;
    background: transparent;
    border: none;
    color: #b9b9b9;
    border-radius: var(--radius-sm);
    cursor: default;
    transition: transform 0.3s ease;
    outline: none;
    margin-right: 10px;
}
.panel-header__refresh:focus {
    outline: none
}

/* 动画效果 */
/* 刷新按钮旋转动画 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
.panel-header__refresh.refreshing {
    animation: spin 0.6s ease-in-out;
    color: var(--yellow);
}
[id$="-count"] {
    color: #ff0;
}
.title-text {
    margin-left: -5px;
}
.panel-content {
    padding: 3px;
    min-height: 50px;
    overflow: auto;
    font-size: 12px
}
/* 面板内容滚动条样式 */
.panel-content::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

/* 面板缩放区域样式 */
.resize-handle {
    position: absolute;
    background: transparent;
    z-index: 10;
}

/* 上下左右四个方向的缩放区域 */
.resize-handle.top,
.resize-handle.bottom {
    width: 100%;
    height: 5px;
}

.resize-handle.left,
.resize-handle.right {
    width: 5px;
    height: 100%;
}

/* 四个角落的缩放区域 */
.resize-handle.top-left,
.resize-handle.top-right,
.resize-handle.bottom-left,
.resize-handle.bottom-right {
    width: 10px;
    height: 10px;
}

/* 具体位置设置 */
.resize-handle.top {
    top: 0;
    left: 0;
    cursor: ns-resize;
}

.resize-handle.bottom {
    bottom: 0;
    left: 0;
    cursor: ns-resize;
}

.resize-handle.left {
    top: 0;
    left: 0;
    cursor: ew-resize;
}

.resize-handle.right {
    top: 0;
    right: 0;
    cursor: ew-resize;
}

.resize-handle.top-left {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.resize-handle.top-right {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}

.resize-handle.bottom-left {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
}

.resize-handle.bottom-right {
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
}
.panel-content::-webkit-scrollbar-thumb {
    background: var(--scrollbar);
    border-radius: 3px;
}
.panel-content::-webkit-scrollbar-track {
    background: transparent;
}
/* 面板内容表格样式 */
.panel-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: var(--text);
}
/* 冲板弹窗样式调整，确保内容完整显示 */
#panel-limit-up-attempt {
    min-width: 100px;
    /* 设置更小的最小宽度，确保面板能根据内容自适应 */
    background-color: #0e1b2c;
    /* 设置面板背景色 */
    border-color: #888888;
    /* 设置湖蓝色边框 */
}
/* 冲板弹窗内容样式 */
#panel-limit-up-attempt .panel-content {
    background-color: #0e1b2c;
    /* 设置内容区域背景色 */
    white-space: nowrap;
    overflow-x: auto;
    /* 内容超出宽度时显示水平滚动条 */
}
/* 冲板表格背景色 */
#panel-limit-up-attempt .panel-content table {
    background-color: #0e1b2c;
    /* 设置表格背景色 */
}
/* 冲板弹窗标题栏湖蓝色 */
#panel-limit-up-attempt .panel-header {
    background-color: transparent ;
}
/* 冲板标题文字橙色 */
#panel-limit-up-attempt .title-text {
    color: var(--orange);
}
#panel-limit-up-attempt .panel-content table th,
#panel-limit-up-attempt .panel-content table td {
    white-space: nowrap;
    border-bottom: none;
    /* 取消所有横线 */
    padding: 0 5px 0 5px;
    height: var(--table-cell-h);
}
/* 冲板表格自适应列宽 */
#panel-limit-up-attempt .panel-content table {
    table-layout: auto;
    width: auto;
}
/* 同花宝弹窗样式调整，确保内容完整显示 */
#panel-limit-up-all {
    min-width: 100px;
    /* 设置更小的最小宽度，确保面板能根据内容自适应 */
    background-color: #0e1b2c;
    /* 设置面板背景色 */
    border-color: #888888;
    /* 设置湖蓝色边框 */
}
/* 同花宝弹窗内容样式 */
#panel-limit-up-all .panel-content {
    background-color: #0e1b2c;
    /* 设置内容区域背景色 */
    white-space: nowrap;
    overflow-x: auto;
    /* 内容超出宽度时显示水平滚动条 */
    overflow-y: auto;
    /* 内容超出高度时显示垂直滚动条 */
    max-height: 600px;
    /* 设置最大高度，超出时显示滚动条 */
}
/* 同花宝表格背景色 */
#panel-limit-up-all .panel-content table {
    background-color: #0e1b2c;
    /* 设置表格背景色 */
}
/* 同花宝弹窗标题栏湖蓝色 */
#panel-limit-up-all .panel-header {
    background-color: transparent ;
}
/* 同花宝标题文字橙色 */
#panel-limit-up-all .title-text {
    color: var(--orange);
}
#panel-limit-up-all .panel-content table th,
#panel-limit-up-all .panel-content table td {
    white-space: nowrap;
    border-bottom: none;
    /* 取消所有横线 */
    padding: 0 5px 0 5px;
    height: var(--table-cell-h);
}
/* 同花宝表格自适应列宽 */
#panel-limit-up-all .panel-content table {
    table-layout: auto;
    width: auto;
}
/* 同花宝面板标题栏鼠标样式 */
#panel-limit-up-all .panel-header {
    cursor: move;
    /* 鼠标悬停时显示移动光标 */
}
/* 同花宝面板调整手柄鼠标样式 */
#panel-limit-up-all .panel-resizer {
    cursor: nwse-resize;
    /* 鼠标悬停时显示调整大小光标 */
}
/* 同花宝面板内容区域鼠标样式 */
#panel-limit-up-all .panel-content {
    cursor: default;
    /* 内容区域默认光标 */
}
/* 同花宝面板标题栏刷新按钮鼠标样式 */
#panel-limit-up-all .panel-header__refresh {
    cursor: pointer;
    /* 鼠标悬停时显示指针光标 */
}
/* 同花宝面板边缘鼠标样式 */
#panel-limit-up-all {
    --resize-border-width: 5px;
    /* 边缘检测宽度 */
}
/* 上边缘 */
#panel-limit-up-all.resize-top {
    cursor: ns-resize;
}
/* 下边缘 */
#panel-limit-up-all.resize-bottom {
    cursor: ns-resize;
}
/* 左边缘 */
#panel-limit-up-all.resize-left {
    cursor: ew-resize;
}
/* 右边缘 */
#panel-limit-up-all.resize-right {
    cursor: ew-resize;
}
/* 左上角 */
#panel-limit-up-all.resize-topleft {
    cursor: nwse-resize;
}
/* 右上角 */
#panel-limit-up-all.resize-topright {
    cursor: nesw-resize;
}
/* 左下角 */
#panel-limit-up-all.resize-bottomleft {
    cursor: nesw-resize;
}
/* 右下角 */
#panel-limit-up-all.resize-bottomright {
    cursor: nwse-resize;
}
/* 接力弹窗样式调整，确保内容完整显示 */
#panel-relay {
    min-width: 100px;
    /* 设置更小的最小宽度，确保面板能根据内容自适应 */
    background-color: #0e1b2c;
    /* 设置面板背景色 */
    border-color: #888888;
    /* 设置边框 */
}
/* 接力面板内容样式 */
#panel-relay .panel-content {
    background-color: #0e1b2c;
    /* 设置内容区域背景色 */
    white-space: nowrap;
    overflow-x: auto;
    /* 内容超出宽度时显示水平滚动条 */
}
/* 接力表格背景色 */
#panel-relay .panel-content table {
    background-color: #0e1b2c;
    /* 设置表格背景色 */
}
/* 接力弹窗标题栏湖蓝色 */
#panel-relay .panel-header {
    background-color: #0066cc;
}
/* 接力标题文字橙色 */
#panel-relay .title-text {
    color: var(--orange);
}
#panel-relay .panel-content table th,
#panel-relay .panel-content table td {
    white-space: nowrap;
    border-bottom: none;
    /* 取消所有横线 */
    padding: 0 5px 0 5px;
    height: var(--table-cell-h);
}
/* 接力表格自适应列宽 */
#panel-relay .panel-content table {
    table-layout: fixed;
    width: 100%;
}
/* 吃面弹窗样式 */
#panel-noodle {
    min-width: 100px;
    /* 设置更小的最小宽度，确保面板能根据内容自适应 */
    background-color: #0e1b2c;
    /* 设置面板背景色 */
    border-color: transparent;
    /* 设置湖蓝色边框 */
}
/* 吃面弹窗内容样式 */
#panel-noodle .panel-content {
    background-color: #0e1b2c;
    /* 设置内容区域背景色 */
    white-space: nowrap;
    overflow-x: auto;
    /* 内容超出宽度时显示水平滚动条 */
}
/* 吃面表格自适应列宽 */
#panel-noodle .panel-content table {
    background-color: #0e1b2c;
    /* 设置表格背景色 */
    table-layout: auto;
    width: auto;
}
/* 吃面弹窗标题栏湖蓝色 */
#panel-noodle .panel-header {
    background-color: #0066cc;
}

/* 吃面弹窗灰色边框 */
#panel-noodle {
    border-color: #888888;
}
/* 吃面标题文字绿色 */
#panel-noodle .title-text {
    color: var(--green);
}
#panel-noodle .panel-content table th,
#panel-noodle .panel-content table td {
    white-space: nowrap;
    border-bottom: none;
    /* 取消所有横线 */
    padding: 0 5px 0 5px;
    height: var(--table-cell-h);
}
/* 确保最大回撤列*/
#panel-noodle .panel-content table td:nth-child(5) {
    background-color: var(--success);
}
/* 为其他列（除了涨幅列和最大回撤列）设置透明背景色 */
#panel-noodle .panel-content table td:not(:nth-child(3)):not(:nth-child(5)) {
    background-color: transparent;
}
.panel-content th,
.panel-content td {
    padding: 3px 5px;
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}
.panel-content th {
    background-color: transparent;
    cursor: default;
    font-weight: normal;
}
.panel-content tr:hover {
    background-color: var(--row-hover);
}