/* =========================================================
   CoinASX Home V86
   最新参考图布局：
   顶部更紧凑 / 功能入口有距离 / 行情标签+卡片更像 Gate
   只改现有 DOM 的视觉与布局
   ========================================================= */

:root{
  --v86-bg:#070809;
  --v86-panel:#1a1c21;
  --v86-panel2:#202229;
  --v86-text:#f5f6f7;
  --v86-muted:#91969f;
  --v86-green:#11c89a;
  --v86-red:#ff4d6a;
  --v86-line:#25282f;
  --v86-radius:15px;
}

html,body,#app{
  background:var(--v86-bg)!important;
  color:var(--v86-text)!important;
}

.home,
.new-home,
.home.new-home{
  background:var(--v86-bg)!important;
  color:var(--v86-text)!important;
}

/* ---------- 顶部区域 ---------- */
.home .market-header,
.new-home .market-header{
  padding-top:12px!important;
  padding-bottom:10px!important;
  padding-left:16px!important;
  padding-right:16px!important;
  gap:12px!important;
  background:var(--v86-bg)!important;
}

.home .market-header .brand-logo,
.new-home .market-header .brand-logo{
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  border-radius:12px!important;
}

.home .market-search,
.new-home .market-search{
  height:42px!important;
  min-height:42px!important;
  background:#191b20!important;
  border:1px solid #24272e!important;
  border-radius:13px!important;
  padding:0 14px!important;
}

.home .header-actions,
.new-home .header-actions{
  gap:12px!important;
}

/* ---------- 首个大卡 / 资产卡 / 引导卡 ---------- */
.home .asset-card,
.new-home .asset-card,
.home .trade-card,
.new-home .trade-card,
.home [class*="hero-card"],
.new-home [class*="hero-card"]{
  margin-top:16px!important;
  background:#1a1c21!important;
  border:1px solid #23262d!important;
  border-radius:16px!important;
  padding:18px!important;
  box-shadow:none!important;
}

/* ---------- 快捷入口区域 ---------- */
.home .quick-nav,
.new-home .quick-nav,
.home .quick,
.new-home .quick,
.home .menu-list,
.new-home .menu-list,
.home .tools,
.new-home .tools{
  width:100%!important;
  max-width:720px!important;
  margin:24px auto 30px!important;
  padding:0 14px!important;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  column-gap:14px!important;
  row-gap:16px!important;
  align-items:start!important;
  justify-items:center!important;
}

.home .quick-item,
.new-home .quick-item,
.home .quick > *,
.new-home .quick > *,
.home .menu-list > *,
.new-home .menu-list > *,
.home .tools > *,
.new-home .tools > *{
  width:100%!important;
  min-width:0!important;
  min-height:82px!important;
  padding:6px 2px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:9px!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  text-align:center!important;
}

.home .quick-icon,
.new-home .quick-icon,
.home .quick-item .icon,
.new-home .quick-item .icon,
.home .quick-item > img,
.new-home .quick-item > img{
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  display:grid!important;
  place-items:center!important;
  margin:0 auto!important;
  border-radius:50%!important;
  background:#1f2127!important;
  border:1px solid #282b33!important;
  object-fit:contain!important;
}

.home .quick-icon .van-icon,
.new-home .quick-icon .van-icon{
  font-size:23px!important;
  color:#eef0f2!important;
}

.home .quick-item > span:last-child,
.new-home .quick-item > span:last-child{
  color:#d6d8dc!important;
  font-size:12px!important;
  line-height:17px!important;
  font-weight:500!important;
  white-space:nowrap!important;
  text-align:center!important;
}

/* ---------- 活动/Banner 卡 ---------- */
.home .banner-section,
.new-home .banner-section,
.home .banner,
.new-home .banner,
.home .swiper,
.new-home .swiper{
  margin-top:20px!important;
  margin-bottom:24px!important;
}

.home .banner-section .van-swipe,
.new-home .banner-section .van-swipe,
.home .banner,
.new-home .banner{
  border-radius:16px!important;
  overflow:hidden!important;
  background:#1a1c21!important;
}

/* ---------- 行情分类 ---------- */
.cx84-market-tabs{
  width:100%!important;
  margin:28px auto 20px!important;
  padding:0 2px!important;
  display:flex!important;
  align-items:flex-end!important;
  gap:24px!important;
  overflow-x:auto!important;
  white-space:nowrap!important;
  scrollbar-width:none!important;
}

.cx84-market-tabs::-webkit-scrollbar{
  display:none!important;
}

.cx84-market-tab{
  position:relative!important;
  padding:3px 0 11px!important;
  border:0!important;
  background:transparent!important;
  color:#9599a2!important;
  font-size:16px!important;
  line-height:21px!important;
  font-weight:700!important;
}

.cx84-market-tab.active{
  color:#fff!important;
}

.cx84-market-tab.active:after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:0!important;
  width:26px!important;
  height:3px!important;
  border-radius:3px!important;
  background:#fff!important;
  transform:translateX(-50%)!important;
}

/* ---------- 行情卡片 ---------- */
.home .market-cards,
.new-home .market-cards{
  width:100%!important;
  max-width:760px!important;
  margin:0 auto 28px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:14px!important;
  align-items:stretch!important;
}

.home .market-card,
.new-home .market-card{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:118px!important;
  padding:15px 16px!important;
  background:#1b1d22!important;
  border:1px solid #25282f!important;
  border-radius:15px!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

.home .market-card .card-title,
.new-home .market-card .card-title{
  gap:8px!important;
}

.home .market-card .card-title img,
.new-home .market-card .card-title img{
  width:24px!important;
  height:24px!important;
}

.home .market-card .card-title span,
.new-home .market-card .card-title span{
  color:#f2f3f4!important;
  font-size:14px!important;
  font-weight:700!important;
}

.home .market-card .card-change,
.new-home .market-card .card-change{
  margin-top:10px!important;
  font-size:13px!important;
  font-weight:700!important;
}

.home .market-card .card-price,
.new-home .market-card .card-price{
  bottom:13px!important;
  left:16px!important;
  font-size:16px!important;
  font-weight:800!important;
}

.home .market-card .spark-line,
.new-home .market-card .spark-line{
  width:62px!important;
  height:34px!important;
  right:10px!important;
  bottom:12px!important;
}

/* hidden 状态仍然给 V84 JS 控制 */
.home .market-cards > .market-card[hidden],
.new-home .market-cards > .market-card[hidden]{
  display:none!important;
}

/* ---------- 下方公告/新闻 ---------- */
.home .notice-row,
.new-home .notice-row,
.home .news,
.new-home .news,
.home .announce,
.new-home .announce{
  margin-top:20px!important;
}

/* ---------- 手机布局 ---------- */
@media(max-width:600px){
  .home .quick-nav,
  .new-home .quick-nav,
  .home .quick,
  .new-home .quick,
  .home .menu-list,
  .new-home .menu-list,
  .home .tools,
  .new-home .tools{
    max-width:390px!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    column-gap:26px!important;
    row-gap:18px!important;
    margin-top:24px!important;
    margin-bottom:34px!important;
    padding-left:20px!important;
    padding-right:20px!important;
  }

  .home .quick-item,
  .new-home .quick-item{
    min-height:86px!important;
  }

  .home .quick-icon,
  .new-home .quick-icon,
  .home .quick-item .icon,
  .new-home .quick-item .icon,
  .home .quick-item > img,
  .new-home .quick-item > img{
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
    min-height:50px!important;
  }

  .cx84-market-tabs{
    margin-top:30px!important;
    margin-bottom:22px!important;
    gap:22px!important;
  }

  .home .market-cards,
  .new-home .market-cards{
    gap:12px!important;
    margin-bottom:30px!important;
  }

  .home .market-card,
  .new-home .market-card{
    min-height:116px!important;
    padding:14px 15px!important;
  }
}

@media(max-width:360px){
  .home .quick-nav,
  .new-home .quick-nav,
  .home .quick,
  .new-home .quick{
    column-gap:16px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .home .quick-icon,
  .new-home .quick-icon{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
  }

  .cx84-market-tabs{
    gap:18px!important;
  }

  .cx84-market-tab{
    font-size:14px!important;
  }

  .home .market-cards,
  .new-home .market-cards{
    gap:9px!important;
  }

  .home .market-card,
  .new-home .market-card{
    min-height:108px!important;
    padding:12px!important;
  }
}

/*
  V86 不做：
  - 不创建功能按钮
  - 不替换 market-card
  - 不修改 click
  - 不修改 Vue / API / Router
  - 不修改悬浮底部导航结构
*/