/* =========================================================
   CoinASX V159
   企业级底部导航：首页 / 市场 / 交易 / 合约 / 资产
   ========================================================= */

:root{
  --n159-bg:#111315;
  --n159-border:#23272c;
  --n159-text:#8b9199;
  --n159-text-active:#ffffff;
  --n159-center-bg:#1769f6;
  --n159-center-ring:#111315;
  --n159-shadow:0 -1px 0 rgba(255,255,255,.025);
}

html.cx-theme-light,
html[data-theme="light"],
html[data-cx-theme="light"]{
  --n159-bg:#ffffff;
  --n159-border:#e3e7ec;
  --n159-text:#858c95;
  --n159-text-active:#111317;
  --n159-center-bg:#1769f6;
  --n159-center-ring:#ffffff;
  --n159-shadow:0 -1px 0 rgba(0,0,0,.035);
}

/* ===== 通栏贴底，不悬浮 ===== */
body #app .van-tabbar.van-tabbar--fixed,
body #app .bgFooter.van-tabbar{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;

  width:100%!important;
  max-width:none!important;
  min-width:0!important;

  height:84px!important;
  min-height:84px!important;

  margin:0!important;
  padding:
    0 max(10px,env(safe-area-inset-right))
    env(safe-area-inset-bottom)
    max(10px,env(safe-area-inset-left))!important;

  display:flex!important;
  align-items:stretch!important;
  justify-content:space-between!important;

  border:0!important;
  border-top:1px solid var(--n159-border)!important;
  border-radius:0!important;

  background:var(--n159-bg)!important;
  box-shadow:var(--n159-shadow)!important;

  transform:none!important;
  translate:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;

  z-index:999!important;
}

/* ===== 5项统一 ===== */
body #app .van-tabbar.van-tabbar--fixed > .van-tabbar-item,
body #app .bgFooter.van-tabbar > .van-tabbar-item{
  position:relative!important;
  flex:1 1 20%!important;
  width:20%!important;
  min-width:0!important;
  height:100%!important;

  margin:0!important;
  padding:12px 2px 8px!important;

  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:6px!important;

  border:0!important;
  border-radius:0!important;

  background:transparent!important;
  box-shadow:none!important;

  color:var(--n159-text)!important;
  -webkit-tap-highlight-color:transparent!important;
  overflow:visible!important;
}

/* ===== 正确顺序：首页 / 市场 / 交易 / 合约 / 资产 ===== */
body #app .van-tabbar-item:has(img[alt="home"]){order:1!important}
body #app .van-tabbar-item:has(img[alt="Quotes"]){order:2!important}
body #app .van-tabbar-item:has(img[alt="trade"]){order:3!important}
body #app .van-tabbar-item:has(img[alt="perpetualContract"]){order:4!important}
body #app .van-tabbar-item:has(img[alt="assets"]),
body #app .van-tabbar-item:has(img[alt="Assets"]){order:5!important}

/* ===== 普通导航图标：企业级统一尺寸 ===== */
body #app .van-tabbar-item .van-tabbar-item__icon{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;

  margin:0!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}

body #app .van-tabbar-item .van-tabbar-item__icon img{
  display:block!important;

  width:25px!important;
  height:25px!important;
  max-width:25px!important;
  max-height:25px!important;

  margin:0!important;
  padding:0!important;

  object-fit:contain!important;
  object-position:center!important;

  border:0!important;
  border-radius:0!important;
  background:transparent!important;

  opacity:.70!important;
  filter:saturate(.78) brightness(.94)!important;

  transition:
    transform .12s ease,
    opacity .15s ease,
    filter .15s ease!important;
}

/* 首页/市场/合约/资产：激活后更清晰 */
body #app .van-tabbar-item.van-tabbar-item--active{
  color:var(--n159-text-active)!important;
  background:transparent!important;
}

body #app .van-tabbar-item.van-tabbar-item--active .van-tabbar-item__icon img{
  opacity:1!important;
  filter:none!important;
  transform:translateY(-1px)!important;
}

/* ===== 文字 ===== */
body #app .van-tabbar-item .van-tabbar-item__text{
  margin:0!important;
  padding:0!important;

  color:inherit!important;

  font-size:12px!important;
  line-height:16px!important;
  font-weight:650!important;
  letter-spacing:.05px!important;
  white-space:nowrap!important;
}

body #app .van-tabbar-item.van-tabbar-item--active .van-tabbar-item__text{
  font-weight:760!important;
}

/* ===== 中央交易按钮 ===== */
body #app .van-tabbar-item:has(img[alt="trade"]){
  padding-top:8px!important;
  z-index:4!important;
}

body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;

  margin-top:-29px!important;
  margin-bottom:2px!important;

  border-radius:50%!important;
  border:5px solid var(--n159-center-ring)!important;
  background:var(--n159-center-bg)!important;
  box-shadow:0 4px 14px rgba(0,0,0,.18)!important;

  overflow:hidden!important;

  transition:
    transform .12s ease,
    box-shadow .16s ease!important;
}

body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon img{
  width:48px!important;
  height:48px!important;
  max-width:48px!important;
  max-height:48px!important;

  object-fit:contain!important;
  object-position:center!important;

  opacity:1!important;
  filter:none!important;
  border-radius:50%!important;
  transform:none!important;
}

/* 交易按钮永远保持清晰 */
body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__text{
  margin-top:0!important;
  color:var(--n159-text-active)!important;
  font-weight:760!important;
}

/* 点击反馈 */
body #app .van-tabbar-item:active{
  opacity:.74!important;
}

body #app .van-tabbar-item:has(img[alt="trade"]):active .van-tabbar-item__icon{
  transform:scale(.93)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.16)!important;
}

/* ===== 防止页面内容被底栏挡住 ===== */
body #app .appContent{
  padding-bottom:max(102px,calc(84px + env(safe-area-inset-bottom) + 18px))!important;
}

/* ===== 小屏 ===== */
@media(max-width:390px){
  body #app .van-tabbar.van-tabbar--fixed,
  body #app .bgFooter.van-tabbar{
    height:80px!important;
    min-height:80px!important;
    padding-left:6px!important;
    padding-right:6px!important;
  }

  body #app .van-tabbar-item{
    gap:4px!important;
    padding-top:11px!important;
  }

  body #app .van-tabbar-item .van-tabbar-item__icon{
    width:25px!important;
    height:25px!important;
    min-width:25px!important;
    min-height:25px!important;
  }

  body #app .van-tabbar-item .van-tabbar-item__icon img{
    width:23px!important;
    height:23px!important;
    max-width:23px!important;
    max-height:23px!important;
  }

  body #app .van-tabbar-item .van-tabbar-item__text{
    font-size:10.8px!important;
  }

  body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
    min-height:54px!important;
    margin-top:-27px!important;
  }

  body #app .van-tabbar-item:has(img[alt="trade"]) .van-tabbar-item__icon img{
    width:44px!important;
    height:44px!important;
    max-width:44px!important;
    max-height:44px!important;
  }

  body #app .appContent{
    padding-bottom:max(96px,calc(80px + env(safe-area-inset-bottom) + 16px))!important;
  }
}

/* ===== 大屏 ===== */
@media(min-width:600px){
  body #app .van-tabbar.van-tabbar--fixed,
  body #app .bgFooter.van-tabbar{
    width:100%!important;
    max-width:none!important;
    left:0!important;
    right:0!important;
    margin:0!important;
    border-radius:0!important;
  }
}