/* ════════════════════════════════════════════════════════ */
/*                          METRICS                         */
/* ════════════════════════════════════════════════════════ */
.metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:20px}

.mc{
  padding:18px 20px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--r);
  transition:.2s}

.mc:hover{border-color:var(--border2);
  transform:translateY(-1px)}

.mc-ic{
  width:36px;height:36px;
  margin-bottom:12px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center}

.mc-ic svg{width:17px;height:17px}

.mc-val{
  margin-bottom:3px;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.5px}

.mc-lbl{font-size:12px;
  color:var(--text2)}

.mc-sub{margin-top:2px;font-size:11px;
  color:var(--text3)}