/* ============================================================
   P3 · 统一容器类 + P2a · 按钮 loading 态
   2026-09-24 陈律拍板（视觉与交互改造第三阶段）
   ------------------------------------------------------------
   只新增类，不批量替换老页面——老页面继续用自拼的 border+padding，
   新页面与新区块用这套，逐步收敛。圆角 0、无阴影、1px 细线，
   颜色全部取自 base.html 的「东方留白」变量，不另立色值。

   本文件通过 config/view.php 的 tpl_replace_string 注入到 </head> 前，
   因此没有改动 view/layout/base.html（当时另一个任务正在改它）。
   ============================================================ */

/* ---------- 卡片 ---------- */
.b-card { background: var(--surface); border: 1px solid var(--hair); }
.b-card-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-5);
    border-bottom: 1px solid var(--hair);
    font-family: var(--serif); font-size: 16px; font-weight: var(--w-semi);
    color: var(--ink);
}
.b-card-head .b-card-sub {
    font-family: var(--sans); font-size: 12px; font-weight: var(--w-regular);
    color: var(--faint);
}
.b-card-body { padding: var(--sp-5); }
/* 表体不留内距，交给单元格自己撑（表格卡片用） */
.b-card-body.b-flush { padding: 0; }

/* ---------- 表格 ---------- */
/* 13px 是 P1 立的「数据表格密集档」，全站字号六档之外的唯一例外 */
.b-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.b-table thead th {
    padding: var(--sp-2) var(--sp-4);
    border-bottom: 1px solid var(--hair);
    font-family: var(--sans); font-size: 12px; font-weight: var(--w-medium);
    color: var(--faint); text-align: left; white-space: nowrap;
}
.b-table tbody td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--hair);
    color: var(--ink);
}
.b-table tbody tr:last-child td { border-bottom: 0; }
.b-table tbody tr:hover { background: var(--ground); }

/* ---------- 空状态三件套 ---------- */
/* 一句话说明 + 为什么空 + 一个行动入口。不加插画——留白本身就是「空」的表达 */
.b-empty { padding: var(--sp-7) var(--sp-5); text-align: center; }
.b-empty-title { font-size: 14px; color: var(--ink); }
.b-empty-why { margin-top: var(--sp-1); font-size: 12px; color: var(--faint); }
.b-empty-action { margin-top: var(--sp-4); }

/* ---------- P2a · 按钮 loading ---------- */
.b-spin { flex: none; }
@media (prefers-reduced-motion: no-preference) {
    .b-spin { animation: b-spin .7s linear infinite; }
}
@keyframes b-spin { to { transform: rotate(360deg); } }
button.is-loading, input.is-loading, .b-btn.is-loading {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    opacity: .75; cursor: progress;
}
/* 图标按钮（.icon-btn）正在转圈时不要把圆底撑变形 */
.icon-btn.is-loading { justify-content: center; }