/* ==========================================================
   Zaka Exchange — PC 端适配层
   仅在 width >= 1024px 生效;移动端零影响
   ========================================================== */
@media (min-width: 1024px) {

/* ---------- 1. 基础变量与骨架 ---------- */
:root {
  --zk-side-w: 224px;
  --zk-content-max: 1340px;
  --desktop-page-width: min(1340px, calc(100vw - 224px - 64px));
  --desktop-page-gutter: 32px;
  --zk-panel: #0e131c;
  --zk-line: rgba(255,255,255,.07);
  --zk-txt: #eaf0f8;
  --zk-soft: #8b96a7;
  --zk-accent: #1daefe;
}

html, body { overflow-x: hidden !important; }

/* 内容区让位给左侧导航 */
#app { margin-left: var(--zk-side-w) !important; }

/* 底部手机导航条在桌面隐藏 */
.app-tabbar, nav.app-tabbar { display: none !important; }

.home-content, .financial-page, .assets-page, .market-page { padding-bottom: 32px !important; }

/* 铺满型区块统一限宽居中(防止撑到侧边栏边上) */
.assets-shell, .market-header, .trade-footer, .currency-topbar, .seconds-header {
  max-width: var(--zk-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ---------- 2. 左侧导航栏 ---------- */
.zk-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--zk-side-w);
  z-index: 9000; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0a0e15 0%, #070a10 100%);
  border-right: 1px solid var(--zk-line);
  color: var(--zk-txt);
  font-family: inherit; font-size: 14px;
  overflow-y: auto; overflow-x: hidden;
}
.zk-side::-webkit-scrollbar { width: 6px; }
.zk-side::-webkit-scrollbar-thumb { background: #ffffff1a; border-radius: 3px; }

.zk-side__brand {
  display: flex; align-items: center; gap: 10px;
  padding: 20px 20px 18px; border-bottom: 1px solid var(--zk-line);
}
.zk-side__brand img { width: 30px; height: 30px; }
.zk-side__brand b { font-size: 17px; letter-spacing: .4px; font-weight: 700; }
.zk-side__brand small { display: block; font-size: 10px; color: var(--zk-soft); font-weight: 400; letter-spacing: .5px; }

.zk-side__nav { flex: 1; padding: 12px 10px 20px; }
.zk-side__group {
  padding: 14px 10px 6px; font-size: 11px; color: #5d6878;
  letter-spacing: 1px; text-transform: uppercase;
}
.zk-side__item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; margin: 1px 0; border-radius: 8px;
  color: var(--zk-soft); cursor: pointer; user-select: none;
  transition: background .15s, color .15s;
  border: 0; background: none; width: 100%; text-align: left;
  font-size: 14px; font-family: inherit;
}
.zk-side__item svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.zk-side__item:hover { background: #ffffff0a; color: var(--zk-txt); }
.zk-side__item.is-active {
  background: linear-gradient(90deg, rgba(29,174,254,.18), rgba(29,174,254,.04));
  color: #fff; box-shadow: inset 2px 0 0 var(--zk-accent);
}
.zk-side__item.is-active svg { opacity: 1; color: var(--zk-accent); }

.zk-side__foot {
  padding: 12px 16px 16px; border-top: 1px solid var(--zk-line);
  font-size: 11px; color: #4d5766; line-height: 1.6;
}

/* ---------- 3. 首页 ---------- */
.home-topbar { padding-left: 0 !important; padding-right: 0 !important; }
.home-topbar .search-chip { max-width: 460px; }

/* hero 改左右两栏:文案左 / 主图右 */
.home-page .hero {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  column-gap: 40px !important;
  padding: 40px 40px 30px !important;
  min-height: 320px !important;
  box-sizing: border-box !important;
}
.home-page .hero-art {
  grid-column: 2 !important; grid-row: 1 / span 3 !important;
  width: 100% !important; max-width: 400px !important;
  max-height: 240px !important; height: auto !important;
  object-fit: contain !important; justify-self: end !important;
  margin: 0 !important;
}
.home-page .hero h1 { grid-column: 1 !important; grid-row: 1 !important; font-size: 34px !important; line-height: 1.2 !important; margin: 0 0 10px !important; }
.home-page .hero p { grid-column: 1 !important; grid-row: 2 !important; font-size: 15px !important; color: var(--zk-soft) !important; margin: 0 0 22px !important; }
.home-page .hero-actions { grid-column: 1 !important; grid-row: 3 !important; display: flex !important; gap: 12px !important; }
.home-page .hero-actions .cta-primary,
.home-page .hero-actions .cta-secondary { min-width: 132px !important; }

/* 九个功能入口排成一行 */
.home-page .quick-nav {
  grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
  grid-template-rows: auto !important;
  gap: 8px !important;
  padding: 20px 24px !important;
}
.home-page .quick-nav__item { flex-direction: column !important; padding: 10px 4px !important; }
.home-page .quick-nav__item img { width: 34px !important; height: 34px !important; }
.home-page .quick-nav__item span { font-size: 12px !important; }

/* 热门交易对:一行四列 */
.home-page .featured-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 14px !important; }
.home-page .featured-card { width: 100% !important; }

/* 首页行情列表:加宽 + 收紧行高 */
.home-page .market-section .market-row,
.home-page .market-section .market-line { min-height: 54px !important; }
.home-page .market-section .market-head,
.home-page .market-section .market-row,
.home-page .market-section .market-line {
  display: grid !important;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.1fr) !important;
  align-items: center !important;
}

/* ---------- 4. 行情页 ---------- */
.market-page { padding-top: 14px !important; }
.market-header {
  position: sticky !important; top: 0 !important;
  left: auto !important; transform: none !important;
  width: 100% !important;
}
.table-head, .market-row {
  display: grid !important;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.1fr) !important;
  align-items: center !important;
}
.table-head span, .market-row > * { width: auto !important; }
.table-head span:nth-child(n+2), .market-row__price, .market-row__change { text-align: right !important; }
.market-row { min-height: 54px !important; height: auto !important; }
.market-row__price { justify-content: flex-end !important; }

/* ---------- 5. 现货 / 币币交易 ---------- */
.currency-page .trade-shell {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
  gap: 20px !important;
  align-items: start !important;
  max-width: none !important;
}
.currency-page .depth-panel,
.currency-page .form-panel { width: 100% !important; min-width: 0 !important; height: auto !important; }
.currency-page .lower-panel { max-width: none !important; }
.currency-page .lower-tabs, .currency-page .orders-head { width: 100% !important; }

/* ---------- 6. 秒合约 ---------- */
.seconds-page .trade-panel { max-width: none !important; }
.seconds-page .kline-shell { height: 340px !important; }

/* ---------- 7. 理财 ---------- */
.financial-page .card-list {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}
.financial-page .financial-card { width: 100% !important; height: 100% !important; }

/* ---------- 8. 资产页 ---------- */
.assets-shell {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr) !important;
  gap: 20px !important; align-items: start !important;
}
.assets-shell .asset-tabs { grid-column: 1 / -1 !important; width: 100% !important; }
.assets-shell .hero-card, .assets-shell .overview-panel { width: 100% !important; }
.assets-shell .overview-panel { grid-column: 2 !important; }
.asset-tabs { overflow-x: auto !important; }

/* ---------- 9. 表单类页面:宽屏下保持窄栏居中 ---------- */
.deposit-page, .withdraw-page, .wallet-page, .add-wallet-page,
.transfer-page, .transfer-records-page, .records-page,
.invite-page, .rules-page, .about-page, .orders-page, .login-page,
.account-page, .sub-page {
  --desktop-page-width: 820px;
}

/* 账户页零散元素跟随窄栏居中 */
.account-page > button, .account-page > .logout-button,
.deposit-page > .notice, .orders-page > .orders-footer {
  max-width: 820px !important;
  margin-left: auto !important; margin-right: auto !important;
  display: block !important;
}
.orders-header, .account-header { padding-left: 0 !important; }

/* ---------- 11. 独立页面(DAO / 闪兑 等):让位侧边栏并放宽 ---------- */
body.zk-standalone { padding-left: var(--zk-side-w) !important; box-sizing: border-box !important; }
body.zk-standalone > .shell {
  --shell: min(1180px, calc(100vw - var(--zk-side-w) - 80px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.zk-standalone .dock { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* ---------- 10. 交易页底部悬浮条:桌面下贴内容区 ---------- */
.trade-footer {
  position: sticky !important; bottom: 0 !important;
  left: auto !important; transform: none !important;
  width: 100% !important;
}

/* ---------- 12. 客服聊天页(service.html):手机窄栏 → 桌面聊天面板 ---------- */
body.zk-standalone.zk-chat { padding-left: var(--zk-side-w) !important; }
body.zk-standalone.zk-chat .wrap {
  max-width: 1000px !important;
  margin: 0 auto !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(6,10,18,.30);
  border-left: 1px solid var(--zk-line);
  border-right: 1px solid var(--zk-line);
}
body.zk-standalone.zk-chat .hd { padding: 18px 26px 16px; }
body.zk-standalone.zk-chat .ttl b { font-size: 17px; }
body.zk-standalone.zk-chat .msgs { padding: 24px 28px 12px; }
body.zk-standalone.zk-chat .row { margin-bottom: 16px; }
body.zk-standalone.zk-chat .bub { max-width: 62%; font-size: 15px; padding: 11px 15px; }
body.zk-standalone.zk-chat .bub img { max-height: 440px; }
body.zk-standalone.zk-chat .av { width: 34px; height: 34px; flex: 0 0 34px; font-size: 14px; }
body.zk-standalone.zk-chat .ft { padding: 14px 26px 18px; }
body.zk-standalone.zk-chat .empty { margin-top: 140px; }
body.zk-standalone.zk-chat .login { padding: 0 60px; }
body.zk-standalone.zk-chat .toast { max-width: 420px; }

}