/* =========================================================
   CoinASX Assets UI Mount V70
   根据用户提供的资产页参考 HTML 写入现有资产页面
   仅视觉覆盖，不改资产数据/API/路由
   ========================================================= */

:root{
  --a70-bg:#050505;
  --a70-panel:#1f1f20;
  --a70-line:#202124;
  --a70-text:#f6f6f7;
  --a70-muted:#96979c;
  --a70-green:#9BEA37;
}

/* 页面主体 */
.assetsCenter,
.assets-center,
.assets,
.wallet,
.wallet-page,
.asset-page,
.appContent{
  background:var(--a70-bg)!important;
  color:var(--a70-text)!important;
}

/* 顶部频道/导航 */
.assetsCenter .top-tabs,
.assets-center .top-tabs,
.wallet .top-tabs{
  display:flex!important;
  align-items:center!important;
  gap:20px!important;
  padding:8px 15px 15px!important;
  border-bottom:1px solid #1b1b1c!important;
  white-space:nowrap!important;
  overflow-x:auto!important;
  scrollbar-width:none!important;
}
.assetsCenter .top-tabs::-webkit-scrollbar,
.assets-center .top-tabs::-webkit-scrollbar,
.wallet .top-tabs::-webkit-scrollbar{display:none!important}

.assetsCenter .top-tabs span,
.assets-center .top-tabs span,
.wallet .top-tabs span{
  font-size:16px!important;
  font-weight:700!important;
  color:#9d9ea2!important;
}
.assetsCenter .top-tabs .active,
.assets-center .top-tabs .active,
.wallet .top-tabs .active{
  color:#fff!important;
}

/* 总资产卡 */
.assetsCenter .price,
.assetsCenter .total_wrap,
.assetsCenter .total-wrap,
.assetsCenter .asset-total,
.assets-center .price,
.wallet .price{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  padding-left:15px!important;
  padding-right:15px!important;
}

.assetsCenter .price_box,
.assetsCenter .price-box,
.assets-center .price_box,
.wallet .price_box{
  color:#9b9ca0!important;
  font-size:14px!important;
}

.assetsCenter .price_box_img,
.assetsCenter .price-box-img,
.assets-center .price_box_img,
.wallet .price_box_img{
  width:14px!important;
  height:14px!important;
  opacity:.72!important;
}

.assetsCenter .total_wrap,
.assetsCenter .total-wrap,
.assetsCenter .asset-total-value{
  margin-top:10px!important;
}

.assetsCenter .total_wrap .font-50,
.assetsCenter .total_wrap .font-60,
.assetsCenter .total_wrap .amount,
.assetsCenter .total-wrap .amount,
.assetsCenter .asset-total-value{
  font-size:34px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.3px!important;
  color:#fff!important;
}

.assetsCenter .total_wrap .font-26,
.assetsCenter .total_wrap .font-28,
.assetsCenter .total-wrap .unit{
  font-size:14px!important;
  color:#f2f2f3!important;
}

/* 资产估值下面信息 */
.assetsCenter .text-grey,
.assetsCenter .textColor2,
.assets-center .text-grey,
.wallet .text-grey{
  color:var(--a70-muted)!important;
}

.assetsCenter .available,
.assetsCenter .balance,
.assetsCenter .usable,
.assets-center .available{
  font-size:13px!important;
}

/* 四个操作按钮 */
.assetsCenter .operation,
.assetsCenter .operations,
.assetsCenter .asset-tools,
.assetsCenter .action-list,
.assets-center .operation,
.wallet .operation{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:18px!important;
  padding-left:15px!important;
  padding-right:15px!important;
}

.assetsCenter .operation-item,
.assetsCenter .operations > div,
.assetsCenter .asset-tools > div,
.assetsCenter .action-list > div,
.assets-center .operation-item,
.wallet .operation-item{
  text-align:center!important;
  color:#f3f3f4!important;
  font-size:13px!important;
}

.assetsCenter .operation-item img,
.assetsCenter .operations img,
.assetsCenter .asset-tools img,
.assetsCenter .action-list img,
.assets-center .operation-item img,
.wallet .operation-item img{
  width:40px!important;
  height:40px!important;
  padding:9px!important;
  object-fit:contain!important;
  border-radius:10px!important;
  background:var(--a70-panel)!important;
  margin-bottom:8px!important;
}

/* 分隔线 */
.assetsCenter .line,
.assets-center .line,
.wallet .line{
  height:1px!important;
  background:#1b1b1c!important;
  border:0!important;
}

/* 资产列表标题 */
.assetsCenter .asset-title,
.assetsCenter .assets-title,
.assetsCenter .list-title,
.assets-center .asset-title,
.wallet .asset-title{
  font-size:18px!important;
  font-weight:800!important;
  color:#fff!important;
}

/* 资产列表整体 */
.assetsCenter .asset-list,
.assetsCenter .coin-list,
.assetsCenter .wallet-list,
.assetsCenter .list,
.assets-center .asset-list,
.wallet .asset-list{
  padding-left:15px!important;
  padding-right:15px!important;
  background:var(--a70-bg)!important;
}

/* 每一行 */
.assetsCenter .asset-item,
.assetsCenter .coin-item,
.assetsCenter .wallet-item,
.assetsCenter .list-item,
.assets-center .asset-item,
.wallet .asset-item{
  display:grid!important;
  grid-template-columns:48px minmax(0,1fr) auto!important;
  align-items:center!important;
  min-height:64px!important;
  padding:5px 0!important;
  border:0!important;
  background:transparent!important;
}

/* 币种图标 */
.assetsCenter .asset-item img,
.assetsCenter .coin-item img,
.assetsCenter .wallet-item img,
.assetsCenter .list-item img,
.assets-center .asset-item img,
.wallet .asset-item img{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
  border-radius:50%!important;
  object-fit:contain!important;
}

/* 币名 */
.assetsCenter .asset-item .symbol,
.assetsCenter .coin-item .symbol,
.assetsCenter .wallet-item .symbol,
.assetsCenter .list-item .symbol,
.assets-center .asset-item .symbol,
.wallet .asset-item .symbol{
  font-size:15px!important;
  font-weight:700!important;
  color:#f5f5f5!important;
}

/* 副标题 */
.assetsCenter .asset-item .name,
.assetsCenter .coin-item .name,
.assetsCenter .wallet-item .name,
.assetsCenter .list-item .name,
.assets-center .asset-item .name,
.wallet .asset-item .name{
  margin-top:5px!important;
  font-size:12px!important;
  color:#919298!important;
}

/* 右侧金额 */
.assetsCenter .asset-item .amount,
.assetsCenter .coin-item .amount,
.assetsCenter .wallet-item .amount,
.assetsCenter .list-item .amount,
.assets-center .asset-item .amount,
.wallet .asset-item .amount{
  text-align:right!important;
  font-size:15px!important;
  color:#f5f5f5!important;
}

.assetsCenter .asset-item .fiat,
.assetsCenter .coin-item .fiat,
.assetsCenter .wallet-item .fiat,
.assetsCenter .list-item .fiat,
.assets-center .asset-item .fiat,
.wallet .asset-item .fiat{
  text-align:right!important;
  margin-top:5px!important;
  font-size:12px!important;
  color:#919298!important;
}

/* 底部导航 */
.van-tabbar--fixed{
  left:50%!important;
  right:auto!important;
  bottom:max(10px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  width:min(384px,calc(100% - 30px))!important;
  height:58px!important;
  padding:5px!important;
  background:#171718!important;
  border:1px solid #303033!important;
  border-radius:32px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

.van-tabbar-item{
  border-radius:27px!important;
  background:transparent!important;
  color:#c2c2c5!important;
  font-size:11px!important;
}

.van-tabbar-item--active{
  background:#3a3a3d!important;
  color:#fff!important;
  font-weight:700!important;
}

.van-tabbar-item--active .van-tabbar-item__icon{
  color:var(--a70-green)!important;
}

.van-tabbar-item__icon img{
  width:20px!important;
  height:20px!important;
  object-fit:contain!important;
}

/* 手机适配 */
@media(max-width:360px){
  .assetsCenter .operation,
  .assetsCenter .operations,
  .assetsCenter .asset-tools,
  .assetsCenter .action-list{
    gap:10px!important;
  }

  .assetsCenter .top-tabs,
  .assets-center .top-tabs,
  .wallet .top-tabs{
    gap:14px!important;
  }

  .assetsCenter .top-tabs span,
  .assets-center .top-tabs span,
  .wallet .top-tabs span{
    font-size:15px!important;
  }
}

/* 平板 / PC */
@media(min-width:600px){
  #app{
    width:min(100%,820px)!important;
    margin:0 auto!important;
    background:var(--a70-bg)!important;
  }
}