/* =========================================================
   CoinASX V156 - Fullsite OKX-like Adaptive Theme
   目标：企业级交易所视觉、全站深浅主题自适应
   不改业务 DOM，不重绑按钮，不接管 Vue
   ========================================================= */

:root{
  --okx-bg:#000000;
  --okx-bg-2:#08090b;
  --okx-surface:#111317;
  --okx-surface-2:#181b20;
  --okx-surface-3:#20242a;
  --okx-border:#262a31;
  --okx-border-soft:#1c2026;
  --okx-text:#ffffff;
  --okx-text-2:#e8ebef;
  --okx-sub:#8b929d;
  --okx-muted:#646b75;
  --okx-green:#18c991;
  --okx-red:#f04f65;
  --okx-blue:#2f7cf6;
  --okx-mask:rgba(0,0,0,.62);
  --okx-radius:10px;
  --okx-shadow:0 10px 28px rgba(0,0,0,.20);
  --okx-tab:#ffffff;
}

html.cx-theme-light,
html[data-theme="light"],
html[data-cx-theme="light"]{
  --okx-bg:#ffffff;
  --okx-bg-2:#f8f9fb;
  --okx-surface:#f4f5f7;
  --okx-surface-2:#eceef1;
  --okx-surface-3:#e5e8ec;
  --okx-border:#dfe3e8;
  --okx-border-soft:#eceff3;
  --okx-text:#101317;
  --okx-text-2:#2a2f36;
  --okx-sub:#737b86;
  --okx-muted:#9aa1aa;
  --okx-green:#0fa875;
  --okx-red:#df4358;
  --okx-blue:#1f6ff0;
  --okx-mask:rgba(0,0,0,.36);
  --okx-shadow:0 8px 24px rgba(18,28,45,.06);
  --okx-tab:#111317;
}

/* ===== 全局 ===== */
html,body,#app,
.appContent,
.w-full.h-full{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
}

body{
  margin:0!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}

*{
  box-sizing:border-box;
}

.textColor,
.titleColor,
.text-white,
.font-white{
  color:var(--okx-text)!important;
}

.textColor2{
  color:var(--okx-text-2)!important;
}

.text-grey,
.text-gray,
.textGray,
.font-grey{
  color:var(--okx-sub)!important;
}

.bgMain,
.bgColor,
.bgPage,
.bg-body,
.appContent{
  background:var(--okx-bg)!important;
}

.tabBackground,
.inputBoxbg,
.input-bg,
.card-bg,
.panel-bg,
.bgFooter,
.bgGrey,
.bg-gray{
  background:var(--okx-surface)!important;
}

/* ===== 输入框 / 下拉 / 表单 ===== */
input,
textarea,
select,
.van-field,
.van-cell,
.inputBoxbg,
[class*="input-background"],
[class*="selector-background"]{
  color:var(--okx-text)!important;
  border-color:var(--okx-border)!important;
}

input,
textarea,
select{
  background:transparent!important;
}

input::placeholder,
textarea::placeholder{
  color:var(--okx-muted)!important;
}

.van-field,
.inputBoxbg,
[class*="input-background"],
[class*="selector-background"]{
  background:var(--okx-surface)!important;
  border-radius:9px!important;
}

/* ===== 按钮 ===== */
button,
.btn,
.van-button{
  border-radius:9px!important;
  box-shadow:none!important;
  -webkit-tap-highlight-color:transparent!important;
}

.btnMain,
.van-button--primary,
[class*="primary-button"]{
  background:var(--okx-text)!important;
  color:var(--okx-bg)!important;
  border-color:var(--okx-text)!important;
  font-weight:800!important;
}

.bg-green,
.btn-green,
.contract-long-button,
[class*="long-button"]{
  background:var(--okx-green)!important;
  color:#fff!important;
}

.bg-red,
.btn-red,
.contract-short-button,
[class*="short-button"]{
  background:var(--okx-red)!important;
  color:#fff!important;
}

/* ===== Vant 弹窗/底部弹层/菜单 ===== */
.van-popup,
.van-action-sheet,
.van-dialog,
.van-popover__content,
.van-dropdown-menu__bar,
.van-dropdown-item__content{
  background:var(--okx-surface)!important;
  color:var(--okx-text)!important;
  border-color:var(--okx-border)!important;
}

.van-overlay{
  background:var(--okx-mask)!important;
}

.van-action-sheet__item,
.van-action-sheet__cancel,
.van-cell{
  background:var(--okx-surface)!important;
  color:var(--okx-text)!important;
  border-color:var(--okx-border-soft)!important;
}

.van-dialog__header,
.van-action-sheet__header{
  color:var(--okx-text)!important;
}

/* ===== Tab ===== */
.van-tabs,
.van-tabs__wrap,
.van-tabs__nav,
.van-tab,
.ex-tabs,
[class*="tabs"]{
  background:transparent!important;
  color:var(--okx-sub)!important;
}

.van-tab--active,
.van-tab__text--active,
.ex-tab.active,
[class*="tab"].active{
  color:var(--okx-text)!important;
  font-weight:800!important;
}

.van-tabs__line,
.hx,
.active_color{
  background:var(--okx-tab)!important;
}

/* ===== 顶部栏 ===== */
.van-nav-bar,
.market-header,
.contract-header,
[class*="header"]{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
  border-color:var(--okx-border-soft)!important;
}

.van-nav-bar__title,
.van-nav-bar .van-icon,
.header-action{
  color:var(--okx-text)!important;
}

/* ===== 底部导航 ===== */
.van-tabbar,
.bgFooter,
[class*="bottom-nav"]{
  background:color-mix(in srgb,var(--okx-surface) 96%,transparent)!important;
  border-top:1px solid var(--okx-border)!important;
  box-shadow:0 -8px 26px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}

.van-tabbar-item{
  background:transparent!important;
  color:var(--okx-sub)!important;
}

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

/* ===== 行情页 ===== */
.quotes,
.quotesQuatation,
.list-quatation,
.van-list{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
}

.quotes .van-cell,
.quotesQuatation .van-cell{
  background:var(--okx-bg)!important;
  border-color:var(--okx-border-soft)!important;
}

.quotesQuatation ul{
  border-color:var(--okx-border-soft)!important;
}

.quotesQuatation .left img{
  border:1px solid var(--okx-border)!important;
  background:var(--okx-surface)!important;
}

.quotesQuatation .right .btn{
  border-radius:7px!important;
  min-width:72px!important;
}

.cx101-head,
.cx101-picker,
.cx101-cats,
.cx103-category-tabs{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
}

.cx101-pick,
.cx101-add,
.cx103-category-tab{
  border-color:var(--okx-border)!important;
  background:var(--okx-surface)!important;
  color:var(--okx-text)!important;
}

/* ===== 资产页 ===== */
.assetsCenter,
.assetsCenter .box-border{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
}

.assetsCenter .assets-list{
  background:transparent!important;
  border-color:var(--okx-border-soft)!important;
}

.assetsCenter .btn-box,
.assetsCenter .total_wrap{
  background:transparent!important;
  box-shadow:none!important;
}

.assetsCenter .word-wrap img,
.assetsCenter .right-clock{
  background:var(--okx-surface)!important;
  border-color:var(--okx-border)!important;
}

/* ===== 登录 / 注册 / 安全验证 ===== */
.login,
.register,
.verify,
.forget,
.resetPassword,
.safeVerify,
.authentication{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
}

.login .login-input,
.login .cx149-social-btn,
.register .inputBoxbg,
.verify .inputBoxbg,
[class*="login"] [class*="input"]{
  background:var(--okx-surface)!important;
  border-color:var(--okx-border)!important;
  color:var(--okx-text)!important;
}

/* ===== 合约 / 现货 / 交割合约 ===== */
.no_touch.appContent,
.perpetualContract,
.deliveryContract,
.trade,
.trading-main{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
}

.market-depth,
.deep-data,
.market-order-form{
  background:var(--okx-bg)!important;
  color:var(--okx-text)!important;
}

.market-depth .order-quantity,
.deep-data .font-26 > div:last-child{
  color:var(--okx-text-2)!important;
}

.market-depth .sell-orders .order-price,
.deep-data .text-red{
  color:var(--okx-red)!important;
}

.market-depth .buy-orders .order-price,
.deep-data .text-green{
  color:var(--okx-green)!important;
}

/* ===== 卡片统一 ===== */
[class*="card"]:not(.asset-card),
[class*="panel"],
[class*="box"]:not(.inputBoxbg):not(.filter-box){
  border-color:var(--okx-border)!important;
}

/* ===== 分割线 ===== */
.van-hairline--top:after,
.van-hairline--bottom:after,
.van-hairline--top-bottom:after,
[class*="border"],
[class*="broder"]{
  border-color:var(--okx-border-soft)!important;
}

/* ===== 细节：数字 ===== */
.asset-value,
.quote-price,
.current-price,
.order-price,
.order-quantity,
.text-right,
.font-600,
.font-700{
  font-variant-numeric:tabular-nums!important;
}

/* ===== 图片 / 图标 ===== */
img{
  image-rendering:auto;
}

.svg-icon,
.van-icon{
  color:inherit!important;
}

/* ===== 主题切换过渡 ===== */
html.cx-theme-transition,
html.cx-theme-transition body,
html.cx-theme-transition #app,
html.cx-theme-transition .appContent,
html.cx-theme-transition .van-popup,
html.cx-theme-transition .van-tabbar,
html.cx-theme-transition .van-nav-bar,
html.cx-theme-transition .van-cell,
html.cx-theme-transition .inputBoxbg{
  transition:
    background-color .18s ease,
    color .18s ease,
    border-color .18s ease!important;
}

/* ===== 响应式 ===== */
@media(max-width:390px){
  .appContent{
    width:100%!important;
    max-width:100%!important;
  }

  .px-32{padding-left:14px!important;padding-right:14px!important}
  .pl-30{padding-left:14px!important}
  .pr-30{padding-right:14px!important}

  .van-button,
  .btn{
    min-height:40px!important;
  }

  input,
  .inputBoxbg{
    min-height:40px!important;
  }
}

@media(min-width:600px){
  .appContent{
    max-width:760px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media(min-width:900px){
  .appContent{
    max-width:920px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
}