:root{
  --x-text: #eef4ff;
  --x-muted: #8ea2c8;
  --x-border: rgba(255,255,255,.07);
  --x-shadow: 0 10px 28px rgba(0,0,0,.28);
}

/* GRID */
.x-stat-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap:14px;
  margin-bottom:18px;
}

/* CARD BASE */
.x-stat-card{
  position:relative;
  overflow:hidden;
  min-height:140px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--x-border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    linear-gradient(135deg, rgba(10,24,52,.96), rgba(5,12,24,.98));
  box-shadow: var(--x-shadow);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  display:flex;
  flex-direction:column;
}

.x-stat-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top right, rgba(255,255,255,.06), transparent 35%);
  pointer-events:none;
}

.x-stat-card::after{
  content:"";
  position:absolute;
  right:-22px;
  bottom:-22px;
  width:88px;
  height:88px;
  border-radius:50%;
  background: rgba(255,255,255,.035);
  filter: blur(8px);
  pointer-events:none;
}

.x-stat-card:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.12);
  box-shadow: 0 16px 36px rgba(0,0,0,.34);
}

.x-stat-card__action{
  padding:8px 10px;
  font-size:12px;
}
/* TOP */
.x-stat-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.x-stat-card__icon{
  width:46px;
  height:46px;
  min-width:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.07);
  color:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.x-stat-card__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.06);
  color:#dce7ff;
  font-size:11px;
  font-weight:700;
  letter-spacing:.35px;
  line-height:1;
  white-space:nowrap;
}

/* BODY */
.x-stat-card__value{
  font-size:30px;
  line-height:1.05;
  font-weight:800;
  color:#fff;
  letter-spacing:-.4px;
  margin-bottom:6px;
  word-break:break-word;
}

.x-stat-card__title{
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.25px;
  color:#dce7fb;
  margin-bottom:6px;
}

.x-stat-card__meta{
  font-size:12px;
  line-height:1.45;
  color:var(--x-muted);
  margin-bottom:14px;
}

/* ACTION */
.x-stat-card__action{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  text-decoration:none !important;
  color:#f2f6ff;
  font-size:13px;
  font-weight:700;
  line-height:1;
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}

.x-stat-card__action:hover{
  color:#fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  transform: translateY(-1px);
}

.x-stat-card__action i{
  font-size:12px;
}

/* COLOR VARIANTS */
.x-stat-card--blue .x-stat-card__icon{
  background: rgba(59,130,246,.16);
  border-color: rgba(59,130,246,.18);
  color:#7db3ff;
}
.x-stat-card--blue:hover{
  border-color: rgba(59,130,246,.22);
}

.x-stat-card--orange .x-stat-card__icon{
  background: rgba(249,115,22,.16);
  border-color: rgba(249,115,22,.18);
  color:#ffb36c;
}
.x-stat-card--orange:hover{
  border-color: rgba(249,115,22,.22);
}

.x-stat-card--yellow .x-stat-card__icon{
  background: rgba(245,158,11,.16);
  border-color: rgba(245,158,11,.18);
  color:#ffd56f;
}
.x-stat-card--yellow:hover{
  border-color: rgba(245,158,11,.22);
}

.x-stat-card--red .x-stat-card__icon{
  background: rgba(239,68,68,.16);
  border-color: rgba(239,68,68,.18);
  color:#ff9d9d;
}
.x-stat-card--red:hover{
  border-color: rgba(239,68,68,.22);
}

.x-stat-card--green .x-stat-card__icon{
  background: rgba(16,185,129,.16);
  border-color: rgba(16,185,129,.18);
  color:#74efc0;
}
.x-stat-card--green:hover{
  border-color: rgba(16,185,129,.22);
}

.x-stat-card--purple .x-stat-card__icon{
  background: rgba(139,92,246,.16);
  border-color: rgba(139,92,246,.18);
  color:#cab8ff;
}
.x-stat-card--purple:hover{
  border-color: rgba(139,92,246,.22);
}

.x-stat-card--gray .x-stat-card__icon{
  background: rgba(148,163,184,.16);
  border-color: rgba(148,163,184,.18);
  color:#d5dfef;
}
.x-stat-card--gray:hover{
  border-color: rgba(148,163,184,.24);
}



/* OPTIONAL: card clickable */
.x-stat-card--clickable{
  cursor:pointer;
}

/* RESPONSIVE */
@media (max-width: 1600px){
  .x-stat-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 992px){
  .x-stat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .x-stat-card{
    min-height:148px;
  }
}

@media (max-width: 576px){
  .x-stat-grid{
    grid-template-columns: 1fr;
  }

  .x-stat-card{
    min-height:auto;
  }

  .x-stat-card__value{
    font-size:26px;
  }
}