:root {
  --primary: #05c3dd;
  --primary-2: #2fd8d8;
  --primary-soft: rgba(5, 195, 221, .14);
  --green: #00c076;
  --red: #f6465d;
  --yellow: #f6c453;
  --bg: #000;
  --panel: #121212;
  --panel-2: #1a1a1c;
  --panel-3: #222225;
  --line: #232426;
  --line-soft: rgba(255, 255, 255, .07);
  --text: #fff;
  --muted: #9b9b9b;
  --muted-2: #6b6b6b;
  --topbar-h: 52px;
  --bottomnav-h: 62px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: 0;
  max-width: 560px;
  margin-inline: auto;
  position: relative;
}
body::-webkit-scrollbar { display: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
a { color: inherit; text-decoration: none; }
input, select, textarea { outline: none; }

/* ============ top bar ============ */
.m-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: rgba(0, 0, 0, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.m-brand {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.m-brand-mark {
  width: 26px;
  height: 25px;
  position: relative;
  border-left: 5px solid currentColor;
  border-right: 5px solid currentColor;
  border-bottom: 5px solid currentColor;
  border-top: 0;
  border-radius: 0 0 15px 15px;
  box-sizing: border-box;
}
.m-brand-mark::before,
.m-brand-mark::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.m-brand-mark::before {
  width: 5px;
  height: 11px;
  right: -5px;
  top: -1px;
  border-radius: 0 0 3px 3px;
}
.m-brand-mark::after {
  width: 4px;
  height: 4px;
  left: 9px;
  top: -9px;
  border-radius: 1px;
  box-shadow: 6px 3px 0 currentColor, 12px 7px 0 currentColor, 6px -5px 0 currentColor;
}
.m-topbar .m-brand {
  margin-right: auto;
  font-size: 19px;
}
.m-topbar .m-brand .m-brand-mark {
  transform: scale(.88);
  transform-origin: left bottom;
}
@keyframes uzxLogoTint {
  0%, 100% { color: #fff; filter: drop-shadow(0 0 0 rgba(5, 195, 221, 0)); }
  50% { color: #05c3dd; filter: drop-shadow(0 0 12px rgba(5, 195, 221, .42)); }
}
@keyframes uzxLogoBits {
  0%, 100% { transform: translate(0, 0); }
  40% { transform: translate(1px, -2px); }
  70% { transform: translate(-1px, 1px); }
}
.m-sheet-logo {
  display: flex;
  justify-content: center;
  padding: 20px 0 2px;
}
.m-sheet-logo .m-brand {
  transform: scale(1.18);
  animation: uzxLogoTint 2.8s ease-in-out infinite;
}
.m-sheet-logo .m-brand-mark::after {
  animation: uzxLogoBits 1.8s ease-in-out infinite;
}
.m-balance-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.m-balance-pill .w {
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--primary);
  color: #04252b;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.m-balance-pill .chev {
  width: 8px;
  height: 8px;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: rotate(45deg) translateY(-2px);
}
.m-icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ddd;
}
.m-icon-btn:active { background: rgba(255, 255, 255, .08); }
.m-icon-btn svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.m-icon-btn .badge-dot {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ============ bottom nav ============ */
.m-bottomnav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 100%);
  z-index: 60;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(12, 12, 13, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.m-nav-item {
  display: grid;
  place-items: center;
  gap: 3px;
  align-content: center;
  color: #8a8a8a;
  font-size: 10.5px;
  font-weight: 700;
}
.m-nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.m-nav-item.active { color: #fff; }
.m-nav-item.center .orb {
  width: 44px;
  height: 44px;
  margin-top: -18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #17e0e0 0%, #06a9c0 100%);
  color: #04252b;
  box-shadow: 0 6px 18px rgba(5, 195, 221, .4);
}
.m-nav-item.center .orb svg { stroke: #04252b; stroke-width: 2; }

/* ============ drawer ============ */
.m-drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.m-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 81;
  width: min(300px, 82vw);
  background: #0e0e10;
  border-left: 1px solid var(--line);
  transform: translateX(105%);
  transition: transform .22s ease;
  overflow-y: auto;
  scrollbar-width: none;
}
.m-drawer::-webkit-scrollbar { display: none; }
.m-drawer-open .m-drawer-mask { opacity: 1; pointer-events: auto; }
.m-drawer-open .m-drawer { transform: translateX(0); }
.m-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px;
  border-bottom: 1px solid var(--line);
}
.m-drawer-head .avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #04252b;
  background: linear-gradient(135deg, #20f4ff, #0a7985);
}
.m-drawer-head .who strong { display: block; font-size: 15px; }
.m-drawer-head .who small { color: var(--muted); font-size: 12px; }
.m-drawer-group { padding: 10px 8px 4px; }
.m-drawer-title {
  padding: 6px 10px;
  color: var(--muted-2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.m-drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #ddd;
}
.m-drawer-link:active { background: rgba(255, 255, 255, .06); }
.m-drawer-link .ic {
  width: 22px;
  display: grid;
  place-items: center;
  color: var(--primary);
  opacity: .9;
}
.m-ic { display: block; }
.m-drawer-link.danger { color: var(--red); }
.m-drawer-foot { padding: 14px 16px 28px; color: var(--muted-2); font-size: 11px; }

/* ============ bottom sheet ============ */
.m-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(10px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.m-sheet-mask.open { opacity: 1; pointer-events: auto; }
.m-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 105%);
  width: min(560px, 100%);
  z-index: 91;
  max-height: 86vh;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% -8%, rgba(5, 195, 221, .16), transparent 33%),
    linear-gradient(180deg, #1b1c1e 0%, #111214 100%);
  border-radius: 18px 18px 0 0;
  border: 1px solid rgba(255, 255, 255, .075);
  border-bottom: 0;
  box-shadow: 0 -24px 90px rgba(0, 0, 0, .56), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: transform .24s ease;
  scrollbar-width: none;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.m-sheet::-webkit-scrollbar { display: none; }
.m-sheet.open { transform: translate(-50%, 0); }

/* 仅「查看全部资金记录」弹窗固定高度，其它弹窗保持内容自适应 */
#recordsSheet {
  height: 78vh;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#recordsSheet .m-sheet-head,
#recordsSheet .m-sheet-logo {
  flex: 0 0 auto;
}
#recordsSheet .m-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.m-sheet-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px;
  background: rgba(27, 28, 30, .88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.m-sheet-head h3 { margin: 0; font-size: 18px; font-weight: 900; color: #fff; }
.m-sheet-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #202225;
  border: 1px solid rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  transition: background .16s ease, transform .16s ease;
}
.m-sheet-close:active { background: #2a2d31; transform: scale(.94); }
.m-sheet-body { padding: 18px; overflow: visible; }
.m-confirm-msg {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}
.m-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.m-fiat-list {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  margin: 0 -2px;
  padding: 0 2px 2px;
  scrollbar-width: none;
}
.m-fiat-list::-webkit-scrollbar { display: none; }
.m-sheet .m-field { overflow: visible; }
.m-select-wrap { position: relative; z-index: 1; }
.m-select-wrap.open { z-index: 120; }

/* ============ toast ============ */
.m-toast-wrap {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottomnav-h) + 24px);
  transform: translateX(-50%);
  z-index: 120;
  display: grid;
  gap: 8px;
  width: max-content;
  max-width: 90vw;
}
.m-toast {
  padding: 11px 18px;
  border-radius: 999px;
  background: #1d1d20;
  border: 1px solid #333;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  animation: m-toast-in .2s ease;
}
.m-toast.error { border-color: rgba(246, 70, 93, .5); }
@keyframes m-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ common ============ */
.m-page {
  min-height: 100vh;
  padding-bottom: calc(var(--bottomnav-h) + 26px);
}
.m-section { padding: 14px 12px 0; }
.m-card {
  border-radius: 14px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(135deg, #151516 0%, #101112 100%);
  padding: 16px;
}
.m-h2 { margin: 0 0 12px; font-size: 17px; font-weight: 800; }

.m-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: #eee;
  font-size: 14px;
  font-weight: 700;
}
.m-btn:active { transform: scale(.97); }
.m-btn.primary {
  background: linear-gradient(180deg, #17d3e6 0%, #069ab5 100%);
  border-color: transparent;
  color: #04252b;
  font-weight: 800;
}
.m-btn.green { background: var(--green); border-color: transparent; color: #fff; font-weight: 800; }
.m-btn.red { background: var(--red); border-color: transparent; color: #fff; font-weight: 800; }
.m-btn.ghost { background: transparent; }
.m-btn.block { width: 100%; height: 46px; border-radius: 12px; font-size: 15px; }
.m-btn.block.pill { height: 48px; border-radius: 999px; font-size: 16px; font-weight: 800; }
.m-btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: 8px; }
.m-btn:disabled { opacity: .45; }

.m-share-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.m-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 34px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}
.m-share-btn svg { flex: 0 0 auto; }
.m-share-btn:active { transform: scale(.97); opacity: .92; }
.m-share-btn.telegram { background: #229ED9; }
.m-share-btn.whatsapp { background: #25D366; }
.m-share-btn.x { background: #111111; }
.m-share-btn.facebook { background: #1877F2; }
@media (max-width: 380px) {
  .m-share-btn span { display: none; }
  .m-share-btn { padding: 0; }
}

.m-auth-foot { margin-top: 14px; text-align: center; }
.m-auth-foot-note { color: var(--muted-2); font-size: 12.5px; line-height: 1.5; }
.m-auth-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.m-auth-link.inline { display: inline; font-size: inherit; }
.m-auth-code,
.m-auth-invite { display: none; }
.m-code-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.m-code-row .m-input { min-width: 0; }
.m-code-btn {
  height: 46px;
  padding: 0 12px;
  border-radius: 11px;
  border: 1px solid rgba(5, 195, 221, .35);
  background: rgba(5, 195, 221, .12);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
}
.m-code-btn:disabled { opacity: .45; }

.m-field { display: grid; gap: 7px; margin-bottom: 14px; }
.m-field label { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.m-input, .m-select {
  height: 46px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #0c0c0e;
  color: #fff;
  width: 100%;
  font-size: 14px;
}
.m-input:focus, .m-select:focus { border-color: rgba(5, 195, 221, .55); }

.m-file-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(5, 195, 221, .45);
  background: rgba(5, 195, 221, .06);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.m-file-btn:active { transform: scale(.99); }
.m-file-btn.is-ready {
  border-style: solid;
  border-color: rgba(5, 195, 221, .7);
  background: rgba(5, 195, 221, .12);
}
.m-file-btn-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(5, 195, 221, .18);
  color: var(--cyan, #05c3dd);
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.m-file-btn-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.m-file-btn-text strong {
  font-size: 14px;
  font-weight: 700;
}
.m-file-btn-text small {
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* custom select */
.m-select-wrap select { display: none !important; }
.m-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #0c0c0e;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.m-select-wrap.open .m-select-btn { border-color: rgba(5, 195, 221, .55); }
.m-select-btn .chev {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .16s ease;
}
.m-select-wrap.open .m-select-btn .chev { transform: rotate(-135deg) translateY(-2px); }
.m-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 130;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  scrollbar-width: none;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .09);
  background: linear-gradient(180deg, #1b1c1e 0%, #131416 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
  /* 不要用 toast 动画的 transform，fixed 定位时会把菜单甩飞 */
  animation: none;
}
.m-select-menu.is-portal {
  position: fixed;
  right: auto;
  animation: m-select-portal-in .14s ease;
}
@keyframes m-select-portal-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.m-select-menu::-webkit-scrollbar { display: none; }
.m-select-wrap.open .m-select-menu { display: block; }
.m-select-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  color: #ddd;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.m-select-opt:hover, .m-select-opt:active { background: rgba(255, 255, 255, .06); color: #fff; }
.m-select-opt.active { color: var(--primary); background: var(--primary-soft); }
.m-select-opt.active::after { content: "✓"; font-size: 13px; }
.m-textarea {
  min-height: 90px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #0c0c0e;
  color: #fff;
  width: 100%;
  resize: vertical;
}

/* pill change badge */
.m-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 74px;
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.m-pill.up { background: var(--green); }
.m-pill.down { background: var(--red); }
.m-pill.flat { background: #4a4d52; }

/* tabs */
.m-tabs {
  display: flex;
  gap: 22px;
  padding: 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab {
  position: relative;
  padding: 12px 1px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}
.m-tab.active { color: #fff; }
.m-tab.active::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 0;
  height: 3px;
  border-radius: 99px;
  background: var(--primary);
}
.m-tabs.sub .m-tab { font-size: 13.5px; padding: 10px 1px; }

/* chips */
.m-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px;
}
.m-chips::-webkit-scrollbar { display: none; }
.m-chip {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: #ccc;
  font-size: 12.5px;
  font-weight: 700;
}
.m-chip.active {
  background: var(--primary-soft);
  border-color: rgba(5, 195, 221, .5);
  color: var(--primary);
}

/* coin rows */
.m-coin-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}
.m-coin-row:active { background: rgba(255, 255, 255, .03); }
.m-coin-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.m-coin-dot {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c, #333);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}
.m-coin-id .nm { min-width: 0; }
.m-coin-id .nm strong { display: block; font-size: 14.5px; font-weight: 800; }
.m-coin-id .nm small { color: var(--muted-2); font-size: 11.5px; }
.m-coin-price { text-align: right; }
.m-coin-price strong { display: block; font-size: 14.5px; font-weight: 800; }
.m-coin-price small { color: var(--muted-2); font-size: 11px; }
.m-fav {
  color: #555;
  font-size: 17px;
  width: 26px;
  text-align: center;
}
.m-fav.on { color: var(--yellow); }

/* cells / list rows */
/* 防止 .m-field { display } 盖掉 HTML hidden，导致「已隐藏」的 2FA 区仍显示 */
[hidden] { display: none !important; }

.m-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.m-cell:last-child { border-bottom: 0; }
.m-cell .grow { flex: 1; min-width: 0; }
.m-cell .grow strong { display: block; font-size: 14px; font-weight: 700; }
.m-cell .grow small { color: var(--muted); font-size: 12px; }
.m-cell .val { color: #ddd; font-size: 13.5px; font-weight: 700; }
.m-cell .arr {
  width: 8px;
  height: 8px;
  border-right: 2px solid #666;
  border-bottom: 2px solid #666;
  transform: rotate(-45deg);
}
.m-cell-ic {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 15px;
}

/* quick actions */
.m-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px 12px 4px;
}
.m-quick-item {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: #ddd;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
button.m-quick-item,
.m-quick-item[type="button"] {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.25;
  color: inherit;
}
.m-quick-item > span:not(.qic) {
  display: block;
  max-width: 100%;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.25;
  word-break: break-word;
}
.m-quick-item .qic {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--primary);
  font-size: 19px;
}
.m-quick-item:active .qic { background: var(--primary-soft); }
.m-quick-item.m-shortcut-opt {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  line-height: 1.25;
  color: inherit;
}
.m-shortcut-opt.is-picked .qic {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px var(--primary-soft);
  background: rgba(5, 195, 221, .1);
}

/* stats */
.m-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.m-stat {
  border-radius: 12px;
  border: 1px solid var(--line-soft);
  background: var(--panel);
  padding: 14px;
}
.m-stat .k { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.m-stat .v {
  font-size: 16px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-stat .v.green { color: var(--green); }

/* segment control */
.m-seg {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  padding: 4px;
  border-radius: 11px;
  background: #0c0c0e;
  border: 1px solid var(--line);
}
.m-seg button {
  height: 34px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}
.m-seg button.active { background: var(--panel-3); color: #fff; }
.m-seg button.active.buy { background: var(--green); color: #fff; }
.m-seg button.active.sell { background: var(--red); color: #fff; }

/* percent row */
.m-pct-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-pct-row button {
  height: 30px;
  border-radius: 7px;
  background: #0c0c0e;
  border: 1px solid var(--line);
  color: #aaa;
  font-size: 12px;
  font-weight: 700;
}
.m-pct-row button.active { border-color: var(--primary); color: var(--primary); }

/* order book */
.m-ob { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; font-size: 12px; }
.m-ob .col-head {
  display: flex;
  justify-content: space-between;
  color: var(--muted-2);
  font-size: 11px;
  padding-bottom: 6px;
}
.m-ob-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 3.5px 4px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-ob-row .depth {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: .12;
  border-radius: 2px;
}
.m-ob-row.ask .px { color: var(--red); }
.m-ob-row.bid .px { color: var(--green); }
.m-ob-row .qty { color: #bbb; }
.m-ob-mid {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 19px;
  font-weight: 900;
  padding: 6px 0;
}

/* 简易波动线（订单簿下方空位） */
.m-spark {
  margin-top: 10px;
  padding: 8px 6px 6px;
  border-radius: 10px;
  background: #0a0a0c;
  border: 1px solid rgba(255, 255, 255, .06);
}
.m-spark-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
  padding: 0 2px;
}
.m-spark-head strong {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.m-spark-head small {
  font-size: 11px;
  font-weight: 700;
}
.m-spark canvas {
  display: block;
  width: 100%;
  height: 72px;
}

/* table-ish rows */
.m-trow {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  font-size: 13px;
}
.m-trow:last-child { border-bottom: 0; }
.m-trow .r1 { display: flex; justify-content: space-between; align-items: center; font-weight: 800; }
.m-trow .r2 { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.m-trow .green { color: var(--green); }
.m-trow .red { color: var(--red); }
.m-trow .muted { color: var(--muted-2); font-weight: 700; }

/* progress */
.m-progress {
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.m-progress i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--primary), #14e0a5);
  width: var(--w, 0%);
}

/* accordion */
.m-acc { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 10px; overflow: hidden; }
.m-acc-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.m-acc-q .pl { color: var(--primary); font-size: 18px; transition: transform .18s ease; }
.m-acc.open .m-acc-q .pl { transform: rotate(45deg); }
.m-acc-a { max-height: 0; overflow: hidden; transition: max-height .22s ease; }
.m-acc.open .m-acc-a { max-height: 480px; }
.m-acc-a p { margin: 0; padding: 0 14px 14px; color: #b8b8b8; font-size: 13px; line-height: 1.65; }

/* pagination */
.m-pager {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 16px 0 6px;
}
.m-pager button {
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: #ccc;
  font-size: 13px;
  font-weight: 700;
}
.m-pager button.active { background: var(--primary); border-color: var(--primary); color: #04252b; }
.m-pager button:disabled { opacity: .4; }

/* badges */
.m-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  line-height: 1;
}
.m-badge.green { background: rgba(0, 192, 118, .14); color: var(--green); }
.m-badge.red { background: rgba(246, 70, 93, .14); color: var(--red); }
.m-badge.cyan { background: var(--primary-soft); color: var(--primary); }
.m-badge.yellow { background: rgba(246, 196, 83, .14); color: var(--yellow); }
.m-badge.gray { background: rgba(255, 255, 255, .07); color: #bbb; }

/* search */
.m-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin: 12px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--muted);
}
.m-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: #fff;
  font-size: 14px;
}
.m-search svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

/* empty */
.m-empty {
  padding: 44px 16px;
  text-align: center;
  color: var(--muted-2);
  font-size: 13px;
}
.m-empty .ic { font-size: 30px; display: block; margin-bottom: 10px; opacity: .5; }
.m-empty .ic svg { margin: 0 auto; }
.m-cell-ic svg, .m-quick-item .qic svg { display: block; }

/* banner cards (home) */
.m-banner-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 10px;
  padding: 14px 12px 0;
  align-items: stretch;
}
.m-banner-side { display: grid; gap: 10px; align-content: start; }
.m-banner-carousel {
  position: relative;
  align-self: stretch;
  border-radius: 16px;
  overflow: hidden;
}
.m-banner-track {
  display: flex;
  height: 100%;
  transition: transform .42s ease;
  will-change: transform;
}
.m-banner-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.m-banner-carousel .m-banner-slide.m-banner {
  min-height: 100%;
  height: 100%;
}
.m-banner-dots {
  position: absolute;
  left: 16px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 3;
  pointer-events: none;
}
.m-banner-dot {
  pointer-events: auto;
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
  transition: width .2s ease, background .2s ease;
}
.m-banner-dot.active {
  width: 14px;
  background: var(--primary);
}
.m-banner {
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background:
    radial-gradient(circle at 80% 10%, rgba(5, 195, 221, .12), transparent 45%),
    linear-gradient(150deg, #16181a 0%, #0e0f10 100%);
  padding: 16px;
  min-height: 118px;
  position: relative;
  overflow: hidden;
  display: block;
  color: inherit;
  text-decoration: none;
}
.m-banner-copy { position: relative; z-index: 2; }
.m-banner .kicker { font-size: 11px; color: var(--muted); font-weight: 700; }
.m-banner h3 { margin: 6px 0 10px; font-size: 18px; font-weight: 900; color: var(--primary-2); line-height: 1.2; }
.m-banner strong { display: block; font-size: 14px; font-weight: 900; color: #fff; line-height: 1.25; }
.m-banner p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.m-banner .cta {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: #000;
  font-size: 12.5px;
  font-weight: 800;
  margin-top: 4px;
}
.m-banner.stack {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-height: 0;
  padding: 13px 14px;
}
.m-banner-gift,
.m-banner-slide.m-banner-gift {
  background:
    radial-gradient(circle at 88% 78%, rgba(5, 195, 221, .22), transparent 42%),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .04), transparent 40%),
    linear-gradient(155deg, #17191c 0%, #0d0e10 100%);
}
.m-banner-invite {
  background:
    radial-gradient(circle at 88% 78%, rgba(99, 102, 241, .18), transparent 42%),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .04), transparent 40%),
    linear-gradient(155deg, #17191c 0%, #0d0e10 100%);
}
.m-banner-copyhero {
  background:
    radial-gradient(circle at 88% 78%, rgba(0, 192, 118, .18), transparent 42%),
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .04), transparent 40%),
    linear-gradient(155deg, #17191c 0%, #0d0e10 100%);
}
.m-banner-earn {
  background:
    radial-gradient(circle at 92% 70%, rgba(255, 193, 7, .14), transparent 46%),
    linear-gradient(150deg, #17181a 0%, #101113 100%);
}
.m-banner-trade {
  background:
    radial-gradient(circle at 92% 72%, rgba(0, 192, 118, .14), transparent 46%),
    linear-gradient(150deg, #17181a 0%, #101113 100%);
}
.m-banner-3d {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* 3D gift (welcome) */
.m-banner-gift .m-banner-3d,
.m-banner-slide.m-banner-gift .m-banner-3d {
  right: 8px;
  bottom: 6px;
  width: 78px;
  height: 78px;
}
.m-3d-gift .gift-box {
  position: relative;
  width: 58px;
  height: 52px;
  margin: 14px auto 0;
  transform: perspective(240px) rotateX(14deg) rotateY(-22deg);
  transform-style: preserve-3d;
  animation: m-gift-float 3.2s ease-in-out infinite;
}
.m-3d-gift .gift-body {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 50px;
  height: 34px;
  border-radius: 6px;
  background: linear-gradient(145deg, #0bb8d0 0%, #067a8f 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), 0 10px 22px rgba(5, 195, 221, .28);
}
.m-3d-gift .gift-lid {
  position: absolute;
  left: 0;
  top: 2px;
  width: 58px;
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(145deg, #22d4ee 0%, #0aa3bc 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 10px rgba(0, 0, 0, .25);
  transform: translateZ(8px);
}
.m-3d-gift .gift-ribbon-v,
.m-3d-gift .gift-ribbon-h {
  position: absolute;
  background: rgba(255, 255, 255, .82);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
}
.m-3d-gift .gift-ribbon-v {
  left: 26px;
  bottom: 0;
  width: 6px;
  height: 34px;
}
.m-3d-gift .gift-ribbon-h {
  left: 4px;
  bottom: 14px;
  width: 50px;
  height: 6px;
}
.m-3d-gift .gift-bow {
  position: absolute;
  left: 18px;
  top: -2px;
  width: 22px;
  height: 12px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #fff 0%, #d8f7fc 100%);
  box-shadow: 0 2px 6px rgba(5, 195, 221, .35);
}
.m-3d-gift .spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px rgba(5, 195, 221, .9);
  opacity: .85;
  animation: m-spark 2.4s ease-in-out infinite;
}
.m-3d-gift .spark.s1 { top: 8px; right: 10px; }
.m-3d-gift .spark.s2 { top: 28px; right: 2px; animation-delay: .7s; }
.m-3d-gift .spark.s3 { bottom: 16px; right: 24px; animation-delay: 1.2s; width: 4px; height: 4px; }

.m-3d-gift .spark.s3 { bottom: 16px; right: 24px; animation-delay: 1.2s; width: 4px; height: 4px; }

/* 3D invite (carousel slide) */
.m-banner-invite .m-banner-3d {
  right: 8px;
  bottom: 6px;
  width: 78px;
  height: 78px;
}
.m-3d-invite {
  transform: perspective(220px) rotateX(12deg) rotateY(-16deg);
}
.m-3d-invite .invite-orbit {
  position: absolute;
  inset: 10px 8px 8px;
  border: 1px dashed rgba(255, 255, 255, .14);
  border-radius: 50%;
}
.m-3d-invite .invite-user {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: 0 8px 16px rgba(0, 0, 0, .35);
}
.m-3d-invite .invite-user.u1 {
  left: 8px;
  top: 18px;
  background: linear-gradient(145deg, #818cf8 0%, #4f46e5 100%);
  animation: m-coin-float 3s ease-in-out infinite;
}
.m-3d-invite .invite-user.u2 {
  right: 6px;
  bottom: 10px;
  background: linear-gradient(145deg, #5eead4 0%, #0d9488 100%);
  animation: m-coin-float 3s ease-in-out infinite .45s;
}
.m-3d-invite .invite-link {
  position: absolute;
  left: 24px;
  top: 30px;
  width: 30px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2), rgba(5, 195, 221, .85));
  transform: rotate(18deg);
  box-shadow: 0 0 10px rgba(5, 195, 221, .35);
}

/* 3D copy hero (carousel slide) */
.m-banner-copyhero .m-banner-3d {
  right: 8px;
  bottom: 6px;
  width: 78px;
  height: 78px;
}
.m-3d-copyhero .copyhero-panel {
  width: 58px;
  height: 48px;
  margin: 14px auto 0;
  padding: 6px 5px;
  border-radius: 10px;
  background: linear-gradient(160deg, #1f2226 0%, #121416 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .4);
  transform: perspective(200px) rotateX(14deg) rotateY(-14deg);
  animation: m-trade-tilt 3.4s ease-in-out infinite;
}
.m-3d-copyhero .copyhero-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 24px;
}
.m-3d-copyhero .copyhero-bars i {
  display: block;
  width: 6px;
  border-radius: 2px;
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
}
.m-3d-copyhero .copyhero-bars i:nth-child(1) { height: 10px; opacity: .65; }
.m-3d-copyhero .copyhero-bars i:nth-child(2) { height: 14px; opacity: .8; }
.m-3d-copyhero .copyhero-bars i.hi { height: 22px; box-shadow: 0 0 8px rgba(52, 211, 153, .4); }
.m-3d-copyhero .copyhero-bars i:nth-child(4) { height: 16px; opacity: .75; }
.m-3d-copyhero .copyhero-arrow {
  margin-top: 5px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 10px solid #34d399;
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, .45));
  margin-left: 28px;
}

/* 3D coins (earn) */
.m-banner-earn .m-banner-3d {
  right: 10px;
  bottom: 8px;
  width: 64px;
  height: 52px;
}
.m-3d-coins {
  transform: perspective(180px) rotateX(18deg) rotateY(-12deg);
  transform-style: preserve-3d;
}
.m-3d-coins .coin {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #1a1200;
  border: 2px solid rgba(255, 255, 255, .35);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .45), 0 8px 16px rgba(0, 0, 0, .35);
  animation: m-coin-float 3s ease-in-out infinite;
}
.m-3d-coins .coin span { transform: translateY(-1px); }
.m-3d-coins .c1 {
  left: 0;
  bottom: 0;
  background: linear-gradient(145deg, #ffd86a 0%, #e6a817 100%);
  z-index: 1;
}
.m-3d-coins .c2 {
  left: 16px;
  bottom: 10px;
  background: linear-gradient(145deg, #5eead4 0%, #0ea5a0 100%);
  color: #042f2e;
  z-index: 2;
  animation-delay: .35s;
}
.m-3d-coins .c3 {
  right: 0;
  bottom: 2px;
  width: 28px;
  height: 28px;
  font-size: 11px;
  background: linear-gradient(145deg, #fff 0%, #cbd5e1 100%);
  color: #334155;
  z-index: 3;
  animation-delay: .7s;
}

/* 3D trade panel (quick trade) */
.m-banner-trade .m-banner-3d {
  right: 10px;
  bottom: 10px;
  width: 58px;
  height: 46px;
}
.m-3d-trade .trade-panel {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  padding: 6px 5px 5px;
  background: linear-gradient(160deg, #1f2226 0%, #121416 100%);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 10px 20px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: perspective(200px) rotateX(16deg) rotateY(-14deg);
  animation: m-trade-tilt 3.4s ease-in-out infinite;
}
.m-3d-trade .trade-candles {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
}
.m-3d-trade .trade-candles i {
  display: block;
  width: 5px;
  border-radius: 2px;
  position: relative;
}
.m-3d-trade .trade-candles i.up {
  height: 14px;
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  box-shadow: 0 0 8px rgba(52, 211, 153, .35);
}
.m-3d-trade .trade-candles i.up.tall { height: 20px; }
.m-3d-trade .trade-candles i.down {
  height: 11px;
  background: linear-gradient(180deg, #fb7185 0%, #e11d48 100%);
  box-shadow: 0 0 8px rgba(251, 113, 133, .28);
}
.m-3d-trade .trade-line {
  margin-top: 5px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(5, 195, 221, .15), rgba(5, 195, 221, .85), rgba(5, 195, 221, .2));
}

@keyframes m-gift-float {
  0%, 100% { transform: perspective(240px) rotateX(14deg) rotateY(-22deg) translateY(0); }
  50% { transform: perspective(240px) rotateX(14deg) rotateY(-22deg) translateY(-4px); }
}
@keyframes m-coin-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes m-trade-tilt {
  0%, 100% { transform: perspective(200px) rotateX(16deg) rotateY(-14deg); }
  50% { transform: perspective(200px) rotateX(16deg) rotateY(-8deg) translateY(-2px); }
}
@keyframes m-spark {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* total assets header (home plain / assets hero card) */
.m-assets-head {
  padding: 18px 12px 6px;
}
.m-assets-head.m-assets-hero {
  position: relative;
  margin: 12px 12px 6px;
  padding: 18px 16px 16px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    radial-gradient(ellipse 110% 70% at 92% -8%, rgba(212, 175, 55, .14), transparent 52%),
    radial-gradient(ellipse 70% 55% at 4% 108%, rgba(176, 182, 196, .12), transparent 58%),
    linear-gradient(158deg, #2d3036 0%, #1e2024 42%, #131416 100%);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, .34),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(0, 0, 0, .28);
}
.m-assets-head.m-assets-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), rgba(212, 175, 55, .35), rgba(255, 255, 255, .28), transparent);
  pointer-events: none;
}
.m-assets-head.m-assets-hero::after {
  content: "";
  position: absolute;
  top: -36px;
  right: -24px;
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(220, 224, 232, .16), transparent 68%);
  pointer-events: none;
}
.m-assets-head.m-assets-hero > * { position: relative; z-index: 1; }
.m-assets-head .lbl {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(196, 200, 208, .92);
  font-size: 13px;
  font-weight: 600;
}
.m-assets-head .eye { color: rgba(180, 186, 196, .85); font-size: 15px; }
.m-assets-head .amt {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.m-assets-head .amt strong {
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}
.m-assets-head.m-assets-hero .amt strong {
  background: linear-gradient(135deg, #ffffff 0%, #eef0f4 38%, #b8bec8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.m-assets-head .amt .unit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #d0d4dc;
  font-size: 14px;
  font-weight: 800;
}
.m-asset-unit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: #d0d4dc;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}
.m-asset-unit .chev {
  width: 7px;
  height: 7px;
  border-right: 2px solid #8a909a;
  border-bottom: 2px solid #8a909a;
  transform: rotate(45deg) translateY(-1px);
}
.m-assets-head .fiat {
  margin-top: 6px;
  color: rgba(176, 182, 192, .88);
  font-size: 13px;
}
.m-assets-head.m-assets-hero .m-btn.primary {
  background: linear-gradient(135deg, #f2f4f7 0%, #c5ccd6 42%, #98a2b0 100%);
  color: #14181f;
  border: 1px solid rgba(255, 255, 255, .48);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .58);
}
.m-assets-head.m-assets-hero .m-btn:not(.primary) {
  background: linear-gradient(180deg, rgba(255, 255, 255, .09) 0%, rgba(255, 255, 255, .03) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  color: #e4e6ea;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.m-assets-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* gauge (chance) */
.m-gauge-center { text-align: center; margin-top: -46px; }
.m-gauge-center .v { font-size: 34px; font-weight: 900; }
.m-gauge-center .l { color: var(--muted); font-size: 13px; font-weight: 700; }

/* heat tiles */
.m-heat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.m-heat .tile {
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  color: #fff;
  font-weight: 800;
  font-size: 12.5px;
}
.m-heat .tile small { display: block; margin-top: 4px; font-size: 11px; opacity: .9; font-weight: 700; }

/* copy trader card */
.m-trader {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel);
  padding: 14px;
  margin: 0 12px 10px;
}
.m-trader .top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.m-trader .pfp {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #3a1d16;
  background: radial-gradient(circle at 34% 28%, #f0c3b4, #a65846);
}
.m-trader .who { flex: 1; min-width: 0; }
.m-trader .who strong { display: block; font-size: 14.5px; }
.m-trader .who small { color: var(--muted-2); font-size: 11.5px; }
.m-trader .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.m-trader .stats .k { color: var(--muted-2); font-size: 11px; }
.m-trader .stats .v { font-size: 14px; font-weight: 800; margin-top: 3px; }
.m-trader .stats .v.green { color: var(--green); }

/* invite hero */
.m-hero {
  margin: 14px 12px 0;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  padding: 22px 18px;
  background:
    radial-gradient(circle at 85% 0%, rgba(5, 195, 221, .18), transparent 50%),
    linear-gradient(160deg, #131517 0%, #0b0c0d 100%);
}
.m-hero h1 { margin: 0 0 8px; font-size: 24px; font-weight: 900; line-height: 1.2; }
.m-hero h1 .ac { color: var(--primary); }
.m-hero p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* download / PWA page */
.m-download-hero {
  margin: 14px 12px 0;
  padding: 28px 18px 22px;
  border-radius: 18px;
  border: 1px solid var(--line-soft);
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(5, 195, 221, .22), transparent 58%),
    linear-gradient(165deg, #131517 0%, #0b0c0d 100%);
}
.m-download-phone {
  position: relative;
  width: 132px;
  height: 168px;
  margin: 0 auto 18px;
}
.m-download-glow {
  position: absolute;
  inset: auto -20px -10px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(5, 195, 221, .35), transparent 70%);
  filter: blur(8px);
}
.m-download-phone-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 2px solid rgba(5, 195, 221, .55);
  background: #111214;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  padding: 10px;
}
.m-download-phone-screen {
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(180deg, #151517 0%, #0b0c0d 100%);
  display: grid;
  place-content: center;
  gap: 6px;
}
.m-download-phone-screen .m-brand-mark.m-download-phone-logo {
  margin: 0 auto;
  color: var(--primary);
  transform: scale(1.55);
  transform-origin: center center;
}
.m-download-phone-screen .m-brand-mark.m-download-phone-logo::after {
  animation: uzxLogoBits 1.8s ease-in-out infinite;
}
.m-download-phone-screen strong {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .04em;
}
.m-download-phone-screen small {
  color: var(--muted);
  font-size: 11px;
}
.m-download-hero h1 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
}
.m-download-hero > p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}
.m-download-btn { margin-bottom: 10px; min-height: 48px; font-size: 15px; }
.m-download-btn:disabled { opacity: .72; }
.m-download-note {
  margin: 0;
  color: var(--muted-2);
  font-size: 12px;
  line-height: 1.6;
}
.m-download-status {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.m-download-status.is-ok {
  color: var(--green);
  background: rgba(0, 255, 188, .08);
  border: 1px solid rgba(0, 255, 188, .18);
}
.m-download-features { display: grid; gap: 14px; }
.m-download-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.m-download-feature .ic {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--primary-soft);
  color: var(--primary);
}
.m-download-feature strong {
  display: block;
  font-size: 14px;
  margin-bottom: 3px;
}
.m-download-feature small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.m-download-steps {
  margin: 0;
  padding-left: 1.2em;
  color: #c8c8c8;
  font-size: 13px;
  line-height: 1.65;
}
.m-download-steps li + li { margin-top: 10px; }
.m-download-steps strong { color: #fff; }

.m-install-guide { display: grid; gap: 12px; }
.m-install-guide-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-soft);
}
.m-install-guide-step .num {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 900;
}
.m-install-guide-step p {
  margin: 0;
  color: #d0d0d0;
  font-size: 13px;
  line-height: 1.6;
}
.m-install-guide-note {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(5, 195, 221, .08);
  border: 1px solid rgba(5, 195, 221, .18);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

/* copy field */
.m-copy-field {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 6px 0 14px;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: #0b0c0d;
  margin-bottom: 10px;
}
.m-copy-field .val {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 700;
}
.m-copy-field .val.code { color: var(--primary); letter-spacing: .1em; }
.m-copy-field button {
  flex: 0 0 auto;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--primary);
  color: #04252b;
  font-size: 12.5px;
  font-weight: 800;
}

/* task card (trial) */
.m-task {
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: var(--panel);
  padding: 14px;
  margin-bottom: 10px;
}
.m-task h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 800; }
.m-task p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.m-task .foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}
.m-task .amount { color: var(--primary); font-size: 16px; font-weight: 900; }

/* announcement item */
.m-ann {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.m-ann:active { background: rgba(255, 255, 255, .03); }
.m-ann h3 { margin: 0 0 6px; font-size: 14.5px; font-weight: 800; line-height: 1.4; }
.m-ann p { margin: 0 0 8px; color: var(--muted); font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.m-ann .meta { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 11.5px; }

/* trade page price header */
.m-trade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
}
.m-trade-head .pair {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
}
.m-trade-head .pair .chev {
  width: 9px;
  height: 9px;
  border-right: 2.2px solid var(--primary);
  border-bottom: 2.2px solid var(--primary);
  transform: rotate(45deg) translateY(-2px);
}
.m-trade-price { text-align: right; }
.m-trade-price strong { display: block; font-size: 19px; font-weight: 900; }
.m-trade-price small { font-size: 12px; font-weight: 700; }

.m-mini-chart { width: 100%; height: 120px; display: block; }

/* TradingView chart (same embed as PC) */
.m-tv-chart {
  height: 220px;
  width: 100%;
  overflow: hidden;
  background: #070808;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.m-tv-chart .tradingview-widget-container,
.m-tv-chart .tradingview-widget-container__widget {
  height: 100% !important;
  width: 100% !important;
}
.m-chart-attrib {
  padding: 4px 12px 8px;
  text-align: right;
  color: var(--muted-2);
  font-size: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
}

/* leverage row */
.m-lev-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.m-lev-row button {
  height: 32px;
  border-radius: 8px;
  background: #0c0c0e;
  border: 1px solid var(--line);
  color: #aaa;
  font-size: 12.5px;
  font-weight: 800;
}
.m-lev-row button.active { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }

.m-kv { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); padding: 4px 0; }
.m-kv b { color: #ddd; font-weight: 700; }

/* countdown ring (second contract) */
.m-count {
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 900;
  text-align: center;
  color: var(--primary);
}

/* language flags (aligned with PC) */
.m-lang-flag,
.flag {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #242629;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
  overflow: hidden;
  display: inline-block;
  flex: 0 0 auto;
}
.m-cell-ic.m-lang-flag { border-radius: 50%; }
.flag-us { background: repeating-linear-gradient(180deg,#b22234 0 3px,#fff 3px 6px); }
.flag-cn { background: radial-gradient(circle at 34% 34%, #ffde00 0 12%, transparent 13%), #de2910; }
.flag-tw { background: linear-gradient(180deg,#fe0000 0 50%,#000095 50%); position: relative; }
.flag-tw::after { content:""; position:absolute; left:3px; top:3px; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow: 8px 2px 0 -1px #fff, 4px 5px 0 -1px #fff; }
.flag-in { background: linear-gradient(180deg,#ff9933 0 33%,#fff 33% 66%,#138808 66%); position: relative; }
.flag-in::after { content:""; position:absolute; inset:0; background: radial-gradient(circle at 50% 50%, #000080 0 28%, transparent 29%); opacity:.85; }
.flag-jp { background: radial-gradient(circle, #bc002d 0 34%, #fff 35%); }
.flag-kr { background: linear-gradient(90deg,#fff 0 100%); position: relative; }
.flag-kr::after { content:""; position:absolute; inset:7px; border-radius:50%; background:linear-gradient(180deg,#cd2e3a 0 50%,#0047a0 50%); }
.flag-es { background: linear-gradient(180deg,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%); }
.flag-fr { background: linear-gradient(90deg,#0055a4 0 33%,#fff 33% 66%,#ef4135 66%); }
.flag-ru { background: linear-gradient(180deg,#fff 0 33%,#0039a6 33% 66%,#d52b1e 66%); }
.flag-tr { background: radial-gradient(circle at 42% 50%, transparent 0 22%, #fff 23% 30%, transparent 31%), #e30a17; }
.flag-id { background: linear-gradient(180deg,#ce1126 0 50%,#fff 50%); position: relative; }
.flag-id::after { content:""; position:absolute; inset:8px; border-radius:50%; background:#ce1120; }
.flag-vn { background: linear-gradient(180deg,#da251d 0 50%,#ff0 50%); position: relative; }
.flag-vn::after { content:"★"; position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); color:#ff0; font-size:9px; line-height:1; }

/* ---------- support chat ---------- */
.m-support-chat { display: flex; flex-direction: column; gap: 12px; min-height: 420px; }
.m-support-msgs {
  flex: 1;
  min-height: 220px;
  max-height: 42vh;
  overflow-y: auto;
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-support-row { display: flex; flex-direction: column; max-width: 88%; }
.m-support-row.in { align-self: flex-start; align-items: flex-start; }
.m-support-row.out { align-self: flex-end; align-items: flex-end; }
.m-support-who { color: var(--muted-2); font-size: 11px; margin-bottom: 2px; }
.m-support-bubble {
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.m-support-row.in .m-support-bubble {
  background: rgba(5, 195, 221, .12);
  color: #e8f9fc;
  border: 1px solid rgba(5, 195, 221, .22);
  border-bottom-left-radius: 4px;
}
.m-support-row.out .m-support-bubble {
  background: #05c3dd;
  color: #041018;
  border-bottom-right-radius: 4px;
}
.m-support-time { color: var(--muted-2); font-size: 10.5px; margin-top: 3px; }
.m-support-form {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 12px;
}
.m-support-form textarea.m-input { min-height: 72px; resize: vertical; }

.m-support-ticket-details {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(255,255,255,.02);
}
.m-support-ticket-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.m-support-ticket-details > summary::-webkit-details-marker { display: none; }
.m-support-ticket-details[open] > summary { color: var(--primary); }
.m-support-ticket-details .m-support-form {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 4px 0 12px;
}
.m-support-composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 4px;
}
.m-support-composer .m-input { flex: 1; margin: 0; }
.m-support-composer .m-btn { flex: 0 0 auto; min-width: 72px; }