.cost-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin: 16px 0;
}
.cost-filters > label { display: grid; gap: 6px; min-width: 160px; }
.cost-dialog {
  width: min(900px, 90vw);
  max-height: 90vh;
  overflow: auto;
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  padding: 24px;
}
.cost-dialog::backdrop { background: #0006; }
.cost-dialog form > label { display: grid; gap: 6px; margin: 12px 0; }
.cost-dialog input[type=checkbox] { width: auto; }
.cost-dialog .actions { margin-top: 16px; }
@media (max-width: 820px) {
  .layout:has(#cost-filter) { grid-template-columns: minmax(0, 1fr); }
  .cost-filters > label { min-width: 0; max-width: 100%; }
}
.cost-document { margin: 14px 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.cost-document-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 16px; }
.cost-document-select { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.cost-document input[type=checkbox] { width: auto; }
.cost-document-title { flex: 1; min-width: 180px; overflow-wrap: anywhere; }
.cost-document-title p { margin: 6px 0 0; }
.cost-document-totals { background: #f8fafc; padding: 12px 16px; line-height: 1.8; border-top: 1px solid var(--line); }
.cost-document summary { cursor: pointer; padding: 12px 16px; color: #1d4ed8; font-weight: 600; }
.cost-document .table-wrap { border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
/* 主功能与成本类型使用不同层级，避免连续两排操作按钮。 */
.cost-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 20px 0 24px; }
.cost-metric { border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; padding: 18px 20px; }
.cost-metric > span { display: block; color: #64748b; font-size: 13px; margin-bottom: 10px; }
.cost-metric > div { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cost-metric strong { font-size: 25px; font-weight: 650; letter-spacing: -.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cost-metric small, .cost-remaining small { color: #64748b; font-size: 12px; }
.cost-metric-surplus { background: #f0f5ff; border-color: #dbe6ff; }
.cost-metric-surplus strong { color: #1d4ed8; }
.cost-main-tabs { display: flex; gap: 28px; border-bottom: 1px solid #dce3ed; margin: 0 0 22px; overflow-x: auto; }
.cost-main-tabs button { flex-shrink: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: #64748b; padding: 12px 2px 14px; font-weight: 500; white-space: nowrap; box-shadow: none; }
.cost-main-tabs button:hover { background: transparent; color: #1d4ed8; }
.cost-main-tabs button[aria-pressed=true] { color: #1d4ed8; border-bottom-color: #2563eb; font-weight: 650; }
.cost-source-tabs { display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 4px; border: 1px solid #e2e8f0; border-radius: 9px; background: #eaf0f7; }
.cost-source-tabs button, .cost-source-tabs button.secondary { border: 0; background: transparent; color: #64748b; border-radius: 6px; padding: 8px 20px; box-shadow: none; }
.cost-source-tabs button[aria-pressed=true] { background: #fff; color: #1d4ed8; font-weight: 650; box-shadow: 0 1px 4px #0f172a14; }
#cost-filter, #cost-source-filter { padding: 16px 18px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; }
#cost-filter > label, #cost-source-filter > label { font-size: 13px; color: #475569; }
.cost-source-toolbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin: 18px 0 8px; }
.cost-remaining { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; }
.cost-remaining > span { color: #64748b; font-size: 13px; }
.cost-remaining strong { font-size: 20px; font-variant-numeric: tabular-nums; }
#cost-selection { margin: 8px 0 20px; font-size: 13px; }
@media (max-width: 600px) {
  .cost-overview { gap: 8px; }
  .cost-metric { padding: 12px 10px; }
  .cost-metric strong { font-size: 18px; }
  .cost-metric > span { font-size: 12px; }
  .cost-main-tabs { gap: 18px; }
}

.cost-payroll-breakdown { margin-top: 6px; min-width: 150px; font-size: 12px; }
.cost-payroll-breakdown summary { cursor: pointer; color: #2563eb; white-space: nowrap; }
.cost-payroll-breakdown dl { padding: 8px; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; margin: 6px 0 0; }
.cost-payroll-breakdown dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.cost-payroll-breakdown dd { margin: 0; font-variant-numeric: tabular-nums; }
.cost-breakdown-total { border-top: 1px solid #dce3ed; font-weight: 600; margin-top: 4px; }

.cost-collection-tabs { display: flex; gap: 20px; border-bottom: 1px solid #e2e8f0; margin: 14px 0 18px; }
.cost-collection-tabs button { display: flex; gap: 8px; align-items: center; background: transparent; color: #64748b; border: 0; border-radius: 0; padding: 10px 0; border-bottom: 2px solid transparent; }
.cost-collection-tabs button[aria-pressed=true] { color: #1d4ed8; border-bottom-color: #2563eb; font-weight: 600; }
.cost-collection-tabs button > span { font-size: 12px; padding: 1px 7px; background: #eaf0f7; border-radius: 10px; }
.cost-collection-badge { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.5; margin: 4px 6px 4px 0; }
.cost-collection-none { background: #fff1f2; color: #b42338; }
.cost-collection-partial { background: #fff4df; color: #925700; }
.cost-collection-full { background: #e9f8ef; color: #17643b; }
.cost-amount-none { color: #b42338; }
.cost-amount-partial { color: #925700; }
.cost-amount-full { color: #17643b; }
.cost-document-none { border-left: 3px solid #e26979; }
.cost-document-partial { border-left: 3px solid #d99a30; }
.cost-document-full { border-left: 3px solid #49a475; }