/* =========================================================
   CoinASX V108
   市价/限价委托 Bottom Sheet
   只增强UI交互，最终选择仍触发原Vue委托类型控件
   ========================================================= */

html{
  --v108-bg:var(--v107-bg,var(--v106-bg,var(--t-bg,var(--cx-bg,#070908))));
  --v108-panel:var(--v107-panel,var(--v106-panel,var(--t-panel,var(--cx-surface,#17191d))));
  --v108-panel2:var(--v107-panel2,var(--v106-panel2,var(--t-panel2,var(--cx-surface-2,#202328))));
  --v108-border:var(--v107-border,var(--v106-border,var(--t-border,var(--cx-border,#2b2f35))));
  --v108-text:var(--v107-text,var(--v106-text,var(--t-text,var(--cx-text,#f5f6f7))));
  --v108-muted:var(--v107-muted,var(--v106-muted,var(--t-muted,var(--cx-text-3,#8b9199))));
  --v108-accent:var(--v107-accent,var(--v106-green,var(--t-green,var(--cx-green,#9fe51a))));
}

html.cx-theme-light,
html[data-theme="light"]{
  --v108-bg:#f7f8fa;
  --v108-panel:#ffffff;
  --v108-panel2:#eef1f4;
  --v108-border:#dce1e6;
  --v108-text:#12151a;
  --v108-muted:#7f8791;
  --v108-accent:#78c800;
}

html.cx-theme-dark,
html[data-theme="dark"]{
  --v108-bg:#070908;
  --v108-panel:#17191d;
  --v108-panel2:#202328;
  --v108-border:#2b2f35;
  --v108-text:#f5f6f7;
  --v108-muted:#8b9199;
  --v108-accent:#9fe51a;
}

/* ===== 原委托按钮进一步缩小 ===== */
.trade .trade-buy-sell .mt-22.mb-22.inputBackground{
  height:32px!important;
  min-height:32px!important;
  margin-top:7px!important;
  margin-bottom:7px!important;
  border-radius:7px!important;
  border:1px solid var(--v108-border)!important;
  background:var(--v108-panel2)!important;
  cursor:pointer!important;
  overflow:hidden!important;
}

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

.trade .trade-buy-sell .mt-22.mb-22.inputBackground .pl-16{
  height:30px!important;
  line-height:30px!important;
  padding-left:9px!important;
  font-size:11px!important;
  font-weight:700!important;
  color:var(--v108-text)!important;
}

.trade .trade-buy-sell .mt-22.mb-22.inputBackground img{
  width:9px!important;
  max-width:9px!important;
  padding-right:9px!important;
  opacity:.65!important;
}

/* ===== 遮罩 ===== */
.cx108-sheet-mask{
  position:fixed;
  inset:0;
  z-index:9998;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(0,0,0,.48);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease,visibility .18s ease;
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}

.cx108-sheet-mask.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* ===== Bottom Sheet ===== */
.cx108-sheet{
  width:min(520px,100%);
  box-sizing:border-box;
  padding:8px 14px calc(14px + env(safe-area-inset-bottom));
  border-ra
  background:var(--v108-panel);
  border:1px solid var(--v108-border);
  
  color:var(--v108-text);
  box-shadow:0 -16px 40px rgba(0,0,0,.18);
  transform:translateY(102%);
  transition:transform .22s cubic-bezier(.22,.8,.25,1);
}

.cx108-sheet-mask.show .cx108-sheet{
  transform:translateY(0);
}

.cx108-handle{
  width:38px;
  height:4px;
  margin:1px auto 14px;
  border-radius:5px;
  background:color-mix(in srgb,var(--v108-muted) 42%,transparent);
}

.cx108-head{
  display:flex;
  align-items:fle
  justify-content:space-between;
  gap:12px
  margin-bottom:13px;
  padding:0 2px;
}

.cx108-title{
  color:var(--v108-text);
  font-size:17px;
  line-height:23px;
  font-weight:800;
}

.cx108-sub{
  margin-top:3px;
  color:var(--v108-muted);
  font-size:11px;
  line-height:16px;
}

.cx108-close{
  width:30px;
  height:30px;
  border:1px solid var(--v108-border);
  border-radius:9px;
  background:var(--v108-panel2);
  color:var(--v108-muted);
  font-size:19px;
  line-height:26px;
  text-a
  cursor:pointer;
}

/* =====
.cx108-options{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.cx108-option{
  position:relative;
  min-height:76px;
  padding:13px 13px 11px;
  border:1px solid var
  border-radius:13px;
  background:var(--v108-panel2);
  color:var(--v108-text);
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.cx108-option.active{
  border-color:color-mix(in srgb,var(--v108-accent) 65%,var(--v108-border));
  background:color-mix(in srgb,var(--v108-accent) 10%,var(--v108-panel2));
}

.cx108-option-name{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--v108-text);
  font-size:14px;
  line-height:20px;
  font-weight:800;
}

.cx108-radio{
  width:17px;
  height:17px;
  box-sizing:border-box;
  border:1.5px solid var(--v108-muted);
  border-radius:50%;
  display:grid;
  place-items:center;
}

.cx108-option.active .cx108-radio{
  border-color:var(--v108-accent);
}

.cx108-option.active .cx108-radio:after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--v108-accent);
}

.cx108-desc{
  margin-top:7px;
  color:var(--v108-muted);
  font-size:10.5px;
  line-height:15px;
}

/* ===== 确认 ===== */
.cx108-confirm{
  width:100%;
  height:46px;
  margin-top:11px;
  border:0;
  border-radius:11px;
  background:var(--v108-accent);
  color:#0d1300;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
}

html.cx-theme-light .cx108-sheet-mask,
html[data-theme="light"] .cx108-sheet-mask{
  background:rgba(20,24,28,.28);
}

/* 主题切换 */
.cx108-sheet,
.cx108-option,
.cx108-close,
.cx108-confirm,
.trade .trade-buy-sell .mt-22.mb-22.inputBackground{
  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    transform .22s cubic-bezier(.22,.8,.25,1);
}

@media(max-width:360px){
  .cx108-sheet{
    padding-left:11px;
    padding-right:11px;
  }
  .cx108-option{
    padding-left:10px;
    padding-right:10px;
  }
  .cx108-option-name{font-size:13px}
}