/**
 * 智多星看盘工具 - 终端设计系统 (Terminal Design System)
 * 参考来源：指标广场 theme.css + common.css
 * 核心理念：高密度、长时间注视的深色环境设计
 *
 * 修改主题色：只需改这一个文件，全部页面自动生效
 * 所有新增页面必须引入此文件，严格遵守设计规范
 */

:root {
  /* ================= 1. 背景色系统 (深色低对比) ================= */
  --bg-app:    #000000;   /* 软件底层级背景（2026-09-08 用户要求：纯黑） */
  --bg-panel:  #15181E;   /* 面板/卡片背景 */
  --bg-hover:  #21262E;   /* 列表悬停/选中背景 */
  --bg-border: #2B303B;   /* 分割线/边框颜色 */
  --bg-secondary: #161920; /* 次级背景 */

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

  /* ================= 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;              /* 涨停极值红 (略亮于普通红) */
  --limit-up-bg:    rgba(255, 94, 86, 0.15);

  --broken-color: #D9A400;                /* 炸板/警示暗金 */
  --broken-bg:    rgba(217, 164, 0, 0.15);

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

  /* ================= 4.5 图表色（SVG/canvas 绘制用，token 化以支持双主题） =================
     JS 侧由 index.html 的 ZDX_CHART 读取；切主题时各图表模块监听 zdx-theme 事件重读并重绘 */
  --chart-mut: #76808D;   /* 图表辅助文字：加载提示、时间轴 */
  --chart-sec: #8A939E;   /* 图表次级文字：价格刻度、图例 */
  --chart-up:  #E6413A;   /* K线/分时 涨 */
  --chart-dn:  #28A745;   /* K线/分时 跌 */
  --chart-acc: #4A9EFF;   /* 交互高亮蓝（曲线选中/均价参考） */
  --chart-avg: #FFB129;   /* 分时均价线 */
  --chart-grid: #2B303B;  /* SVG 网格线（配合 stroke-opacity 使用） */
  --chart-canvas: #15181E;  /* SVG 图表画布底（K线/分时/异动/叠加区整面底色，对应 bg-panel 层级） */
  --chart-tip-bg: rgba(17, 21, 31, .93);  /* SVG 内标签底/tooltip 底 */
  --chart-menu-bg: #171C27;               /* 右键菜单底 */
  /* 多股叠加调色板（22色，curve 全量用；quote/seal 取前8）——亮色主题另有适配版 */
  --chart-c0:#4a9eff; --chart-c1:#ff4d5e; --chart-c2:#2ed573; --chart-c3:#ffb129;
  --chart-c4:#ff6348; --chart-c5:#7ed6df; --chart-c6:#e056fd; --chart-c7:#9c88ff;
  --chart-c8:#48dbfa; --chart-c9:#ff5e78; --chart-c10:#f8b500; --chart-c11:#3dc1d3;
  --chart-c12:#78e08f; --chart-c13:#b8e994; --chart-c14:#e77f67; --chart-c15:#f19066;
  --chart-c16:#a4b0be; --chart-c17:#70a1ff; --chart-c18:#2bcbba; --chart-c19:#fc5c65;
  --chart-c20:#fd9644; --chart-c21:#26de81;

  /* ================= 5. 字号系统 (紧凑高密度) ================= */
  --fs-xs: 10px;    /* 极小：时间、标签、辅助说明 */
  --fs-sm: 11px;    /* 小：表头、次要数据 */
  --fs-md: 12px;    /* 中：正文、列表项 (默认) */
  --fs-lg: 13px;    /* 大：板块名、重要数据 */
  --fs-xl: 14px;    /* 特大：标题、强调名称 */
  --fs-2xl: 16px;   /* 超大：仅用于面板标题 */

  /* ================= 6. 间距系统 ================= */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-6: 12px;
  --sp-8: 16px;

  /* ================= 7. 动画速度 (快，不拖泥带水) ================= */
  --speed-fast: .1s;
  --speed-mid: .15s;
  --speed-slow: .3s;

  /* ================= 8. 圆角 (小，终端感) ================= */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
}

/* ================= 亮色主题（data-theme="light"，2026-09-08 双主题支持） =================
   机制：token 级覆盖（参考 智多星精选板块2.0 的 [data-theme=light] 方案）
   色板原则：白底上所有文字对比度≥4.4:1；红涨绿跌加深一档；金黄警示换深金；图表调色板换中饱和深色系 */
[data-theme="light"] {
  /* 背景系统：纯白底 + 浅灰层级 */
  --bg-app:    #FFFFFF;
  --bg-panel:  #F5F7FA;   /* 面板/卡片 */
  --bg-hover:  #E9EDF2;   /* 悬停/选中 */
  --bg-border: #DCE1E8;   /* 分割线 */
  --bg-secondary: #EFF2F6;

  /* 文字系统：深灰阶（非纯黑，防刺眼） */
  --text-primary:   #1F2430;
  --text-secondary: #5A6472;
  --text-muted:     #8A93A0;

  /* A股信号色：白底加深一档保证对比度 */
  --up-color:   #D93025;  --up-bg:   rgba(217, 48, 37, 0.10);
  --down-color: #157F38;  --down-bg: rgba(21, 127, 56, 0.10);
  --limit-up-color: #C62828;  --limit-up-bg: rgba(198, 40, 40, 0.10);
  --broken-color: #A16207;    --broken-bg:   rgba(161, 98, 7, 0.10);

  /* 交互蓝加深 */
  --accent:       #1D6FD1;
  --accent-hover: #2B7DE0;
  --accent-bg:    rgba(29, 111, 209, 0.10);

  /* 图表色：灰系加深、红绿同步 UI 信号色、网格/浮层换浅色系 */
  --chart-mut: #8A93A0;
  --chart-sec: #6B7480;
  --chart-up:  #D93025;
  --chart-dn:  #157F38;
  --chart-acc: #1D6FD1;
  --chart-avg: #D97706;   /* 均价线：亮底黄色不可读，换深橙 */
  --chart-grid: #E0E5EC;
  --chart-canvas: #F5F7FA;  /* 图表画布浅底（与 bg-panel 同层级） */
  --chart-tip-bg: rgba(255, 255, 255, .95);
  --chart-menu-bg: #FFFFFF;
  /* 叠加调色板亮色版：中饱和深色系（浅黄/浅青/浅绿等白底不可读色全部替换） */
  --chart-c0:#2563eb; --chart-c1:#dc2626; --chart-c2:#059669; --chart-c3:#d97706;
  --chart-c4:#ea580c; --chart-c5:#0891b2; --chart-c6:#9333ea; --chart-c7:#7c3aed;
  --chart-c8:#0284c7; --chart-c9:#db2777; --chart-c10:#b45309; --chart-c11:#0d9488;
  --chart-c12:#16a34a; --chart-c13:#65a30d; --chart-c14:#c2410c; --chart-c15:#9f1239;
  --chart-c16:#64748b; --chart-c17:#3b82f6; --chart-c18:#0f766e; --chart-c19:#e11d48;
  --chart-c20:#c2410c; --chart-c21:#15803d;
}

/* 左上角品牌字"芷星"：暗色=亮金+光晕；亮色=深金去光晕（白底 #FFD700 对比度仅1.6:1 不可读） */
[data-theme="light"] .top-bar .logo {
    color: #8A5A2B;              /* 深金棕，与板块页推广条同色系，白底对比度≥5:1 */
    text-shadow: none;
}

/* 主题切换过渡说明：不使用 background-color transition——实测 Chrome 下 body 与 html
   共享规则的变量驱动过渡会出现 body 卡在旧值的异常（html 正常 body 不动），
   且过渡期读 computed 值会拿到起点色干扰验证。切换瞬时生效，视觉突兀感可接受（终端风格） */

/* ================= 全局重置 ================= */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body, html {
  background-color: var(--bg-app);
  color: var(--text-primary);
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  font-size: var(--fs-md);
  line-height: 1.4;
  height: 100%;
  overflow: hidden;
  user-select: none;
}

/* ================= 数字等宽 (防跳动，核心体验) ================= */
/* 任何数字（价格、涨跌幅、金额）必须加 .num 类 */
.num, .price, .percent, .tabular-nums,
td[data-type="number"] {
  font-family: Arial, Consolas, sans-serif;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ================= 信号色通用类 ================= */
.up    { color: var(--up-color) !important; font-weight: 700; }
.dn    { color: var(--down-color) !important; font-weight: 700; }
.down  { color: var(--down-color) !important; font-weight: 700; } /* 别名 */
.flat  { color: var(--text-secondary); 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: var(--up-bg); padding: 1px 4px; border-radius: var(--radius-sm); }
.is-broken    { color: var(--broken-color) !important; }
.is-muted     { color: var(--text-muted) !important; }

/* ================= 通用组件 ================= */

/* --- 标签 --- */
.tag { display: inline-block; padding: 1px 4px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: normal; white-space: nowrap; }
.tag-up    { background: var(--up-bg); color: var(--up-color); border: 1px solid var(--up-color); }
.tag-dn    { background: var(--down-bg); color: var(--down-color); border: 1px solid var(--down-color); }
.tag-warn  { background: var(--broken-bg); color: var(--broken-color); border: 1px solid var(--broken-color); }
.tag-info  { background: var(--accent-bg); color: var(--accent); border: 1px solid var(--accent); }

/* --- 徽章 --- */
.badge { display: inline-block; font-size: 9px; padding: 1px 4px; border-radius: var(--radius-sm); font-weight: normal; }
.badge-up   { background: var(--up-color); color: var(--bg-app); }
.badge-dn   { background: var(--down-color); color: var(--bg-app); }
.badge-warn { background: var(--broken-color); color: var(--bg-app); }
.badge-info { background: var(--accent); color: var(--bg-app); }

/* --- 卡片 --- */
.card { background: var(--bg-panel); border: 1px solid var(--bg-border); border-radius: var(--radius-sm); padding: var(--sp-4); }
.card-title { font-size: var(--fs-sm); font-weight: bold; color: var(--text-secondary); margin-bottom: var(--sp-3); }

/* --- 工具栏 --- */
.toolbar { display: flex; align-items: center; padding: var(--sp-2) var(--sp-4); background: var(--bg-panel); border-bottom: 1px solid var(--bg-border); gap: var(--sp-3); flex-shrink: 0; }

/* --- 筛选按钮 --- */
.filter-btn { font-size: var(--fs-xs); padding: 2px 6px; border-radius: var(--radius-sm); border: 1px solid var(--bg-border); color: var(--text-secondary); cursor: pointer; background: var(--bg-app); transition: all var(--speed-fast); white-space: nowrap; }
.filter-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }
.filter-btn.active { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-bg) !important; }

/* --- 子标题 --- */
.ws-sub-title { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); font-weight: bold; color: var(--text-secondary); background: var(--bg-panel); border-bottom: 1px solid var(--bg-border); flex-shrink: 0; display: flex; align-items: center; gap: var(--sp-2); }

/* ================= 布局系统 ================= */

/* 顶部导航 */
.top-bar { display: flex; align-items: center; height: 28px; padding: 0 16px 0 0; background: var(--bg-panel); border-bottom: 1px solid var(--bg-border); position: relative; z-index: 10; }
.top-bar .logo {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FFD700;
    font-size: 15px;
    font-weight: bold;
    margin-right: 24px;
    margin-left: 0;
    white-space: nowrap;
    line-height: 1;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
}
.top-bar .logo .logo-icon {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    flex-shrink: 0;
    display: block;
}

/* 导航标签 */
.nav-tabs { display: flex; gap: 16px; height: 100%; align-items: flex-end; padding-left: var(--sp-4); }
.nav-tabs .tab { cursor: pointer; padding: 4px 12px; background: transparent; color: var(--text-secondary); font-size: var(--fs-md); font-weight: normal; transition: all var(--speed-fast); 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: bold; }

/* 状态指示器 */
.status-dot { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-secondary); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.dot.ok { background: var(--down-color); }
.dot.busy { background: var(--broken-color); }
.dot.dead { background: var(--up-color); }

/* 面板容器 (核心：visibility 切换，非 display:none) */
.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; }

/* 工作区布局 */
.workspace-layout { display: flex; width: 100%; height: 100%; flex: 1; overflow: hidden; }
.ws-col { display: flex; flex-direction: column; overflow: hidden; }
.ws-col-left { background: var(--bg-panel); }

/* ================= 加载状态 ================= */
.loading { padding: 20px; text-align: center; color: var(--text-muted); font-size: var(--fs-md); }
.loading::after { content: '...'; animation: dots 1.5s infinite; }
@keyframes dots { 0%, 20% { content: '.'; } 40% { content: '..'; } 60%, 100% { content: '...'; } }

/* 骨架屏 */
.skeleton { padding: var(--sp-6); }
.skeleton-line { height: 10px; background: var(--bg-border); border-radius: var(--radius-sm); margin: var(--sp-4) 0; animation: pulse 1.2s ease-in-out infinite; }
.skeleton-line:nth-child(1) { width: 85%; }
.skeleton-line:nth-child(2) { width: 70%; animation-delay: .15s; }
.skeleton-line:nth-child(3) { width: 90%; animation-delay: .3s; }
.skeleton-line:nth-child(4) { width: 60%; animation-delay: .45s; }
.skeleton-line:nth-child(5) { width: 75%; animation-delay: .6s; }
@keyframes pulse { 0%, 100% { opacity: .4; } 50% { opacity: .8; } }

/* ================= 滚动条 (极简暗黑) ================= */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: var(--bg-app); }
::-webkit-scrollbar-thumb        { background: var(--text-muted); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover  { background: var(--text-secondary); }

/* ================= 表格通用 ================= */
table { width: 100%; border-collapse: collapse; table-layout: fixed; }
thead { position: sticky; top: 0; z-index: 2; background: var(--bg-panel); }
th { padding: 3px 6px; text-align: right; font-size: var(--fs-xs); color: var(--text-secondary); font-weight: normal; border-bottom: 1px solid var(--bg-border); white-space: nowrap; }
td { padding: 3px 6px; border-bottom: 1px solid var(--bg-border); font-size: var(--fs-md); white-space: nowrap; vertical-align: middle; }
tbody tr { transition: background var(--speed-fast); cursor: pointer; }
tbody tr:hover { background: var(--bg-hover); }

/* ================= 响应式 ================= */
@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; }
}