.transaction-flow-card{padding:0;overflow:hidden;border-color:#ded6fa;box-shadow:0 18px 55px rgba(60,34,135,.08)}
.transaction-flow-head{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:25px 28px 20px;background:linear-gradient(110deg,#fff 35%,#faf7ff)}
.transaction-flow-head h2{margin:5px 0 3px;font:800 21px Manrope;color:#26165e}
.transaction-flow-head p{margin:0;color:#7b8497;font-size:11px}
.transaction-flow-actions{display:flex;align-items:center;justify-content:flex-end;gap:22px}
.transaction-flow-filter{display:flex;align-items:center;gap:9px;color:#7d8799;font:800 8px Manrope;letter-spacing:1px;text-transform:uppercase}
.transaction-flow-filter select{min-width:132px;height:38px;padding:0 32px 0 12px;border:1px solid #ddd6f2;border-radius:10px;background:#fff;color:#2d1b66;font:800 10px Manrope;outline:0;cursor:pointer;box-shadow:0 7px 20px rgba(61,35,134,.06)}
.transaction-flow-filter select:focus{border-color:#8059e8;box-shadow:0 0 0 3px rgba(128,89,232,.12)}.transaction-flow-filter select:disabled{opacity:.65;cursor:wait}
.transaction-flow-live{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;text-align:right;color:#07986b;font:800 10px Manrope;letter-spacing:.5px;text-transform:uppercase}
.transaction-flow-live>i{width:9px;height:9px;border-radius:50%;background:#11bf84;box-shadow:0 0 0 6px rgba(17,191,132,.12);animation:transaction-flow-pulse 1.8s infinite}
.transaction-flow-live>small{grid-column:1/3;margin-top:7px;color:#929bad;font:600 8px Manrope;letter-spacing:0;text-transform:none}
.transaction-flow-card.sync-delayed .transaction-flow-live{color:#b36b00}.transaction-flow-card.sync-delayed .transaction-flow-live>i{background:#e5a223;box-shadow:0 0 0 6px rgba(229,162,35,.12);animation:none}
.transaction-flow-summary{display:grid;grid-template-columns:130px 140px 170px repeat(3,125px) 1fr;align-items:center;gap:0;padding:0 28px 20px}
.transaction-flow-summary>div:not(.transaction-flow-legend){border-left:1px solid #ece8f7;padding:3px 20px}.transaction-flow-summary>div:first-child{border-left:0;padding-left:0}
.transaction-flow-summary small,.transaction-flow-summary strong{display:block}.transaction-flow-summary small{color:#9199aa;font:800 8px Manrope;letter-spacing:1px}.transaction-flow-summary strong{margin-top:5px;color:#24145c;font:800 17px Manrope}
.transaction-flow-summary .success-total strong{color:#07986b}.transaction-flow-summary .pending-total strong{color:#b87900}.transaction-flow-summary .refund-total strong{color:#ce3f56}
.transaction-flow-legend{display:flex;justify-content:flex-end;gap:17px;color:#717b8f;font-size:9px;font-weight:700}.transaction-flow-legend span{display:flex;align-items:center;gap:6px}.transaction-flow-legend i{width:8px;height:8px;border-radius:3px}.transaction-flow-legend .success{background:#12b981}.transaction-flow-legend .pending{background:#e6a425}.transaction-flow-legend .reversal{background:#e05267}
.transaction-flow-columns,.transaction-flow-row{display:grid;grid-template-columns:minmax(190px,1.15fr) minmax(280px,2fr) minmax(210px,1.05fr) 90px;gap:22px;align-items:center}
.transaction-flow-columns{padding:12px 28px;background:#f8f6fc;border-top:1px solid #eee9f8;border-bottom:1px solid #eee9f8;color:#8b91a2;font:800 8px Manrope;letter-spacing:1px;text-transform:uppercase}
.transaction-flow-list{max-height:460px;overflow:auto}.transaction-flow-row{padding:15px 28px;border-bottom:1px solid #f0edf7;transition:.18s ease}.transaction-flow-row:last-child{border-bottom:0}.transaction-flow-row:hover{background:#fbfaff}.transaction-flow-row.idle{opacity:.65}
.transaction-flow-user{display:flex;align-items:center;gap:11px;min-width:0;color:inherit;text-decoration:none}.transaction-flow-avatar{flex:0 0 35px;height:35px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(145deg,#ebe5ff,#f6f3ff);color:#6230df;font:800 13px Manrope}.transaction-flow-user>span:last-child{min-width:0}.transaction-flow-user strong,.transaction-flow-user small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.transaction-flow-user strong{color:#24324e;font:800 11px Manrope}.transaction-flow-user small{margin-top:4px;color:#8c96a8;font-size:9px}
.transaction-flow-track{height:10px;display:flex;overflow:hidden;border-radius:999px;background:#edf0f5}.transaction-flow-track span{height:100%;min-width:0}.transaction-flow-track .success{background:linear-gradient(90deg,#0eac78,#2bd39a)}.transaction-flow-track .pending{background:linear-gradient(90deg,#dda01f,#f2bd45)}.transaction-flow-track .reversal{background:linear-gradient(90deg,#d74359,#ed7182)}.transaction-flow-track .other{background:#a7b0bf}
.transaction-flow-total{display:flex;justify-content:space-between;gap:10px;margin-top:6px;color:#8a94a6;font-size:9px}.transaction-flow-total strong{color:#4e5a70}
.transaction-flow-breakdown{display:flex;gap:7px}.transaction-flow-breakdown span{display:flex;align-items:center;gap:5px;padding:5px 8px;border-radius:20px;background:#f3f5f8;color:#5c687d;font:800 9px Manrope}.transaction-flow-breakdown i{width:17px;height:17px;display:grid;place-items:center;border-radius:50%;font-style:normal;font-size:8px}.transaction-flow-breakdown .success i{background:#dcf7eb;color:#07875d}.transaction-flow-breakdown .pending i{background:#fff0d0;color:#a86c00}.transaction-flow-breakdown .reversal i{background:#ffe4e8;color:#b6293d}
.transaction-flow-latest{text-align:right}.transaction-flow-latest strong,.transaction-flow-latest small{display:block}.transaction-flow-latest strong{color:#3d4a62;font:800 10px Manrope}.transaction-flow-latest small{margin-top:4px;color:#929bad;font-size:8px}.transaction-flow-loading,.transaction-flow-empty{padding:45px 20px;text-align:center;color:#8a94a6}
@keyframes transaction-flow-pulse{50%{box-shadow:0 0 0 9px rgba(17,191,132,0)}}
@media(max-width:1250px){.transaction-flow-summary{grid-template-columns:repeat(3,1fr);row-gap:17px}.transaction-flow-legend{grid-column:1/4;justify-content:flex-start}.transaction-flow-columns,.transaction-flow-row{grid-template-columns:minmax(170px,1fr) minmax(240px,1.6fr) minmax(190px,1fr) 75px;min-width:850px}.transaction-flow-list,.transaction-flow-columns{overflow-x:auto}}
@media(max-width:650px){.transaction-flow-head{align-items:flex-start;flex-direction:column;padding:22px 20px}.transaction-flow-actions{width:100%;justify-content:space-between}.transaction-flow-filter{align-items:flex-start;flex-direction:column}.transaction-flow-filter select{min-width:150px}.transaction-flow-summary{grid-template-columns:1fr 1fr;padding:0 20px 18px;row-gap:0}.transaction-flow-summary>div:not(.transaction-flow-legend){padding:10px 0;border-left:0;border-top:1px solid #ece8f7}.transaction-flow-summary>div:nth-child(odd){padding-right:12px}.transaction-flow-summary>div:nth-child(even){padding-left:16px;border-left:1px solid #ece8f7}.transaction-flow-summary>div:nth-child(-n+2){border-top:0}.transaction-flow-legend{grid-column:1/3;margin-top:8px;padding-top:12px;border-top:1px solid #ece8f7;gap:12px}.transaction-flow-columns,.transaction-flow-row{padding-left:20px;padding-right:20px}}
