/* ═══════════════════════════════════════════════════════════
   CyberNode · 赛博节点 — 暗黑赛博金融风样式 v2
   新增: 等级阶段配色 / 升级特效 / 粒子 / 充值弹窗 / 进度条
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:        #04060c;
  --bg2:       #070b15;
  --panel:     rgba(10, 16, 30, .55);
  --line:      rgba(0, 229, 255, .18);
  --cyan:      #00e5ff;
  --green:     #00ff9d;
  --red:       #ff2d55;
  --blue:      #2d8cff;
  --gold:      #ffd76a;
  --violet:    #b26bff;
  --text:      #c7d6e6;
  --dim:       #4e6379;
  --mono:      "Consolas", "Courier New", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* 屏幕震动（超频失败） */
body.shake { animation: shake .5s ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-8px, 4px); }
  40% { transform: translate(7px, -5px); }
  60% { transform: translate(-5px, 3px); }
  80% { transform: translate(4px, -2px); }
}

::selection { background: rgba(0, 229, 255, .3); }

/* ── 背景层 ─────────────────────────── */
.bg-grid {
  position: fixed; inset: 0; z-index: -3;
  background-image:
    linear-gradient(rgba(0, 229, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
}

.bg-glow {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(ellipse 60% 42% at 50% -10%, rgba(0, 229, 255, .13), transparent 62%),
    radial-gradient(ellipse 50% 42% at 82% 112%, rgba(0, 255, 157, .09), transparent 62%),
    radial-gradient(ellipse 40% 36% at 12% 90%, rgba(45, 140, 255, .07), transparent 60%);
}

.scanlines {
  position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
}

/* ── 顶部导航栏 ─────────────────────── */
.header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 28px;
  background: rgba(4, 6, 12, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 14px 34px -22px rgba(0, 229, 255, .5);
}

.logo { display: flex; align-items: center; gap: 13px; user-select: none; }

.logo-badge {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(0, 229, 255, .22), rgba(0, 255, 157, .1));
  clip-path: polygon(25% 5%, 75% 5%, 98% 50%, 75% 95%, 25% 95%, 2% 50%);
  filter: drop-shadow(0 0 8px rgba(0, 229, 255, .65));
}
.logo-badge span { color: var(--cyan); font-size: 12px; text-shadow: 0 0 8px var(--cyan); }

.logo-text {
  display: flex; flex-direction: column; justify-content: center;
  font-size: 18px; font-weight: 800; letter-spacing: 3px;
  color: var(--text); line-height: 1.15; white-space: nowrap;
}
.logo-text .logo-en {
  font-size: 10px; font-weight: 600; letter-spacing: 5px;
  color: var(--dim);
}
.logo-text b {
  color: var(--cyan);
  text-shadow: 0 0 12px rgba(0, 229, 255, .85), 0 0 34px rgba(0, 229, 255, .4);
}

.header-actions { display: flex; align-items: center; gap: 10px; }

/* 音效开关 */
.btn-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .02);
  font-size: 17px; cursor: pointer;
  transition: box-shadow .2s, border-color .2s;
}
.btn-icon:hover { border-color: rgba(0, 229, 255, .5); box-shadow: 0 0 12px rgba(0, 229, 255, .25); }
.btn-icon.muted { opacity: .4; }

/* 充值按钮（金色诱惑） */
.btn-deposit {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 215, 106, .55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 215, 106, .14), rgba(255, 215, 106, .03));
  color: var(--gold);
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 215, 106, .18), inset 0 0 10px rgba(255, 215, 106, .07);
  transition: box-shadow .2s, transform .12s;
}
.btn-deposit:hover {
  box-shadow: 0 0 26px rgba(255, 215, 106, .45), inset 0 0 12px rgba(255, 215, 106, .12);
  transform: translateY(-1px);
}
.btn-deposit:active { transform: scale(.96); }

/* 仙机阁按钮（紫晶流光） */
.btn-shop {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 1px solid rgba(178, 107, 255, .6);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(178, 107, 255, .16), rgba(178, 107, 255, .03));
  color: #c9a0ff;
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 16px rgba(178, 107, 255, .22), inset 0 0 10px rgba(178, 107, 255, .08);
  position: relative; overflow: hidden;
  transition: box-shadow .2s, transform .12s;
}
.btn-shop::after {
  content: ''; position: absolute; top: 0; left: -90%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-20deg);
  animation: shopSheen 2.6s ease-in-out infinite;
}
.btn-shop:hover {
  box-shadow: 0 0 30px rgba(178, 107, 255, .55), inset 0 0 14px rgba(178, 107, 255, .14);
  transform: translateY(-1px);
}
.btn-shop:active { transform: scale(.96); }
@keyframes shopSheen {
  0% { left: -90%; }
  60%, 100% { left: 140%; }
}

/* 实名按钮（青玉色） */
.btn-kyc {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(0, 229, 255, .5);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 229, 255, .13), rgba(0, 229, 255, .03));
  color: #7fe8ff;
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 229, 255, .18), inset 0 0 10px rgba(0, 229, 255, .07);
  transition: box-shadow .2s, transform .12s;
}
.btn-kyc:hover {
  box-shadow: 0 0 26px rgba(0, 229, 255, .45), inset 0 0 12px rgba(0, 229, 255, .12);
  transform: translateY(-1px);
}
.btn-kyc:active { transform: scale(.96); }
.btn-kyc.verified {
  border-color: rgba(0, 229, 122, .6);
  background: linear-gradient(180deg, rgba(0, 229, 122, .15), rgba(0, 229, 122, .03));
  color: #6ff0a8;
  box-shadow: 0 0 16px rgba(0, 229, 122, .2);
}

/* 我的按钮（独立入口，紫色流光） */
.btn-profile {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border: 1px solid rgba(178, 107, 255, .65);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(178, 107, 255, .18), rgba(178, 107, 255, .04));
  color: #d4b3ff;
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 16px rgba(178, 107, 255, .25), inset 0 0 10px rgba(178, 107, 255, .08);
  transition: box-shadow .2s, transform .12s;
}
.btn-profile:hover {
  box-shadow: 0 0 30px rgba(178, 107, 255, .55), inset 0 0 14px rgba(178, 107, 255, .14);
  transform: translateY(-1px);
}
.btn-profile:active { transform: scale(.96); }

/* 连接钱包按钮（霓虹发光） */
.btn-connect {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(0, 229, 255, .55);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(0, 229, 255, .12), rgba(0, 229, 255, .03));
  color: var(--cyan);
  font-size: 14px; font-weight: 700; letter-spacing: 1px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 229, 255, .22), inset 0 0 10px rgba(0, 229, 255, .08);
  transition: box-shadow .2s, transform .12s, border-color .2s;
}
.btn-connect:hover {
  box-shadow: 0 0 28px rgba(0, 229, 255, .5), inset 0 0 12px rgba(0, 229, 255, .12);
  transform: translateY(-1px);
}
.btn-connect:active, .btn-connect.pressed { transform: scale(.96); }

.btn-connect .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  flex: none;
}

.btn-connect.connected {
  border-color: rgba(0, 255, 157, .6);
  color: var(--green);
  box-shadow: 0 0 16px rgba(0, 255, 157, .28), inset 0 0 10px rgba(0, 255, 157, .08);
}
.btn-connect.connected .dot {
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: dotPulse 1.6s ease-in-out infinite;
}

/* 退出登录按钮（登录后显示） */
.logout-btn {
  border-color: rgba(255, 122, 144, .5);
  color: #ff7a90;
  padding: 10px 14px;
}
.logout-btn:hover {
  box-shadow: 0 0 18px rgba(255, 122, 144, .4), inset 0 0 10px rgba(255, 122, 144, .1);
}

/* 登录弹窗底部提示（注册请前往游戏） */
.login-tip {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, .38);
  letter-spacing: .5px;
}
.login-tip-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0, 229, 255, .5);
}
.login-tip-link:hover { text-shadow: 0 0 10px rgba(0, 229, 255, .6); }

/* 账号ID 靓号（QQ 号式） */
.uid-lucky { font-weight: 800; text-shadow: 0 0 12px currentColor; letter-spacing: 1px; }
.badge-lucky {
  display: inline-block; padding: 1px 6px; margin-left: 3px;
  border-radius: 8px; font-size: 10px; line-height: 15px;
  color: #07090f; font-weight: 800; letter-spacing: 1px;
  box-shadow: 0 0 8px rgba(255, 215, 0, .55);
  vertical-align: 1px;
}

/* ── 主区域 ─────────────────────────── */
.main {
  flex: 1;
  display: flex; gap: 28px;
  width: 100%; max-width: 1280px;
  margin: 0 auto;
  padding: 26px 32px 130px;
}

.panel {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: inset 0 0 40px rgba(0, 229, 255, .03);
}

/* ── 左半屏：操作核心区 ─────────────── */
.panel-left {
  flex: 1 1 46%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 26px; padding: 40px 24px;
  --nc: var(--cyan);   /* 境界色作用域提升到左半屏，进度条/文字可继承 */
}

/* 节点圆环结构：颜色随等级阶段进化 */
.node-wrap {
  position: relative;
  width: clamp(210px, 26vw, 270px);
  aspect-ratio: 1;
  --nc: var(--cyan);   /* 默认青色 */
}
.node-wrap[data-stage="1"] { --nc: var(--cyan); }
.node-wrap[data-stage="2"] { --nc: var(--gold); }
.node-wrap[data-stage="3"] { --nc: #ffc861; }
.node-wrap[data-stage="4"] { --nc: var(--violet); }
.node-wrap[data-stage="5"] { --nc: #9d5cff; }
.node-wrap[data-stage="6"] { --nc: #ff3b4d; }
.node-wrap[data-stage="7"] { --nc: #ffd700; }

/* 仙气光环（境界色，环绕核心旋转） */
.aura {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 0;
  transition: opacity .8s;
}
.aura::before {
  content: ''; position: absolute;
  width: 55%; height: 55%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nc) 50%, transparent), transparent 70%);
  filter: blur(12px);
}
.aura-1 { inset: -4%; animation: auraOrbit 16s linear infinite; }
.aura-1::before { top: -6%; left: 24%; }
.aura-2 { inset: -12%; animation: auraOrbit 22s linear infinite reverse; opacity: .8; }
.aura-2::before { bottom: -4%; right: 14%; width: 42%; height: 42%; }
@keyframes auraOrbit { to { transform: rotate(360deg); } }

/* 灵气上升粒子（仙气袅袅） */
.qi {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  pointer-events: none; z-index: 4;
  animation: qiRise 3s ease-out forwards;
}
@keyframes qiRise {
  0%   { transform: translateY(0) scale(.5); opacity: 0; }
  25%  { opacity: .85; }
  100% { transform: translateY(-95px) scale(1.35); opacity: 0; }
}

.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--nc) 45%, transparent);
  transition: border-color .8s, box-shadow .8s;
}
.ring-outer { inset: 0; border-style: dashed; animation: spin 22s linear infinite; }
.ring-mid   { inset: 24px; animation: spinRev 13s linear infinite; }
.ring-inner { inset: 46px; animation: spinRev 9s linear infinite; }
.ring-4     { inset: 66px; display: none; animation: spin 7s linear infinite; }
.ring-5     { inset: 84px; display: none; animation: spinRev 5s linear infinite; }

[data-stage="3"] .ring-4, [data-stage="4"] .ring-4,
[data-stage="5"] .ring-4, [data-stage="6"] .ring-4,
[data-stage="7"] .ring-4 { display: block; }
[data-stage="4"] .ring-5, [data-stage="5"] .ring-5,
[data-stage="6"] .ring-5, [data-stage="7"] .ring-5 { display: block; }

.ring-mid::after {
  content: ''; position: absolute; top: -3px; left: 50%;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--nc);
  box-shadow: 0 0 12px var(--nc), 0 0 22px color-mix(in srgb, var(--nc) 60%, transparent);
}
.ring-inner::after {
  content: ''; position: absolute; bottom: -3px; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
}
.ring-4::after {
  content: ''; position: absolute; top: 50%; left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px var(--gold);
}
.ring-5::after {
  content: ''; position: absolute; bottom: -2px; right: 24%;
  width: 5px; height: 5px; border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px #fff;
}

/* 节点核心：纯形象图（呼吸灯特效） */
.node-core {
  position: absolute; inset: 58px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--nc) 45%, transparent);
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--nc) 30%, transparent), color-mix(in srgb, var(--nc) 5%, transparent) 46%, rgba(2, 8, 18, .92) 72%);
  animation: breathe 3.2s ease-in-out infinite;
  transition: border-color .8s, background .8s;
}

/* 节点形象图（AI 生成，随境界进化） */
.node-art {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  opacity: .94;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--nc) 55%, transparent)) saturate(1.15);
  z-index: 0;
  transition: opacity .6s;
}

/* 皮肤氛围光：专属形象图上叠加专属色柔光 */
.node-core::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(var(--skin-rgb, 0, 0, 0), .32), rgba(var(--skin-rgb, 0, 0, 0), .1) 55%, transparent 82%);
  mix-blend-mode: screen;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s;
}
.node-wrap[data-skin] .node-core::after { opacity: 1; }

/* VIP 黄金节点皮肤 */
.node-wrap[data-vip="1"] { filter: drop-shadow(0 0 16px rgba(255, 215, 106, .5)); }
.node-wrap[data-vip="1"] .node-core {
  border-color: rgba(255, 215, 106, .8);
  box-shadow: 0 0 26px rgba(255, 215, 106, .35), inset 0 0 18px rgba(255, 215, 106, .15);
}
.vip-badge {
  position: absolute; z-index: 2;
  top: 8%; right: 10%;
  font-size: 15px;
  filter: drop-shadow(0 0 8px rgba(255, 215, 106, .9));
  animation: dotPulse 1.8s ease-in-out infinite;
}

/* 创世编号 */
.serial-line {
  display: block; margin-top: 8px;
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 2px; color: var(--dim);
}
.serial-line b { color: var(--gold); text-shadow: 0 0 8px rgba(255, 215, 106, .5); }
.serial-line i { font-style: normal; }
.serial-line .r-legend  { color: #ff4d5e; text-shadow: 0 0 10px rgba(255, 45, 85, .8); }
.serial-line .r-epic    { color: var(--violet); text-shadow: 0 0 10px rgba(178, 107, 255, .7); }
.serial-line .r-rare    { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, .7); }
.serial-line .r-common  { color: var(--dim); }

/* 升级中：蓄力特效（环加速 + 核心聚能） */
.node-wrap.charging .ring-outer { animation-duration: 1.2s; }
.node-wrap.charging .ring-mid   { animation-duration: .8s; }
.node-wrap.charging .ring-inner { animation-duration: .6s; }
.node-wrap.charging .ring-4     { animation-duration: .5s; }
.node-wrap.charging .ring-5     { animation-duration: .4s; }
.node-wrap.charging .node-core {
  animation: chargePulse .45s ease-in-out infinite alternate;
}
@keyframes chargePulse {
  from { transform: scale(1); filter: brightness(1); }
  to   { transform: scale(1.12); filter: brightness(1.6); }
}

/* 超频失败：核心红化 */
.node-wrap.failed .node-core {
  border-color: rgba(255, 45, 85, .8);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 45, 85, .45), rgba(255, 45, 85, .08) 46%, rgba(2, 8, 18, .95) 72%);
  animation: failFlare .9s ease-in-out;
}
.node-wrap.failed .core-level { text-shadow: 0 0 18px #ff2d55, 0 0 44px rgba(255, 45, 85, .5); }
@keyframes failFlare {
  0% { transform: scale(1.25); box-shadow: 0 0 60px rgba(255, 45, 85, .9); }
  60% { transform: scale(1); }
  100% { box-shadow: 0 0 26px rgba(255, 45, 85, .28); }
}

@keyframes breathe {
  0%, 100% {
    box-shadow: 0 0 26px color-mix(in srgb, var(--nc) 28%, transparent), inset 0 0 18px color-mix(in srgb, var(--nc) 12%, transparent);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 74px color-mix(in srgb, var(--nc) 62%, transparent), inset 0 0 34px color-mix(in srgb, var(--nc) 24%, transparent);
    transform: scale(1.045);
  }
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }

/* 冲击波环（升级成功） */
.shock {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--nc);
  animation: shock .7s ease-out forwards;
  pointer-events: none;
  z-index: 2;
}
.shock.red { border-color: var(--red); }
@keyframes shock {
  0%   { transform: scale(.55); opacity: 1; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* 粒子爆炸 */
.particle {
  position: absolute; z-index: 3;
  width: 6px; height: 6px; border-radius: 50%;
  pointer-events: none;
  animation: particleFly .9s ease-out forwards;
}
@keyframes particleFly {
  0%   { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.1); opacity: 0; }
}

/* 境界显示（中文 + 英文两排）+ 进度条 */
.level-box { text-align: center; width: 100%; max-width: 360px; }
.level-value {
  display: block;
  font-family: var(--mono);
  font-size: 32px; font-weight: 800; letter-spacing: 2px;
  color: var(--nc);
  text-shadow: 0 0 16px color-mix(in srgb, var(--nc) 60%, transparent);
  transition: color .8s;
}
.level-value b { color: #fff; text-shadow: 0 0 18px var(--nc); }
.level-en {
  display: block; margin-top: 4px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 700; letter-spacing: 4px;
  color: var(--nc); opacity: .75;
  text-transform: uppercase;
  transition: color .8s;
}

/* 升级按钮 */
.upgrade-buttons {
  display: flex; flex-direction: column; gap: 16px;
  width: 100%; max-width: 380px;
}

.btn {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px;
  border-radius: 10px;
  font-family: inherit; cursor: pointer;
  transition: transform .12s, box-shadow .2s, border-color .2s, opacity .2s;
  overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; top: 0; left: -90%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .13), transparent);
  transform: skewX(-20deg);
  transition: left .45s ease;
  pointer-events: none;
}
.btn:hover::after { left: 140%; }
.btn:active, .btn.pressed { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-ico   { font-size: 20px; flex: none; }
.btn-main  { font-size: 15px; font-weight: 800; letter-spacing: 1px; flex: 1; text-align: left; flex-shrink: 0; }
.btn-cost  { font-size: 12px; opacity: .9; font-family: var(--mono); letter-spacing: 1px; flex-shrink: 0; }

/* 超频成功率徽标（动态） */
.btn-rate {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  color: #ffd76a;
  background: rgba(255, 215, 106, .12);
  border: 1px solid rgba(255, 215, 106, .35);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 4px;
}
.btn-rate.luck { color: #6ff0a8; border-color: rgba(0, 229, 122, .4); background: rgba(0, 229, 122, .1); }

/* 按钮 A：红色危险 · 超频 */
.btn-danger {
  border: 1px solid rgba(255, 45, 85, .6);
  color: #ff6b85;
  background: linear-gradient(180deg, rgba(255, 45, 85, .14), rgba(255, 45, 85, .03));
  box-shadow: 0 0 18px rgba(255, 45, 85, .16), inset 0 0 14px rgba(255, 45, 85, .06);
}
.btn-danger:hover {
  box-shadow: 0 0 30px rgba(255, 45, 85, .5), inset 0 0 18px rgba(255, 45, 85, .12);
  transform: translateY(-2px);
}
.btn-danger .btn-cost { color: #ff8fa3; }

/* 按钮 B：蓝色稳定 */
.btn-blue {
  border: 1px solid rgba(45, 140, 255, .6);
  color: #7db8ff;
  background: linear-gradient(180deg, rgba(45, 140, 255, .13), rgba(45, 140, 255, .03));
  box-shadow: 0 0 18px rgba(45, 140, 255, .16), inset 0 0 14px rgba(45, 140, 255, .06);
}
.btn-blue:hover {
  box-shadow: 0 0 30px rgba(45, 140, 255, .5), inset 0 0 18px rgba(45, 140, 255, .12);
  transform: translateY(-2px);
}
.btn-blue .btn-cost { color: #9cc7ff; }

/* 消耗飘字 */
.float-cost {
  position: absolute; top: -30px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 15px; font-weight: 800;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 215, 106, .95);
  pointer-events: none;
  animation: floatUp 1.1s ease-out forwards;
  z-index: 3;
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 8px); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -36px); }
}

/* 账户资产条 */
.balance-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: 100%; max-width: 380px;
  font-family: var(--mono);
  font-size: 13px; letter-spacing: 1px; color: var(--dim);
}
.bs-cell {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  background: rgba(8, 14, 26, .5);
  min-width: 0;
}
.bs-lb { font-size: 10px; letter-spacing: 1px; color: var(--dim); white-space: nowrap; }
.balance-strip b { color: var(--green); font-weight: 700; font-size: 15px; white-space: nowrap; }
.balance-strip .max-lv { color: var(--gold); }
.balance-strip .share-val { color: var(--gold); }
.balance-strip .bs-items { color: var(--dim); font-size: 13px; }
.balance-strip .bs-items span { color: var(--green); }
.balance-sep { opacity: .4; }

/* ── 激励视频广告条（看广告得 APHE） ─────────────── */
.ad-bar {
  width: 100%; max-width: 380px;
}
.btn-ad {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 10px;
  font-family: inherit; cursor: pointer;
  border: 1px solid rgba(255, 215, 106, .45);
  color: #ffd76a;
  background: linear-gradient(180deg, rgba(255, 215, 106, .13), rgba(255, 215, 106, .03));
  box-shadow: 0 0 16px rgba(255, 215, 106, .14), inset 0 0 12px rgba(255, 215, 106, .05);
  transition: transform .12s, box-shadow .2s, opacity .2s;
  overflow: hidden;
}
.btn-ad::after {
  content: ''; position: absolute; top: 0; left: -90%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 106, .16), transparent);
  transform: skewX(-20deg);
  transition: left .45s ease;
  pointer-events: none;
}
.btn-ad:hover::after { left: 140%; }
.btn-ad:hover { box-shadow: 0 0 26px rgba(255, 215, 106, .45), inset 0 0 16px rgba(255, 215, 106, .1); transform: translateY(-1px); }
.btn-ad:active { transform: scale(.97); }
.btn-ad.done { opacity: .5; cursor: not-allowed; }
.ad-ico  { font-size: 18px; flex: none; filter: drop-shadow(0 0 6px rgba(255, 215, 106, .6)); }
.ad-main { font-size: 14px; font-weight: 800; letter-spacing: 1px; flex: 1; text-align: left; flex-shrink: 0; white-space: nowrap; }
.ad-sub  { font-size: 11px; font-family: var(--mono); letter-spacing: 1px; opacity: .85; flex-shrink: 0; white-space: nowrap; }

/* ── 广告播放浮层（占位模拟） ─────────────── */
.ad-mask {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ad-mask[hidden] { display: none; }
.ad-player {
  width: min(420px, 88vw);
  padding: 28px 24px 26px;
  border-radius: 14px;
  text-align: center;
  border: 1px solid rgba(255, 215, 106, .35);
  background: linear-gradient(180deg, rgba(20, 14, 4, .9), rgba(6, 8, 16, .95));
  box-shadow: 0 0 40px rgba(255, 215, 106, .12);
}
.ad-title { font-size: 16px; font-weight: 800; letter-spacing: 2px; color: var(--text); margin-bottom: 16px; }
.ad-count {
  font-family: var(--mono);
  font-size: 64px; font-weight: 800; line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 26px rgba(255, 215, 106, .7);
  margin: 6px 0 18px;
}
.ad-bar2 {
  height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-bottom: 14px;
}
.ad-bar2-fill {
  height: 100%; width: 0%;
  border-radius: 3px;
  background: linear-gradient(90deg, #ffd76a, #ff9a3d);
  box-shadow: 0 0 10px rgba(255, 215, 106, .8);
  transition: width .9s linear;
}
.ad-note { font-size: 12px; color: var(--dim); letter-spacing: 1px; margin-bottom: 18px; }
.ad-note b { color: var(--gold); }
.ad-claim {
  width: 100%;
  padding: 13px 0;
  border-radius: 10px;
  font-family: inherit; font-size: 15px; font-weight: 800; letter-spacing: 2px;
  cursor: pointer;
  border: 1px solid rgba(255, 215, 106, .6);
  color: #1a1204;
  background: linear-gradient(180deg, #ffe08a, #ffc34d);
  box-shadow: 0 0 24px rgba(255, 215, 106, .4);
  transition: transform .12s, box-shadow .2s;
}
.ad-claim:hover { box-shadow: 0 0 36px rgba(255, 215, 106, .65); transform: translateY(-1px); }
.ad-claim:active { transform: scale(.97); }
.ad-claim[hidden] { display: none; }

/* 看板"平台广告造血"补充说明 */
.stat-sub.dim { color: var(--dim); font-size: 11px; letter-spacing: 1px; }

/* ── 账号密码登录/注册弹窗 ─────────────── */
.login-toggle {
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  color: var(--cyan);
  background: transparent;
  border: 1px dashed rgba(0, 229, 255, .4);
  transition: background .2s;
}
.login-toggle:hover { background: rgba(0, 229, 255, .06); }

/* 图形验证码 */
.captcha-row { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.captcha-row input { flex: 1; min-width: 0; }
.captcha-img {
  flex: none; width: 116px; height: 40px;
  border: 1px solid rgba(0, 229, 255, .35);
  border-radius: 6px;
  cursor: pointer;
  background: #0a1220;
  object-fit: cover;
}

/* ── 邀请好友卡（三级裂变） ─────────────── */
.invite-box { display: flex; flex-direction: column; gap: 10px; }
.invite-tip { font-size: 11px; color: var(--dim); line-height: 1.7; }
.invite-link-row { display: flex; gap: 8px; }
.invite-link {
  flex: 1; min-width: 0;
  padding: 8px 10px; border-radius: 8px;
  font-size: 11px; font-family: var(--mono);
  color: var(--text);
  background: rgba(0, 229, 255, .06);
  border: 1px solid rgba(0, 229, 255, .25);
  outline: none;
}
.invite-copy {
  flex: none; width: 64px;
  border-radius: 8px; cursor: pointer;
  font-size: 13px;
  border: 1px solid rgba(255, 215, 106, .5); color: var(--gold);
  background: rgba(255, 215, 106, .1);
}
.invite-tiers { display: flex; gap: 8px; }
.invite-tiers span {
  flex: 1; text-align: center;
  font-size: 11px; font-family: var(--mono);
  color: #6ff0a8;
  padding: 6px 0; border-radius: 6px;
  background: rgba(0, 229, 122, .07);
  border: 1px solid rgba(0, 229, 122, .2);
}
.invite-stat { font-size: 12px; color: var(--dim); }
.invite-stat b { color: var(--gold); }

/* 我的团队（直推好友列表） */
.invite-team { border-top: 1px dashed rgba(255, 255, 255, .1); padding-top: 10px; }
.invite-team-head { font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.invite-team-head b { color: var(--cyan); }
.invite-l1 { display: flex; flex-direction: column; gap: 6px; }
.invite-l1-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border: 1px solid rgba(0, 229, 255, .12);
  border-radius: 8px;
  background: rgba(0, 229, 255, .04);
  font-size: 12px;
}
.invite-l1-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.invite-l1-realm { color: var(--gold); font-size: 11px; white-space: nowrap; }
.invite-l1-cnt { color: var(--dim); font-size: 11px; white-space: nowrap; }

/* ── 右半屏：数据看板区 ─────────────── */
.panel-right {
  flex: 1 1 54%;
  display: flex; flex-direction: column; gap: 24px;
  padding: 40px 32px;
}

.stat-card {
  position: relative; flex: 1;
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: center;
  gap: 12px;
  padding: 26px 30px 22px;
  border: 1px solid rgba(0, 255, 157, .22);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 255, 157, .06), rgba(4, 8, 16, .42));
  overflow: hidden;
}
/* HUD 四角括号 */
.stat-card::before, .stat-card::after {
  content: ''; position: absolute;
  width: 15px; height: 15px;
  border: 2px solid rgba(0, 255, 157, .8);
}
.stat-card::before { top: 8px; left: 8px;  border-width: 2px 0 0 2px; }
.stat-card::after  { right: 8px; bottom: 8px; border-width: 0 2px 2px 0; }

.stat-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 3px; color: var(--text); opacity: .88;
}
.stat-label .ico { color: var(--green); }

.stat-value {
  font-family: var(--mono);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 700; letter-spacing: 1px; line-height: 1.1;
  color: #eafff5;
  text-shadow: 0 0 20px rgba(0, 255, 157, .5), 0 0 60px rgba(0, 255, 157, .22);
  word-break: keep-all;
}
.stat-value.green { color: var(--green); }

.stat-sub {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 2px; color: var(--dim);
  flex-wrap: wrap;
}
.aphe-info { color: var(--gold); font-weight: 700; }
.st-g { white-space: nowrap; } /* 看板子项整体换行，不拆字 */
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: dotPulse 1.4s ease-in-out infinite;
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}

/* ── 资产池分布（系统账户透明展示） ───── */
.pool-list {
  display: flex; flex-direction: column; gap: 8px;
}
.pool-row {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px;
  border: 1px solid rgba(0, 255, 157, .14);
  border-radius: 8px;
  background: rgba(0, 255, 157, .045);
}
.pool-main {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.pool-name {
  font-size: 13px; letter-spacing: 1px; color: var(--text);
}
.pool-bal {
  font-family: var(--mono);
  font-size: 15px; font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
}
.pool-desc {
  font-size: 11px; letter-spacing: 1px; color: var(--dim);
}

/* ── 底部 Tab 导航（APP 式） ───────────── */
.tab-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  display: flex;
  background: rgba(4, 6, 12, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(0, 229, 255, .22);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 30px -20px rgba(0, 229, 255, .4);
}
.tab-btn {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: none; cursor: pointer;
  color: var(--dim);
  font-family: inherit;
  padding: 4px 0;
  transition: color .15s;
}
.tab-btn .tab-ico { font-size: 20px; line-height: 1; }
.tab-btn .tab-lb { font-size: 10px; letter-spacing: 2px; }
.tab-btn.on { color: var(--cyan); }
.tab-btn.on .tab-lb { color: var(--cyan); text-shadow: 0 0 10px rgba(0, 229, 255, .5); }
.tab-btn:active { transform: scale(.94); }

/* ── 底部跑马灯 ─────────────────────── */
.marquee-bar {
  position: fixed; left: 0; right: 0; bottom: 58px; z-index: 9;
  height: 46px;
  display: flex; align-items: center;
  background: rgba(4, 6, 12, .92);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 30px -20px rgba(0, 229, 255, .4);
  overflow: hidden;
}
.marquee-label {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
  padding: 0 18px;
  font-size: 12px; font-weight: 800; letter-spacing: 4px;
  color: var(--cyan);
  background: linear-gradient(90deg, rgba(4, 6, 12, .98), rgba(4, 6, 12, .85), transparent);
  border-right: 1px solid var(--line);
  flex: none;
}
.marquee-label::before {
  content: ''; width: 7px; height: 7px; margin-right: 8px;
  border-radius: 50%; background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: dotPulse 1.1s ease-in-out infinite;
}
.marquee-inner {
  display: flex; align-items: center; gap: 52px;
  white-space: nowrap;
  padding-left: 26px;
  will-change: transform;
}
.m-item {
  font-family: var(--mono);
  font-size: 13px; letter-spacing: .5px; color: var(--text);
  flex: none;
}
.m-addr {
  color: var(--cyan);
  text-shadow: 0 0 8px rgba(0, 229, 255, .6);
}
.m-act { font-weight: 800; }
.m-act.danger  { color: var(--red); text-shadow: 0 0 10px rgba(255, 45, 85, .7); }
.m-act.success { color: var(--green); text-shadow: 0 0 10px rgba(0, 255, 157, .7); }
.m-act.gold    { color: var(--gold); text-shadow: 0 0 10px rgba(255, 215, 106, .6); }

/* ── 充值弹窗 ─────────────────────── */
.modal-mask {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(2, 4, 10, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow-y: auto;
}
.modal-mask[hidden] { display: none; }

/* 页面型 mask：内容撑满可滚动（避免 flex 居中导致超高内容溢出不可滚） */
#shopMask, #otcMask, #kycMask { align-items: stretch; }

/* ═══ 全屏页面模式（代替弹窗，独立页面感） ═══ */
.page-view {
  width: 100%; max-width: 640px; margin: auto 0;
  min-height: 100%;
  background: linear-gradient(180deg, rgba(4, 8, 16, .98), rgba(2, 4, 10, .98));
}
.page-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 18px;
  background: rgba(4, 8, 16, .94);
  border-bottom: 1px solid rgba(0, 229, 255, .15);
}
.page-back {
  flex: none; min-width: 64px;
  background: none; border: 1px solid rgba(0, 229, 255, .35);
  color: var(--cyan); font-size: 13px; font-family: inherit; cursor: pointer;
  padding: 7px 12px; border-radius: 8px;
  text-align: left;
}
.page-back:hover { background: rgba(0, 229, 255, .08); }
.page-title {
  flex: 1; text-align: center;
  font-size: 16px; font-weight: 700; letter-spacing: 2px; color: #eafff5;
}
.page-spacer { flex: none; width: 64px; }
.page-body { padding: 16px 18px calc(40px + 54px); flex: 1; }

.modal {
  width: min(360px, 88vw);
  padding: 26px 24px;
  border: 1px solid rgba(255, 215, 106, .4);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(20, 16, 8, .97), rgba(6, 8, 14, .98));
  box-shadow: 0 0 40px rgba(255, 215, 106, .18), 0 24px 60px rgba(0, 0, 0, .6);
  animation: modalIn .25s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.modal-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 800; letter-spacing: 2px;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(255, 215, 106, .5);
}
.modal-close {
  border: none; background: none; color: var(--dim);
  font-size: 15px; cursor: pointer;
}
.modal-close:hover { color: var(--red); }
.modal-desc { margin: 10px 0 18px; font-size: 12px; letter-spacing: 1px; color: var(--dim); }

.amount-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
.amount-btn {
  padding: 16px 0;
  border: 1px solid rgba(255, 215, 106, .35);
  border-radius: 10px;
  background: rgba(255, 215, 106, .05);
  color: var(--gold);
  font-family: var(--mono);
  font-size: 16px; font-weight: 700; letter-spacing: 1px;
  cursor: pointer;
  transition: box-shadow .15s, background .15s, transform .1s;
}
.amount-btn:hover { background: rgba(255, 215, 106, .14); box-shadow: 0 0 14px rgba(255, 215, 106, .3); }
.amount-btn.selected {
  background: rgba(255, 215, 106, .22);
  box-shadow: 0 0 18px rgba(255, 215, 106, .45), inset 0 0 10px rgba(255, 215, 106, .15);
  border-color: rgba(255, 215, 106, .8);
}
.amount-btn:active { transform: scale(.95); }

.btn-confirm {
  width: 100%; margin-top: 18px;
  padding: 14px 0;
  border: 1px solid rgba(255, 215, 106, .7);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255, 215, 106, .3), rgba(255, 215, 106, .1));
  color: #1a1206;
  font-size: 16px; font-weight: 800; letter-spacing: 3px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 215, 106, .3);
  transition: box-shadow .2s, transform .12s;
}
.btn-confirm:hover { box-shadow: 0 0 30px rgba(255, 215, 106, .55); }
.btn-confirm:active { transform: scale(.97); }
.btn-confirm:disabled { opacity: .5; cursor: not-allowed; }

/* ── 商城弹窗 ─────────────────────── */
.shop-modal { width: min(560px, 94vw); }
.shop-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  max-height: 58vh; overflow-y: auto;
  padding-right: 4px;
}
.shop-grid::-webkit-scrollbar { width: 6px; }
.shop-grid::-webkit-scrollbar-thumb { background: rgba(178, 107, 255, .4); border-radius: 3px; }

.shop-card {
  position: relative;
  padding: 14px;
  border: 1px solid rgba(178, 107, 255, .3);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(178, 107, 255, .08), rgba(8, 10, 20, .6));
  text-align: center;
  overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.shop-card::before {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .12), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.shop-card:hover::before { left: 130%; }
.shop-card:hover {
  transform: translateY(-3px);
  border-color: rgba(178, 107, 255, .7);
  box-shadow: 0 0 24px rgba(178, 107, 255, .35);
}
.shop-card.equipped {
  border-color: rgba(0, 255, 157, .7);
  box-shadow: 0 0 20px rgba(0, 255, 157, .3);
}
.shop-card .shop-icon {
  font-size: 30px; line-height: 1;
  filter: drop-shadow(0 0 10px rgba(178, 107, 255, .6));
  animation: iconFloat 2.4s ease-in-out infinite;
}
.shop-card .shop-name {
  margin-top: 8px;
  font-size: 15px; font-weight: 800; letter-spacing: 1px;
  color: #e8ddff;
}
.shop-card .shop-desc {
  margin-top: 4px; min-height: 30px;
  font-size: 11px; line-height: 1.4; color: var(--dim);
}
.shop-card .shop-price {
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 16px; font-weight: 800; color: var(--gold);
  text-shadow: 0 0 10px rgba(255, 215, 106, .5);
}
.shop-card .shop-btn {
  width: 100%; margin-top: 10px;
  padding: 9px 0;
  border: 1px solid rgba(178, 107, 255, .6);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(178, 107, 255, .25), rgba(178, 107, 255, .06));
  color: #d8c6ff;
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  font-family: inherit; cursor: pointer;
  transition: box-shadow .2s, transform .1s;
}
.shop-card .shop-btn:hover { box-shadow: 0 0 16px rgba(178, 107, 255, .5); }
.shop-card .shop-btn:active { transform: scale(.96); }
.shop-card .shop-btn:disabled { opacity: .45; cursor: not-allowed; }
.shop-card .shop-btn.equip {
  border-color: rgba(0, 255, 157, .6);
  background: linear-gradient(180deg, rgba(0, 255, 157, .2), rgba(0, 255, 157, .05));
  color: var(--green);
}
.shop-card .shop-btn.owned { opacity: .5; }
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* ── OTC 代币市场 ─────────────────────── */
.otc-modal { width: min(520px, 94vw); }
.otc-create {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: 12px;
}
.otc-create input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 229, 255, .35);
  border-radius: 8px;
  background: rgba(4, 8, 16, .8);
  color: var(--text);
  font-family: var(--mono); font-size: 13px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.otc-create input:focus {
  border-color: rgba(0, 229, 255, .7);
  box-shadow: 0 0 12px rgba(0, 229, 255, .25);
}
.otc-create .shop-btn { width: auto; padding: 10px 14px; margin-top: 0; flex: none; }
.otc-price-line {
  margin: -4px 0 10px;
  font-size: 12px; color: var(--dim); letter-spacing: 1px;
}
.otc-sellable {
  margin: 2px 0 6px;
  font-size: 12px; color: var(--dim); letter-spacing: 1px;
}
.otc-sellable b {
  color: var(--gold);
  font-family: var(--mono);
  text-shadow: 0 0 8px rgba(255, 215, 106, .5);
}

/* ── 交易所风价格曲线 ─────────────────── */
.ex-chart {
  margin: 4px 0 10px;
  padding: 12px 14px 8px;
  border: 1px solid rgba(0, 229, 255, .18);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0, 229, 255, .05), rgba(4, 8, 16, .35));
}
.ex-chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.ex-pair-box { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ex-pair {
  font-size: 11px; letter-spacing: 2px; color: var(--dim);
  border: 1px solid rgba(0, 229, 255, .35); border-radius: 4px;
  padding: 2px 6px; color: var(--cyan);
}
.ex-pair-box b {
  font-family: var(--mono);
  font-size: 20px; font-weight: 700; color: #eafff5;
  text-shadow: 0 0 14px rgba(0, 229, 255, .35);
}
.ex-change { font-size: 13px; font-weight: 700; font-family: var(--mono); }
.ex-change.up   { color: #00e57a; }
.ex-change.down { color: #ff5d6c; }
.ex-chart-info { font-size: 10px; letter-spacing: 1px; color: var(--dim); }
.ex-chart canvas { width: 100%; display: block; }

/* 可售额度行（交易所版） */
.ex-sellable {
  margin: 2px 0 8px;
  font-size: 12px; color: var(--dim); letter-spacing: 1px;
}
.ex-sellable b {
  color: var(--gold);
  font-family: var(--mono);
  text-shadow: 0 0 8px rgba(255, 215, 106, .5);
}

/* ── OTC 实名徽标 & 付款卡 ─────────────── */
.kyc-tag {
  display: inline-block; margin-left: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 1px 6px; border-radius: 4px;
  color: #6ff0a8;
  border: 1px solid rgba(0, 229, 122, .45);
  background: rgba(0, 229, 122, .1);
}
.kyc-tag.no {
  color: var(--dim);
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .04);
}
.pay-card {
  flex: 0 0 100%;
  margin: 8px 0 2px; padding: 10px 12px;
  border: 1px solid rgba(255, 215, 106, .4);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 215, 106, .1), rgba(4, 8, 16, .3));
  display: flex; flex-direction: column; gap: 5px;
}
.pay-title { font-size: 13px; font-weight: 700; color: var(--gold); letter-spacing: 1px; }
.pay-card.buyer {
  border-color: rgba(0, 229, 255, .4);
  background: linear-gradient(180deg, rgba(0, 229, 255, .1), rgba(4, 8, 16, .3));
}
.pay-card.buyer .pay-title { color: var(--cyan); }
.pay-row { font-size: 13px; color: var(--text); }
.pay-row b { color: #eafff5; font-family: var(--mono); }
.pay-qr {
  width: 120px; height: 120px; object-fit: contain;
  border-radius: 6px; margin-top: 4px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: #fff;
}
.pay-warn { font-size: 12px; color: #ffb36b; letter-spacing: 1px; }
.pay-tip { font-size: 11px; color: var(--dim); letter-spacing: 1px; }

/* ── 实名弹窗 ─────────────────────────── */
.kyc-modal { max-width: 380px; }
.kyc-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.kyc-row label {
  flex: none; width: 88px;
  font-size: 13px; letter-spacing: 1px; color: var(--dim);
}
.kyc-row input {
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(0, 229, 255, .25);
  border-radius: 8px;
  background: rgba(4, 8, 16, .6);
  color: #eafff5;
  font-size: 14px; font-family: inherit; outline: none;
}
.kyc-row input:focus { border-color: rgba(0, 229, 255, .6); box-shadow: 0 0 10px rgba(0, 229, 255, .2); }
.kyc-qr-wrap { display: flex; align-items: center; gap: 12px; }
.kyc-qr-preview { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; background: #fff; }
.kyc-upload {
  display: inline-block; padding: 8px 14px;
  border: 1px dashed rgba(0, 229, 255, .5);
  border-radius: 8px; color: var(--cyan);
  font-size: 13px; cursor: pointer;
}
.kyc-upload:hover { background: rgba(0, 229, 255, .08); }
.kyc-status { font-size: 12px; color: var(--dim); letter-spacing: 1px; margin-bottom: 12px; }
.kyc-status.ok { color: #6ff0a8; }

/* ═══ 个人用户中心（全屏页面） ═══ */
.profile-mask {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(2, 4, 10, .96);
  backdrop-filter: blur(6px);
  overflow-y: auto;
}
.profile-page { max-width: 640px; margin: 0 auto; padding: 0 18px calc(40px + 54px); }
.profile-head {
  position: sticky; top: 0; z-index: 2;
  padding: 18px 0 16px;
  background: linear-gradient(180deg, rgba(2, 4, 10, .98), rgba(2, 4, 10, .85), transparent);
}
.profile-back {
  background: none; border: 1px solid rgba(0, 229, 255, .35);
  color: var(--cyan); font-size: 14px; font-family: inherit; cursor: pointer;
  padding: 7px 14px; border-radius: 8px; margin-bottom: 14px;
}
.profile-back:hover { background: rgba(0, 229, 255, .08); }
.profile-user { display: flex; align-items: center; gap: 16px; }
.profile-avatar-box { position: relative; cursor: pointer; flex: none; }
.profile-avatar-box .avatar-edit {
  position: absolute; right: -4px; bottom: -4px;
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 16, .9);
  border: 1px solid rgba(0, 229, 255, .5);
  font-size: 13px;
  box-shadow: 0 0 8px rgba(0, 229, 255, .3);
}
.profile-avatar-box:hover .avatar-edit {
  background: rgba(0, 229, 255, .25);
  box-shadow: 0 0 12px rgba(0, 229, 255, .5);
}
.profile-avatar {
  width: 84px; height: 84px; object-fit: cover;
  border-radius: 14px;
  border: 1px solid rgba(0, 229, 255, .35);
  box-shadow: 0 0 22px rgba(0, 229, 255, .25);
  background: rgba(8, 14, 26, .8);
}
.profile-id { min-width: 0; }
.profile-name-row { display: flex; align-items: center; gap: 8px; }
.profile-name {
  font-size: 19px; font-weight: 700; letter-spacing: 1px;
  color: #eafff5; text-shadow: 0 0 12px rgba(0, 229, 255, .3);
}
.profile-edit {
  background: none; border: 1px solid rgba(0, 229, 255, .35);
  border-radius: 6px; font-size: 11px; padding: 2px 6px; cursor: pointer;
}
.profile-edit:hover { background: rgba(0, 229, 255, .1); }
.profile-addr {
  font-family: var(--mono); font-size: 15px; color: #eafff5;
  cursor: pointer; word-break: break-all;
}
.profile-addr::after { content: ' ⧉'; font-size: 11px; color: var(--dim); }
.profile-meta {
  margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--dim); letter-spacing: 1px;
}
.profile-meta b { color: var(--gold); font-family: var(--mono); }
.profile-body { display: flex; flex-direction: column; gap: 14px; }
.p-card {
  border: 1px solid rgba(0, 229, 255, .18);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(0, 229, 255, .05), rgba(4, 8, 16, .4));
  padding: 16px 18px;
}
.p-card-title {
  font-size: 13px; letter-spacing: 3px; color: var(--text);
  opacity: .9; margin-bottom: 12px;
}
.p-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p-grid2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.p-cell {
  text-align: center; padding: 10px 4px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px; background: rgba(8, 14, 26, .5);
}
.p-cell-v {
  font-family: var(--mono); font-size: 16px; font-weight: 700; color: #eafff5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p-cell-v.gold { color: var(--gold); }
.p-cell-v.green { color: var(--green); }
.p-cell-v.sm { font-size: 13px; }
.p-cell-l { font-size: 10px; letter-spacing: 1px; color: var(--dim); margin-top: 4px; }
.p-rows { display: flex; flex-direction: column; gap: 9px; }
.p-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: var(--dim);
}
.p-row b { color: #eafff5; font-family: var(--mono); }
.p-row b.ok { color: #6ff0a8; }
.p-row b.no { color: #ffb36b; }
.p-orders { display: flex; flex-direction: column; gap: 8px; }
.p-order {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0, 229, 255, .12);
  border-radius: 8px; background: rgba(8, 14, 26, .5);
  font-family: var(--mono); font-size: 12px;
}
.p-order-t { color: var(--text); }
.p-order-v { color: var(--gold); }

/* 个人中心：实名 & 收款方式卡 */
.pk-qr {
  width: 140px; height: 140px; object-fit: contain;
  border-radius: 8px; margin: 10px auto 4px;
  display: block; background: #fff;
  border: 1px solid rgba(255, 255, 255, .15);
}
.pk-edit { width: 100%; margin-top: 12px; }

/* 我的流水 */
.log-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.log-tabs button {
  background: rgba(8, 14, 26, .6);
  border: 1px solid rgba(0, 229, 255, .2);
  color: var(--dim);
  font-size: 12px; font-family: inherit; letter-spacing: 1px;
  padding: 5px 12px; border-radius: 6px; cursor: pointer;
}
.log-tabs button.on {
  color: #04060c; font-weight: 700;
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(0, 229, 255, .35);
}
.log-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; }
.log-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px; background: rgba(8, 14, 26, .5);
}
.log-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.log-kind { font-size: 12px; color: var(--cyan); letter-spacing: 1px; }
.log-remark {
  font-size: 11px; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.log-right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.log-delta { font-family: var(--mono); font-size: 14px; }
.log-delta.up { color: #6ff0a8; }
.log-delta.down { color: #ff7a90; }
.log-time { font-size: 10px; color: var(--dim); font-family: var(--mono); }

/* 设置 */
.p-row b.clickable { cursor: pointer; color: var(--cyan); }
.p-row b.danger { color: #ff7a90; }
.p-row b.danger:hover { text-decoration: underline; }

/* 资产条可点击进入个人中心 */
.balance-strip { cursor: pointer; }
.otc-price-line b {
  color: var(--gold);
  font-family: var(--mono);
  text-shadow: 0 0 8px rgba(255, 215, 106, .5);
}
.otc-title {
  margin: 10px 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  color: var(--cyan); opacity: .85;
}
.otc-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 180px; overflow-y: auto;
  padding-right: 4px;
}
.otc-list::-webkit-scrollbar { width: 6px; }
.otc-list::-webkit-scrollbar-thumb { background: rgba(0, 229, 255, .35); border-radius: 3px; }
.otc-empty { font-size: 12px; color: var(--dim); text-align: center; padding: 12px 0; }
.otc-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid rgba(0, 229, 255, .18);
  border-radius: 8px;
  background: rgba(8, 14, 26, .7);
  font-family: var(--mono); font-size: 12px;
}
.otc-row .o-info { flex: 1; min-width: 0; line-height: 1.5; }
.otc-row .o-info b { color: var(--gold); }
.otc-row .o-time { color: var(--dim); font-size: 10px; }
.otc-row .o-btn {
  flex: none;
  padding: 7px 12px;
  border: 1px solid rgba(0, 255, 157, .5);
  border-radius: 6px;
  background: rgba(0, 255, 157, .12);
  color: var(--green);
  font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: box-shadow .15s, transform .1s;
}
.otc-row .o-btn:hover { box-shadow: 0 0 12px rgba(0, 255, 157, .4); }
.otc-row .o-btn:active { transform: scale(.95); }
.otc-row .o-btn.red { border-color: rgba(255, 45, 85, .5); background: rgba(255, 45, 85, .1); color: #ff7a90; }
.otc-row .o-btn.cyan { border-color: rgba(0, 229, 255, .5); background: rgba(0, 229, 255, .1); color: var(--cyan); }
.otc-row .o-btn:disabled { opacity: .4; cursor: not-allowed; }
.otc-st { font-size: 11px; padding: 2px 8px; border-radius: 4px; flex: none; }
.otc-st.s-open { background: rgba(0, 229, 255, .15); color: var(--cyan); }
.otc-st.s-locked { background: rgba(255, 215, 106, .15); color: var(--gold); }
.otc-st.s-paid { background: rgba(178, 107, 255, .15); color: #c9a0ff; }
.otc-st.s-done { background: rgba(0, 255, 157, .15); color: var(--green); }
.otc-st.s-cancelled { background: rgba(120, 130, 150, .15); color: var(--dim); }

/* ── 渡劫雷劫：闪电 + 全屏闪光（升级/突破，持续约 2.5s） ── */
.lightning {
  position: fixed; inset: 0; z-index: 58; pointer-events: none;
  background: rgba(235, 248, 255, .95);
  opacity: 0;
}
.lightning.red { background: rgba(255, 225, 225, .95); }
.lightning.on { animation: lightningFlash 2.5s steps(5, end) forwards; }
@keyframes lightningFlash {
  0%   { opacity: .95; }
  8%   { opacity: .1; }
  15%  { opacity: .85; }
  24%  { opacity: .06; }
  33%  { opacity: .7; }
  45%  { opacity: .05; }
  60%  { opacity: .45; }
  75%  { opacity: .03; }
  88%  { opacity: .2; }
  100% { opacity: 0; }
}
.lightning-bolt {
  position: fixed; left: 50%; top: -12%; z-index: 59; pointer-events: none;
  transform: translateX(-50%);
  width: 60px; height: 62vh;
  opacity: 0;
}
.lightning-bolt.on { animation: boltFlash 2.5s steps(6, end) forwards; }
@keyframes boltFlash {
  0%   { opacity: 1; }
  10%  { opacity: .12; }
  18%  { opacity: .95; }
  28%  { opacity: .08; }
  38%  { opacity: .8; }
  52%  { opacity: .05; }
  66%  { opacity: .5; }
  82%  { opacity: .04; }
  100% { opacity: 0; }
}
/* 失败：红闪电 */
.lightning-bolt.red polyline {
  stroke: #ff9a9a;
  filter: drop-shadow(0 0 8px rgba(255, 130, 130, .8)) drop-shadow(0 0 22px rgba(255, 80, 80, .6)) !important;
}

/* ── 升段全屏播报 ─────────────────────── */
.rank-up {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.rank-up.show { animation: rankFade 2.4s ease forwards; }
.rank-up .rank-text {
  font-family: var(--mono);
  font-size: clamp(40px, 9vw, 88px);
  font-weight: 900; letter-spacing: 12px;
  color: #fff;
  text-shadow: 0 0 30px var(--nc), 0 0 80px var(--nc), 0 0 140px var(--nc);
  animation: rankZoom 2.4s ease forwards;
}
.rank-up .rank-sub {
  position: absolute; top: 56%;
  font-size: clamp(14px, 2.5vw, 22px);
  letter-spacing: 8px;
  color: var(--nc);
  text-shadow: 0 0 16px var(--nc);
  animation: rankFade 2.4s ease forwards;
}
@keyframes rankZoom {
  0%   { transform: scale(.3); opacity: 0; }
  25%  { transform: scale(1.08); opacity: 1; }
  45%  { transform: scale(1); }
  75%  { opacity: 1; }
  100% { transform: scale(1.12); opacity: 0; }
}
@keyframes rankFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}

/* ── Toast 提示 ─────────────────────── */
.toast-box {
  position: fixed; top: 78px; right: 20px; z-index: 100;
  display: flex; flex-direction: column; gap: 10px;
  max-width: 86vw;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 220px;
  padding: 12px 16px;
  font-size: 13px; letter-spacing: .5px;
  color: var(--text);
  background: rgba(8, 14, 26, .94);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
  animation: toastIn .3s ease;
  transition: opacity .4s, transform .4s;
}
.toast-ico {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
}
.toast-success { border-color: rgba(0, 255, 157, .5); }
.toast-success .toast-ico { background: var(--green); box-shadow: 0 0 8px var(--green); }
.toast-error   { border-color: rgba(255, 45, 85, .5); }
.toast-error .toast-ico   { background: var(--red); box-shadow: 0 0 8px var(--red); }
.toast-warn    { border-color: rgba(255, 215, 106, .5); }
.toast-warn .toast-ico    { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.toast-info    { border-color: rgba(0, 229, 255, .4); }
.toast-info .toast-ico    { background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
.toast.out { opacity: 0; transform: translateX(24px); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}

/* ── 响应式 ─────────────────────────── */
@media (max-width: 960px) {
  .main { flex-direction: column; padding: 18px 16px 120px; gap: 18px; }
  .panel-left { padding: 34px 20px; }
  .panel-right { padding: 26px 20px; gap: 18px; }
  .stat-card { min-height: 150px; }
  .header { padding: 0 16px; }
  .btn-connect { padding: 9px 14px; font-size: 13px; }
  .btn-deposit { padding: 9px 14px; font-size: 13px; }
  .btn-shop { padding: 9px 14px; font-size: 13px; }
  .btn-kyc { padding: 9px 12px; font-size: 13px; }
  .btn-profile { padding: 9px 12px; font-size: 13px; }
  .logo-text { font-size: 17px; letter-spacing: 3px; }
}

/* 平板/手机：按钮过多时换行压缩 */
@media (max-width: 720px) {
  .header { flex-wrap: wrap; height: auto; min-height: 64px; padding: 10px 12px 8px; gap: 8px; }
  .header-actions { flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
  .btn-kyc, .btn-shop, .btn-deposit, .btn-profile {
    padding: 8px 10px; font-size: 12px; gap: 4px;
  }
  .btn-connect { padding: 8px 12px; font-size: 12px; gap: 6px; }
  .btn-icon { padding: 8px 10px; }
  .logo-text { font-size: 15px; letter-spacing: 2px; }
}

@media (max-width: 480px) {
  .stat-value { font-size: 30px; }
  .level-value { font-size: 24px; }
  .header-actions { gap: 6px; }
  .btn-deposit { padding: 9px 10px; }
  .btn-kyc { padding: 9px 10px; font-size: 13px; }
  .kyc-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .kyc-row label { width: auto; }

  /* 升级按钮：手机端并排紧凑（icon + 主文案 + 成本 纵向居中） */
  .upgrade-buttons { flex-direction: row; gap: 10px; max-width: none; }
  .upgrade-buttons .btn { flex-direction: column; gap: 3px; padding: 12px 6px; flex: 1; min-width: 0; text-align: center; }
  .upgrade-buttons .btn-ico { font-size: 18px; }
  .upgrade-buttons .btn-main { font-size: 12px; line-height: 1.3; white-space: nowrap; flex: none; }
  .upgrade-buttons .btn-cost { font-size: 10px; }

  /* 资产条：手机端 2×2 */
  .balance-strip { grid-template-columns: repeat(2, 1fr); }

  /* 广告条：手机端紧凑 */
  .btn-ad { padding: 10px 10px; gap: 8px; }
  .ad-ico { font-size: 16px; }
  .ad-main { font-size: 12px; letter-spacing: .5px; }
  .ad-sub { font-size: 9px; }
  .ad-count { font-size: 52px; }
  .ad-player { padding: 22px 18px 20px; }

  /* 光晕收窄，避免贴屏幕边缘 */
  .aura-1 { inset: -2%; }
  .aura-2 { inset: -6%; }

  /* 看板子项缩小，一行放下四个指标 */
  .stat-sub { font-size: 10px; letter-spacing: 1px; }
}

/* ═══ 移动端 / 触屏设备：低特效降级（解决卡顿） ═══ */
@media (hover: none), (pointer: coarse) {
  .scanlines { display: none; }            /* 关 CRT 扫描线 */
  .aura { display: none; }                 /* 关仙气光环（blur 最耗性能） */
  .bg-grid { opacity: .3; }                /* 背景网格淡化 */
  .bg-glow { opacity: .6; }
  .node-core { animation-duration: 4.5s; } /* 呼吸放缓，减少重绘 */
  .ring-outer { animation-duration: 32s; }
  .ring-mid   { animation-duration: 20s; }
  .ring-inner { animation-duration: 14s; }
  .ring-4     { animation-duration: 10s; }
  .ring-5     { animation-duration: 8s; }
  .btn-shop::after, .shop-card::before { display: none; }  /* 流光扫描关掉 */
  .shop-card:hover { transform: none; }
  .btn:hover::after { display: none; }
}

/* ═══ 纯 OTC 交易站（index.html 网页版） ═══ */
.otc-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  display: flex; flex-direction: column; gap: 18px;
}
.otc-hero { text-align: center; padding: 8px 0 2px; }
.otc-hero h1 {
  font-size: 22px; font-weight: 800; letter-spacing: 2px;
  color: var(--text);
  text-shadow: 0 0 18px rgba(0, 229, 255, .5);
}
.otc-hero p { font-size: 12px; color: var(--dim); letter-spacing: 1px; margin-top: 8px; }
.otc-assets {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.oa-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 8px;
  background: rgba(8, 14, 26, .5);
  min-width: 0;
}
.oa-cell span { font-size: 10px; letter-spacing: 1px; color: var(--dim); white-space: nowrap; }
.oa-cell b { color: var(--green); font-size: 14px; font-family: var(--mono); white-space: nowrap; }
.oa-cell b.gold { color: var(--gold); }
.oa-cell b.ok { color: var(--green); }
.oa-cell b.no { color: var(--red); }
.otc-card {
  padding: 16px;
  border: 1px solid rgba(0, 229, 255, .14);
  border-radius: 12px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.otc-note { font-size: 12px; color: var(--dim); margin-bottom: 12px; letter-spacing: 1px; }
.otc-title {
  font-size: 13px; font-weight: 700; letter-spacing: 2px;
  color: var(--text); margin-bottom: 12px;
  display: flex; align-items: center; gap: 6px;
}

@media (max-width: 480px) {
  .otc-main { padding: 18px 14px 40px; }
  .otc-assets { grid-template-columns: repeat(2, 1fr); }
  .otc-hero h1 { font-size: 19px; }
}