.today-panel {
  margin: 18px 0 24px;
  padding: 20px;
  border: 1px solid #e2d5ae;
  border-radius: 12px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff 65%);
  box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
}

.today-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.today-panel h2 {
  margin: 4px 0 0;
  font-size: 21px;
}

.today-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 17px;
}

.today-metrics > div {
  padding: 13px;
  border: 1px solid #eee8d9;
  border-radius: 9px;
  background: rgb(255 255 255 / 76%);
}

.today-metrics span,
.today-metrics strong,
.today-metrics small {
  display: block;
}

.today-metrics span {
  color: #75717a;
  font-size: 12px;
}

.today-metrics strong {
  margin: 6px 0;
  font-size: 22px;
}

.today-metrics small,
.today-updated {
  color: #77737c;
  font-size: 12px;
}

.today-updated {
  margin: 13px 0 0;
}

.today-empty {
  margin: 18px 0 0;
}

.period-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 -7px;
}

.period-heading h2 {
  margin: 0;
  font-size: 19px;
}

.period-heading span {
  color: #777784;
  font-size: 12px;
}

@media (max-width: 900px) {
  .today-metrics { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .period-heading { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 520px) {
  .today-panel-head { display: block; }
  .today-panel-head .status-pill { margin-top: 10px; }
  .today-metrics { grid-template-columns: 1fr; }
}