/* =========================================================
   CoinASX Home V82
   Gate-inspired dark mobile exchange UI
   IMPORTANT:
   - 原 Vue DOM
   - 原 quick-item
   - 原 onclick / @click
   - 原 API / 行情 / Router
   - 不生成覆盖按钮
   ========================================================= */

:root{
  --g82-bg:#0b0c0e;
  --g82-bg2:#101114;
  --g82-card:#15171b;
  --g82-card-hover:#1a1c21;
  --g82-line:#23262c;
  --g82-text:#f4f5f6;
  --g82-text2:#b1b5bd;
  --g82-muted:#737983;
  --g82-green:#17c99a;
  --g82-red:#f45b69;
  --g82-accent:#18c7a1;
  --g82-radius:14px;
}

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

.home.new-home,
.home,
.new-home{
  width:100%!important;
  min-height:100vh!important;
  background:
    radial-gradient(circle at 85% -10%,rgba(23,201,154,.06),transparent 27%),
    var(--g82-bg)!important;
  color:var(--g82-text)!important;
  overflow-x:hidden!important;
  padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
}

/* ---------- 顶部 Header ---------- */
.home .market-header,
.new-home .market-header{
  position:relative!important;
  z-index:5!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:11px!important;
  width:100%!important;
  min-height:66px!important;
  padding:12px 16px 10px!important;
  background:rgba(11,12,14,.96)!important;
  border-bottom:1px solid rgba(255,255,255,.025)!important;
  box-shadow:none!important;
}

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

.home .market-search,
.new-home .market-search{
  height:40px!important;
  min-width:0!important;
  padding:0 13px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  background:#17191d!important;
  border:1px solid #202329!important;
  border-radius:12px!important;
  color:#747a84!important;
  box-shadow:none!important;
}

.home .market-search .van-icon,
.new-home .market-search .van-icon{
  font-size:18px!important;
  color:#8c929c!important;
}

.home .market-search span,
.new-home .market-search span{
  font-size:13px!important;
  color:#747a84!important;
}

.home .header-actions,
.new-home .header-actions{
  display:flex!important;
  align-items:center!important;
  gap:13px!important;
}

.home .header-action,
.new-home .header-action{
  width:24px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  color:#e9eaec!important;
  font-size:21px!important;
}

/* ---------- Banner ---------- */
.home .banner-section,
.new-home .banner-section{
  display:block!important;
  margin:4px 0 0!important;
  padding:0 16px!important;
  background:transparent!important;
}

.home .banner-section .ioe-swiper,
.new-home .banner-section .ioe-swiper{
  height:clamp(128px,34vw,176px)!important;
  border-radius:16px!important;
  overflow:hidden!important;
}

.home .banner-section .van-swipe,
.new-home .banner-section .van-swipe{
  height:100%!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:var(--g82-card)!important;
}

.home .banner-section .van-swipe-item,
.new-home .banner-section .van-swipe-item{
  height:100%!important;
}

.home .banner-section .bannerimg,
.new-home .banner-section .bannerimg{
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:16px!important;
  object-fit:cover!important;
}

/* ---------- 公告 ---------- */
.home .notice-row,
.new-home .notice-row{
  display:grid!important;
  grid-template-columns:22px minmax(0,1fr) 22px!important;
  align-items:center!important;
  gap:9px!important;
  height:44px!important;
  margin:12px 16px 0!important;
  padding:0 12px!important;
  background:#121417!important;
  border:1px solid #1e2126!important;
  border-radius:11px!important;
  color:var(--g82-text2)!important;
}

.home .notice-row > .van-icon,
.new-home .notice-row > .van-icon{
  font-size:17px!important;
  color:#9ba0aa!important;
}

.home .notice-carousel,
.new-home .notice-carousel{
  height:28px!important;
  font-size:12px!important;
  line-height:28px!important;
  overflow:hidden!important;
}

/* ---------- 主内容 ---------- */
.home > main.home-section,
.new-home > main.home-section{
  display:block!important;
  padding:0 16px!important;
  background:transparent!important;
}

/* ---------- 资产卡 ---------- */
.home .asset-card,
.new-home .asset-card{
  position:relative!important;
  margin-top:14px!important;
  min-height:116px!important;
  padding:18px!important;
  background:
    linear-gradient(145deg,#181a1f 0%,#121417 100%)!important;
  border:1px solid #24272d!important;
  border-radius:16px!important;
  box-shadow:0 10px 28px rgba(0,0,0,.12)!important;
}

.home .asset-label,
.new-home .asset-label{
  color:#90959e!important;
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:.1px!important;
}

.home .asset-value,
.new-home .asset-value{
  margin-top:10px!important;
  color:#f7f8f9!important;
  font-size:31px!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:-.5px!important;
  font-variant-numeric:tabular-nums!important;
}

.home .asset-eye,
.new-home .asset-eye{
  position:absolute!important;
  right:17px!important;
  top:18px!important;
  color:#8a9099!important;
  font-size:19px!important;
}

/* ---------- 快捷功能：保留原 quick-item 点击 ---------- */
.home .quick-nav,
.new-home .quick-nav{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  margin:14px 0 0!important;
  padding:4px 0 8px!important;
}

.home .quick-item,
.new-home .quick-item{
  min-width:0!important;
  min-height:74px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  padding:8px 2px!important;
  background:transparent!important;
  border:0!important;
  border-radius:12px!important;
  color:#d9dce1!important;
  -webkit-tap-highlight-color:transparent!important;
}

.home .quick-item:active,
.new-home .quick-item:active{
  background:#15171b!important;
  transform:scale(.97)!important;
}

.home .quick-icon,
.new-home .quick-icon{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  background:#17191d!important;
  border:1px solid #23262c!important;
  border-radius:12px!important;
}

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

.home .quick-item > span:last-child,
.new-home .quick-item > span:last-child{
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:11px!important;
  line-height:16px!important;
  color:#bfc3ca!important;
}

/* ---------- 顶部行情卡 ---------- */
.home .market-cards,
.new-home .market-cards{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  margin-top:10px!important;
}

.home .market-card,
.new-home .market-card{
  min-width:0!important;
  min-height:110px!important;
  position:relative!important;
  padding:12px!important;
  background:#14161a!important;
  border:1px solid #202329!important;
  border-radius:13px!important;
  overflow:hidden!important;
  box-shadow:none!important;
}

.home .market-card .card-title,
.new-home .market-card .card-title{
  display:flex!important;
  align-items:center!important;
  gap:7px!important;
  min-width:0!important;
}

.home .market-card .card-title img,
.new-home .market-card .card-title img{
  width:22px!important;
  height:22px!important;
  border-radius:50%!important;
  object-fit:cover!important;
}

.home .market-card .card-title span,
.new-home .market-card .card-title span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#e9eaec!important;
  font-size:12px!important;
  font-weight:650!important;
}

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

.home .market-card .card-price,
.new-home .market-card .card-price{
  position:absolute!important;
  left:12px!important;
  bottom:11px!important;
  color:#f5f6f7!important;
  font-size:15px!important;
  line-height:18px!important;
  font-weight:750!important;
  font-variant-numeric:tabular-nums!important;
}

.home .market-card .spark-line,
.new-home .market-card .spark-line{
  position:absolute!important;
  right:8px!important;
  bottom:9px!important;
  width:58px!important;
  height:31px!important;
}

.home .up,
.new-home .up,
.home .text-green,
.new-home .text-green{
  color:var(--g82-green)!important;
  stroke:var(--g82-green)!important;
}

.home .down,
.new-home .down,
.home .text-red,
.new-home .text-red{
  color:var(--g82-red)!important;
  stroke:var(--g82-red)!important;
}

/* ---------- 下面所有原始 section 做 Gate 风格统一 ---------- */
.home main.home-section > section:not(.asset-card):not(.market-cards),
.new-home main.home-section > section:not(.asset-card):not(.market-cards){
  margin-top:14px!important;
  background:transparent!important;
  border:0!important;
}

.home .section-title,
.new-home .section-title,
.home [class*="title-row"],
.new-home [class*="title-row"]{
  color:#f1f2f4!important;
  font-size:17px!important;
  font-weight:750!important;
}

/* 表格式行情 */
.home [class*="market-list"] > *,
.new-home [class*="market-list"] > *,
.home [class*="coin-list"] > *,
.new-home [class*="coin-list"] > *{
  border-color:#17191d!important;
}

/* ---------- 底部导航：不改布局，只微调颜色不覆盖功能 ---------- */
/* 用户之前要求悬浮导航保持，所以这里不定义位置/尺寸/结构。 */

/* ---------- 适配 ---------- */
@media(max-width:360px){
  .home .market-header,
  .new-home .market-header{
    grid-template-columns:36px minmax(0,1fr) auto!important;
    gap:8px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .home .market-header .brand-logo,
  .new-home .market-header .brand-logo{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
  }

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

  .home .banner-section,
  .new-home .banner-section,
  .home > main.home-section,
  .new-home > main.home-section{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .home .notice-row,
  .new-home .notice-row{
    margin-left:10px!important;
    margin-right:10px!important;
  }

  .home .quick-nav,
  .new-home .quick-nav{
    gap:2px!important;
  }

  .home .quick-item > span:last-child,
  .new-home .quick-item > span:last-child{
    font-size:10px!important;
  }

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

@media(min-width:600px){
  .home.new-home,
  .home,
  .new-home{
    width:min(100%,820px)!important;
    margin:0 auto!important;
  }
}

/*
 * V82 明确不做：
 * - 不创建覆盖层
 * - 不创建充值/聊天室/福利中心等假按钮
 * - 不隐藏原 Vue 元素
 * - 不重写 click
 * - 不改 router
 * - 不改 API
 * - 不改行情数据
 */