/* 全局CSS变量定义 */
:root {
  /* 主色调 */
  --primary: #01bcdd;
  --secondary: #e26f04;
  
  /* 基本颜色 */
  --red: #DE292E;
  --green: #4ecdc4;
  --blue: #3498db;
  --yellow: #FFFF00;
  --yellow-dim: #e26f04;
  --orange: #ff9900;
  --orange-dim: #e26f04;
  --pink: #FF03CB;
  --white: #d2d3d3;
  --cyan: #00ffff;
  --purple: #FF03CB;
  
  /* 灰色系列 */
  --gray-1: #888888;
  --gray-2: #aaa;
  --gray-3: #888888;
  --gray-4: #888888;
  --gray-5: #444;
  --gray-6: #333;
  --gray-7: #1c3352;
  --gray-light: #888888;
  --gray-dark: #464545;
  --gray: #888888;
  --gray-text: #888888;

  /* 背景颜色 */
  --bg: #13253C;
  --bg-secondary: #0e1b2c;
  --bg-tertiary: #1c3352;
  --bg-hover: #888888;
  --bg-selected: #888888;
  --bg-header: #13253C;
  --bg-header-hover: #1a3254;
  --bg-th-hover: #1a3254;
  --bg-row-hover: #0e1b2c;
  --bg-row-hover-2: #1c3352;
  --bg-row-hover-3: #0e1b2c;
  --bg-sub-plate: #0e1b2c;
  --bg-up: #630000;
  --bg-down: #4ecdc4;

  /* 文本颜色 */
  --text-primary: #d2d3d3;
  --text-secondary: #d2d3d3;
  --text-muted: #464545;
  
  /* 边框颜色 */
  --border: #1e3a5f;
  --border-secondary: #1c3352;
  --border-transparent: transparent;
  
  /* 特殊功能颜色 */
  --st-ban-bg: #630000;
  --zha-ban-bg: #e26f04;
  --zha-ban-text: #d2d3d3;
  
  /* 排名颜色 */
  --rank-up: #FFC596;
  --rank-1: #FF03CB;
  --rank-2: #FF6200;
  --rank-3: #FBFF00;
  --rank-4: #00a2ff;
  
  /* 监控颜色 */
  --monitor: #FFA500;
  
  /* 市场板块颜色 */
  --market-cyb: #01bcdd;
  --market-kcb: #01bcdd;
  --market-bjs: #888888;
  
  /* 金额单位颜色 */
  --unit-color: #1f477a;
  
  /* 字号系统 */
  --fs-xs: 10px;
  --fs-sm: 12px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-global: 12px;
  --fs-title: 14px;
  
  /* 字体系统 */
  --font-default: "PingFang SC", "Microsoft YaHei", "微软雅黑", sans-serif;
  --fw-normal: normal;
  --fw-medium: normal;
  --fw-bold: normal;
  --line-height: 1.4;
  --lineh-cell: 1.4;
  
  /* 间距系统 */
  --sp-xxs: 2px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 12px;
  --sp-lg: 16px;
  --sp-xl: 20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --pad-cell: 0px;
  --mb-item: 4px;
  --padb-item: 4px;
  --table-plate-padding-left: 8px;
  
  /* 宽高系统 */
  --h-xs: 20px;
  --h-sm: 24px;
  --h-md: 32px;
  --h-lg: 40px;
  --h-xl: 48px;
  --h-cell: 22px; /* 与dxb.html表格数据行高保持一致 */
  --h-header: 25px; /* 与dxb.html表头行高保持一致 */
  
  --w-xs: 40px;
  --w-sm: 80px;
  --w-md: 120px;
  --w-lg: 160px;
  --w-xl: 200px;
  
  /* 边框系统 */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 3px;
  
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  
  /* 过渡动画 */
  --transition-fast: 0.2s ease;
  --transition-medium: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* 市场特定颜色映射 */
:root {
  --up: #DE292E;
  --limit-up: #DE292E;
  --down: #4ecdc4;
  --limit-down: #4ecdc4;
  --warning: #FFFF00;
  --info: #ff9900;
  --accent: #FF03CB;
}

/* ===== 全局样式重置 ===== */
* {
    margin: 0 1px;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Microsoft YaHei', 'PingFang SC', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--fs-global);
    font-weight: normal;
}

body {
    background: var(--bg);
    color: var(--white);
    overflow-x: auto;
    overflow-y: auto;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* 隐藏滚动条 */
    -ms-overflow-style: none;
    scrollbar-width: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 隐藏WebKit浏览器滚动条 */
body::-webkit-scrollbar {
    display: none;
}

/* 全局鼠标指针样式：强制所有元素使用普通箭头 */
*,
*:before,
*:after,
body,
html {
    cursor: default !important;
}

/* ===== 通用颜色类 ===== */
.color-red,
.red {
    color: var(--red);
}

.color-green,
.green {
    color: var(--green);
}

.color-white,
.white {
    color: var(--white);
}

.color-pink,
.pink {
    color: var(--pink);
}

.color-yellow,
.yellow {
    color: var(--yellow);
}

.color-orange,
.orange {
    color: var(--orange);
}

.color-gray,
.huise {
    color: var(--gray);
}

/* ===== 特殊状态颜色 ===== */
.plate-value-positive {
    color: var(--red);
}

.plate-value-negative {
    color: var(--green);
}

.plate-value-zero {
    color: var(--white);
}

.zt-zb {
    background: var(--bg-up);
    color: var(--white);
}

/* ===== 页面布局 ===== */
#container {
    width: 100%;
    max-width: none;
    margin: 0px auto 0;
    overflow-x: auto;
    display: flex;
    gap: var(--sp-xs);
    min-height: 400px;
    flex-shrink: 0;
    height: 100vh;
}

#left-container {
    width: auto;
    min-width: max-content;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background-color: transparent;
    transition: all 0.3s ease;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    flex-shrink: 0;
    white-space: nowrap;
}

#left-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

#right-container {
    width: auto;
    min-width: auto;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background-color: transparent;
    transition: all 0.3s ease;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    flex-shrink: 1;
}

#right-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* ===== 表格基础样式 ===== */
table {
    width: auto;
    min-width: auto;
    border-collapse: collapse;
    margin-top: 0;
    table-layout: auto;
    /* 允许根据内容自适应宽度，避免列被强制压缩 */
    background-color: transparent;
}

/* 左侧表格特定布局 */
#plate-table {
    table-layout: auto;
    /* 确保表头和内容同步调整宽度 */
}

/* 右侧表格：自适应宽度模式 */
#data-table {
    width: auto;
    min-width: auto;
    table-layout: auto;
}

/* 表格基础样式 */
th,
td {
    border: none;
    padding: var(--pad-cell);
    color: var(--white);
    line-height: var(--lineh-cell);
    height: var(--h-cell);
}

/* 表头不换行 */
th {
    white-space: nowrap;
}

/* 表格单元格根据内容自动换行 */
td {
    white-space: normal;
    word-wrap: break-word;
}

/* 表头样式 */
th {
    background-color: var(--bg-header);
    font-weight: normal;
    text-align: center;
    cursor: default;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

th:hover {
    background-color: var(--bg-th-hover);
}

/* 表格单元格样式 */
td {
    text-align: left;
    vertical-align: middle;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* 左侧表格单元格样式 */
#plate-table th,
#plate-table td {
    white-space: nowrap;
    /* 防止换行 */
    height: var(--h-cell);
    line-height: var(--lineh-cell);
    padding: var(--pad-cell);
    vertical-align: middle;
}

/* 左侧表格表头样式 */
#plate-table th {
    text-align: center;
}

/* 左侧表格数据单元格样式 */
#plate-table td {
    text-align: left;
}

/* 右侧表格单元格样式 */
#data-table th,
#data-table td {
    height: var(--h-cell);
    line-height: var(--lineh-cell);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 通用样式类 */
.title {
    font-size: var(--fs-title);
    margin-bottom: 0px;
    font-weight: normal;
    text-align: center;
    color: var(--yellow);
}

.item {
    margin-bottom: var(--mb-item);
    padding-bottom: var(--padb-item);
    transition: background-color 0.3s;
    cursor: default;
}

.item:hover {
    background-color: var(--bg-hover);
}

/* 其他通用样式类 */
.highlight {
    color: var(--orange);
    font-weight: normal;
}

.limit-change {
    background-color: var(--bg-up);
    color: var(--white);
    font-weight: normal;
    position: relative;
    z-index: 100;
    border-radius: 1px;
}

.limit-down {
    background-color: var(--bg-down);
    color: var(--white);
    font-weight: normal;
    position: relative;
    z-index: 100;
    border-radius: 1px;
    height: 20px;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* 左侧表格列样式 */
/* 第1列 - 板块 */
#plate-table th:nth-child(1) {
    text-align: left;
    padding-left: var(--table-plate-padding-left);
    padding-right: var(--spacing-xs);
    color: var(--white);
}

#plate-table td:nth-child(1) {
    padding-left: var(--table-plate-padding-left);
    padding-right: var(--sp-xs);
}

/* 第2列 - 强度 */
#plate-table th:nth-child(2),
#plate-table td:nth-child(2) {
    text-align: center;
}

#plate-table td:nth-child(2) {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
}

/* 第3列 - 涨幅 */
#plate-table th:nth-child(3),
#plate-table td:nth-child(3) {
    text-align: center;
}

#plate-table td:nth-child(3) {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
}

/* 第4列 - 净额 */
#plate-table th:nth-child(4) {
    text-align: center;
}

#plate-table td:nth-child(4) {
    text-align: right;
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
}

/* 第5列 - 涨停 */
#plate-table th:nth-child(5),
#plate-table td:nth-child(5) {
    text-align: center;
}

#plate-table td:nth-child(5) {
    padding-left: var(--sp-xs);
    padding-right: var(--sp-xs);
}

/* 右侧表格统一样式 */
/* 右侧表格表头基础样式 */
#data-table th {
    color: var(--white);
    text-align: center;
    width: auto;
    white-space: nowrap;
}

/* 右侧表格表头悬停效果 */
#data-table th:hover {
    background-color: var(--bg-row-hover-2);
}

/* 第1列 - 代码 */
#data-table th:nth-child(1),
#data-table td:nth-child(1) {
    white-space: nowrap;
    text-align: center;
}

/* 第2列 - 名称：允许换行 */
#data-table th:nth-child(2),
#data-table td:nth-child(2) {
    color: var(--white);
    padding: 0px 3px;
    white-space: normal;
    word-wrap: break-word;
}

/* 第3列 - 涨幅 */
#data-table th:nth-child(3),
#data-table td:nth-child(3) {
    text-align: center;
    padding: 0px 3px;
    white-space: nowrap;
}

/* 第4列 - 现价 */
#data-table th:nth-child(4),
#data-table td:nth-child(4) {
    text-align: right;
    padding: 0px 2px;
    white-space: nowrap;
}

/* 第5列 - 净额 */
#data-table th:nth-child(5),
#data-table td:nth-child(5) {
    text-align: right;
    white-space: nowrap;
}

#data-table th[data-sort="zlje"] {
    padding: 0px 5px;
}

/* 第6列 - 空间 */
#data-table th:nth-child(6),
#data-table td:nth-child(6) {
    text-align: center;
    padding: 0px 5px;
    white-space: nowrap;
}

/* 第8列 - 成交 */
#data-table th:nth-child(8),
#data-table td:nth-child(8) {
    text-align: right;
    padding: 0px 5px;
    white-space: nowrap;
}

/* 第9列 - 题材：允许换行 */
#data-table th:nth-child(9),
#data-table td:nth-child(9) {
    text-align: left;
    padding: 0px 5px;
    white-space: normal;
    word-wrap: break-word;
}

/* 第10列 - 量比 */
#data-table th:nth-child(10),
#data-table td:nth-child(10) {
    text-align: right;
    padding: 0px 5px;
    white-space: nowrap;
}

/* 第7列 - 龙头 */
#data-table th:nth-child(7),
#data-table td:nth-child(7) {
    text-align: center;
    white-space: nowrap;
}

/* 第11列 - 人气 */
#data-table th:nth-child(11),
#data-table td:nth-child(11) {
    text-align: right;
    padding: 0px 5px;
    white-space: nowrap;
}

#data-table th[data-sort="rq"] {
    text-align: center;
}

/* 第12列 - 变化 */
#data-table th[data-sort="bh"],
#data-table td:nth-child(12) {
    text-align: center;
    padding: 0px 5px;
    white-space: nowrap;
}

/* 第13列 - 涨速 */
#data-table th[data-sort="qs"],
#data-table td:nth-child(13) {
    text-align: right;
    padding: 0px 5px;
    white-space: nowrap;
}

/* 第14列 - 市值 */
#data-table th[data-sort="lt"],
#data-table td:nth-child(14) {
    color: var(--white);
    text-align: right;
    padding: 0px 5px;
    white-space: nowrap;
}

#data-table th[data-sort="lt"] {
    padding-left: var(--sp-xs);
    padding-right: var(--sp-xs);
    margin-left: var(--sp-sm);
    margin-right: var(--sp-sm);
}

#data-table td:nth-child(14) {
    padding-left: var(--sp-xs);
    padding-right: var(--table-market-cap-padding-right);
}

/* 可点击列样式 */
.clickable {
    cursor: default;
}

/* 已选中行样式 */
.selected {
    background-color: var(--bg-selected);
}

/* 变化数字加粗 */
.font-normal {
    font-weight: normal;
}

/* 板块名称样式 */
.plate-name {
    display: inline-block;
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    vertical-align: middle;
    margin-right: 3px;
    padding-left: 15px;
    /* 板块名称右移5px */
}

#plate-table-body tr:nth-child(1) td:nth-child(1) {
    color: var(--rank-1);
}

#plate-table-body tr:nth-child(2) td:nth-child(1) {
    color: var(--rank-2);
}

#plate-table-body tr:nth-child(3) td:nth-child(1) {
    color: var(--rank-3);
}

#plate-table-body tr:nth-child(4) td:nth-child(1) {
    color: var(--rank-4);
}

#plate-table-body tr.rank-up td {
    color: var(--rank-up);
}

/* 子板块相关样式 */
.spr {
    background-color: var(--bg-sub-plate);
}

.spr td {
    padding-left: var(--sp-xl);
    color: var(--white);
}

.spr:hover,
.spr.selected:hover {
    background-color: var(--bg);
}

#plate-table-body tr.spr.selected {
    color: var(--white);
    background-color: var(--bg-selected);
}

/* 子板块样式 */
.sub-plate-row {
    background-color: #0e1b2c;
    /* 整行深背景色 */
    position: relative;
    z-index: 1;
    /* 确保在底层 */
}

.sub-plate-row td:nth-child(1),
.sub-plate-row td:nth-child(2) {
    background-color: var(--transparent);
    /* 前两列透明，继承行的背景色 */
    padding-left: 12px;
    /* 缩进一个字 */
    color: var(--white);
    position: relative;
    z-index: 1;
    /* 确保在底层 */
}

.sub-plate-row td:nth-child(2) {
    color: inherit;
    /* 强度列使用JS设置的颜色 */
}

.sub-plate-row td:nth-child(3),
.sub-plate-row td:nth-child(4),
.sub-plate-row td:nth-child(5) {
    background-color: var(--transparent);
    /* 其他列透明，继承行的背景色 */
    position: relative;
    z-index: 2;
    /* 让悬停和选中效果在上层 */
}

.sub-plate-row.hovering {
    background-color: var(--bg-row-hover-2);
    /* 悬停时整行变为深蓝色 */
}

.sub-plate-row.selected {
    /* 子板块选中样式 */
    color: var(--cyan);
    font-weight: normal;
    background-color: var(--gray-5);
    /* 子板块选中背景颜色 */
}

/* 展开/折叠功能样式 */
.has-sub-plate td:first-child {
    position: relative;
    padding-left: 20px;
    /* 增加左侧内边距，为圆点腾出空间 */
}

.has-sub-plate td:first-child::before {
    content: "+";
    position: absolute;
    left: 5px;
    /* 与屏幕最左保留5px间距 */
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray);
    pointer-events: none;
    /* 不阻止单元格的点击 */
}

.expanded td:first-child::before {
    content: "-";
}

/* 左边列表 */
#plate-table {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

#plate-table-body tr {
    transition: all 0.3s ease;
}

/* 当子版块悬停或选中时，禁止父版块行的悬停效果 */
#plate-table-body tr:not(.sub-plate-row):hover:not(.has-active-subplate):not(.has-selected-subplate) {
    background-color: var(--bg-row-hover);
    /* 鼠标滑过时背景变色 */
}

#plate-table-body tr.selected {
    color: var(--white);
    /* 被选中题材变色 */
    background-color: var(--bg-row-hover);
    /* 背景色变青色 */
    font-weight: normal;
}

#plate-table-body tr.selected td {
    color: inherit;
    /* 继承行的文字颜色 */
}

/* 板块表格行样式 */
#plate-table-body tr.sub-plate-row {
    color: inherit;
    /* 继承行的文字颜色 */
}

#plate-table-body tr.sub-plate-row.selected {
    /* 子板块选中样式 */
    color: var(--cyan);
    font-weight: normal;
    background-color: var(--gray-5);
    /* 子板块选中背景颜色 */
}

#plate-table-body tr.sub-plate-row.selected.hovering {
    background-color: var(--bg-row-hover-2);
    /* 子板块选中悬停背景颜色 */
}

/* 新增样式 - 右边列表 */
#data-table-body tr {
    transition: all 0.3s ease;
    position: relative;
    /* 为下划线定位做准备 */
}

#data-table-body tr:hover {
    background-color: var(--bg-row-hover-3);
    /* 鼠标滑过时背景变色 */
}

#data-table-body tr.selected {
    background-color: var(--bg-row-selected);
    /* 背景色变青色 */
}

#market-overview-container {
    width: 100%;
    max-width: 900px;
    /* 增加整体宽度 */
    margin: 0 auto 8px;
    /*   外边距   */
    padding: 0 5px;
    /*   内边距   */
    box-sizing: border-box;
}

/* 强制页面所有文本为常规（不加粗） */
/* 使用  覆盖内联或其他样式中设置的加粗 */
body,
body * {
    font-weight: normal;
}

/* 板块标题按钮样式 */
#plate-refresh-btn {
    background: none;
    border: none;
    color: inherit;
    font-size: inherit;
    font-weight: normal;
    cursor: default;
    padding: 0;
    margin: 0;
    text-align: left;
    position: relative;
    padding-left: 20px;
}

#plate-refresh-btn:hover {
    text-decoration: none;
}

#plate-refresh-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* 净额列、成交列、量比列前10名颜色 */
.top10-value {
    color: #d2d2d2;
}

/* 净额列、成交列、量比列其他值颜色 */
.normal-value {
    color: #888888;
}

/* 市值列大于等于100亿颜色 */
.market-cap-large {
    color: #d2d2d2;
}

/* 市值列小于100亿颜色 */
.market-cap-small {
    color: #888888;
}

/* 变化列前6个最大值样式 */
.top-change-value {
    color: #d2d3d3;
}

/* 实时监控指示器样式 */
.monitor-indicator {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--monitor);
    vertical-align: middle;
    animation: breathe 1s infinite alternate;
}



/* 呼吸动画效果：在红色和橙色之间切换 */
@keyframes breathe {
    0% {
        background-color: #FFA500;
        box-shadow: 0 0 2px #FFA500;
    }

    100% {
        background-color: #FF0000;
        box-shadow: 0 0 5px #FF0000;
    }
}

/* 自定义右键菜单样式 */
#custom-context-menu {
    position: fixed;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 5px 0;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    font-size: var(--fs-sm);
}

/* 容器切换箭头样式 */
#left-arrow,
#right-arrow {
    color: #e26f04;
    cursor: default;
    margin-right: 1px;
}

#right-arrow {
    margin-left: 1px;
    display: none;
}



#custom-context-menu .menu-item {
    padding: 5px 15px;
    cursor: default;
    color: #d2d3d3;
}

#custom-context-menu .menu-item:hover {
    background-color: #555;
}



.monitor-indicator.off {
    background-color: #d2d3d3;
    animation: none;
    box-shadow: none;
}

/* 静默更新动画效果 - 已移除背景色和过渡效果以避免闪烁 */
.updating {
    /* 移除背景色和过渡效果，避免表格刷新时闪烁 */
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0.7;
    }

    to {
        opacity: 1;
    }
}

/* 全局禁止文本选择 */
body {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* 全局鼠标指针样式：强制所有元素使用普通箭头 */
*,
*:before,
*:after,
body,
html {
    cursor: default !important;
}



.title {
    font-size: var(--fs-title);
    margin-bottom: 0px;
    font-weight: normal;
    text-align: center;
    color: var(--yellow);
}

.item {
    margin-bottom: var(--mb-item);
    padding-bottom: var(--padb-item);
    transition: all 0.3s ease;
    cursor: default;
    /* 鼠标指针样式 */
}

.item:hover {
    background-color: var(--bg-hover);
    /* 鼠标悬停背景颜色 */
}

/* 通用颜色类 */
.color-red {
    color: var(--red);
}

.color-green {
    color: var(--green);
}

.color-gray {
    color: var(--gray-text);
}

.color-yellow {
    color: var(--yellow);
}

/* 特殊状态颜色 */
.plate-value-positive {
    color: var(--red);
}

.plate-value-negative {
    color: var(--green);
}

/* 基础布局 */
body {
    background-color: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-family);
    font-size: var(--fs-global);
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
}

/* 左侧容器 */
#left-container {
    width: 300px;
    min-width: 300px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-primary);
}

/* 右侧容器 */
#right-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--bg-primary);
}

/* 表格基础样式 */
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: var(--pad-cell);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: var(--h-cell);
    line-height: var(--lineh-cell);
    box-sizing: border-box;
}

th {
    background-color: var(--bg-header);
    position: sticky;
    top: 0;
    z-index: 10;
    cursor: pointer;
    /* 鼠标指针样式 */
    text-align: left;
    height: var(--h-header); /* 表头使用25px高度，与dxb.html保持一致 */
}

/* 通用样式类 */
.highlight {
    color: var(--cyan);
    /* 青色文本 */
}

.limit-change {
    color: var(--rank-2);
    /* 橙色文本 */
}

.limit-down {
    color: var(--rank-4);
    /* 蓝色文本 */
}

a {
    color: inherit;
    /* 继承父元素颜色 */
    text-decoration: none;
    /* 去除下划线 */
}

a:hover {
    text-decoration: none;
    /* 去除鼠标悬停时下划线 */
    cursor: default;
    /* 鼠标指针样式 */
}

/* 滚动条隐藏 */
body::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

body {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* 隐藏所有滚动条 */
::-webkit-scrollbar {
    display: none;
}

/* IE and Edge */
* {
    -ms-overflow-style: none;
}

/* Firefox */
* {
    scrollbar-width: none;
}

/* 剩余样式 */
.item {
    padding-bottom: var(--padb-item);
    transition: background-color 0.3s;
    cursor: default;
}

.item:hover {
    background-color: var(--bg-hover);
}

/* ===== 通用颜色类 ===== */
.color-red,
.red {
    color: var(--red);
}

.color-green,
.green {
    color: var(--green);
}

.color-white,
.white {
    color: var(--white);
}

.color-pink,
.pink {
    color: var(--pink);
}

.color-yellow,
.yellow {
    color: var(--yellow);
}

.color-orange,
.orange {
    color: var(--orange);
}

.color-gray,
.huise {
    color: var(--gray);
}

/* ===== 特殊状态颜色 ===== */
.plate-value-positive {
    color: var(--red);
}

.plate-value-negative {
    color: var(--green);
}

.plate-value-zero {
    color: var(--white);
}

.zt-zb {
    background: var(--bg-up);
    color: var(--white);
}

/* 容器样式 */
#container {
    width: 100%;
    max-width: none;
    margin: 0px auto 0;
    overflow-x: auto;
    display: flex;
    gap: var(--sp-xs);
    min-height: 400px;
    flex-shrink: 0;
    height: 100vh;
}

#left-container {
    width: auto;
    min-width: max-content;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background-color: transparent;
    transition: all 0.3s ease;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    flex-shrink: 0;
    white-space: nowrap;
}

#left-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

#right-container {
    width: auto;
    min-width: max-content;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: auto;
    background-color: transparent;
    transition: all 0.3s ease;
    /* 隐藏滚动条 */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
    flex-shrink: 0;
    white-space: nowrap;
}

#right-container::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

/* ===== 表格基础样式 ===== */
table {
    width: auto;
    min-width: 100%;
    border-collapse: collapse;
    margin-top: 0;
    table-layout: auto;
    /* 允许根据内容自适应宽度，避免列被强制压缩 */
    background-color: transparent;
}

/* 左侧表格特定布局 */
#plate-table {
    table-layout: auto;
    /* 确保表头和内容同步调整宽度 */
}

/* 右侧表格：不换行，强制表格按内容宽度扩展并允许横向滚动显示全部列 */
#data-table {
    width: auto;
    min-width: max-content;
}

/* 表格基础样式 */
th,
td {
    border: none;
    padding: var(--pad-cell);
    color: var(--white);
    white-space: nowrap;
    line-height: var(--lineh-cell);
    height: var(--h-cell);
}

/* 表头样式 */
th {
    background-color: var(--bg-header);
    font-weight: normal;
    text-align: center;
    cursor: default;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

th:hover {
    background-color: var(--bg-th-hover);
}

/* 表格单元格样式 */
td {
    text-align: left;
    vertical-align: middle;
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

/* 左侧表格单元格样式 */
#plate-table th,
#plate-table td {
    white-space: nowrap;
    /* 防止换行 */
    height: var(--h-cell);
    line-height: var(--lineh-cell);
    padding: var(--pad-cell);
    vertical-align: middle;
}

/* 左侧表格表头样式 */
#plate-table th {
    text-align: center;
}

/* 左侧表格数据单元格样式 */
#plate-table td {
    text-align: left;
}

/* 右侧表格单元格样式 */
#data-table th,
#data-table td {
    height: var(--h-cell);
    line-height: var(--lineh-cell);
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 0;
    height: 0;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

/* 通用样式类 */
.highlight {
    color: var(--orange);
    font-weight: normal;
}

.limit-change {
    background-color: var(--bg-up);
    color: var(--white);
    font-weight: normal;
    position: relative;
    z-index: 100;
    border-radius: 1px;
}

.limit-down {
    background-color: var(--bg-down);
    color: var(--white);
    font-weight: normal;
    position: relative;
    z-index: 100;
    border-radius: 1px;
    height: 20px;
}

a {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

/* 股票类型颜色样式（已移除未使用的CSS类） */
/* 注：股票颜色通过内联样式直接设置，而非使用CSS类 */

/* 左侧表格各列样式 */

/* 第1列 - 板块 */
#plate-table th:nth-child(1) {
    text-align: left;
    padding-left: var(--table-plate-padding-left);
    padding-right: var(--spacing-xs);
    color: var(--white);
}

#plate-table td:nth-child(1) {
    padding-left: var(--table-plate-padding-left);
    padding-right: var(--sp-xs);
}

/* 第2列 - 强度 */
#plate-table th:nth-child(2),
#plate-table td:nth-child(2) {
    text-align: center;
}

#plate-table td:nth-child(2) {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
}

/* 第3列 - 涨幅 */
#plate-table th:nth-child(3),
#plate-table td:nth-child(3) {
    text-align: center;
}

#plate-table td:nth-child(3) {
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
}

/* 第4列 - 净额 */
#plate-table th:nth-child(4) {
    text-align: center;
}

#plate-table td:nth-child(4) {
    text-align: right;
    padding-left: var(--sp-sm);
    padding-right: var(--sp-sm);
}

/* 第5列 - 涨停 */
#plate-table th:nth-child(5),
#plate-table td:nth-child(5) {
    text-align: center;
}

#plate-table td:nth-child(5) {
    padding-left: var(--sp-xs);
    padding-right: var(--sp-xs);
}

/* 右侧表格统一样式 */
/* 右侧表格表头基础样式 */
#data-table th {
    color: var(--white);
    text-align: center;
    width: auto;
    white-space: nowrap;
}

/* 右侧表格表头悬停效果 */
#data-table th:hover {
    background-color: var(--bg-row-hover-2);
}

/* 第2列 - 名称 */
#data-table td:nth-child(2) {
    color: var(--white);
    padding: 0px 3px;
}

/* 第3列 - 涨幅 */
#data-table td:nth-child(3) {
    text-align: center;
    padding: 0px 3px;
}

/* 第4列 - 现价 */
#data-table td:nth-child(4) {
    text-align: right;
    padding: 0px 2px;
}

/* 第5列 - 净额 */
#data-table th[data-sort="zlje"] {
    text-align: center;
    padding: 0px 15px;
}