.lang-btn {
  min-width: 36px; height: 36px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--card, transparent);
  color: var(--text); font-size: 12px; font-weight: 700;
}
.auth-lang {
  position: absolute; top: 14px; right: 58px; z-index: 4;
}
.lang-list { display: grid; gap: 8px; margin: 8px 0 0; }
.lang-list button {
  height: 46px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--card, #f4f7fb); color: var(--text); text-align: left; padding: 0 14px;
  font-size: 15px; font-weight: 600;
}
.lang-list button.on { border-color: var(--cyan); color: var(--cyan); }

.hero-earn-sub { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.hero-earn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  font-size: clamp(17px, 5.4vw, 22px); font-weight: 650; margin-top: 6px; line-height: 1.15;
  letter-spacing: 0;
}
.hero-earn span { display: block; white-space: nowrap; }
.hero-unit { display: none; }

.asset-stack { display: grid; gap: 10px; margin: 0 0 16px; }
.asset-card {
  --as-tone: var(--cyan);
  --as-wash: color-mix(in srgb, var(--cyan) 16%, transparent);
  --as-edge: color-mix(in srgb, var(--cyan) 30%, transparent);
  --as-art: color-mix(in srgb, var(--cyan) 12%, transparent);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--as-edge, var(--line));
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(200px 100px at 100% -10%, var(--as-wash), transparent 64%),
    var(--card);
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 0 12px;
  align-items: center;
}
.asset-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--as-edge) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, var(--as-edge) 1px, transparent 1px) 0 0 / 18px 18px;
  opacity: .16;
  pointer-events: none;
  mask-image: linear-gradient(115deg, transparent 18%, #000 72%);
}
.asset-card.asset-usdt { --as-tone: #4cefff; --as-wash: rgba(76,239,255,.2); --as-edge: rgba(76,239,255,.32); --as-art: rgba(76,239,255,.12); }
.asset-card.asset-token { --as-tone: #e7c56a; --as-wash: rgba(231,197,106,.2); --as-edge: rgba(231,197,106,.32); --as-art: rgba(231,197,106,.12); }
.asset-card.asset-tokenfi { --as-tone: #b084ff; --as-wash: rgba(176,132,255,.22); --as-edge: rgba(176,132,255,.34); --as-art: rgba(176,132,255,.14); }
.asset-mark {
  position: relative; z-index: 1;
  width: 48px; height: 48px; border-radius: 15px;
  display: grid; place-items: center;
  background: var(--as-art);
  border: 1px solid var(--as-edge);
  color: var(--as-tone);
  box-shadow: 0 0 16px color-mix(in srgb, var(--as-tone) 20%, transparent);
}
.asset-mark svg { width: 26px; height: 26px; display: block; }
.asset-info { position: relative; z-index: 1; min-width: 0; }
.asset-card .asset-k { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.2; }
.asset-card .asset-v {
  margin: 5px 0 3px;
  font-size: 22px; font-weight: 700; letter-spacing: .3px; line-height: 1.15;
  font-family: Orbitron, "Noto Sans SC", sans-serif;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.asset-card .asset-v small { font-size: 11px; font-weight: 600; color: var(--muted); margin-left: 4px; font-family: "Noto Sans SC", sans-serif; }
.asset-card .asset-sub { font-size: 11px; color: var(--muted); line-height: 1.3; }
.asset-card .wallet-actions {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 6px;
  justify-content: center; align-items: stretch;
  min-width: 76px;
}
.asset-card .wallet-actions .btn {
  height: 30px; padding: 0 12px; font-size: 12px; border-radius: 10px;
  width: 100%;
}
html.theme-light .asset-card.asset-usdt { --as-tone: #1aaed4; --as-wash: #e6f7fc; --as-edge: rgba(26,174,212,.32); --as-art: #d9f2fa; }
html.theme-light .asset-card.asset-token { --as-tone: #c4922a; --as-wash: #fff6e4; --as-edge: rgba(196,146,42,.32); --as-art: #ffedd0; }
html.theme-light .asset-card.asset-tokenfi { --as-tone: #8b6ae0; --as-wash: #f3edff; --as-edge: rgba(139,106,224,.32); --as-art: #e8defc; }
html.theme-quiet .asset-card.asset-usdt { --as-tone: #c8cbc3; --as-wash: rgba(232,234,220,.08); --as-edge: rgba(232,234,220,.16); --as-art: #1a1a18; }
html.theme-quiet .asset-card.asset-token { --as-tone: #c9a66b; --as-wash: rgba(201,166,107,.1); --as-edge: rgba(201,166,107,.22); --as-art: #1a1814; }
html.theme-quiet .asset-card.asset-tokenfi { --as-tone: #b4b0aa; --as-wash: rgba(180,176,170,.08); --as-edge: rgba(180,176,170,.18); --as-art: #181816; }

.tx-filter { display: flex; gap: 8px; margin: 0 0 10px; flex-wrap: wrap; }
.tx-filter button {
  height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line);
  background: transparent; color: var(--muted); font-size: 12px;
}
.tx-filter button.on { color: var(--cyan); border-color: var(--cyan); background: color-mix(in srgb, var(--cyan) 10%, transparent); }

.trade-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  padding: 4px; border-radius: 14px; border: 1px solid var(--line); margin: 0 0 14px;
}
.trade-seg button {
  height: 38px; border-radius: 11px; border: 0; background: transparent;
  color: var(--muted); font-weight: 700; font-size: 13px;
}
.trade-seg button.on { background: var(--cyan); color: #fff; }
.trade-sum {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px;
}
.trade-sum div {
  border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: var(--card);
}
.trade-sum span { display: block; color: var(--muted); font-size: 11px; }
.trade-sum b { font-size: 16px; }
.trade-hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0 0 12px; }

.ai-list { display: grid; gap: 10px; }
.ai-card {
  --ai-tone: var(--cyan);
  --ai-wash: color-mix(in srgb, var(--cyan) 18%, transparent);
  --ai-edge: color-mix(in srgb, var(--cyan) 34%, transparent);
  --ai-art: color-mix(in srgb, var(--cyan) 14%, transparent);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ai-edge, var(--line));
  border-radius: 18px;
  padding: 13px 14px 12px;
  background:
    radial-gradient(220px 110px at 108% -20%, var(--ai-wash), transparent 62%),
    var(--card);
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto auto;
  gap: 0 10px;
  align-items: center;
}
.ai-card.locked {
  grid-template-rows: auto auto;
}
.ai-card::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--ai-edge) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, var(--ai-edge) 1px, transparent 1px) 0 0 / 18px 18px;
  opacity: .18;
  pointer-events: none;
  mask-image: linear-gradient(120deg, transparent 20%, #000 70%);
}
.ai-card.skin-cyan { --ai-tone: #4cefff; --ai-wash: rgba(76,239,255,.2); --ai-edge: rgba(76,239,255,.34); --ai-art: rgba(76,239,255,.12); }
.ai-card.skin-amber { --ai-tone: #ffb148; --ai-wash: rgba(255,177,72,.2); --ai-edge: rgba(255,177,72,.34); --ai-art: rgba(255,177,72,.12); }
.ai-card.skin-violet { --ai-tone: #b084ff; --ai-wash: rgba(176,132,255,.22); --ai-edge: rgba(176,132,255,.36); --ai-art: rgba(176,132,255,.14); }
.ai-card.skin-rose { --ai-tone: #ff6b7a; --ai-wash: rgba(255,107,122,.2); --ai-edge: rgba(255,107,122,.34); --ai-art: rgba(255,107,122,.12); }
.ai-card.skin-blue { --ai-tone: #4d8dff; --ai-wash: rgba(77,141,255,.22); --ai-edge: rgba(77,141,255,.36); --ai-art: rgba(77,141,255,.14); }
.ai-card.skin-lime { --ai-tone: #3ee0a2; --ai-wash: rgba(62,224,162,.18); --ai-edge: rgba(62,224,162,.32); --ai-art: rgba(62,224,162,.12); }
.ai-card.skin-gold { --ai-tone: #e7c56a; --ai-wash: rgba(231,197,106,.2); --ai-edge: rgba(231,197,106,.34); --ai-art: rgba(231,197,106,.12); }
.ai-card.skin-pink { --ai-tone: #ff8ad4; --ai-wash: rgba(255,138,212,.18); --ai-edge: rgba(255,138,212,.32); --ai-art: rgba(255,138,212,.12); }
.ai-card.skin-ice { --ai-tone: #9afbff; --ai-wash: rgba(154,251,255,.18); --ai-edge: rgba(154,251,255,.32); --ai-art: rgba(154,251,255,.12); }
.ai-card.locked { opacity: .72; filter: saturate(.75); }
.ai-card.locked .ai-mark { grid-row: 1 / span 2; }
.ai-mark {
  position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 16px;
  display: grid; place-items: center;
  background: var(--ai-art);
  border: 1px solid var(--ai-edge);
  box-shadow: 0 0 18px color-mix(in srgb, var(--ai-tone) 22%, transparent);
}
.ai-mark svg { width: 30px; height: 30px; display: block; color: var(--ai-tone); }
.ai-meta { position: relative; z-index: 1; min-width: 0; }
.ai-card h3 {
  margin: 0;
  font-size: 15px; font-weight: 700; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ai-quote {
  position: relative; z-index: 1;
  text-align: right;
  justify-self: stretch;
  min-width: 0;
}
.ai-quote b {
  display: block;
  font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: .02em;
  font-family: Orbitron, "Noto Sans SC", sans-serif;
}
.ai-quote small {
  display: block;
  margin-top: 3px;
  font-size: 10px; color: var(--muted); font-weight: 600;
  line-height: 1.2; letter-spacing: .02em; white-space: nowrap;
}
.ai-card .btn { position: relative; z-index: 1; height: 32px; padding: 0 12px; font-size: 12px; }
.ai-lock-btn {
  position: relative; z-index: 1;
  width: 32px; height: 32px; border-radius: 10px; justify-self: end;
  display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--muted); background: color-mix(in srgb, var(--card) 70%, transparent);
}
.ai-lock-btn svg { width: 15px; height: 15px; }
.ai-card .ai-lock {
  grid-column: 2 / -1;
  margin: 2px 0 0;
  font-size: 11px; color: var(--muted); line-height: 1.2;
  white-space: nowrap;
}
html.theme-light .ai-card.skin-cyan { --ai-tone: #1aaed4; --ai-wash: #e6f7fc; --ai-edge: rgba(26,174,212,.34); --ai-art: #d9f2fa; }
html.theme-light .ai-card.skin-amber { --ai-tone: #e3962a; --ai-wash: #fff3e3; --ai-edge: rgba(227,150,42,.34); --ai-art: #ffead0; }
html.theme-light .ai-card.skin-violet { --ai-tone: #8b6ae0; --ai-wash: #f3edff; --ai-edge: rgba(139,106,224,.34); --ai-art: #e8defc; }
html.theme-light .ai-card.skin-rose { --ai-tone: #e45d6e; --ai-wash: #ffeef0; --ai-edge: rgba(228,93,110,.34); --ai-art: #ffdce1; }
html.theme-light .ai-card.skin-blue { --ai-tone: #3b78e0; --ai-wash: #eaf1ff; --ai-edge: rgba(59,120,224,.34); --ai-art: #dce7ff; }
html.theme-light .ai-card.skin-lime { --ai-tone: #1aa36f; --ai-wash: #e6f8f0; --ai-edge: rgba(26,163,111,.34); --ai-art: #d4f3e6; }
html.theme-light .ai-card.skin-gold { --ai-tone: #c4922a; --ai-wash: #fff6e4; --ai-edge: rgba(196,146,42,.34); --ai-art: #ffedd0; }
html.theme-light .ai-card.skin-pink { --ai-tone: #d45aa8; --ai-wash: #ffeff8; --ai-edge: rgba(212,90,168,.34); --ai-art: #ffdced; }
html.theme-light .ai-card.skin-ice { --ai-tone: #1498a8; --ai-wash: #e8fbfc; --ai-edge: rgba(20,152,168,.34); --ai-art: #d5f4f6; }
html.theme-quiet .ai-card {
  --ai-tone: #c9a66b; --ai-wash: rgba(201,166,107,.1); --ai-edge: rgba(201,166,107,.22); --ai-art: #1a1814;
}
html.theme-quiet .ai-card.skin-cyan,
html.theme-quiet .ai-card.skin-blue,
html.theme-quiet .ai-card.skin-ice { --ai-tone: #c8cbc3; --ai-wash: rgba(232,234,220,.08); --ai-edge: rgba(232,234,220,.16); --ai-art: #1a1a18; }
html.theme-quiet .ai-card.skin-amber,
html.theme-quiet .ai-card.skin-gold { --ai-tone: #c9a66b; --ai-wash: rgba(201,166,107,.1); --ai-edge: rgba(201,166,107,.22); --ai-art: #1a1814; }
html.theme-quiet .ai-card.skin-violet,
html.theme-quiet .ai-card.skin-pink { --ai-tone: #b4b0aa; --ai-wash: rgba(180,176,170,.08); --ai-edge: rgba(180,176,170,.18); --ai-art: #181816; }
html.theme-quiet .ai-card.skin-rose,
html.theme-quiet .ai-card.skin-lime { --ai-tone: #a89890; --ai-wash: rgba(168,152,144,.1); --ai-edge: rgba(168,152,144,.2); --ai-art: #1a1614; }

.swap-side { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 12px; }
.swap-side button {
  height: 40px; border-radius: 12px; border: 1px solid var(--line);
  background: transparent; color: var(--text); font-weight: 700;
}
.swap-side button.on { border-color: var(--cyan); color: var(--cyan); }

.tabbar { grid-template-columns: repeat(4, 1fr) !important; }
.tab { font-size: 10px; }
.tab svg { width: 20px; height: 20px; }