.daily-active { padding: 14px 12px 11px; overflow: hidden; background: linear-gradient(145deg, #fff 5%, #fffafb 100%); }
.daily-active-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 0 2px 7px; }
.daily-active-heading h2 { display: flex; min-width: 0; align-items: center; gap: 7px; margin: 0; color: #192742; font-size: 15px; font-weight: 800; white-space: nowrap; }
.daily-active-heading h2 span { color: #f46a48; font-size: 17px; }
.daily-active-updated { flex: none; color: #8b97aa; font-size: 9px; white-space: nowrap; }
.daily-active-metrics { display: flex; align-items: center; gap: 6px; margin: 0 2px 9px; color: #8390a6; font-size: 9px; white-space: nowrap; }
.daily-active-metrics > span { display: inline-flex; min-width: 0; flex: 1; align-items: center; justify-content: center; gap: 4px; }
.daily-active-metrics svg { width: 14px; height: 14px; flex: 0 0 14px; fill: #aab5c8; }
.daily-active-metrics b { color: #24334e; font-size: 12px; font-weight: 850; font-variant-numeric: tabular-nums; }
.daily-active-metrics .daily-active-new-count { color: #ed6547; }
.daily-active-metrics [data-daily-active-logins] { color: #3475dc; }
.daily-active-metrics small { color: #8390a6; font-size: 8px; }
.daily-active-metrics > i { width: 1px; height: 17px; flex: 0 0 1px; background: #e1e6ee; }
.daily-active-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 7px; }
.daily-active-person { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 9px 4px 7px; border: 1px solid #dfe7f1; border-radius: 12px; background: linear-gradient(155deg, #eff6ff, #fff 88%); text-align: center; }
.daily-active-person--1 { z-index: 1; border-color: #ffc0a8; background: linear-gradient(155deg, #fff2e5, #fff8f7 58%, #fff); box-shadow: 0 3px 10px rgba(234, 106, 65, .08); }
.daily-active-person--2 { background: linear-gradient(155deg, #eaf4ff, #fff 90%); }
.daily-active-person--3 { background: linear-gradient(155deg, #fff3e8, #fff 90%); }
.daily-active-rank { position: absolute; top: 5px; left: 5px; display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid #fff; border-radius: 50%; background: linear-gradient(145deg, #f4d47c, #d89e2d); color: #fff; font-size: 10px; font-weight: 850; box-shadow: 0 2px 5px #17233a26; }
.daily-active-person--2 .daily-active-rank { background: linear-gradient(145deg, #bdcce1, #7294c2); }
.daily-active-person--3 .daily-active-rank { background: linear-gradient(145deg, #edb58d, #cc8050); }
.daily-active-avatar { display: grid; width: 43px; height: 43px; flex: 0 0 43px; place-items: center; overflow: hidden; border: 3px solid #fff; border-radius: 50%; background: #eaf0f7; color: #46516a; font-size: 25px; box-shadow: 0 0 0 2px #f5c66e, 0 3px 8px rgba(34, 48, 77, .13); }
.daily-active-person--2 .daily-active-avatar { box-shadow: 0 0 0 2px #a7c5ec, 0 3px 8px rgba(34, 48, 77, .13); }
.daily-active-person--3 .daily-active-avatar { box-shadow: 0 0 0 2px #e8b28b, 0 3px 8px rgba(34, 48, 77, .13); }
.daily-active-avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.daily-active-name { width: 100%; margin-top: 7px; overflow: hidden; color: #1b2943; font-size: 10px; font-weight: 750; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.daily-active-score { display: flex; align-items: baseline; justify-content: center; gap: 3px; width: 100%; margin-top: 4px; padding: 2px 3px; border-radius: 999px; background: rgba(255, 228, 222, .72); color: #e64b37; }
.daily-active-score b { font-size: 17px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.daily-active-score span { color: #7d8598; font-size: 9px; font-weight: 700; }
.daily-active-person--2 .daily-active-score { background: #e5f0ff; color: #3475dc; }
.daily-active-person--3 .daily-active-score { background: #fff0df; color: #df7827; }
.daily-active-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; width: 100%; margin-top: 6px; padding-top: 5px; border-top: 1px solid rgba(125, 140, 163, .18); color: #697b98; font-size: 7px; line-height: 1.3; }
.daily-active-stats span { white-space: nowrap; }
.daily-active-footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 9px 2px 0; color: #79869d; font-size: 9px; line-height: 1.4; }
.daily-active-footer > span:first-child { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.daily-active-footer b { color: #da5260; font-weight: 750; }
.daily-active-footer i { margin-inline: 1px; color: #b1bac8; font-style: normal; }
.daily-active-footer > span:last-child { padding-left: 6px; border-left: 1px solid #e1e6ee; text-align: right; white-space: nowrap; }
.daily-active-state { grid-column: 1 / -1; display: grid; min-height: 112px; place-items: center; margin: 0; padding: 15px; color: #8190a6; font-size: 11px; text-align: center; }
@media (max-width: 420px) {
  .daily-active { padding-inline: 9px; }
  .daily-active-heading h2 { font-size: 14px; }
  .daily-active-updated { font-size: 8px; }
  .daily-active-metrics { gap: 6px; font-size: 8px; }
  .daily-active-metrics b { font-size: 11px; }
  .daily-active-person { padding-inline: 3px; }
  .daily-active-footer { font-size: 8px; }
}