.page-metrics { margin: 1.2rem 0 1.8rem; }
.page-metrics-scope { color: #74869a; font-size: .75rem; margin-bottom: .75rem; line-height: 1.5; }
.page-metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.page-metric { --metric-color: #0784b4; --metric-soft: #eaf6fc; position: relative; border: 1px solid #e0e8f1; background: white; border-radius: 16px; padding: 1.15rem 1.25rem; min-width: 0; box-shadow: 0 4px 18px #12355504; }
.page-metric-green { --metric-color: #128363; --metric-soft: #eaf8f2; }
.page-metric-violet { --metric-color: #7653c6; --metric-soft: #f1edfc; }
.page-metric-amber { --metric-color: #af7a15; --metric-soft: #fff7e5; }
.page-metric-heading { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.page-metric .page-metric-heading h2 { font-size: .73rem; font-weight: 700; line-height: 1.5; color: #60758c; margin: 0; }
.page-metric-icon { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: var(--metric-soft); color: var(--metric-color); }
.page-metric-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; margin-bottom: .65rem; }
.page-metric-figure strong { font-size: clamp(1.65rem, 2.1vw, 2.2rem); color: #19364e; font-weight: 800; letter-spacing: -.045em; line-height: 1.25; }
.page-metric-figure > span { font-size: .68rem; color: var(--metric-color); background: var(--metric-soft); padding: .2rem .5rem; border-radius: 6px; }
.page-metric > p { font-size: .73rem; color: #7b8a9b; line-height: 1.65; margin: 0; }
.page-metric-progress { height: 3px; background: #edf2f7; border-radius: 3px; margin-top: .75rem; overflow: hidden; }
.page-metric-progress > span { display: block; height: 100%; background: var(--metric-color); }
@media (max-width: 991.98px) { .page-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .page-metrics-grid { gap: .7rem; } .page-metric { padding: .9rem; } .page-metric-heading { gap: .35rem; } .page-metric-icon { width: 28px; height: 28px; font-size: .85rem; } .page-metric .page-metric-heading h2 { font-size: .7rem; } }
@media (max-width: 359.98px) { .page-metrics-grid { grid-template-columns: 1fr; } }
@media print { .page-metric { break-inside: avoid; box-shadow: none; } .page-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }