.grid-cards{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
      margin-bottom:18px;
    }
    .card{
      background:var(--panel);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
      border-radius:var(--radius);
      padding:18px 18px 16px 18px;
      position:relative;
      min-height:128px;
      overflow:hidden;
    }
    .card::before{
      content:"";
      position:absolute;
      left:0;top:0;bottom:0;
      width:6px;
      background:var(--gray);
    }
    .card.metric-msg1::before{background:var(--blue)}
    .card.metric-responded::before{background:var(--purple)}
    .card.metric-ia::before{background:var(--orange)}
    .card.metric-human::before{background:var(--red)}
    .card.metric-waiting::before{background:var(--cyan)}
    .card.metric-pending::before{background:var(--gray)}
    .card.metric-final::before{background:var(--green)}
    .card.metric-converted::before{background:var(--teal)}
    .card.metric-conversion::before{background:var(--indigo)}
    .metric-label{
      color:#7b746c;
      font-size:12px;
      letter-spacing:.12em;
      text-transform:uppercase;
      font-weight:800;
      margin-bottom:8px;
    }
    .metric-value{
      font-size:46px;
      line-height:1;
      font-weight:800;
      margin-bottom:8px;
    }
    .metric-sub{
      color:var(--muted);
      font-size:14px;
    }