/* ============================================================
   Watchpilot · cards.css
   行情 Tab 顶部卡片: Index cards / Stats / Heatmap / Flow / News
   (原 main.css 行 857-1188)
   ============================================================ */

  /* ─── Index cards ─── */
  .index-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 38px;
  }
  
  .index-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 16px 18px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    cursor: pointer;
  }
  .index-card:hover {
    transform: translateY(-2px);
    
    border-color: var(--border-strong);
  }
  .index-name {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 600;
    letter-spacing: -0.1px;
  }
  .index-value {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.6px;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
  }
  .index-change-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .index-change-abs {
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
  }
  
  .sparkline {
    margin-top: 10px;
    height: 48px;
    width: 100%;
    display: block;
  }
  
  /* ─── Stats card (涨跌全景) ─── */
  .stats-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 22px 26px;
    margin-bottom: 38px;
  }
  
  .stats-row {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
  }
  
  .stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .stat-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
  }
  .stat-value {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.8px;
    line-height: 1.1;
  }
  .stat-delta {
    font-size: 11px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  
  .stat-divider {
    width: 1px;
    height: 38px;
    background: var(--border-subtle);
    margin: 0 4px;
  }
  
  .ladder {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .ladder-label {
    font-size: 11px;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 600;
  }
  .ladder-chip {
    background: var(--up-soft);
    color: var(--up);
    padding: 3px 10px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }
  
  .bar-row {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .bar-line {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
  }
  .bar-label {
    width: 64px;
    color: var(--text-2);
    font-weight: 600;
    font-size: 11px;
  }
  .bar-track {
    flex: 1;
    height: 8px;
    background: #f0ece4;
    border-radius: 4px;
    overflow: hidden;
  }
  .bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .bar-fill.up { background: var(--up); }
  .bar-fill.down { background: var(--down); }
  .bar-fill.flat { background: var(--text-3); }
  .bar-value {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    width: 120px;
    text-align: right;
    font-variant-numeric: tabular-nums;
  }
  
  /* ─── Heatmap ─── */
  /* Heat colors - 适配新涨跌色(中国红 + 等饱和绿) */
  /* green scale (down) - 同饱和度,不弱于红 */
  /* ─── Flow ─── */
  .flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 38px;
  }
  
  .flow-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s, box-shadow 0.18s;
    cursor: pointer;
  }
  .flow-card:hover {
    transform: translateY(-2px);
    
  }
  .flow-label {
    font-size: 12px;
    color: var(--text-2);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 7px;
  }
  .flow-value {
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    margin-top: 10px;
    letter-spacing: -0.7px;
    font-variant-numeric: tabular-nums;
  }
  .flow-meta {
    font-size: 11px;
    color: var(--text-3);
    margin-top: 4px;
    font-weight: 500;
  }
  
  /* ─── News ─── */
  .news-card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    
    overflow: hidden;
    margin-bottom: 38px;
  }
  
  .news-item {
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
  }
  .news-item:last-child { border-bottom: none; }
  .news-item:hover { background: #fcfaf6; }
  
  .news-item.expanded::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--accent);
  }
  
  .news-headline {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -0.1px;
  }
  .news-marker {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--text-4);
    flex-shrink: 0;
  }
  .news-item.expanded .news-marker { background: var(--accent); }
  
  .news-headline-text { flex: 1; }
  
  .news-tags {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }
  
  .news-body {
    margin-top: 10px;
    margin-left: 17px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.65;
  }
  
  .news-chevron {
    color: var(--text-4);
    transition: transform 0.2s;
  }
  .news-item.expanded .news-chevron { transform: rotate(180deg); }
  
  .news-footer {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fcfaf6;
    font-size: 11px;
    color: var(--text-3);
    font-weight: 500;
  }
  
  .source-circles {
    display: flex;
    align-items: center;
  }
  .source-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--bg-card);
    background: var(--bg-subtle);
    margin-left: -7px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font-weight: 700;
    font-family: var(--font-mono);
  }
  .source-circle:first-child { margin-left: 0; }