/* =========================================================
   CoinASX V104 - Trading UI
   参考：深色专业现货交易模板
   原则：只美化现有 DOM，不改变 Vue / API / Router / click
   ========================================================= */

/* ---------- Theme tokens ---------- */
html{
  --t-bg:var(--cx-bg,#070908);
  --t-panel:var(--cx-surface,#1b1d21);
  --t-panel2:var(--cx-surface-2,#202328);
  --t-panel3:var(--cx-surface-3,#292c32);
  --t-border:var(--cx-border,#292d32);
  --t-text:var(--cx-text,#f5f6f7);
  --t-text2:var(--cx-text-2,#c4c8ce);
  --t-muted:var(--cx-text-3,#8b9098);
  --t-input:var(--cx-input,#202226);
  --t-green:var(--cx-green,#a6e91c);
  --t-red:var(--cx-red,#ef4b63);
  --t-green-soft:rgba(166,233,28,.11);
  --t-red-soft:rgba(239,75,99,.10);
}

html.cx-theme-light,
html[data-theme="light"]{
  --t-bg:#f7f8fa;
  --t-panel:#ffffff;
  --t-panel2:#f0f2f5;
  --t-panel3:#e7eaee;
  --t-border:#dde1e6;
  --t-text:#12151a;
  --t-text2:#3e444d;
  --t-muted:#7f8791;
  --t-input:#eef1f4;
  --t-green:#7fc900;
  --t-red:#e8465d;
  --t-green-soft:rgba(127,201,0,.10);
  --t-red-soft:rgba(232,70,93,.09);
}

/* ---------- Page ---------- */
.trade,
.trade.appContent,
body:has(.trade){
  background:var(--t-bg)!important;
  color:var(--t-text)!important;
}

.trade{
  padding-bottom:max(112px,env(safe-area-inset-bottom))!important;
}

/* ---------- Header / pair ---------- */
.trade .contract-header{
  background:var(--t-bg)!important;
  border-bottom:1px solid var(--t-border)!important;
}

.trade .contract-header > div{
  padding-left:16px!important;
  padding-right:16px!important;
}

.trade .contract-header .pt-45{
  padding-top:22px!important;
  padding-bottom:16px!important;
  min-height:78px!important;
}

.trade .contract-header .font-35{
  color:var(--t-text)!important;
  font-size:20px!important;
  line-height:26px!important;
  font-weight:800!important;
  letter-spacing:-.2px!important;
}

.trade .contract-header .pl-21{
  padding-left:8px!important;
}

.trade .contract-header .pl-30{
  padding-left:10px!important;
}

.trade .contract-header .w-35.h-35{
  width:28px!important;
  height:28px!important;
  min-width:28px!important;
  border-radius:50%!important;
  object-fit:contain!important;
}

.trade .contract-header .w-44.h-44{
  width:24px!important;
  height:24px!important;
  object-fit:contain!important;
  opacity:.92!important;
}

.trade .contract-header .text-green{
  color:var(--t-green)!important;
  font-size:13px!important;
  font-weight:700!important;
}

.trade .contract-header .text-red{
  color:var(--t-red)!important;
}

/* ---------- Main trading split ---------- */
.trade .trade-buy-sell{
  display:grid!important;
  grid-template-columns:minmax(0,1.52fr) minmax(132px,.93fr)!important;
  gap:15px!important;
  padding:18px 14px 22px!important;
  align-items:start!important;
}

/* left side */
.trade .trade-buy-sell > .flex-col.flex-1{
  min-width:0!important;
}

/* Buy / sell segmented control */
.trade .trade-buy-sell .tabBackground{
  height:48px!important;
  min-height:48px!important;
  padding:3px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  background:var(--t-panel2)!important;
  color:var(--t-muted)!important;
}

.trade .trade-buy-sell .buy-item{
  height:42px!important;
  min-height:42px!important;
  border-radius:10px!important;
  color:var(--t-text2)!important;
  font-size:16px!important;
  line-height:42px!important;
  font-weight:700!important;
}

.trade .trade-buy-sell .buy-item.open{
  background:color-mix(in srgb,var(--t-green) 22%,var(--t-panel2))!important;
  color:var(--t-green)!important;
}

/* Inputs */
.trade .trade-buy-sell .inputBackground{
  background:var(--t-input)!important;
  border:1px solid transparent!important;
  border-radius:11px!important;
  color:var(--t-text)!important;
  overflow:hidden!important;
}

.trade .trade-buy-sell .mt-22.mb-22.inputBackground{
  margin-top:12px!important;
  margin-bottom:10px!important;
}

.trade .trade-buy-sell .h-70{
  height:52px!important;
  min-height:52px!important;
}

.trade .trade-buy-sell .lh-70{
  line-height:52px!important;
}

.trade .trade-buy-sell .mb-25{
  margin-bottom:10px!important;
}

.trade .trade-buy-sell .mb-36{
  margin-bottom:15px!important;
}

.trade .trade-buy-sell input{
  height:50px!important;
  color:var(--t-text)!important;
  background:transparent!important;
  font-size:15px!important;
  font-weight:600!important;
}

.trade .trade-buy-sell input::placeholder{
  color:var(--t-muted)!important;
}

.trade .trade-buy-sell .inputBackground span,
.trade .trade-buy-sell .inputBackground .textColor2{
  color:var(--t-muted)!important;
  font-size:13px!important;
}

.trade .trade-buy-sell .inputBackground .textColor{
  color:var(--t-text)!important;
}

.trade .trade-buy-sell .pl-16{
  padding-left:13px!important;
}

/* 数量 / 总额 */
.trade .total-list{
  margin:2px 0 9px!important;
  gap:8px!important;
}

.trade .total-div{
  min-width:54px!important;
  padding:5px 9px!important;
  border-radius:7px!important;
  color:var(--t-muted)!important;
  font-size:12px!important;
  text-align:center!important;
  background:transparent!important;
}

.trade .total-div.active-bg{
  color:var(--t-text)!important;
  background:var(--t-panel3)!important;
}

/* Percentage slider labels */
.trade .tab-item{
  color:var(--t-muted)!important;
  font-size:11px!important;
  text-align:center!important;
}

/* available */
.trade .mt-40{
  margin-top:18px!important;
}
.trade .font-24{
  font-size:12px!important;
}
.trade .add-icon{
  color:var(--t-text)!important;
  font-size:18px!important;
}

/* Main buy/sell action */
.trade .buyandSell{
  height:56px!important;
  min-height:56px!important;
  line-height:56px!important;
  margin-top:24px!important;
  border-radius:12px!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:.2px!important;
  box-shadow:none!important;
}

.trade .buyandSell.bg-green{
  background:var(--t-green)!important;
  color:#101500!important;
}

.trade .buyandSell.bg-red{
  background:var(--t-red)!important;
  color:#fff!important;
}

/* ---------- Order book ---------- */
.trade .deep-data{
  width:auto!important;
  min-width:0!important;
  margin-left:0!important;
  padding-top:2px!important;
}

.trade .deep-data > .flex.justify-between.text-grey{
  min-height:45px!important;
  color:var(--t-muted)!important;
  font-size:11px!important;
}

.trade .deep-data .font-26{
  font-size:12px!important;
  line-height:20px!important;
  min-height:25px!important;
}

.trade .deep-data .pt-6{
  padding-top:3px!important;
}
.trade .deep-data .pb-6{
  padding-bottom:3px!important;
}

.trade .deep-data .text-green{
  color:var(--t-green)!important;
}
.trade .deep-data .text-red{
  color:var(--t-red)!important;
}
.trade .deep-data .textColor{
  color:var(--t-text2)!important;
}

.trade .deep-data .font-34{
  font-size:20px!important;
  line-height:26px!important;
  font-weight:800!important;
}

.trade .deep-data .approximately-text{
  color:var(--t-muted)!important;
  font-size:11px!important;
}

/* Overwrite ugly >100% gradients with sane depth wash */
.trade .deep-data .font-26[style*="rgba(94, 186, 137"]{
  background:linear-gradient(to left,var(--t-green-soft),transparent 72%)!important;
}
.trade .deep-data .font-26[style*="rgba(246, 70, 93"]{
  background:linear-gradient(to left,var(--t-red-soft),transparent 72%)!important;
}

/* ---------- Depth selector ---------- */
.trade .k-select-box{
  padding:0 14px 14px!important;
  gap:8px!important;
  align-items:center!important;
}

.trade .k-select-box .select-box{
  margin-top:0!important;
  margin-bottom:0!important;
  height:42px!important;
  flex:1!important;
  border-radius:9px!important;
  background:var(--t-panel2)!important;
  border:1px solid var(--t-border)!important;
}

.trade .k-select-box .select-box .h-70{
  height:40px!important;
  min-height:40px!important;
}

.trade .k-select-box .option-box{
  background:var(--t-panel)!important;
  border:1px solid var(--t-border)!important;
  border-radius:9px!important;
  overflow:hidden!important;
  color:var(--t-text)!important;
}

/* ---------- Orders / assets ---------- */
.trade .diviLine{
  height:8px!important;
  background:var(--t-panel2)!important;
}

.trade .border-b-color{
  border-color:var(--t-border)!important;
  padding:13px 14px!important;
}

.trade .border-b-color .pl-30{
  padding-left:0!important;
}

.trade .active-line{
  color:var(--t-text)!important;
  font-weight:700!important;
  position:relative!important;
}

.trade .active-line:after{
  content:"";
  position:absolute;
  left:10px;
  right:10px;
  bottom:-13px;
  height:3px;
  background:var(--t-text)!important;
  border-radius:3px;
}

.trade .border-b-color .ml-50{
  margin-left:26px!important;
}

.trade .border-b-color .text-grey{
  color:var(--t-muted)!important;
  font-size:14px!important;
}

.trade .pt-185{
  padding-top:72px!important;
}
.trade .pb-100{
  padding-bottom:70px!important;
}

.trade img[alt="no-date"]{
  width:86px!important;
  height:86px!important;
  opacity:.9!important;
}

.trade img[alt="no-date"] + p{
  margin-top:12px!important;
  color:var(--t-muted)!important;
  font-size:13px!important;
}

/* ---------- K line collapsed bar ---------- */
.trade .tabBackground1{
  background:var(--t-panel)!important;
  border-top:1px solid var(--t-border)!important;
  color:var(--t-text)!important;
}
.trade .tabBackground1 .textColor2{
  color:var(--t-text2)!important;
}

/* ---------- Vant / footer ---------- */
.trade ~ .van-tabbar,
.bgFooter.van-tabbar{
  background:color-mix(in srgb,var(--t-panel) 96%,transparent)!important;
  border:1px solid var(--t-border)!important;
  box-shadow:none!important;
}

.bgFooter .van-tabbar-item{
  color:var(--t-muted)!important;
}

.bgFooter .van-tabbar-item--active{
  color:var(--t-text)!important;
}

/* ---------- Theme semantic text ---------- */
.trade .textColor{
  color:var(--t-text)!important;
}
.trade .textColor2,
.trade .text-grey{
  color:var(--t-muted)!important;
}
.trade .inputBackground,
.trade .tabBackground,
.trade .tabBackground1{
  transition:background-color .16s ease,color .16s ease,border-color .16s ease!important;
}

/* ---------- Responsive ---------- */
@media(max-width:390px){
  .trade .trade-buy-sell{
    grid-template-columns:minmax(0,1.48fr) minmax(118px,.90fr)!important;
    gap:11px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .trade .deep-data .font-26{
    font-size:11px!important;
  }

  .trade .buyandSell{
    height:52px!important;
    min-height:52px!important;
    line-height:52px!important;
    font-size:17px!important;
  }
}

@media(min-width:520px){
  .trade{
    max-width:520px!important;
    margin:0 auto!important;
  }
}

/* iPhone safe area */
@supports(padding:env(safe-area-inset-bottom)){
  .bgFooter.van-tabbar{
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
}