.transaction-screen .transaction-method-tabs {
  margin: -2px 0 12px;
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line);
}

.panel-head h2 > .bi,
.panel-head h3 > .bi { margin-inline-end: 6px; color: var(--green); }
.health-card { position: relative; overflow: hidden; }
.health-card-icon { position: absolute; top: 14px; inset-inline-start: 14px; color: color-mix(in srgb,var(--green) 38%,white); font-size: 20px; }
.health-card:nth-child(2) .health-card-icon { color: #dc7773; }
.health-card:nth-child(3) .health-card-icon { color: #c99b42; }
.health-card:nth-child(4) .health-card-icon { color: #6789c5; }
.health-card strong,.health-card small,.health-card .stat-foot { position: relative; z-index: 1; }
.brsm-transaction-method-tab .bi { margin-inline-end: 5px; color: var(--green); }
.brsm-transaction-tab .bi { font-size: 12px; }
.transaction-screen .brsm-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.transaction-filter-row .search-box:before {
  content: "";
  top: 50%;
  width: 10px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
  transform: translateY(-65%);
}
.transaction-filter-row .search-box:after {
  position: absolute;
  top: calc(50% + 5px);
  right: 9px;
  width: 6px;
  height: 2px;
  border-radius: 2px;
  background: #829089;
  content: "";
  transform: rotate(45deg);
  transform-origin: left center;
}
.gateway-logo .bi { display: block; font-size: 20px; }
.method-share > span .bi { margin-inline-end: 5px; color: var(--green); }

/* Consistent Bootstrap icon alignment throughout rendered demo pages. */
#pageContent .bi { display: inline-block; line-height: 1; vertical-align: -0.12em; font-size: 1em; }
#pageContent .page-title-icon .bi { font-size: 19px; }
#pageContent .nav-icon .bi { font-size: 17px; }
#pageContent .gateway-logo .bi { font-size: 20px; }
#pageContent .stat-icon .bi { font-size: 16px; }
#pageContent .notice-icon .bi,
#pageContent .notice > span:first-child .bi { font-size: 16px; }
#pageContent .field > label .bi { margin-inline-end: 5px; color: var(--green); font-size: 13px; }
#pageContent .stat-card > .bi,
#pageContent .stat-card .stat-icon .bi { font-size: 17px; }
#pageContent .step-number .bi,
#pageContent .feature-index .bi { color: var(--green); font-size: 15px; }
#pageContent .status-card > .bi,
#pageContent .issue-row > .bi { margin-inline-end: 6px; color: var(--green); }
#pageContent .legend-dot .bi { margin-inline-start: 4px; }
#pageContent .bar-group > .bi { color: var(--green); font-size: 8px; }
#pageContent .toggle-copy b .bi { margin-inline-end: 5px; color: var(--green); }
#pageContent .panel-head h2 .bi,
#pageContent .panel-head h3 .bi { margin-inline-end: 5px; color: var(--green); }
#pageContent .notice > span:first-child .bi,
#pageContent .notice-icon .bi { font-size: 16px; }
#pageContent .btn .bi,
#pageContent .panel-head-action .bi { font-size: 1em; }
#pageContent .row-action .bi { font-size: 14px; }
#pageContent .step-number .bi { font-size: 16px; }
#pageContent .diagnostic-card .bi,
#pageContent .recommendation-grid .bi { margin-inline-end: 4px; color: var(--green); }
#pageContent .transaction-filter-row .btn .bi { margin-inline-end: 3px; }
.brsm-transaction-method-tab .bi,
.brsm-transaction-tab .bi { margin-inline-end: 4px; }
.gateway-logo .bi { display: block; font-size: 20px; }
.connected-user-actions .bi { font-size: 14px; }
.connection-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Match the plugin's destination-card and connected-user admin components. */
.demo-bank-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  margin-bottom: 20px;
}
.demo-bank-card {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 260px;
  flex-direction: column;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(32, 155, 120, .16);
  border-radius: 20px;
  background: linear-gradient(135deg, #163f35 0%, #24745d 48%, #0e2d28 100%);
  box-shadow: 0 18px 35px rgba(13, 54, 44, .2), inset 0 1px 0 rgba(255,255,255,.18);
  color: #f4fff9;
}
.demo-bank-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 10% 10%, rgba(255,255,255,.2), transparent 24%), radial-gradient(circle at 90% 90%, rgba(0,0,0,.2), transparent 38%);
  content: "";
  pointer-events: none;
}
.demo-bank-card.is-disabled { opacity: .68; filter: grayscale(.25); }
.demo-bank-card-top,
.demo-bank-identity,
.demo-bank-card-actions { display: flex; align-items: center; }
.demo-bank-card-top { justify-content: space-between; gap: 12px; }
.demo-bank-identity { gap: 12px; color: rgba(244,255,249,.86); font-size: 14px; font-weight: 800; }
.demo-bank-chip {
  width: 42px;
  height: 32px;
  border: 1px solid rgba(102,65,17,.35);
  border-radius: 8px;
  background: linear-gradient(135deg,#f6d88e,#b68a3c 48%,#f9e6a9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
}
.demo-bank-number {
  display: block;
  margin: 26px 0 14px;
  color: #f4fff9;
  font: 750 20px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 1.6px;
  text-shadow: 0 2px 2px rgba(0,0,0,.2);
}
.demo-bank-iban { color: rgba(244,255,249,.82); overflow-wrap: anywhere; }
.demo-bank-iban strong { color: #fff; }
.demo-bank-card p { margin: 12px 0 0; color: rgba(244,255,249,.82); }
.demo-bank-card-actions { gap: 8px; margin-top: auto; padding-top: 18px; }
.demo-bank-card .btn:not(.btn-danger) { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.12); color: #fff; }
.connected-users-table-wrap { width: 100%; overflow-x: auto; }
.connected-users-table { width: 100%; }
.connected-users-table th { white-space: nowrap; }
.connected-users-table td { vertical-align: middle; }
.connected-users-table td[dir="ltr"] { text-align: left; }
.connected-user-actions { display: flex; align-items: center; gap: 8px; }
.user-chat-trigger {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #cce8da;
  border-radius: 10px;
  background: #eaf8f0;
  color: #19734f;
  cursor: pointer;
}
.chart-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 0 20px; scrollbar-width: thin; }
.chart-scroll .bar-chart { min-width: 620px; }
.dashboard-grid > .section-card { min-width: 0; }
.control-summary { display: grid; gap: 10px; }
.control-summary strong { color: #173b31; font-size: 15px; }
.control-summary p { margin: 0; color: var(--muted); font-size: 10px; }
.control-quick-actions { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.control-quick-actions button { min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.control-quick-actions button:hover { border-color: var(--green); color: var(--green-dark); }
.bar-chart { min-width: 620px; height: 165px; align-items: stretch; padding-top: 5px; }
.bar-group { min-width: 12px; }
.bar { flex: 0 1 8px; max-height: 100%; }
.bar-label { bottom: -18px; }
.status-donut { background: conic-gradient(#209b78 0 var(--success-share,0%), #c15f5e var(--success-share,0%) calc(var(--success-share,0%) + var(--failed-share,0%)), #c6872e calc(var(--success-share,0%) + var(--failed-share,0%)) calc(var(--success-share,0%) + var(--failed-share,0%) + var(--pending-share,0%)), #5378c8 calc(var(--success-share,0%) + var(--failed-share,0%) + var(--pending-share,0%)) 100%); }
.hourly-grid > .empty-state { grid-column: 1/-1; }
.dashboard-payment-grid .brsm-payment-card { min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg,#fff,#f8fcfa); box-shadow: 0 7px 20px rgba(22,56,48,.05); transition: transform .18s,box-shadow .18s,border-color .18s; }
.dashboard-payment-grid .brsm-payment-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb,var(--green) 45%,var(--line)); box-shadow: 0 12px 26px rgba(22,56,48,.09); }
.dashboard-payment-grid .brsm-payment-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid #edf3f0; }
.dashboard-payment-grid .transaction-order-link { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; text-align: right; }
.dashboard-payment-grid .transaction-order-link:hover { color: var(--green); }
.dashboard-payment-grid .brsm-payment-card-head .brsm-status { flex: 0 0 auto; }
.dashboard-payment-grid .brsm-payment-card-meta { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px 12px; padding: 14px 0; color: var(--muted); font-size: 11px; }
.dashboard-payment-grid .brsm-payment-card-meta strong { color: var(--ink); font-size: 15px; }
.dashboard-payment-grid .brsm-payment-card-meta small { grid-column: 1/-1; color: #82938e; }
.dashboard-payment-grid .brsm-payment-card-receipt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 9px; background: #f0f8f4; font-size: 11px; }
.method-item { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #edf3f0; }
.method-symbol { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; background: #eaf8f0; color: var(--green); font-size: 15px; }
.method-body { min-width: 0; }
.method-body .method-name { color: #173b31; font-size: 11px; }
.method-value { display: grid; gap: 2px; color: var(--ink); font-size: 12px; text-align: left; }
.method-value small { color: var(--muted); font-size: 9px; }
.brsm-transaction-method-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.brsm-transaction-method-tab {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.brsm-transaction-method-tab:hover,
.brsm-transaction-method-tab.is-active {
  border-color: var(--green);
  background: color-mix(in srgb, var(--green) 12%, white);
  color: var(--green-dark);
}
.brsm-transaction-method-tab.is-active {
  font-weight: 700;
}
.transaction-filter-form {
  display: grid;
  gap: 11px;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid #dce8e3;
  border-radius: 13px;
  background: #f7fbf9;
}
.transaction-filter-row {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}
.transaction-filter-row .search-box {
  flex: 1 1 250px;
}
.date-filter {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 9px;
}
.date-filter input {
  width: 132px;
}
.transaction-status-tabs {
  display: flex;
  gap: 6px;
  overflow: auto;
  padding: 1px 0 4px;
  scrollbar-width: thin;
}
.transaction-status-tabs .filter-chip {
  white-space: nowrap;
}
.brsm-transaction-tabs {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid #dfece7;
}
.brsm-transaction-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 35px;
  padding: 6px 11px;
  border: 1px solid #d7e5df;
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.brsm-transaction-tab:hover {
  border-color: color-mix(in srgb, var(--green) 45%, #d7e5df);
  color: var(--green-dark);
}
.brsm-transaction-tab.is-active {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 5px 12px rgba(32, 155, 120, .2);
}
.brsm-transaction-tab small {
  min-width: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: rgba(20, 88, 68, .08);
  font-size: 9px;
  line-height: 1.7;
  text-align: center;
}
.brsm-transaction-tab.is-active small {
  background: rgba(255, 255, 255, .2);
}
.diagnostic-card {
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.diagnostic-card:last-child {
  border-bottom: 0;
}
.diagnostic-card > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.diagnostic-card b {
  font-size: 11px;
}
.diagnostic-card p {
  margin: 5px 0 0;
  color: #60736a;
  font-size: 10px;
}
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}
.cluster-grid article {
  display: grid;
  gap: 8px;
  min-height: 92px;
  align-content: space-between;
  padding: 12px;
  border: 1px solid #deebe4;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f1faf5);
}
.cluster-grid span {
  color: #647b70;
  font-size: 9px;
}
.cluster-grid strong {
  color: #145844;
  font-size: 20px;
}
.method-share {
  display: grid;
  grid-template-columns: 110px 1fr 42px;
  align-items: center;
  gap: 10px;
  margin: 14px 0;
  font-size: 10px;
}
.method-share .progress {
  margin: 0;
}
.method-share > b {
  text-align: left;
}
.hourly-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.hourly-grid > div {
  display: grid;
  gap: 4px;
  padding: 11px 7px;
  text-align: center;
  border: 1px solid #dcebe3;
  border-radius: 11px;
  background: #f5fbf8;
}
.hourly-grid span {
  color: #6c8076;
  font-size: 9px;
}
.hourly-grid b {
  color: #145844;
  font-size: 14px;
}
.hourly-grid small {
  color: #188d69;
  font-size: 8px;
}
.mini-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.mini-summary span {
  padding: 12px;
  border-radius: 10px;
  background: #f5faf7;
  color: #64776e;
  font-size: 9px;
}
.mini-summary b {
  display: block;
  margin-top: 4px;
  color: #173b31;
  font-size: 17px;
}
.status-distribution {
  display: grid;
  grid-template-columns: 170px 1fr;
  align-items: center;
  gap: 20px;
  min-height: 190px;
}
.status-donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: conic-gradient(
    #209b78 0 64%,
    #c15f5e 64% 77%,
    #c6872e 77% 91%,
    #5378c8 91% 100%
  );
  position: relative;
  margin: auto;
}
.status-donut::after {
  content: "وضعیت‌ها";
  position: absolute;
  inset: 25%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #476359;
  font-size: 11px;
  font-weight: 700;
}
.status-legend {
  display: grid;
  gap: 9px;
}
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.funnel-grid article {
  padding: 14px;
  border: 1px solid #e1ebe6;
  border-radius: 12px;
  background: #fbfdfc;
}
.funnel-grid small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}
.funnel-grid strong {
  display: block;
  margin: 5px 0;
  color: #173b31;
  font-size: 19px;
}
.color-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.color-status-grid label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfdfc;
  font-size: 9px;
}
.color-status-grid input {
  width: 34px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
.status-preview-row {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 15px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.feature-grid article {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e0ebe5;
  border-radius: 12px;
  background: linear-gradient(145deg, #fff, #f7fbf9);
}
.feature-index {
  display: grid;
  place-items: center;
  flex: 0 0 31px;
  height: 31px;
  border-radius: 9px;
  background: #eaf8f0;
  color: #188d69;
  font-size: 9px;
  font-weight: 800;
}
.feature-grid b {
  display: block;
  color: #173b31;
  font-size: 10px;
}
.feature-grid p {
  margin: 4px 0 0;
  color: #73847d;
  font-size: 9px;
  line-height: 1.8;
}
.about-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
  padding: 24px 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, #10201f, #286d57);
  color: #f5fffb;
  overflow: hidden;
}
.about-hero .page-kicker {
  color: #9de4c2;
}
.about-hero h2 {
  margin: 3px 0 7px;
  color: #fff;
  font-size: 22px;
}
.about-hero p {
  max-width: 650px;
  margin: 0 0 12px;
  color: #d0e8dd;
  font-size: 11px;
}
.about-mark {
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 25px;
  background: linear-gradient(140deg, #562dd2, #a43be5);
  color: #ffd33d;
  font-size: 37px;
  font-weight: 900;
  box-shadow: 0 16px 30px #081b1690;
}
.changelog-hero {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
  padding: 20px 24px;
  border-radius: 18px;
  background: linear-gradient(135deg, #0f172a, #4338ca 55%, #6366f1);
  color: #fff;
}
.changelog-hero h2 {
  margin: 3px 0;
  color: white;
}
.changelog-hero p {
  margin: 0;
  color: #e0e7ff;
  font-size: 10px;
}
.changelog-hero > b {
  padding: 9px 13px;
  border: 1px solid #ffffff50;
  border-radius: 999px;
  background: #ffffff20;
}
.changelog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.changelog-card {
  padding: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: linear-gradient(#fff, #f9fbff);
  box-shadow: var(--shadow);
}
.changelog-card header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e8edf4;
}
.changelog-card header b {
  color: #3730a3;
}
.changelog-card header span {
  color: #738096;
  font-size: 9px;
}
.changelog-card ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding-right: 17px;
  color: #4d5b67;
  font-size: 10px;
}
.history-detail {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f8fbf9;
}
.history-detail summary {
  color: #145844;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.history-detail p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 9px;
}
.danger-panel {
  border-color: #f0d8d4;
  background: linear-gradient(140deg, #fff, #fff8f7);
}
@media (max-width: 900px) {
  .demo-bank-card-grid { grid-template-columns: 1fr; }
  .connection-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .control-quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .cluster-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .funnel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .color-status-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .status-distribution {
    grid-template-columns: 140px 1fr;
  }
  .status-donut {
    width: 130px;
    height: 130px;
  }
  .bar-chart .bar {
    width: 5px;
  }
}
@media (max-width: 560px) {
  .connection-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .connected-users-table-wrap { min-width: 0; max-width: 100%; overflow: visible; }
  .connected-users-table,
  .connected-users-table tbody,
  .connected-users-table tr,
  .connected-users-table td { display: block; width: 100%; }
  .connected-users-table { min-width: 0; max-width: 100%; table-layout: fixed; }
  .connected-users-table tr,
  .connected-users-table td { min-width: 0; }
  .connected-users-table thead { display: none; }
  .connected-users-table tr { margin-bottom: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
  .connected-users-table td { display: grid; grid-template-columns: minmax(90px,.7fr) minmax(0,1.3fr); gap: 10px; padding: 8px 5px; border-bottom: 1px solid #edf1ee; white-space: normal; text-align: right !important; }
  .connected-users-table td::before { content: attr(data-label); color: var(--muted); font-size: 9px; font-weight: 700; }
  .connected-users-table td:last-child { border-bottom: 0; }
  .connected-users-table td:last-child::before { align-self: center; }
  .connected-user-actions { flex-wrap: wrap; }
  .control-quick-actions { grid-template-columns: 1fr; }
  .demo-bank-card { min-height: 240px; padding: 20px; }
  .demo-bank-number { font-size: 16px; letter-spacing: 1px; }
  .cluster-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .feature-grid,
  .changelog-grid {
    grid-template-columns: 1fr;
  }
  .funnel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .color-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .status-distribution {
    grid-template-columns: 1fr;
  }
  .transaction-screen .brsm-payment-grid {
    grid-template-columns: 1fr;
  }
  .status-donut {
    width: 140px;
    height: 140px;
  }
  .status-donut::after {
    content: none;
  }
  .hourly-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mini-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .method-share {
    grid-template-columns: 85px 1fr 38px;
  }
  .transaction-filter-row {
    align-items: stretch;
  }
  .transaction-filter-row .date-filter {
    flex: 1 1 120px;
  }
  .date-filter input {
    width: 100%;
  }
  .transaction-status-tabs {
    margin-inline: -2px;
  }
  .about-hero {
    padding: 18px;
  }
  .about-mark {
    flex: 0 0 65px;
    width: 65px;
    height: 65px;
    border-radius: 19px;
    font-size: 27px;
  }
}

.dashboard-payment-grid {
  margin-top: 4px;
}
.brsm-payment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.brsm-payment-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f8fcfa);
  box-shadow: 0 7px 20px rgba(22, 56, 48, .05);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.brsm-payment-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  box-shadow: 0 12px 26px rgba(22, 56, 48, .09);
}
.brsm-payment-card.is-status-approved,
.brsm-payment-card.is-status-paid {
  border-color: #b9e2cc;
  background: linear-gradient(145deg, #f5fff8, #eaf8f0);
}
.brsm-payment-card.is-status-rejected,
.brsm-payment-card.is-status-failed {
  border-color: #efc5c5;
  background: linear-gradient(145deg, #fffafa, #fff0f0);
}
.brsm-payment-card.is-status-pending_review,
.brsm-payment-card.is-status-awaiting_receipt {
  border-color: #ecd79f;
  background: linear-gradient(145deg, #fffdf5, #fff8e2);
}
.brsm-payment-card.is-status-refunded {
  border-color: #c7dced;
  background: linear-gradient(145deg, #f8fcff, #eef6fd);
}
.brsm-payment-card.is-status-created,
.brsm-payment-card.is-status-sent,
.brsm-payment-card.is-status-blupal_pending {
  border-color: #c9e4d9;
  background: linear-gradient(145deg, #fbfffd, #edf8f3);
}
.brsm-payment-card.is-status-expired,
.brsm-payment-card.is-status-cancelled,
.brsm-payment-card.is-status-order_deleted {
  border-color: #dce3e0;
  background: linear-gradient(145deg, #fff, #f2f5f4);
}
.brsm-payment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 13px;
  border-bottom: 1px solid #edf3f0;
}
.transaction-order-link {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: right;
  cursor: pointer;
}
.transaction-order-link:hover {
  color: var(--green);
}
.brsm-status {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f3f4;
  color: #646b74;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}
.brsm-status.is-paid,
.brsm-status.is-approved {
  background: #e8f7f1;
  color: #17684f;
}
.brsm-status.is-pending_review,
.brsm-status.is-awaiting_receipt,
.brsm-status.is-sent,
.brsm-status.is-created,
.brsm-status.is-blupal_pending {
  background: #fff4d9;
  color: #7b5910;
}
.brsm-status.is-rejected,
.brsm-status.is-failed {
  background: #fff0f0;
  color: #963434;
}
.brsm-status.is-expired,
.brsm-status.is-cancelled,
.brsm-status.is-order_deleted {
  background: #f1f3f4;
  color: #747b85;
}
.brsm-status.is-refunded {
  background: #eaf4fc;
  color: #245c91;
}
.brsm-payment-card-meta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 14px 0;
  color: var(--muted);
  font-size: 12px;
}
.brsm-payment-card-meta strong {
  color: var(--ink);
  font-size: 15px;
}
.brsm-payment-card-meta small {
  grid-column: 1 / -1;
  color: #82938e;
}
.brsm-payment-card-receipt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid #d4e8df;
  border-radius: 10px;
  background: rgba(240, 248, 244, .78);
  color: #49635a;
  font-size: 12px;
  text-align: center;
  overflow-wrap: anywhere;
}
.brsm-payment-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 8px;
  margin-top: 14px;
}
.brsm-payment-card-actions > small {
  align-self: center;
  color: var(--muted);
  font-size: 11px;
}
.transaction-decision,
.transaction-card-switch {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}
.transaction-decision .input {
  min-width: 140px;
  flex: 1 1 100%;
}
.transaction-card-switch .select {
  min-width: 0;
  flex: 1 1 160px;
}
.brsm-payment-card-receipt .transaction-receipt-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border: 1px solid var(--green);
  border-radius: 9px;
  background: var(--green);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.brsm-payment-card-receipt .transaction-receipt-link:hover {
  background: var(--green-dark);
}
.transaction-card-footer {
  display: flex;
  flex: 1 1 100%;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
}
.transaction-card-footer .btn {
  flex: 0 1 auto;
}
.brsm-history {
  margin: 0 0 4px;
  padding: 8px 10px;
  border: 1px solid rgba(220, 232, 227, .9);
  border-radius: 9px;
  background: rgba(255, 255, 255, .55);
  color: #61756d;
  font-size: 11px;
}
.brsm-history summary {
  color: #45675b;
  font-weight: 700;
  cursor: pointer;
}
.brsm-history small {
  display: block;
  margin-top: 5px;
  line-height: 1.7;
}
.brsm-payment-card-note,
.brsm-refund-summary {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 10px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(220, 232, 227, .9);
  border-radius: 9px;
  background: rgba(255, 255, 255, .65);
  font-size: 11px;
}
.brsm-payment-card-note span {
  overflow-wrap: anywhere;
}
.brsm-empty-cell {
  grid-column: 1 / -1;
  padding: 36px;
  color: #8b929b;
  text-align: center;
}
@media (max-width: 560px) {
  .brsm-payment-grid {
    grid-template-columns: 1fr;
  }
  .brsm-payment-card-actions {
    grid-template-columns: 1fr 1fr;
  }
  .transaction-card-footer {
    width: 100%;
  }
}