/* ==========================================================
   CoinASX V173
   Fullsite UI Freeze + Adaptive Theme
   只处理视觉主题 / 首屏稳定 / 移动端适配
   不修改 Vue / API / Router / WebSocket / 交易逻辑
   ========================================================== */

:root{
  --cx-bg:#000000;
  --cx-bg-soft:#08090b;
  --cx-panel:#111317;
  --cx-panel-2:#181b20;
  --cx-panel-3:#20242a;

  --cx-text:#ffffff;
  --cx-text-2:#e8ebef;
  --cx-text-3:#b7bdc6;
  --cx-sub:#8d949e;
  --cx-muted:#676e78;

  --cx-border:#262a31;
  --cx-border-soft:#1c2026;

  --cx-green:#19c98f;
  --cx-red:#f04f65;
  --cx-blue:#2f7cf6;
  --cx-yellow:#f0b90b;

  --cx-mask:rgba(0,0,0,.68);
  --cx-shadow:0 10px 28px rgba(0,0,0,.18);

  --cx-safe-top:env(safe-area-inset-top,0px);
  --cx-safe-right:env(safe-area-inset-right,0px);
  --cx-safe-bottom:env(safe-area-inset-bottom,0px);
  --cx-safe-left:env(safe-area-inset-left,0px);

  --cx-app-height:100dvh;
}

html[data-theme="light"],
html[data-cx-theme="light"],
html.cx-theme-light{
  --cx-bg:#ffffff;
  --cx-bg-soft:#f8f9fb;
  --cx-panel:#f4f5f7;
  --cx-panel-2:#eceef1;
  --cx-panel-3:#e5e8ec;

  --cx-text:#111317;
  --cx-text-2:#2a2f36;
  --cx-text-3:#505761;
  --cx-sub:#737b86;
  --cx-muted:#9aa1aa;

  --cx-border:#dfe3e8;
  --cx-border-soft:#eceff3;

  --cx-green:#0fa875;
  --cx-red:#df4358;
  --cx-blue:#1f6ff0;
  --cx-yellow:#b88900;

  --cx-mask:rgba(0,0,0,.36);
  --cx-shadow:0 8px 24px rgba(20,30,45,.06);
}

/* ===== 基础首屏固化 ===== */
html,
body,
#app{
  width:100%!important;
  min-width:320px!important;
  min-height:100%!important;
  margin:0!important;
  padding:0!important;
  background:var(--cx-bg)!important;
  color:var(--cx-text)!important;
}

html{
  color-scheme:dark;
  background:var(--cx-bg)!important;
  -webkit-text-size-adjust:100%!important;
  text-size-adjust:100%!important;
}

html[data-theme="light"],
html[data-cx-theme="light"]{
  color-scheme:light;
}

body{
  min-height:100vh!important;
  min-height:100dvh!important;
  min-height:var(--cx-app-height)!important;
  overflow-x:hidden!important;
  -webkit-font-smoothing:antialiased!important;
  text-rendering:optimizeLegibility!important;
}

/* 首次渲染期间只冻结主题色，不隐藏内容 */
html.cx-v173-booting,
html.cx-v173-booting body,
html.cx-v173-booting #app{
  background:var(--cx-bg)!important;
  color:var(--cx-text)!important;
}

/* ===== 统一文字 ===== */
.textColor,
.titleColor,
.text-white,
.font-white{
  color:var(--cx-text)!important;
}

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

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

/* ===== 全站页面 ===== */
.appContent,
.home,
.new-home,
.quotes,
.trade,
.trading-main,
.perpetualContract,
.deliveryContract,
.assetsCenter,
.userCenter,
.login,
.register,
.verify,
.forget,
.resetPassword,
.safeVerify,
.authentication{
  background:var(--cx-bg)!important;
  color:var(--cx-text)!important;
}

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

.van-nav-bar__title,
.van-nav-bar .van-icon,
.market-header *,
.contract-header *{
  color:inherit;
}

/* ===== 公告 ===== */
.notice-row{
  background:var(--cx-panel)!important;
  color:var(--cx-text)!important;
  border-color:var(--cx-border)!important;
}

.notice-row *,
.notice-row .van-icon,
.notice-row .van-swipe-item{
  color:var(--cx-text)!important;
}

/* ===== 卡片 / 面板 ===== */
.tabBackground,
.inputBoxbg,
.card,
.panel,
[class*="card-bg"],
[class*="panel-bg"],
[class*="input-bg"]{
  background:var(--cx-panel)!important;
  border-color:var(--cx-border)!important;
  color:var(--cx-text)!important;
}

/* ===== 表单 ===== */
input,
textarea,
select{
  background:transparent!important;
  color:var(--cx-text)!important;
  border-color:var(--cx-border)!important;
  caret-color:var(--cx-text)!important;
}

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

.van-field,
.van-cell,
.inputBoxbg,
[class*="input-background"],
[class*="selector-background"]{
  background:var(--cx-panel)!important;
  color:var(--cx-text)!important;
  border-color:var(--cx-border)!important;
}

/* ===== Tabs ===== */
.van-tabs,
.van-tabs__wrap,
.van-tabs__nav,
.van-tab,
.ex-tabs,
.cx101-head,
.cx101-cats,
.cx103-category-tabs{
  background:transparent!important;
}

.van-tab,
.ex-tab,
.cx101-head-tab,
.cx101-cat,
.cx103-category-tab{
  color:var(--cx-sub)!important;
}

.van-tab--active,
.ex-tab.active,
.cx101-head-tab.active,
.cx101-cat.active,
.cx103-category-tab.active{
  color:var(--cx-text)!important;
}

.van-tabs__line,
.ex-tab.active .hx{
  background:var(--cx-text)!important;
}

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

.btnMain,
.van-button--primary{
  background:var(--cx-text)!important;
  color:var(--cx-bg)!important;
  border-color:var(--cx-text)!important;
}

.bg-green,
.btn-green,
.contract-long-button{
  background:var(--cx-green)!important;
  color:#fff!important;
}

.bg-red,
.btn-red,
.contract-short-button{
  background:var(--cx-red)!important;
  color:#fff!important;
}

/* ===== Vant 弹窗 ===== */
.van-popup,
.van-dialog,
.van-action-sheet,
.van-dropdown-item__content,
.van-popover__content{
  background:var(--cx-panel)!important;
  color:var(--cx-text)!important;
  border-color:var(--cx-border)!important;
}

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

.van-action-sheet__item,
.van-action-sheet__cancel,
.van-dialog__header,
.van-dialog__content{
  background:var(--cx-panel)!important;
  color:var(--cx-text)!important;
  border-color:var(--cx-border-soft)!important;
}

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

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

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

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

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

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

/* ===== 登录 ===== */
.login.appContent{
  background:var(--cx-bg)!important;
  color:var(--cx-text)!important;
}

/* ===== 用户中心 ===== */
.userCenter.appContent{
  background:var(--cx-bg)!important;
  color:var(--cx-text)!important;
}

/* ===== 底部导航 ===== */
body #app .van-tabbar.van-tabbar--fixed,
body #app .bgFooter.van-tabbar{
  background:var(--cx-panel)!important;
  border-top:1px solid var(--cx-border)!important;
  color:var(--cx-sub)!important;
  padding-bottom:var(--cx-safe-bottom)!important;
}

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

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

/* ===== 安全区 ===== */
.appContent{
  padding-left:max(0px,var(--cx-safe-left))!important;
  padding-right:max(0px,var(--cx-safe-right))!important;
}

.van-popup--bottom,
.van-action-sheet{
  padding-bottom:var(--cx-safe-bottom)!important;
}

.van-popup--top{
  padding-top:var(--cx-safe-top)!important;
}

/* ===== 防止字体/数字抖动 ===== */
.asset-value,
.quote-price,
.current-price,
.order-price,
.order-quantity,
.text-right{
  font-variant-numeric:tabular-nums!important;
}

/* ===== 图片防撑破 ===== */
img,
svg,
canvas{
  max-width:100%;
}

/* ===== 动态高度 ===== */
#app,
.appContent{
  min-height:var(--cx-app-height)!important;
}

/* ===== iOS 输入聚焦避免放大 ===== */
@supports (-webkit-touch-callout:none){
  input,
  textarea,
  select{
    font-size:max(16px,1em)!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}
}

/* ===== 横屏 ===== */
@media(orientation:landscape) and (max-height:520px){
  body #app .van-tabbar.van-tabbar--fixed,
  body #app .bgFooter.van-tabbar{
    min-height:64px!important;
  }
}

/* ===== 主题切换动画：只对关键容器，避免全站动画抖动 ===== */
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 .16s ease,
    color .16s ease,
    border-color .16s ease!important;
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    transition:none!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}