/* =========================================================
   ICE Exchange - app.css (PWA layout fixed edition)
   Mobile readability optimized (no layout squeeze)
   ---------------------------------------------------------
   v2 · 仅颜色 token 化
   排版 / 间距 / 圆角 / 阴影结构值 完全未改动
   ========================================================= */

/* ---------- Root tokens ---------- */
:root{
  /* ═══════════════════════════════════════════════════════
     表面（6 层）
     bg → 页面底 · panel-3/4 → 浮起 · panel-2 → 卡片
     ═══════════════════════════════════════════════════════ */
  --bg:#070b14;
  --bg-2:#07152c;          /* 登录页渐变中段 */
  --bg-glow:#12203a;       /* 页面顶部光晕 */
  --panel:#0f1827;
  --panel-2:#0d1522;
  --panel-3:#121f32;
  --panel-4:#14253b;

  /* ═══════════════════════════════════════════════════════
     描边（3 层）
     line → 卡片/分隔 · line-2 → 输入/控件 · line-3 → 强调
     ═══════════════════════════════════════════════════════ */
  --line:#22374f;
  --line-2:#2b4666;
  --line-3:#34547f;

  /* ═══════════════════════════════════════════════════════
     文字（6 级）
     ═══════════════════════════════════════════════════════ */
  --text:#eef4ff;
  --text-2:#c8d8ea;
  --text-3:#9eb5d1;
  --muted:#8ea2be;
  --muted-2:#7188a5;
  --muted-3:#5f7ea0;

  /* ═══════════════════════════════════════════════════════
     语义 · 涨
     ═══════════════════════════════════════════════════════ */
  --green:#25d98f;
  --green-deep:#113828;
  --green-ink:#8ef0bf;
  --green-line:#1f6a47;
  --green-soft:rgba(37,217,143,.12);

  /* ═══════════════════════════════════════════════════════
     语义 · 跌
     ═══════════════════════════════════════════════════════ */
  --danger:#ff5f73;
  --danger-deep:#3a1a22;
  --danger-mid:#5a2121;
  --danger-ink:#ffb0b8;
  --danger-line:#7a3030;

  /* ═══════════════════════════════════════════════════════
     语义 · 警告
     ═══════════════════════════════════════════════════════ */
  --warn:#f0b34b;
  --warn-deep:#5e4716;
  --warn-ink:#ffe09e;
  --warn-soft:rgba(240,179,75,.12);

  /* ═══════════════════════════════════════════════════════
     语义 · 信息条
     ═══════════════════════════════════════════════════════ */
  --info-deep:#1f3551;

  /* ═══════════════════════════════════════════════════════
     语义 · 品牌蓝
     ═══════════════════════════════════════════════════════ */
  --blue:#4ea3ff;
  --blue-hi:#68c5ff;
  --blue-2:#347ec0;
  --blue-deep:#1c4776;
  --blue-ink:#8ec8f0;
  --blue-pale:#cde6ff;
  --blue-surface:#153149;
  --blue-soft:rgba(78,163,255,.12);
  --blue-wash:rgba(78,163,255,.18);
  --blue-line:rgba(78,163,255,.32);
  --blue-glow:rgba(78,163,255,.34);

  /* ═══════════════════════════════════════════════════════
     CTA 绿（注册 / 登录主按钮）
     ═══════════════════════════════════════════════════════ */
  --cta-1:#25b887;
  --cta-2:#178665;
  --cta-line:#1f8a63;
  --cta-ink:#ecfff7;

  /* ═══════════════════════════════════════════════════════
     表单表面（登录 / 注册专用）
     ═══════════════════════════════════════════════════════ */
  --field-1:#0f1d33;
  --field-2:#0d192c;

  /* ═══════════════════════════════════════════════════════
     品牌字标渐变
     ═══════════════════════════════════════════════════════ */
  --wm-1:#F7FBFF;
  --wm-2:#DCEAFF;
  --wm-3:#B7CAE7;

  /* ---------- 兼容别名（原样保留） ---------- */
  --line-legacy:#21324a;
  --text-legacy:#eef4ff;

  /* PWA safe-area unified */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 56px;
  --app-max: 450px;
  --x-pad: 12px;

  /* compatibility typography aliases */
  --fs-base:15px;
  --fs-sm:14px;
  --fs-xs:13px;
  --fs-xxs:13.2px;
}

/* ---------- Global ---------- */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  width:100%;
  min-height:100%;
  overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 50% -10%,var(--bg-glow) 0,var(--bg) 45%,var(--bg) 100%);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
}
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  font-size:var(--fs-base);
  line-height:1.52;
  -webkit-text-size-adjust:100%;
}
a{text-decoration:none;color:inherit}

/* 统一主容器（只在这里处理安全区） */
.phone{
  width:100%;
  max-width:var(--app-max);
  margin:0 auto;
  min-height:100dvh;
  box-sizing:border-box;
  padding:
    calc(var(--safe-top) + 8px)
    var(--x-pad)
    calc(64px + var(--safe-bottom) + 8px);
}

/* ---------- Layout helpers ---------- */
.center-screen{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}
.center-screen.fixed{
  min-height:100dvh;
  overflow:auto;
}
.center{text-align:center}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.break-all{word-break:break-all}
.small{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.section-title{
  font-size:clamp(24px,6vw,30px);
  font-weight:900;
  margin:2px 0 10px;
  line-height:1.18;
}

/* ---------- Cards ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--line);
  border-radius:14px;
  padding:13px;
  margin-bottom:10px;
}
.list-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 1px;
  border-bottom:1px solid var(--line);
}

/* ---------- Forms ---------- */
input,select,textarea,button{
  background:var(--panel-3);
  color:var(--text);
  border:1px solid var(--line-2);
  border-radius:10px;
  padding:11px 10px;
  font-size:15px;
}
button{cursor:pointer}
.btn-green{
  background:var(--green-deep);
  border-color:var(--green-line);
  color:var(--green-ink);
  font-weight:800;
}
.btn-danger{
  background:var(--danger-deep);
  border-color:var(--danger-line);
  color:var(--danger-ink);
  font-weight:800;
}
input[type="number"]{-moz-appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input,select,textarea,button{touch-action:manipulation}

/* ---------- Flash ---------- */
.flash{
  padding:11px;
  border-radius:10px;
  margin:8px 0;
  font-size:15px;
  line-height:1.55;
}
.flash.success{background:var(--green-deep)}
.flash.warning{background:var(--warn-deep)}
.flash.danger{background:var(--danger-mid)}
.flash.info{background:var(--info-deep)}

/* ---------- Top search / icon ---------- */
.search-row{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.icon-btn{
  width:36px;height:36px;border-radius:10px;
  background:var(--panel-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.search{
  flex:1;height:38px;border-radius:19px;
  background:var(--panel-3);border:1px solid var(--line-2);
  color:var(--muted);font-size:15px;padding:0 12px;
}
.wallet-chip{
  display:inline-flex;align-items:center;
  background:var(--panel-3);border:1px solid var(--line-2);
  border-radius:16px;padding:6px 12px;
  font-size:14px;font-weight:700;
}

/* ---------- Home snippets ---------- */
.total{
  font-size:clamp(34px,9vw,40px);
  font-weight:850;
  margin:8px 0 4px;
  line-height:1.1;
}
.pnl{font-size:15px;font-weight:700}
.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;margin:12px 0;
}
.stat-card{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:10px;
}
.stat-k{font-size:13px;color:var(--muted);line-height:1.45}
.stat-v{font-size:14px;font-weight:800;margin-top:3px}

.quick{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px;margin:12px 0;
}
.q-item{text-align:center}
.q-btn{
  width:50px;height:50px;border-radius:13px;
  background:var(--panel-4);border:1px solid var(--line-2);
  margin:0 auto 6px;display:flex;align-items:center;justify-content:center;
}
.q-btn.green{background:var(--green-deep);border-color:var(--green-line);color:var(--green-ink)}
.q-t{font-size:14px;font-weight:700;color:var(--text-2);line-height:1.35}

/* ---------- Assets row ---------- */
.asset-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 1px;gap:8px;
}
.asset-left{display:flex;gap:8px;align-items:center;min-width:0}
.coin-icon{
  width:30px;height:30px;border-radius:50%;overflow:hidden;
  background:var(--panel-4);display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.coin-icon img{width:100%;height:100%;object-fit:cover}
.sym{font-size:17px;font-weight:800;line-height:1}
.sub{font-size:13px;color:var(--muted);margin-top:2px;line-height:1.4}
.amount{font-size:16px;font-weight:800}
.value{font-size:13px;color:var(--text-2);line-height:1.4}

/* ---------- Table ---------- */
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
}
.table th,.table td{
  font-size:14px;
  padding:9px 8px;
  border-bottom:1px solid var(--line);
  text-align:left;
  white-space:nowrap;
  line-height:1.45;
}

/* ---------- Policy ---------- */
.policy{
  background:linear-gradient(90deg,var(--panel-4),var(--blue-surface));
  border:1px solid var(--line-2);color:var(--blue-pale);
  border-radius:10px;padding:10px;
  font-size:14px;position:relative;padding-right:24px;
  line-height:1.55;
}
.policy-close{
  position:absolute;right:6px;top:4px;border:none;background:transparent;
  color:var(--blue-pale);cursor:pointer;font-size:16px;
}

/* ---------- Skeleton / loader ---------- */
@keyframes shimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}
.skeleton{
  background:linear-gradient(90deg,var(--panel) 25%,var(--panel-4) 50%,var(--panel) 75%);
  background-size:600px 100%;
  animation:shimmer 1.5s infinite;
  border-radius:8px;
}
.page-loader{
  position:fixed;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,var(--blue),var(--green),var(--blue));
  background-size:200% 100%;
  animation:loader-slide 1.2s linear infinite;
  z-index:9999;opacity:0;transition:opacity .2s;
}
.page-loader.active{opacity:1}
@keyframes loader-slide{0%{background-position:200% 0}100%{background-position:-200% 0}}

.btn-loading{position:relative;color:transparent!important;pointer-events:none}
.btn-loading::after{
  content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;
  border:2px solid rgba(255,255,255,.3);
  border-top-color:#fff;border-radius:50%;
  animation:btn-spin .6s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}

.empty-state{text-align:center;padding:42px 20px}
.empty-state-svg{opacity:.5;margin-bottom:16px}
.empty-state-title{font-size:16px;font-weight:800;color:var(--muted);margin-bottom:6px}
.empty-state-desc{font-size:14px;color:var(--muted-3);line-height:1.65}

@keyframes toastIn{from{opacity:0;transform:translateX(-50%) translateY(-20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes toastOut{from{opacity:1}to{opacity:0;transform:translateX(-50%) translateY(-20px)}}

/* ---------- Bottom nav - ICE Exchange Pro ---------- */
.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:100%;
  max-width:var(--app-max);
  z-index:40;

  height:calc(66px + var(--safe-bottom));
  box-sizing:border-box;
  padding:7px 10px calc(7px + var(--safe-bottom));

  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:end;
  gap:4px;

  border-top:1px solid rgba(102,140,184,.28);
  background:
    linear-gradient(
      180deg,
      rgba(17,29,47,.97) 0%,
      rgba(9,17,29,.99) 100%
    );
  box-shadow:
    0 -10px 28px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035);

  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}

.nav-item{
  position:relative;
  min-width:0;
  height:51px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border-radius:13px;
  color:var(--muted-2);
  font-size:13px;
  line-height:1;
  font-weight:750;
  letter-spacing:.01em;
  text-decoration:none;
  transition:
    color .18s ease,
    background .18s ease,
    transform .14s ease;
}

.nav-item div{
  line-height:1;
  white-space:nowrap;
}

.nav-item::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:0;
  height:2px;
  transform:translateX(-50%);
  border-radius:999px;
  background:var(--blue);
  box-shadow:0 0 9px rgba(84,185,255,.68);
  transition:width .18s ease;
}

.nav-item:hover{
  color:var(--text-2);
  background:rgba(54,91,132,.16);
}

.nav-item:active{
  transform:scale(.94);
}

.nav-item.active{
  color:var(--text);
  background:linear-gradient(
    180deg,
    rgba(42,78,118,.30),
    rgba(24,48,77,.16)
  );
}

.nav-item.active::after{
  width:22px;
}

.nav-icon-wrap{
  width:29px;
  height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-icon-svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.85;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:
    stroke .18s ease,
    filter .18s ease,
    transform .18s ease;
}

.nav-item.active .nav-icon-svg{
  stroke:var(--blue-ink);
  filter:drop-shadow(0 0 6px var(--blue-glow));
  transform:translateY(-1px);
}

.nav-home-logo{
  width:23px;
  height:23px;
  stroke-width:1.7;
}

/* 中央 Trade 主按钮 */
.nav-trade{
  height:58px;
  margin-top:-12px;
  gap:3px;
  color:var(--blue-ink);
  overflow:visible;
}

.nav-trade::after{
  bottom:0;
}

.nav-trade-core{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--blue);
  border-radius:15px;
  background:
    radial-gradient(
      circle at 35% 20%,
      var(--blue-hi) 0%,
      var(--blue-2) 35%,
      var(--blue-deep) 100%
    );
  box-shadow:
    0 8px 18px rgba(0,0,0,.36),
    0 0 0 5px rgba(78,163,255,.09),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -7px 12px rgba(7,31,64,.30);
  transform:translateY(-1px);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease;
}

.nav-trade-svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:var(--text);
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.nav-trade-label{
  color:var(--blue-ink);
  font-size:13.2px;
  font-weight:900;
  letter-spacing:.02em;
}

.nav-trade:hover .nav-trade-core{
  filter:brightness(1.08);
  transform:translateY(-3px);
  box-shadow:
    0 11px 22px rgba(0,0,0,.42),
    0 0 0 6px rgba(78,163,255,.13),
    0 0 18px rgba(78,163,255,.25),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -7px 12px rgba(7,31,64,.30);
}

.nav-trade.active{
  color:var(--text);
  background:transparent;
}

.nav-trade.active .nav-trade-core{
  border-color:var(--blue-ink);
  background:
    radial-gradient(
      circle at 35% 18%,
      var(--blue-hi) 0%,
      var(--blue) 38%,
      var(--blue-deep) 100%
    );
  box-shadow:
    0 10px 24px rgba(0,0,0,.42),
    0 0 0 6px rgba(78,163,255,.17),
    0 0 22px var(--blue-glow),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -8px 14px rgba(7,31,64,.28);
}

.nav-trade.active .nav-trade-label{
  color:var(--text);
}

/* 手机端微调 */
@media(max-width:768px){
  .bottom-nav{
    height:calc(66px + var(--safe-bottom));
    padding-left:8px;
    padding-right:8px;
  }

  .nav-item{
    height:51px;
    font-size:13px;
  }

  .nav-icon-wrap{
    width:28px;
    height:26px;
  }

  .nav-icon-svg{
    width:21px;
    height:21px;
  }

  .nav-trade{
    height:57px;
    margin-top:-11px;
  }

  .nav-trade-core{
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .nav-trade-svg{
    width:23px;
    height:23px;
  }
}

@media(max-width:375px){
  .nav-item{
    font-size:13.2px;
  }

  .nav-trade-label{
    font-size:13px;
  }

  .nav-trade-core{
    width:42px;
    height:42px;
  }
}

@media(prefers-reduced-motion:reduce){
  .nav-item,
  .nav-icon-svg,
  .nav-trade-core{
    transition:none;
  }
}

/* ---------- Subpage topbar ---------- */
.subpage-topbar{
  display:flex;
  align-items:center;
  gap:8px;
  margin:2px 0 10px;
  min-height:36px;
}
.subpage-topbar .subpage-title{
  flex:1;text-align:center;
  font-size:clamp(22px,5.8vw,28px);
  font-weight:900;line-height:1.2;
}
.subpage-topbar .subpage-placeholder{
  width:36px;height:36px;flex-shrink:0;
}
.subpage-topbar .icon-btn{
  flex-shrink:0;color:var(--text-2);font-size:20px;line-height:1;
}

/* ---------- Deposit file row ---------- */
.dep-file-row{
  display:flex;align-items:center;gap:12px;
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:12px;padding:12px;margin-bottom:4px;
}
.dep-file-preview{
  width:64px;height:64px;border-radius:10px;
  background:var(--panel-3);border:2px dashed var(--line-2);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;transition:border-color .2s;
}
.dep-file-preview.has-file{border-style:solid;border-color:var(--cta-1)}
.dep-file-preview img{width:100%;height:100%;object-fit:cover}
.dep-file-info{flex:1;min-width:0}
.dep-file-label{font-size:14px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.dep-file-btn{
  display:inline-block;padding:8px 16px;border-radius:8px;
  background:var(--panel-4);border:1px solid var(--line-2);color:var(--blue-ink);
  font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;
}
.dep-file-btn:hover{background:var(--panel-4);border-color:var(--blue)}
.dep-file-name{
  display:block;font-size:13px;color:var(--muted-3);margin-top:5px;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dep-file-input-hidden{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;
}

/* ---------- Swap suggest ---------- */
.swap-token-input{
  width:100%;height:38px;border-radius:10px;
  background:var(--panel-3);border:1px solid var(--line-2);
  color:var(--text);padding:0 10px;font-size:15px;
}
.swap-suggest{
  position:absolute;left:0;right:0;top:42px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:10px;
  max-height:200px;overflow:auto;display:none;z-index:30;
}
.swap-suggest-item{
  padding:10px 10px;color:var(--text-2);font-size:15px;
  cursor:pointer;display:flex;justify-content:space-between;
}
.swap-suggest-item:hover{background:var(--panel-4)}

/* ---------- Auth pages ---------- */
.auth-screen{
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  padding-top:calc(20px + var(--safe-top));
  padding-bottom:calc(20px + var(--safe-bottom));
  background:
    radial-gradient(1100px 600px at 15% -8%,var(--blue-wash),transparent 55%),
    radial-gradient(900px 500px at 88% 112%,var(--green-soft),transparent 50%),
    linear-gradient(165deg,var(--bg) 0%,var(--bg-2) 44%,var(--bg) 100%);
  position:relative;
  overscroll-behavior-y:contain;
  -webkit-tap-highlight-color:transparent;
}
.auth-card{
  width:100%;max-width:480px;
  padding:32px 26px 26px;
  border-radius:22px;
  border:1px solid rgba(110,160,220,.30);
  background:linear-gradient(180deg,rgba(15,24,42,.94),rgba(8,14,28,.96));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:
    0 28px 72px rgba(0,0,0,.50),
    0 6px 24px rgba(38,98,180,.14),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.auth-title{
  font-size:clamp(30px,7vw,40px);
  line-height:1.12;
  letter-spacing:-.4px;
  margin:6px 0 10px;
  font-weight:880;
  color:var(--text);
}
.auth-subtitle{
  color:var(--text-3);font-size:15px;line-height:1.6;margin-bottom:14px;
}
.auth-subtitle a{color:var(--blue-hi);font-weight:800;text-decoration:none}
.auth-card .field-label{
  display:block;font-size:14px;color:var(--text-3);
  margin-bottom:5px;margin-top:10px;line-height:1.45;
}
.auth-card input,.auth-card textarea,.auth-card select{
  width:100%;
  border-radius:12px;
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--field-1),var(--field-2));
  color:var(--text);
  min-height:48px;
  padding:0 12px;
  font-size:16px;
  transition:border-color .18s,box-shadow .18s;
  -webkit-appearance:none;
  appearance:none;
}
.auth-card textarea{
  min-height:92px;padding:10px 12px;resize:vertical;font-size:16px;
}
.auth-card input:focus,.auth-card textarea:focus,.auth-card select:focus{
  outline:none;
  border-color:var(--blue-hi);
  box-shadow:0 0 0 3px var(--blue-wash),0 8px 20px rgba(31,91,170,.14);
}
.auth-btn-primary{
  width:100%;
  margin-top:14px;
  min-height:48px;
  border-radius:12px;
  border:1px solid var(--cta-line);
  background:linear-gradient(135deg,var(--cta-1) 0%,var(--cta-2) 100%);
  color:var(--cta-ink);
  font-weight:900;
  font-size:16px;
  letter-spacing:.2px;
  cursor:pointer;
}
.auth-btn-primary:hover{filter:brightness(1.06)}
.auth-btn-primary:active{filter:brightness(.94);transform:scale(0.985)}

.auth-btn-secondary{
  width:100%;margin-top:10px;min-height:44px;
  border-radius:12px;border:1px solid var(--line-3);
  background:linear-gradient(180deg,var(--panel-4),var(--field-1));
  color:var(--text-2);font-weight:800;font-size:16px;cursor:pointer;
}
.auth-tabs{display:flex;gap:10px;margin-bottom:14px}
.auth-tab-btn{
  min-height:42px;padding:0 16px;border-radius:12px;
  border:1px solid var(--line-3);
  background:linear-gradient(180deg,var(--panel-4),var(--field-1));
  color:var(--text-2);font-weight:800;font-size:15px;cursor:pointer;
}
.auth-tab-btn.active{
  border-color:var(--cta-1);
  background:linear-gradient(135deg,var(--cta-1),var(--cta-2));
  color:var(--cta-ink);
}
.auth-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:10px}
.auth-divider{border:none;border-top:1px solid var(--line);margin:12px 0}

/* mnemonic */
.mnemonic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.mnemonic-word{
  background:linear-gradient(180deg,var(--field-1),var(--field-2));
  border:1px dashed var(--line-3);border-radius:10px;padding:9px 10px;
  display:flex;align-items:center;gap:6px;
}
.mnemonic-word .mw-num{color:var(--blue-ink);font-weight:800;min-width:22px;text-align:right;font-size:13px}
.mnemonic-word .mw-text{color:var(--text);font-weight:700;word-break:break-word;font-size:14px}
.mnemonic-verify-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}

/* agreement */
.agreement-box{
  margin-top:12px;border:1px solid var(--line-2);
  background:linear-gradient(180deg,var(--field-1),var(--field-2));
  border-radius:12px;padding:12px;
}
.agreement-title{color:var(--text);font-size:15px;font-weight:800;margin-bottom:8px}
.agreement-text{color:var(--text-3);font-size:14px;line-height:1.62}
.agreement-sign-row{display:flex;gap:10px;align-items:center;margin-top:10px}

/* checkbox */
.auth-checkbox-row{
  display:flex;align-items:center;gap:8px;margin-top:10px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.auth-checkbox-row input[type="checkbox"]{
  position:absolute;opacity:0;width:0;height:0;pointer-events:none;
}
.auth-checkbox-box{
  flex-shrink:0;width:22px;height:22px;border-radius:6px;
  border:2px solid var(--line-3);
  background:linear-gradient(180deg,var(--field-1),var(--field-2));
  display:flex;align-items:center;justify-content:center;position:relative;
}
.auth-checkbox-box svg{width:14px;height:14px;opacity:0;transform:scale(.5);transition:all .18s}
.auth-checkbox-row input:checked + .auth-checkbox-box{
  border-color:var(--cta-1);background:var(--green-deep);
}
.auth-checkbox-row input:checked + .auth-checkbox-box svg{opacity:1;transform:scale(1)}
.auth-checkbox-label{font-size:14px;color:var(--text-3);line-height:1.5}

/* password eye */
.auth-pwd-wrap{position:relative}
.auth-pwd-input{padding-right:44px !important}
.auth-eye-btn{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border-radius:8px;border:1px solid transparent;
  background:transparent;display:flex;align-items:center;justify-content:center;
  color:var(--text-3);cursor:pointer;
}
.auth-eye-btn:hover{color:var(--text-2);background:var(--blue-soft);border-color:var(--line-2)}
.auth-eye-btn svg{
  width:18px;height:18px;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.auth-eye-btn .eye-off{display:none}
.auth-eye-btn.is-show .eye-on{display:none}
.auth-eye-btn.is-show .eye-off{display:block}

.auth-2fa-code-input{
  width:100%;max-width:220px;min-height:50px;margin:0 auto 16px;display:block;
  text-align:center;font-size:20px!important;font-weight:800;letter-spacing:6px;
  border-radius:14px;border:2px solid var(--line-2);background:var(--panel-2);color:var(--text);
  padding:0 8px;
}
.auth-2fa-code-input:focus{
  border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft);outline:none;
}
.auth-email-code-input{text-align:center;font-size:18px;letter-spacing:4px;font-weight:800}

/* ---------- Logo FX ---------- */
.auth-logo-wrap{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}
.auth-logo-svg{
  /* ★ LOGO 尺寸唯一由 .auth-logo-fx 上的 --auth-logo-size 控制（原 80px → 112px） */
  width:var(--auth-logo-size, 112px);
  height:var(--auth-logo-size, 112px);
  filter:drop-shadow(0 12px 22px rgba(56,122,235,.40)) drop-shadow(0 2px 6px rgba(0,0,0,.22));
}
.auth-wordmark{margin-top:10px;text-align:center;line-height:1}
.auth-wm-top{
  font-size:26px;font-weight:900;letter-spacing:.22em;
  background:linear-gradient(180deg,var(--wm-1) 0%,var(--wm-2) 58%,var(--wm-3) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.auth-wm-bottom{margin-top:5px;font-size:14px;font-weight:800;letter-spacing:.34em;color:var(--text-3)}
.auth-wm-tagline{margin-top:7px;font-size:13.2px;letter-spacing:.10em;text-transform:uppercase;color:var(--muted-2)}

.auth-logo-fx{
  position:relative;
  width:fit-content;
  margin:0 auto 10px;
  animation:fxFloat 3.6s ease-in-out infinite;

  /* ★ LOGO 尺寸唯一控制点 */
  --auth-logo-size:132px;
}
.auth-logo-fx .fx-core{position:relative;z-index:3;filter:drop-shadow(0 8px 20px rgba(78,163,255,.18))}
.auth-logo-fx .fx-ring{
  position:absolute;left:50%;top:50%;
  border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:1;
}
.auth-logo-fx .fx-ring-1{width:calc(var(--auth-logo-size, 112px) * 1.53);height:calc(var(--auth-logo-size, 112px) * 1.53);border:1px solid rgba(142,200,255,.28);animation:fxSpin 9s linear infinite}
.auth-logo-fx .fx-ring-2{width:calc(var(--auth-logo-size, 112px) * 1.73);height:calc(var(--auth-logo-size, 112px) * 1.73);border:1px dashed rgba(78,163,255,.22);animation:fxSpinRev 14s linear infinite}
.auth-logo-fx .fx-glow{
  position:absolute;left:50%;top:50%;width:calc(var(--auth-logo-size, 112px) * 1.88);height:calc(var(--auth-logo-size, 112px) * 1.88);transform:translate(-50%,-50%);
  border-radius:50%;background:radial-gradient(circle, rgba(78,163,255,.20) 0%, rgba(78,163,255,0) 68%);
  z-index:0;pointer-events:none;animation:fxGlow 2.8s ease-in-out infinite;
}
.auth-logo-fx.is-busy{animation-duration:1.2s}
.auth-logo-fx.is-busy .fx-ring-1{animation-duration:1.2s;border-color:rgba(142,240,191,.45)}
.auth-logo-fx.is-busy .fx-ring-2{animation-duration:1.8s;border-color:rgba(78,163,255,.5)}
.auth-logo-fx.is-busy .fx-glow{
  background:radial-gradient(circle, rgba(37,217,143,.28) 0%, rgba(78,163,255,0) 72%);
  animation-duration:.9s;
}
@keyframes fxSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes fxSpinRev{to{transform:translate(-50%,-50%) rotate(-360deg)}}
@keyframes fxGlow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- Welcome page isolation ---------- */
body.welcome-mode .phone{
  max-width:100% !important;
  padding:0 !important;
  min-height:100dvh;
}
body.welcome-mode #spaContent{
  min-height:100dvh;
}
body.welcome-mode #spaContent > .ob-wrap{
  position:fixed;inset:0;min-height:100dvh;border-radius:0;overflow:hidden;margin:0 !important;
  --ob-focus-y:42%;--ob-scale:1.02;
}
body.welcome-mode #spaContent > .ob-wrap .ob-content{
  position:relative;z-index:2;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end !important;
  padding:10px 14px calc(10px + var(--safe-bottom));
}
body.welcome-mode #spaContent > .ob-wrap .ob-panel{
  max-height:34dvh;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(10,18,34,.36),rgba(8,14,26,.70));
  border:1px solid rgba(62,90,128,.35);
  border-radius:16px;
}
body.welcome-mode #spaContent > .ob-wrap .ob-panel.is-expanded{max-height:74dvh}
body.welcome-mode #spaContent > .ob-wrap .ob-meta{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;
}
body.welcome-mode #spaContent > .ob-wrap .ob-meta-item{
  font-size:13px;font-weight:700;color:var(--blue-ink);
  background:rgba(40,78,126,.28);border:1px solid rgba(78,163,255,.30);
  border-radius:999px;padding:4px 10px;
}
body.welcome-mode #spaContent > .ob-wrap,
body.welcome-mode #spaContent > .ob-wrap .ob-bg-layer,
body.welcome-mode #spaContent > .ob-wrap .ob-bg-pane{contain:layout paint}
body.welcome-mode #spaContent > .ob-wrap .ob-bg-pane,
body.welcome-mode #spaContent > .ob-wrap .ob-bg-img{
  transform:translateZ(0);backface-visibility:hidden;will-change:opacity,transform;
}

/* ---------- Content visibility perf ---------- */
.asset-row,
.list-item,
.table tbody tr,
.stk-settle-table tbody tr,
.hot-card,
.cd-tf-btn,
.stat-card,
.q-item{
  content-visibility:auto;
  contain-intrinsic-size:auto 56px;
}
.card{
  content-visibility:auto;
  contain-intrinsic-size:auto 150px;
}
.auth-card,
.card:first-of-type,
.cd-price-card,
.stk-pos-card{
  content-visibility:visible;
  contain-intrinsic-size:none;
}

/* ---------- PWA page-specific spacing harmonization ---------- */
/* 这些容器不再重复加底部安全区，交给 .phone 统一处理 */
.ex-wrap,
.ex-wrap.with-hotbar,
.mx-wrap,
.assets-wrap,
.hx-wrap{
  padding-bottom:0 !important;
}

/* 客服固定页顶部/底部统一与安全区对齐（解决顶部局促） */
.scx-wrap{
  top:calc(var(--safe-top) + 2px) !important;
  bottom:calc(var(--nav-h) + var(--safe-bottom)) !important;
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .phone{
    max-width:100% !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  /* keep readable on tablets/large phones */
  body{font-size:15.5px !important}
  input,select,textarea{font-size:16px !important}
  .table{min-width:560px !important}
  .table th,.table td{font-size:14px !important;padding:8px 6px !important}
  .section-title{font-size:clamp(22px,6vw,28px) !important;line-height:1.2 !important}
}
@media (max-width:768px){
  .bottom-nav{
    width:100%!important;
    max-width:var(--app-max)!important;
    left:50%!important;
    right:auto!important;
    margin:0!important;
    transform:translateX(-50%)!important;
  }

  .nav-item{
    font-size:13px!important;
  }

  .nav-icon-svg{
    width:21px!important;
    height:21px!important;
  }
}
@media (max-width:520px){
  .auth-card{padding:24px 16px 20px;border-radius:18px}
  .auth-logo-fx{--auth-logo-size:112px}
  .auth-wm-top{font-size:22px}
  .auth-title{font-size:24px}
  .mnemonic-grid{grid-template-columns:repeat(3,1fr);gap:5px}
  .mnemonic-verify-grid{grid-template-columns:1fr}
}
@media (max-width:375px){
  .auth-card{padding:20px 12px 16px;border-radius:16px}
  .auth-logo-fx{--auth-logo-size:104px}
  .auth-wm-top{font-size:20px}
  .auth-title{font-size:22px}
  .auth-subtitle{font-size:14px}
  .auth-btn-primary{font-size:15px;min-height:44px}
  .mnemonic-word{padding:7px 8px}
  .mnemonic-word .mw-text{font-size:13px}
}
@media (max-height:500px) and (orientation:landscape){
  .auth-screen{
    align-items:flex-start;
    padding-top:calc(10px + var(--safe-top));
    padding-bottom:calc(10px + var(--safe-bottom));
  }
  .auth-card{max-width:560px;margin:0 auto}
  .auth-logo-wrap{margin-bottom:10px}
  .auth-logo-fx{--auth-logo-size:88px}
  .auth-wm-tagline{display:none}
}
@media (prefers-reduced-motion:reduce){
  .auth-card input,.auth-card textarea,.auth-card select,
  .auth-btn-primary,.auth-btn-secondary,.auth-tab-btn{transition:none}
  .auth-btn-primary:active,.auth-btn-secondary:active,.auth-tab-btn:active{transform:none}
  .auth-logo-fx,.auth-logo-fx .fx-ring,.auth-logo-fx .fx-glow{animation:none !important}
}
/* =========================================================
   ICE Exchange - Global Typography System
   Exchange-grade typography normalization
   Replace all duplicated typography overrides below this line
   ========================================================= */

:root{
  /* ---------- Font family ---------- */
  --font-ui:
    Inter,
    "SF Pro Display",
    "SF Pro Text",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-number:
    Inter,
    "SF Pro Display",
    "SF Pro Text",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  /* ---------- Exchange typography scale ---------- */
  --fs-body:15px;
  --fs-body-sm:14px;
  --fs-caption:13.2px;
  --fs-label:13.2px;
  --fs-micro:13.2px;

  --fs-h1:28px;
  --fs-h2:22px;
  --fs-h3:18px;
  --fs-section:16px;

  --lh-body:1.5;
  --lh-tight:1.2;
  --lh-caption:1.4;
}

/* =========================================================
   Global font normalization
   ========================================================= */

html,
body{
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:400;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-variant-numeric:tabular-nums;
}

body{
  letter-spacing:0;
}

button,
input,
select,
textarea{
  font-family:var(--font-ui);
  font-size:var(--fs-body-sm);
  line-height:1.35;
  font-weight:500;
  font-synthesis:none;
  letter-spacing:0;
}

button{
  font-weight:700;
}

input,
select,
textarea{
  font-variant-numeric:tabular-nums;
}

strong,
b{
  font-weight:750;
}

small{
  font-size:var(--fs-caption);
  line-height:var(--lh-caption);
}

/* =========================================================
   Semantic headings
   ========================================================= */

h1{
  font-size:var(--fs-h1);
  line-height:1.16;
  font-weight:800;
  letter-spacing:-.025em;
}

h2{
  font-size:var(--fs-h2);
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.018em;
}

h3{
  font-size:var(--fs-h3);
  line-height:1.25;
  font-weight:750;
}

h4,
h5,
h6{
  line-height:1.3;
  font-weight:700;
}

/* =========================================================
   Common application typography
   ========================================================= */

.section-title{
  font-size:clamp(22px,5.8vw,28px) !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  letter-spacing:-.02em;
}

.subpage-topbar .subpage-title{
  font-size:clamp(21px,5.5vw,27px) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.small{
  font-size:var(--fs-body-sm) !important;
  line-height:1.48 !important;
  font-weight:450;
}

.flash{
  font-size:var(--fs-body-sm) !important;
  line-height:1.5 !important;
}

.policy{
  font-size:var(--fs-body-sm) !important;
  line-height:1.52 !important;
}

.empty-state-title{
  font-size:16px !important;
  line-height:1.3 !important;
  font-weight:750 !important;
}

.empty-state-desc{
  font-size:var(--fs-body-sm) !important;
  line-height:1.6 !important;
}

/* =========================================================
   Numeric / financial values
   ========================================================= */

.total{
  font-size:clamp(32px,8.8vw,40px) !important;
  line-height:1.08 !important;
  font-family:var(--font-number);
  font-weight:800 !important;
  letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;
}

.amount{
  font-size:16px !important;
  line-height:1.2 !important;
  font-family:var(--font-number);
  font-weight:750 !important;
  font-variant-numeric:tabular-nums;
}

.value{
  font-size:var(--fs-caption) !important;
  line-height:1.35 !important;
  font-family:var(--font-number);
  font-weight:500 !important;
  font-variant-numeric:tabular-nums;
}

.pnl{
  font-size:var(--fs-body-sm) !important;
  line-height:1.35 !important;
  font-family:var(--font-number);
  font-weight:700 !important;
  font-variant-numeric:tabular-nums;
}

.stat-k{
  font-size:var(--fs-caption) !important;
  line-height:1.35 !important;
  font-weight:500 !important;
}

.stat-v{
  font-size:var(--fs-body-sm) !important;
  line-height:1.25 !important;
  font-weight:750 !important;
  font-variant-numeric:tabular-nums;
}

.sym{
  font-size:16px !important;
  line-height:1.15 !important;
  font-weight:800 !important;
}

.sub{
  font-size:var(--fs-caption) !important;
  line-height:1.35 !important;
  font-weight:450 !important;
}

.q-t{
  font-size:var(--fs-caption) !important;
  line-height:1.25 !important;
  font-weight:700 !important;
}

/* =========================================================
   Search / wallet chip / forms
   ========================================================= */

.search{
  font-size:var(--fs-body-sm) !important;
  line-height:1.2 !important;
  font-weight:500;
}

.wallet-chip{
  font-size:var(--fs-caption) !important;
  line-height:1.2 !important;
  font-weight:750 !important;
}

input,
select,
textarea{
  min-height:42px;
  font-size:16px !important;
}

textarea{
  line-height:1.5;
}

.auth-card input,
.auth-card textarea,
.auth-card select{
  min-height:48px;
  font-size:16px !important;
}

.auth-card .field-label{
  font-size:var(--fs-body-sm) !important;
  line-height:1.4 !important;
  font-weight:650 !important;
}

.auth-subtitle{
  font-size:var(--fs-body-sm) !important;
  line-height:1.55 !important;
}

.auth-checkbox-label{
  font-size:var(--fs-body-sm) !important;
  line-height:1.45 !important;
}

.agreement-title{
  font-size:var(--fs-body-sm) !important;
  line-height:1.35 !important;
  font-weight:750 !important;
}

.agreement-text{
  font-size:var(--fs-body-sm) !important;
  line-height:1.6 !important;
}

/* =========================================================
   Tables
   ========================================================= */

.table th,
.table td{
  font-size:var(--fs-body-sm) !important;
  line-height:1.4 !important;
  font-weight:500;
  font-variant-numeric:tabular-nums;
}

.table th{
  font-weight:750;
}

/* =========================================================
   Deposit / swap / KYC / staking small text
   ========================================================= */

.dep-file-label,
.dep-file-btn{
  font-size:var(--fs-body-sm) !important;
  line-height:1.3 !important;
}

.dep-file-name,
.kyc-hint,
.kyc-file-name{
  font-size:var(--fs-caption) !important;
  line-height:1.4 !important;
}

.swap-token-input,
.swap-suggest-item{
  font-size:var(--fs-body-sm) !important;
  line-height:1.35 !important;
}

.nav-link{
  font-size:var(--fs-body-sm) !important;
  line-height:1.3 !important;
  font-weight:600;
}

/* =========================================================
   Home / market typography
   ========================================================= */

.ex-brand-text{
  font-size:18px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
}

.ex-k{
  font-size:var(--fs-label) !important;
  line-height:1.2 !important;
  font-weight:750 !important;
}

.ex-sub{
  font-size:var(--fs-caption) !important;
  line-height:1.35 !important;
}

.ex-act-t{
  font-size:var(--fs-caption) !important;
  line-height:1.25 !important;
  font-weight:750 !important;
}

.ex-sec-t{
  font-size:var(--fs-section) !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

.ex-sec-r{
  font-size:var(--fs-body-sm) !important;
  line-height:1.25 !important;
}

.ex-stk-sym{
  font-size:var(--fs-body-sm) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.ex-stk-days{
  font-size:var(--fs-caption) !important;
}

.ex-stk-rate{
  font-size:17px !important;
  line-height:1.2 !important;
  font-weight:850 !important;
}

.ex-stk-sub{
  font-size:var(--fs-caption) !important;
}

.ex-fng-title{
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

.ex-fng-current{
  font-size:var(--fs-body-sm) !important;
  font-weight:750 !important;
}

.ex-fng-n,
.ex-fng-v{
  font-size:var(--fs-caption) !important;
}

.ex-mk-s1{
  font-size:var(--fs-body-sm) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.ex-mk-s2{
  font-size:var(--fs-caption) !important;
  line-height:1.25 !important;
}

.ex-mk-p{
  font-size:var(--fs-body-sm) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.ex-mk-c{
  font-size:var(--fs-caption) !important;
  line-height:1.2 !important;
  font-weight:750 !important;
}

/* =========================================================
   Bottom navigation
   Exchange-style bottom navigation:
   icon 22px, label 10px
   ========================================================= */

.bottom-nav{
  height:calc(66px + var(--safe-bottom)) !important;
  padding:5px 8px calc(5px + var(--safe-bottom)) !important;
  gap:3px !important;
  align-items:center !important;
}

.nav-item{
  height:52px !important;
  gap:3px !important;
  border-radius:12px !important;
  font-size:13.2px !important;
  line-height:1 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.nav-item div{
  font-size:13.2px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
}

.nav-icon-wrap{
  width:29px !important;
  height:28px !important;
}

.nav-icon-svg{
  width:21px !important;
  height:21px !important;
  stroke-width:1.75 !important;
}

.nav-home-logo{
  width:22px !important;
  height:22px !important;
}

.nav-trade{
  height:57px !important;
  margin-top:-7px !important;
  gap:3px !important;
}

.nav-trade-core{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
}

.nav-trade-svg{
  width:23px !important;
  height:23px !important;
}

.nav-trade-label{
  font-size:13.2px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

@media(max-width:375px){
  .nav-item,
  .nav-item div{
    font-size:13px !important;
  }

  .nav-trade-label{
    font-size:13px !important;
  }
}

/* =========================================================
   Auth page hierarchy
   ========================================================= */

.auth-title{
  font-size:clamp(25px,6.8vw,34px) !important;
  line-height:1.12 !important;
  font-weight:850 !important;
  letter-spacing:-.025em;
}

.auth-wm-top{
  font-size:25px !important;
  line-height:1 !important;
  font-weight:850 !important;
}

.auth-wm-bottom{
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.auth-wm-tagline{
  font-size:13px !important;
  line-height:1.2 !important;
}

/* =========================================================
   Welcome page
   ========================================================= */

.ob-page-brand-text{
  font-size:13.2px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.ob-top-left{
  font-size:13.2px !important;
  line-height:1.2 !important;
}

.ob-eyebrow{
  font-size:13.2px !important;
  line-height:1.2 !important;
}

.ob-title{
  font-size:clamp(25px,7vw,30px) !important;
  line-height:1.1 !important;
  font-weight:850 !important;
}

.ob-desc{
  font-size:var(--fs-body-sm) !important;
  line-height:1.5 !important;
}

.ob-tag{
  font-size:var(--fs-label) !important;
  line-height:1.15 !important;
  font-weight:700 !important;
}

.ob-btn{
  font-size:var(--fs-body-sm) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

/* =========================================================
   Responsive typography
   ========================================================= */

@media(max-width:768px){
  html,
  body{
    font-size:15px;
  }

  .section-title{
    font-size:clamp(21px,5.8vw,27px) !important;
  }

  .table th,
  .table td{
    font-size:13px !important;
  }
}

@media(max-width:375px){
  .small,
  .flash,
  .policy,
  .auth-subtitle,
  .auth-card .field-label,
  .agreement-text{
    font-size:13px !important;
  }

  .table th,
  .table td{
    font-size:13.2px !important;
  }

  .sym{
    font-size:15px !important;
  }

  .amount{
    font-size:15px !important;
  }
}

/* =========================================================
   Accessibility
   ========================================================= */

:focus-visible{
  outline:2px solid rgba(102,176,255,.85);
  outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}
/* =========================================================
   ICE Exchange - Final Exchange Typography Authority
   Must remain at the very end of app.css
   ========================================================= */

:root{
  --font-ui:
    Inter,
    "SF Pro Text",
    "SF Pro Display",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  --font-number:
    Inter,
    "SF Pro Text",
    "SF Pro Display",
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Arial,
    sans-serif;

  --exchange-body:15px;
  --exchange-secondary:14px;
  --exchange-caption:13.2px;
  --exchange-label:13.2px;
  --exchange-micro:13.2px;

  --exchange-title:22px;
  --exchange-page-title:20px;
  --exchange-section-title:16px;
  --exchange-value:16px;

  --exchange-line-height:1.45;
}

/* ---------- Absolute global font inheritance ---------- */

html,
body,
body *{
  font-family:var(--font-ui);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

html,
body{
  font-size:var(--exchange-body) !important;
  line-height:var(--exchange-line-height) !important;
  font-weight:400;
  letter-spacing:0;
}

button,
input,
select,
textarea{
  font-family:var(--font-ui) !important;
  font-size:16px !important;
  line-height:1.35 !important;
  font-weight:500;
  letter-spacing:0;
}

button{
  font-weight:750;
}

strong,
b{
  font-weight:750;
}

small{
  font-size:var(--exchange-caption) !important;
  line-height:1.4 !important;
}

/* ---------- Standard headings ---------- */

h1{
  font-size:28px !important;
  line-height:1.16 !important;
  font-weight:800 !important;
}

h2{
  font-size:22px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

h3{
  font-size:18px !important;
  line-height:1.25 !important;
  font-weight:750 !important;
}

h4,
h5,
h6{
  font-size:16px !important;
  line-height:1.3 !important;
  font-weight:700 !important;
}

/* ---------- Common text levels ---------- */

.small,
.flash,
.policy,
.empty-state-desc{
  font-size:var(--exchange-secondary) !important;
  line-height:1.5 !important;
}

.field-label,
.auth-card .field-label,
.kyc-label,
.profile-field-label{
  font-size:var(--exchange-caption) !important;
  line-height:1.4 !important;
  font-weight:700 !important;
}

.sub,
.value,
.dep-file-name,
.kyc-hint,
.kyc-file-name{
  font-size:var(--exchange-caption) !important;
  line-height:1.4 !important;
}

.stat-k,
.ex-k,
.ex-fng-upd,
.ex-stk-days,
.ex-stk-sub,
.ex-mk-s2,
.nav-item,
.nav-item div{
  font-size:var(--exchange-label) !important;
  line-height:1.25 !important;
}

.empty-state-title,
.agreement-title,
.ex-sec-t,
.ex-fng-title{
  font-size:var(--exchange-section-title) !important;
  line-height:1.3 !important;
  font-weight:800 !important;
}

/* ---------- Page titles ---------- */

.section-title{
  font-size:clamp(22px,5.8vw,28px) !important;
  line-height:1.18 !important;
  font-weight:800 !important;
}

.subpage-topbar .subpage-title{
  font-size:clamp(21px,5.5vw,27px) !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

/* ---------- Financial numbers ---------- */

.total,
.ex-total,
.sum-total{
  font-family:var(--font-number) !important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  font-weight:800 !important;
}

.total{
  font-size:clamp(32px,8.8vw,40px) !important;
  line-height:1.08 !important;
}

.ex-total{
  font-size:34px !important;
  line-height:1.08 !important;
}

.sum-total{
  font-size:30px !important;
  line-height:1.08 !important;
}

.amount,
.stat-v,
.value,
.pnl,
.asset-manager-quote,
.ex-stk-rate,
.ex-mk-p,
.ex-mk-c{
  font-family:var(--font-number) !important;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* ---------- Forms ---------- */

input,
select,
textarea{
  min-height:42px;
}

.auth-card input,
.auth-card textarea,
.auth-card select{
  min-height:48px;
  font-size:16px !important;
}

.auth-btn-primary,
.auth-btn-secondary{
  font-size:16px !important;
  font-weight:800 !important;
}

.auth-tab-btn{
  font-size:14px !important;
  font-weight:750 !important;
}

/* ---------- Tables ---------- */

.table th,
.table td{
  font-size:var(--exchange-secondary) !important;
  line-height:1.4 !important;
  font-variant-numeric:tabular-nums;
}

.table th{
  font-weight:750 !important;
}

/* ---------- Bottom navigation ---------- */

.nav-item,
.nav-item div{
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
}

.nav-trade-label{
  font-size:13px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

/* ---------- Staking typography normalization ---------- */

.staking-intro-page,
.staking-home-page,
.stake-order-page,
.stake-pending-page,
.stake-history-page,
.order-detail-page,
.reject-page,
.early-page,
.active-position-page,
.generic-order-page{
  font-family:var(--font-ui) !important;
}

.staking-intro-title,
.staking-home-title,
.stake-order-title,
.stake-pending-title,
.stake-history-title,
.order-detail-title,
.reject-title,
.early-title,
.active-position-title,
.generic-order-title{
  font-size:20px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.staking-intro-heading{
  font-size:24px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.staking-feature-title,
.stake-asset-symbol,
.staking-final-symbol,
.staking-active-symbol,
.generic-symbol{
  font-size:15px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

.staking-feature-desc,
.staking-intro-description,
.staking-rules-list,
.stake-asset-plan,
.stake-section-hint,
.stake-review-hint,
.stake-pending-subtitle,
.stake-pending-note,
.stake-history-plan,
.generic-plan{
  font-size:13.2px !important;
  line-height:1.5 !important;
}

.staking-rules-title,
.staking-profit-title,
.staking-plans-title,
.staking-active-title,
.stake-info-head,
.stake-reward-title-wrap,
.active-position-card-title,
.generic-card-title{
  font-size:16px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
}

.staking-final-daily,
.staking-active-rate,
.stake-asset-rate-value,
.stake-reward-row strong,
.stake-info-row strong{
  font-size:13px !important;
  line-height:1.3 !important;
  font-weight:800 !important;
}

.stake-amount-input{
  font-family:var(--font-number) !important;
  font-size:28px !important;
  font-weight:800 !important;
  font-variant-numeric:tabular-nums;
}

.stake-plan-tab-days{
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.stake-plan-tab-rate{
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:750 !important;
}

.stake-info-row,
.stake-reward-row,
.active-position-info-label,
.active-position-info-value,
.generic-row{
  font-size:13.2px !important;
  line-height:1.4 !important;
}

.stake-submit-button,
.staking-enter-button,
.active-position-action,
.generic-button{
  font-size:14px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

@media(max-width:420px){
  body,
  html{
    font-size:15px !important;
  }

  .staking-intro-description,
  .staking-feature-desc,
  .staking-rules-list,
  .stake-asset-plan,
  .stake-section-hint,
  .stake-review-hint,
  .stake-pending-subtitle,
  .stake-pending-note,
  .stake-history-plan,
  .generic-plan{
    font-size:13.2px !important;
  }

  .stake-amount-input{
    font-size:26px !important;
  }

  .table th,
  .table td{
    font-size:13px !important;
  }
}
/* =========================================================
   Final UI Typography Overrides
   Must remain at the very end of app.css
   ========================================================= */

/* ---------- Home ---------- */

.ex-trend-toggle{
  font-size:13px !important;
}

.ex-act-t{
  font-size:13px !important;
}

/* ---------- Option trading page ---------- */

.md-switch button{
  font-size:13px !important;
}

/* ---------- Wallet ---------- */

.sum-switch-btn{
  font-size:13.2px !important;
}

.hero-action{
  font-size:14px !important;
}

.hf-chip{
  font-size:13px !important;
}

/* ---------- Staking ---------- */

.stake-amount-input{
  font-size:28px !important;
}

@media(max-width:420px){
  .stake-amount-input{
    font-size:26px !important;
  }
}
/* =========================================================
   Final Typography Fix - v3
   ========================================================= */

.ex-trend-toggle{
  font-size:13px !important;
}

.ex-act-t{
  font-size:13px !important;
}

.md-switch button{
  font-size:13px !important;
}

.sum-switch-btn{
  font-size:13.2px !important;
}

.hero-action{
  font-size:14px !important;
}

.hf-chip{
  font-size:13px !important;
}

.stake-amount-input{
  font-size:28px !important;
}

@media(max-width:420px){
  .stake-amount-input{
    font-size:26px !important;
  }

  .hero-action{
    font-size:14px !important;
  }
}
/* =========================================================
   Final Bottom Navigation Normalization
   Trade 与其他底部导航保持完全一致
   ========================================================= */

.bottom-nav .nav-trade{
  height:52px !important;
  margin-top:0 !important;
  gap:3px !important;
  overflow:visible !important;
  color:var(--muted-2) !important;
  background:transparent !important;
  transform:none !important;
}

.bottom-nav .nav-trade::after{
  bottom:3px !important;
}

.bottom-nav .nav-trade-core{
  width:29px !important;
  height:28px !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;
  transform:none !important;
  filter:none !important;
}

.bottom-nav .nav-trade-svg{
  width:21px !important;
  height:21px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.85 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  filter:none !important;
  transform:none !important;
}

.bottom-nav .nav-trade-label{
  color:inherit !important;
  font-size:13px !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
}

.bottom-nav .nav-trade:hover{
  color:var(--text-2) !important;
  background:rgba(54,91,132,.16) !important;
  transform:none !important;
}

.bottom-nav .nav-trade.active{
  color:var(--text) !important;
  background:linear-gradient(
    180deg,
    rgba(42,78,118,.30),
    rgba(24,48,77,.16)
  ) !important;
}

.bottom-nav .nav-trade.active .nav-trade-core{
  width:29px !important;
  height:28px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  filter:none !important;
}

.bottom-nav .nav-trade.active .nav-trade-svg{
  stroke:var(--blue-ink) !important;
  filter:drop-shadow(0 0 6px var(--blue-glow)) !important;
  transform:translateY(-1px) !important;
}

.bottom-nav .nav-trade.active .nav-trade-label{
  color:var(--text) !important;
}

@media(max-width:768px){
  .bottom-nav .nav-trade{
    height:52px !important;
    margin-top:0 !important;
  }

  .bottom-nav .nav-trade-core{
    width:28px !important;
    height:27px !important;
  }

  .bottom-nav .nav-trade-svg{
    width:21px !important;
    height:21px !important;
  }
}

@media(max-width:375px){
  .bottom-nav .nav-trade-label{
    font-size:13.2px !important;
  }

  .bottom-nav .nav-trade-core{
    width:28px !important;
    height:27px !important;
  }
}
/* =========================================================
   FINAL MOBILE READABILITY AUTHORITY
   Must be the absolute last CSS in app.css
   ========================================================= */

/* ---------- Manage Assets ---------- */

body .asset-manager-page .asset-manager-intro-desc{
  font-size:13px !important;
  line-height:1.55 !important;
}

body .asset-manager-page .asset-manager-count,
body .asset-manager-page .asset-manager-live,
body .asset-manager-page .asset-manager-section-action{
  font-size:13.2px !important;
  line-height:1.3 !important;
}

body .asset-manager-page .asset-manager-section-title{
  font-size:13.2px !important;
  line-height:1.25 !important;
  letter-spacing:.08em !important;
}

body .asset-manager-page .asset-manager-symbol{
  font-size:15px !important;
  line-height:1.2 !important;
}

body .asset-manager-page .asset-manager-name{
  font-size:13.2px !important;
  line-height:1.3 !important;
}

body .asset-manager-page .asset-manager-quote{
  font-size:13.2px !important;
  line-height:1.3 !important;
}

body .asset-manager-page .asset-manager-change{
  font-size:13.2px !important;
  line-height:1.3 !important;
}

/* 弹出的币种选择列表 */
body .asset-sheet .asset-sheet-title{
  font-size:16px !important;
}

body .asset-sheet .asset-sheet-search{
  font-size:16px !important;
}

body .asset-sheet .asset-sheet-item-symbol{
  font-size:14px !important;
}

body .asset-sheet .asset-sheet-item-name,
body .asset-sheet .asset-sheet-item-price{
  font-size:13.2px !important;
  line-height:1.3 !important;
}

/* ---------- Bottom navigation ---------- */

body .bottom-nav .nav-item,
body .bottom-nav .nav-item div,
body .bottom-nav .nav-trade-label{
  font-size:13px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

/* ---------- Remove visibly tiny controls ---------- */

body .ex-trend-toggle{
  font-size:13px !important;
}

body .hf-chip{
  font-size:13px !important;
}

body .sum-switch-btn{
  font-size:13px !important;
}

/* ---------- Small screens ---------- */

@media(max-width:420px){
  body .asset-manager-page .asset-manager-name{
    font-size:13.2px !important;
  }

  body .asset-manager-page .asset-manager-quote,
  body .asset-manager-page .asset-manager-change{
    font-size:13px !important;
  }

  body .bottom-nav .nav-item,
  body .bottom-nav .nav-item div,
  body .bottom-nav .nav-trade-label{
    font-size:13.2px !important;
  }
}

/* =========================================================
   ★ DESKTOP CENTERED PHONE LAYOUT · FINAL
   ---------------------------------------------------------
   目的
     桌面浏览器（宽 ≥ 1025px）打开时，除 OPS 后台外，
     所有用户端页面统一以 450px 手机宽度水平居中显示，
     不必按 F12 切换设备模式。

   与上一版的区别（修正"底色变暗"）
     · .phone 不再画任何底色（保持 transparent），
       让 body 顶部那层 --bg-glow(#12203a) 光晕透上来；
     · 取消 6px 近黑环 + 重黑影，改为可选的一根 1px 淡描边。

   影响范围
     · 只在宽 ≥ 1025px 时生效，手机 / 平板完全不受影响；
     · OPS 后台使用独立的 OPS_SHELL（.ops-layout），
       不包含 .phone，天然不受影响。

   想换宽度
     只改下面的 --ice-phone-w 一处即可。
   ========================================================= */

@media (min-width: 1025px) {

  :root{
    --ice-phone-w: 450px;
  }

  /* ═══════════════════════════════════════════════════════
     1) 主容器 .phone —— 只负责居中，不画任何底色
     ═══════════════════════════════════════════════════════
     用 html body… 提高优先级，压过各页面自己写的：
       body:has(.ice-page) .phone
       body.welcome-mode .phone
       body.sc-support-page .phone
       body.gc-support-page .phone
     里对 .phone 的 margin:0 / width:100% / max-width:none /
     padding:0 / background 覆盖。
     ═══════════════════════════════════════════════════════ */

  html body .phone,
  html body:has(.ice-page) .phone,
  html body.welcome-mode .phone,
  html body.sc-support-page .phone,
  html body.gc-support-page .phone{
    width: var(--ice-phone-w) !important;
    max-width: var(--ice-phone-w) !important;
    min-width: 0 !important;

    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    min-height: 100vh !important;
    box-sizing: border-box !important;

    /* ★ 关键：保持透明。
       body 顶部那层 --bg-glow(#12203a) 光晕，
       靠 .phone 透明才透得上来。
       这里写任何纯色都会把它盖住 → 页面变暗。 */
    background: transparent !important;
    box-shadow: none !important;
  }

  /* 登录 / 注册 / KYC 等待页自己有底色（#080e17 + 渐变），保留原样，
     不要被上面的 transparent 覆盖掉 */
  html body:has(.ice-page) .phone{
    background: #080e17 !important;
  }

  /* ═══════════════════════════════════════════════════════
     2) 底部导航 —— 与 .phone 同宽、同水平位置
     ═══════════════════════════════════════════════════════ */

  html body .bottom-nav{
    left: 50% !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: translateX(-50%) !important;
    width: var(--ice-phone-w) !important;
    max-width: var(--ice-phone-w) !important;
  }

  /* ═══════════════════════════════════════════════════════
     3) 全屏 fixed 容器收进手机框
        .ob-wrap  = 欢迎页
        .scx-wrap = 客服会话页
        .gcx-wrap = 游客客服页
     它们原本是 position:fixed; inset:0（相对视口），
     不收窄就会铺满整屏，看不到居中效果。

     这里用 left: calc(50% - 宽度/2) 而不是 transform，
     避免产生新的包含块、也避免和 backdrop-filter 互相干扰。
     ═══════════════════════════════════════════════════════ */

  html body .ob-wrap,
  html body.welcome-mode #spaContent > .ob-wrap,
  html body .scx-wrap,
  html body .gcx-wrap{
    left: calc(50% - var(--ice-phone-w) / 2) !important;
    right: auto !important;
    width: var(--ice-phone-w) !important;
    max-width: var(--ice-phone-w) !important;
  }

  /* ═══════════════════════════════════════════════════════
     4) 遮罩 / 弹层 / 查看器 —— 同样收进手机框
     这些元素原本都是 position:fixed; inset:0，
     在桌面会铺满整屏。收窄后视觉上才像"手机内的弹窗"。
     （已用 calc 居中，不动 transform，不影响 backdrop-filter）
     ═══════════════════════════════════════════════════════ */

  html body .ice-submit-mask,
  html body .page-loader,
  html body .ob-lang-mask,
  html body .scx-viewer,
  html body .dp-viewer,
  html body .kyc-modal,
  html body .ot-modal,
  html body .swap-mask,
  html body .asset-sheet-mask,
  html body .receive-sheet-mask,
  html body .settings-sheet-mask,
  html body .deposit-selector-mask{
    left: calc(50% - var(--ice-phone-w) / 2) !important;
    right: auto !important;
    width: var(--ice-phone-w) !important;
    max-width: var(--ice-phone-w) !important;
  }

  /* ═══════════════════════════════════════════════════════
     5) 底部升起的弹层 —— 本身已经居中，只需统一宽度
     它们都用 left:50% + translate(-50%…) 定位，
     width 写死的是 min(100%, 450px)，桌面下 100% 会取视口宽，
     这里统一改成 --ice-phone-w，跟着手机框一起变。
     ═══════════════════════════════════════════════════════ */

  html body .settings-sheet,
  html body .asset-sheet,
  html body .receive-sheet,
  html body .deposit-selector-sheet,
  html body .ob-lang-sheet,
  html body .swap-sheet{
    width: var(--ice-phone-w) !important;
    max-width: var(--ice-phone-w) !important;
  }

  /* ═══════════════════════════════════════════════════════
     6) 欢迎页里两个"贴屏幕边"的浮动元素改为贴手机框
        .ob-page-brand 原本 fixed + left:14px  → 会贴浏览器左边缘
        .ob-lang-btn   原本 fixed + right:14px → 会贴浏览器右边缘
        改成 absolute 后，锚点变成 .ob-wrap（已被收成 450px），
        于是它们贴在手机框的左 / 右内边。
     ═══════════════════════════════════════════════════════ */

  html body.welcome-mode .ob-page-brand,
  html body.welcome-mode .ob-lang-btn{
    position: absolute !important;
  }

  /* ═══════════════════════════════════════════════════════
     7) 可选：极细的"手机边框"
        只用 1px 淡描边，不填色、不投影 —— 不会压暗页面。
        不想要边框的话，把下面这一小段整体删掉即可。
     ═══════════════════════════════════════════════════════ */

  html body:not(.welcome-mode):not(.sc-support-page):not(.gc-support-page) .phone{
    box-shadow: 0 0 0 1px rgba(96,148,208,.14) !important;
  }
}

/* =========================================================
   桌面端：入场动画与 .phone 同宽、同位置
   只在宽 ≥ 1025px 生效，手机 / 平板不受影响
   ========================================================= */

@media (min-width: 1025px){
  html body .ice-intro{
    left: calc(50% - var(--ice-phone-w) / 2) !important;
    right: auto !important;
    width: var(--ice-phone-w) !important;
    max-width: var(--ice-phone-w) !important;
  }
}

/* =========================================================
   Mobile minimum text size
   ========================================================= */

:root{
  --ice-mobile-font-min:13.2px;
}

/* =========================================================
   Staking order amount input size
   ========================================================= */

body .stake-order-page .stake-amount-input{
  font-size:22px !important;
}

@media(max-width:420px){
  body .stake-order-page .stake-amount-input{
    font-size:20px !important;
  }
}

/* =========================================================
   页面底部留白去重
   .phone 统一负责底部导航的滚动空间；
   其他页面容器不再重复预留导航高度。
   首页 .ex-wrap 和资产页 .assets-wrap 保持原样。
   ========================================================= */

body #spaContent .profile-page,
body #spaContent .twofa-page,
body #spaContent .kyc-page,
body #spaContent .asset-manager-page,
body #spaContent .mk-page,
body #spaContent .cd-wrap,
body #spaContent .ot-page,
body #spaContent .staking-intro-page,
body #spaContent .staking-home-page,
body #spaContent .stake-pending-page,
body #spaContent .stake-history-page,
body #spaContent .active-position-page,
body #spaContent .generic-order-page,
body #spaContent .order-detail-page,
body #spaContent .reject-page,
body #spaContent .early-page,
body #spaContent .option-detail-page,
body #spaContent .swap-page,
body #spaContent .swap-review-page,
body #spaContent .swap-result-page,
body #spaContent .swap-history-page,
body #spaContent .receive-page,
body #spaContent .deposit-form-page,
body #spaContent .deposit-wait-page,
body #spaContent .wd-wrap,
body #spaContent .wd3-wrap,
body #spaContent .ntc-page,
body #spaContent .ntd-page,
body #spaContent .settings-page,
body #spaContent .support-home-page,
body #spaContent .rdc-page,
body #spaContent .rdp-page,
body #spaContent .dp-detail-page,
body #spaContent .dp-activity-page,
body #spaContent .wd-detail-page,
body #spaContent .wd-activity-page{
  padding-bottom:0 !important;
}

/* =========================================================
   PWA layout hotfix — must remain at the very end of app.css
   ========================================================= */

/* 1) 底部导航：统一不透明底色，保持原有 margin 居中 */
.bottom-nav{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;

  /*
   * 所有页面使用同一个不透明底板。
   * 不再使用渐变或半透明背景，
   * 底部安全区与导航内容区保持同色。
   */
  background:#0d1522 !important;

  /*
   * 去掉原来继承的外侧黑色阴影，
   * 防止导航上方出现额外的深色带。
   * 原有 border-top 保持不变。
   */
  box-shadow:none !important;

  left:0 !important;
  right:0 !important;
  margin:0 auto !important;
  transform:none !important;
}

@media (max-width:768px){
  .bottom-nav{
    left:0 !important;
    right:0 !important;
    margin:0 auto !important;
    transform:none !important;
  }
}

@media (min-width:1025px){
  html body .bottom-nav{
    left: 0 !important;
    right: 0 !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* 2) overflow-x：hidden → clip（不再把 body 变成滚动容器） */
html,body{overflow-x:clip}
@supports not (overflow:clip){
  html,body{overflow-x:hidden}
}

/* 3) 视口高度补 vh 兜底（顺序不能反）
      ★ 新增第三行：--ice-vh 由 JS 实测写入。
      Android Chrome / iOS standalone 从后台恢复时，
      100dvh 可能停留在旧值（例如屏幕高的 55%），
      导致 .phone 缩水、.bottom-nav 贴到错误底部。
      JS 实测值只要存在就优先使用。 */
.phone{
  min-height:100vh;
  min-height:100dvh;
  min-height:var(--ice-vh, 100dvh);
}

/* 4) --nav-h 与实际导航高度对齐 */
:root{--nav-h:66px}

/* 5) 消除 .card 的滚动高度抖动 */
.card{
  content-visibility:visible;
  contain-intrinsic-size:none;
}

/* =========================================================
   Hidden bottom sheets must not darken the bottom navigation
   ========================================================= */

/* Home: Fear & Greed details
   Market: liquidation details */
body .ex-fngs-sheet,
body .mkliq-sheet{
  visibility:hidden;
  pointer-events:none;

  transition:
    transform .3s cubic-bezier(.22,.9,.3,1),
    visibility 0s linear .3s;
}

body .ex-fngs-sheet.show,
body .mkliq-sheet.show{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s,0s;
}

/* Home / Settings: language and currency sheets */
body .settings-sheet{
  visibility:hidden;
  pointer-events:none;

  transition:
    transform .22s ease,
    visibility 0s linear .22s;
}

body .settings-sheet.show{
  visibility:visible;
  pointer-events:auto;
  transition-delay:0s,0s;
}

@media(prefers-reduced-motion:reduce){
  body .ex-fngs-sheet,
  body .mkliq-sheet,
  body .settings-sheet{
    transition:none !important;
  }
}

/* =========================================================
   Hide viewport scrollbar (mobile / PWA)
   · 只隐藏"绘制出来的滚动条"，不禁用滚动能力
   · 只作用于根元素，绝不波及内部容器
   ========================================================= */

html,
body{
  scrollbar-width: none;        /* Firefox 64+ */
  -ms-overflow-style: none;     /* 旧 Edge / IE */
}

/* Blink / WebKit：伪元素必须挂在根元素上才生效 */
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width: 0;
  height: 0;
  background: transparent;
  display: none;
}

/* 部分 Android 内核即使 width:0 仍会画轨道，一并清零 */
html::-webkit-scrollbar-thumb,
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-track{
  background: transparent;
  border: 0;
  box-shadow: none;
}
/* =========================================================
   ICE · Mobile / PWA Typography Floor · v1
   ★ 必须放在 app.css 最末尾（在 scrollbar 那段之后）
   ★ 只覆盖字号与行高，不改颜色、间距、圆角、阴影
   ========================================================= */

@media (max-width: 768px){

  /* ── 1. 基准 ── */
  html,
  body{
    font-size:15.5px !important;
    line-height:1.52 !important;
  }

  /* ── 2. 说明 / 摘要级 ── */
  .small,
  .flash,
  .policy,
  .empty-state-desc{
    font-size:15px !important;
    line-height:1.55 !important;
  }

  /* ── 3. 标签 / 副值级：当前 13~13.2px，最影响观感 ── */
  .sub,
  .value,
  .stat-k,
  .ex-k,
  .ex-mk-s2,
  .ex-mk-c,
  .ex-stk-days,
  .ex-stk-sub,
  .ex-fng-n,
  .ex-fng-v,
  .dep-file-name,
  .dep-file-label,
  .kyc-hint,
  .kyc-file-name,
  .field-label,
  .auth-card .field-label,
  .kyc-label,
  .profile-field-label,
  .agreement-text,
  .auth-checkbox-label{
    font-size:14px !important;
    line-height:1.5 !important;
  }

  /* ── 4. 表格 ── */
  .table th,
  .table td{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  /* ── 5. 底部导航（原 13 / 13.2px） ── */
  body .bottom-nav .nav-item,
  body .bottom-nav .nav-item div,
  body .bottom-nav .nav-trade-label{
    font-size:14px !important;
    line-height:1.15 !important;
  }

  /* ── 6. 首页小控件（原 13px） ── */
  body .ex-trend-toggle,
  body .hf-chip,
  body .ex-act-t,
  body .sum-switch-btn{
    font-size:13.5px !important;
  }

  /* ── 7. 首页 Today Change（原 13px，你每天看最多的数字之一） ── */
  .trend-delta,
  .trend-period-label{
    font-size:14px !important;
    line-height:1.4 !important;
  }
}

/* 窄屏兜底：底部导航 5 等分，320~360px 时回退，避免 Mark​ets 折行 */
@media (max-width: 360px){
  body .bottom-nav .nav-item,
  body .bottom-nav .nav-item div,
  body .bottom-nav .nav-trade-label{
    font-size:13.2px !important;
  }
}

/* =========================================================
   Small text readability
   只优化辅助小字，不修改标题、主金额和图标
   ========================================================= */

/* 说明文字：更亮、不过粗，长语种自然换行 */
body #spaContent :is(
  .settings-item-subtitle,
  .asset-manager-intro-desc,
  .staking-feature-desc,
  .staking-rules-list,
  .stake-risk-note,
  .stake-review-hint,
  .ft-note,
  .ft-sheet-sub,
  .ft-confirm-sub,
  .ft-tpsl-subtitle,
  .mk-liq-sub,
  .mkliq-note,
  .ex-fngs-note,
  .ex-fngs-metric-k,
  .ex-fngs-big-k,
  .cd-about-desc,
  .receive-note,
  .deposit-proof-hint,
  .wd2fa-note,
  .funds-history-detail
){
  min-width:0;
  font-size:14px !important;
  line-height:1.6 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:#9aafc6 !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
  hyphens:auto;
  -webkit-hyphens:auto;
  text-overflow:clip;
}

/* 设置页副文案取消单行裁切，让行高自然增长 */
body #spaContent .settings-item-subtitle{
  overflow:visible;
}

/* 简短标签：保持紧凑，但不再灰暗、拥挤 */
body #spaContent :is(
  .aw-kpi-k,
  .ft-position-label,
  .cd-stats3-label,
  .cd-row-k,
  .profile-status-label
){
  min-width:0;
  font-size:13.5px !important;
  line-height:1.45 !important;
  font-weight:500 !important;
  letter-spacing:0 !important;
  color:#9aafc6 !important;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* 趋势刻度：只提亮，不放大，避免六个时间标签相互挤压 */
body #spaContent .trend-axis-price span,
body #spaContent .trend-axis-time span{
  color:#9aafc6;
  font-weight:500;
  letter-spacing:0;
  text-shadow:none;
}