html,body{min-height:100%}
body{background:#f7f5fd}
.historyPage{
  position:relative;min-height:calc(100vh - 118px);overflow:hidden;
  padding:62px 24px 90px;
  background-image:url('./assets/history-bg.png');
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}
.historyPage::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(248,247,255,.35),rgba(247,244,255,.52) 55%,rgba(255,249,252,.62));
  backdrop-filter:saturate(102%);
}
.historyGlow{display:none}
.historyHero,.historySummary,.historyRecords{position:relative;z-index:2;width:min(1180px,calc(100% - 20px));margin-left:auto;margin-right:auto}
.historyHero{text-align:center}
.historyEyebrow,.historySectionEyebrow{display:block;color:#795dd6;font-size:12px;font-weight:900;letter-spacing:.08em}
.historyHero h1{margin:7px 0 10px;color:#21375f;font-size:clamp(38px,4vw,58px);letter-spacing:-.055em}
.historyHero p{margin:0;color:#71809d;font-size:15px;line-height:1.7;font-weight:650}
.historySummary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:38px}
.historySummaryCard{
  min-height:158px;padding:22px;border:1px solid rgba(255,255,255,.92);border-radius:24px;
  background:rgba(255,255,255,.78);box-shadow:0 14px 34px rgba(63,57,108,.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)
}
.historySummaryLabel{display:block;color:#657391;font-size:13px;font-weight:850}
.historySummaryCard strong{display:block;margin:10px 0 5px;color:#24385f;font-size:38px;letter-spacing:-.05em}
.historySummaryCard small{color:#8a93a7;font-size:11px;font-weight:650}
.historySummaryCard.total{background:linear-gradient(145deg,rgba(238,232,255,.94),rgba(255,255,255,.88))}
.historySummaryCard.balance{background:linear-gradient(145deg,rgba(235,245,255,.94),rgba(255,255,255,.88))}
.historySummaryCard.received{background:linear-gradient(145deg,rgba(255,235,246,.94),rgba(255,255,255,.88))}
.historySummaryCard.donated{background:linear-gradient(145deg,rgba(240,250,244,.94),rgba(255,255,255,.88))}
.historyRecords{
  margin-top:18px;padding:26px;border:1px solid rgba(255,255,255,.92);border-radius:28px;
  background:rgba(255,255,255,.76);box-shadow:0 18px 42px rgba(63,57,108,.12);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.historyRecordsHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
.historyRecordsHeader h2{margin:5px 0 4px;color:#24385f;font-size:27px;letter-spacing:-.04em}
.historyRecordsHeader p{margin:0;color:#7d879e;font-size:12px;font-weight:650}
.historyFilters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.historyFilter{
  min-height:38px;padding:0 15px;border:1px solid #e8e3f2;border-radius:999px;background:#fff;color:#69748d;
  font-size:12px;font-weight:850;cursor:pointer
}
.historyFilter.isActive{border-color:transparent;background:linear-gradient(100deg,#806bea,#c87bd6);color:#fff;box-shadow:0 8px 17px rgba(110,82,194,.17)}
.historyList{display:grid;gap:10px}
.historyItem{
  display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
  padding:15px 16px;border:1px solid #ece8f3;border-radius:18px;background:#fff
}
.historyItemIcon{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:18px;font-weight:900
}
.historyItemIcon.earn{background:#eee9ff;color:#7358d5}
.historyItemIcon.receive{background:#ffebf5;color:#d15491}
.historyItemIcon.donate{background:#eaf8ef;color:#37815a}
.historyItem h3{margin:0;color:#2a3d63;font-size:14px}
.historyItem p{margin:4px 0 0;color:#8a93a7;font-size:11px;font-weight:650}
.historyAmount{text-align:right}
.historyAmount strong{display:block;font-size:16px}
.historyAmount small{display:block;margin-top:3px;color:#949bad;font-size:10px;font-weight:700}
.historyAmount.earn strong,.historyAmount.receive strong{color:#7758d5}
.historyAmount.donate strong{color:#3a825e}
.historyEmpty{text-align:center;padding:54px 18px;color:#8b93a4}
.historyEmpty span{display:block;margin-bottom:8px;color:#b397ec;font-size:34px}
.historyEmpty strong{display:block;color:#4a5874;font-size:17px}
.historyEmpty p{margin:7px 0 0;font-size:12px}
.isMoreActive{background:#f0ebff!important;color:#6747cf!important;border-color:#ded3ff!important}
@media(max-width:900px){
  .historyPage{min-height:calc(100vh - 166px);padding:34px 14px 70px}
  .historySummary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .historyRecordsHeader{align-items:flex-start;flex-direction:column}
  .historyFilters{justify-content:flex-start}
}
@media(max-width:560px){
  .historySummary{grid-template-columns:1fr}
  .historySummaryCard{min-height:130px}
  .historyRecords{padding:17px}
  .historyItem{grid-template-columns:auto 1fr}
  .historyAmount{grid-column:2;text-align:left}
}