.hr-data-center { margin-top: 18px; }
.hr-data-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.hr-data-heading p { color: #6b7671; font-size: 12px; line-height: 1.6; margin-top: 4px; }
.hr-backup-state { padding: 7px 10px; border-radius: 999px; background: #f2f5f3; color: #68736e; font-size: 11px; white-space: nowrap; }
.hr-backup-state.warn { color: #925c16; background: #fff3df; }
.hr-data-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.hr-data-item { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; padding: 14px; border: 1px solid #dce4e0; border-radius: 12px; background: #fbfcfb; }
.hr-data-item b { color: #263c33; font-size: 13px; }
.hr-data-item strong { color: var(--accent); font-size: 18px; }
.hr-data-item span { color: #78827d; font-size: 11px; }
.hr-data-item small { color: #7b8580; text-align: right; }
.hr-data-foot { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; padding-top: 13px; border-top: 1px solid #e3e8e5; }
.hr-data-size { display: grid; gap: 3px; color: #53615b; font-size: 12px; }
.hr-data-size small { color: #7c8782; }
.hr-data-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.hr-data-note { margin-top: 11px; padding: 10px 12px; border-left: 3px solid #2b765e; background: #f0f6f3; color: #57665f; font-size: 11px; line-height: 1.6; }
.hr-history { margin-top: 14px; padding-top: 13px; border-top: 1px solid #e3e8e5; }
.hr-history-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hr-history-head b { font-size: 12px; color: #53615b; }
.hr-history-head small { color: #88918d; }
.hr-history-list { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px 2px; }
.hr-history-card { min-width: 172px; display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 10px 11px; border: 1px solid #d8e2dd; border-radius: 10px; background: #fff; text-align: left; color: #31443b; }
.hr-history-card:hover { border-color: var(--accent); background: #f6faf8; }
.hr-history-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.hr-history-card span { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #7b8680; font-size: 11px; }
.hr-history-card i { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: #83908a; font-style: normal; }
.hr-history-empty { color: #8a938f; font-size: 11px; padding: 10px 0 2px; }
.hr-tool-storage { padding: 6px 9px; border-radius: 999px; background: #eef5f1; color: #376351; font-size: 11px; white-space: nowrap; }
.hr-tool-meta { margin: -5px 0 12px; color: #64736c; font-size: 11px; }
@media (max-width: 820px) {
  .hr-data-grid { grid-template-columns: 1fr; }
  .hr-data-foot, .hr-data-heading { align-items: stretch; flex-direction: column; }
  .hr-data-actions { justify-content: flex-start; }
  .hr-backup-state { width: fit-content; }
}