/*
 * 终端金融数据系统 CSS 规范 (Terminal Design System)
 * 专为高密度、长时间注视的深色环境设计
 */

:root {
  /* ================= 1. 背景色系统 (深色低对比) ================= */
  --bg-app: #0E1015;          /* 软件底层级背景 */
  --bg-panel: #15181E;        /* 面板/卡片背景 */
  --bg-hover: #21262E;        /* 列表悬停/选中背景 */
  --bg-border: #2B303B;       /* 分割线/边框颜色 */

  /* ================= 2. 文字色系统 ================= */
  --text-primary: #DDE2E8;    /* 核心文字：名称、重要数据 (非纯白，防眩光) */
  --text-secondary: #8A939E;  /* 辅助文字：表头、非核心维度 */
  --text-muted: #4A5361;      /* 极弱文字：时间、无关紧要的描述 */

  /* ================= 3. A股信号色系统 (核心) ================= */
  --up-color: #E6413A;        /* 涨幅红 (哑光，去刺眼) */
  --up-bg: rgba(230, 65, 58, 0.15); /* 涨幅高亮底色 (如涨停标签) */

  --down-color: #28A745;      /* 跌幅绿 (沉稳) */
  --down-bg: rgba(40, 167, 69, 0.15);

  --limit-up-color: #FF5E56;  /* 涨停极值红 (略亮于普通红) */
  --broken-color: #D9A400;    /* 炸板/警示暗金 */
  --broken-bg: rgba(217, 164, 0, 0.15);

  /* ================= 4. 交互色 (禁止用红绿) ================= */
  --accent: #3685DF;          /* 选中/聚焦状态蓝 (Tab当前项等) */
  --accent-hover: #4B9BEE;
  --accent-bg: rgba(54, 133, 223, 0.15);
}

/* 全局基准样式 */
* { margin:0; padding:0; box-sizing:border-box; }
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  user-select: none;
}

/* 核心：解决数字跳动时的排版抖动 */
.num, .price, .percent, td[data-type="number"], .tabular-nums {
  font-family: Arial, Consolas, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* 信号色通用类 */
.is-up { color: var(--up-color) !important; }
.is-down { color: var(--down-color) !important; }
.is-limit-up {
  color: var(--limit-up-color) !important;
  background-color: var(--up-bg);
  padding: 1px 4px;
  border-radius: 2px;
}
.is-broken { color: var(--broken-color) !important; }

/* 极简滚动条 */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }

/* ===== 顶部导航 ===== */
.top-bar { display:flex; align-items:center; height:28px; padding:0 16px; background:var(--bg-app); border-bottom:1px solid var(--bg-border); position:relative; z-index:10; }
.top-bar .logo { color:var(--text-primary); font-size:11px; font-weight:bold; margin-right:30px; white-space:nowrap; }
.nav-tabs { display:flex; gap:16px; height:100%; align-items:flex-end; padding-left:8px; }
.nav-tabs .tab {
  cursor:pointer; padding:4px 12px; background:transparent; color:var(--text-secondary);
  font-size:11px; font-weight:normal; transition:all .1s; border-bottom:2px solid transparent;
}
.nav-tabs .tab:hover { color:var(--text-primary); }
.nav-tabs .tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.nav-tabs .tab.disabled { color:var(--text-muted); cursor:default; }
.status-dot { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:11px; font-family:Arial, sans-serif; padding:2px 6px; }
.status-dot .dot { width:6px; height:6px; border-radius:50%; background:var(--text-muted); }
.status-dot .dot.ok { background:var(--down-color); }
.status-dot .dot.busy { background:var(--broken-color); }
.status-dot .dot.dead { background:var(--up-color); }

/* ===== 模块面板 ===== */
.panel-container { position:relative; width:100%; height:calc(100vh - 28px); overflow:hidden; }
.panel { position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; background:var(--bg-app); visibility:hidden; pointer-events:none; }
.panel.active { visibility:visible; pointer-events:auto; z-index:1; }

/* ===== 布局系统 ===== */
.market-layout, .news-layout, .concept-layout { display:flex; width:100%; height:100%; flex:1; }
.market-left, .news-left, .concept-left { width:220px; min-width:200px; border-right:1px solid var(--bg-border); display:flex; flex-direction:column; overflow:hidden; background:var(--bg-panel); z-index:2; }
.market-right, .news-right, .concept-right { flex:1; display:flex; flex-direction:column; overflow:hidden; background:var(--bg-app); }

.workspace-layout { display:flex; width:100%; height:100%; flex:1; overflow:hidden; background:var(--bg-app); }
.ws-col { display:flex; flex-direction:column; overflow:hidden; }
.ws-col-left { background:var(--bg-panel); }
.ws-col-mid { background:var(--bg-app); z-index:1; }
.ws-col-right { background:var(--bg-panel); }
.ws-sub-title { padding:4px 8px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); font-size:11px; color:var(--text-secondary); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; font-weight:bold; }

@media (max-width: 600px) {
  .workspace-layout { flex-direction:column; overflow-y:auto; }
  .ws-col { flex:none !important; width:100% !important; height:auto; min-height:300px; border-left:none !important; border-right:none !important; border-bottom:2px solid var(--bg-border); }
}

/* 通用标题栏 */
.section-title { padding:4px 8px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); font-size:11px; color:var(--text-secondary); display:flex; align-items:center; justify-content:space-between; z-index:2; position:relative; }
.section-title span { font-weight:normal; }
.section-title .refresh-btn { cursor:pointer; color:var(--text-secondary); font-size:11px; padding:2px 6px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; transition:all .1s; }
.section-title .refresh-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }

/* ===== 板块列表 ===== */
#hotSectorList { overflow-y:auto; border-bottom:1px solid var(--bg-border); padding:2px 0; max-height:200px; flex-shrink:0; }
.sector-item { display:flex; align-items:center; padding:4px 8px; cursor:pointer; border-bottom:1px solid var(--bg-border); transition:all .1s; }
.sector-item:hover { background:var(--bg-hover); }
.sector-item.active { background:var(--bg-hover); border-left:2px solid var(--accent); }
.sector-item .s-rank { width:20px; font-size:11px; color:var(--text-muted); flex-shrink:0; text-align:center; }
.sector-item .s-rank.top3 { color:var(--broken-color); }
.sector-item .s-name { flex:1; font-size:11px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:4px; }
.sector-item .s-chg { width:44px; text-align:right; font-size:11px; font-family:Arial, sans-serif; font-variant-numeric:tabular-nums; font-weight:700; flex-shrink:0; }
.sector-item .s-flow { width:50px; text-align:right; font-size:11px; color:var(--text-secondary); font-family:Arial, sans-serif; font-variant-numeric:tabular-nums; flex-shrink:0; }
.s-chg-up { color:var(--up-color); }
.s-chg-dn { color:var(--down-color); }
.s-chg-flat { color:var(--text-secondary); }

/* ===== 板块成分股面板 ===== */
#sectorPanel { display:none; flex-direction:column; height:100%; }
#sectorPanel .sp-header { display:flex; align-items:center; padding:4px 8px; border-bottom:1px solid var(--bg-border); background:var(--bg-panel); gap:8px; flex-shrink:0; }
#sectorPanel .sp-title { font-size:11px; font-weight:bold; color:var(--text-primary); }
#sectorPanel .sp-src { font-size:11px; color:var(--text-muted); font-family:Arial, sans-serif; margin-left:4px; }
#sectorPanel .sp-back { margin-left:auto; background:var(--bg-app); border:1px solid var(--bg-border); color:var(--text-secondary); font-size:11px; padding:2px 8px; border-radius:2px; cursor:pointer; }
#sectorPanel .sp-back:hover { color:var(--text-primary); border-color:var(--text-muted); }
#sectorStocks { flex:1; overflow-y:auto; }
.stock-row { display:flex; align-items:center; padding:4px 8px; border-bottom:1px solid var(--bg-border); transition:background .1s; }
.stock-row:hover { background:var(--bg-hover); }
.stock-row .st-rank { width:20px; font-size:11px; color:var(--text-muted); flex-shrink:0; text-align:center; }
.stock-row .st-code { width:46px; font-size:11px; color:var(--text-muted); font-family:Arial, sans-serif; flex-shrink:0; }
.stock-row .st-name { width:64px; font-size:11px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; margin-left:4px; }
.stock-row .st-zt { width:40px; font-size:10px; color:var(--broken-color); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; }
.stock-row .st-chg { width:44px; text-align:right; font-size:11px; font-family:Arial, sans-serif; font-variant-numeric:tabular-nums; font-weight:700; flex-shrink:0; }
.stock-row .st-net { width:56px; text-align:right; font-size:11px; font-family:Arial, sans-serif; font-variant-numeric:tabular-nums; flex-shrink:0; }
.stock-row .st-rt { width:16px; font-size:10px; color:var(--down-color); text-align:center; flex-shrink:0; }

/* ===== 概念统计 ===== */
.concept-stats { padding:8px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--bg-border); }
.stat-card { flex:1; min-width:80px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; padding:6px 4px; text-align:center; transition:background .1s; cursor:default; }
.stat-card:hover { background:var(--bg-hover); border-color:var(--text-muted); }
.stat-card .stat-val { font-size:11px; font-weight:700; color:var(--up-color); font-family:Arial, sans-serif; }
.stat-card .stat-label { font-size:11px; color:var(--text-secondary); margin-top:2px; font-weight:normal; }
.stat-card.green .stat-val { color:var(--down-color); }
.stat-card.blue .stat-val { color:var(--accent); }

/* ===== 概念列表 ===== */
.concept-list-area { flex:1; overflow-y:auto; padding:0 8px 8px; }
.concept-group { margin-bottom:8px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; overflow:hidden; transition:border .1s; }
.concept-group:hover { border-color:var(--text-muted); }
.concept-group-header { display:flex; align-items:center; padding:6px 8px; cursor:pointer; border-bottom:1px solid var(--bg-border); background:var(--bg-panel); transition:background .1s; }
.concept-group-header:hover { background:var(--bg-hover); }
.concept-group-header .concept-name { flex:1; font-size:11px; font-weight:bold; color:var(--text-primary); }
.concept-group-header .concept-badge { font-size:10px; padding:1px 4px; border-radius:2px; margin-left:4px; }
.badge-add { background:var(--up-bg); color:var(--up-color); border:1px solid var(--up-color); }
.badge-del { background:var(--down-bg); color:var(--down-color); border:1px solid var(--down-color); }
.concept-group-header .concept-time { font-size:10px; color:var(--text-muted); margin-left:6px; font-family:Arial, sans-serif; }

.concept-stock-list { padding:4px 8px 8px; background:var(--bg-app); }
.concept-stock { display:flex; align-items:center; padding:4px 0; font-size:11px; border-bottom:1px solid var(--bg-border); }
.concept-stock:last-child { border-bottom:none; }
.concept-stock .stock-dir { width:16px; font-size:11px; font-weight:normal; color:var(--text-secondary); }
.concept-stock .stock-tag { font-size:9px; padding:1px 4px; border-radius:2px; margin-right:4px; border:1px solid var(--bg-border); color:var(--text-secondary); }
.tag-沪 { color:var(--broken-color); }
.tag-深 { color:var(--accent); }
.tag-创 { color:var(--down-color); }
.tag-科 { color:var(--up-color); }
.concept-stock .stock-name { flex:1; color:var(--text-primary); }
.concept-stock .stock-name:hover { color:var(--accent); cursor:pointer; }
.concept-stock .stock-code { color:var(--text-muted); font-size:11px; font-family:Arial, sans-serif; background:transparent; padding:0; margin-left:4px; }

.concept-timeline { flex:1; overflow-y:auto; background:var(--bg-app); border-bottom:1px solid var(--bg-border); }
.monitor-status { padding:6px 8px; background:var(--bg-panel); border-top:1px solid var(--bg-border); display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-secondary); }
.monitor-status .mon-dot { width:6px; height:6px; border-radius:50%; }
.mon-dot.alive { background:var(--down-color); }
.mon-dot.dead { background:var(--up-color); }
.mon-dot.offline { background:var(--text-muted); }

/* ===== 占位面板 ===== */
.placeholder-wrap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; height:100%; color:var(--text-muted); font-size:11px; gap:8px; background:var(--bg-app); }
.placeholder .icon { font-size:24px; opacity:0.5; }

/* ===== 工具栏 ===== */
.toolbar { display:flex; align-items:flex-end; height:28px; padding:0 8px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); gap:16px; flex-shrink:0; }
.toolbar .title { font-size:12px; font-weight:normal; color:var(--accent); margin-bottom: 4px; }
.toolbar .badge { font-size:9px; background:var(--accent-bg); border:1px solid var(--accent); color:var(--accent); padding:1px 4px; border-radius:2px; font-weight: normal; margin-bottom: 4px; }
.toolbar .time { margin-left:auto; color:var(--text-muted); font-size:10px; font-weight: normal; margin-bottom: 4px; }
.toolbar .refresh-btn { cursor:pointer; padding:1px 6px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; color:var(--text-secondary); font-size:11px; transition:all .1s; margin-bottom: 4px; display:inline-flex; align-items:center; justify-content:center; }
.toolbar .refresh-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }

/* ===== 搜索框 ===== */
.search-box { display:flex; align-items:center; gap:6px; margin-left:8px; margin-bottom: 4px; }
.search-box input { background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; color:var(--text-primary); padding:2px 8px; font-size:11px; font-family:Arial, sans-serif; width:100px; outline:none; transition:border-color .1s; height: 20px;}
.search-box input:focus { border-color:var(--accent); }
.search-box input::placeholder { color:var(--text-muted); font-family:"Microsoft YaHei", sans-serif; }
.search-box button { cursor:pointer; padding:0 8px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; color:var(--text-secondary); font-size:11px; transition:all .1s; white-space:nowrap; height: 20px;}
.search-box button:hover { color:var(--text-primary); border-color:var(--text-muted); }

/* ===== 主内容区 ===== */
.main { flex:1; overflow:hidden; display:flex; flex-direction:column; }
.list-wrap { flex:1; overflow-y:auto; }
.list-wrap::-webkit-scrollbar { width:4px; }
.list-wrap::-webkit-scrollbar-track { background:transparent; }
.list-wrap::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
.list-wrap::-webkit-scrollbar-thumb:hover { background:var(--text-secondary); }

/* ===== 卡片 ===== */
.card { padding:8px 12px; border-bottom:1px solid var(--bg-border); transition:background .1s; }
.card:hover { background:var(--bg-hover); }
.card-header { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.card-company { font-size:12px; font-weight:normal; color:var(--text-primary); }
.card-code { font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; padding:1px 4px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; cursor:pointer; font-weight: normal; }
.card-code:hover { color:var(--accent); border-color:var(--accent); }
.card-date { font-size:10px; color:var(--text-muted); margin-left:auto; font-weight: normal; }
.card-ask { background:var(--accent-bg); border-left:2px solid var(--accent); border-radius:0 2px 2px 0; padding:4px 8px; margin-bottom:4px; }
.card-ask-label { font-size:9px; color:var(--accent); margin-bottom:2px; }
.card-ask-text { font-size:11px; color:var(--text-primary); line-height:1.4; font-family:"Microsoft YaHei", sans-serif; }
.card-reply { background:var(--down-bg); border-left:2px solid var(--down-color); border-radius:0 2px 2px 0; padding:4px 8px; }
.card-reply-label { font-size:9px; color:var(--down-color); margin-bottom:2px; }
.card-reply-text { font-size:11px; color:var(--text-primary); line-height:1.4; font-family:"Microsoft YaHei", sans-serif; }
.card-no-reply { font-size:10px; color:var(--text-muted); padding:2px 0; }
.reply-date { font-size:9px; color:var(--text-muted); margin-top:2px; font-weight: normal; }

.empty { padding:40px 24px; text-align:center; color:var(--text-muted); font-size:12px; line-height:2; }
.loading { padding:24px; text-align:center; color:var(--text-muted); font-size: 12px; }

.stock-header { display:flex; align-items:center; gap:8px; padding:4px 12px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); font-size:11px; color:var(--text-secondary); flex-shrink:0; }
.stock-header .sh-name { font-size:12px; font-weight:normal; color:var(--text-primary); }
.stock-header .sh-cnt { color:var(--text-secondary); font-family:Arial, sans-serif; }

/* ===== 表格 ===== */
.table-wrap { flex:1; overflow:auto; }
table { width:100%; border-collapse:collapse; table-layout:fixed; min-width:900px; }
thead { position:sticky; top:0; z-index:5; }
th { background:var(--bg-panel); color:var(--text-secondary); font-weight:normal; font-size:11px; padding:4px 8px; border-bottom:1px solid var(--bg-border); cursor:pointer; white-space:nowrap; user-select:none; text-align:right; position:relative; }
th:hover { color:var(--text-primary); }
th.sort-asc::after { content:" ▲"; color:var(--accent); font-size:9px; }
th.sort-desc::after { content:" ▼"; color:var(--accent); font-size:9px; }
th:first-child, th:nth-child(2), th:nth-child(3) { text-align:left; }
td { padding:4px 8px; border-bottom:1px solid var(--bg-border); font-size:12px; font-family:Arial, Consolas, sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; transition:background .1s; }
td:first-child, td:nth-child(2), td:nth-child(3) { text-align:left; }
tr:hover td { background:var(--bg-hover); }

/* ===== 颜色类 ===== */
.up { color:var(--up-color) !important; font-weight:700; }
.dn { color:var(--down-color) !important; font-weight:700; }
.flat { color:var(--text-secondary); font-weight:700; }

/* ===== 筛选按钮 ===== */
.filter-bar { display:flex; align-items:center; height:28px; padding:0 8px; background:var(--bg-app); border-bottom:1px solid var(--bg-border); gap:6px; flex-shrink:0; }
.filter-btn { cursor:pointer; padding:2px 8px; background:var(--bg-app); color:var(--text-secondary); border:1px solid var(--bg-border); border-radius:2px; font-size:11px; transition:all .1s; display:inline-flex; align-items:center; justify-content:center; }
.filter-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }
.filter-btn.active { color:var(--accent); background:var(--accent-bg); border-color:var(--accent); }
.filter-sep { width:1px; height:12px; background:var(--bg-border); margin:0 4px; }
.sort-info { margin-left:auto; color:var(--text-muted); font-size:10px; }

/* ===== 模块Tab ===== */
.mod-tabs { display:flex; gap:16px; height:100%; align-items:flex-end; }
.mod-tab { cursor:pointer; padding:4px 8px; background:transparent; color:var(--text-secondary); font-size:12px; font-weight:normal; border-bottom:2px solid transparent; transition:all .1s; }
.mod-tab:hover { color:var(--text-primary); }
.mod-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }

/* ===== 按钮样式 ===== */
.btn { padding:2px 10px; border:1px solid var(--bg-border); border-radius:3px; background:transparent; color:var(--text-secondary); cursor:pointer; font-size:11px; transition:all .15s; }
.btn:hover { border-color:var(--accent); color:var(--text-primary); }
.btn.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ===== 云图相关 ===== */
.logo { color:var(--accent); font-size:13px; font-weight:bold; flex-shrink:0; }
.top-sep { color:var(--text-muted); font-size:11px; }
.top-hint { color:var(--text-secondary); font-size:11px; flex-shrink:0; }
.top-stat { color:var(--text-muted); font-size:11px; margin-left:auto; white-space:nowrap; }
.ctrl-bar { display:flex; align-items:center; height:26px; padding:0 10px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); gap:6px; }
.legend { display:flex; align-items:center; margin-left:auto; gap:5px; font-size:10px; color:var(--text-muted); }
.legend-label { font-size:10px; }
.legend-bar { width:140px; height:10px; border-radius:2px; background:linear-gradient(to right,#145A32,#1E8449,#27AE60,#D5F5E3,#2B303B,#FADBD8,#E74C3C,#C0392B,#8B0000); }

#loading { display:flex; align-items:center; justify-content:center; height:calc(100vh - 54px); color:var(--text-muted); font-size:14px; }
#chart { width:100%; height:calc(100vh - 54px); display:none; }

/* ===== 悬浮弹窗 ===== */
#stkPop { position:fixed; z-index:9999; display:none; background:var(--bg-panel); border:1px solid var(--bg-border); border-radius:6px; padding:12px 14px; width:270px; box-shadow:0 6px 24px rgba(0,0,0,.75); pointer-events:none; }
.sp-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--bg-border); }
.sp-name { font-size:14px; font-weight:bold; }
.sp-code { font-size:11px; color:var(--text-muted); margin-top:2px; }
.sp-chg { font-size:20px; font-weight:bold; font-family:Arial,Consolas,sans-serif; text-align:right; }
.sp-price { font-size:11px; color:var(--text-muted); text-align:right; margin-top:2px; }
.sp-rows { display:flex; flex-direction:column; gap:4px; }
.sp-row { display:flex; justify-content:space-between; align-items:center; }
.sp-label { color:var(--text-muted); font-size:11px; }
.sp-val { font-family:Arial,Consolas,sans-serif; font-size:11px; font-weight:600; color:var(--text-secondary); }
.sp-sect { margin-top:8px; padding-top:6px; border-top:1px solid var(--bg-border); font-size:10px; color:var(--text-muted); }

/* ===== 板块弹窗 ===== */
#secPop { position:fixed; z-index:9999; display:none; background:var(--bg-panel); border:1px solid var(--bg-border); border-radius:6px; padding:10px 12px; width:300px; max-height:420px; overflow-y:scroll; box-shadow:0 6px 24px rgba(0,0,0,.75); pointer-events:auto; }
.sec-head { font-size:13px; font-weight:bold; margin-bottom:6px; padding-bottom:5px; border-bottom:1px solid var(--bg-border); display:flex; justify-content:space-between; align-items:center; }
.sec-head-chg { font-size:13px; font-weight:bold; font-family:Arial,Consolas,sans-serif; }
.sec-list { display:flex; flex-direction:column; gap:2px; }
.sec-item { display:flex; justify-content:space-between; align-items:center; padding:2px 0; }
.sec-item-name { font-size:11px; color:var(--text-secondary); width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sec-item-chg { font-size:11px; font-family:Arial,Consolas,sans-serif; font-weight:600; text-align:right; min-width:52px; }
.sec-item-bar { flex:1; margin:0 8px; height:6px; border-radius:2px; background:var(--bg-border); }
.sec-item-bar-fill { height:6px; border-radius:2px; min-width:2px; }
.sec-sub-title { font-size:10px; color:var(--accent); padding:5px 0 2px; border-top:1px solid var(--bg-border); margin-top:3px; font-weight:bold; letter-spacing:0.5px; }
.sec-sub-title:first-child { border-top:none; margin-top:0; padding-top:2px; }

/* ===== AI个股分析 ===== */
.toolbar input { width:100px; height:24px; background:var(--bg-panel); border:1px solid var(--bg-border); border-radius:3px; color:var(--text-primary); padding:0 6px; font-size:12px; outline:none; }
.toolbar input:focus { border-color:var(--accent); }
.toolbar button { height:24px; padding:0 14px; background:var(--accent); border:none; border-radius:3px; color:#fff; font-size:12px; cursor:pointer; }
.toolbar button:hover { background:#4B9BEE; }
.toolbar button:disabled { opacity:.5; cursor:not-allowed; }
.toolbar .status { margin-left:auto; color:var(--text-muted); font-size:11px; }
.toolbar .hint { color:var(--text-muted); font-size:11px; }

.main { flex:1; overflow-y:auto; padding:8px; }
.card { background:var(--bg-panel); border:1px solid var(--bg-border); border-radius:6px; margin-bottom:8px; padding:10px 12px; }
.card-title { font-size:13px; font-weight:700; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--bg-border); display:flex; align-items:center; gap:6px; }
.card-title .icon { font-size:15px; }
.card-title .badge { font-size:10px; font-weight:400; color:var(--text-muted); margin-left:auto; }
.ph { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.ph .name { font-size:18px; font-weight:700; }
.ph .code { color:var(--text-secondary); font-size:13px; }
.ph .latest { font-size:28px; font-weight:700; }
.ph .chg { font-size:14px; font-weight:700; }
.pi { display:flex; gap:16px; margin-top:6px; color:var(--text-secondary); font-size:11px; }
.sw { display:flex; align-items:center; gap:16px; margin-top:10px; }
.gauge { position:relative; width:100px; height:56px; overflow:hidden; }
.gauge svg { width:100px; height:56px; }
.gauge .val { position:absolute; bottom:2px; left:50%; transform:translateX(-50%); font-size:22px; font-weight:700; }
.vb { flex:1; }
.vb .vd { font-size:16px; font-weight:700; margin-bottom:4px; }
.vb .adv { color:var(--text-secondary); font-size:12px; line-height:1.6; }
.ig { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; }
.ic { background:var(--bg-panel); border-radius:4px; padding:8px; }
.ic .label { color:var(--text-secondary); font-size:11px; margin-bottom:4px; }
.ic .val { font-size:14px; font-weight:700; }
.ic .sub { color:var(--text-muted); font-size:10px; margin-top:2px; }
.sr-row { display:flex; gap:8px; }
.sr-col { flex:1; }
.sr-col table { width:100%; border-collapse:collapse; font-size:11px; }
.sr-col th { text-align:left; color:var(--text-secondary); font-weight:400; padding:4px; border-bottom:1px solid var(--bg-border); }
.sr-col td { padding:4px; border-bottom:1px solid rgba(43,48,59,.4); }
.stag { display:inline-block; padding:1px 5px; border-radius:2px; font-size:10px; }
.pl { display:flex; flex-wrap:wrap; gap:6px; }
.pt { display:inline-flex; align-items:center; gap:4px; padding:4px 8px; border-radius:4px; font-size:11px; border:1px solid var(--bg-border); background:var(--bg-panel); }
.pt .m { color:var(--text-secondary); font-size:10px; }
.dl { display:flex; flex-wrap:wrap; gap:4px 16px; }
.di { font-size:11px; line-height:1.8; }
.di .lbl { color:var(--text-secondary); margin-right:4px; }
.empty { display:flex; align-items:center; justify-content:center; height:60vh; color:var(--text-muted); font-size:14px; flex-direction:column; gap:10px; }
.empty .big { font-size:36px; opacity:.3; }
.up { color:var(--up-color); }
.dn { color:var(--down-color); }
.disc { text-align:center; color:var(--text-muted); font-size:10px; padding:6px; }
.sl { display:flex; flex-direction:column; gap:3px; }
.srow { display:flex; align-items:center; gap:6px; padding:4px 6px; background:var(--bg-panel); border-radius:4px; font-size:11px; }
.srow .sn { flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.srow .sv { width:50px; text-align:right; font-weight:700; }
.srow .ss { width:40px; text-align:right; font-size:10px; }
.srow .sr { width:70px; text-align:right; color:var(--text-muted); font-size:10px; }
.pbw { margin-top:8px; }
.pb { width:100%; height:8px; background:var(--bg-border); border-radius:4px; position:relative; }
.pd { position:absolute; top:-3px; width:14px; height:14px; background:var(--accent); border-radius:50%; border:2px solid var(--text-primary); }
.pbl { display:flex; justify-content:space-between; font-size:10px; color:var(--text-muted); margin-top:3px; }
.fg { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.fc { background:var(--bg-panel); border-radius:4px; padding:6px 8px; text-align:center; }
.fc .fl { color:var(--text-secondary); font-size:10px; margin-bottom:2px; }
.fc .fv { font-size:13px; font-weight:700; }
.gtag { display:inline-block; padding:2px 6px; border-radius:3px; font-size:10px; margin:2px; background:var(--bg-panel); border:1px solid var(--bg-border); }
.gtag.hot { background:rgba(230,65,58,.15); color:#E6413A; border-color:rgba(230,65,58,.3); }
.gtag.warn { background:rgba(40,167,69,.15); color:#28A745; border-color:rgba(40,167,69,.3); }
.gene-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:6px; margin-top:6px; }
.gene-cell { background:var(--bg-panel); border-radius:4px; padding:6px 8px; text-align:center; }
.gene-cell .gl { color:var(--text-secondary); font-size:10px; margin-bottom:2px; }
.gene-cell .gv { font-size:13px; font-weight:700; }

/* ===== 板块数据 ===== */
.market-overview { display:flex; align-items:center; height:36px; padding:0 8px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); gap:6px; flex-shrink:0; }
.idx-card { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 8px; background:var(--bg-app); border-radius:2px; border:1px solid var(--bg-border); min-width:80px; height: 28px; }
.idx-card .idx-name { font-size:9px; color:var(--text-secondary); margin-bottom:0; font-weight: normal; }
.idx-card .idx-val { font-size:11px; font-weight:bold; font-family:Arial, sans-serif; }
.idx-card .idx-chg { font-size:9px; font-family:Arial, sans-serif; font-weight: normal; }
.overview-divider { width:1px; height:20px; background:var(--bg-border); margin:0 4px; }
.updown-bar { display:flex; align-items:center; gap:6px; padding:0 8px; background:var(--bg-app); border-radius:2px; border:1px solid var(--bg-border); height: 28px; }
.updown-bar .ud-label { font-size:9px; color:var(--text-secondary); font-weight: normal; }
.updown-bar .ud-val { font-size:11px; font-weight:bold; font-family:Arial, sans-serif; }
.updown-bar .ud-bar { display:flex; height:4px; border-radius:2px; overflow:hidden; width:60px; background:var(--bg-border); }
.updown-bar .ud-bar-up { background:var(--up-color); height:100%; }
.updown-bar .ud-bar-dn { background:var(--down-color); height:100%; }
.north-card { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2px 8px; background:var(--bg-app); border-radius:2px; border:1px solid var(--bg-border); height: 28px; }
.north-card .nc-label { font-size:9px; color:var(--text-secondary); margin-bottom: 0; font-weight: normal; }
.north-card .nc-val { font-size:11px; font-weight:bold; font-family:Arial, sans-serif; }

.main-wrapper { display:flex; flex-direction:column; width:100%; height:calc(100vh - 28px); }
.main-layout { display:flex; width:100%; flex:1; overflow:hidden; }
.embedded .top-bar { display:none; }
.embedded .main-wrapper { height:100vh; }

.left-panel { width:220px; min-width:200px; border-right:1px solid var(--bg-border); display:flex; flex-direction:column; background:var(--bg-panel); }
.fengkou-area { padding:4px 8px; border-bottom:1px solid var(--bg-border); background:var(--bg-app); flex-shrink:0; }
.fengkou-tags { display:flex; flex-wrap:wrap; gap:4px; }
.fk-tag { padding:2px 6px; font-size:10px; border-radius:2px; cursor:pointer; transition:all .1s; border:1px solid var(--bg-border); background:var(--bg-app); color:var(--text-secondary); font-weight:normal; }
.fk-tag:hover { border-color:var(--text-muted); color:var(--text-primary); }
.fk-tag.hot { background:var(--up-bg); color:var(--up-color); border-color:var(--up-color); font-weight:normal; }
.fk-tag .fk-count { font-size:9px; color:var(--text-muted); margin-left:2px; font-weight: normal; font-family: Arial, sans-serif; }

/* ===== 盘前机会 ===== */
.main { display:flex; flex:1; overflow:hidden; gap:1px; background:var(--bg-border); }
.col { display:flex; flex-direction:column; overflow:hidden; background:var(--bg-app); }
.col-king { width:220px; flex-shrink:0; }
.col-pzld { width:200px; flex-shrink:0; }
.col-ydbk { flex:1; min-width:180px; }
.col-ydgg { flex:1; min-width:180px; }

.col-header { padding:4px 8px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.col-header .col-title { font-size:11px; font-weight:normal; color:var(--text-secondary); }
.col-header .col-cnt { font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; background:var(--bg-app); padding:1px 4px; border-radius:2px; border:1px solid var(--bg-border); font-weight: normal; }

.col-body { flex:1; overflow-y:auto; }
.col-body::-webkit-scrollbar { width:4px; }
.col-body::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
.col-body::-webkit-scrollbar-thumb:hover { background:var(--text-secondary); }
.col-body::-webkit-scrollbar-track { background:transparent; }

.king-card { display:flex; align-items:center; padding:4px 8px; border-bottom:1px solid var(--bg-border); transition:background .1s; cursor:pointer; gap: 4px; }
.king-card:hover { background:var(--bg-hover); }
.king-rank { width:16px; font-size:12px; font-weight:bold; flex-shrink:0; text-align: center; }
.king-rank.r1 { color:var(--up-color); }
.king-rank.r2 { color:var(--broken-color); }
.king-rank.r3 { color:var(--text-secondary); }
.king-rank.rn { color:var(--text-muted); font-size:10px; font-weight: normal; }
.king-info { flex:1; min-width:0; }
.king-name { font-size:12px; color:var(--text-primary); font-weight:normal; }
.king-code { font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; }
.king-right { text-align:right; flex-shrink:0; }
.king-vol { font-size:11px; color:var(--up-color); font-weight:bold; font-family:Arial, sans-serif; }
.king-vol-label { font-size:9px; color:var(--text-muted); }

.bk-row { display:flex; align-items:center; padding:4px 8px; border-bottom:1px solid var(--bg-border); transition:background .1s; gap: 4px; cursor:pointer; }
.bk-row:hover { background:var(--bg-hover); }
.bk-rank { width:16px; font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; flex-shrink:0; font-weight: normal; text-align:center; }
.bk-name { flex:1; font-size:11px; color:var(--text-primary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bk-pct { width:40px; text-align:right; font-size:11px; font-weight:bold; font-family:Arial, sans-serif; flex-shrink:0; }
.bk-vol { width:50px; text-align:right; font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; flex-shrink:0; font-weight:normal; }

/* ===== 舆情雷达 ===== */
.radar-left { flex: 4; display:flex; flex-direction:column; border-right:1px solid var(--bg-border); min-width: 200px; background:var(--bg-panel); }
.chart-area { flex: 3; min-height: 180px; max-height: 240px; border-bottom:1px solid var(--bg-border); display:flex; flex-direction:row; overflow:hidden; background:var(--bg-panel); z-index:2; position:relative; }
.chart-cloud { flex:1; height:100%; position:relative; overflow:hidden; border-right:1px solid var(--bg-border); background:var(--bg-app); display: flex; align-items: center; justify-content: center; }
.chart-sentiment-col { flex:none; width:35%; max-width:130px; height:100%; display:flex; flex-direction:column; background:var(--bg-panel); }

#wordCloudCanvas { display:block; width:100%; height:100%; transition: transform 0.1s; cursor: default; }
#wordCloudCanvas:hover { transform: scale(1.01); }
#sentimentChart { flex:1; min-height:0; }

.hotword-list { flex: 5; overflow-y:auto; padding:6px 4px; background:var(--bg-panel); }
.hotword-list::-webkit-scrollbar { width:4px; }
.hotword-list::-webkit-scrollbar-track { background:transparent; }
.hotword-list::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
.hotword-list::-webkit-scrollbar-thumb:hover { background:var(--text-secondary); }

.hotword-item { display:flex; align-items:center; padding:10px 8px; cursor:pointer; border-bottom:1px solid var(--bg-border); transition:all .1s; margin:0; border-radius:0; gap: 4px; }
.hotword-item:hover { background:var(--bg-hover); border-color:var(--bg-border); }
.hotword-item.active { background:var(--bg-hover); border-left:2px solid var(--accent); }
.hotword-item .rank { width:20px; font-size:11px; color:var(--text-muted); text-align:center; }
.hotword-item .rank.top3 { color:var(--broken-color); }
.hotword-item .word { flex:1; font-size:12px; color:var(--text-primary); margin-left:4px; }
.hotword-item .count { font-size:11px; color:var(--text-muted); margin-right:6px; font-family:Arial, sans-serif; }
.hotword-item .bar { height:2px; min-width:8px; }
.bar-pos { background:var(--up-color); }
.bar-neg { background:var(--down-color); }
.bar-neu { background:var(--text-muted); }

.news-list-area { flex:6; display:flex; flex-direction:column; overflow:hidden; background:var(--bg-app); }
.news-header { display:flex; align-items:center; padding:4px 8px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); gap:8px; flex-shrink: 0; flex-wrap: wrap; margin-bottom: 2px; }

.search-input { background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; color:var(--text-primary); padding:2px 8px; font-size:11px; width:120px; outline:none; transition:border-color .1s; font-family:Arial, sans-serif; height: 20px; }
.search-input:focus { border-color:var(--accent); }

.news-list { flex:1; overflow-y:auto; padding:4px; }
.news-list::-webkit-scrollbar { width:4px; }
.news-list::-webkit-scrollbar-track { background:transparent; }
.news-list::-webkit-scrollbar-thumb { background:#333; border-radius:2px; }
.news-list::-webkit-scrollbar-thumb:hover { background:var(--text-secondary); }

.news-item { padding:8px 10px; border-bottom:1px solid var(--bg-border); transition:background .1s; cursor:pointer; }
.news-item:hover { background:var(--bg-hover); }
.news-item-title { font-size:12px; color:var(--text-primary); line-height:1.5; margin-bottom:4px; font-weight:normal; }
.news-item-meta { display:flex; align-items:center; gap:8px; font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; }
.news-item-time { flex-shrink:0; }
.news-item-source { flex-shrink:0; }
.news-item-sentiment { padding:1px 4px; border-radius:2px; font-size:9px; }
.sentiment-pos { background:var(--up-bg); color:var(--up-color); border:1px solid var(--up-color); }
.sentiment-neg { background:var(--down-bg); color:var(--down-color); border:1px solid var(--down-color); }
.sentiment-neu { background:var(--bg-app); color:var(--text-secondary); border:1px solid var(--bg-border); }

.news-detail { flex:1; overflow-y:auto; padding:12px; display:none; }
.news-detail.active { display:block; }
.news-detail-title { font-size:14px; font-weight:bold; color:var(--text-primary); margin-bottom:8px; line-height:1.5; }
.news-detail-meta { display:flex; align-items:center; gap:12px; font-size:10px; color:var(--text-muted); margin-bottom:12px; font-family:Arial, sans-serif; padding-bottom:8px; border-bottom:1px solid var(--bg-border); }
.news-detail-content { font-size:12px; color:var(--text-primary); line-height:1.7; }
.news-detail-content p { margin-bottom:12px; }
.news-detail-content p:last-child { margin-bottom:0; }

/* ===== 梯队 ===== */
.header { display:flex; align-items:center; height:32px; padding:0 10px; background:var(--bg-panel); border-bottom:1px solid var(--bg-border); gap:10px; }
.header .title { font-size:13px; color:var(--text-primary); white-space:nowrap; }
.header .title span { font-size:11px; color:var(--text-secondary); margin-left:6px; }
.header .stats { display:flex; gap:12px; align-items:center; margin-left:auto; }
.stat-chip { display:flex; align-items:center; gap:3px; font-size:11px; }
.stat-chip .sc-label { color:var(--text-secondary); }
.stat-chip .sc-val { font-weight:bold; font-family:Arial, sans-serif; }
.sc-red { color:var(--up-color); }
.sc-green { color:var(--down-color); }
.sc-yellow { color:var(--broken-color); }
.sc-gray { color:var(--text-muted); }
.mood-badge { font-size:10px; padding:1px 6px; border-radius:2px; border:1px solid; }
.mood-hot { color:var(--up-color); border-color:var(--up-color); background:var(--up-bg); }
.mood-warm { color:var(--broken-color); border-color:var(--broken-color); background:var(--broken-bg); }
.mood-mid { color:var(--text-secondary); border-color:var(--bg-border); background:var(--bg-app); }
.mood-cold { color:var(--accent); border-color:var(--accent); background:var(--accent-bg); }
.refresh-btn { cursor:pointer; color:var(--text-secondary); font-size:11px; padding:2px 8px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; transition:all .1s; }
.refresh-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }

.main { height:calc(100vh - 32px); overflow-y:auto; }
.zt-table { width:100%; border-collapse:collapse; font-size:12px; }
.zt-table thead { position:sticky; top:0; z-index:10; background:var(--bg-panel); }
.zt-table thead th { padding:5px 6px; text-align:center; font-size:10px; color:var(--text-secondary); font-weight:normal; border-bottom:1px solid var(--bg-border); white-space:nowrap; }
.zt-table thead th:first-child { text-align:left; padding-left:8px; }
.zt-table tbody tr { border-bottom:1px solid var(--bg-border); transition:background .1s; }
.zt-table tbody tr:hover { background:var(--bg-hover); }
.zt-table tbody td { padding:3px 6px; vertical-align:middle; font-size:11px; }
.plate-sep td { padding:0; height:3px; background:var(--bg-border); }
.td-plate { width:110px; max-width:130px; padding:6px 8px!important; vertical-align:top; border-right:2px solid var(--accent); background:var(--bg-panel); }
.plate-name { font-size:12px; font-weight:bold; color:var(--text-primary); margin-bottom:2px; line-height:1.3; }
.plate-count { font-size:10px; color:var(--text-muted); margin-bottom:3px; font-family:Arial, sans-serif; }
.plate-reason { font-size:10px; color:var(--text-secondary); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:break-all; }
.td-stock { white-space:nowrap; cursor:pointer; }
.td-sname { font-size:12px; color:var(--text-primary); display:block; line-height:1.2; }
.td-scode { font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; display:block; }
.board-tag { display:inline-block; font-size:9px; padding:1px 4px; border-radius:2px; font-weight:bold; white-space:nowrap; border:1px solid; font-family:Arial, sans-serif; }
.board-high { background:var(--up-bg); border-color:var(--up-color); color:var(--up-color); }
.board-mid { background:var(--broken-bg); border-color:var(--broken-color); color:var(--broken-color); }
.board-low { background:var(--bg-app); border-color:var(--bg-border); color:var(--text-secondary); }
.row-high-board { background:var(--up-bg)!important; }
.row-high-board .td-sname { color:var(--up-color); font-weight:bold; }
.row-zb { opacity:0.7; }
.row-zb:hover { opacity:1; }
.row-zb .td-sname { text-decoration:line-through; color:var(--text-secondary); }
.td-reason { max-width:300px; min-width:140px; }
.reason-src { font-size:10px; line-height:1.4; margin:1px 0; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.src-label { font-size:8px; padding:0 3px; border-radius:2px; margin-right:2px; font-weight:bold; display:inline; white-space:nowrap; }
.src-kpl { color:var(--broken-color); border:1px solid var(--broken-color); background:var(--broken-bg); }
.src-hsl { color:var(--accent); border:1px solid var(--accent); background:var(--accent-bg); }
.ths-expand-btn { display:inline-block; margin-top:2px; font-size:9px; color:var(--accent); cursor:pointer; padding:1px 4px; border-radius:2px; border:1px solid var(--accent); background:var(--accent-bg); white-space:nowrap; }
.ths-expand-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }
.ths-reason-box { margin-top:4px; border-radius:2px; background:var(--bg-panel); padding:4px 6px; display:none; }
.loading { display:flex; align-items:center; justify-content:center; height:200px; color:var(--text-muted); font-size:12px; }
.pc0 .td-plate { border-right-color:var(--up-color); }
.pc0 .plate-name { color:var(--up-color); }
.pc1 .td-plate { border-right-color:var(--broken-color); }
.pc1 .plate-name { color:var(--broken-color); }
.pc2 .td-plate { border-right-color:var(--down-color); }
.pc2 .plate-name { color:var(--down-color); }
.pc3 .td-plate { border-right-color:var(--accent); }
.pc3 .plate-name { color:var(--accent); }
.pc4 .td-plate { border-right-color:#9B59B6; }
.pc4 .plate-name { color:#9B59B6; }
.pc5 .td-plate { border-right-color:#E67E22; }
.pc5 .plate-name { color:#E67E22; }
.pc6 .td-plate { border-right-color:#1ABC9C; }
.pc6 .plate-name { color:#1ABC9C; }
.pc7 .td-plate { border-right-color:#E74C3C; }
.pc7 .plate-name { color:#E74C3C; }
.pc8 .td-plate { border-right-color:#3498DB; }
.pc8 .plate-name { color:#3498DB; }
.pc9 .td-plate { border-right-color:#F39C12; }
.pc9 .plate-name { color:#F39C12; }
.pc10 .td-plate { border-right-color:#2ECC71; }
.pc10 .plate-name { color:#2ECC71; }
.pc11 .td-plate { border-right-color:#E91E63; }
.pc11 .plate-name { color:#E91E63; }

/* ===== 题材推荐 ===== */
.page { max-width:1200px; margin:0 auto; padding:4px; }
.top-bar { display:flex; gap:8px; padding:4px 0; align-items:center; }
.top-bar .back-btn { background:var(--bg-panel); border:1px solid var(--bg-border); color:var(--text-secondary); padding:4px 12px; border-radius:2px; font-size:11px; cursor:pointer; display:none; transition: all .1s; }
.top-bar .back-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--bg-hover); }

.search-bar { display:flex; gap:6px; padding:2px 0 6px; align-items:center; }
.search-bar input { flex:1; background:var(--bg-panel); border:1px solid var(--bg-border); color:var(--text-primary); padding:6px 10px; border-radius:2px; font-size:12px; outline:none; transition: all .1s; }
.search-bar input:focus { border-color:var(--accent); }
.search-bar button { background:var(--accent-bg); color:var(--accent); border:1px solid var(--accent); padding:5px 16px; border-radius:2px; font-size:12px; font-weight:normal; cursor:pointer; white-space:nowrap; transition: all .1s; }
.search-bar button:hover { background:var(--accent); color:var(--bg-app); }

.rank-section { margin:4px 0; }
.rank-title { font-size:14px; font-weight:normal; color:var(--text-primary); padding:4px; display:flex; align-items:center; gap:6px; }
.rank-title .fire { color:var(--broken-color); font-family: "Segoe UI Emoji", "Apple Color Emoji", sans-serif; font-size: 12px; }
.rank-time { font-size:10px; color:var(--text-muted); font-weight:normal; margin-left:auto; font-family:Arial, Consolas, sans-serif; font-variant-numeric: tabular-nums; }

.rank-list { display:flex; flex-direction:column; gap:2px; }
.rank-item { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--bg-panel); border:1px solid var(--bg-border); border-radius:2px; cursor:pointer; transition:all .1s; }
.rank-item:hover { background:var(--bg-hover); border-color:var(--text-muted); }

.rank-num { width:24px; text-align:center; font-size:14px; font-weight:bold; flex-shrink:0; font-family:Arial, Consolas, sans-serif; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.rank-item:nth-child(1) .rank-num { color:var(--up-color); font-size:16px; }
.rank-item:nth-child(2) .rank-num { color:var(--broken-color); font-size:15px; }
.rank-item:nth-child(3) .rank-num { color:var(--accent); font-size:14px; }

.rank-info { flex:1; min-width:0; }
.rank-name { font-size:13px; font-weight:normal; color:var(--text-primary); margin-bottom:2px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.rank-children { font-size:11px; color:var(--text-secondary); }
.rank-children span { color:var(--text-secondary); cursor:pointer; transition: color .1s; }
.rank-children span:hover { color:var(--accent); text-decoration:none; }

.badge-zt { display:inline-block; font-size:10px; color:var(--up-color); border:1px solid var(--up-color); border-radius:2px; background: var(--up-bg); padding:0 4px; line-height:1.4; font-weight:normal; font-family:Arial, Consolas, sans-serif; font-variant-numeric: tabular-nums; }
.badge-hot { display:inline-block; font-size:9px; color:var(--broken-color); background:var(--broken-bg); border: 1px solid var(--broken-color); border-radius:2px; padding:0 4px; font-weight:normal; }
.badge-new { display:inline-block; font-size:9px; color:var(--accent); background:var(--accent-bg); border: 1px solid var(--accent); border-radius:2px; padding:0 4px; font-weight:normal; }
.rank-change { font-size:11px; color:var(--up-color); flex-shrink:0; min-width:30px; text-align:right; font-family:Arial, Consolas, sans-serif; font-variant-numeric: tabular-nums; font-weight:bold; }
.rank-change.down { color:var(--down-color); }

.theme-header { background:var(--bg-panel); border:1px solid var(--bg-border); border-radius:2px; padding:12px; margin:4px 0; }
.theme-name { font-size:16px; font-weight:normal; color:var(--text-primary); margin-bottom:4px; }
.theme-intro { color:var(--text-secondary); font-size:11px; line-height:1.5; }

.theme-stock-list { display:flex; flex-direction:column; gap:2px; margin-top:8px; }
.theme-stock-item { display:flex; align-items:center; gap:8px; padding:4px 8px; background:var(--bg-app); border:1px solid var(--bg-border); border-radius:2px; cursor:pointer; transition:all .1s; }
.theme-stock-item:hover { background:var(--bg-hover); border-color:var(--text-muted); }
.theme-stock-item .stock-chip { font-size:9px; padding:1px 4px; border-radius:2px; border:1px solid var(--bg-border); color:var(--text-secondary); font-family:Arial, sans-serif; }
.theme-stock-item .stock-name { flex:1; font-size:11px; color:var(--text-primary); }
.theme-stock-item .stock-code { font-size:10px; color:var(--text-muted); font-family:Arial, sans-serif; }
.theme-stock-item .stock-change { font-size:11px; font-weight:bold; font-family:Arial, Consolas, sans-serif; font-variant-numeric:tabular-nums; }
.theme-stock-item .stock-change.up { color:var(--up-color); }
.theme-stock-item .stock-change.down { color:var(--down-color); }

/* ===== 数字字体类扩展 ===== */
.idx-val, .idx-chg, .ud-val, .nc-val, .change, .flow, .fk-count, .s-code, .s-chg, .s-spd, .s-prc, .s-bidlbi, .s-bidamt, .s-bidchg, .s-mnet, .s-min, .s-mout, .s-amt, .s-ichg, .s-bnet, .s-rflt, .s-turn, .s-nfp, .s-lbi, .s-seal, .s-mseal, .s-pop, .s-pchg, .si-time, .time, .badge, .card-date, .reply-date, .col-cnt, .king-rank, .king-vol, .bk-rank, .bk-pct, .bk-vol, .gg-rank, .gg-pct, .pz-time, .rank-num, .rank-change, .badge-zt, .stock-count, .cat-count, .cat-zs, .stock-chip .code {
  font-family: Arial, Consolas, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}