/* ============================================================
   GOLDEX · 首页仪表盘（PC / 移动端统一布局）
   ------------------------------------------------------------
   · 登录后默认展示首页；移动端 540px 面板，PC 端自适应加宽（--pw）
   · 轮播卡支持：自动轮播 / 左右箭头 / 触屏滑动 / 鼠标拖拽
   · 大宗商品 / 外汇行情 + 底部导航
   · 颜色复用现有主题变量，整体禁止滚动
   ============================================================ */

/* 面板宽度：移动端 540px；PC 端随视口自适应加宽（56vw，上限 720px） */
:root { --pw: 540px; }
@media (min-width: 769px) { :root { --pw: min(720px, 56vw); } }

.home { display: none; }

html { overflow-x: hidden; }
body.home-active { overflow: hidden !important; }
body.home-active .topbar,
body.home-active .trade { display: none !important; }

.home, .home * { box-sizing: border-box; }

body.home-active .home {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100vh; max-height: 100vh; overflow: hidden;
  background: var(--bg0); color: var(--txt);
}
.home-cards { width: 100%; }

/* PC 端给面板加背景氛围 */
@media (min-width: 769px) {
  body.home-active { background: radial-gradient(circle at 50% 10%, rgba(58,48,28,.25) 0%, var(--bg0) 60%); }
}

.home-hd, .home-main, .mb-nav { width: 100%; max-width: var(--pw); }

/* ---------- 顶部 ---------- */
.home-hd {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 16px 6px;
}
.home-hd h1 { font-size: 20px; font-weight: 900; letter-spacing: -.4px; }
.home-hd .acts { display: flex; align-items: center; gap: 14px; }
.home-hd .ic {
  width: 22px; height: 22px; color: var(--txt);
  opacity: .9; cursor: pointer; transition: opacity .15s;
}
.home-hd .ic:active { opacity: .55; }
/* 顶部图标按钮（客服 / 个人中心，含未读角标） */
.home-hd .home-ic {
  position: relative; display: grid; place-items: center; margin: 0; padding: 0;
  border: none; background: transparent; color: inherit; cursor: pointer;
}
.home-hd .home-ic .ic { display: block; }

/* ---------- 主体（禁止滚动） ---------- */
.home-main {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 0 14px 8px;
}

/* ---------- 轮播卡片 ---------- */
.home-hero {
  flex: none; position: relative; height: 132px; margin-top: 4px;
  overflow: hidden; border-radius: 18px;
  touch-action: pan-y;
}
.home-cards {
  position: absolute; inset: 0;
  display: flex; gap: 0; height: 100%;
  transition: transform .35s ease;
}
.home-card {
  flex: 0 0 100%; min-width: 0; height: 100%;
  border-radius: 18px; padding: 14px 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  box-shadow: 0 14px 34px -16px rgba(0,0,0,.45);
}
.home-card-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}

/* 品种卡片色调（同一底图，按品种滤色） */
.home-card.silver    .home-card-bg { filter: grayscale(.75) hue-rotate(160deg) brightness(1.08); }
.home-card.palladium .home-card-bg { filter: hue-rotate(230deg) saturate(.65) brightness(.92); }
.home-card.platinum  .home-card-bg { filter: hue-rotate(185deg) saturate(.55) brightness(1.12); }
.home-card.oil       .home-card-bg { filter: hue-rotate(-18deg) saturate(1.5) brightness(.9); }
.home-card-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.28) 52%, rgba(0,0,0,.06) 100%);
}
.home-card::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: radial-gradient(260px 180px at 100% 100%, rgba(0,0,0,.55), transparent 70%);
  pointer-events: none;
}
.home-card .top,
.home-card .home-card-body { position: relative; z-index: 3; }
.home-card .top {
  display: flex; align-items: center; gap: 10px;
}
.home-card .flags { display: flex; align-items: center; }
.home-card .flags span {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 15px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
}
.home-card .flags span + span { margin-left: -8px; }
.home-card .tag {
  font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: rgba(255,255,255,.16);
}
.home-card .sym { font-size: 12px; font-weight: 800; opacity: .9; }
.home-card .price { font-size: 30px; font-weight: 900; font-family: var(--num); letter-spacing: -.8px; }
.home-card .ch {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 8px; margin-top: 4px; width: fit-content;
}
.home-card .ch.up { background: rgba(21,209,139,.18); color: #15d18b; }
.home-card .ch.down { background: rgba(242,96,111,.18); color: #f2606f; }

.home-dots {
  position: absolute; bottom: 8px; left: 0; right: 0; z-index: 4;
  display: flex; justify-content: center; gap: 6px;
}
.home-dots i {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25);
  transition: .2s;
}
.home-dots i.on { background: rgba(255,255,255,.9); width: 14px; border-radius: 3px; }

.home-arrow {
  position: absolute; top: 50%; z-index: 5; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(4px);
  cursor: pointer; opacity: .7; transition: opacity .15s;
}
.home-arrow:hover { opacity: 1; }
.home-arrow.prev { left: 6px; }
.home-arrow.next { right: 6px; }
.home-arrow svg { width: 14px; height: 14px; }

/* ---------- 快速行情（3 列网格，5 品种两行排布） ---------- */
.home-tickers {
  flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin: 10px 0 8px;
}
.home-tk {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 10px 10px 9px; text-align: center;
}
.home-tk .n { font-size: 10px; font-weight: 800; color: var(--txt2); letter-spacing: .4px; }
.home-tk .p { font-size: 15px; font-weight: 900; font-family: var(--num); margin: 4px 0 2px; }
.home-tk .c {
  display: inline-block; font-size: 10px; font-weight: 800;
  padding: 2px 7px; border-radius: 6px;
}
.home-tk .c.up { background: var(--up-bg); color: var(--up); }
.home-tk .c.down { background: var(--down-bg); color: var(--down); }

/* ---------- 分类切换 ---------- */
.home-tabs {
  flex: none; display: flex; gap: 22px; border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.home-tabs button {
  background: none; border: none; color: var(--txt2); font-size: 14px; font-weight: 700;
  padding: 10px 2px 8px; position: relative; cursor: pointer;
}
.home-tabs button.on { color: var(--txt); }
.home-tabs button.on::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2.5px;
  border-radius: 2px; background: linear-gradient(90deg, var(--acc), var(--acc-hi));
}

/* ---------- 行情列表 ---------- */
.home-list {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 58px;
}
.home-list ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px;
}
.home-list li {
  display: grid; grid-template-columns: 44px 1fr auto;
  align-items: center; gap: 10px; padding: 6px 4px; border-radius: 10px;
  transition: background .12s;
}
.home-list li:active { background: var(--panel2); }
.home-list .icon {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  font-size: 15px; background: var(--panel2); color: var(--txt2);
}
.home-list .icon.metal { background: rgba(226,179,92,.14); color: #e2b35c; }
.home-list .icon.oil   { background: rgba(242,163,60,.14); color: #f2a33c; }
.home-list .icon.fx    { background: rgba(79,179,255,.14); color: #4fb3ff; }
.home-list .info .n { font-size: 12.5px; font-weight: 800; }
.home-list .info .v { font-size: 10px; color: var(--txt3); margin-top: 1px; }
.home-list .price-col { text-align: right; }
.home-list .price-col .p { font-size: 14px; font-weight: 800; font-family: var(--num); }
.home-list .price-col .j { font-size: 9.5px; color: var(--txt3); margin-top: 1px; }
.home-list .price-col .c {
  display: inline-block; min-width: 52px; text-align: center;
  font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 6px; margin-top: 3px;
}
.home-list .price-col .c.up { background: var(--up-bg); color: var(--up); }
.home-list .price-col .c.down { background: var(--down-bg); color: var(--down); }

/* ---------- 底部导航 ---------- */
.mb-nav {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 0; z-index: 40;
  width: 100%; max-width: var(--pw);
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(11,14,22,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); display: flex; justify-content: space-around; align-items: flex-start;
}
html[data-theme="light"] .mb-nav { background: rgba(255,255,255,.94); }
.mb-nav button {
  flex: 1; border: none; background: none; color: var(--txt3);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding-top: 8px; font-size: 10px; font-weight: 700; cursor: pointer;
}
.mb-nav button .ic { width: 22px; height: 22px; color: var(--txt2); transition: .15s; }
.mb-nav button.on { color: var(--acc); }
.mb-nav button.on .ic { color: var(--acc); }

/* ---------- PC 端适配：悬浮导航 / 加大可点击区域 / 更高的图表 ---------- */
@media (min-width: 769px) {
  body:not(.home-active) .mb-nav { display: none; }
  .home-hd, .home-main { padding-left: 24px; padding-right: 24px; }
  .home-hero { height: 178px; margin-top: 10px; }
  .home-card .price { font-size: 32px; }
  .home-arrow { width: 34px; height: 34px; opacity: .55; }
  .home-arrow svg { width: 16px; height: 16px; }
  /* 悬浮导航占用底部 ~80px，内容区预留空白避免遮挡末行 */
  .home-main { padding-bottom: 104px; }
  .home-list li { padding: 14px 4px; }
  .home-list .n { font-size: 14.5px; }

  /* 底部导航 → 悬浮胶囊（PC 鼠标操作更自然，不再贴边） */
  .mb-nav {
    bottom: 18px; height: 62px;
    max-width: min(560px, calc(var(--pw) - 32px));
    border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 12px 34px rgba(0,0,0,.38);
    padding-bottom: 0;
  }
  .mb-nav button { padding-top: 10px; font-size: 11px; }
  .mb-nav button .ic { width: 24px; height: 24px; }

  /* K 线 / 下单页底部操作条 → 悬浮胶囊 */
  .hk-actions, .ho-actions {
    bottom: 18px; border: 1px solid var(--line); border-radius: 18px;
    max-width: min(560px, calc(var(--pw) - 16px));
    box-shadow: 0 12px 34px rgba(0,0,0,.38);
    padding: 12px 16px 12px;
  }
  .hk-actions .hk-buy, .hk-actions .hk-sell,
  .ho-actions .ho-submit { padding: 15px 0; font-size: 15.5px; }

  /* K 线主图加高，充分利用面板宽度 */
  .hk-chart-box { height: 460px; }

  /* 行情 / 注文 / 个人中心内容边距放宽 + 底部预留（悬浮导航 / 操作条） */
  .hk-main, .ho-main { padding: 14px 20px 124px; }
  .hp-main { padding: 0 20px 116px; }
  .od-body { padding: 4px 20px 100px; }
  .mk-list { padding-bottom: 96px; }
}

:root {
  --buy: #27ae60;
  --buy-bg: rgba(39,174,96,.12);
  --sell: #e74c3c;
  --sell-bg: rgba(231,76,60,.12);
}
html[data-theme="light"] {
  --buy: #188038;
  --sell: #d93025;
}

/* ============================================================
   K 线行情页 / 下单页 / 个人中心 公共
   ============================================================ */
.home-kline, .home-order, .home-profile {
  display: none; position: fixed; inset: 0; z-index: 45;
  flex-direction: column; width: 100%; height: 100vh; overflow: hidden;
  background: var(--bg0); color: var(--txt);
}
body.kline-active .home-kline, body.order-active .home-order, body.profile-active .home-profile { display: flex; }
body.kline-active .mb-nav, body.order-active .mb-nav, body.profile-active .mb-nav { display: none; }
body.kline-active .topbar, body.kline-active .trade,
body.order-active .topbar, body.order-active .trade { display: none !important; }

.hk-hd, .ho-hd, .hp-hd, .hp-sub-hd {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 50px; padding: 0 12px; border-bottom: 1px solid var(--line);
  background: var(--bg0);
  gap: 8px;
}
.hk-hd { position: relative; }
.hk-back, .ho-back, .hp-back {
  width: 36px; height: 36px; border: none; border-radius: 50%; background: transparent;
  color: var(--txt); display: grid; place-items: center; cursor: pointer;
  flex: none;
}
.hk-back svg, .ho-back svg, .hp-back svg { width: 20px; height: 20px; }

.hk-top-title, .ho-symbol b, .hp-title { font-size: 16px; font-weight: 800; }

/* 契約 / 現貨 模式切换 */
.hk-mode-tabs {
  flex: 1; display: flex; justify-content: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px; max-width: 220px;
}
.hk-mode-tabs button {
  flex: 1; border: none; background: transparent; color: var(--txt2);
  font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px; cursor: pointer;
}
.hk-mode-tabs button.on { background: var(--acc); color: #fff; }
.hk-option {
  flex: none; background: none; border: none; color: var(--txt); font-size: 14px; font-weight: 700; cursor: pointer;
  padding: 4px;
}
.hk-option svg { width: 20px; height: 20px; }

.hk-main, .ho-main {
  flex: 1; min-height: 0; overflow-y: auto;
  width: 100%; max-width: var(--pw); margin: 0 auto; padding: 10px 14px 90px;
}

/* ---------- K 线页头部 ---------- */
.hk-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px;
}
.hk-symbol-row {
  display: flex; align-items: center; gap: 8px;
}
.hk-menu-icon {
  width: 22px; height: 22px; border-radius: 5px; background: var(--panel2);
  display: grid; place-items: center; font-size: 14px; color: var(--txt2);
}
.hk-symbol-row b { font-size: 17px; font-weight: 900; }
.hk-symbol-row .hk-ch { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.hk-symbol-row .hk-ch.up { background: var(--buy-bg); color: var(--buy); }
.hk-symbol-row .hk-ch.down { background: var(--sell-bg); color: var(--sell); }

.hk-head-acts { display: flex; align-items: center; gap: 4px; }
.hk-cal, .hk-like, .ho-like {
  width: 34px; height: 34px; border: none; background: transparent; color: var(--txt2);
  display: grid; place-items: center; cursor: pointer;
}
.hk-cal svg, .hk-like svg, .ho-like svg { width: 18px; height: 18px; }
.hk-like.on svg { fill: var(--acc); stroke: var(--acc); }

.hk-price-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 10px;
}
.hk-price-left { display: flex; flex-direction: column; gap: 2px; }
.hk-big { font-size: 32px; font-weight: 900; font-family: var(--num); letter-spacing: -1px; }
.hk-big.up { color: var(--buy); }
.hk-big.down { color: var(--sell); }
.hk-sub-price { font-size: 12px; color: var(--txt2); display: flex; align-items: center; gap: 10px; }
.hk-sub-price .hk-chg-txt { font-weight: 800; }
.hk-sub-price .hk-chg-txt.up { color: var(--buy); }
.hk-sub-price .hk-chg-txt.down { color: var(--sell); }

.hk-price-right { text-align: right; }
.hk-stat { font-size: 11px; color: var(--txt2); line-height: 1.55; }
.hk-stat b { color: var(--txt); font-weight: 800; margin-left: 6px; }

/* ---------- 周期 ---------- */
.hk-tf {
  display: flex; gap: 4px; overflow-x: auto; padding: 4px 0 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.hk-tf::-webkit-scrollbar { display: none; }
.hk-tf button {
  flex: none; background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--txt2); padding: 6px 8px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.hk-tf button.on { color: var(--txt); border-bottom-color: var(--txt); }

/* ---------- 指标 ---------- */
.hk-ind {
  display: flex; gap: 12px; font-size: 11px; color: var(--txt2); margin-bottom: 6px;
}
.hk-ind .ma5 { color: #ff9f0e; }
.hk-ind .ma10 { color: #4fb3ff; }
.hk-ind .ma30 { color: #a35cff; }
.hk-ind b { margin-left: 3px; }

/* ---------- 三图 ---------- */
.hk-chart-box {
  flex: none; height: 360px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); overflow: hidden; position: relative;
}
.hk-chart { width: 100%; height: 100%; display: block; }

/* ---------- 委託書留（双列盘口：買値が上がる / 買値が下がる） ---------- */
.hk-depth {
  margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel);
  padding: 10px 12px;
}
.hk-depth-hd { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 800; margin-bottom: 8px; }

.hk-depth-grid { --bid: #f2606f; --ask: #15d18b; display: flex; flex-direction: column; }
.hk-depth-grid .hd {
  display: grid; grid-template-columns: 1fr 1.35fr 1.35fr 1fr; gap: 6px;
  font-size: 10.5px; font-weight: 800; padding-bottom: 7px;
}
.hk-depth-grid .hd .bid { color: var(--bid); }
/* 「買値が下がる」对齐到第 3 列（卖价列）上方，与设计图一致 */
.hk-depth-grid .hd .ask { grid-column: 3 / 5; color: var(--ask); }

.hk-depth-grid .row {
  display: grid; grid-template-columns: 1fr 1.35fr 1.35fr 1fr; gap: 6px; align-items: center;
  padding: 3px 0; font-size: 11px; font-family: var(--num); font-variant-numeric: tabular-nums;
}
.hk-depth-grid .row .q { padding: 5px 6px; font-weight: 700; }
.hk-depth-grid .row .q.bid { background: rgba(242, 96, 111, .16); color: var(--bid); border-radius: 3px 0 0 3px; }
.hk-depth-grid .row .q.ask { background: rgba(21, 209, 139, .16); color: var(--ask); border-radius: 0 3px 3px 0; text-align: right; }
.hk-depth-grid .row .p.bid { color: var(--bid); }
.hk-depth-grid .row .p.ask { color: var(--txt2); }
.hk-depth-grid .row:nth-child(even) .q.bid { background: rgba(242, 96, 111, .09); }
.hk-depth-grid .row:nth-child(even) .q.ask { background: rgba(21, 209, 139, .09); }

/* ---------- K线底部操作 ---------- */
.hk-actions {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 50;
  width: 100%; max-width: var(--pw); display: flex; gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg0); border-top: 1px solid var(--line);
}
.hk-actions button {
  flex: 1; border: none; border-radius: 24px; padding: 13px 0; font-size: 15px; font-weight: 800; cursor: pointer;
}
.hk-actions .hk-buy.up { background: var(--buy); color: #fff; }
.hk-actions .hk-sell.down { background: var(--sell); color: #fff; }

/* 契約玩法底部按钮 */
.hk-actions.contract .hk-buy.up,
.hk-actions.contract .hk-sell.down { border-radius: 14px; }

/* ---------- 契約進行中倒计时浮层 ---------- */
.hk-ct-timer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)); z-index: 55;
  display: flex; align-items: center; gap: 11px;
  padding: 7px 18px 7px 7px; border-radius: 44px;
  background: rgba(0, 0, 0, .82); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
  animation: ctFloatIn .3s ease;
}
.hk-ct-timer.hide { display: none; }
@keyframes ctFloatIn { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.hk-ct-timer .ct-ring {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  background: radial-gradient(circle at 32% 28%, #ffe08a, #d9821b);
  color: #402500;
  animation: ctPulse 1s infinite;
}
.hk-ct-timer .ct-ring b {
  font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums;
  animation: ctTick 1s infinite;
}
.hk-ct-timer .ct-ring small { font-size: 8px; font-weight: 700; margin-top: 1px; }
@keyframes ctPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 180, 60, .55); }
  70% { box-shadow: 0 0 0 12px rgba(255, 180, 60, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 180, 60, 0); }
}
@keyframes ctTick {
  0% { transform: translateY(-2px) scale(1.22); opacity: .55; }
  100% { transform: none; opacity: 1; }
}
/* 最后 10 秒转入红色紧迫态 */
.hk-ct-timer.urgent .ct-ring {
  background: radial-gradient(circle at 32% 28%, #ff9c9c, #e0242f);
  color: #fff;
}
.hk-ct-timer.urgent .ct-ring b { animation: ctTick .5s infinite; }
/* 读秒归零：数字（圆环）立即消失，只留「決済中…」文字，避免停在 0 上跳动 */
.hk-ct-timer.settling { padding: 9px 20px; }
.hk-ct-timer.settling .ct-ring { display: none; }
.hk-ct-timer .ct-info { display: flex; flex-direction: column; gap: 2px; }
.hk-ct-timer .ct-info .ct-title { font-size: 13px; font-weight: 800; color: #fff; }
.hk-ct-timer .ct-info small { font-size: 10px; color: rgba(255, 255, 255, .65); }

/* 契約确认弹窗 */
.hcc-mask {
  display: flex; align-items: flex-end; justify-content: center;
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.hcc-mask.hide { display: none; }
.hcc-panel {
  width: 100%; max-width: var(--pw);
  background: var(--bg0); border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  animation: hccSlide .25s ease;
}
@keyframes hccSlide {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.hcc-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.hcc-hd span { font-size: 15px; font-weight: 800; }
.hcc-x {
  width: 32px; height: 32px; border: none; border-radius: 50%;
  background: var(--panel); color: var(--txt); font-size: 22px; cursor: pointer;
}
.hcc-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.hcc-row span { color: var(--txt2); }
.hcc-row b { font-weight: 700; }
.hcc-row b.up { color: var(--buy); }
.hcc-row b.down { color: var(--sell); }
.hcc-durations {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 8px 0 12px;
}
.hcc-durations button {
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--txt2); padding: 8px 4px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hcc-durations button b { font-size: 13px; font-weight: 800; color: var(--txt); }
.hcc-durations button small { font-size: 10px; color: var(--txt3); }
.hcc-durations button.on { border-color: var(--buy); background: var(--buy-bg); }
.hcc-durations button.on b { color: var(--buy); }
.hcc-field { margin-bottom: 10px; }
.hcc-field label { display: block; font-size: 12px; color: var(--txt2); margin-bottom: 6px; }
.hcc-field input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); color: var(--txt); padding: 10px 12px; font-size: 15px;
}
.hcc-ft {
  display: flex; gap: 10px; margin-top: 12px;
}
.hcc-ft button { flex: 1; border: none; border-radius: 12px; padding: 13px 0; font-size: 15px; font-weight: 800; cursor: pointer; }
.hcc-cancel { background: var(--panel2); color: var(--txt); }
.hcc-ok { color: #fff; }
.hcc-ok.up { background: var(--buy); }
.hcc-ok.down { background: var(--sell); }

/* ============================================================
   下单交易页
   ============================================================ */
.ho-hd { justify-content: space-between; }
.ho-symbol { display: flex; align-items: center; gap: 8px; }
.ho-symbol b { font-size: 16px; }

.ho-price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 2px; }
.ho-big { font-size: 28px; font-weight: 900; font-family: var(--num); letter-spacing: -1px; }
.ho-ch { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 6px; }
.ho-ch.up { background: var(--buy-bg); color: var(--buy); }
.ho-ch.down { background: var(--sell-bg); color: var(--sell); }
.ho-jpy { font-size: 12px; color: var(--txt2); margin-bottom: 14px; }

.ho-bs-tabs, .ho-type-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.ho-bs-tabs button, .ho-type-tabs button {
  flex: 1; border: none; border-radius: 8px; padding: 10px; font-size: 14px; font-weight: 800; cursor: pointer;
  background: var(--panel); color: var(--txt2);
}
.ho-bs-tabs button.on[data-dir="buy"], .ho-type-tabs button.on[data-type="market"] { background: var(--buy); color: #fff; }
.ho-bs-tabs button.on[data-dir="sell"] { background: var(--sell); color: #fff; }

.ho-field { margin-bottom: 14px; }
.ho-field label { display: block; font-size: 12px; color: var(--txt2); margin-bottom: 6px; }
.ho-input-wrap {
  display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); padding: 0 12px; margin-bottom: 8px;
}
.ho-input-wrap input {
  flex: 1; border: none; background: transparent; color: var(--txt); font-size: 18px; font-weight: 800;
  padding: 12px 0; outline: none;
}
.ho-input-wrap .ho-unit { font-size: 13px; color: var(--txt2); }
.ho-slider {
  width: 100%; -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px;
  background: var(--line); outline: none;
}
.ho-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--txt); cursor: pointer;
}

.ho-multi { margin-bottom: 14px; }
.ho-multi label { display: block; font-size: 12px; color: var(--txt2); margin-bottom: 8px; }
.ho-multi-list { display: flex; gap: 6px; }
.ho-multi-list button {
  flex: 1; border: none; border-radius: 6px; padding: 8px 0; font-size: 13px; font-weight: 800;
  background: var(--panel); color: var(--txt2); cursor: pointer;
}
.ho-multi-list button.on { background: var(--buy); color: #fff; }

.ho-book {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px;
  font-size: 11px; border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--panel);
}
.ho-book-side .hd { display: grid; grid-template-columns: 1fr 1fr; color: var(--txt2); font-weight: 700; margin-bottom: 4px; }
.ho-book-side .row { display: grid; grid-template-columns: 1fr 1fr; padding: 2px 0; }
.ho-book-side.sell .row { color: var(--sell); }
.ho-book-side.buy .row { color: var(--buy); }

.ho-summary { border-top: 1px solid var(--line); padding-top: 12px; }
.ho-sum-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 10px; }
.ho-sum-row span { color: var(--txt2); }
.ho-sum-row b { font-weight: 800; }

.ho-actions {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 50;
  width: 100%; max-width: var(--pw); padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bg0); border-top: 1px solid var(--line);
}
.ho-submit {
  width: 100%; border: none; border-radius: 24px; padding: 14px; font-size: 15px; font-weight: 800;
  background: var(--buy); color: #fff; cursor: pointer;
}
.ho-submit.sell { background: var(--sell); }

/* ---------- 订单确认弹窗 ---------- */
.ho-mask {
  position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
}
.ho-mask.hide { display: none; }
.ho-confirm {
  width: 100%; max-width: var(--pw); background: var(--bg0); color: var(--txt);
  border-radius: 18px 18px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  animation: hocUp .25s ease;
}
@keyframes hocUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.hoc-hd {
  display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 800;
  margin-bottom: 14px;
}
.hoc-x { width: 28px; height: 28px; border: none; background: transparent; color: var(--txt2); font-size: 22px; cursor: pointer; }
.hoc-body { display: flex; flex-direction: column; gap: 10px; }
.hoc-row { display: flex; justify-content: space-between; font-size: 13px; }
.hoc-row span { color: var(--txt2); }
.hoc-row b { font-weight: 800; }
.hoc-row b.up { color: var(--buy); }
.hoc-row b.down { color: var(--sell); }

.hoc-expiry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 10px; }
.hoc-expiry button {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--txt2);
  padding: 10px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.hoc-expiry button.on { border-color: var(--buy); background: var(--buy-bg); color: var(--buy); }
.hoc-expiry button b { font-size: 12px; }
.hoc-expiry button small { font-size: 10px; }

.hoc-field label { display: block; font-size: 12px; color: var(--txt2); margin-bottom: 6px; }
.hoc-field input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--txt);
  padding: 11px 12px; font-size: 15px; font-weight: 800;
}
.hoc-ft { display: flex; gap: 10px; margin-top: 16px; }
.hoc-ft button { flex: 1; border: none; border-radius: 24px; padding: 13px; font-size: 15px; font-weight: 800; cursor: pointer; }
.hoc-cancel { background: var(--panel); color: var(--txt); }
.hoc-ok { background: var(--buy); color: #fff; }
.hoc-ok.sell { background: var(--sell); }

/* 现货确认弹窗：方向切换 / 快捷百分比 / USD 输入 */
.hoc-dir {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;
}
.hoc-dir button {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--txt2);
  padding: 10px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.hoc-dir button.on[data-dir="buy"] { background: var(--buy); border-color: var(--buy); color: #fff; }
.hoc-dir button.on[data-dir="sell"] { background: var(--sell); border-color: var(--sell); color: #fff; }

.hoc-field label { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--txt2); margin-bottom: 6px; }
.hoc-field label em { font-style: normal; color: var(--txt3); }
.hoc-input-wrap { position: relative; }
.hoc-input-wrap input {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--txt);
  padding: 12px 56px 12px 12px; font-size: 16px; font-weight: 800; box-sizing: border-box;
}
.hoc-input-wrap .hoc-unit {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; color: var(--txt2); pointer-events: none;
}
.hoc-pct {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px;
}
.hoc-pct button {
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--txt2);
  padding: 8px 4px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.hoc-pct button.on { border-color: var(--accent); background: rgba(242,193,77,.18); color: var(--accent); }

/* ============================================================
   个人中心
   ============================================================ */
.hp-main {
  flex: 1; min-height: 0; overflow-y: auto; width: 100%; max-width: var(--pw); margin: 0 auto;
}
.hp-card {
  background: linear-gradient(135deg, #2b4bf2 0%, #3969f5 60%, #4a8cff 100%);
  color: #fff; margin: 14px; border-radius: 18px; padding: 18px;
  display: flex; align-items: center; gap: 14px; box-shadow: 0 14px 30px -14px rgba(43,75,242,.45);
}
.hp-avatar {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.22);
  display: grid; place-items: center; flex: none;
}
.hp-avatar svg { width: 28px; height: 28px; stroke: #fff; }
.hp-meta { flex: 1; min-width: 0; }
.hp-name-row { display: flex; align-items: center; gap: 10px; }
.hp-name-row b { font-size: 18px; font-weight: 900; }
.hp-badge {
  font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 6px;
  background: rgba(255,255,255,.22); color: #fff;
}
.hp-badge.ok { background: rgba(21,209,139,.22); }
.hp-badge.warn { background: rgba(255,193,7,.22); }
.hp-uid { font-size: 11px; opacity: .85; margin-top: 4px; }

.hp-menu { padding: 0 14px 14px; }
.hp-asset {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 10px;
}
.hp-asset-label { font-size: 11px; color: var(--txt2); }
.hp-asset-val { font-size: 22px; font-weight: 900; font-family: var(--num); margin-top: 4px; }
.hp-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 14px; margin-bottom: 8px; color: var(--txt); cursor: pointer;
}
.hp-row:active { opacity: .85; }
.hp-ic { width: 26px; text-align: center; font-size: 18px; }
.hp-lab { flex: 1; text-align: left; font-size: 14px; font-weight: 700; }
.hp-val { font-size: 12px; color: var(--txt2); }
.hp-arr { font-size: 18px; color: var(--txt2); }
.hp-logout { color: #f2606f; margin-top: 18px; }

.hp-sub {
  position: absolute; inset: 0; z-index: 60; display: none; flex-direction: column;
  background: var(--bg0); color: var(--txt);
}
.hp-sub.on { display: flex; }
.hp-sub-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.hp-sub-body label { display: block; font-size: 12px; color: var(--txt2); margin: 10px 0 6px; }
.hp-sub-body input, .hp-sub-body select {
  width: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 12px; color: var(--txt); font-size: 14px;
}
.hp-submit {
  width: 100%; margin-top: 20px; border: none; border-radius: 12px; padding: 13px;
  background: var(--acc); color: #0a0f1e; font-size: 15px; font-weight: 800; cursor: pointer;
}

/* ============================================================
   身份认证（KYC）：证件类型 / 证件号 / 姓名 / 正反面照片上传
   ============================================================ */
.ky-form { padding: 2px 0 12px; }
.ky-f { margin-bottom: 16px; }
.ky-form label,
.hp-sub-body .ky-form label { display: block; font-size: 12.5px; font-weight: 700; color: var(--txt2); margin: 0 0 8px; }
.ky-in, .ky-sel select {
  width: 100%; height: 46px; box-sizing: border-box;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
  padding: 0 12px; color: var(--txt); font-size: 14px; outline: none;
}
.ky-in::placeholder { color: var(--txt3); }
.ky-in:focus, .ky-sel select:focus { border-color: var(--acc); }
.ky-ro { display: flex; align-items: center; color: var(--txt); font-weight: 700; }
.ky-sel { position: relative; }
.ky-sel select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.ky-sel::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 7px; height: 7px;
  border-right: 1.8px solid var(--txt2); border-bottom: 1.8px solid var(--txt2);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.ky-ups { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 6px 0 24px; }
.ky-up { cursor: pointer; }
.ky-box {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--line2); border-radius: 12px; background: var(--panel2);
  display: grid; place-items: center; transition: border-color .15s;
}
.ky-up:active .ky-box { border-color: var(--acc); }
.ky-plus { font-size: 30px; font-weight: 300; color: var(--txt2); line-height: 1; }
.ky-img { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ky-img.on { display: block; }
.ky-box.has .ky-plus { display: none; }
.ky-lab { margin-top: 8px; text-align: center; font-size: 11.5px; line-height: 1.55; color: var(--txt2); }

.ky-btn {
  width: 100%; height: 48px; border: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #2b4bf2, #4a8cff); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .5px;
  box-shadow: 0 12px 26px -12px rgba(43,75,242,.9);
}
.ky-btn:disabled { opacity: .6; }
.ky-btn:active { opacity: .9; }

.ky-tip { padding: 11px 12px; border-radius: 10px; font-size: 12px; line-height: 1.6; margin-bottom: 14px; }
.ky-tip.warn { background: rgba(242,161,60,.12); border: 1px solid rgba(242,161,60,.32); color: #f2a33c; }
.ky-tip.bad { background: rgba(242,96,111,.12); border: 1px solid rgba(242,96,111,.32); color: var(--down); }
.ky-loading { padding: 26px 0; text-align: center; color: var(--txt3); font-size: 13px; }

.ky-done { text-align: center; padding: 18px 0 20px; }
.ky-done-ic {
  width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; font-size: 26px; font-weight: 900;
  background: var(--up-bg); color: var(--up); border: 1px solid var(--up-brd);
}
.ky-done-t { font-size: 17px; font-weight: 900; }
.ky-done-s { margin-top: 6px; font-size: 12px; color: var(--txt2); }
.hp-empty { text-align: center; color: var(--txt2); font-size: 13px; padding: 24px; }
.hp-bank-item { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 8px; }
.hp-bank-item b { font-size: 14px; margin-right: 8px; }
.hp-bank-item .hp-holder { font-size: 11px; color: var(--txt2); margin-top: 4px; }
.hp-lang-list { display: flex; flex-direction: column; gap: 8px; }
.hp-lang-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px;
  color: var(--txt); font-size: 14px; font-weight: 700; cursor: pointer;
}
.hp-lang-row.on { border-color: var(--acc); color: var(--acc); }

.hp-title { font-size: 16px; font-weight: 800; }
.hp-spacer { width: 36px; }

/* 充值 / 提现快捷入口 */
.hp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.hp-action {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 12px; padding: 13px; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer;
}
.hp-action.dep { background: linear-gradient(135deg, #2b4bf2, #4a8cff); }
.hp-action.wd { background: linear-gradient(135deg, #e53e3e, #ff6b6b); }
.hp-a-ic { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); display: grid; place-items: center; font-size: 13px; }

/* 子页右上图标 */
.hp-sub-ri { width: 36px; height: 36px; border: none; background: transparent; color: var(--txt); display: grid; place-items: center; cursor: pointer; font-size: 18px; }
.hp-rec-ic { font-size: 18px; }

/* 表单增强 */
.hp-select {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; color: var(--txt); font-size: 14px; cursor: pointer;
}
.hp-select.empty { color: var(--txt2); }
.hp-input-wrap { position: relative; display: flex; align-items: center; }
.hp-input-wrap input { padding-right: 70px; }
.hp-input-wrap.wd input { padding-right: 60px; }
.hp-all {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--acc); font-size: 12px; font-weight: 800; cursor: pointer;
}
.hp-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--txt2); font-size: 14px; cursor: pointer; padding: 6px;
}
.hp-hint { font-size: 12px; color: var(--txt2); margin: 4px 0 12px; }
.hp-hint-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--txt2); margin: 4px 0 12px; }
.hp-notice { background: rgba(255,193,7,.10); border: 1px solid rgba(255,193,7,.25); border-radius: 10px; padding: 12px; font-size: 12px; color: #f2c14d; line-height: 1.6; margin-bottom: 18px; }
.hp-fee-row { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin: 10px 0 14px; }

/* 记录列表 */
.hp-rec-list { display: flex; flex-direction: column; gap: 10px; }
.hp-rec-item { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.hp-rec-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.hp-rec-top b { font-size: 13px; }
.hp-rec-amt { font-family: var(--num); font-size: 16px; font-weight: 800; }
.hp-rec-amt.up { color: var(--up); }
.hp-rec-amt.down { color: var(--down); }
.hp-rec-mid { font-size: 12px; color: var(--txt2); margin-bottom: 8px; }
.hp-rec-bot { display: flex; justify-content: space-between; font-size: 11px; color: var(--txt3); }
.hp-rec-st { padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 700; }
.hp-rec-st.pending { background: rgba(255,193,7,.15); color: #f2c14d; }
.hp-rec-st.approved { background: rgba(21,209,139,.15); color: var(--up); }
.hp-rec-st.rejected { background: rgba(244,67,54,.15); color: var(--down); }

/* 币种底部选择器 */
.hp-cur { display: none; position: fixed; inset: 0; z-index: 200; flex-direction: column; }
.hp-cur.on { display: flex; }
.hp-cur-mask { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.hp-cur-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto;
  background: var(--bg0); border-radius: 20px 20px 0 0; padding: 12px 16px 24px;
  animation: hpCurUp .25s ease;
}
@keyframes hpCurUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.hp-cur-hd { display: flex; justify-content: center; align-items: center; position: relative; margin-bottom: 10px; }
.hp-cur-bar { width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
.hp-cur-x { position: absolute; right: 0; top: -2px; border: none; background: transparent; color: var(--txt2); font-size: 18px; cursor: pointer; }
.hp-cur-title { text-align: center; font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.hp-cur-list { display: flex; flex-direction: column; gap: 6px; }
.hp-cur-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; color: var(--txt); font-size: 14px; font-weight: 700; cursor: pointer; }
.hp-cur-row.on { border-color: var(--up); color: var(--up); }
.hp-cur-code { font-weight: 800; }
.hp-cur-rate { flex: 1; text-align: right; font-size: 11px; font-weight: 600; color: var(--txt3); font-family: var(--num); }
.hp-cur-row.on .hp-cur-rate { color: var(--up); opacity: .75; }
.hp-cur-tick { width: 14px; text-align: right; }

@media (min-width: 769px) {
  .hk-main, .hp-main { padding-left: 18px; padding-right: 18px; }
  .hk-actions { border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
}

/* ============================================================
   资产页：总资产折合 / 充值·提现·明细 / 限时·合约 / 持有仓位
   （仅作用于 .home-profile，个人中心 .home-me 保持原样式）
   ============================================================ */
.home-profile .hp-hd { justify-content: flex-start; gap: 10px; border-bottom: none; }
.hp-eye {
  width: 30px; height: 30px; border: none; background: transparent;
  color: var(--txt3); display: grid; place-items: center; cursor: pointer;
}
.hp-eye svg { width: 18px; height: 18px; }
.hp-eye.off svg { opacity: .4; }

/* 资产页底部导航留白 */
.home-profile .hp-main { padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }

/* 余额总览 */
.hp-bal { padding: 0 14px; }
.hp-bal-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.hp-bal-main { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.hp-bal-val {
  font-size: 31px; font-weight: 750; font-family: var(--num);
  font-variant-numeric: tabular-nums; letter-spacing: .2px; line-height: 1.15;
}
.hp-bal-cur { font-size: 12px; font-weight: 700; color: var(--txt3); }
.hp-bal-jpy { font-size: 12px; color: var(--txt3); font-family: var(--num); padding-bottom: 5px; }
.hp-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; font-size: 12.5px; }
.hp-line-k { color: var(--txt3); }
.hp-line-v { color: var(--txt2); font-family: var(--num); font-variant-numeric: tabular-nums; }

/* 充值 / 提现 / 明细 */
.hp-ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 14px 0; }
.hp-op {
  border: none; border-radius: 999px; padding: 12px 6px;
  font-size: 14.5px; font-weight: 800; cursor: pointer; transition: filter .15s;
}
.hp-op:active { filter: brightness(.94); }
.hp-op.dep { background: linear-gradient(135deg, #2b5cf6, #3f7bff); color: #fff; }
.hp-op.wd { background: #16181f; color: #fff; }
.hp-op.rec { background: var(--panel); color: var(--txt); border: 1px solid var(--line); }

/* 限时 / 合约 */
.hp-tabs { display: flex; gap: 26px; padding: 16px 14px 0; }
.hp-tabs button {
  position: relative; border: none; background: none; padding: 0 0 10px;
  font-size: 15px; font-weight: 700; color: var(--txt3); cursor: pointer;
}
.hp-tabs button.on { color: var(--txt); font-weight: 800; }
.hp-tabs button.on::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; height: 2.5px; border-radius: 2px; background: var(--txt);
}

/* 今日统计 */
.hp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 14px 0; }
.hp-stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 13px; display: flex; flex-direction: column; gap: 9px;
}
.hp-stat span { font-size: 11.5px; color: var(--txt3); }
.hp-stat b { font-size: 19px; font-weight: 800; font-family: var(--num); font-variant-numeric: tabular-nums; }

/* 持有仓位 */
.hp-hold { padding: 20px 14px 0; }
.hp-hold-t { font-size: 15px; font-weight: 800; }
.hp-hold-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.hp-hold-list:empty { display: none; }
.hp-hold-empty { display: grid; place-items: center; padding: 34px 0 26px; color: var(--txt3); }
.hp-hold-empty svg { width: 140px; height: 104px; }

/* ============================================================
   个人中心（右上角用户图标进入）：蓝底头部 + 白卡 + 列表 + 退出登录
   ============================================================ */
.home-me {
  display: none; position: fixed; inset: 0; z-index: 45;
  flex-direction: column; width: 100%; height: 100vh; overflow: hidden;
  background: var(--bg0); color: var(--txt);
}
body.me-active .home-me { display: flex; }
body.me-active { overflow: hidden; }
/* 个人中心：不显示顶栏（顶栏 z-index 更高会盖住页面），底部导航保持可见 */
body.me-active .topbar { display: none !important; }
body.me-active .mb-nav { display: flex; z-index: 55; }

/* 头部铺满，内容区自身滚动 */
.home-me .hp-main { padding: 0; background: var(--bg0); }

.me-hero {
  position: relative;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 18px 46px;
  background: linear-gradient(135deg, #2b4bf2 0%, #3969f5 55%, #4a8cff 100%);
  color: #fff;
}
.me-back {
  width: 34px; height: 34px; margin-left: -6px; flex: none;
  border: none; border-radius: 50%; background: transparent; color: #fff;
  display: grid; place-items: center; cursor: pointer;
}
.me-back svg { width: 22px; height: 22px; }
.me-back:active { background: rgba(255,255,255,.16); }
.me-head { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.me-hero .hp-avatar {
  width: 62px; height: 62px; border-radius: 50%; flex: none;
  background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.9);
}
.me-hero .hp-avatar svg { width: 32px; height: 32px; stroke: #fff; }
.me-hero .hp-meta { flex: 1; min-width: 0; }
.me-hero .hp-meta > b { display: block; font-size: 19px; font-weight: 900; }
.me-hero .hp-uid { font-size: 12px; color: rgba(255,255,255,.87); margin-top: 5px; }
.me-tags { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.me-hero .hp-badge,
.me-hero .hp-badge.ok { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 6px; background: #fff; color: #2b4bf2; }
.me-hero .hp-badge.warn { background: #fff; color: #c47f00; }
.me-hero .hp-badge.bad { background: #fff; color: #e0414f; }
.me-score { font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 6px; background: rgba(255,255,255,.24); color: #fff; }

.me-body {
  position: relative; margin-top: -28px;
  padding: 16px 14px calc(92px + env(safe-area-inset-bottom, 0px));
  border-radius: 20px 20px 0 0; background: var(--bg0); min-height: 60vh;
}

.me-card {
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
.me-cell {
  display: flex; flex-direction: column; align-items: center; gap: 11px;
  padding: 22px 10px; border: none; background: transparent; color: var(--txt); cursor: pointer;
}
.me-cell + .me-cell { border-left: 1px solid var(--line); }
.me-cell:active { background: var(--panel2); }
.me-cell-ic {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #2b4bf2, #4a8cff); color: #fff;
  box-shadow: 0 10px 22px -10px rgba(43,75,242,.85);
}
.me-cell:nth-child(2) .me-cell-ic { border-radius: 13px; }
.me-cell-ic svg { width: 25px; height: 25px; }
.me-cell-lab { font-size: 13px; font-weight: 700; }

.me-list {
  margin-top: 12px; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; overflow: hidden;
}
.me-line {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 16px; border: none; background: transparent; color: var(--txt); cursor: pointer;
}
.me-line + .me-line { border-top: 1px solid var(--line); }
.me-line:active { background: var(--panel2); }
.me-line-lab { flex: 1; text-align: left; font-size: 14px; font-weight: 700; }

.me-logout {
  width: 100%; margin-top: 24px; padding: 15px; cursor: pointer;
  border: none; border-radius: 999px; background: var(--panel2); color: var(--txt);
  font-size: 15px; font-weight: 700;
}
.me-logout:active { opacity: .8; }

/* 子页浮层（资产页 / 个人中心共用）：盖住顶部栏与底部导航 */
.hp-sub { position: fixed; z-index: 120; }

/* 资产页：不显示顶部栏，保持底部导航可见（含 PC 端） */
body.profile-active { overflow: hidden; }
body.profile-active .topbar { display: none !important; }
body.profile-active .mb-nav { display: flex; z-index: 55; }

/* ============================================================
   相場（行情页 · 底部导航第二项）
   ------------------------------------------------------------
   · ☰ + コモディティ / 外国為替 分段 Tab + 三列（トレードペア / 最新価格 / 値上がり・値下がり）
   · 行：圆形图标 + 名称 + 24H 出来高 + 最新価格（JPY 副价）+ 涨跌徽章
   ============================================================ */
.home-mkt { display: none; }
body.mkt-active { overflow: hidden !important; }
body.mkt-active .topbar,
body.mkt-active .trade { display: none !important; }
body.mkt-active .home-mkt {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100vh; max-height: 100vh; overflow: hidden;
  background: var(--bg0); color: var(--txt);
}
body.mkt-active .mb-nav { display: flex; z-index: 55; }

.home-mkt .mk-hd, .home-mkt .mk-cols, .home-mkt .mk-list { width: 100%; max-width: var(--pw); }

/* ---------- 顶部：☰ + 分段 Tab ---------- */
.mk-hd {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
}
.mk-ic {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: none; background: none; color: var(--txt); cursor: pointer;
}
.mk-ic .ic { width: 21px; height: 21px; }
.mk-ic:active { opacity: .55; }

.mk-tabs {
  flex: 1; min-width: 0; display: flex; gap: 4px;
  background: var(--panel2); border-radius: 10px; padding: 3px;
}
.mk-tabs button {
  flex: 1; border: none; background: none; color: var(--txt2);
  font-size: 13px; font-weight: 800; padding: 8px 0; border-radius: 8px; cursor: pointer;
  transition: background .15s, color .15s;
}
.mk-tabs button.on { background: var(--panel); color: var(--txt); }

/* ---------- 列头 ---------- */
.mk-cols {
  flex: none; display: grid; grid-template-columns: 34px 1fr 92px 92px;
  gap: 8px; align-items: end; padding: 2px 14px 8px;
  font-size: 10.5px; font-weight: 700; color: var(--txt3);
}
.mk-cols span:first-child { grid-column: 1 / 3; }
.mk-cols span:nth-child(2) { text-align: right; }
.mk-cols span:last-child { text-align: center; line-height: 1.3; }

/* ---------- 行情列表 ---------- */
.mk-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px 64px; }
.mk-list ul { list-style: none; margin: 0; padding: 0; }
.mk-list li {
  display: grid; grid-template-columns: 34px 1fr 92px 92px; gap: 8px;
  align-items: center; padding: 9px 6px; border-radius: 12px;
  cursor: pointer; transition: background .12s;
}
.mk-list li:active { background: var(--panel2); }
.mk-list .mk-ico {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--panel2); color: var(--txt2);
}
.mk-list .mk-ico.metal { background: rgba(226,179,92,.16); color: #e2b35c; }
.mk-list .mk-ico.oil   { background: rgba(242,163,60,.16); color: #f2a33c; }
.mk-list .mk-ico.gas   { background: rgba(79,179,255,.16); color: #4fb3ff; }
.mk-list .mk-ico.fx    { background: rgba(120,140,255,.16); color: #8ea0ff; }
.mk-list .mk-nm { min-width: 0; }
.mk-list .mk-nm .n { font-size: 13.5px; font-weight: 800; }
.mk-list .mk-nm .v { font-size: 10px; color: var(--txt3); margin-top: 2px; }
.mk-list .mk-px { text-align: right; min-width: 0; }
.mk-list .mk-px .p { font-size: 14px; font-weight: 800; font-family: var(--num); }
.mk-list .mk-px .j { font-size: 9.5px; color: var(--txt3); margin-top: 2px; }
.mk-list .mk-ch { text-align: center; }
.mk-list .mk-ch .c {
  display: inline-block; min-width: 74px; padding: 6px 6px;
  font-size: 12px; font-weight: 800; font-family: var(--num);
  border-radius: 8px; color: #fff;
}
.mk-list .mk-ch .c.up { background: var(--up); }
.mk-list .mk-ch .c.down { background: var(--down); }
.mk-list li.mk-empty { display: block; padding: 40px 0; text-align: center; font-size: 12.5px; color: var(--txt3); }

/* ---------- 搜索页（☰ 打开） ---------- */
.mk-search {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100vh; overflow: hidden;
  background: var(--bg0); color: var(--txt);
}
.mk-search .mk-s-hd,
.mk-search .mk-s-tabs,
.mk-search .mk-cols,
.mk-search .mk-list { width: 100%; max-width: var(--pw); }
.mk-s-hd {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
  border-bottom: 1px solid var(--line);
}
.mk-s-ic { flex: none; width: 19px; height: 19px; color: var(--txt3); }
.mk-s-hd input {
  flex: 1; min-width: 0; border: none; outline: none; background: transparent;
  color: var(--txt); font-size: 14px; font-weight: 600;
}
.mk-s-hd input::placeholder { color: var(--txt3); font-weight: 500; }
.mk-s-hd input::-webkit-search-cancel-button { display: none; }
.mk-s-x {
  flex: none; border: none; background: none; color: var(--txt);
  font-size: 20px; line-height: 1; padding: 2px 6px; cursor: pointer;
}
.mk-s-tabs { flex: none; margin: 10px 14px 2px; width: auto; align-self: stretch; }

/* ============================================================
   注文（オプション保有 · 底部导航第四项 / K 线页右上角图标）
   ------------------------------------------------------------
   · 顶部「← + 居中标题」/ 分段 Tab / 列表 —— 全部跟随主题变量（明暗自适应）
   · 保有ポジション（现货持仓）/ 履歴（成交记录）
   ============================================================ */
.home-orders { display: none; }
body.orders-active { overflow: hidden !important; }
body.orders-active .topbar,
body.orders-active .trade { display: none !important; }
body.orders-active .home-orders {
  position: fixed; inset: 0; z-index: 45;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100vh; max-height: 100vh; overflow: hidden;
  background: var(--bg0); color: var(--txt);
}
body.orders-active .mb-nav { display: flex; z-index: 55; }

/* PC 端背景氛围（与首页/行情页一致） */
@media (min-width: 769px) {
  body.orders-active { background: radial-gradient(circle at 50% 10%, rgba(58,48,28,.25) 0%, var(--bg0) 60%); }
}

.od-hd, .od-tabs, .od-body { width: 100%; max-width: var(--pw); }

/* ---------- 顶部：← + 居中标题 ---------- */
.od-hd {
  flex: none; position: relative;
  display: flex; align-items: center; justify-content: center;
  height: calc(50px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--line); background: var(--bg0);
}
.od-hd h1 { font-size: 16px; font-weight: 700; letter-spacing: .2px; color: var(--txt); }
.od-back {
  position: absolute; left: 4px; bottom: 0; width: 40px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; color: var(--txt); cursor: pointer;
}
.od-back svg { width: 22px; height: 22px; }
.od-back:active { opacity: .55; }

/* ---------- 分段 Tab（与相場页同款：panel2 底 / 选中 panel 浮起） ---------- */
.od-tabs { flex: none; display: flex; gap: 4px; padding: 12px 14px 4px; background: var(--panel2); border-radius: 10px; margin: 10px 14px 2px; width: auto; align-self: stretch; }
.od-tabs button {
  flex: 1; border: none; background: none; color: var(--txt2);
  font-size: 13px; font-weight: 800; padding: 9px 0; border-radius: 8px; cursor: pointer;
  font-family: inherit; transition: background .15s, color .15s;
}
.od-tabs button.on { background: var(--panel); color: var(--txt); }

/* ---------- 内容区 / 空状态插图 ---------- */
.od-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.od-empty { display: flex; justify-content: center; padding: 54px 0 24px; }
.od-empty svg { width: 186px; height: auto; }
.od-load { padding: 46px 0; text-align: center; font-size: 12.5px; color: var(--txt3); letter-spacing: 2px; }

/* 保有ポジション */
.od-list { list-style: none; margin: 0; padding: 10px 14px 26px; display: flex; flex-direction: column; gap: 10px; }
.od-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.od-ico {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; background: var(--panel2); color: var(--txt2);
}
.od-ico.metal { background: rgba(226,179,92,.16); color: #e2b35c; }
.od-ico.oil   { background: rgba(242,163,60,.16); color: #f2a33c; }
.od-ico.gas   { background: rgba(79,179,255,.16); color: #4fb3ff; }
.od-ico.fx    { background: rgba(120,140,255,.16); color: #8ea0ff; }
.od-nm { flex: 1; min-width: 0; }
.od-nm b { display: block; font-size: 14px; font-weight: 800; color: var(--txt); }
.od-nm span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--txt3); }
.od-rt { text-align: right; }
.od-rt b { display: block; font-size: 14px; font-weight: 800; font-family: var(--num); color: var(--txt); }
.od-rt span { display: block; margin-top: 3px; font-size: 11.5px; font-weight: 700; color: var(--txt3); }
.od-rt span.up { color: var(--up); }
.od-rt span.down { color: var(--down); }

/* 履歴：每条记录一张信息卡（ラベル左 / 数値右） */
.od-hist { list-style: none; margin: 0; padding: 10px 14px 26px; display: flex; flex-direction: column; gap: 10px; }
.od-hcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 14px; }
.od-hrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0; }
.od-hrow .k { flex: none; font-size: 13px; color: var(--txt3); }
.od-hrow .v {
  min-width: 0; text-align: right; font-size: 13px; font-weight: 800;
  font-family: var(--num); font-variant-numeric: tabular-nums;
  color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.od-hrow .v.up { color: var(--up); }
.od-hrow .v.down { color: var(--down); }