/* ============================================================
   Page 2: 运行趋势洞察 — 专属样式
   ============================================================ */

/* 主趋势图容器 */
#chartMainTrend {
  min-height: 400px;
}

/* 预测模式指示器 */
.forecast-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  background: rgba(124, 58, 237, 0.1);
  color: var(--color-secondary);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

/* 模型说明面板动画 */
#modelInfoPanel {
  transition: all 0.3s ease;
}

/* 自定义面板增强 */
#customPanel {
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* 环比图表bar颜色 */
.mom-positive { fill: rgba(16, 185, 129, 0.7); }
.mom-negative { fill: rgba(239, 68, 68, 0.7); }

/* 表格排序指示 */
.data-table th[data-col] {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.data-table th[data-col]:hover {
  color: var(--color-primary);
}

.data-table th.sorted {
  color: var(--color-primary);
}

.data-table th.sorted .sort-icon {
  opacity: 1;
  color: var(--color-primary);
}

/* 响应式 */
@media (max-width: 1024px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .grid-3 { grid-template-columns: 1fr; }
  .tab-bar {
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  .tab-btn {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
  }
}