.metrics-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.metrics-controls label { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.metrics-controls select { padding: 8px; border: 1px solid var(--line); background: var(--paper, #f4f2ed); color: inherit; }
.metrics-status, .metrics-definition { font-size: 12px; line-height: 1.6; color: #706f68; }
.metrics-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.metrics-summary article { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--line); background: white; }
.metrics-summary strong { font: 36px/1 Georgia, serif; }
.metrics-summary span { font-size: 12px; color: #706f68; }
.metrics-graph { display: flex; align-items: end; gap: 3px; height: 200px; border-bottom: 1px solid var(--line); padding-top: 12px; }
.metrics-day { display: flex; align-items: end; gap: 1px; height: 100%; flex: 1; min-width: 0; }
.metrics-day i, .metrics-day b { display: block; width: 50%; background: #ae813d; min-height: 1px; }
.metrics-day b { background: #344b63; }
.metrics-day:hover, .metrics-day:focus-visible { outline: 2px solid #344b63; outline-offset: 2px; }
.metrics-graph-legend, .metrics-axis { display: flex; gap: 20px; justify-content: space-between; font-size: 11px; margin: 14px 0; flex-wrap: wrap; }
.metrics-graph-legend { justify-content: start; }
.metrics-graph-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; background: #ae813d; margin-right: 6px; }
.metrics-graph-legend span:nth-child(2)::before { background: #344b63; }
.metrics-table-wrap { overflow-x: auto; max-width: 100%; }
.metrics-table-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.metrics-table-wrap th, .metrics-table-wrap td { text-align: left; padding: 13px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.metrics-table-wrap td { overflow-wrap: anywhere; }
.metrics-table-wrap td:first-child { min-width: 150px; }
.metrics-table-wrap small { display: block; margin-top: 5px; color: #706f68; }
.metrics-table-wrap code { font-size: 11px; }
.admin-sidebar-collapsed [data-admin-section="metrics"]::before { content: 'M'; }
@media (max-width: 700px) { .metrics-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }.metrics-summary article { padding: 16px; }.metrics-graph { height: 150px; gap: 1px; } }