/* =========================================================
   CoinASX V150
   合约盘口/下单区按用户参考 DOM 风格统一
   ========================================================= */

html{
  --c150-bg:#000;
  --c150-panel:#111316;
  --c150-panel2:#171a1f;
  --c150-border:#262a30;
  --c150-text:#fff;
  --c150-sub:#92979f;
  --c150-muted:#6f747c;
  --c150-green:#2ebd85;
  --c150-red:#f6465d;
  --c150-green-bg:rgba(46,189,133,.075);
  --c150-red-bg:rgba(246,70,93,.075);
}

html.cx-theme-light,
html[data-theme="light"],
html[data-cx-theme="light"]{
  --c150-bg:#fff;
  --c150-panel:#f5f6f7;
  --c150-panel2:#eceef1;
  --c150-border:#e0e3e7;
  --c150-text:#111317;
  --c150-sub:#737982;
  --c150-muted:#9aa0a8;
  --c150-green:#0fa772;
  --c150-red:#e2445b;
  --c150-green-bg:rgba(15,167,114,.07);
  --c150-red-bg:rgba(226,68,91,.07);
}

/* ===== 主交易区域 ===== */
.trading-main,
.no_touch.appContent .trade-content,
.no_touch.appContent .content-box{
  background:var(--c150-bg)!important;
  color:var(--c150-text)!important;
}

/* =========================================================
   盘口 - 参考 market-depth
   ========================================================= */
.market-depth,
.no_touch.appContent .deep-data{
  --depth-buy-color:var(--c150-green)!important;
  --depth-sell-color:var(--c150-red)!important;
  --depth-buy-bg:var(--c150-green-bg)!important;
  --depth-sell-bg:var(--c150-red-bg)!important;

  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  background:var(--c150-bg)!important;
  color:var(--c150-text)!important;
  overflow:visible!important;
}

/* 标题：价格 / 数量 */
.market-depth .depth-header,
.no_touch.appContent .deep-data > .flex.justify-between.text-grey{
  display:grid!important;
  grid-template-columns:minmax(86px,1fr) minmax(70px,.82fr)!important;
  column-gap:20px!important;
  align-items:end!important;
  width:100%!important;
  padding:0 0 8px!important;
  color:var(--c150-sub)!important;
  font-size:10px!important;
  line-height:1.35!important;
}

.market-depth .price-label,
.no_touch.appContent .deep-data > .flex.justify-between.text-grey > div:first-child{
  text-align:left!important;
  justify-self:start!important;
  color:var(--c150-sub)!important;
  white-space:nowrap!important;
}

.market-depth .quantity-label,
.no_touch.appContent .deep-data > .flex.justify-between.text-grey > div:last-child{
  text-align:right!important;
  justify-self:end!important;
  color:var(--c150-sub)!important;
  white-space:nowrap!important;
  min-width:68px!important;
}

/* 每档 */
.market-depth .order-row,
.no_touch.appContent .deep-data .font-26{
  position:relative!important;
  height:22px!important;
  min-height:22px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:transparent!important;
}

.market-depth .order-content,
.no_touch.appContent .deep-data .font-26{
  display:grid!important;
  grid-template-columns:minmax(86px,1fr) minmax(70px,.82fr)!important;
  column-gap:20px!important;
  align-items:center!important;
  box-sizing:border-box!important;
}

.market-depth .order-price,
.no_touch.appContent .deep-data .font-26 > div:first-child{
  position:relative!important;
  z-index:2!important;
  justify-self:start!important;
  text-align:left!important;
  font-size:11px!important;
  line-height:22px!important;
  font-weight:560!important;
  white-space:nowrap!important;
  font-variant-numeric:tabular-nums!important;
}

.market-depth .order-quantity,
.no_touch.appContent .deep-data .font-26 > div:last-child{
  position:relative!important;
  z-index:2!important;
  justify-self:end!important;
  text-align:right!important;
  min-width:68px!important;
  font-size:11px!important;
  line-height:22px!important;
  font-weight:520!important;
  color:var(--c150-text)!important;
  white-space:nowrap!important;
  overflow:visible!important;
  font-variant-numeric:tabular-nums!important;
}

/* 卖单红色 */
.market-depth .sell-orders .order-price,
.no_touch.appContent .deep-data .sell-data .font-26 > div:first-child,
.no_touch.appContent .deep-data .text-red{
  color:var(--c150-red)!important;
}

/* 买单绿色 */
.market-depth .buy-orders .order-price,
.market-depth .buy-price,
.no_touch.appContent .deep-data .buy-data .font-26 > div:first-child,
.no_touch.appContent .deep-data .text-green{
  color:var(--c150-green)!important;
}

/* 深度背景条 */
.market-depth .order-fill{
  position:absolute!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  z-index:0!important;
  background:var(--c150-red-bg)!important;
  pointer-events:none!important;
}

.market-depth .order-fill.buy-fill{
  background:var(--c150-green-bg)!important;
}

/* 中间最新价 */
.market-depth .middle-price,
.no_touch.appContent .deep-data .font-34{
  min-height:36px!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  padding:5px 0!important;
  border:0!important;
  background:transparent!important;
}

.market-depth .current-price,
.no_touch.appContent .deep-data .font-34{
  color:var(--c150-green)!important;
  font-size:15px!important;
  line-height:24px!important;
  font-weight:860!important;
  font-variant-numeric:tabular-nums!important;
  text-decoration:none!important;
}

.market-depth .price-border{
  border:1px solid var(--c150-border)!important;
  border-radius:5px!important;
  padding:1px 5px!important;
  background:var(--c150-panel)!important;
}

.market-depth .bordered-price{
  color:var(--c150-sub)!important;
  font-size:10px!important;
}

/* 去掉价格前面/下面所有虚线 */
.market-depth .current-price,
.market-depth .bordered-price,
.no_touch.appContent .deep-data .font-34,
.no_touch.appContent .deep-data .approximately-text{
  border:0!important;
  text-decoration:none!important;
  outline:0!important;
}
.market-depth .current-price:before,
.market-depth .current-price:after,
.no_touch.appContent .deep-data .font-34:before,
.no_touch.appContent .deep-data .font-34:after{
  display:none!important;
  content:none!important;
}

/* 精度控制 */
.market-depth .depth-controls{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding-top:8px!important;
  border-top:1px solid var(--c150-border)!important;
}

.market-depth .precision-background{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  min-height:26px!important;
  padding:0 8px!important;
  border:1px solid var(--c150-border)!important;
  border-radius:6px!important;
  background:var(--c150-panel)!important;
  color:var(--c150-text)!important;
}

.market-depth .precision-text{
  font-size:10px!important;
  font-variant-numeric:tabular-nums!important;
}

/* =========================================================
   下单表单 - 参考 market-order-form
   ========================================================= */
.market-order-form{
  width:100%!important;
  box-sizing:border-box!important;
  color:var(--c150-text)!important;
  background:var(--c150-bg)!important;
}

/* 可用余额 */
.market-order-form .top-balance,
.market-order-form .balance-section{
  margin-bottom:8px!important;
}

.market-order-form .balance-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  min-height:17px!important;
  height:auto!important;
  color:var(--c150-sub)!important;
}

.market-order-form .balance-label,
.market-order-form .balance-amount{
  font-size:10px!important;
  line-height:1.45!important;
  color:var(--c150-sub)!important;
  font-variant-numeric:tabular-nums!important;
}

.market-order-form .balance-value{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
}

.market-order-form .balance-icon{
  color:var(--c150-sub)!important;
  opacity:.9!important;
}

/* 去掉可用/保证金虚线 */
.market-order-form .balance-label.has-border{
  border:0!important;
  text-decoration:none!important;
}
.market-order-form .balance-label.has-border:after{
  display:none!important;
}

/* 委托类型 */
.market-order-form .dropdown-selector,
.market-order-form .selector-background{
  width:100%!important;
}

.market-order-form .selector-background{
  min-height:38px!important;
  padding:0 11px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  box-sizing:border-box!important;
  border:1px solid var(--c150-border)!important;
  border-radius:8px!important;
  background:var(--c150-panel)!important;
  color:var(--c150-text)!important;
}

.market-order-form .selector-text{
  flex:1!important;
  color:var(--c150-text)!important;
  font-size:12px!important;
  font-weight:650!important;
}

.market-order-form .left-icon{
  width:11px!important;
  height:11px!important;
  opacity:.78!important;
}

/* 输入框 */
.market-order-form .trading-input{
  margin-top:8px!important;
}

.market-order-form .input-background{
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
  border:1px solid var(--c150-border)!important;
  border-radius:8px!important;
  background:var(--c150-panel)!important;
  color:var(--c150-text)!important;
}

.market-order-form .input-content{
  width:100%!important;
  min-height:40px!important;
  display:flex!important;
  align-items:center!important;
}

.market-order-form .display-content{
  padding:0 12px!important;
}

.market-order-form .display-text{
  color:var(--c150-sub)!important;
  font-size:12px!important;
}

.market-order-form .input-value-container{
  flex:1 1 auto!important;
  min-width:0!important;
}

.market-order-form .input-element{
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  padding:0 8px!important;
  box-sizing:border-box!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  color:var(--c150-text)!important;
  font-size:12px!important;
  font-weight:650!important;
}

.market-order-form .input-element::placeholder{
  color:var(--c150-muted)!important;
}

.market-order-form .left-controls,
.market-order-form .right-controls{
  flex:0 0 32px!important;
  width:32px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
}

.market-order-form .minus-button,
.market-order-form .plus-button{
  width:12px!important;
  height:12px!important;
  position:relative!important;
}

.market-order-form .minus-button:before,
.market-order-form .plus-button:before{
  content:"";
  position:absolute;
  left:1px;
  right:1px;
  top:5px;
  height:1px;
  background:var(--c150-sub);
}

.market-order-form .plus-button:after{
  content:"";
  position:absolute;
  top:1px;
  bottom:1px;
  left:5px;
  width:1px;
  background:var(--c150-sub);
}

.market-order-form .currency-selector{
  flex:0 0 auto!important;
  padding-right:10px!important;
}

.market-order-form .currency-dropdown{
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
}

.market-order-form .currency-text{
  color:var(--c150-sub)!important;
  font-size:10px!important;
}

/* 百分比滑杆 */
.market-order-form .slider-selector{
  margin:16px 2px 12px!important;
}

.market-order-form .slider-container{
  height:3px!important;
  border-radius:3px!important;
  background:var(--c150-border)!important;
}

.market-order-form .slider-tick{
  width:7px!important;
  height:7px!important;
  border-radius:50%!important;
  border:1px solid var(--c150-border)!important;
  background:var(--c150-bg)!important;
}

.market-order-form .slider-tick.current,
.market-order-form .slider-handle{
  border-color:var(--c150-text)!important;
  background:var(--c150-text)!important;
}

/* 止盈止损 */
.market-order-form .options-section{
  margin:8px 0 10px!important;
}

.market-order-form .option-row{
  min-height:24px!important;
}

.market-order-form .option-item{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
}

.market-order-form .option-checkbox{
  width:14px!important;
  height:14px!important;
  border:1px solid var(--c150-border)!important;
  border-radius:4px!important;
  background:var(--c150-panel)!important;
}

.market-order-form .option-label{
  color:var(--c150-sub)!important;
  font-size:10px!important;
}

.market-order-form .option-label.has-border{
  border:0!important;
}

/* 开多 / 开空 */
.market-order-form .action-group{
  margin-top:10px!important;
}

.market-order-form .submit-button{
  height:42px!important;
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:8px!important;
  box-shadow:none!important;
  transition:transform .1s ease,filter .12s ease!important;
}

.market-order-form .submit-button:active{
  transform:scale(.992)!important;
  filter:brightness(.93)!important;
}

.market-order-form .contract-long-button{
  background:var(--c150-green)!important;
}

.market-order-form .contract-short-button{
  background:var(--c150-red)!important;
}

.market-order-form .submit-text{
  color:#fff!important;
  font-size:13px!important;
  line-height:18px!important;
  font-weight:850!important;
}

/* =========================================================
   小屏
   ========================================================= */
@media(max-width:390px){
  .market-depth .depth-header,
  .market-depth .order-content,
  .no_touch.appContent .deep-data > .flex.justify-between.text-grey,
  .no_touch.appContent .deep-data .font-26{
    grid-template-columns:minmax(72px,1fr) minmax(58px,.78fr)!important;
    column-gap:13px!important;
  }

  .market-depth .quantity-label,
  .market-depth .order-quantity,
  .no_touch.appContent .deep-data > .flex.justify-between.text-grey > div:last-child,
  .no_touch.appContent .deep-data .font-26 > div:last-child{
    min-width:58px!important;
  }

  .market-order-form .selector-background,
  .market-order-form .input-background{
    min-height:38px!important;
  }
}

/* 实时数据不做闪烁动画 */
.market-depth .order-price,
.market-depth .order-quantity,
.market-depth .current-price,
.no_touch.appContent .deep-data *{
  transition:none!important;
}