/* ============================================================
   Watchpilot · tabs-data.css
   数据 / 资讯 / 研报 Tab 内的所有控件 + AI 盘面摘要 + 异动雷达 + 板块热力图 D3
   (原 main.css 行 1339-2515)
   ============================================================ */

  /* ═════════════ Tab Panel 切换 ═════════════ */
  .tab-panel { display: none; }
  .tab-panel.active { display: block; animation: panel-in 0.32s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes panel-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  
  /* ═════════════ 二级 SubTab ═════════════ */
  .subtabs {
    display: inline-flex;
    gap: 2px;
    margin-bottom: 14px;
    padding: 3px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
  }
  .subtab {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-3);
    transition: all 0.15s;
    user-select: none;
  }
  .subtab:hover { color: var(--text-1); }
  .subtab.active {
    background: var(--bg-card);
    color: var(--text-1);
    
  }
  
  /* ═════════════ 通用数据表格 ═════════════ */
  .data-table {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    overflow: hidden;
    margin-bottom: 32px;
  }
  .data-table-head {
    display: grid;
    padding: 11px 18px;
    background: var(--bg-subtle);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1px;
  }
  .data-row {
    display: grid;
    padding: 13px 18px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13px;
    transition: background 0.12s;
    cursor: pointer;
    align-items: center;
  }
  .data-row:last-child { border-bottom: none; }
  .data-row:hover { background: var(--bg-hover); }
  .data-row .num,
  .data-table-head .num,
  .data-row .col-num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .ds-stock { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .ds-stock-name {
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    cursor: help;
  }
  .ds-stock-code { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
  .ds-rank {
    font-family: var(--font-mono);
    color: var(--text-3);
    font-weight: 700;
    font-size: 12px;
    text-align: center;
  }
  
  /* 涨停板专用行 */
  .row-limit-up { grid-template-columns: 24px 1.5fr 70px 90px 70px 60px 80px 1.2fr; gap: 14px; }
  /* 龙虎榜行 */
  .row-lhb { grid-template-columns: 24px 1.5fr 70px 90px 100px 80px 1fr; gap: 14px; }
  /* 北向行 */
  .row-northbound { grid-template-columns: 24px 1.5fr 90px 90px 70px 1fr; gap: 14px; }
  /* 评级变动行 */
  .row-rating { grid-template-columns: 24px 1.5fr 130px 120px 1fr 60px; gap: 14px; }
  /* ETF / 可转债行 */
  .row-etf { grid-template-columns: 24px 1.5fr 70px 80px 90px 90px 70px; gap: 14px; }
  .row-cb { grid-template-columns: 24px 1.5fr 80px 70px 70px 70px 60px; gap: 14px; }
  /* 基金行 */
  .row-fund { grid-template-columns: 1.6fr 1fr 70px 70px 80px 80px 80px; gap: 14px; }
  
  .col-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: var(--bg-subtle);
    color: var(--text-2);
    border: 1px solid var(--border-subtle);
  }
  .col-tag.tag-up { color: var(--up); border-color: var(--up-line); background: var(--up-soft); }
  .col-tag.tag-down { color: var(--down); border-color: var(--down-line); background: var(--down-soft); }
  .col-tag.tag-strong { color: var(--text-1); border-color: var(--border-strong); }
  
  .col-yiziban {
    color: var(--up);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--font-mono);
  }
  
  .change-arrow {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-family: var(--font-mono);
    font-weight: 600;
  }
  
  /* ═════════════ 7×24 Timeline ═════════════ */
  .timeline {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    overflow: hidden;
    margin-bottom: 32px;
  }
  .timeline-item {
    display: grid;
    grid-template-columns: 60px 64px 1fr;
    gap: 14px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background 0.12s;
  }
  .timeline-item:last-child { border-bottom: none; }
  .timeline-item:hover { background: var(--bg-hover); }
  .timeline-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
  }
  .timeline-content {
    font-size: 13px;
    color: var(--text-1);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.1px;
  }
  .timeline-summary {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 5px;
    line-height: 1.65;
  }
  .timeline-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* ═════════════ Mini Card Grid (新股 / 调研 / 解禁) ═════════════ */
  .mini-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
  }
  .mini-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .mini-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    
  }
  .mini-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
  }
  .mini-card-title { font-size: 14px; font-weight: 600; color: var(--text-1); letter-spacing: -0.1px; }
  .mini-card-code { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); }
  .mini-card-body {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .mini-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
  .mini-card-row .label { color: var(--text-3); }
  .mini-card-row .value { font-family: var(--font-mono); font-weight: 600; color: var(--text-1); }
  .mini-card-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
    font-size: 11px;
    color: var(--text-3);
    display: flex;
    justify-content: space-between;
  }
  
  /* ═════════════ 两栏布局 ═════════════ */
  .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 32px;
  }
  
  /* ═════════════ 早晚报 / 投资日历 (资讯页顶部) ═════════════ */
  .feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 20px 22px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .feature-card:hover { border-color: var(--border-strong); }
  .feature-eyebrow {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .feature-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    margin-top: 6px;
    color: var(--text-1);
    letter-spacing: -0.4px;
  }
  .feature-summary {
    font-size: 13px;
    color: var(--text-2);
    margin-top: 8px;
    line-height: 1.65;
  }
  .feature-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--accent);
    font-weight: 600;
  }
  
  /* ═════════════ 调研日历卡片 ═════════════ */
  .calendar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 16px 18px;
    margin-bottom: 32px;
  }
  .calendar-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
  }
  .calendar-card-title { font-size: 14px; font-weight: 700; color: var(--text-1); }
  .calendar-list {
    display: flex;
    flex-direction: column;
  }
  .calendar-list-item {
    display: grid;
    grid-template-columns: 50px 1fr 80px;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    align-items: center;
    font-size: 13px;
    cursor: pointer;
  }
  .calendar-list-item:last-child { border-bottom: none; }
  .calendar-list-item:hover .calendar-list-name { color: var(--text-1); }
  .calendar-list-date {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--text-1);
    background: var(--bg-subtle);
    border-radius: 4px;
    padding: 3px 6px;
    text-align: center;
  }
  .calendar-list-name { color: var(--text-2); font-weight: 500; transition: color 0.12s; }
  .calendar-list-meta { font-size: 11px; color: var(--text-3); font-family: var(--font-mono); text-align: right; }
  
  /* ═════════════ 数据看点 4 卡 - 复用 flow-grid 但允许 4 列 ═════════════ */
  .flow-grid.col-4 { grid-template-columns: repeat(4, 1fr); }
  .num-unit {
    font-size: 14px;
    color: var(--text-3);
    font-weight: 500;
    margin-left: 4px;
  }
  
  /* ═════════════ 金股池小卡片 ═════════════ */
  .pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
  }
  .pool-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 16px 18px;
    cursor: pointer;
    transition: all 0.15s;
  }
  .pool-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
  .pool-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
  }
  .pool-card-broker {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
  }
  .pool-card-tag {
    font-size: 10px;
    background: var(--bg-subtle);
    color: var(--text-2);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 1px 6px;
    font-weight: 600;
  }
  .pool-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .pool-list-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
  }
  .pool-list-name { color: var(--text-2); }
  .pool-list-target { font-family: var(--font-mono); font-weight: 600; color: var(--text-1); }
  
  /* ═════════════ 跨度大的特殊文本 ═════════════ */
  .col-broker {
    font-size: 11px;
    color: var(--text-3);
  }
  .col-target {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
  }
  .col-target-old {
    color: var(--text-3);
    text-decoration: line-through;
    margin-right: 4px;
  }
  
  /* 空状态 */
  .empty-hint {
    background: var(--bg-card);
    border: 1px dashed var(--border-strong);
    
    padding: 28px;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    margin-bottom: 32px;
  }
  
  /* ═════════════ 顶栏右侧 心跳实时指示器 ═════════════ */
  .tabs-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-weight: 500;
  }
  .live-dot {
    width: 7px;
    height: 7px;
    background: var(--down);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(6, 167, 125, 0.5);
    animation: live-pulse 2.4s ease-out infinite;
  }
  @keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 167, 125, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(6, 167, 125, 0); }
  }
  .live-text {
    font-weight: 700;
    color: var(--down);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
  }
  .live-time { color: var(--text-2); }
  .live-sep { color: var(--text-4); }
  .live-meta { color: var(--text-3); }
  
  /* ═════════════ 市场切换 sub-control(置于行情区顶部) ═════════════ */
  .market-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  /* ═════════════ 指数卡片(重制) ═════════════ */
  .index-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
    margin-bottom: 32px;
  }
  @media (max-width: 1500px) {
    .index-row { grid-template-columns: repeat(4, 1fr); }
  }
  
  .index-card-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px 18px 14px 18px;
    cursor: pointer;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    position: relative;
    min-width: 0;
  }
  .index-card-v2:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(28,25,23,0.06);
    border-color: var(--border-strong);
  }
  .index-card-name {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 600;
    letter-spacing: -0.1px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
  }
  .index-card-name > span:first-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .index-card-period {
    font-size: 10px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;    flex-wrap: wrap;
    width: 100%;
  }
  .index-card-period span {
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 3px;
    transition: all 0.12s;
  }
  .index-card-period span:hover { color: var(--text-1); }
  .index-card-period span.active {
    color: var(--text-1);
    background: var(--bg-subtle);
    font-weight: 700;
  }
  .index-card-value {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin-top: 10px;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .index-card-change {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .index-card-change-abs {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-3);
  }
  .index-card-sparkline {
    margin-top: 10px;
    height: 42px;
    width: 100%;
    display: block;
  }
  .index-card-stats {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 11.5px;
  }
  .index-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
  }
  .index-stat-label { color: var(--text-3); white-space: nowrap; }
  .index-stat-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-1);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  
  /* ═════════════ A股资金风向 4 卡 ═════════════ */
  .capital-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
  }
  .capital-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 18px 20px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
  }
  .capital-card:hover {
    transform: translateY(-2px);
    
    border-color: var(--border-strong);
  }
  .capital-card-label {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .capital-card-help {
    margin-left: auto;
    color: var(--text-4);
    cursor: help;
    font-size: 11px;
  }
  .capital-card-value {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    margin-top: 10px;
    letter-spacing: -0.7px;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
  }
  .capital-card-sub {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 4px;
    font-family: var(--font-mono);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .capital-card-spark {
    margin-top: 10px;
    height: 32px;
    width: 100%;
  }
  .capital-card-extra {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
  }
  .capital-card-extra-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .capital-card-extra-label { color: var(--text-3); font-size: 11px; }
  .capital-card-extra-val {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
  }
  .capital-card-historical {
    margin-top: 8px;
    font-size: 10px;
    color: var(--text-3);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .pct-rank-bar {
    flex: 1;
    height: 3px;
    background: var(--bg-subtle);
    border-radius: 3px;
    overflow: hidden;
  }
  .pct-rank-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
  }
  
  /* ═════════════ 市场宽度(涨跌全景重构) ═════════════ */
  .breadth-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 22px 24px;
    margin-bottom: 32px;
  }
  .breadth-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
  .breadth-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .breadth-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
  }
  .breadth-value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.6px;
    line-height: 1.1;
  }
  .breadth-meta {
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-3);
  }
  .breadth-bars {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px dashed var(--border-subtle);
  }
  .breadth-bar-line {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
  }
  .breadth-bar-line:last-child { margin-bottom: 0; }
  .breadth-bar-label {
    width: 100px;
    font-size: 11px;
    color: var(--text-2);
    font-weight: 600;
  }
  .breadth-bar-track {
    flex: 1;
    height: 8px;
    background: var(--bg-subtle);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
  }
  .breadth-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .breadth-bar-fill.up { background: linear-gradient(90deg, var(--up), var(--up)); }
  .breadth-bar-fill.down { background: linear-gradient(90deg, var(--down), var(--down)); }
  .breadth-bar-fill.flat { background: var(--flat); }
  .breadth-bar-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    width: 130px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  
  /* 情绪派(折叠 sub-tab) */
  .breadth-sentiment {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px dashed var(--border-subtle);
  }
  .breadth-sentiment-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
  }
  .breadth-sentiment-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .breadth-sentiment-toggle {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .breadth-sentiment-body {
    margin-top: 14px;
    display: none;
  }
  .breadth-sentiment.expanded .breadth-sentiment-body { display: block; }
  .breadth-sentiment.expanded .breadth-sentiment-toggle svg { transform: rotate(180deg); }
  
  /* ═════════════ AI 盘面摘要 ═════════════ */
  .ai-recap {
    background: linear-gradient(135deg, var(--bg-card) 0%, #fbf9f4 100%);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    
    padding: 18px 22px;
    margin-bottom: 32px;
  }
  .ai-recap-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .ai-recap-eyebrow {
    font-size: 11px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .ai-recap-time {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--font-mono);
  }
  .ai-recap-body {
    font-size: 14px;
    color: var(--text-1);
    line-height: 1.75;
    letter-spacing: -0.1px;
  }
  .ai-recap-body .hl-up { color: var(--up); font-weight: 600; }
  .ai-recap-body .hl-down { color: var(--down); font-weight: 600; }
  .ai-recap-body .hl-link {
    color: var(--text-1);
    border-bottom: 1px dashed var(--text-3);
    cursor: pointer;
    font-weight: 500;
  }
  .ai-recap-body .hl-link:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent);
  }
  .ai-recap-foot {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-3);
  }
  .ai-recap-trigger {
    color: var(--accent);
    cursor: pointer;
    font-weight: 600;
  }
  
  /* ═════════════ 板块热力图维度切换 ═════════════ */
  .heatmap-legend {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--font-mono);
  }
  /* ═════════════ 异动雷达 ═════════════ */
  .radar-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    overflow: hidden;
    margin-bottom: 32px;
  }
  .radar-item {
    display: grid;
    grid-template-columns: 60px 100px 1.5fr 1fr 90px 90px;
    gap: 14px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border-soft);
    align-items: center;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.12s;
  }
  .radar-item:last-child { border-bottom: none; }
  .radar-item:hover { background: var(--bg-hover); }
  .radar-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-2);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  .radar-type {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    width: fit-content;
  }
  .radar-type.zhangting { background: var(--up-soft); color: var(--up); border: 1px solid var(--up-line); }
  .radar-type.dieting { background: var(--down-soft); color: var(--down); border: 1px solid var(--down-line); }
  .radar-type.tupo { background: var(--up-soft); color: var(--up); border: 1px solid var(--up-line); }
  .radar-type.diepo { background: var(--down-soft); color: var(--down); border: 1px solid var(--down-line); }
  .radar-type.fangliang { background: var(--bg-subtle); color: var(--text-1); border: 1px solid var(--border-strong); }
  
  .radar-name {
    font-weight: 600;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .radar-code {
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-weight: 500;
  }
  .radar-desc {
    font-size: 13px;
    color: var(--text-2);
  }
  .radar-pct {
    font-family: var(--font-mono);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  .radar-vol {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-3);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }
  
  .radar-filter {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    padding: 3px;
  }
  .radar-filter-item {
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-3);
    transition: all 0.15s;
    user-select: none;
  }
  .radar-filter-item:hover { color: var(--text-1); }
  .radar-filter-item.active {
    background: var(--bg-subtle);
    color: var(--text-1);
  }
  
  /* ═════════════ 全球联动底部条 ═════════════ */
  /* ═════════════ AI 助手 - 示例气泡(放大点击区域) ═════════════ */
  /* 平盘色辅助 */
  .flat { color: var(--flat); }
  
  /* ═════════════ 板块热力图 D3 Treemap ═════════════ */
  .hm-legend-scale {
    display: inline-flex;
    border: 1px solid var(--border-subtle);
  }
  .hm-legend-scale span {
    width: 14px;
    height: 11px;
    display: block;
    background: var(--bg-main);
  }
  .hm-legend-scale span > i {
    display: block;
    width: 100%;
    height: 100%;
  }
  .heatmap-treemap-wrap text {
    pointer-events: none;
    user-select: none;
    font-family: var(--font-sans);
  }
  .heatmap-treemap-wrap .hm-cell {
    cursor: pointer;
  }
  .hm-tt {
    position: absolute;
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    padding: 10px 14px;
    pointer-events: none;
    font-size: 13px;
    color: var(--text-1);
    border-radius: 4px;
    display: none;
    max-width: 240px;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  }
  .hm-tt .tt-sector {
    font-size: 11px;
    color: var(--text-3);
    margin-bottom: 3px;
  }
  .hm-tt .tt-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
  }
  .hm-tt .tt-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 3px;
  }
  .hm-tt .tt-row span:first-child { color: var(--text-3); }
  .hm-tt .tt-pct {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 13px;
  }
  
  /* 板块热力图 - 标题行的色阶 legend(改为左上) */
  .heatmap-section-head {
    align-items: center;
  }
  .hm-inline-legend {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  
  /* 「更多」按钮 */
  .hm-expand-btn {
    font-size: 13px;
    color: var(--accent);
    cursor: pointer;
    padding: 4px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 4px;
    transition: all 0.12s;
    user-select: none;
    background: var(--bg-card);
    font-weight: 500;
  }
  .hm-expand-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  
  /* 全屏 modal */
  .hm-fullscreen {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-main);
    z-index: 1000;
    flex-direction: column;
  }
  .hm-fullscreen.open { display: flex; }
  
  .hm-fs-head {
    flex-shrink: 0;
    height: 56px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    gap: 18px;
  }
  .hm-fs-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.2px;
  }
  .hm-fs-meta {
    font-size: 11px;
    color: var(--text-3);
    font-family: var(--font-mono);
  }
  .hm-fs-zoom-info {
    font-size: 12px;
    color: var(--text-2);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
    font-weight: 600;
  }
  .hm-fs-btn {
    font-size: 12px;
    color: var(--text-2);
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    padding: 4px 10px;
    border-radius: 3px;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: all 0.12s;
  }
  .hm-fs-btn:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
  }
  .hm-fs-close {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    font-family: var(--font-sans);
  }
  .hm-fs-close:hover {
    background: var(--up);
    color: white;
    border-color: var(--up);
  }
  
  .hm-fs-body {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: var(--bg-main);
    cursor: grab;
  }
  .hm-fs-body.dragging { cursor: grabbing; }
  .hm-fs-body svg {
    width: 100%;
    height: 100%;
    display: block;
    transform-origin: 0 0;
    transition: none;
  }
  
  /* ═════════════════════════════════════════════════════════════════
     数据 Panel v3 · 顶部下拉 mega menu × Watchpilot 极简
     hover「数据」Tab → 下方浮现横版 7 列导航
     ═════════════════════════════════════════════════════════════════ */
  
  .data-container {
    margin: -32px -32px 0 -32px;
    background: var(--bg-main);
    min-height: calc(100vh - 60px);
  }
  
  /* 主区域全宽(不再有左侧树切割)*/
  .data-fullwidth {
    padding: 20px 24px 60px 24px;
  }
  
  /* 数据 Tab 容器:让 mega menu 可定位 */
  .tabs .tab.has-mega {
    position: relative;
  }

  /* ════════════════════════════════════════════════════════════════════
     响应式自适应 (数据 Tab) — 多卡片网格在窄屏收列, 防挤压。
     宽行表(.row-*)用 fr 列已能压缩, 此处只处理等分卡片组。
     ════════════════════════════════════════════════════════════════════ */
  @media (max-width: 1280px) {
    .capital-row  { grid-template-columns: repeat(2, 1fr); }
    .breadth-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 1024px) {
    .capital-row  { grid-template-columns: repeat(2, 1fr); }
    .breadth-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 768px) {
    .capital-row  { grid-template-columns: 1fr; }
    .breadth-grid { grid-template-columns: 1fr; }
  }