.my-payments-reports {
  display: grid;
  gap: 22px;
  width: 100%;
  max-width: 1480px;
  margin: 0 auto;
}

.my-payments-report-filters {
  display: grid;
  grid-template-columns: minmax(240px, 1.35fr) repeat(5, minmax(130px, 0.65fr));
  gap: 12px;
  padding: 16px;
  border: 1px solid #e4e6ef;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 34px rgba(30, 41, 59, 0.06);
}

.my-payments-report-filters label {
  display: grid;
  gap: 6px;
}

.my-payments-report-filters label > span {
  color: #667085;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.my-payments-report-filters input,
.my-payments-report-filters select {
  width: 100%;
  min-height: 43px;
  padding: 0 11px;
  border: 1px solid #dfe3ec;
  border-radius: 11px;
  color: #243047;
  background: #fff;
  font: inherit;
  font-size: 0.86rem;
}

.my-payments-report-filters input:focus,
.my-payments-report-filters select:focus {
  border-color: #7367ee;
  outline: 3px solid rgba(101, 88, 232, 0.12);
}

.my-payments-report-presets {
  align-self: end;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

.my-payments-report-presets button,
.my-payments-report-view-tabs button {
  min-height: 34px;
  border: 1px solid #e0e3ec;
  border-radius: 9px;
  color: #5b6477;
  background: #f8f9fc;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.my-payments-report-presets button:hover,
.my-payments-report-view-tabs button:hover {
  border-color: #a69ff4;
  color: #5145cf;
  transform: translateY(-1px);
}

.my-payments-report-presets button.active,
.my-payments-report-view-tabs button.active {
  border-color: #6558e8;
  color: #fff;
  background: #6558e8;
  box-shadow: 0 6px 16px rgba(101, 88, 232, 0.22);
}

.my-payments-report-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.my-payments-report-kpis article {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
  padding: 17px;
  border: 1px solid #e6e8ef;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(30, 41, 59, 0.055);
}

.my-payments-report-kpis article > span {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  font-size: 1.15rem;
}

.my-payments-report-kpis article div {
  min-width: 0;
}

.my-payments-report-kpis small,
.my-payments-report-insights small {
  display: block;
  margin-bottom: 3px;
  color: #747d90;
  font-size: 0.76rem;
  font-weight: 750;
}

.my-payments-report-kpis strong {
  display: block;
  overflow: hidden;
  color: #1e293b;
  font-size: clamp(1.05rem, 1.8vw, 1.42rem);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-payments-report-kpis .tone-violet > span { color: #5b4fe9; background: #eeecff; }
.my-payments-report-kpis .tone-green > span { color: #078260; background: #e5f8f1; }
.my-payments-report-kpis .tone-blue > span { color: #0879c7; background: #e6f4ff; }
.my-payments-report-kpis .tone-red > span { color: #cc2546; background: #fff0f3; }

.my-payments-report-insights {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.my-payments-report-insights article {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid #e8eaf1;
  border-radius: 14px;
  background: #fbfbfd;
}

.my-payments-report-insights article > i {
  color: #6558e8;
  font-size: 1.1rem;
}

.my-payments-report-insights article span {
  min-width: 0;
}

.my-payments-report-insights strong {
  display: block;
  overflow: hidden;
  color: #263248;
  font-size: 0.96rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-payments-report-insights em {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: #8a93a4;
  font-size: 0.72rem;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-payments-report-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.my-payments-report-card {
  overflow: hidden;
  border: 1px solid #e4e7ee;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(30, 41, 59, 0.065);
}

.my-payments-report-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 21px;
  border-bottom: 1px solid #eef0f5;
}

.my-payments-report-card > header h2 {
  margin: 0;
  color: #273249;
  font-size: 1.02rem;
}

.my-payments-report-card > header p {
  margin: 4px 0 0;
  color: #838b9c;
  font-size: 0.78rem;
}

.my-payments-chart-legend {
  display: flex;
  gap: 12px;
  color: #697386;
  font-size: 0.72rem;
  font-weight: 700;
}

.my-payments-chart-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.my-payments-chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 99px;
}

.my-payments-chart-legend i.expected { background: #6558e8; }
.my-payments-chart-legend i.paid { background: #18a779; }

.my-payments-monthly-chart {
  display: flex;
  align-items: stretch;
  gap: 9px;
  min-height: 286px;
  padding: 28px 20px 16px;
  overflow-x: auto;
}

.my-payments-month-column {
  display: grid;
  grid-template-rows: 220px auto;
  gap: 9px;
  flex: 1 0 42px;
  min-width: 42px;
}

.my-payments-month-column > div {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 4px;
  border-bottom: 1px solid #e5e8ef;
  background: repeating-linear-gradient(to top, transparent 0 54px, #f1f3f7 54px 55px);
}

.my-payments-month-column > div span {
  width: min(15px, 42%);
  min-height: 3px;
  border-radius: 5px 5px 1px 1px;
  transition: height 250ms ease;
}

.my-payments-month-column span.expected { background: linear-gradient(180deg, #8378f1, #5d50df); }
.my-payments-month-column span.paid { background: linear-gradient(180deg, #44c99e, #0b966e); }

.my-payments-month-column > small {
  color: #737c8f;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.my-payments-donut-wrap {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  min-height: 286px;
  padding: 24px;
}

.my-payments-donut {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

.my-payments-donut > span {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(225, 228, 237, 0.8);
}

.my-payments-donut strong {
  align-self: end;
  color: #273249;
  font-size: 1.55rem;
}

.my-payments-donut small {
  align-self: start;
  color: #81899a;
  font-size: 0.7rem;
}

.my-payments-category-legend {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.my-payments-category-legend > div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.my-payments-category-legend > div > i {
  flex: 0 0 9px;
  width: 9px;
  height: 9px;
  border-radius: 99px;
}

.my-payments-category-legend span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  width: 100%;
}

.my-payments-category-legend strong,
.my-payments-category-legend small {
  overflow: hidden;
  color: #4e586b;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.my-payments-category-legend small { color: #858d9c; }

.my-payments-forecast-card > header > strong {
  color: #5247d1;
  font-size: 1.06rem;
}

.my-payments-forecast-list {
  display: grid;
  gap: 12px;
  padding: 20px 22px 22px;
}

.my-payments-forecast-list > div {
  display: grid;
  grid-template-columns: 130px minmax(100px, 1fr) 130px;
  align-items: center;
  gap: 14px;
}

.my-payments-forecast-list span strong,
.my-payments-forecast-list span small {
  display: block;
}

.my-payments-forecast-list span strong { color: #364158; font-size: 0.82rem; }
.my-payments-forecast-list span small { margin-top: 2px; color: #8a92a2; font-size: 0.69rem; }
.my-payments-forecast-list > div > div { height: 8px; overflow: hidden; border-radius: 99px; background: #edf0f5; }
.my-payments-forecast-list > div > div i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #6558e8, #9f95fa); }
.my-payments-forecast-list b { color: #354056; font-size: 0.82rem; text-align: right; }

.my-payments-report-detail > header {
  align-items: flex-end;
}

.my-payments-report-view-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.my-payments-report-view-tabs button {
  min-height: 32px;
  padding: 0 12px;
}

.my-payments-report-table-wrap {
  overflow: auto;
}

.my-payments-report-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.79rem;
}

.my-payments-report-table-wrap th,
.my-payments-report-table-wrap td {
  padding: 12px 16px;
  border-bottom: 1px solid #edf0f4;
  color: #455067;
  text-align: left;
  white-space: nowrap;
}

.my-payments-report-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #616b7d;
  background: #f8f8fc;
  font-size: 0.69rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.my-payments-report-table-wrap tbody tr:hover td { background: #fafaff; }
.my-payments-report-table-wrap td.is-number { font-variant-numeric: tabular-nums; text-align: right; }

.my-payments-report-detail > footer {
  padding: 11px 16px;
  color: #858d9d;
  background: #fafbfc;
  font-size: 0.72rem;
  text-align: right;
}

.my-payments-report-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 240px;
  padding: 28px;
  color: #8a92a3;
  text-align: center;
}

.my-payments-report-empty > i { margin-bottom: 10px; color: #988ff0; font-size: 1.8rem; }
.my-payments-report-empty > strong { margin-bottom: 5px; color: #3d485d; }
.my-payments-report-empty > span { font-size: 0.78rem; }

body.dark-mode .my-payments-report-filters,
body.dark-mode .my-payments-report-kpis article,
body.dark-mode .my-payments-report-card {
  border-color: #34394a;
  background: #202432;
}

body.dark-mode .my-payments-report-filters input,
body.dark-mode .my-payments-report-filters select,
body.dark-mode .my-payments-report-presets button,
body.dark-mode .my-payments-report-view-tabs button {
  border-color: #3d4354;
  color: #d8dce6;
  background: #292e3d;
}

body.dark-mode .my-payments-report-presets button.active,
body.dark-mode .my-payments-report-view-tabs button.active { color: #fff; background: #6558e8; }
body.dark-mode .my-payments-report-kpis strong,
body.dark-mode .my-payments-report-insights strong,
body.dark-mode .my-payments-report-card > header h2,
body.dark-mode .my-payments-forecast-list span strong,
body.dark-mode .my-payments-forecast-list b,
body.dark-mode .my-payments-report-table-wrap td { color: #e7e9f0; }
body.dark-mode .my-payments-report-insights article,
body.dark-mode .my-payments-report-table-wrap th { border-color: #353a49; background: #272c3a; }
body.dark-mode .my-payments-report-card > header,
body.dark-mode .my-payments-report-table-wrap th,
body.dark-mode .my-payments-report-table-wrap td { border-color: #34394a; }
body.dark-mode .my-payments-donut > span { background: #202432; box-shadow: 0 0 0 1px #34394a; }
body.dark-mode .my-payments-month-column > div { border-color: #3a4050; background: repeating-linear-gradient(to top, transparent 0 54px, #303646 54px 55px); }
body.dark-mode .my-payments-report-table-wrap tbody tr:hover td { background: #292e3d; }
body.dark-mode .my-payments-report-detail > footer { background: #272c3a; }

@media (max-width: 1180px) {
  .my-payments-report-filters { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
  .my-payments-report-presets { grid-column: span 3; }
  .my-payments-report-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-payments-report-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .my-payments-report-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px; }
  .my-payments-report-presets { grid-column: span 2; }
  .my-payments-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .my-payments-report-insights { grid-template-columns: 1fr; }
  .my-payments-report-card > header { align-items: flex-start; flex-direction: column; }
  .my-payments-report-detail > header { align-items: flex-start; }
  .my-payments-report-view-tabs { justify-content: flex-start; overflow-x: auto; width: 100%; flex-wrap: nowrap; padding-bottom: 3px; }
  .my-payments-report-view-tabs button { flex: 0 0 auto; }
  .my-payments-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .my-payments-category-legend { width: 100%; }
  .my-payments-forecast-list > div { grid-template-columns: 92px minmax(70px, 1fr) 92px; gap: 9px; }
}

@media (max-width: 480px) {
  .my-payments-report-filters { grid-template-columns: 1fr; }
  .my-payments-report-presets { grid-column: auto; }
  .my-payments-report-kpis { gap: 9px; }
  .my-payments-report-kpis article { align-items: flex-start; flex-direction: column; padding: 13px; }
  .my-payments-report-kpis article > span { width: 38px; height: 38px; flex-basis: 38px; }
  .my-payments-report-kpis strong { font-size: 0.98rem; }
  .my-payments-monthly-chart { padding-inline: 12px; }
  .my-payments-forecast-list { padding-inline: 14px; }
  .my-payments-forecast-list > div { grid-template-columns: 82px minmax(55px, 1fr); }
  .my-payments-forecast-list b { grid-column: 2; grid-row: 2; }
}

@media print {
  .my-payments-report-filters,
  .my-payments-hero-actions,
  .my-payments-report-view-tabs { display: none !important; }
  .my-payments-report-card,
  .my-payments-report-kpis article { box-shadow: none; break-inside: avoid; }
}