/* =========================================================
   CoinASX V106
   只做：
   1) 价格/数量/盘口/输入区主题自适应
   2) 市价委托/限价委托等委托控件缩小、整合
   3) 边框更细、更精致
   其他结构不动
   ========================================================= */

html{
  --v106-bg:var(--t-bg,var(--cx-bg,#070908));
  --v106-panel:var(--t-panel,var(--cx-surface,#17191d));
  --v106-panel2:var(--t-panel2,var(--cx-surface-2,#202328));
  --v106-border:var(--t-border,var(--cx-border,#2b2f35));
  --v106-text:var(--t-text,var(--cx-text,#f5f6f7));
  --v106-muted:var(--t-muted,var(--cx-text-3,#8c929a));
  --v106-green:var(--t-green,var(--cx-green,#9fe51a));
  --v106-red:var(--t-red,var(--cx-red,#ef4b63));
  --v106-green-depth:rgba(159,229,26,.09);
  --v106-red-depth:rgba(239,75,99,.09);
}

html.cx-theme-light,
html[data-theme="light"]{
  --v106-bg:#f7f8fa;
  --v106-panel:#ffffff;
  --v106-panel2:#eef1f4;
  --v106-border:#dce1e6;
  --v106-text:#12151a;
  --v106-muted:#7e8791;
  --v106-green:#76c600;
  --v106-red:#e7465c;
  --v106-green-depth:rgba(118,198,0,.085);
  --v106-red-depth:rgba(231,70,92,.075);
}

html.cx-theme-dark,
html[data-theme="dark"]{
  --v106-bg:#070908;
  --v106-panel:#17191d;
  --v106-panel2:#202328;
  --v106-border:#2b2f35;
  --v106-text:#f5f6f7;
  --v106-muted:#8c929a;
  --v106-green:#9fe51a;
  --v106-red:#ef4b63;
  --v106-green-depth:rgba(159,229,26,.09);
  --v106-red-depth:rgba(239,75,99,.09);
}

/* ===== 交易主页面 ===== */
.trade,
.trade .contract-header,
.trade .trade-buy-sell,
.trade .deep-data{
  background:var(--v106-bg)!important;
  color:var(--v106-text)!important;
}

/* ===== 实时跳动价格 / 数量 / 盘口 ===== */
.trade .deep-data,
.trade .deep-data *{
  border-color:var(--v106-border)!important;
}

.trade .deep-data .textColor,
.trade .deep-data .text-right,
.trade .deep-data [class*="textColor"]{
  color:var(--v106-text)!important;
}

.trade .deep-data .text-grey,
.trade .deep-data > .flex.justify-between.text-grey,
.trade .deep-data .approximately-text{
  color:var(--v106-muted)!important;
}

.trade .deep-data .text-green{
  color:var(--v106-green)!important;
}

.trade .deep-data .text-red{
  color:var(--v106-red)!important;
}

/* 覆盖原写死的深度背景，主题切换不会残留旧颜色 */
.trade .deep-data .font-26[style*="rgba(94, 186, 137"],
.trade .deep-data .font-26[style*="rgba(94,186,137"]{
  background:linear-gradient(to left,var(--v106-green-depth),transparent 76%)!important;
}

.trade .deep-data .font-26[style*="rgba(246, 70, 93"],
.trade .deep-data .font-26[style*="rgba(246,70,93"]{
  background:linear-gradient(to left,var(--v106-red-depth),transparent 76%)!important;
}

/* 数字跳动时不要闪背景 */
.trade .deep-data .font-26,
.trade .deep-data .font-34,
.trade .deep-data .approximately-text{
  animation:none!important;
  transition:
    color .12s ease,
    background-color .12s ease,
    border-color .12s ease!important;
}

/* ===== 输入框整体主题 ===== */
.trade .inputBackground,
.trade .trade-buy-sell .inputBackground,
.trade .trade-buy-sell input,
.trade .targetPrice{
  background:var(--v106-panel2)!important;
  color:var(--v106-text)!important;
  border-color:var(--v106-border)!important;
}

.trade .trade-buy-sell .inputBackground{
  border:1px solid var(--v106-border)!important;
  box-shadow:none!important;
}

.trade .trade-buy-sell input{
  border:0!important;
  outline:0!important;
}

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

.trade .trade-buy-sell .inputBackground span,
.trade .trade-buy-sell .textColor2{
  color:var(--v106-muted)!important;
}

/* ===== 市价委托 / 限价委托 控件紧凑化 ===== */
/* 原委托类型下拉容器 */
.trade .trade-buy-sell .mt-22.mb-22.inputBackground{
  height:42px!important;
  min-height:42px!important;
  margin-top:10px!important;
  margin-bottom:9px!important;
  border-radius:9px!important;
}

.trade .trade-buy-sell .mt-22.mb-22.inputBackground > .flex{
  height:40px!important;
  min-height:40px!important;
}

.trade .trade-buy-sell .mt-22.mb-22.inputBackground .pl-16{
  padding-left:11px!important;
  width:auto!important;
  flex:1!important;
  font-size:13px!important;
  line-height:40px!important;
  color:var(--v106-text)!important;
}

/* 箭头也缩小 */
.trade .trade-buy-sell .mt-22.mb-22.inputBackground img{
  width:13px!important;
  height:auto!important;
  padding-right:11px!important;
  opacity:.72!important;
}

/* 原页面中可能出现的 市价 / 限价 两个切换项统一紧凑 */
.trade .order-type-tabs,
.trade .orderTypeTabs,
.trade [class*="order-type-tab"],
.trade [class*="orderTypeTab"]{
  min-height:34px!important;
  padding:3px!important;
  border:1px solid var(--v106-border)!important;
  border-radius:9px!important;
  background:var(--v106-panel2)!important;
  box-shadow:none!important;
}

.trade .order-type-tabs button,
.trade .orderTypeTabs button,
.trade [class*="order-type-tab"] button,
.trade [class*="orderTypeTab"] button{
  height:28px!important;
  min-height:28px!important;
  padding:0 11px!important;
  border:0!important;
  border-radius:7px!important;
  background:transparent!important;
  color:var(--v106-muted)!important;
  font-size:12px!important;
  line-height:28px!important;
}

/* ===== 价格 / 数量 / 总额 输入框再缩一档 ===== */
.trade .trade-buy-sell .h-70{
  height:46px!important;
  min-height:46px!important;
}

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

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

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

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

.trade .trade-buy-sell .inputBackground{
  border-radius:9px!important;
}

/* 数量 / 总额切换也更紧凑 */
.trade .total-list{
  gap:5px!important;
  margin:1px 0 7px!important;
}

.trade .total-div{
  min-width:48px!important;
  height:28px!important;
  line-height:28px!important;
  padding:0 8px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  color:var(--v106-muted)!important;
  background:transparent!important;
  font-size:11px!important;
}

.trade .total-div.active-bg{
  color:var(--v106-text)!important;
  background:var(--v106-panel2)!important;
  border-color:var(--v106-border)!important;
}

/* ===== 买入 / 卖出顶部切换边框缩小 ===== */
.trade .trade-buy-sell .tabBackground{
  height:42px!important;
  min-height:42px!important;
  padding:2px!important;
  border:1px solid var(--v106-border)!important;
  border-radius:9px!important;
  background:var(--v106-panel2)!important;
}

.trade .trade-buy-sell .buy-item{
  height:36px!important;
  min-height:36px!important;
  line-height:36px!important;
  border-radius:7px!important;
  font-size:14px!important;
}

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

/* ===== 百分比 / 可用余额 ===== */
.trade .tab-item,
.trade .trade-buy-sell .text-grey{
  color:var(--v106-muted)!important;
}

.trade .mt-40{
  margin-top:15px!important;
}

/* ===== 下单按钮略精致，但不改变功能 ===== */
.trade .buyandSell{
  height:50px!important;
  min-height:50px!important;
  line-height:50px!important;
  margin-top:20px!important;
  border:0!important;
  border-radius:10px!important;
  box-shadow:none!important;
  font-size:16px!important;
  font-weight:800!important;
}

.trade .buyandSell.bg-green{
  background:var(--v106-green)!important;
  color:#0c1200!important;
}

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

/* ===== 盘口底部选择器 ===== */
.trade .k-select-box .select-box,
.trade .k-select-box .option-box{
  background:var(--v106-panel2)!important;
  color:var(--v106-text)!important;
  border:1px solid var(--v106-border)!important;
  border-radius:8px!important;
  box-shadow:none!important;
}

/* ===== 委托/资产/底部折叠栏 ===== */
.trade .border-b-color,
.trade .tabBackground1{
  background:var(--v106-bg)!important;
  color:var(--v106-text)!important;
  border-color:var(--v106-border)!important;
}

.trade .diviLine{
  background:var(--v106-panel2)!important;
}

/* ===== 深浅主题切换统一过渡 ===== */
.trade .inputBackground,
.trade .tabBackground,
.trade .deep-data,
.trade .deep-data *,
.trade .total-div,
.trade .k-select-box .select-box{
  transition:
    background-color .14s ease,
    color .14s ease,
    border-color .14s ease!important;
}

/* 防行情频繁更新带来的 transform / opacity 闪烁 */
.trade .deep-data *,
.trade .trade-buy-sell input{
  transform:none;
  opacity:1;
}

/* ===== 响应式 ===== */
@media(max-width:390px){
  .trade .trade-buy-sell{
    gap:9px!important;
  }

  .trade .trade-buy-sell .mt-22.mb-22.inputBackground{
    height:40px!important;
    min-height:40px!important;
  }

  .trade .trade-buy-sell .mt-22.mb-22.inputBackground > .flex{
    height:38px!important;
    min-height:38px!important;
  }

  .trade .trade-buy-sell .mt-22.mb-22.inputBackground .pl-16{
    line-height:38px!important;
    font-size:12px!important;
  }

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