.sales-monthly {
  margin-bottom: 22px;
  padding: 22px;
  border: 1px solid #d7e4ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(7, 29, 67, .05);
}

.sales-monthly header h2 { margin: 8px 0 4px; color: #102e44; }
.sales-monthly header p { margin: 0 0 17px; color: #6b8091; font-size: 11px; }
.sales-month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sales-month-grid > article { overflow: hidden; border: 1px solid #d9e6ef; border-radius: 16px; background: linear-gradient(145deg, #fff, #f7fbff); }
.sales-month-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 15px; border-bottom: 1px solid #e3edf4; }
.sales-month-title span { color: #173650; font-size: 14px; font-weight: 800; }
.sales-month-title b { padding: 4px 8px; border-radius: 999px; background: #eaf4ff; color: #1767b7; font-size: 9px; }
.sales-month-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 13px; }
.sales-month-values span { min-width: 0; padding: 9px 7px; border-radius: 11px; background: #f3f7fa; text-align: center; }
.sales-month-values small { display: block; margin-bottom: 5px; color: #6b8091; font-size: 8px; }
.sales-month-values b { display: block; overflow: hidden; color: #284861; font-size: 12px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sales-month-values i { font-size: 8px; font-style: normal; }
.sales-month-values .profit { background: #eaf8f2; }
.sales-month-values .profit b { color: #11845e; }

@media (max-width: 1050px) { .sales-month-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 650px) { .sales-monthly { padding: 16px; } .sales-month-grid { grid-template-columns: 1fr; } }