/* ==========================================================================
   资产 / 账户
   ========================================================================== */
.assets-page { padding: 30px 0 70px; }

/* ------------------------------- 总资产卡片 ------------------------------- */
.asset-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  padding: 32px 34px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background:
    radial-gradient(70% 130% at 0% 0%, rgba(0, 184, 151, 0.16), transparent 62%),
    radial-gradient(60% 120% at 100% 100%, rgba(98, 84, 255, 0.13), transparent 65%),
    linear-gradient(140deg, #0b0c0e, #070709 60%);
  overflow: hidden;
}
.asset-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 100% at 20% 0%, #000, transparent 72%);
  pointer-events: none;
}
.ah-left { position: relative; z-index: 1; }
.ah-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
.ah-label .tag { height: 19px; font-size: 10.5px; }
.eye-toggle {
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  border-radius: 6px; color: var(--text-3);
}
.eye-toggle:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.eye-toggle svg { width: 15px; height: 15px; }
.ah-value {
  margin-top: 8px;
  font-size: clamp(32px, 4.2vw, 46px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.ah-value .cur { font-size: 0.4em; font-weight: 500; color: var(--text-2); margin-left: 8px; letter-spacing: 0; }
.ah-sub { margin-top: 10px; font-size: 12.5px; color: var(--text-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ah-sub .sep { color: var(--text-4); }
.ah-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.ah-actions .btn { height: 38px; border-radius: 9px; padding: 0 18px; font-size: 13px; }

.ah-right { position: relative; z-index: 1; display: flex; align-items: center; gap: 26px; }
.donut {
  position: relative;
  width: 126px; height: 126px;
  border-radius: 50%;
  background: conic-gradient(#2a2a30 0 100%);
  flex-shrink: 0;
}
.donut::after {
  content: "";
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: #08080a;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.donut-center {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center;
}
.donut-center .dl { font-size: 10px; color: var(--text-3); }
.donut-center .dv { font-size: 12.5px; font-weight: 650; font-family: var(--mono); }
.donut-legend { display: flex; flex-direction: column; gap: 9px; min-width: 132px; }
.dl-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.dl-row .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dl-row .nm { color: var(--text-2); }
.dl-row .pc { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: #fff; }

/* --------------------------------- 布局 --------------------------------- */
.assets-grid { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 16px; margin-top: 16px; align-items: start; }
.side-col { display: flex; flex-direction: column; gap: 16px; }

/* 合约账户卡 */
.futures-card .fa-body { padding: 16px 18px 18px; }
.fa-total { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--text-3); }
.fa-total b { margin-left: auto; font-family: var(--mono); font-size: 21px; font-weight: 650; color: #fff; letter-spacing: -0.02em; }
.fa-total i { font-style: normal; font-size: 11px; color: var(--text-3); }
.fa-rows { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.fa-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.fa-row .mono { color: #d8d8dc; }
.fa-actions { display: flex; gap: 8px; margin-top: 16px; }
.fa-actions .btn { flex: 1; height: 30px; font-size: 11.5px; }
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.card-head .sub { font-size: 11.5px; color: var(--text-3); margin-top: 3px; }

/* 资产表 */
.assets-table td, .assets-table th { padding-left: 18px; padding-right: 18px; }
.assets-table th { position: static; background: transparent; }
.assets-table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.assets-table .coin-cell .nm { font-size: 13.5px; }
.assets-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.assets-table .row-actions button, .assets-table .row-actions a {
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--text-2);
  border: 1px solid transparent;
}
.assets-table .row-actions button:hover, .assets-table .row-actions a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border-color: var(--line);
}
.assets-table .val { color: #fff; }
.assets-table .chg { font-size: 11.5px; }

/* 安全卡 */
.security-card .sec-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.security-card .sec-row:last-child { border-bottom: 0; }
.sec-ico {
  width: 32px; height: 32px;
  border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  flex-shrink: 0;
}
.sec-ico svg { width: 16px; height: 16px; }
.sec-main { flex: 1; min-width: 0; }
.sec-main .t { font-size: 12.5px; font-weight: 550; }
.sec-main .s { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.sec-main .mono { font-size: 11.5px; color: #d8d8dc; }
.sec-row .btn-sm { height: 28px; font-size: 11.5px; padding: 0 10px; border-radius: 6px; }

.switch {
  position: relative;
  width: 36px; height: 20px;
  border-radius: 99px;
  background: #2a2a30;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.2s var(--ease);
}
.switch.on { background: var(--up); }
.switch.on::after { left: 18px; }

/* 资金流水 */
.txs-card { margin-top: 16px; }
.txs-card .card-head .tabs { border: 0; gap: 18px; }
.txs-card .card-head .tab { padding: 9px 0; font-size: 12.5px; }
.tx-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
}
.tx-type .ti {
  width: 24px; height: 24px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 11px;
}
.ti.deposit { background: rgba(0, 184, 151, 0.13); color: var(--up); }
.ti.withdraw { background: rgba(245, 72, 94, 0.13); color: var(--down); }
.ti.trade { background: rgba(126, 168, 255, 0.13); color: #8ab4ff; }
.ti.transfer { background: rgba(240, 185, 11, 0.13); color: #f0b90b; }
.tx-amount.pos { color: var(--up); }
.tx-amount.neg { color: var(--down); }
.txs-table td, .txs-table th { padding-left: 18px; padding-right: 18px; }
.txs-table th { position: static; background: transparent; }

/* 新用户横幅 */
.welcome-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  margin-bottom: 16px;
  border-radius: 13px;
  border: 1px solid rgba(0, 184, 151, 0.24);
  background: linear-gradient(100deg, rgba(0, 184, 151, 0.12), rgba(0, 184, 151, 0.03));
  font-size: 13px;
  color: #d6fff6;
}
.welcome-banner .wb-ico {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(0, 184, 151, 0.18);
  color: var(--up);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.welcome-banner .wb-ico svg { width: 17px; height: 17px; }
.welcome-banner b { color: #fff; }
.welcome-banner .wb-close { margin-left: auto; color: #9cebda; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; }
.welcome-banner .wb-close:hover { background: rgba(255, 255, 255, 0.08); }

/* 弹窗内快捷金额 */
.quick-amounts { display: flex; gap: 8px; flex-wrap: wrap; }
.quick-amounts button {
  flex: 1;
  height: 30px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: #121215;
  color: var(--text-2);
  font-size: 11.5px;
}
.quick-amounts button:hover { color: #fff; border-color: #3a3a42; }

@media (max-width: 1100px) {
  .assets-grid { grid-template-columns: 1fr; }
  .ah-right { display: none; }
  .asset-hero { grid-template-columns: 1fr; padding: 24px; }
}
@media (max-width: 720px) {
  .assets-page { padding: 20px 0 50px; }
  .ah-value { font-size: 34px; }
  .ah-actions .btn { flex: 1; }
  .assets-table th:nth-child(2), .assets-table td:nth-child(2),
  .assets-table th:nth-child(3), .assets-table td:nth-child(3),
  .assets-table th:nth-child(5), .assets-table td:nth-child(5) { display: none; }
  .assets-table td, .assets-table th { padding-left: 12px; padding-right: 12px; }
  .txs-table th:nth-child(1), .txs-table td:nth-child(1),
  .txs-table th:nth-child(5), .txs-table td:nth-child(5) { display: none; }
}