@font-face {
  font-family: 'BinancePlex';
  font-display: swap;
  src: url('/static/fonts/BinancePlex-Light.woff2') format('woff2');
  font-weight: 300;
}
@font-face {
  font-family: 'BinancePlex';
  font-display: swap;
  src: url('/static/fonts/BinancePlex-Regular.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'BinancePlex';
  font-display: swap;
  src: url('/static/fonts/BinancePlex-Medium.woff2') format('woff2');
  font-weight: 500;
}
@font-face {
  font-family: 'BinancePlex';
  font-display: swap;
  src: url('/static/fonts/BinancePlex-SemiBold.woff2') format('woff2');
  font-weight: 600;
}
@font-face {
  font-family: 'BinancePlex';
  font-display: swap;
  src: url('/static/fonts/BinancePlex-Bold.woff2') format('woff2');
  font-weight: 700;
}

:root, html[theme=light] {
  --body-bg: #ffffff;
  --ex-primary-color-rgb: 1 76 250;
  --ex-primary-color: rgb(var(--ex-primary-color-rgb));
  --ex-primary-deep: #0036c7;
  --ex-primary-light: #3b82f6;
  --ex-up-color-rgb: 24 183 98;
  --ex-down-color-rgb: 232 80 58;
  --ex-up-color: rgb(var(--ex-up-color-rgb));
  --ex-down-color: rgb(var(--ex-down-color-rgb));
  --ex-text-color-rgb: 6 16 35;
  --ex-text-color: rgb(var(--ex-text-color-rgb));
  --ex-text-color2-rgb: 106 109 128;
  --ex-text-color2: rgb(var(--ex-text-color2-rgb));
  --ex-text-color3-rgb: 143 146 161;
  --ex-text-color3: rgb(var(--ex-text-color3-rgb));
  --ex-text-color4-rgb: 164 172 185;
  --ex-text-color4: rgb(var(--ex-text-color4-rgb));
  --ex-border-color-rgb: 239 243 248;
  --ex-border-color: rgb(var(--ex-border-color-rgb));
  --ex-border-color2-rgb: 208 216 226;
  --ex-border-color2: rgb(var(--ex-border-color2-rgb));
  --ex-bg-color-rgb: 255 255 255;
  --ex-bg-color: rgb(var(--ex-bg-color-rgb));
  --ex-bg-color2-rgb: 245 247 252;
  --ex-bg-color2: rgb(var(--ex-bg-color2-rgb));
  --ex-bg-color3-rgb: 239 243 248;
  --ex-bg-color3: rgb(var(--ex-bg-color3-rgb));
  --ex-bg-color4-rgb: 217 228 255;
  --ex-bg-color4: rgb(var(--ex-bg-color4-rgb));
  --ex-bg-color5-rgb: 166 190 244;
  --ex-bg-color5: rgb(var(--ex-bg-color5-rgb));
  --ex-bg-color6-rgb: 228 236 251;
  --ex-bg-color6: rgb(var(--ex-bg-color6-rgb));
  --ex-bg-soft: rgb(var(--ex-primary-color-rgb) / .1);
  --ex-text-color--bg-primary: #ffffff;
  --card-bg: #ffffff;
  --card-border: 1px solid var(--ex-border-color);
  --card-shadow: none;
  --hero-bg: linear-gradient(135deg, #014cfa 0%, #2563eb 45%, #60a5fa 100%);
  --hero-shadow: 0 .16rem .4rem rgb(var(--ex-primary-color-rgb) / .3);
  --page-glow: none;
  --radius-sm: .12rem;
  --radius-md: .2rem;
  --radius-lg: .32rem;
  --shadow-sm: 0 .04rem .16rem rgb(15 23 42 / .04);
  --shadow-md: 0 .1rem .32rem rgb(15 23 42 / .06);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 1.4rem;
  --app-height: 100%;
  --mining-card: #E0EAFF;
  --stats-card: #FEF5E2;
  --participate-bg: #D0D8E2;
  --connect-bg: #AEC6FF;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body {
  background: var(--body-bg);
  color: var(--ex-text-color);
  font-family: 'BinancePlex', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 50px;
  height: 100%;
  overflow: hidden;
}
#app {
  margin: 0 auto;
  min-height: var(--app-height);
  max-width: 7.5rem;
  width: 100%;
  position: relative;
  background: var(--ex-bg-color);
  overflow: hidden;
}
#app.large { width: 375px; }
.page {
  height: calc(var(--app-height) - var(--nav-h) - var(--safe-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: .4rem;
}
.page.no-nav { height: var(--app-height); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }

.text-primary { color: var(--ex-primary-color); }
.text-color2 { color: var(--ex-text-color2); }
.text-color3 { color: var(--ex-text-color3); }
.up, .text-up { color: var(--ex-up-color); }
.down, .text-down { color: var(--ex-down-color); }

/* Header */
.home2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .72rem;
  padding: .2rem .3rem 0;
}
.home2-header .logo {
  height: .44rem;
  width: auto;
}
.home2-header .icons {
  display: flex;
  gap: .24rem;
  align-items: center;
}
.home2-header .icons a,
.home2-header .icons button {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home2-header .icons img { width: .4rem; height: .4rem; }

.wallet-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  margin-top: .54rem;
  padding: 0 .16rem;
}
.network-pill {
  display: flex;
  align-items: center;
  gap: .2rem;
  height: .92rem;
  flex: 1;
  padding: 0 .28rem;
  border: 1px solid var(--ex-border-color2);
  border-radius: 9999px;
  font-size: .32rem;
  font-weight: 500;
  background: transparent;
}
.network-pill .eth {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
}
.connect-btn {
  flex: 1;
  height: .92rem;
  border-radius: 9999px;
  background: var(--connect-bg);
  color: var(--ex-primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  font-size: .32rem;
  font-weight: 500;
  padding: 0 .28rem;
}
.connect-btn img { width: .64rem; height: .64rem; }

/* Mining home — match daoulaw.ink mode8 */
.page-index {
  background: url('/web3_267/static/img/home/bbg.png') no-repeat top center / 100% auto,
              #ffffff;
  padding: 0 .32rem calc(var(--nav-h) + .2rem);
}
.section-title {
  font-size: .48rem;
  font-weight: 600;
  margin-top: .8rem;
  color: var(--ex-text-color);
}
.section-title-md { margin-top: .62rem; }
.section-title-lg { margin-top: .72rem; }
.mining-card {
  margin-top: .62rem;
  background: var(--mining-card);
  border-radius: .32rem;
  min-height: 4.26rem;
  padding: .3rem .4rem;
  border: none;
  box-shadow: none;
  color: var(--ex-text-color);
}
.mining-card .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .4rem;
  font-weight: 600;
}
.mining-card .link {
  font-size: .32rem;
  font-weight: 500;
  color: var(--ex-primary-color);
  text-decoration: underline;
  text-underline-offset: .06rem;
}
.participate-wrap {
  display: flex;
  justify-content: center;
  padding-top: .62rem;
}
.participate-btn {
  margin-top: 0;
  width: 3.2rem;
  height: 1.12rem;
  border-radius: 9999px;
  background: var(--participate-bg);
  color: var(--ex-text-color3);
  font-size: .36rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.participate-btn.enabled {
  background: var(--ex-primary-color);
  color: #fff;
}
.earn-meta {
  margin-top: .34rem;
  font-size: .28rem;
  color: var(--ex-text-color2);
  text-align: center;
}
.distributed {
  margin-top: .44rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .28rem;
}
.distributed .val {
  font-size: .4rem;
  font-weight: 600;
  color: var(--ex-primary-color);
}

.stats-card {
  margin-top: .3rem;
  background: var(--stats-card);
  border-radius: .32rem;
  min-height: 4.64rem;
  padding: .4rem;
}
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  padding-top: 0;
  gap: .48rem 0;
  text-align: center;
}
.stats-grid .item { width: 50%; }
.stats-grid .num {
  font-size: .32rem;
  font-weight: 700;
  color: var(--ex-text-color);
}
.stats-grid .label {
  margin-top: .16rem;
  font-size: .28rem;
  color: var(--ex-text-color2);
}

.earn-board {
  margin-top: .4rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
  max-height: 4.8rem;
  overflow: hidden;
}
.earn-item {
  background: transparent;
  border: none;
  border-radius: 0;
  height: auto;
  min-height: .9rem;
  padding: .12rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .18rem;
  box-shadow: none !important;
}
.earn-item .earn-left { display: flex; flex-direction: column; gap: .06rem; }
.earn-item .addr {
  font-size: .3rem;
  font-weight: 600;
  color: var(--ex-text-color);
}
.earn-item .amt {
  font-size: .28rem;
  font-weight: 600;
  color: var(--ex-up-color);
}
.earn-item .earn-right {
  font-size: .26rem;
  color: var(--ex-text-color3);
}

.faq { margin-top: .8rem; padding-bottom: .4rem; }
.faq-item {
  background: var(--ex-bg-color2);
  border-radius: .24rem;
  margin-bottom: .2rem;
  overflow: hidden;
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .28rem .28rem;
  font-size: .3rem;
  font-weight: 600;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary img { width: .32rem; height: .32rem; transition: transform .2s; }
.faq-item[open] summary img { transform: rotate(180deg); }
.faq-item p {
  padding: 0 .28rem .28rem;
  font-size: .26rem;
  line-height: 1.5;
  color: var(--ex-text-color2);
}

/* Bottom nav */
.bottom_nav2 {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 7.5rem;
  height: calc(1.4rem + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: .32rem .32rem 0 0;
  border-top: none;
  display: flex;
  z-index: 100;
  overflow: hidden;
}
.bottom_nav2::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--ex-border-color);
  position: absolute;
  opacity: .3;
  left: 0;
  top: 0;
}
#app.large .bottom_nav2 { width: 375px; }
.bottom_nav2 .nav_box {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding-top: .14rem;
}
.bottom_nav_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  color: var(--ex-text-color3);
  font-size: .24rem;
  width: 1rem;
}
.bottom_nav_item .bn_con {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.bottom_nav_item.active,
.bottom_nav_item.bottom_nav_active,
.bottom_nav_item.active .bn_con,
.bottom_nav_item.bottom_nav_active .bn_con {
  color: var(--ex-primary-color);
}
.bottom_nav_icon {
  width: .56rem;
  height: .56rem;
  margin-bottom: .08rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bottom_nav_icon svg,
.bottom_nav_icon iconpark-icon { width: .56rem; height: .56rem; }
.bottom_nav_name { line-height: 1; }

/* Market */
.page-market { padding: 0; }
.tabs-top {
  display: flex;
  align-items: center;
  height: .9rem;
  padding: 0 .3rem;
  gap: .4rem;
  border-bottom: 1px solid var(--ex-border-color);
  font-size: .34rem;
  font-weight: 500;
  color: var(--ex-text-color2);
}
.tabs-top .tab.active {
  color: var(--ex-text-color);
  font-weight: 700;
  position: relative;
}
.tabs-top .tab.active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -.28rem;
  transform: translateX(-50%);
  width: .4rem;
  height: .06rem;
  border-radius: .06rem;
  background: var(--ex-primary-color);
}
.sub-tabs {
  display: flex;
  gap: .4rem;
  padding: .24rem .3rem;
  font-size: .3rem;
  color: var(--ex-text-color2);
}
.sub-tabs .tab.active {
  color: var(--ex-primary-color);
  font-weight: 600;
  position: relative;
}
.sub-tabs .tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -.1rem;
  height: .04rem;
  background: var(--ex-primary-color);
}
.market-list { padding: 0 .3rem; }
.market-row {
  display: flex;
  align-items: center;
  height: 1.2rem;
  border-bottom: 1px solid var(--ex-border-color);
}
.market-row .left { flex: 1.2; min-width: 0; }
.market-row .sym {
  font-size: .32rem;
  font-weight: 700;
}
.market-row .pair {
  font-size: .24rem;
  color: var(--ex-text-color2);
  margin-top: .06rem;
}
.market-row .mid {
  flex: 1;
  text-align: right;
  font-size: .3rem;
  font-weight: 600;
}
.market-row .right {
  flex: 1;
  text-align: right;
}
.market-row .chg {
  font-size: .26rem;
  font-weight: 500;
}
.ratio-pill {
  display: inline-block;
  margin-top: .06rem;
  min-width: 1.2rem;
  padding: .06rem .12rem;
  border-radius: .12rem;
  font-size: .24rem;
  font-weight: 600;
  text-align: center;
  color: #fff;
}
.ratio-pill.up { background: var(--ex-up-color); }
.ratio-pill.down { background: var(--ex-down-color); }
.ratio-pill.flat { background: #9aa0b0; }

/* Trade */
.page-trade { padding: .3rem; }
.trade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.trade-head .pair {
  font-size: .4rem;
  font-weight: 700;
}
.trade-price {
  margin-top: .2rem;
  font-size: .48rem;
  font-weight: 700;
}
.trade-panel {
  margin-top: .4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
}
.side-btn {
  height: .8rem;
  border-radius: .16rem;
  color: #fff;
  font-size: .32rem;
  font-weight: 600;
}
.side-btn.buy { background: var(--ex-up-color); }
.side-btn.sell { background: var(--ex-down-color); }
.field {
  margin-top: .24rem;
  background: var(--ex-bg-color2);
  border-radius: .16rem;
  padding: .2rem .24rem;
}
.field label {
  display: block;
  font-size: .24rem;
  color: var(--ex-text-color2);
  margin-bottom: .1rem;
}
.field input {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: .32rem;
  font-weight: 600;
  color: var(--ex-text-color);
  font-family: inherit;
}

/* Assets / User */
.page-assets, .page-user, .page-auth { padding: .3rem; }
.card {
  background: var(--ex-bg-color2);
  border-radius: .32rem;
  padding: .36rem;
}
.balance-title { font-size: .28rem; color: var(--ex-text-color2); }
.balance-num {
  margin-top: .16rem;
  font-size: .56rem;
  font-weight: 700;
}
.action-grid {
  margin-top: .4rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .24rem;
  text-align: center;
}
.action-grid .act {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .12rem;
  font-size: .24rem;
  color: var(--ex-text-color2);
}
.action-grid .ico {
  width: .8rem;
  height: .8rem;
  border-radius: .2rem;
  background: var(--ex-bg-color4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-primary-color);
  font-size: .36rem;
  font-weight: 700;
}
.wallet-list { margin-top: .4rem; }
.wallet-row2 {
  display: flex;
  align-items: center;
  gap: .2rem;
  padding: .28rem 0;
  border-bottom: 1px solid var(--ex-border-color);
}
.wallet-row2 img { width: .56rem; height: .56rem; }
.wallet-row2 .name { flex: 1; font-size: .3rem; font-weight: 600; }
.wallet-row2 .bal { text-align: right; font-size: .28rem; font-weight: 600; }

.user-head {
  display: flex;
  align-items: center;
  gap: .24rem;
  padding: .2rem 0 .4rem;
}
.avatar {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--ex-bg-color4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ex-primary-color);
  font-weight: 700;
  font-size: .4rem;
}
.menu-list { margin-top: .2rem; }
.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 1rem;
  border-bottom: 1px solid var(--ex-border-color);
  font-size: .3rem;
}
.menu-item img { width: .28rem; opacity: .5; }

/* Auth */
.auth-box { margin-top: .6rem; }
.auth-box h1 {
  font-size: .48rem;
  font-weight: 700;
  margin-bottom: .4rem;
}
.auth-box .field { margin-bottom: .24rem; }
.auth-submit {
  margin-top: .4rem;
  width: 100%;
  height: .88rem;
  border-radius: .2rem;
  background: var(--ex-primary-color);
  color: #fff;
  font-size: .34rem;
  font-weight: 600;
}
.auth-switch {
  margin-top: .32rem;
  text-align: center;
  font-size: .28rem;
  color: var(--ex-text-color2);
}
.auth-switch a { color: var(--ex-primary-color); }
.alert {
  margin-bottom: .24rem;
  padding: .2rem .24rem;
  border-radius: .12rem;
  font-size: .26rem;
  background: #ffe8e4;
  color: var(--ex-down-color);
}
.alert.ok { background: #e6f8ef; color: var(--ex-up-color); }

.mining-list { margin-top: .3rem; display: flex; flex-direction: column; gap: .24rem; }
.mining-product {
  background: var(--ex-bg-color2);
  border-radius: .28rem;
  padding: .32rem;
}
.mining-product .name { font-size: .34rem; font-weight: 700; }
.mining-product .meta {
  margin-top: .2rem;
  display: flex;
  justify-content: space-between;
  font-size: .26rem;
  color: var(--ex-text-color2);
}
.mining-product .rate {
  color: var(--ex-primary-color);
  font-size: .4rem;
  font-weight: 700;
  margin-top: .12rem;
}
.tag {
  display: inline-block;
  padding: .04rem .12rem;
  border-radius: .08rem;
  background: var(--ex-bg-color4);
  color: var(--ex-primary-color);
  font-size: .22rem;
}

.notice-item {
  padding: .28rem 0;
  border-bottom: 1px solid var(--ex-border-color);
}
.notice-item .t { font-size: .3rem; font-weight: 600; }
.notice-item .d { margin-top: .1rem; font-size: .24rem; color: var(--ex-text-color2); }

.toast {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.78);
  color: #fff;
  padding: .2rem .36rem;
  border-radius: .16rem;
  font-size: .28rem;
  z-index: 999;
  display: none;
}

/* Marquee / dynamics */
.earn-board { position: relative; }
.earn-marquee {
  display: flex;
  flex-direction: column;
  gap: .24rem;
  animation: earnScroll 28s linear infinite;
}
@keyframes earnScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
.participate-btn.enabled { transition: transform .15s ease, background .2s; }
.participate-btn.enabled:active { transform: scale(.98); }
.connect-btn { transition: opacity .2s; }
.connect-btn:active { opacity: .85; }

/* Wallet connect modal */
.wallet-modal {
  position: fixed; inset: 0; z-index: 2000; display: none;
  align-items: flex-end; justify-content: center;
}
.wallet-modal.show { display: flex; }
.wallet-modal-mask {
  position: absolute; inset: 0; background: rgba(10,16,32,.45);
}
.wallet-modal-panel {
  position: relative; width: 100%; max-width: 375px;
  background: #fff; border-radius: .32rem .32rem 0 0;
  padding: .36rem .32rem .48rem; box-sizing: border-box;
  animation: wmUp .28s ease;
}
@keyframes wmUp {
  from { transform: translateY(40%); opacity: .6; }
  to { transform: none; opacity: 1; }
}
.wallet-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: .36rem; font-weight: 700; margin-bottom: .16rem;
}
.wm-close {
  width: .56rem; height: .56rem; border-radius: 50%;
  background: var(--ex-bg-color2); font-size: .4rem; line-height: 1;
  color: var(--ex-text-color2);
}
.wallet-modal-tip {
  font-size: .24rem; color: var(--ex-text-color2); margin-bottom: .28rem;
}
.wallet-chain-list { display: flex; flex-direction: column; gap: .16rem; }
.wallet-chain-item {
  display: flex; align-items: center; gap: .2rem;
  width: 100%; padding: .24rem; border-radius: .2rem;
  background: var(--ex-bg-color2); text-align: left;
}
.wallet-chain-item img { width: .56rem; height: .56rem; }
.wallet-chain-item .meta { flex: 1; }
.wallet-chain-item .n { font-size: .3rem; font-weight: 700; }
.wallet-chain-item .s { font-size: .22rem; color: var(--ex-text-color2); margin-top: .04rem; }
.wallet-chain-item .go {
  font-size: .24rem; color: var(--ex-primary-color); font-weight: 600;
}
.wallet-chain-item.muted { opacity: .55; }
.wallet-chain-item.muted .go { color: var(--ex-text-color2); }
.wallet-modal-status {
  min-height: .4rem; margin-top: .2rem;
  font-size: .24rem; color: var(--ex-primary-color); text-align: center;
}

.stats-grid .num { animation: fadeUp .6s ease both; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(.12rem); }
  to { opacity: 1; transform: none; }
}

/* Trade / Turbo */
.trade-tabs {
  display: flex;
  gap: .4rem;
  padding: .2rem .3rem 0;
  font-size: .32rem;
  color: var(--ex-text-color2);
}
.trade-tabs a.active {
  color: var(--ex-text-color);
  font-weight: 700;
  position: relative;
}
.trade-tabs a.active::after {
  content: '';
  position: absolute;
  left: 20%; right: 20%; bottom: -.12rem;
  height: .06rem;
  border-radius: .06rem;
  background: var(--ex-primary-color);
}
.pair-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: .28rem .3rem .1rem;
}
.pair-name { font-size: .34rem; font-weight: 700; }
.pair-price { font-size: .4rem; font-weight: 700; margin-top: .08rem; }
.pair-price span { font-size: .26rem; margin-left: .08rem; }
.pair-actions { display: flex; gap: .2rem; color: var(--ex-text-color2); }
.mini-chart { height: 3.2rem; margin: .1rem .2rem .2rem; }
.time-label { padding: 0 .3rem; font-size: .28rem; color: var(--ex-text-color2); }
.time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .2rem;
  padding: .2rem .3rem;
}
.time-btn {
  border: 1px solid var(--ex-border-color2);
  border-radius: .16rem;
  padding: .2rem .1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .06rem;
}
.time-btn .t { font-size: .3rem; font-weight: 600; }
.time-btn .r { font-size: .24rem; color: var(--ex-text-color2); }
.time-btn.active {
  border-color: var(--ex-primary-color);
  color: var(--ex-primary-color);
}
.time-btn.active .r { color: var(--ex-primary-color); }
.amount-field { margin: .1rem .3rem; }
.amount-row {
  display: flex;
  align-items: center;
  gap: .12rem;
}
.amount-row input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: .36rem;
  font-weight: 700;
  font-family: inherit;
}
.amount-row span {
  flex-shrink: 0;
  font-size: .26rem;
  font-weight: 600;
  color: var(--ex-text-color2);
  line-height: 1;
}
.pct-row {
  display: flex;
  gap: .12rem;
  padding: .1rem .3rem .2rem;
}
.pct-row button {
  flex: 1;
  height: .56rem;
  border-radius: .12rem;
  background: var(--ex-bg-color2);
  font-size: .24rem;
  color: var(--ex-text-color2);
}
.avail-row {
  display: flex;
  justify-content: space-between;
  padding: .1rem .3rem .2rem;
  font-size: .26rem;
}
.dir-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .2rem;
  padding: .1rem .3rem .3rem;
}
.dir-up, .dir-down {
  height: .88rem;
  border-radius: .16rem;
  color: #fff;
  font-size: .34rem;
  font-weight: 700;
}
.dir-up { background: var(--ex-up-color); }
.dir-down { background: var(--ex-down-color); }
.order-tabs {
  display: flex;
  gap: .4rem;
  padding: .2rem .3rem;
  border-top: 1px solid var(--ex-border-color);
  font-size: .3rem;
  color: var(--ex-text-color2);
}
.order-tabs button.active {
  color: var(--ex-text-color);
  font-weight: 700;
}
.order-panel { padding: .1rem .3rem .4rem; min-height: 2rem; }
.empty-tip { text-align: center; color: var(--ex-text-color2); font-size: .28rem; padding: .5rem 0; }
.order-card {
  background: var(--ex-bg-color2);
  border-radius: .2rem;
  padding: .24rem;
  margin-bottom: .16rem;
  font-size: .28rem;
}
.order-card .meta { color: var(--ex-text-color2); margin-top: .08rem; font-size: .24rem; }
.lev-row { display: flex; gap: .16rem; padding: .2rem .3rem; }
.lev-row button {
  flex: 1; height: .64rem; border-radius: .12rem;
  background: var(--ex-bg-color2); font-size: .28rem;
}
.lev-row button.active {
  background: var(--ex-primary-color); color: #fff; font-weight: 600;
}
.sub-tabs-inline { display: flex; gap: .36rem; padding: .2rem .3rem; font-size: .3rem; color: var(--ex-text-color2); }
.sub-tabs-inline .active { color: var(--ex-primary-color); font-weight: 600; border-bottom: 2px solid var(--ex-primary-color); }

/* Chart */
.page-chart { padding: 0; background: #fff; }
.chart-top {
  display: flex; align-items: center; gap: .2rem;
  padding: .24rem .3rem; border-bottom: 1px solid var(--ex-border-color);
}
.chart-top .back { font-size: .4rem; width: .5rem; }
.chart-top .info { flex: 1; }
.chart-top .name { font-size: .32rem; font-weight: 700; }
.chart-top .price { font-size: .28rem; font-weight: 600; }
.period-bar {
  display: flex; gap: .08rem; padding: .16rem .2rem;
  overflow-x: auto;
}
.period-bar button {
  min-width: .8rem; height: .52rem; padding: 0 .16rem;
  border-radius: .1rem; font-size: .24rem; color: var(--ex-text-color2);
}
.period-bar button.active {
  background: var(--ex-bg-color4); color: var(--ex-primary-color); font-weight: 600;
}
.kline-box { width: 100%; min-height: 6.4rem; background: #fff; }
.page-chart { padding: 0; background: #fff; height: var(--app-height) !important; overflow-y: auto !important; }
.ohlc-row {
  padding: .16rem .3rem; font-size: .24rem; color: var(--ex-text-color2);
  font-family: monospace;
}

/* Admin */
.admin-body { background: #f3f5f9; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
.admin-wrap { display: flex; min-height: 100vh; font-size: 14px; }
.admin-side {
  width: 220px; background: #0e1a33; color: #fff; padding: 20px 0; flex-shrink: 0;
}
.admin-side h1 { font-size: 18px; padding: 0 20px 20px; margin: 0; }
.admin-side a {
  display: block; color: #c9d4e8; padding: 12px 20px; text-decoration: none;
}
.admin-side a:hover, .admin-side a.active { background: #1a2b4d; color: #fff; }
.admin-main { flex: 1; padding: 24px; }
.admin-card {
  background: #fff; border-radius: 12px; padding: 16px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.admin-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.admin-stat h3 { margin: 0; font-size: 13px; color: #8892a6; font-weight: 500; }
.admin-stat .n { font-size: 28px; font-weight: 700; margin-top: 8px; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td {
  padding: 10px 8px; border-bottom: 1px solid #eef1f6; text-align: left; font-size: 13px;
}
.admin-table th { color: #8892a6; font-weight: 600; }
.btn {
  display: inline-block; padding: 8px 14px; border-radius: 8px; border: none;
  background: #014cfa; color: #fff; cursor: pointer; font-size: 13px; text-decoration: none;
}
.btn.gray { background: #6b7280; }
.btn.red { background: #e8503a; }
.btn.green { background: #18b762; }
.admin-login {
  max-width: 380px; margin: 10vh auto; background: #fff; padding: 32px;
  border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.08);
}
.admin-login input {
  width: 100%; padding: 12px; margin: 8px 0 16px; border: 1px solid #d0d8e2;
  border-radius: 8px; box-sizing: border-box;
}
.form-inline input, .form-inline select {
  padding: 8px 10px; border: 1px solid #d0d8e2; border-radius: 8px; margin-right: 8px;
}
@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr 1fr; }
  .admin-wrap { flex-direction: column; }
  .admin-side { width: 100%; }
}

/* ========== Frontend UI polish ========== */
html, body {
  background: var(--body-bg);
  -webkit-font-smoothing: antialiased;
}
#app {
  background:
    radial-gradient(120% 60% at 50% -10%, rgb(var(--ex-primary-color-rgb) / .08), transparent 55%),
    var(--ex-bg-color);
  box-shadow: 0 0 0 1px rgb(15 23 42 / .03);
}
.page {
  scroll-behavior: smooth;
  padding-bottom: .5rem;
}
.page-assets,
.page-user,
.page-auth,
.page-trade,
.page-market,
.page-chart {
  background:
    linear-gradient(180deg, rgb(var(--ex-primary-color-rgb) / .05) 0%, transparent 2.2rem),
    var(--ex-bg-color);
}

/* Header & wallet */
.home2-header .icons a {
  background: rgb(255 255 255 / .72);
  border: 1px solid rgb(255 255 255 / .9);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), background .2s;
}
.home2-header .icons a:active { transform: scale(.94); }
.home2-header .icons .home-ico-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .64rem;
  height: .64rem;
  border-radius: 50%;
  font-size: .34rem;
  color: var(--ex-text-color);
  text-decoration: none;
}
.network-pill {
  background: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.connect-btn {
  background: linear-gradient(135deg, #e8f0ff, #dbeafe);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .12);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.connect-btn:active {
  transform: scale(.98);
  opacity: 1;
}

/* Home mining */
.page-index {
  background:
    url('/web3_267/static/img/home/bbg.png') no-repeat top center / 100% auto,
    linear-gradient(180deg, #dbeafe 0%, #f8fafc .9rem, #ffffff 2.6rem);
}
.section-title {
  letter-spacing: -.01em;
  color: var(--ex-text-color);
}
.mining-card {
  background: #fff;
  border: 1px solid var(--ex-border-color);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
}
.participate-btn {
  border-radius: var(--radius-md);
  letter-spacing: .02em;
  transition: transform .15s var(--ease), background .2s, box-shadow .2s;
}
.participate-btn.enabled {
  background: linear-gradient(135deg, var(--ex-primary-color), var(--ex-primary-deep));
  box-shadow: 0 .1rem .24rem rgb(var(--ex-primary-color-rgb) / .28);
}
.participate-btn.enabled:active {
  transform: scale(.985);
  box-shadow: none;
}
.stats-grid .item {
  position: relative;
}
.stats-grid .num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.earn-item {
  background: #fff;
  border: 1px solid var(--ex-border-color);
  transition: transform .2s var(--ease);
}
.earn-item .dot {
  background: var(--ex-primary-color);
  box-shadow: 0 0 0 .08rem rgb(var(--ex-primary-color-rgb) / .16);
}
.faq-item {
  background: #fff;
  border: 1px solid var(--ex-border-color);
  transition: border-color .2s;
}
.faq-item[open] {
  border-color: rgb(var(--ex-primary-color-rgb) / .25);
}
.faq-item summary {
  transition: color .2s;
}
.faq-item[open] summary { color: var(--ex-primary-color); }

/* Bottom nav */
.bottom_nav2 {
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top-color: rgb(15 23 42 / .06);
  box-shadow: 0 -.08rem .24rem rgb(15 23 42 / .04);
}
.bottom_nav_item {
  transition: color .2s var(--ease), transform .15s;
  position: relative;
}
.bottom_nav_item.active {
  font-weight: 600;
}
.bottom_nav_item.active .bottom_nav_icon {
  transform: translateY(-.02rem);
}
.bottom_nav_item:active { transform: scale(.96); }

/* Market */
.tabs-top {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.tabs-top .tab,
.sub-tabs .tab {
  transition: color .2s;
}
.market-row {
  transition: background .15s;
  border-radius: var(--radius-sm);
  margin: 0 -.08rem;
  padding: 0 .08rem;
}
.market-row:active { background: var(--ex-bg-color2); }
.market-row .mid,
.market-row .chg {
  font-variant-numeric: tabular-nums;
}
.ratio-pill {
  border-radius: .1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* Trade */
.page-trade { padding-bottom: .6rem; }
.trade-tabs {
  background: #fff;
  margin: 0 -.3rem;
  padding: .24rem .3rem .16rem;
  border-bottom: 1px solid var(--ex-border-color);
}
.pair-price { font-variant-numeric: tabular-nums; }
.mini-chart {
  margin: .16rem .2rem .24rem;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--ex-bg-color2), #fff);
  overflow: hidden;
}
.time-btn {
  background: var(--ex-bg-color2);
  border-color: transparent;
  transition: border-color .2s, background .2s, color .2s, transform .15s;
}
.time-btn:active { transform: scale(.97); }
.time-btn.active {
  background: rgb(var(--ex-primary-color-rgb) / .08);
  border-color: var(--ex-primary-color);
  box-shadow: inset 0 0 0 1px rgb(var(--ex-primary-color-rgb) / .08);
}
.field {
  border: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.field:focus-within {
  border-color: rgb(var(--ex-primary-color-rgb) / .35);
  background: #fff;
}
.pct-row button {
  transition: background .15s, color .15s, transform .15s;
}
.pct-row button:active {
  transform: scale(.96);
  background: var(--ex-bg-color4);
  color: var(--ex-primary-color);
}
.dir-up, .dir-down {
  border-radius: var(--radius-md);
  transition: transform .15s var(--ease), filter .15s, box-shadow .2s;
  letter-spacing: .01em;
}
.dir-up {
  background: linear-gradient(180deg, #22c55e, var(--ex-up-color));
  box-shadow: 0 .08rem .2rem rgb(var(--ex-up-color-rgb) / .28);
}
.dir-down {
  background: linear-gradient(180deg, #f87171, var(--ex-down-color));
  box-shadow: 0 .08rem .2rem rgb(var(--ex-down-color-rgb) / .28);
}
.dir-up:active, .dir-down:active {
  transform: scale(.98);
  filter: brightness(.96);
}
.order-card {
  background: #fff;
  border: 1px solid var(--ex-border-color);
  transition: border-color .2s;
}
.lev-row button {
  transition: background .15s, color .15s, transform .15s;
}
.lev-row button:active { transform: scale(.96); }
.lev-row button.active {
  background: linear-gradient(135deg, var(--ex-primary-color), var(--ex-primary-deep));
  box-shadow: 0 .06rem .16rem rgb(var(--ex-primary-color-rgb) / .25);
}

/* Assets */
.page-assets .card {
  border: 1px solid transparent;
  box-shadow: var(--shadow-sm);
}
.assets-hero {
  margin-top: .24rem;
  color: #fff;
  background: linear-gradient(135deg, #014cfa 0%, #3b82f6 48%, #60a5fa 100%);
  box-shadow: 0 .16rem .4rem rgb(var(--ex-primary-color-rgb) / .28);
  border: none;
  position: relative;
  overflow: hidden;
}
.assets-hero::after {
  content: '';
  position: absolute;
  right: -.4rem;
  top: -.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  pointer-events: none;
}
.assets-hero .balance-title {
  color: rgb(255 255 255 / .82);
  position: relative;
  z-index: 1;
}
.assets-hero .balance-num {
  position: relative;
  z-index: 1;
}
.page-assets .card[style*="linear-gradient"] {
  background: linear-gradient(135deg, #014cfa 0%, #3b82f6 48%, #60a5fa 100%) !important;
  box-shadow: 0 .16rem .4rem rgb(var(--ex-primary-color-rgb) / .28);
  border: none;
  position: relative;
  overflow: hidden;
}
.page-assets .card[style*="linear-gradient"]::after {
  content: '';
  position: absolute;
  right: -.4rem;
  top: -.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: rgb(255 255 255 / .12);
  pointer-events: none;
}
.balance-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.action-grid .act {
  transition: color .2s, transform .15s;
}
.action-grid .act:active { transform: scale(.96); }
.action-grid .ico {
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
  box-shadow: var(--shadow-sm);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.action-grid .act:active .ico {
  transform: translateY(.02rem);
  box-shadow: none;
}
.wallet-row2 {
  transition: background .15s;
  border-radius: var(--radius-sm);
  margin: 0 -.08rem;
  padding: .28rem .08rem;
}
.wallet-row2:active { background: var(--ex-bg-color2); }
.wallet-row2 img {
  border-radius: 50%;
  background: var(--ex-bg-color2);
}

/* User */
.user-head {
  padding: .28rem .08rem .4rem;
  margin: 0 -.08rem .12rem;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgb(var(--ex-primary-color-rgb) / .08), rgb(59 130 246 / .04));
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .08);
}
.avatar {
  background: linear-gradient(145deg, #dbeafe, #bfdbfe);
  box-shadow: inset 0 0 0 1px rgb(var(--ex-primary-color-rgb) / .12);
}
.menu-item {
  transition: background .15s, padding-left .15s;
  border-radius: var(--radius-sm);
  margin: 0 -.08rem;
  padding: 0 .08rem;
}
.menu-item:active {
  background: var(--ex-bg-color2);
}
.menu-item img {
  transition: transform .2s var(--ease), opacity .2s;
}
.menu-item:active img {
  transform: translateX(.04rem);
  opacity: .8;
}

/* Auth */
.page-auth {
  background:
    radial-gradient(90% 50% at 50% 0%, rgb(var(--ex-primary-color-rgb) / .12), transparent 60%),
    linear-gradient(180deg, #eff6ff, #fff 40%);
  min-height: var(--app-height);
}
.auth-box {
  margin-top: .8rem;
  padding: .2rem .08rem;
}
.auth-box h1 {
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--ex-text-color), #334155);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.auth-submit {
  background: linear-gradient(135deg, var(--ex-primary-color), var(--ex-primary-deep));
  border-radius: var(--radius-md);
  box-shadow: 0 .1rem .28rem rgb(var(--ex-primary-color-rgb) / .3);
  transition: transform .15s var(--ease), box-shadow .2s, filter .15s;
}
.auth-submit:active {
  transform: scale(.985);
  box-shadow: none;
  filter: brightness(.97);
}
.alert {
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  animation: alertIn .35s var(--ease);
}
.alert.ok { border-color: rgb(var(--ex-up-color-rgb) / .2); }
@keyframes alertIn {
  from { opacity: 0; transform: translateY(-.08rem); }
  to { opacity: 1; transform: none; }
}

/* Product lists */
.mining-product {
  background: #fff;
  border: 1px solid var(--ex-border-color);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  transition: border-color .2s, transform .2s var(--ease);
}
.mining-product:active {
  border-color: rgb(var(--ex-primary-color-rgb) / .25);
}
.mining-product .rate {
  font-variant-numeric: tabular-nums;
}
.tag {
  background: rgb(var(--ex-primary-color-rgb) / .1);
  font-weight: 600;
}

/* Notices */
.notice-item {
  transition: background .15s;
  border-radius: var(--radius-sm);
  margin: 0 -.08rem;
  padding: .28rem .08rem;
}
.notice-item:active { background: var(--ex-bg-color2); }

/* Toast */
.toast {
  background: rgb(15 23 42 / .88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: .22rem .4rem;
  box-shadow: var(--shadow-md);
  max-width: 80%;
  text-align: center;
  line-height: 1.4;
  animation: toastIn .25s var(--ease);
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, -40%) scale(.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* Wallet modal */
.wallet-modal-panel {
  background: linear-gradient(180deg, #fff, #f8fafc);
  box-shadow: 0 -.16rem .48rem rgb(15 23 42 / .12);
  padding-bottom: calc(.48rem + var(--safe-bottom));
}
.wallet-chain-item {
  background: #fff;
  border: 1px solid var(--ex-border-color);
  transition: border-color .2s, transform .15s, background .15s;
}
.wallet-chain-item:active {
  transform: scale(.99);
  border-color: rgb(var(--ex-primary-color-rgb) / .3);
  background: rgb(var(--ex-primary-color-rgb) / .04);
}
.wm-close {
  transition: background .15s, transform .15s;
}
.wm-close:active {
  transform: scale(.92);
  background: var(--ex-bg-color3);
}

/* Chart */
.chart-top {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 5;
}
.period-bar button {
  transition: background .15s, color .15s;
}
.period-bar button.active {
  background: linear-gradient(145deg, #eff6ff, #dbeafe);
}
.kline-box {
  background: linear-gradient(180deg, #fafbfc, #fff);
}
.ohlc-row {
  font-variant-numeric: tabular-nums;
  background: var(--ex-bg-color2);
  margin: 0 .2rem .2rem;
  border-radius: var(--radius-sm);
}

/* Forms select */
.field select {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-size: .3rem;
  font-weight: 600;
  color: var(--ex-text-color);
  font-family: inherit;
  appearance: none;
}

/* Empty states */
.empty-tip {
  padding: .8rem .3rem;
  color: var(--ex-text-color3);
}
.empty-tip::before {
  content: '';
  display: block;
  width: .8rem;
  height: .08rem;
  margin: 0 auto .28rem;
  border-radius: .08rem;
  background: var(--ex-border-color2);
}

.page-header {
  display: flex;
  align-items: center;
  gap: .2rem;
  margin: 0 0 .28rem;
  padding: .04rem 0 .08rem;
  min-height: .56rem;
}
.page-header h2 {
  font-size: .36rem;
  font-weight: 700;
  letter-spacing: -.01em;
  flex: 1;
}
.page-header .back-link {
  font-size: .28rem;
  color: var(--ex-text-color2);
  padding: .08rem .04rem;
  flex-shrink: 0;
}
.page-header.center {
  justify-content: space-between;
}
.page-header.center h2 {
  text-align: center;
  flex: 1;
}

.content-card {
  font-size: .28rem;
  line-height: 1.65;
  color: var(--ex-text-color2);
  background: #fff;
  border: 1px solid var(--ex-border-color);
}
.page-auth .auth-box > a.text-color2 {
  display: inline-flex;
  align-items: center;
  margin-bottom: .28rem;
  padding: .06rem 0;
  color: var(--ex-text-color2);
  font-size: .28rem;
}
a.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.alert[style*="#fdecea"],
.alert.err {
  background: #fef2f2;
  color: var(--ex-down-color);
  border-color: rgb(var(--ex-down-color-rgb) / .18);
}
.alert[style*="#fff3cd"],
.alert.warn {
  background: #fffbeb;
  color: #b45309;
  border-color: rgb(245 158 11 / .25);
}

/* Stagger home stats */
.stats-grid .item:nth-child(1) .num { animation-delay: .05s; }
.stats-grid .item:nth-child(2) .num { animation-delay: .12s; }
.stats-grid .item:nth-child(3) .num { animation-delay: .18s; }
.stats-grid .item:nth-child(4) .num { animation-delay: .24s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(.14rem); }
  to { opacity: 1; transform: none; }
}

.mining-card,
.user-head,
.assets-hero {
  animation: fadeUp .45s var(--ease) both;
}

/* Safe scroll padding under fixed nav */
.page-index,
.page-market,
.page-trade,
.page-assets,
.page-user {
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + .24rem);
}
.page-index {
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + .4rem);
}



/* ========== Sub-pages UI ========== */
.page-sub {
  padding: .2rem .3rem .5rem;
  background:
    linear-gradient(180deg, rgb(var(--ex-primary-color-rgb) / .06) 0%, transparent 2rem),
    var(--ex-bg-color);
  min-height: calc(var(--app-height) - var(--nav-h));
}
.page-sub.no-nav,
.page.no-nav.page-sub { min-height: var(--app-height); }

.sticky-head {
  position: sticky;
  top: 0;
  z-index: 8;
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin: -.2rem -.1rem .28rem;
  padding: .16rem .1rem .18rem;
  border-bottom: 1px solid rgb(15 23 42 / .04);
}
.head-spacer { width: .8rem; flex-shrink: 0; }
.page-title {
  font-size: .4rem;
  font-weight: 700;
  margin: .12rem 0 .2rem;
  letter-spacing: -.01em;
}
.page-tip {
  font-size: .24rem;
  color: var(--ex-text-color2);
  line-height: 1.5;
  margin: 0 0 .2rem;
  padding: .16rem .2rem;
  background: var(--ex-bg-color2);
  border-radius: var(--radius-md);
}
.sub-heading {
  font-size: .3rem;
  font-weight: 700;
  margin: .28rem 0 .16rem;
  color: var(--ex-text-color);
}

/* Panels */
.panel,
.panel-soft {
  background: #fff;
  border: 1px solid var(--ex-border-color);
  border-radius: var(--radius-lg);
  padding: .32rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: .24rem;
}
.panel-soft { padding: .08rem .2rem; }
.panel-title {
  font-size: .3rem;
  font-weight: 700;
  margin-bottom: .2rem;
}
.form-stack { display: flex; flex-direction: column; gap: .04rem; }
.form-stack .btn-primary { margin-top: .2rem; }

/* Buttons */
.btn-primary,
a.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: .8rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--ex-primary-color), var(--ex-primary-deep));
  color: #fff !important;
  font-size: .3rem;
  font-weight: 700;
  box-shadow: 0 .1rem .24rem rgb(var(--ex-primary-color-rgb) / .28);
  transition: transform .15s var(--ease), box-shadow .2s, filter .15s;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary:active,
a.btn-primary:active {
  transform: scale(.985);
  box-shadow: none;
  filter: brightness(.97);
}
.btn-dark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: .8rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #0f172a, #1e293b);
  color: #fff;
  font-size: .3rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s var(--ease), filter .15s;
}
.btn-dark:active { transform: scale(.985); filter: brightness(1.05); }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: .56rem;
  padding: 0 .24rem;
  border-radius: var(--radius-sm);
  background: var(--ex-bg-color2);
  color: var(--ex-primary-color);
  font-size: .24rem;
  font-weight: 600;
  border: 1px solid var(--ex-border-color);
}

/* Product cards */
.product-list {
  display: flex;
  flex-direction: column;
  gap: .28rem;
}
.product-card {
  background: #fff;
  border: none;
  border-radius: .32rem;
  padding: 0;
  box-shadow: 0 .12rem .36rem rgb(var(--ex-primary-color-rgb) / .14);
  animation: fadeUp .45s var(--ease) both;
  overflow: hidden;
}
.product-card:nth-child(2) { animation-delay: .05s; }
.product-card:nth-child(3) { animation-delay: .1s; }
.product-card:nth-child(4) { animation-delay: .15s; }
.product-hero {
  position: relative;
  padding: .28rem .32rem .24rem;
  background: var(--ex-bg-color6);
  color: var(--ex-text-color);
  overflow: hidden;
}
.product-hero::before,
.product-hero::after {
  display: none;
}
.product-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .16rem;
  position: relative;
  z-index: 1;
}
.product-card .name {
  font-size: .32rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ex-text-color);
  line-height: 1.3;
}
.product-card .rate {
  position: relative;
  z-index: 1;
  margin-top: .14rem;
  font-size: .48rem;
  font-weight: 700;
  color: var(--ex-primary-color);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
  text-shadow: none;
}
.rate-unit {
  font-size: .24rem;
  font-weight: 500;
  color: var(--ex-text-color3);
  margin-left: .04rem;
}
.product-body {
  padding: .24rem .32rem .32rem;
  background: #fff;
}
.product-card .tag {
  position: relative;
  z-index: 1;
  background: rgb(var(--ex-primary-color-rgb) / .1);
  border: none;
  color: var(--ex-primary-color);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-weight: 600;
  padding: .06rem .14rem;
  border-radius: .12rem;
  font-size: .22rem;
  flex-shrink: 0;
}
.product-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .16rem;
  margin-bottom: .24rem;
}
.product-stats .stat {
  background: rgb(var(--ex-primary-color-rgb) / .06);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
  border-radius: .16rem;
  padding: .16rem .18rem;
  min-width: 0;
}
.product-stats .stat em {
  display: block;
  font-style: normal;
  font-size: .22rem;
  color: var(--ex-text-color3);
  margin-bottom: .06rem;
}
.product-stats .stat b {
  display: block;
  font-size: .26rem;
  font-weight: 700;
  color: var(--ex-text-color);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card .meta {
  margin: 0 0 .2rem;
  display: flex;
  justify-content: space-between;
  gap: .16rem;
  font-size: .24rem;
  color: var(--ex-text-color2);
}
.product-card .meta.twin {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .16rem;
}
.product-card .meta.twin span {
  background: rgb(var(--ex-primary-color-rgb) / .06);
  border-radius: .14rem;
  padding: .14rem .16rem;
}
.product-card .meta.twin em {
  font-style: normal;
  display: block;
  color: var(--ex-text-color3);
  margin-bottom: .04rem;
  font-size: .22rem;
}
.product-form { margin-top: .04rem; }
.product-form .field { margin-top: 0; }
.product-form .btn-primary,
.product-body > .btn-primary,
.product-card > .btn-primary {
  margin-top: .2rem;
  height: .76rem;
  border-radius: .18rem;
}
.product-card .tag {
  position: relative;
  z-index: 1;
  background: rgb(255 255 255 / .22);
  border: 1px solid rgb(255 255 255 / .35);
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-weight: 600;
  padding: .06rem .14rem;
  border-radius: .2rem;
  font-size: .22rem;
  flex-shrink: 0;
}
.product-card .progress-bar {
  height: .1rem;
  background: rgb(var(--ex-primary-color-rgb) / .1);
  border-radius: .1rem;
  overflow: hidden;
  margin: .08rem 0 .2rem;
}
.product-card .progress-bar i {
  display: block;
  height: 100%;
  background: var(--hero-bg);
  border-radius: inherit;
}

/* Compatibility with old mining-product class */
.mining-list { display: flex; flex-direction: column; gap: .28rem; }
.mining-product {
  border-radius: .32rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 .12rem .36rem rgb(var(--ex-primary-color-rgb) / .14);
}

/* KYC / status */
.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .28rem;
}
.status-row .label { font-size: .28rem; color: var(--ex-text-color2); }
.status-pill {
  display: inline-flex;
  align-items: center;
  height: .44rem;
  padding: 0 .16rem;
  border-radius: .1rem;
  font-size: .24rem;
  font-weight: 600;
}
.status-pill.s0 { background: var(--ex-bg-color3); color: var(--ex-text-color2); }
.status-pill.s1 { background: #dcfce7; color: #15803d; }
.status-pill.s2 { background: #ffedd5; color: #c2410c; }
.status-pill.s3 { background: #fee2e2; color: #b91c1c; }
.info-line {
  display: flex;
  justify-content: space-between;
  font-size: .28rem;
  padding: .16rem 0;
  border-top: 1px solid var(--ex-border-color);
}
.info-line span { color: var(--ex-text-color2); }

/* Finance */
.addr-block {
  background: linear-gradient(145deg, #f8fafc, #eff6ff);
  border: 1px dashed rgb(var(--ex-primary-color-rgb) / .28);
  border-radius: var(--radius-md);
  padding: .24rem;
  margin-bottom: .28rem;
}
.addr-block .label {
  font-size: .24rem;
  color: var(--ex-text-color2);
  margin-bottom: .12rem;
}
.addr-value {
  font-size: .28rem;
  font-weight: 700;
  word-break: break-all;
  line-height: 1.45;
  color: var(--ex-text-color);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fee-line {
  font-size: .24rem;
  color: var(--ex-text-color2);
  margin: .08rem 0 .16rem;
}
.frozen-line {
  font-size: .22rem;
  color: var(--ex-text-color2);
  margin-top: .04rem;
}
.balances-panel .wallet-row2:last-child { border-bottom: none; }

/* Language */
.lang-list { display: flex; flex-direction: column; gap: .16rem; }
.lang-form { margin: 0; }
.lang-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .16rem;
  padding: .28rem .28rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ex-border-color);
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, transform .15s, background .15s;
}
.lang-item:active { transform: scale(.99); }
.lang-item.active {
  border-color: var(--ex-primary-color);
  background: rgb(var(--ex-primary-color-rgb) / .06);
}
.lang-name { flex: 1; font-size: .3rem; font-weight: 700; }
.lang-code { font-size: .24rem; color: var(--ex-text-color2); }
.lang-check { color: var(--ex-primary-color); font-weight: 700; font-size: .32rem; }

/* Notices */
.notice-list { display: flex; flex-direction: column; gap: .14rem; }
.notice-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--ex-border-color);
  border-radius: var(--radius-lg);
  padding: .28rem .56rem .28rem .28rem;
  box-shadow: var(--shadow-sm);
  transition: border-color .2s, transform .15s;
}
.notice-card:active {
  transform: scale(.99);
  border-color: rgb(var(--ex-primary-color-rgb) / .3);
}
.notice-card .t { font-size: .3rem; font-weight: 700; padding-right: .2rem; }
.notice-card .d { margin-top: .1rem; font-size: .24rem; color: var(--ex-text-color2); }
.notice-card .chev {
  position: absolute;
  right: .24rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ex-text-color3);
  font-size: .4rem;
  font-weight: 300;
}
.notice-detail .notice-title {
  font-size: .36rem;
  font-weight: 700;
  line-height: 1.35;
}
.notice-detail .notice-date {
  margin: .16rem 0 .28rem;
  font-size: .24rem;
  color: var(--ex-text-color2);
}
.notice-detail .notice-body {
  font-size: .28rem;
  line-height: 1.7;
  color: var(--ex-text-color);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Auth card */
.page-auth {
  display: flex;
  flex-direction: column;
  padding: .4rem .3rem .6rem;
}
.auth-card {
  margin-top: .4rem;
  background: #fff;
  border: 1px solid var(--ex-border-color);
  border-radius: .36rem;
  padding: .4rem .32rem .44rem;
  box-shadow: var(--shadow-md);
  animation: fadeUp .45s var(--ease) both;
}
.auth-card .back-link { margin-bottom: .2rem; display: inline-block; }
.auth-brand {
  display: inline-flex;
  align-items: center;
  height: .44rem;
  padding: 0 .16rem;
  margin-bottom: .2rem;
  border-radius: .1rem;
  background: linear-gradient(135deg, #014cfa, #3b82f6);
  color: #fff;
  font-size: .24rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.auth-card h1 {
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: .32rem;
  color: var(--ex-text-color);
}
.auth-divider {
  display: flex;
  align-items: center;
  gap: .16rem;
  margin: .32rem 0 .2rem;
  color: var(--ex-text-color3);
  font-size: .24rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ex-border-color);
}
.auth-card .auth-switch { margin-top: .28rem; }

/* User page */
.user-meta { min-width: 0; flex: 1; }
.user-name { font-size: .36rem; font-weight: 700; }
.user-sub {
  margin-top: .06rem;
  font-size: .24rem;
  color: var(--ex-text-color2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-link {
  display: inline-block;
  margin-top: .06rem;
  font-size: .26rem;
  color: var(--ex-primary-color);
  font-weight: 600;
}
.wallet-bind-list {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  margin-bottom: .2rem;
}
.wallet-bind-item {
  display: flex;
  align-items: center;
  gap: .16rem;
  padding: .2rem .24rem;
  background: #fff;
  border: 1px solid var(--ex-border-color);
  border-radius: var(--radius-md);
  font-size: .26rem;
}
.wallet-bind-item .chain {
  font-weight: 700;
  color: var(--ex-primary-color);
  background: rgb(var(--ex-primary-color-rgb) / .08);
  padding: .04rem .12rem;
  border-radius: .08rem;
  font-size: .22rem;
}
.wallet-bind-item .addr {
  color: var(--ex-text-color2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.menu-panel {
  margin-top: .12rem;
  background: #fff;
  border: 1px solid var(--ex-border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.menu-panel .menu-item {
  margin: 0;
  padding: 0 .28rem;
  border-radius: 0;
  border-bottom: 1px solid var(--ex-border-color);
  height: 1.04rem;
}
.menu-panel .menu-item:last-child { border-bottom: none; }
.menu-panel .menu-item .chev {
  color: var(--ex-text-color3);
  font-size: .4rem;
  font-weight: 300;
  line-height: 1;
}
.menu-panel .menu-item.danger span:first-child { color: var(--ex-down-color); }
.menu-panel .menu-item img { display: none; }

/* Chart trade link */
.chart-trade {
  font-size: .28rem;
  font-weight: 700;
  color: var(--ex-primary-color);
  padding: .1rem .16rem;
  border-radius: var(--radius-sm);
  background: rgb(var(--ex-primary-color-rgb) / .08);
}

/* Empty state */
.empty-state {
  text-align: center;
  color: var(--ex-text-color3);
  font-size: .28rem;
  padding: 1rem .3rem;
  line-height: 1.5;
}
.empty-state.compact { padding: .4rem .2rem; }
.empty-state::before {
  content: '';
  display: block;
  width: .72rem;
  height: .06rem;
  margin: 0 auto .24rem;
  border-radius: .06rem;
  background: var(--ex-border-color2);
}

/* Flash in layout */
#app > .alert {
  margin: .2rem .3rem 0;
  border-radius: var(--radius-md);
}

/* Keep old auth-submit working as alias */
.auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .4rem;
  width: 100%;
  height: .88rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--ex-primary-color), var(--ex-primary-deep));
  color: #fff;
  font-size: .34rem;
  font-weight: 600;
  box-shadow: 0 .1rem .28rem rgb(var(--ex-primary-color-rgb) / .3);
}


/* Full-height when bottom nav hidden */
body.hide-nav .page {
  height: var(--app-height) !important;
  padding-bottom: .4rem !important;
}
body.hide-nav .page-sub {
  min-height: var(--app-height);
}


/* ========== Blue gradient cards theme ========== */
#app {
  background: #ffffff;
}
.page-assets,
.page-user,
.page-auth,
.page-trade,
.page-market,
.page-chart,
.page-sub {
  background: #ffffff;
}
.page-index {
  background:
    url('/web3_267/static/img/home/bbg.png') no-repeat top center / 100% auto,
    #ffffff;
}

/* Soft card base — match target flat white cards */
.card,
.panel,
.panel-soft,
.order-card,
.notice-card,
.faq-item,
.lang-item,
.auth-card,
.menu-panel,
.wallet-bind-item,
.content-card {
  background: #fff !important;
  border: 1px solid var(--ex-border-color) !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
}
.product-card,
.mining-product {
  background: #fff !important;
  border: 1px solid var(--ex-border-color) !important;
  box-shadow: none !important;
  position: relative;
  overflow: hidden;
  border-radius: .32rem !important;
}
.card::before,
.panel::before,
.order-card::before,
.notice-card::before,
.faq-item::before,
.auth-card::before,
.lang-item::before,
.product-card::before,
.mining-product::before {
  display: none !important;
}

/* Home mining / stats keep pastel colors — do NOT force hero gradient */
.assets-hero {
  background: var(--hero-bg) !important;
  border: none !important;
  box-shadow: var(--hero-shadow) !important;
  color: #fff;
  position: relative;
  overflow: hidden;
}
.page-index .mining-card,
.mining-card.hero-card,
.mining-card {
  background: var(--mining-card) !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ex-text-color) !important;
}
.page-index .mining-card::before,
.page-index .mining-card::after,
.mining-card::before,
.mining-card::after {
  display: none !important;
}
.page-index .mining-card .row,
.page-index .mining-card .earn-meta,
.page-index .mining-card .distributed,
.page-index .mining-card .distributed .text-color2 {
  color: var(--ex-text-color2);
  position: relative;
  z-index: 1;
}
.page-index .mining-card .row > span:first-child {
  color: var(--ex-text-color);
}
.page-index .mining-card .link {
  color: var(--ex-primary-color);
  text-decoration: underline;
}
.page-index .mining-card .distributed .val {
  color: var(--ex-primary-color);
  text-shadow: none;
}
.page-index .mining-card .participate-btn {
  position: relative;
  z-index: 1;
  background: var(--participate-bg);
  color: var(--ex-text-color3);
  box-shadow: none;
}
.page-index .mining-card .participate-btn.enabled {
  background: var(--ex-primary-color);
  color: #fff;
  box-shadow: none;
}
.page-index .mining-card .participate-btn:not(.enabled) {
  background: var(--participate-bg);
  color: var(--ex-text-color3);
}

.stats-card {
  background: var(--stats-card) !important;
  border: none !important;
  box-shadow: none !important;
}
.stats-grid .item {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: .12rem;
  width: 50%;
}
.stats-grid { gap: .48rem 0; padding-top: 0; }
.stats-grid .num { color: var(--ex-text-color); }

.connect-btn {
  background: var(--connect-bg) !important;
  border: none !important;
  color: var(--ex-primary-color) !important;
  box-shadow: none !important;
}
.network-pill {
  background: transparent !important;
  border: 1px solid var(--ex-border-color2) !important;
  box-shadow: none !important;
}

/* Product / panel polish */
.product-card .rate,
.mining-product .rate {
  color: var(--ex-primary-color) !important;
}
.product-card .rate .rate-unit,
.mining-product .rate .rate-unit {
  color: var(--ex-text-color3) !important;
}
.tag {
  background: rgb(var(--ex-primary-color-rgb) / .1);
  border: none;
  color: var(--ex-primary-color);
}
.product-card .tag {
  background: rgb(var(--ex-primary-color-rgb) / .1) !important;
  border: none !important;
  color: var(--ex-primary-color) !important;
}
.panel-title { color: var(--ex-text-color); }

/* Compact panel upgrade */
.panel {
  border-radius: .28rem !important;
  padding: .36rem !important;
}
.menu-panel {
  border-radius: .28rem !important;
  padding: .08rem 0 !important;
}
.menu-item {
  transition: background .15s;
}
.order-card {
  border-radius: .24rem !important;
  padding: .28rem !important;
  margin-bottom: .16rem;
}

/* User */
.user-head {
  background: var(--card-bg) !important;
  border: var(--card-border) !important;
  box-shadow: var(--card-shadow) !important;
}
.avatar {
  background: var(--hero-bg) !important;
  color: #fff !important;
  box-shadow: 0 .08rem .2rem rgb(var(--ex-primary-color-rgb) / .28);
}
.menu-panel .menu-item:active {
  background: rgb(var(--ex-primary-color-rgb) / .06);
}
.wallet-bind-item .chain {
  background: var(--hero-bg);
  color: #fff;
}

/* Language */
.lang-item.active {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: var(--ex-primary-color) !important;
  box-shadow: 0 .08rem .24rem rgb(var(--ex-primary-color-rgb) / .16) !important;
}
.lang-item.active .lang-name { color: var(--ex-primary-deep); }

/* Auth */
.auth-card {
  background: linear-gradient(165deg, #ffffff 0%, #eff6ff 60%, #dbeafe 100%) !important;
}
.auth-brand {
  background: var(--hero-bg);
  box-shadow: 0 .06rem .16rem rgb(var(--ex-primary-color-rgb) / .3);
}
.page-auth {
  background:
    radial-gradient(90% 50% at 50% 0%, rgb(var(--ex-primary-color-rgb) / .2), transparent 60%),
    linear-gradient(180deg, #dbeafe, #f8fbff 45%, #ffffff);
}

/* Notices */
.notice-card .t { color: var(--ex-text-color); }
.notice-detail.panel .notice-title { color: var(--ex-primary-deep); }

/* FAQ / earn on home */
.faq-item {
  background: var(--card-bg) !important;
}
.faq-item[open] {
  border-color: rgb(var(--ex-primary-color-rgb) / .35) !important;
  box-shadow: 0 .1rem .28rem rgb(var(--ex-primary-color-rgb) / .14) !important;
}
.earn-item {
  background: var(--card-bg) !important;
}
.earn-item .dot {
  background: var(--ex-primary-color);
  box-shadow: 0 0 0 .08rem rgb(var(--ex-primary-color-rgb) / .2);
}
.earn-item .amt { color: var(--ex-primary-deep); }

/* Stats */
.stats-grid .item {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  padding: .28rem .12rem;
  width: calc(50% - .1rem);
}
.stats-grid {
  gap: .2rem;
  padding-top: .4rem;
}
.stats-grid .num { color: var(--ex-primary-deep); }

/* Buttons */
.btn-primary,
a.btn-primary,
.auth-submit {
  background: var(--hero-bg) !important;
  box-shadow: 0 .1rem .28rem rgb(var(--ex-primary-color-rgb) / .32) !important;
}
.btn-dark {
  background: linear-gradient(135deg, #0b1f4a, #123a8a) !important;
}
.connect-btn {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .2) !important;
  color: var(--ex-primary-deep) !important;
  box-shadow: var(--card-shadow);
}
.network-pill {
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--shadow-sm);
}
.action-grid .ico {
  background: linear-gradient(145deg, #eff6ff, #bfdbfe) !important;
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .16);
  color: var(--ex-primary-deep);
  box-shadow: var(--shadow-sm);
}

/* Trade controls */
.time-btn {
  background: var(--card-bg);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .12);
}
.time-btn.active {
  background: linear-gradient(145deg, #eff6ff, #bfdbfe);
  border-color: var(--ex-primary-color);
  color: var(--ex-primary-deep);
  box-shadow: inset 0 0 0 1px rgb(var(--ex-primary-color-rgb) / .08);
}
.field {
  background: linear-gradient(160deg, #ffffff, #eff6ff);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .12);
}
.field:focus-within {
  border-color: var(--ex-primary-color);
  box-shadow: 0 0 0 .06rem rgb(var(--ex-primary-color-rgb) / .12);
}
.pct-row button,
.lev-row button {
  background: var(--card-bg);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
}
.lev-row button.active {
  background: var(--hero-bg) !important;
  border-color: transparent;
}
.mini-chart {
  background: linear-gradient(180deg, #eff6ff, #ffffff);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
  border-radius: var(--radius-md);
}
.trade-tabs {
  background: linear-gradient(180deg, #ffffff, #eff6ff);
  border-bottom-color: rgb(var(--ex-primary-color-rgb) / .12);
}

/* Market */
.tabs-top {
  background: linear-gradient(180deg, #ffffff, #f0f7ff);
  border-bottom-color: rgb(var(--ex-primary-color-rgb) / .12);
}
.market-row:active {
  background: rgb(var(--ex-primary-color-rgb) / .05);
}
.ratio-pill.up { background: linear-gradient(135deg, #22c55e, #16a34a); }
.ratio-pill.down { background: linear-gradient(135deg, #f87171, #ef4444); }

/* Bottom nav */
.bottom_nav2 {
  background: rgb(255 255 255 / .94);
  border-top: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
  box-shadow: 0 -.08rem .28rem rgb(var(--ex-primary-color-rgb) / .08);
}
.bottom_nav_item.active {
  color: var(--ex-primary-color);
}
.bottom_nav_item.active .bottom_nav_icon {
  filter: drop-shadow(0 .04rem .08rem rgb(var(--ex-primary-color-rgb) / .25));
}

/* Sticky heads */
.sticky-head,
.chart-top {
  background: rgb(248 251 255 / .94) !important;
  border-bottom: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
}
.chart-trade {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: var(--ex-primary-deep);
}
.period-bar button.active {
  background: linear-gradient(145deg, #eff6ff, #bfdbfe);
  color: var(--ex-primary-deep);
}
.ohlc-row {
  background: var(--card-bg);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
}

/* Wallet modal */
.wallet-modal-panel {
  background: linear-gradient(180deg, #ffffff, #eff6ff) !important;
}
.wallet-chain-item {
  background: var(--card-bg) !important;
  border: var(--card-border) !important;
}

/* Addr / status */
.addr-block {
  background: linear-gradient(145deg, #eff6ff, #dbeafe) !important;
  border: 1px dashed rgb(var(--ex-primary-color-rgb) / .35) !important;
}
.status-pill.s2 {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  color: var(--ex-primary-deep);
}

/* Site notice banner */
.site-notice {
  margin: .2rem 0 0;
  padding: .16rem .2rem;
  border-radius: var(--radius-md);
  font-size: .24rem;
  color: var(--ex-primary-deep);
  background: linear-gradient(135deg, #eff6ff, #dbeafe);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .2);
}

/* Wallet list panel */
.wallet-list.panel-soft,
.panel-soft {
  background: var(--card-bg) !important;
}
.wallet-row2:active {
  background: rgb(var(--ex-primary-color-rgb) / .05);
}

.section-title-md { margin-top: 1rem; margin-bottom: .32rem; font-size: .4rem; }
.section-title-lg { font-size: .48rem; margin-top: 1rem; }
.stats-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}


/* Feature parity UI */
.home-banners { margin: .28rem 0 .1rem; overflow: hidden; }
.banner-track {
  display: flex; gap: .16rem; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: .08rem;
}
.banner-item {
  flex: 0 0 85%; scroll-snap-align: start;
  min-height: 1.6rem; border-radius: var(--radius-lg);
  background: var(--hero-bg); color: #fff; padding: .28rem .32rem;
  display: flex; align-items: center; gap: .2rem;
  box-shadow: var(--hero-shadow); position: relative; overflow: hidden;
}
.banner-item img { width: .72rem; height: .72rem; object-fit: contain; background: rgb(255 255 255 / .15); border-radius: .12rem; }
.banner-item span { font-size: .3rem; font-weight: 700; position: relative; z-index: 1; }
.market-row-wrap { display: flex; align-items: center; border-bottom: 1px solid var(--ex-border-color); }
.market-row-wrap .market-row { flex: 1; border-bottom: none; }
.watch-star {
  width: .56rem; height: .56rem; margin-left: .08rem;
  color: var(--ex-text-color3); font-size: .36rem; line-height: 1;
}
.watch-star.on { color: #f5a623; }
.market-sym { display: flex; align-items: center; gap: .12rem; }
.market-sym img { width: .4rem; height: .4rem; border-radius: 50%; }
.progress-bar {
  height: .12rem; background: var(--ex-bg-color3); border-radius: .12rem;
  margin-top: .16rem; overflow: hidden;
}
.progress-bar i {
  display: block; height: 100%;
  background: var(--hero-bg); border-radius: .12rem;
}
.records-tabs { flex-wrap: wrap; }
.invite-hero .invite-code {
  font-size: .56rem; font-weight: 800; letter-spacing: .08em;
  color: var(--ex-primary-deep); margin: .12rem 0 .2rem;
}
.help-item summary { cursor: pointer; font-weight: 700; }
.help-body { padding: .16rem 0 .08rem; font-size: .26rem; line-height: 1.6; color: var(--ex-text-color2); }

/* ========== Product card v2 polish ========== */
.sticky-head {
  background: rgb(248 251 255 / .88) !important;
  border-bottom: 1px solid rgb(var(--ex-primary-color-rgb) / .08) !important;
  border-radius: 0 0 .2rem .2rem;
}
.empty-state {
  margin: .6rem .1rem;
  padding: .48rem .32rem;
  text-align: center;
  color: var(--ex-text-color3);
  background: linear-gradient(160deg, #ffffff, #eff6ff);
  border: 1px dashed rgb(var(--ex-primary-color-rgb) / .22);
  border-radius: .28rem;
  font-size: .28rem;
}
.product-body > .btn-primary,
.product-body > a.btn-primary {
  margin-top: .08rem;
}
.product-card a.product-card,
a.product-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.product-hero .tag.up {
  background: rgb(16 185 105 / .28);
  border-color: rgb(255 255 255 / .35);
}
.product-hero .tag.down {
  background: rgb(239 68 68 / .3);
  border-color: rgb(255 255 255 / .35);
}
.bank .product-card .product-hero,
.page-sub .product-card .product-form .field {
  margin-bottom: .12rem;
}
.sub-tabs {
  display: flex;
  gap: .12rem;
  margin: 0 0 .24rem;
  padding: .08rem;
  background: rgb(255 255 255 / .8);
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .1);
  border-radius: .2rem;
  overflow-x: auto;
}
.sub-tabs .tab {
  flex: 1;
  text-align: center;
  padding: .14rem .12rem;
  border-radius: .14rem;
  font-size: .26rem;
  color: var(--ex-text-color2);
  white-space: nowrap;
}
.sub-tabs .tab.active {
  background: var(--hero-bg);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 .06rem .16rem rgb(var(--ex-primary-color-rgb) / .28);
}
.page-tip {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border: 1px solid rgb(var(--ex-primary-color-rgb) / .12);
}