/* ==========================================================================
   Compound — mobile-first app shell
   Design tokens carry over from the landing page; layout is rebuilt for thumbs.
   ========================================================================== */

:root{
  --ink:#01090a;
  --ink-2:#03100f;
  --panel:#051116;
  --card:#061614;
  --card-2:#082220;
  --card-3:#0a2b27;
  --deep:#071c1a;

  --mint:#d9f0d7;
  --mist:#c7ebdc;
  --muted:#8fa79c;
  --dim:#5d7369;

  --brand:#00d395;
  --neon:#00ffb3;
  --brand-dim:rgba(0,211,149,.14);
  --line:rgba(0,211,149,.14);
  --line-2:rgba(0,211,149,.26);
  --line-3:rgba(0,211,149,.4);

  --red:#ff6060;
  --red-dim:rgba(255,96,96,.12);
  --amber:#ffb545;
  --amber-dim:rgba(255,181,69,.12);
  --blue:#4aa8ff;
  --purple:#a98bff;

  --font:"Rethink Sans",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --font-num:"42dot Sans","Rethink Sans",-apple-system,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);

  --safe-t:env(safe-area-inset-top, 0px);
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px);
  --safe-r:env(safe-area-inset-right, 0px);

  --topbar-h:56px;
  --tabbar-h:56px;
  --app-w:100%;
  --gutter:16px;
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;
  --tap:44px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  height:100%;
}

body{
  margin:0;
  min-height:100%;
  background:var(--ink);
  color:var(--mint);
  font-family:var(--font);
  font-size:15px;
  line-height:1.45;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overscroll-behavior-y:none;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,p,ul,li,figure{ margin:0; padding:0; }
ul{ list-style:none; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{
  font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
input,select,textarea{ font:inherit; color:inherit; }
img,svg{ display:block; max-width:100%; }
::selection{ background:var(--brand); color:#04120e; }

.sprite{ position:absolute; width:0; height:0; overflow:hidden; }

.ico{
  width:22px; height:22px; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
}
.ico--sm{ width:17px; height:17px; stroke-width:1.9; }
.ico--xs{ width:14px; height:14px; stroke-width:2; }

/* ---------- ambient ---------- */
.aurora{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  opacity:.85;
}
.aurora i{
  position:absolute; display:block; border-radius:50%;
  filter:blur(64px); will-change:transform;
}
.aurora .a1{
  width:340px; height:340px; left:-28%; top:-12%;
  background:radial-gradient(circle,rgba(0,211,149,.24),rgba(0,211,149,0) 68%);
  animation:drift1 24s ease-in-out infinite;
}
.aurora .a2{
  width:380px; height:380px; right:-30%; top:18%;
  background:radial-gradient(circle,rgba(0,255,179,.13),rgba(0,255,179,0) 66%);
  animation:drift2 30s ease-in-out infinite;
}
.aurora .a3{
  width:300px; height:300px; left:10%; bottom:-16%;
  background:radial-gradient(circle,rgba(0,140,120,.16),rgba(0,140,120,0) 70%);
  animation:drift3 27s ease-in-out infinite;
}
@keyframes drift1{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(24px,18px,0)} }
@keyframes drift2{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-28px,22px,0)} }
@keyframes drift3{ 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(18px,-24px,0)} }

/* ---------- shell ---------- */
.app{
  position:relative; z-index:1;
  width:var(--app-w);
  max-width:560px;
  margin:0 auto;
  min-height:100dvh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding-left:var(--safe-l);
  padding-right:var(--safe-r);
}

.topbar{
  position:fixed;
  top:0; left:50%;
  transform:translateX(-50%);
  width:var(--app-w);
  max-width:560px;
  z-index:60;
  height:calc(var(--topbar-h) + var(--safe-t));
  padding:var(--safe-t) var(--gutter) 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:linear-gradient(180deg,rgba(1,9,10,.92),rgba(1,9,10,.72) 70%,rgba(1,9,10,0));
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,211,149,.22),transparent);
  opacity:0; transition:opacity .3s var(--ease);
}
.topbar.is-scrolled::after{ opacity:1; }

.brand{ display:flex; align-items:center; gap:8px; min-height:var(--tap); }
.brand__mark{ width:21px; height:21px; color:var(--brand); flex:none; }
.brand__word{
  font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--mint);
}
.topbar__actions{ display:flex; align-items:center; gap:7px; min-width:0; }

/* 登录后按钮变成地址：窄屏必须能收缩，否则 320 会顶出屏幕 */
.btn--connect{ min-width:0; max-width:44vw; overflow:hidden; }
.btn--connect .t-mono,
.btn--connect > span{
  display:block; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width:359px){
  .brand__word{ display:none; }
  .btn--connect{ max-width:52vw; padding:0 12px; }
}

.chain-pill{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 12px;
  border-radius:999px;
  background:rgba(0,211,149,.08);
  border:1px solid var(--line-2);
  font-size:12px; font-weight:600; color:var(--mist);
  max-width:120px;
}
.chain-pill .dot{
  width:6px; height:6px; border-radius:50%; background:var(--brand);
  box-shadow:0 0 0 3px rgba(0,211,149,.16); flex:none;
}
.chain-pill__txt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chain-pill[hidden]{ display:none; }

.view{
  flex:1;
  padding:calc(var(--topbar-h) + var(--safe-t) + 8px) var(--gutter) 0;
  padding-bottom:calc(var(--safe-b) + 26px);
  min-height:100dvh;
}

/* ---------- tab bar ---------- */
/* 主导航改为侧边抽屉，见 .drawer */

.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  height:var(--tabbar-h);
  font-size:10.5px; font-weight:600; letter-spacing:.01em;
  color:var(--dim);
  transition:color .2s var(--ease), transform .2s var(--ease);
  position:relative;
}
.tab .ico{ width:21px; height:21px; transition:transform .24s var(--ease); }
.tab.is-active{ color:var(--brand); }
.tab.is-active .ico{ transform:translateY(-1px); }
.tab.is-active::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:22px; height:2px; border-radius:0 0 3px 3px;
  background:var(--brand); box-shadow:0 0 10px rgba(0,211,149,.7);
}
.tab:active{ transform:scale(.94); }

/* ---------- typography ---------- */
.t-hero{ font-size:30px; line-height:1.06; font-weight:600; letter-spacing:-.032em; }
.t-h1{ font-size:23px; line-height:1.14; font-weight:600; letter-spacing:-.028em; }
.t-h2{ font-size:17px; line-height:1.2; font-weight:600; letter-spacing:-.02em; }
.t-h3{ font-size:15px; line-height:1.25; font-weight:600; letter-spacing:-.015em; }
.t-body{ font-size:14px; line-height:1.5; color:var(--muted); }
.t-small{ font-size:12.5px; line-height:1.45; color:var(--muted); }
.t-tiny{ font-size:11px; line-height:1.4; color:var(--dim); letter-spacing:.01em; }
.t-mono{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.num{ font-family:var(--font-num); font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim);
}
.brand-c{ color:var(--brand); }
.up{ color:var(--brand); }
.down{ color:var(--red); }
.strong{ color:var(--mint); font-weight:600; }

/* ---------- primitives ---------- */
.card{
  position:relative;
  background:linear-gradient(168deg,rgba(8,34,32,.92),rgba(4,15,19,.94));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
}
.card--flat{ background:rgba(6,22,20,.6); }
.card--glow{
  box-shadow:0 0 0 1px rgba(0,211,149,.06), 0 18px 44px -28px rgba(0,211,149,.45);
}
.card + .card{ margin-top:10px; }

.stack{ display:flex; flex-direction:column; gap:10px; }
.row{ display:flex; align-items:center; gap:10px; }
.row--between{ justify-content:space-between; }
.row--top{ align-items:flex-start; }
.grow{ flex:1; min-width:0; }
.nowrap{ white-space:nowrap; }

.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin:22px 2px 10px;
}
.section-head:first-child{ margin-top:6px; }

.divider{ height:1px; background:var(--line); margin:12px 0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--tap);
  padding:0 16px;
  border-radius:12px;
  font-size:14.5px; font-weight:600; letter-spacing:-.005em;
  transition:transform .16s var(--ease), background .2s var(--ease), opacity .2s var(--ease), border-color .2s var(--ease);
  user-select:none;
  white-space:nowrap;
}
.btn:active{ transform:scale(.975); }
.btn--primary{
  background:linear-gradient(180deg,#00e2a2,#00c489);
  color:#04120e;
  box-shadow:0 10px 26px -14px rgba(0,211,149,.9), inset 0 1px 0 rgba(255,255,255,.24);
}
.btn--primary:active{ background:linear-gradient(180deg,#00cf94,#00b47e); }
.btn--ghost{
  background:rgba(0,211,149,.07);
  border:1px solid var(--line-2);
  color:var(--mist);
}
.btn--quiet{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  color:var(--muted);
}
.btn--danger{
  background:var(--red-dim);
  border:1px solid rgba(255,96,96,.3);
  color:var(--red);
}
.btn--block{ width:100%; }
.btn--sm{ min-height:34px; padding:0 12px; font-size:12.5px; border-radius:10px; }
.btn--xs{ min-height:28px; padding:0 9px; font-size:11.5px; border-radius:8px; gap:5px; }
.btn--connect{
  min-height:40px; padding:0 15px; font-size:13.5px; border-radius:999px;
  background:linear-gradient(180deg,#00e2a2,#00c489);
  color:#04120e;
  box-shadow:0 6px 18px -10px rgba(0,211,149,.95);
}
.btn[disabled],.btn.is-disabled{
  opacity:.42; pointer-events:none; filter:saturate(.5);
}

/* ---------- chips ---------- */
.chips{
  display:flex; gap:7px; overflow-x:auto; scrollbar-width:none;
  margin:0 calc(var(--gutter) * -1); padding:2px var(--gutter) 2px;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.chips::-webkit-scrollbar{ display:none; }
.chip{
  flex:none;
  min-height:32px; padding:0 13px;
  display:inline-flex; align-items:center; gap:6px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.025);
  color:var(--muted);
  font-size:12.5px; font-weight:600;
  transition:all .2s var(--ease);
  scroll-snap-align:start;
}
.chip.is-active{
  background:rgba(0,211,149,.14);
  border-color:var(--line-3);
  color:var(--brand);
}
.chip:active{ transform:scale(.96); }

/* ---------- segmented ---------- */
.seg{
  position:relative;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  padding:3px;
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.05);
  margin-bottom:12px;
}
.seg__btn{
  position:relative; z-index:2;
  min-height:34px;
  border-radius:9px;
  font-size:13px; font-weight:600; color:var(--dim);
  transition:color .2s var(--ease);
  display:flex; align-items:center; justify-content:center; gap:5px;
}
.seg__btn.is-active{ color:#04120e; }
.seg__marker{
  position:absolute; z-index:1; top:3px; bottom:3px; left:0;
  border-radius:9px;
  background:linear-gradient(180deg,#00e2a2,#00c489);
  box-shadow:0 6px 16px -10px rgba(0,211,149,.9);
  transition:transform .3s var(--ease), width .3s var(--ease);
  pointer-events:none;
}
.seg__marker[hidden]{ display:none; }

/* ---------- asset rows ---------- */
.asset{ display:flex; align-items:center; gap:11px; }
.asset__ico{
  width:36px; height:36px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  font-size:12.5px; font-weight:700; letter-spacing:-.02em;
  background:rgba(0,211,149,.1);
  border:1px solid var(--line-2);
  color:var(--mint);
  position:relative;
  overflow:hidden;
}
.asset__ico--bnb{ background:rgba(243,186,47,.14); border-color:rgba(243,186,47,.32); color:#f3ba2f; }
.asset__ico--eth{ background:rgba(140,160,255,.14); border-color:rgba(140,160,255,.32); color:#a9b6ff; }
.asset__ico--btc{ background:rgba(247,147,26,.14); border-color:rgba(247,147,26,.32); color:#f7931a; }
.asset__ico--trx{ background:rgba(255,6,10,.13); border-color:rgba(255,6,10,.3); color:#ff5a5e; }
.asset__ico--usdt{ background:rgba(38,161,123,.16); border-color:rgba(38,161,123,.34); color:#4ed6a8; }
.asset__ico--usdc{ background:rgba(39,117,202,.16); border-color:rgba(39,117,202,.34); color:#6fa9f0; }
.asset__ico--dai{ background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.3); color:#f5b942; }

/* real token marks: full-bleed disc, hairline ring keeps the edge crisp on dark */
.asset__ico--logo{
  background:none; border:0; overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,.07);
}
.asset__ico--logo img{ width:100%; height:100%; display:block; object-fit:contain; }
/* WBTC's disc is nearly page-black — lift its edge so it never disappears */
.asset__ico--wbtc{ box-shadow:0 0 0 1px rgba(255,255,255,.2), 0 0 14px -5px rgba(140,170,255,.45); }
/* wrapped BTC on BSC (BTCB): corner dot so it never reads as native BTC */
.asset__ico--pegged{ overflow:visible; }
.asset__ico--pegged::after{
  content:""; position:absolute; right:-1px; bottom:-1px;
  width:8px; height:8px; border-radius:50%;
  background:#f3ba2f; box-shadow:0 0 0 2px var(--ink);
}
/* inline logo used inside the amount field suffix */
.tok-logo{ display:block; flex:none; border-radius:50%; }
.asset__name{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; gap:6px; }
.asset__meta{ font-size:11.5px; color:var(--dim); margin-top:1px; display:flex; align-items:center; gap:5px; }
.asset__right{ text-align:right; }
.asset__val{ font-size:14.5px; font-weight:500; font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.asset__sub{ font-size:11.5px; color:var(--dim); margin-top:1px; font-family:var(--font-num); }

.badge{
  display:inline-flex; align-items:center; gap:4px;
  height:17px; padding:0 6px;
  border-radius:5px;
  font-size:10px; font-weight:700; letter-spacing:.02em;
  background:rgba(0,211,149,.1);
  color:var(--brand);
  border:1px solid rgba(0,211,149,.18);
}
.badge--amber{ background:var(--amber-dim); color:var(--amber); border-color:rgba(255,181,69,.24); }
.badge--red{ background:var(--red-dim); color:var(--red); border-color:rgba(255,96,96,.24); }
.badge--muted{ background:rgba(255,255,255,.05); color:var(--dim); border-color:rgba(255,255,255,.07); }
.badge--purple{ background:rgba(169,139,255,.12); color:var(--purple); border-color:rgba(169,139,255,.24); }

/* ---------- hero card ---------- */
.hero-card{
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-lg);
  padding:18px 16px 14px;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(0,211,149,.16), rgba(0,211,149,0) 62%),
    linear-gradient(168deg, rgba(8,40,36,.96), rgba(3,14,17,.98));
  border:1px solid var(--line-2);
  box-shadow:0 24px 60px -40px rgba(0,211,149,.7);
}
.hero-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-card__label{ font-size:11.5px; color:var(--muted); letter-spacing:.02em; }
.hero-card__val{
  font-family:var(--font-num); font-weight:300;
  font-size:38px; line-height:1.05; letter-spacing:-.03em;
  margin-top:5px;
  display:flex; align-items:baseline; gap:8px;
}
.hero-card__val small{ font-size:16px; color:var(--muted); font-weight:400; letter-spacing:0; }
.hero-card__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:8px; margin-top:16px;
}
.hero-stat{ min-width:0; }
.hero-stat__k{ font-size:10.5px; color:var(--dim); letter-spacing:.02em; }
.hero-stat__v{
  font-family:var(--font-num); font-size:15px; margin-top:3px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}

/* ---------- quick actions ---------- */
.quick{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:12px;
}
.quick__btn{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:64px;
  border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.055);
  font-size:11.5px; font-weight:600; color:var(--mist);
  transition:transform .16s var(--ease), background .2s var(--ease);
}
.quick__btn .ico{ color:var(--brand); width:20px; height:20px; }
.quick__btn:active{ transform:scale(.955); background:rgba(0,211,149,.09); }

/* ---------- pool card ---------- */
.pool{
  position:relative;
  padding:13px 14px;
  border-radius:var(--radius);
  background:linear-gradient(168deg,rgba(8,30,29,.9),rgba(4,15,19,.94));
  border:1px solid var(--line);
  transition:border-color .2s var(--ease), transform .16s var(--ease);
  display:block;
  width:100%;
  text-align:left;
}
.pool:active{ transform:scale(.988); border-color:var(--line-2); }
.pool__top{ display:flex; align-items:center; gap:10px; }
.pool__apr{
  text-align:right; flex:none;
}
.pool__apr b{
  font-family:var(--font-num); font-weight:400;
  font-size:19px; letter-spacing:-.02em; color:var(--brand);
  display:block; line-height:1;
}
.pool__apr span{ font-size:10px; color:var(--dim); letter-spacing:.03em; }
.pool__foot{
  display:flex; align-items:center; gap:8px;
  margin-top:11px; padding-top:10px;
  border-top:1px solid rgba(0,211,149,.09);
  font-size:11.5px; color:var(--dim);
}
.pool__foot b{ color:var(--mist); font-weight:500; font-family:var(--font-num); }
.pool__foot .sep{ width:1px; height:9px; background:rgba(255,255,255,.1); }

/* ---------- list row ---------- */
.lrow{
  display:flex; align-items:center; gap:11px;
  min-height:52px; padding:9px 0;
}
.lrow + .lrow{ border-top:1px solid rgba(255,255,255,.045); }
.lrow__t{ font-size:14px; font-weight:500; }
.lrow__s{ font-size:11.5px; color:var(--dim); margin-top:2px; }
.lrow__r{ margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--dim); }

/* ---------- field ---------- */
.field{
  border-radius:14px;
  background:rgba(0,0,0,.32);
  border:1px solid var(--line);
  padding:11px 13px;
  transition:border-color .2s var(--ease);
}
.field:focus-within{ border-color:var(--line-3); }
.field__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:5px; }
.field__label{ font-size:11px; color:var(--dim); letter-spacing:.02em; }
.field__row{ display:flex; align-items:center; gap:8px; }
.field input{
  flex:1; min-width:0;
  background:none; border:0; outline:none;
  font-family:var(--font-num); font-size:26px; font-weight:300;
  letter-spacing:-.02em; color:var(--mint);
  padding:0; height:34px;
  /* 16px+ keeps iOS from zooming on focus */
  -webkit-appearance:none;
}
.field input::placeholder{ color:rgba(143,167,156,.4); }
.field__suffix{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 10px 0 8px;
  border-radius:999px;
  background:rgba(0,211,149,.08);
  border:1px solid var(--line-2);
  font-size:12.5px; font-weight:600; flex:none;
}
.field__max{
  height:24px; padding:0 7px; border-radius:6px;
  background:rgba(0,211,149,.14); color:var(--brand);
  font-size:10.5px; font-weight:700; letter-spacing:.04em;
}
.field__bottom{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; font-size:11.5px; color:var(--dim);
}
.field__bottom .t-mono{ font-family:var(--font-num); }

/* ---------- progress / health ---------- */
.meter{
  height:5px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden;
}
.meter__fill{
  height:100%; border-radius:99px;
  background:linear-gradient(90deg,#00c489,#00ffb3);
  transition:width .5s var(--ease);
}
.meter__fill--warn{ background:linear-gradient(90deg,#e0a03c,#ffb545); }
.meter__fill--bad{ background:linear-gradient(90deg,#d94b4b,#ff6060); }

/* ---------- sheet ---------- */
.sheet-root{
  position:fixed; inset:0; z-index:120;
  pointer-events:none;
}
.sheet-root[aria-hidden="false"]{ pointer-events:auto; }
.sheet-scrim{
  position:absolute; inset:0;
  background:rgba(0,6,7,.66);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .28s var(--ease);
}
.sheet-root.is-open .sheet-scrim{ opacity:1; }
.sheet{
  position:absolute; left:50%; bottom:0;
  transform:translate(-50%,100%);
  width:var(--app-w); max-width:560px;
  max-height:88dvh;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#07201d,#04100f 40%);
  border-top-left-radius:24px; border-top-right-radius:24px;
  border:1px solid var(--line-2);
  border-bottom:0;
  box-shadow:0 -24px 70px -30px rgba(0,0,0,.9);
  transition:transform .36s var(--ease);
  padding-bottom:var(--safe-b);
}
.sheet-root.is-open .sheet{ transform:translate(-50%,0); }
.sheet__grip{
  width:38px; height:4px; border-radius:99px;
  background:rgba(255,255,255,.16);
  margin:9px auto 0; flex:none;
}
.sheet__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:12px 16px 10px; flex:none;
}
.sheet__title{ font-size:17px; font-weight:600; letter-spacing:-.02em; }
.sheet__close{
  width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.05); color:var(--muted);
  flex:none;
}
.sheet__body{
  padding:2px 16px 18px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  flex:1;
}
.sheet__foot{
  padding:10px 16px 14px;
  border-top:1px solid rgba(0,211,149,.1);
  background:rgba(4,16,15,.9);
  flex:none;
}

/* ---------- toast ---------- */
.toast-root{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--tabbar-h) + var(--safe-b) + 14px);
  z-index:200;
  width:var(--app-w); max-width:520px;
  padding:0 16px;
  display:flex; flex-direction:column-reverse; gap:8px;
  pointer-events:none;
}
.toast{
  display:flex; align-items:flex-start; gap:9px;
  padding:11px 13px;
  border-radius:13px;
  background:rgba(9,34,31,.97);
  border:1px solid var(--line-2);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.95);
  font-size:13px; color:var(--mist);
  animation:toastIn .34s var(--ease) both;
  pointer-events:auto;
}
.toast.is-out{ animation:toastOut .26s var(--ease) forwards; }
.toast--err{ border-color:rgba(255,96,96,.34); background:rgba(38,12,12,.97); }
.toast--ok{ border-color:rgba(0,211,149,.34); }
.toast .ico{ margin-top:1px; }
.toast__msg{ flex:1; min-width:0; word-break:break-word; }
@keyframes toastIn{ from{ opacity:0; transform:translateY(14px) scale(.97);} to{ opacity:1; transform:none;} }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px) scale(.98);} }

/* ---------- empty / skeleton ---------- */
.empty{
  text-align:center; padding:26px 16px;
  border-radius:var(--radius);
  border:1px dashed rgba(0,211,149,.16);
  background:rgba(0,211,149,.02);
}
.empty .ico{ margin:0 auto 8px; color:var(--dim); width:26px; height:26px; }
.empty p{ font-size:13px; color:var(--dim); }

.sk{
  border-radius:8px;
  background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.09),rgba(255,255,255,.04));
  background-size:200% 100%;
  animation:sk 1.4s linear infinite;
}
@keyframes sk{ to{ background-position:-200% 0; } }

/* ---------- misc ---------- */
.hide{ display:none !important; }
.link{ color:var(--brand); font-weight:600; }
.copy-line{
  display:flex; align-items:center; gap:8px;
  padding:9px 11px; border-radius:11px;
  background:rgba(0,0,0,.3); border:1px solid var(--line);
  font-family:var(--font-num); font-size:12.5px; color:var(--mist);
}
.copy-line span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.copy-line button{ margin-left:auto; color:var(--dim); flex:none; }

.note{
  display:flex; gap:8px;
  padding:10px 11px; border-radius:11px;
  background:rgba(255,181,69,.06);
  border:1px solid rgba(255,181,69,.16);
  font-size:12px; line-height:1.45; color:rgba(255,196,120,.92);
}
.note .ico{ color:var(--amber); margin-top:1px; flex:none; }
.note--info{ background:rgba(74,168,255,.06); border-color:rgba(74,168,255,.18); color:#9dc9f5; }
.note--info .ico{ color:var(--blue); }

.kv{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:7px 0; }
.kv + .kv{ border-top:1px solid rgba(255,255,255,.04); }
.kv__k{ font-size:12.5px; color:var(--dim); }
.kv__v{ font-size:12.5px; color:var(--mist); font-family:var(--font-num); font-variant-numeric:tabular-nums; }

.wallet-opt{
  display:flex; align-items:center; gap:11px;
  width:100%; min-height:54px; padding:9px 11px;
  border-radius:13px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.06);
  text-align:left;
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .16s var(--ease);
}
.wallet-opt:active{ transform:scale(.985); }
.wallet-opt.is-live{ border-color:var(--line-2); background:rgba(0,211,149,.06); }
.wallet-opt__ico{
  width:34px; height:34px; border-radius:9px; flex:none;
  display:grid; place-items:center;
  background:rgba(255,255,255,.06);
  font-size:15px;
}
.wallet-opt__t{ font-size:13.5px; font-weight:600; }
.wallet-opt__s{ font-size:11px; color:var(--dim); margin-top:1px; }
.wallet-opt__r{ margin-left:auto; flex:none; }

.chain-opt{
  display:flex; align-items:center; gap:11px;
  width:100%; min-height:60px; padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(255,255,255,.06);
  text-align:left;
  transition:transform .16s var(--ease), border-color .2s var(--ease), background .2s var(--ease);
}
.chain-opt:active{ transform:scale(.985); background:rgba(0,211,149,.07); border-color:var(--line-2); }
.chain-opt__dot{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:grid; place-items:center;
  font-size:13px; font-weight:700;
}

.noscript{
  position:fixed; inset:0; z-index:999; display:grid; place-items:center;
  padding:24px; text-align:center; background:var(--ink); color:var(--mint);
  font-size:14px;
}

/* ---------- wide screens: keep the phone column, add a frame ---------- */
@media (min-width:600px){
  body{ background:#000607; }
  .app{
    border-left:1px solid rgba(0,211,149,.08);
    border-right:1px solid rgba(0,211,149,.08);
    background:rgba(1,9,10,.6);
    box-shadow:0 0 90px -20px rgba(0,211,149,.13);
  }
  .topbar, .tabbar{ border-left:1px solid rgba(0,211,149,.08); border-right:1px solid rgba(0,211,149,.08); }
  .sheet{ border-left:1px solid var(--line-2); border-right:1px solid var(--line-2); }
}

@media (min-width:1024px){
  :root{ --app-w:520px; --gutter:18px; }
  .view{ padding-bottom:calc(var(--safe-b) + 34px); }
}

/* ---------- very small phones ---------- */
@media (max-width:359px){
  :root{ --gutter:13px; }
  .t-hero{ font-size:26px; }
  .hero-card__val{ font-size:32px; }
  .quick__btn{ font-size:10.5px; min-height:58px; }
  .pool__apr b{ font-size:17px; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- landscape phones: trim vertical chrome ---------- */
@media (orientation:landscape) and (max-height:460px){
  .aurora{ display:none; }
  .hero-card__val{ font-size:30px; }
}

/* ---------- invite ---------- */

/* 邀请码主卡 */
.inv-hero{
  position:relative;
  margin-top:2px;
  padding:18px 18px 14px;
  border-radius:20px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(0,211,149,.16), rgba(0,211,149,0) 62%),
    linear-gradient(168deg, rgba(217,240,215,.07), rgba(1,9,10,.5));
  border:1px solid rgba(0,211,149,.26);
  box-shadow:0 18px 40px -28px rgba(0,211,149,.5), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.inv-hero::after{
  content:''; position:absolute; right:-40px; top:-60px;
  width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(0,211,149,.22), rgba(0,211,149,0) 70%);
  pointer-events:none;
}
.inv-hero__top{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:6px;
  font-size:11.5px; letter-spacing:.06em; color:var(--dim);
}
.inv-hero__code{
  position:relative; z-index:1;
  margin-top:10px;
  font-family:var(--font-num);
  font-size:40px; font-weight:400; line-height:1.05;
  letter-spacing:.18em; text-indent:.18em;
  color:var(--brand);
  text-shadow:0 0 30px rgba(0,211,149,.4);
  user-select:all;
}
.inv-hero__hint{
  position:relative; z-index:1;
  margin-top:8px; font-size:12.5px; line-height:1.55; color:var(--mist);
}
.inv-hero__btns{ position:relative; z-index:1; display:flex; gap:8px; margin-top:14px; }
.inv-btn{
  flex:1; min-height:44px;
  display:flex; align-items:center; justify-content:center; gap:6px;
  border-radius:12px; cursor:pointer;
  font-family:inherit; font-size:13.5px; font-weight:600;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  color:var(--mist);
  transition:transform .16s var(--ease), background .2s var(--ease);
}
.inv-btn:active{ transform:scale(.98); }
.inv-btn--solid{
  background:linear-gradient(180deg,#00e2a2,#00c489);
  border-color:transparent; color:#04120e;
  box-shadow:0 10px 24px -14px rgba(0,211,149,.9);
}
.inv-hero__link{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:8px;
  margin-top:12px; padding:9px 10px;
  border-radius:10px;
  background:rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.06);
  font-family:var(--font-num); font-size:11.5px; color:var(--dim);
}
.inv-hero__link span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inv-hero__link button{
  flex:none; display:grid; place-items:center;
  width:26px; height:26px; border:0; border-radius:7px;
  background:rgba(255,255,255,.06); color:var(--mist); cursor:pointer;
}

/* 小节标题 */
.inv-sec{
  display:flex; align-items:center; gap:7px;
  margin:22px 2px 10px;
  font-size:13.5px; font-weight:600; color:var(--mint);
}
.inv-sec .ico{ color:var(--brand); }

/* 团队三格 */
.inv-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.inv-stat{
  padding:12px 12px 11px; border-radius:14px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--line-2);
  min-width:0;
}
.inv-stat__k{ display:block; font-size:10.5px; color:var(--dim); white-space:nowrap; }
.inv-stat__v{
  display:block; margin-top:5px;
  font-family:var(--font-num); font-size:17px; font-weight:400;
  color:var(--mint); font-variant-numeric:tabular-nums;
  overflow:hidden; text-overflow:ellipsis;
}
.inv-stat--brand{
  background:rgba(0,211,149,.08);
  border-color:rgba(0,211,149,.28);
}
.inv-stat--brand .inv-stat__v{ color:var(--brand); }

/* 10 层明细 */
.inv-lv-card{
  border-radius:16px; overflow:hidden;
  border:1px solid var(--line-2);
  background:rgba(255,255,255,.02);
}
.inv-lv{
  display:grid;
  grid-template-columns:52px 44px minmax(0,1fr) 76px;
  gap:8px; align-items:center;
  padding:10px 12px;
  border-top:1px solid rgba(44,127,105,.12);
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
.inv-lv:first-child{ border-top:0; }
.inv-lv__lvl{
  display:flex; align-items:baseline; gap:5px;
  font-family:var(--font-num); color:var(--brand); font-size:12.5px;
}
.inv-lv__lvl i{ font-style:normal; font-size:10px; color:var(--dim); }
.inv-lv__n{ font-family:var(--font-num); color:var(--muted); }
.inv-lv__stake{
  min-width:0; text-align:right;
  font-family:var(--font-num); color:var(--mist);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.inv-lv__rew{ text-align:right; font-family:var(--font-num); color:var(--brand); }
.inv-lv.is-empty{ opacity:.4; }
.inv-lv.is-empty .inv-lv__rew{ color:var(--dim); }

@media (max-width:359px){
  .inv-hero{ padding:16px 14px 12px; }
  .inv-hero__code{ font-size:33px; letter-spacing:.14em; text-indent:.14em; }
  .inv-lv{ grid-template-columns:46px 38px minmax(0,1fr) 68px; font-size:11px; padding:9px 10px; }
}
/* 每日奖励领取卡 */
.inv-claim{
  display:flex; align-items:center; gap:12px;
  margin-top:14px; padding:14px 16px;
  border-radius:16px;
  background:linear-gradient(168deg, rgba(0,211,149,.13), rgba(1,9,10,.4));
  border:1px solid rgba(0,211,149,.3);
}
.inv-claim__main{ flex:1; min-width:0; }
.inv-claim__k{ font-size:10.5px; color:var(--dim); }
.inv-claim__v{
  margin-top:3px; font-family:var(--font-num); font-size:22px;
  color:var(--brand); font-variant-numeric:tabular-nums;
}
.inv-claim__h{ margin-top:4px; font-size:10.5px; color:var(--dim); line-height:1.4; }
.inv-claim .inv-btn{ flex:none; min-width:104px; }

@media (max-width:359px){
  .inv-claim{ flex-direction:column; align-items:stretch; }
  .inv-claim .inv-btn{ width:100%; }
}
/* VIP 徽标与进度 */
.vip-badge{
  margin-left:4px; padding:1px 7px;
  border-radius:999px;
  font-family:var(--font-num); font-size:10.5px; letter-spacing:.04em;
  color:#04120e; background:linear-gradient(180deg,#7ff0c4,#00d395);
}
.vip-next{
  margin:10px 2px 0;
  font-size:11.5px; color:var(--dim);
}
/* 质押页 VIP 横幅 */
.stake-vip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:12px;padding:10px 14px;border-radius:12px;
  background:rgba(0,211,149,.07);border:1px solid rgba(0,211,149,.22);
  font-size:12px;
}
.stake-vip__k{ color:var(--dim); }
.stake-vip__v{ color:var(--brand); font-family:var(--font-num); margin-right:10px; }


/* ---------- 汉堡 + 侧边抽屉 ---------- */
.burger{
  display:grid; place-items:center;
  width:38px; height:38px; margin-right:2px;
  border:0; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.05);
  color:var(--mist);
  transition:background .18s var(--ease), transform .16s var(--ease);
}
.burger:active{ transform:scale(.94); background:rgba(255,255,255,.09); }
.burger .ico{ width:20px; height:20px; }

.drawer{
  position:fixed; inset:0; z-index:80;
  pointer-events:none;
}
.drawer.is-open{ pointer-events:auto; }

.drawer__scrim{
  position:absolute; inset:0;
  background:rgba(0,0,0,.55);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
  opacity:0; transition:opacity .26s var(--ease);
}
.drawer.is-open .drawer__scrim{ opacity:1; }

.drawer__panel{
  position:absolute; top:0; left:0; bottom:0;
  width:min(78vw, 296px);
  padding:calc(var(--safe-t) + 18px) 14px calc(var(--safe-b) + 16px);
  background:linear-gradient(178deg, #04201d, #02100f 60%);
  border-right:1px solid rgba(0,211,149,.22);
  box-shadow:24px 0 60px -30px rgba(0,0,0,.9);
  transform:translateX(-102%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex; flex-direction:column;
  overflow-y:auto;
}
.drawer.is-open .drawer__panel{ transform:none; }

.drawer__head{
  display:flex; align-items:center; gap:8px;
  padding:0 6px 16px;
  border-bottom:1px solid rgba(44,127,105,.22);
}
.drawer__head .brand__mark{ width:24px; height:24px; color:var(--brand); }
.drawer__head .brand__word{ font-size:17px; font-weight:600; color:var(--mint); letter-spacing:.01em; }
.drawer__close{
  margin-left:auto; display:grid; place-items:center;
  width:32px; height:32px; border:0; border-radius:9px;
  background:rgba(255,255,255,.05); color:var(--dim); cursor:pointer;
}

.drawer__nav{ display:flex; flex-direction:column; gap:4px; margin-top:14px; }
.dnav{
  display:flex; align-items:center; gap:12px;
  min-height:46px; padding:0 12px;
  border-radius:12px;
  color:var(--mist); text-decoration:none;
  font-size:14.5px;
  transition:background .16s var(--ease), color .16s var(--ease);
}
.dnav .ico{ color:var(--dim); }
.dnav:active{ background:rgba(255,255,255,.06); }
.dnav.is-active{
  background:rgba(0,211,149,.13);
  color:var(--brand);
  font-weight:600;
}
.dnav.is-active .ico{ color:var(--brand); }

.drawer__foot{
  margin-top:auto; padding:14px 8px 0;
  font-size:11px; color:var(--dim);
  border-top:1px solid rgba(44,127,105,.18);
}

/* 链图标：官方代币 logo，圆形裁切 */
.chain-logo{
  flex:none;
  border-radius:50%;
  object-fit:contain;
  background:rgba(255,255,255,.03);
}
.lrow__ico .chain-logo{ display:block; }

/* ============================================================
   白皮书页面
   ============================================================ */
.wp{
  padding:0 2px 10px;
  --wp-line: rgba(44,127,105,.24);
}

/* 封面 */
.wp-hero{
  position:relative;
  margin:2px 0 18px;
  padding:28px 20px 24px;
  border-radius:22px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(0,211,149,.18), rgba(0,211,149,0) 62%),
    linear-gradient(172deg, rgba(217,240,215,.07), rgba(1,9,10,.55));
  border:1px solid rgba(0,211,149,.26);
  overflow:hidden;
  text-align:center;
}
.wp-hero__mark{ display:grid; place-items:center; margin-bottom:14px; }
.wp-hero__mark svg{ width:44px; height:44px; color:var(--brand); }
.wp-hero__kicker{
  font-size:10px; letter-spacing:.18em; color:var(--dim); text-transform:uppercase;
}
.wp-hero__t{
  margin:10px 0 0;
  font-size:27px; line-height:1.22; font-weight:600;
  color:var(--mint); letter-spacing:-.01em;
  word-break:keep-all; text-wrap:balance;
}
.wp-hero__s{ margin:10px 0 0; font-size:12.5px; color:var(--mist); }

/* 声明 */
.wp-disclaim{
  margin:0 0 18px; padding:14px 16px; border-radius:14px;
  background:rgba(245,181,68,.07);
  border:1px solid rgba(245,181,68,.28);
  font-size:11.5px; line-height:1.65; color:rgba(217,240,215,.85);
}
.wp-disclaim b{ display:block; margin-bottom:6px; color:#f5b544; font-size:12px; }
.wp-disclaim p{ margin:0; }

/* 目录 */
.wp-toc{
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
  margin-bottom:22px;
}
.wp-toc__h{
  grid-column:1 / -1; font-size:11px; color:var(--dim);
  letter-spacing:.1em; margin-bottom:2px;
}
.wp-toc__i{
  display:flex; align-items:center; gap:8px;
  padding:9px 10px; border-radius:10px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--wp-line);
  color:var(--mist); text-decoration:none; font-size:11.5px;
}
.wp-toc__i i{
  font-style:normal; font-family:var(--font-num);
  color:var(--brand); font-size:10.5px;
}

/* 章节 */
.wp-sec{ margin-bottom:26px; }
.wp-sec__h{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.wp-sec__n{
  font-family:var(--font-num); font-size:12px;
  color:var(--brand); padding:2px 7px; border-radius:6px;
  background:rgba(0,211,149,.12);
}
.wp-sec__t{ margin:0; font-size:16px; font-weight:600; color:var(--mint); }

.wp-p{ margin:0 0 10px; font-size:13px; line-height:1.75; color:rgba(217,240,215,.82); }
.wp-sub{
  margin:16px 0 8px; font-size:12px; font-weight:600;
  color:var(--brand); letter-spacing:.02em;
}
.wp-note{
  margin:10px 0 0; font-size:11px; line-height:1.6;
  color:var(--dim); padding-left:10px; border-left:2px solid var(--wp-line);
}
.wp-quote{
  margin:12px 0; padding:12px 14px; border-radius:12px;
  background:rgba(0,211,149,.07);
  border-left:3px solid rgba(0,211,149,.6);
  font-size:12.5px; line-height:1.7; color:var(--mint);
}

.wp-list{ margin:0; padding:0; list-style:none; }
.wp-list li{
  position:relative; padding:5px 0 5px 16px;
  font-size:12.5px; line-height:1.6; color:rgba(217,240,215,.8);
}
.wp-list li::before{
  content:""; position:absolute; left:2px; top:12px;
  width:5px; height:5px; border-radius:50%;
  background:rgba(0,211,149,.55);
}

/* 卡片组 */
.wp-cards{ display:grid; gap:8px; margin-top:12px; }
.wp-card{
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid var(--wp-line);
  display:flex; flex-direction:column; gap:4px;
}
.wp-card b{ font-size:12.5px; color:var(--mint); }
.wp-card span{ font-size:11px; line-height:1.55; color:var(--dim); }

.wp-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.wp-three{ display:grid; gap:8px; margin-bottom:6px; }
.wp-three__i{
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(140deg, rgba(0,211,149,.12), rgba(0,211,149,.03));
  border:1px solid rgba(0,211,149,.3);
  display:flex; flex-direction:column; gap:4px;
}
.wp-three__i b{ font-size:12.5px; color:var(--mint); }
.wp-three__i span{ font-size:11px; color:var(--dim); line-height:1.5; }

.wp-two{ display:grid; gap:10px; }
.wp-panel{
  padding:13px 15px; border-radius:14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--wp-line);
}
.wp-panel__h{
  font-size:12.5px; font-weight:600; color:var(--brand);
  margin-bottom:6px; padding-bottom:7px;
  border-bottom:1px solid var(--wp-line);
}

/* 数据块 */
.wp-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.wp-stat{
  padding:10px 8px; border-radius:11px; text-align:center;
  background:rgba(0,211,149,.08);
  border:1px solid rgba(0,211,149,.26);
}
.wp-stat span{ display:block; font-size:9.5px; color:var(--dim); }
.wp-stat b{
  display:block; margin-top:3px;
  font-family:var(--font-num); font-size:17px;
  font-weight:400; color:var(--brand);
}
.wp-stat i{ font-style:normal; font-size:9.5px; color:var(--dim); margin-left:1px; }

/* VIP 表 */
.wp-table{
  display:grid; grid-template-columns:1fr 1fr; gap:4px 10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--wp-line);
}
.wp-tr{
  display:flex; justify-content:space-between;
  font-size:11.5px; padding:3px 0;
  border-bottom:1px solid rgba(44,127,105,.12);
}
.wp-tr span{ color:var(--dim); font-family:var(--font-num); }
.wp-tr b{ color:var(--mint); font-family:var(--font-num); font-weight:400; }

/* 步骤 */
.wp-steps{ display:flex; gap:6px; overflow-x:auto; padding:2px 0 6px; }
.wp-steps--wrap{ flex-wrap:wrap; overflow:visible; }
.wp-step{
  flex:none; display:flex; align-items:center; gap:6px;
  padding:7px 10px; border-radius:9px;
  background:rgba(0,211,149,.08);
  border:1px solid rgba(0,211,149,.25);
  font-size:10.5px; color:var(--mist); white-space:nowrap;
}
.wp-step i{
  font-style:normal; font-family:var(--font-num);
  font-size:9.5px; color:var(--brand);
}

/* 标签 */
.wp-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.wp-chip{
  padding:5px 10px; border-radius:999px;
  font-size:11px; color:var(--mist);
  background:rgba(255,255,255,.05);
  border:1px solid var(--wp-line);
}
.wp-chip--warn{
  color:#f5b544;
  background:rgba(245,181,68,.08);
  border-color:rgba(245,181,68,.3);
}

/* 配图 */
.wp-figwrap{
  margin:6px 0 14px; padding:12px 12px 8px;
  border-radius:14px;
  background:rgba(0,0,0,.25);
  border:1px solid var(--wp-line);
}
.wp-fig{ display:block; width:100%; height:auto; }

/* 结尾 */
.wp-end{
  margin-top:8px; padding:26px 18px;
  border-radius:18px; text-align:center;
  background:radial-gradient(120% 90% at 50% 120%, rgba(0,211,149,.16), rgba(0,211,149,0) 60%);
  border:1px solid rgba(0,211,149,.2);
}
.wp-end__t{ font-size:15px; color:var(--mint); font-weight:600; }
.wp-end__s{ margin-top:8px; font-size:11px; color:var(--dim); letter-spacing:.02em; }

@media (min-width:520px){
  .wp-cards{ grid-template-columns:1fr 1fr; }
  .wp-three{ grid-template-columns:repeat(3,1fr); }
  .wp-two{ grid-template-columns:1fr 1fr; }
}
@media (max-width:359px){
  .wp-hero__t{ font-size:23px; }
  .wp-toc{ grid-template-columns:1fr; }
  .wp-table{ grid-template-columns:1fr; }
  .wp-sec__t{ font-size:15px; }
}

/* 收益即将过期提醒 */
.warn-banner{
  display:flex; align-items:center; gap:8px;
  margin:10px 0 0; padding:10px 12px;
  border-radius:12px; cursor:pointer;
  background:rgba(245,181,68,.1);
  border:1px solid rgba(245,181,68,.35);
  color:#f5b544; font-size:11.5px; line-height:1.5;
}
.warn-banner b{ margin-left:auto; white-space:nowrap; font-weight:600; }
.warn-banner .ico{ flex:none; color:#f5b544; }