/* ── 页面容器 ── */
.page-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ── 区块间距 ── */
.section {
  padding: var(--space-20) 0;
}

/* ── 区块标题 ── */
.section-title {
  font-size: var(--text-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-text-primary);
  text-align: center;
  margin-bottom: var(--space-12);
}

.section-subtitle {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  text-align: center;
  margin-top: calc(-1 * var(--space-8));
  margin-bottom: var(--space-12);
}

/* ── 深色卡片 ── */
.dark-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── 弹窗内深色卡片：覆盖透明背景，确保不透出底层内容 ── */
.modal-overlay .dark-card {
  background: #151515;
}

/* ── 涨跌色 ── */
.text-up   { color: var(--color-up); }
.text-down { color: var(--color-down); }

/* ── 品牌色文字 ── */
.text-primary { color: var(--color-primary); }

/* ── 次要文字 ── */
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }

/* ── 数字等宽 ── */
.num { font-family: var(--font-family-num); font-variant-numeric: tabular-nums; }

/* ── 页面主体（header 下方） ── */
.page-main {
  min-height: calc(100vh - var(--header-height));
  padding-top: var(--header-height);
}

/* ── 移动端全局断点 ── */
@media (max-width: 768px) {
  .page-container {
    padding: 0 var(--space-4);
  }
  .section {
    padding: var(--space-12) 0;
  }
  .section-title {
    font-size: var(--text-h2);
    margin-bottom: var(--space-8);
  }
}
