.metricsWorkspace { overflow: hidden; background: #fff; border: 1px solid #dfe4ed; border-radius: 14px; }
.metricsSyncStatus { margin: 0 22px 16px; padding: 11px 14px; color: #526078; background: #f5f7fb; border: 1px solid #e3e7ef; border-radius: 9px; font-size: 13px; }
.metricsSummary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 0 22px 20px; }
.metricsSummary article { min-width: 0; padding: 15px 16px; border: 1px solid #e1e6ef; border-radius: 11px; background: #fff; }
.metricsSummary small { display: block; color: #7f899b; font-size: 11px; }
.metricsSummary strong { display: block; overflow: hidden; margin-top: 5px; color: #141d31; font-size: 24px; text-overflow: ellipsis; }
.metricsSummary span { margin-left: 4px; color: #8a94a6; font-size: 11px; font-weight: normal; }
.metricsSectionHead { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding: 17px 22px 12px; border-top: 1px solid #e8ebf1; }
.metricsSectionHead h3 { margin: 3px 0 0; }
.metricsSectionHead small { color: #7c8699; }
.metricsVideoList { padding: 0 22px 22px; }
.metricsVideoRow { display: grid; grid-template-columns: minmax(220px, 1.8fr) repeat(5, minmax(72px, .55fr)) minmax(112px, .7fr); gap: 10px; align-items: center; min-height: 72px; padding: 10px 12px; border-top: 1px solid #e8ebf1; }
.metricsVideoRow:first-child { border-top: 0; }
.metricsVideoTitle { min-width: 0; }
.metricsVideoTitle h4 { overflow: hidden; margin: 0 0 5px; white-space: nowrap; text-overflow: ellipsis; }
.metricsVideoTitle p { overflow: hidden; margin: 0; color: #7a8599; font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }
.metricsValue { min-width: 0; }
.metricsValue b { display: block; overflow: hidden; color: #202a40; font-size: 15px; text-overflow: ellipsis; }
.metricsValue small { color: #8a94a5; font-size: 10px; }
.metricsSyncAction { text-align: right; }
.metricsSyncAction button { min-width: 104px; padding: 8px 10px; color: #4255c9; background: #f5f6ff; border: 1px solid #cdd4ff; border-radius: 8px; cursor: pointer; }
.metricsSyncAction small { display: block; margin-top: 5px; color: #8a94a5; font-size: 9px; }
@media (max-width: 1100px) {
  .metricsSummary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metricsVideoRow { grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(65px, .5fr)) minmax(110px, .65fr); }
  .metricsVideoRow .metricsValue:nth-of-type(4), .metricsVideoRow .metricsValue:nth-of-type(5) { display: none; }
}
@media (max-width: 720px) {
  .metricsSummary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metricsSectionHead { align-items: flex-start; flex-direction: column; }
  .metricsVideoRow { grid-template-columns: minmax(170px, 1fr) repeat(2, minmax(58px, .45fr)); }
  .metricsVideoRow .metricsValue:nth-of-type(n+3) { display: none; }
  .metricsSyncAction { grid-column: 1 / -1; text-align: left; }
}