/* ==========================================================================
   FinLearn 卡片容器统一层（Container Unification）
   --------------------------------------------------------------------------
   问题：不同页面用了各自的自定义容器类，尺度不一致：

     finance       .viz          （财务图表卡）
     cases         .case-card    （案例卡）
     resources     .video-card   （视频卡）
     ai/evidence   .panel        （面板）
     evidence      .accordion    （折叠区）
     quiz          .card + .card__head / .card__body
     study         .card__body / .panel--sunken
     roadmap       .card
     platform      .ws / .ws-strip / .ws-panel（脚本动态渲染）

   审计结果：内边距种类 0—1 种（已较统一），但圆角在 6px/8px/10px 间摇摆，
   卡片头/体/脚的内边距也未完全对齐。

   本层把上述全部容器收敛到同一套尺度：
     · 圆角 8px（Tabler 卡片）
     · 卡片头 20px，卡具体 20px，卡脚 16px 20px
     · 描边 #e4eaf1，阴影 0 1px 2px rgba(16,24,40,.04)
     · 悬停统一抬起 2px
   ========================================================================== */

/* ==========================================================================
   1. 全部卡片类容器：统一描边 / 圆角 / 阴影 / 背景
   ========================================================================== */
.page-body .card,
.page-body .viz,
.page-body .stat,
.page-body .fl-stat,
.page-body .panel,
.page-body .panel--sunken,
.page-body .case-card,
.page-body .video-card,
.page-body .accordion,
.page-body details.accordion,
.page-body .tool,
.page-body .who__card,
.page-body .formula-card,
.page-body .board-card,
.page-body .org-node,
.page-body .tri__col,
.page-body .ws,
.page-body .ws-panel,
.page-body .ws-strip,
.page-body .ws-table-wrap,
.page-body .ws-nav,
.page-body .table-wrap,
.page-body .toc,
.page-body nav.toc {
  border: 1px solid #e4eaf1;
  border-radius: 8px !important;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* 次级面板用浅底，与主卡形成层次 */
.page-body .panel--sunken,
.page-body .toc,
.page-body nav.toc {
  background: #f7f9fc;
}

/* ==========================================================================
   2. 卡片头：统一 20px 内边距 + 底部分隔线
   ========================================================================== */
.page-body .card > .card-header,
.page-body .card-header,
.page-body .viz__head,
.page-body .card__head,
.page-body .panel__head,
.page-body .ws-panel__head,
.page-body .accordion > summary,
.page-body details.accordion > summary {
  padding: 20px !important;
  border-bottom: 1px solid #e4eaf1;
  background: #ffffff;
  border-radius: 8px 8px 0 0;
  min-height: 0;
}

/* 折叠区展开时标题不再有底边 */
.page-body details[open] > summary { border-bottom-color: #e4eaf1; }
.page-body details:not([open]) > summary { border-bottom: 0; border-radius: 8px; }

/* ==========================================================================
   3. 卡片体：统一 20px
   ========================================================================== */
.page-body .card > .card-body,
.page-body .card-body,
.page-body .viz__body,
.page-body .card__body,
.page-body .panel__body,
.page-body .ws-panel__body,
.page-body .accordion__body,
.page-body .case-card__body,
.page-body .video-card__body,
.page-body .who__card,
.page-body .formula-card {
  padding: 20px !important;
  font-size: 14px;
  line-height: 22px;
}

/* 媒体型卡片（视频卡、案例卡）的图片区不加内边距 */
.page-body .video-card__media,
.page-body .case-card__media {
  padding: 0 !important;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
}

/* ==========================================================================
   4. 卡片脚：16px 20px
   ========================================================================== */
.page-body .card > .card-footer,
.page-body .card-footer,
.page-body .card__foot,
.page-body .panel__foot,
.page-body .ws-panel__foot {
  padding: 16px 20px !important;
  border-top: 1px solid #e4eaf1;
  background: #fbfcfe;
  border-radius: 0 0 8px 8px;
}

/* ==========================================================================
   5. 悬停统一：抬起 2px + 阴影加深
   ========================================================================== */
.page-body .card:hover,
.page-body .viz:hover,
.page-body .stat:hover,
.page-body .fl-stat:hover,
.page-body .panel:hover,
.page-body .case-card:hover,
.page-body .video-card:hover,
.page-body .tool:hover,
.page-body .who__card:hover,
.page-body .formula-card:hover,
.page-body .board-card:hover,
.page-body .tri__col:hover,
.page-body .ws-panel:hover {
  border-color: #cfe0f2;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .08);
  transform: translateY(-2px);
}

/* 表格容器与侧栏不抬起（内部有可点元素，抬起会晃） */
.page-body .ws-table-wrap:hover,
.page-body .ws-nav:hover,
.page-body .table-wrap:hover,
.page-body .toc:hover {
  transform: none;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  border-color: #e4eaf1;
}

/* ==========================================================================
   6. 卡片标题：统一 16px w600 lh24
   ========================================================================== */
.page-body .card-title,
.page-body .viz__title,
.page-body .card__title,
.page-body .panel__title,
.page-body .tool__title,
.page-body .who__name,
.page-body .tri__title,
.page-body .accordion > summary,
.page-body details.accordion > summary,
.page-body .toc__title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 24px !important;
  color: #101a26;
  letter-spacing: normal;
}

/* ==========================================================================
   7. 网格容器：统一槽宽 20px
   ========================================================================== */
.page-body .grid,
.page-body .grid--2,
.page-body .grid--3,
.page-body .grid--4,
.page-body .grid--sidebar,
.page-body .case-grid,
.page-body .video-grid {
  gap: 20px !important;
}

/* 棋盘式卡片列表：保证同行等高 */
.page-body .case-grid > *,
.page-body .video-grid > *,
.page-body .grid > * { min-width: 0; }

/* ==========================================================================
   8. 滤镜条 / 工具条：统一为面板
   ========================================================================== */
.page-body .filter-bar {
  padding: 16px 20px !important;
  border: 1px solid #e4eaf1;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.page-body .filter-bar__row { gap: 12px; }
.page-body .filter-bar__status { font-size: 13px; color: #55616f; }

/* ==========================================================================
   9. 表格容器内的表头与首行圆角处理
   ========================================================================== */
.page-body .ws-table-wrap > .ws-table,
.page-body .table-wrap > table { border-radius: 8px; overflow: hidden; }

/* ==========================================================================
   10. 空态与错误态：统一内边距
   ========================================================================== */
.page-body .state,
.page-body .ws__empty,
.page-body .ws-empty {
  padding: 32px 20px !important;
  border-radius: 8px;
}

/* ==========================================================================
   11. 深色模式
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  .page-body .card,
  .page-body .viz, .page-body .stat, .page-body .fl-stat,
  .page-body .panel, .page-body .case-card, .page-body .video-card,
  .page-body .accordion, .page-body .tool, .page-body .ws-table-wrap,
  .page-body .ws-nav, .page-body .ws-panel, .page-body .ws,
  .page-body .filter-bar {
    background: #16202e;
    border-color: #253141;
  }

  .page-body .panel--sunken,
  .page-body .toc { background: #1b2634; }

  .page-body .card > .card-header,
  .page-body .viz__head, .page-body .accordion > summary {
    background: #16202e;
    border-bottom-color: #253141;
  }

  .page-body .card-footer, .page-body .card__foot {
    background: #1b2634;
    border-top-color: #253141;
  }

  .page-body .card-title, .page-body .viz__title,
  .page-body .card__title, .page-body .tool__title { color: #f2f6fa; }
}