/* M8 失败原因统计报表（tasks.html）浅蓝白体系，纯 CSS 条形图 */
.m8-card {
  background: #fff; border: 1px solid rgba(56,189,248,.16); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 16px;
  box-shadow: 0 6px 22px rgba(29,33,41,.08);
}
.m8-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.m8-head h2 { font-size: 16px; font-weight: 700; color: #1d2129; }
.m8-total { background: #e6f4ff; color: #1d2129; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 600; }
.m8-last { font-size: 12px; color: #909399; margin-left: auto; }
.m8-sub { font-size: 12px; color: #606266; margin-bottom: 12px; }

.m8-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.m8-rlabel { width: 84px; flex: 0 0 84px; font-size: 13px; color: #1d2129; }
.m8-track { flex: 1; height: 18px; background: #e6f4ff; border-radius: 999px; overflow: hidden; }
.m8-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg,#38BDF8,#38BDF8); min-width: 2px; transition: width .35s ease; }
.m8-fill.alt { background: linear-gradient(90deg,#A9C6E8,#38BDF8); }
.m8-rval { width: 118px; flex: 0 0 118px; font-size: 12px; color: #606266; text-align: right; }

.m8-divider { border: 0; border-top: 1px dashed #C9DCF3; margin: 14px 0 10px; }
.m8-gtitle { font-size: 13px; font-weight: 600; color: #1d2129; margin-bottom: 8px; }
.m8-empty { text-align: center; color: #909399; font-size: 13px; padding: 10px 0; }