/* =========================================================
   CoinASX V127 - Perpetual Contract UI ONLY
   目标：
   - 不生成按钮，不复制DOM，不接管点击
   - 仅对原 perpetualContract DOM 做企业级交易所视觉重排
   - 深色：纯黑 / 大字白 / 小字灰白
   - 浅色：白 / 浅灰 / 黑字
   ========================================================= */

html{
  --pc-bg:#000000;
  --pc-panel:#0b0c0e;
  --pc-panel2:#15171b;
  --pc-panel3:#1d2025;
  --pc-border:#292d33;

  --pc-title:#ffffff;
  --pc-body:#f0f1f2;
  --pc-small:#a6abb3;
  --pc-muted:#6f747c;

  --pc-green:#9ee51d;
  --pc-green-order:#16c784;
  --pc-red:#ff4862;

  --pc-green-depth:rgba(158,229,29,.10);
  --pc-red-depth:rgba(255,72,98,.10);
}

/* 浅色主题 */
html.cx-theme-light,
html[data-theme="light"],
html[data-cx-theme="light"]{
  --pc-bg:#ffffff;
  --pc-panel:#ffffff;
  --pc-panel2:#f3f4f6;
  --pc-panel3:#e9ebee;
  --pc-border:#dfe2e6;

  --pc-title:#101216;
  --pc-body:#2e3238;
  --pc-small:#747b84;
  --pc-muted:#9ba1a9;

  --pc-green:#85cf12;
  --pc-green-order:#0fa772;
  --pc-red:#df4155;

  --pc-green-depth:rgba(15,167,114,.07);
  --pc-red-depth:rgba(223,65,85,.07);
}

/* ---------------- 页面主背景 ---------------- */
body:has(.perpetual-open),
.no_touch.appContent,
.no_touch.appContent .mainBackground,
.no_touch.appContent .perpetual-open{
  background:var(--pc-bg)!important;
  color:var(--pc-body)!important;
}

/* ---------------- 顶部 BTC/USDT ---------------- */
.no_touch.appContent .contract-header{
  background:var(--pc-bg)!important;
  border-bottom:1px solid var(--pc-border)!important;
}

.no_touch.appContent .contract-header .pl-30.pr-30{
  padding-left:15px!important;
  padding-right:15px!important;
}

.no_touch.appContent .contract-header .pt-45{
  min-height:66px!important;
  padding-top:15px!important;
  padding-bottom:10px!important;
}

.no_touch.appContent .contract-header .font-35{
  color:var(--pc-title)!important;
  font-size:19px!important;
  line-height:24px!important;
  font-weight:850!important;
}

.no_touch.appContent .contract-header .ml-15{
  margin-left:7px!important;
  color:var(--pc-small)!important;
  font-size:10px!important;
  padding:3px 6px!important;
  border-radius:5px!important;
  background:var(--pc-panel2)!important;
}

.no_touch.appContent .contract-header .w-160{
  width:auto!important;
  min-width:62px!important;
  padding-left:9px!important;
  font-size:12px!important;
  font-weight:700!important;
}

.no_touch.appContent .contract-header img[alt="convert-img"]{
  width:26px!important;
  height:26px!important;
}

.no_touch.appContent .contract-header img[alt="line-img"]{
  width:24px!important;
  height:24px!important;
}

/* ---------------- 合约顶部导航 ---------------- */
.cx125-contract-nav{
  height:39px!important;
  min-height:39px!important;
  padding:4px 14px!important;
  gap:4px!important;
  justify-content:flex-start!important;
  background:var(--pc-bg)!important;
  border-bottom:1px solid var(--pc-border)!important;
  overflow-x:auto!important;
  white-space:nowrap!important;
  scrollbar-width:none!important;
}
.cx125-contract-nav::-webkit-scrollbar{display:none!important}

.cx125-contract-nav-btn{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:0!important;
  height:29px!important;
  padding:0 8px!important;
  border:1px solid transparent!important;
  border-radius:7px!important;
  background:transparent!important;
  color:var(--pc-small)!important;
  font-size:11px!important;
  line-height:27px!important;
  font-weight:650!important;
}
.cx125-contract-nav-btn.active{
  color:var(--pc-title)!important;
  background:var(--pc-panel2)!important;
  border-color:var(--pc-border)!important;
}

/* ---------------- 整个下单区 ---------------- */
.no_touch.appContent .perpetual-open{
  padding-left:14px!important;
  padding-right:14px!important;
}

.no_touch.appContent .perpetual-open .header-open{
  align-items:center!important;
  justify-content:space-between!important;
  min-height:50px!important;
}

.no_touch.appContent .perpetual-open .header-open > .flex-1{
  padding-top:10px!important;
  gap:7px!important;
}

/* 全仓 / 杠杆 */
.no_touch.appContent .perpetual-open .header-open .w-180.h-60,
.no_touch.appContent .perpetual-open .header-open .w-140.h-60{
  width:auto!important;
  min-width:74px!important;
  height:34px!important;
  line-height:32px!important;
  margin-left:0!important;
  border:1px solid var(--pc-border)!important;
  border-radius:8px!important;
  background:var(--pc-panel2)!important;
  color:var(--pc-title)!important;
  font-size:12px!important;
  font-weight:750!important;
}

.no_touch.appContent .perpetual-open .header-open .w-140.h-60{
  min-width:68px!important;
}

.no_touch.appContent .perpetual-open .header-open .select-wrap{
  width:auto!important;
  min-width:68px!important;
  height:32px!important;
  padding:0 9px!important;
  font-size:12px!important;
}

/* ---------------- 左右交易双栏 ---------------- */
.no_touch.appContent .perpetual-open > .pt-30.pb-20{
  padding-top:8px!important;
  padding-bottom:10px!important;
}

.no_touch.appContent .perpetual-open > .pt-30.pb-20 > .flex{
  display:grid!important;
  grid-template-columns:minmax(0,1.45fr) minmax(124px,.88fr)!important;
  gap:12px!important;
  align-items:start!important;
}

.no_touch.appContent .perpetual-open .w-440{
  width:100%!important;
  min-width:0!important;
}

/* ---------------- 开多 / 开空 ---------------- */
.no_touch.appContent .perpetual-open .w-440 > .flex.items-center.h-66{
  height:42px!important;
  min-height:42px!important;
  padding:2px!important;
  border:1px solid var(--pc-border)!important;
  border-radius:9px!important;
  background:var(--pc-panel2)!important;
  overflow:hidden!important;
}

.no_touch.appContent .perpetual-open .w-440 > .flex.items-center.h-66 p{
  height:36px!important;
  min-height:36px!important;
  line-height:36px!important;
  border-radius:7px!important;
  color:var(--pc-small)!important;
  font-size:13px!important;
  font-weight:750!important;
}

.no_touch.appContent .perpetual-open .w-440 > .flex.items-center.h-66 p.long{
  color:#111!important;
  background:var(--pc-green)!important;
}

/* 如果原组件把另一项设为 long，也自动保持选中态 */
.no_touch.appContent .perpetual-open .w-440 > .flex.items-center.h-66 p.long:nth-child(2){
  color:#fff!important;
  background:var(--pc-red)!important;
}

/* ---------------- 市价 / 限价 ---------------- */
.no_touch.appContent .cx126-market-control.inputBackground{
  height:38px!important;
  min-height:38px!important;
  margin:8px 0 8px!important;
  border:1px solid var(--pc-border)!important;
  border-radius:8px!important;
  background:var(--pc-panel2)!important;
  color:var(--pc-title)!important;
  box-shadow:none!important;
}

.no_touch.appContent .cx126-market-control.inputBackground img{
  width:13px!important;
  height:auto!important;
}

.no_touch.appContent .option-box{
  border:1px solid var(--pc-border)!important;
  border-radius:9px!important;
  overflow:hidden!important;
  background:var(--pc-panel)!important;
  box-shadow:0 12px 30px rgba(0,0,0,.18)!important;
}

.no_touch.appContent .option-box > div{
  min-height:38px!important;
  line-height:38px!important;
  padding:0 12px!important;
  color:var(--pc-body)!important;
  background:var(--pc-panel)!important;
  font-size:12px!important;
}

/* ---------------- 输入框统一 ---------------- */
.no_touch.appContent .perpetual-open .h-76.inputBackground,
.no_touch.appContent .perpetual-open .w-440.inputBackground.h-76{
  height:46px!important;
  min-height:46px!important;
  line-height:44px!important;
  margin-bottom:8px!important;
  padding-right:10px!important;
  border:1px solid var(--pc-border)!important;
  border-radius:9px!important;
  background:var(--pc-panel2)!important;
  color:var(--pc-title)!important;
  box-shadow:none!important;
}

.no_touch.appContent .perpetual-open input{
  height:44px!important;
  background:transparent!important;
  color:var(--pc-title)!important;
  border:0!important;
  outline:0!important;
  font-size:13px!important;
}

.no_touch.appContent .perpetual-open input::placeholder{
  color:var(--pc-muted)!important;
}

.no_touch.appContent .cx126-unit-price{
  display:block!important;
  margin:-1px 0 7px!important;
  color:var(--pc-small)!important;
  font-size:10.5px!important;
}

.no_touch.appContent .cx126-unit-price b{
  color:var(--pc-title)!important;
}

/* 止盈/止损 */
.no_touch.appContent .cx126-tpsl-row{
  color:var(--pc-title)!important;
}

.no_touch.appContent .h-76.inputBackground .font-22{
  color:var(--pc-small)!important;
  font-size:10.5px!important;
}

/* 张数 +/- */
.no_touch.appContent .perpetual-open .w-440.inputBackground.h-76 > .w-80{
  width:38px!important;
}

.no_touch.appContent .perpetual-open .w-440.inputBackground.h-76 img[alt="add"]{
  width:14px!important;
  height:auto!important;
}

.no_touch.appContent .perpetual-open .w-440.inputBackground.h-76 img[alt="reduce"]{
  width:17px!important;
  height:17px!important;
}

/* ---------------- 可开张数 / 百分比 ---------------- */
.no_touch.appContent .perpetual-open .mt-40.mb-30{
  margin-top:10px!important;
  margin-bottom:10px!important;
}

.no_touch.appContent .amount-slider{
  margin-top:2px!important;
}

.no_touch.appContent .vue-slider-rail{
  background:var(--pc-border)!important;
}

.no_touch.appContent .vue-slider-process{
  background:var(--pc-title)!important;
}

.no_touch.appContent .custom-step{
  background:var(--pc-border)!important;
  border-color:var(--pc-border)!important;
}

.no_touch.appContent .custom-step.active,
.no_touch.appContent .vue-slider-dot-handle{
  background:var(--pc-title)!important;
  border-color:var(--pc-title)!important;
}

.no_touch.appContent .poecs{
  color:var(--pc-small)!important;
  font-size:9.5px!important;
}

/* ---------------- 登录/下单区域 ---------------- */
.no_touch.appContent .perpetual-open .w-full.mt-120{
  margin-top:18px!important;
}

.no_touch.appContent .perpetual-open .w-full.mt-120 .textColor{
  color:var(--pc-small)!important;
  font-size:11px!important;
}

.no_touch.appContent .perpetual-open .btnBackground{
  min-height:49px!important;
  height:49px!important;
  line-height:49px!important;
  margin-top:12px!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--pc-green)!important;
  color:#101400!important;
  font-size:14px!important;
  font-weight:850!important;
}

/* 如果登录后原DOM渲染买入/卖出按钮，则只换视觉，不改事件 */
.no_touch.appContent .perpetual-open .bg-green,
.no_touch.appContent .perpetual-open [class*="buy"][class*="green"]{
  background:var(--pc-green)!important;
  color:#101400!important;
}

.no_touch.appContent .perpetual-open .bg-red,
.no_touch.appContent .perpetual-open [class*="sell"][class*="red"]{
  background:var(--pc-red)!important;
  color:#fff!important;
}

/* ---------------- 右侧盘口 ---------------- */
.no_touch.appContent .perpetual-open > .pt-30.pb-20 > .flex > .ml-30{
  margin-left:0!important;
  min-width:0!important;
  padding-left:10px!important;
  border-left:1px solid var(--pc-border)!important;
}

.no_touch.appContent .deep-data{
  min-width:0!important;
  background:var(--pc-bg)!important;
  color:var(--pc-body)!important;
}

.no_touch.appContent .deep-data > .flex.justify-between.text-grey{
  color:var(--pc-muted)!important;
  font-size:10px!important;
}

.no_touch.appContent .deep-data .font-26{
  min-height:23px!important;
  padding-top:3px!important;
  padding-bottom:3px!important;
  font-size:10.5px!important;
}

.no_touch.appContent .deep-data .text-green{
  color:var(--pc-green-order)!important;
}

.no_touch.appContent .deep-data .text-red{
  color:var(--pc-red)!important;
}

.no_touch.appContent .deep-data .textColor{
  color:var(--pc-small)!important;
}

.no_touch.appContent .deep-data .font-34{
  margin-top:6px!important;
  padding-top:6px!important;
  color:var(--pc-green)!important;
  font-size:17px!important;
  line-height:22px!important;
  font-weight:850!important;
}

.no_touch.appContent .deep-data .approximately-text{
  color:var(--pc-muted)!important;
  font-size:9.5px!important;
}

/* 覆盖原盘口深度底色，同时保留每一行原实时数据 */
.no_touch.appContent .deep-data .font-26[style*="rgba(94, 186, 137"],
.no_touch.appContent .deep-data .font-26[style*="rgba(94,186,137"]{
  background:linear-gradient(to left,var(--pc-green-depth),transparent 72%)!important;
}

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

/* ---------------- 持仓 / 当前委托 / 机器人 ---------------- */
.no_touch.appContent [class*="position"],
.no_touch.appContent [class*="entrust"],
.no_touch.appContent [class*="order"]{
  border-color:var(--pc-border)!important;
}

.no_touch.appContent .cx126-position-tabs,
.no_touch.appContent .cx126-position-panel{
  background:var(--pc-bg)!important;
  color:var(--pc-body)!important;
  border-color:var(--pc-border)!important;
}

/* ---------------- K线折叠栏 ---------------- */
.no_touch.appContent .tabBackground1,
.no_touch.appContent [class*="chart"]{
  border-color:var(--pc-border)!important;
}

.no_touch.appContent .tabBackground1{
  background:var(--pc-bg)!important;
  color:var(--pc-title)!important;
}

/* ---------------- 通用主题文字 ---------------- */
.no_touch.appContent .textColor{
  color:var(--pc-title)!important;
}

.no_touch.appContent .text-grey,
.no_touch.appContent .textColor2{
  color:var(--pc-small)!important;
}

.no_touch.appContent .inputBackground{
  background-color:var(--pc-panel2)!important;
}

/* ---------------- 实时数字不闪 ---------------- */
.no_touch.appContent .deep-data *,
.no_touch.appContent .deep-data .font-26,
.no_touch.appContent .deep-data .font-34{
  animation:none!important;
  transform:none!important;
  opacity:1!important;
  transition:none!important;
}

/* 主题切换只对静态UI做短过渡 */
.no_touch.appContent .contract-header,
.no_touch.appContent .perpetual-open,
.no_touch.appContent .inputBackground,
.no_touch.appContent .cx125-contract-nav,
.no_touch.appContent .cx125-contract-nav-btn{
  transition:
    background-color .14s ease,
    color .14s ease,
    border-color .14s ease!important;
}

/* ---------------- 390px以下 ---------------- */
@media(max-width:390px){
  .no_touch.appContent .perpetual-open{
    padding-left:11px!important;
    padding-right:11px!important;
  }

  .no_touch.appContent .perpetual-open > .pt-30.pb-20 > .flex{
    grid-template-columns:minmax(0,1.48fr) minmax(108px,.82fr)!important;
    gap:9px!important;
  }

  .no_touch.appContent .perpetual-open > .pt-30.pb-20 > .flex > .ml-30{
    padding-left:7px!important;
  }

  .no_touch.appContent .deep-data .font-26{
    font-size:9.5px!important;
  }

  .cx125-contract-nav{
    padding-left:10px!important;
    padding-right:10px!important;
    gap:3px!important;
  }

  .cx125-contract-nav-btn{
    padding:0 6px!important;
    font-size:10.5px!important;
  }
}