html body .hp-list-year{
  display:grid !important;
  gap:18px !important;
  margin-top:12px !important;
}
html body .hp-month-group{
  display:grid !important;
  gap:10px !important;
  padding:12px !important;
  border-radius:24px !important;
  border:1px solid rgba(26,115,232,.14) !important;
  background:linear-gradient(180deg,#f8fbff 0%,#ffffff 130px) !important;
  box-shadow:0 10px 28px rgba(15,23,42,.045) !important;
  overflow:hidden !important;
}
html body .hp-month-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  align-items:center !important;
  gap:14px !important;
  padding:14px 16px !important;
  margin:0 0 2px 0 !important;
  border-radius:18px !important;
  border:1px solid rgba(26,115,232,.12) !important;
  background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%) !important;
  box-shadow:0 1px 2px rgba(15,23,42,.035), inset 0 1px 0 rgba(255,255,255,.8) !important;
}
html body .hp-month-head > div:first-child{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  min-width:0 !important;
  flex-wrap:wrap !important;
}
html body .hp-month-title{
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;
  min-width:0 !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:-.035em !important;
  line-height:1.1 !important;
  color:#202124 !important;
  margin:0 !important;
}
html body .hp-month-title::before{
  content:"📅";
  width:30px;
  height:30px;
  display:inline-grid;
  place-items:center;
  flex:none;
  border-radius:11px;
  font-size:14px;
  background:rgba(26,115,232,.09);
  border:1px solid rgba(26,115,232,.16);
}
html body .hp-month-sub{
  display:inline-flex !important;
  align-items:center !important;
  height:28px !important;
  padding:0 10px !important;
  margin:0 !important;
  border-radius:999px !important;
  font-size:11px !important;
  font-weight:800 !important;
  color:#667085 !important;
  background:#fff !important;
  border:1px solid rgba(15,23,42,.08) !important;
  white-space:nowrap !important;
}
html body .hp-month-total{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:32px !important;
  padding:7px 12px !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:900 !important;
  letter-spacing:-.015em !important;
  color:#1a73e8 !important;
  background:rgba(26,115,232,.09) !important;
  border:1px solid rgba(26,115,232,.18) !important;
  box-shadow:0 6px 16px rgba(26,115,232,.10) !important;
  white-space:nowrap !important;
}
html body .hp-month-total::before{
  content:"Total ";
  color:#6b7280;
  font-weight:800;
  margin-right:4px;
}
html body .hp-month-list{
  display:grid !important;
  gap:8px !important;
}
body:not([data-theme="light"]) .hp-month-group{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,var(--accent) 8%),var(--surface)) !important;
  border-color:rgba(255,255,255,.08) !important;
}
body:not([data-theme="light"]) .hp-month-head{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 96%,white 4%),var(--surface2)) !important;
  border-color:rgba(255,255,255,.08) !important;
}
body:not([data-theme="light"]) .hp-month-title{color:var(--text) !important;}
body:not([data-theme="light"]) .hp-month-sub{background:var(--surface) !important;color:var(--muted) !important;border-color:var(--border) !important;}
@media(max-width:760px){
  html body .hp-month-head{
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  html body .hp-month-total{
    justify-self:start !important;
  }
}