@import url("portal.css");

/* 宽度略放大一点，更贴近目标页留白 */
.wrap{
  width:min(1040px, calc(100% - 64px));
}

/* ---------- summary ---------- */
.tx-summary{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding:26px 0 14px;
}

.acct-select{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  min-width:360px;
  box-shadow:0 6px 18px rgba(17,24,39,.06);
}

.acct-select__badge{
  width:34px;height:34px;
  border-radius:999px;
  background:#f0b53a;
  display:grid;
  place-items:center;
}
.acct-select__stripe{
  width:14px;height:10px;
  border-radius:3px;
  background:#fff;
  position:relative;
}
.acct-select__stripe::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:4px;
  height:2px;
  background:rgba(0,0,0,.10);
}

.acct-select__text{
  font-weight:800;
  color:#2a2a2a;
}
.acct-select__chev{
  margin-left:auto;
  width:0;height:0;
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:8px solid var(--purple-2);
  opacity:.85;
}

.tx-summary__right{
  text-align:right;
  padding-top:4px;
}
.tx-balance__label{
  color:#7a7a7a;
  font-size:14px;
  margin-bottom:6px;
}
.tx-balance__value{
  font-size:44px;
  font-weight:950;
  letter-spacing:-.7px;
  color:#2a2a2a;
  line-height:1.05;
}
.tx-balance__note{
  margin-top:10px;
  color:#3d3d3d;
  font-size:14px;
}

/* ---------- kpis ---------- */
.tx-kpis{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:0;
  overflow:hidden;
  margin:8px 0 14px;
}

.kpi{
  padding:18px 22px;
  border-right:1px solid #f0f0f2;
}
.kpi:last-child{ border-right:none; }

.kpi__label{
  color:#6b6b6b;
  font-size:14px;
  margin-bottom:8px;
}
.kpi__value{
  font-size:20px;
  font-weight:900;
  color:#2a2a2a;
}

/* ---------- value summary ---------- */
.tx-value{
  padding:18px 22px 18px;
  margin:0 0 14px;
}
.tx-value .spark{
  color:#b7b7bc;
  margin-bottom:10px;
}
.tx-value__title{
  font-size:14px;
  font-weight:900;
  margin-bottom:6px;
}
.tx-value__desc{
  color:#666;
  font-size:13px;
  margin-bottom:12px;
}
.tx-value__link{
  color:var(--purple-2);
  font-weight:800;
  text-decoration:none;
}
.tx-value__link:hover{ text-decoration:underline; }

/* ---------- actions ---------- */
.tx-actions{
  padding:18px 22px;
  display:flex;
  gap:26px;
  align-items:center;
  justify-content:flex-start;
  margin:0 0 18px;
}

.action{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--purple-2);
  font-weight:900;
}
.action:hover{ text-decoration:underline; }

.action__icon{
  width:44px;height:44px;
  border-radius:999px;
  background:var(--purple-soft);
  position:relative;
  display:grid;
  place-items:center;
  border:1px solid rgba(91,42,120,.10);
}

.action__icon--doc::after{
  content:"";
  width:16px;height:18px;
  border-radius:3px;
  border:2px solid rgba(91,42,120,.55);
  display:block;
  box-sizing:border-box;
}

.action__icon--pts::after{
  content:"pts";
  font-weight:950;
  font-size:12px;
  color:rgba(91,42,120,.70);
}

.action__icon--gear::after{
  content:"";
  width:16px;height:16px;
  border-radius:999px;
  border:2px solid rgba(91,42,120,.55);
  box-sizing:border-box;
  display:block;
  position:relative;
}
.action__icon--gear::before{
  content:"";
  position:absolute;
  width:22px;height:2px;
  background:rgba(91,42,120,.35);
  border-radius:2px;
  transform:rotate(45deg);
}

.action__new{
  position:absolute;
  top:-8px; left:10px;
  font-size:10px;
  font-weight:950;
  background:#8b1f1a;
  color:#fff;
  padding:2px 6px;
  border-radius:999px;
  box-shadow:0 6px 14px rgba(139,31,26,.25);
}

/* ---------- table ---------- */
.tx-table{
  margin-top:6px;
}
.tx-table__title{
  margin:18px 0 10px;
  font-size:16px;
  font-weight:900;
  color:#2a2a2a;
}

.table{
  overflow:hidden;
}

.thead, .trow{
  display:grid;
  grid-template-columns: 2.2fr 1fr 1.1fr 1fr 26px;
  gap:12px;
  align-items:center;
  padding:16px 22px;
}

.thead{
  color:#6f6f6f;
  font-size:13px;
  font-weight:800;
  border-bottom:1px solid #f0f0f2;
}

.trow{
  font-size:14px;
  border-bottom:1px solid #f3f3f5;
}
.trow:last-child{ border-bottom:none; }

.desc{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:800;
  color:#2a2a2a;
}
.merchant-icon{
  width:34px;height:34px;
  border-radius:999px;
  background:#eef6f0;
  border:1px solid #d7eadc;
  position:relative;
}
.merchant-icon::after{
  content:"";
  position:absolute;
  left:10px; top:10px;
  width:14px; height:12px;
  border-radius:3px;
  border:2px solid rgba(46,125,50,.50);
  box-sizing:border-box;
}
.merchant-icon::before{
  content:"";
  position:absolute;
  left:13px; top:13px;
  width:8px; height:2px;
  background:rgba(46,125,50,.45);
  border-radius:2px;
}

.dt{
  color:#2a2a2a;
  font-weight:700;
}
.amt{
  font-weight:900;
}
.neg{
  color:#0f766e; /* 目标站那种偏青绿的负号金额感觉 */
}
.right{
  text-align:right;
}

.chev{
  width:8px;height:8px;
  border-right:2px solid #9aa0a6;
  border-bottom:2px solid #9aa0a6;
  transform:rotate(-45deg);
  justify-self:end;
}

/* responsive */
@media (max-width: 860px){
  .wrap{ width:calc(100% - 24px); }
  .tx-summary{ flex-direction:column; align-items:flex-start; }
  .tx-summary__right{ text-align:left; }
  .acct-select{ min-width:unset; width:100%; }
  .tx-kpis{ grid-template-columns:1fr; }
  .kpi{ border-right:none; border-bottom:1px solid #f0f0f2; }
  .kpi:last-child{ border-bottom:none; }
  .thead, .trow{
    grid-template-columns: 1.8fr .8fr 1fr .9fr 18px;
    padding:14px 14px;
  }
}

/* ===== ADDITIONS for modal + load more (append to bottom) ===== */

.tx-loadmore{
  display:flex;
  justify-content:center;
  padding: 18px 0 6px;
}

.btn.btn--loadmore{
  height: 44px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #e6001a;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(230,0,26,0.18);
}
.btn.btn--loadmore:active{ transform: translateY(1px); }

/* Make existing rows feel clickable */
.tx-row{ cursor: pointer; }
.tx-row:focus{
  outline: 3px solid rgba(91,42,120,0.35);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Modal */
.tx-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.tx-modal[aria-hidden="false"]{ display:block; }

.tx-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(11,18,32,0.45);
}

.tx-modal__dialog{
  position: relative;
  width: min(760px, 92vw);
  margin: 14vh auto 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(11,18,32,0.28);
  border: 2px solid rgba(91,42,120,0.90);
  overflow: hidden;
}

.tx-modal__close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(11,18,32,0.06);
  color: rgba(11,18,32,0.75);
  font-size: 22px;
  cursor: pointer;
}

.tx-modal__panel{ padding: 20px 22px 18px; }

/* Processing */
.tx-processing{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 14px 2px;
}
.tx-spinner{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 4px solid rgba(11,18,32,0.12);
  border-top-color: #5b2a78;
  animation: txspin 0.9s linear infinite;
}
@keyframes txspin { to { transform: rotate(360deg); } }
.tx-processing__title{ font-weight: 900; color:#0b1220; }
.tx-processing__sub{ font-size: 12px; color: rgba(11,18,32,0.60); }

/* Detail */
.tx-detail__merchant{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color:#0b1220;
  margin-bottom: 12px;
}
.tx-detail__meta{
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11,18,32,0.75);
  white-space: pre-line;
}

.tx-detail__footer{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(11,18,32,0.12);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
}

.tx-detail__link,
.tx-detail__print{
  border:0;
  background: transparent;
  padding: 0;
  color: #2b6cb0;
  cursor: pointer;
}
.tx-detail__link{ font-weight: 700; }
.tx-detail__print{
  font-weight: 900;
  display:flex;
  align-items:center;
  gap: 10px;
  letter-spacing: 0.06em;
}
.tx-print-ico{ width: 18px; height: 18px; fill: currentColor; }