/* ═══════════════════════════════════════════════════════
   GEN Protocol — Design System v2.0
   统一布局规范 · 深度美化基准
   ═══════════════════════════════════════════════════════ */

/* ═══ 统一间距规范 ═══ */
:root {
  /* 页面级间距 */
  --page-padding: 16px;
  --page-padding-bottom: 80px;
  
  /* 组件级间距 */
  --section-gap: 16px;
  --card-gap: 12px;
  --element-gap: 8px;
  
  /* 卡片内边距 */
  --card-padding: 18px;
  --card-padding-lg: 24px;
  
  /* 圆角规范 */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* 字体规范 */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Courier New', monospace;
  
  /* 字体大小规范 */
  --text-hero: 20px;
  --text-title: 16px;
  --text-body: 14px;
  --text-small: 12px;
  --text-tiny: 11px;
  --text-micro: 9px;
  
  /* 字重规范 */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  
  /* 颜色规范 */
  --gold: #d4af37;
  --gold-light: #fde68a;
  --gold-dark: #b8860b;
  --gold-dim: rgba(212,175,55,.1);
  --gold-glow: rgba(212,175,55,.2);
  
  --blue-core: #0a84ff;
  --blue-bright: #4fc3f7;
  --blue-glow: rgba(10,132,255,.2);
  
  --green: #22c55e;
  --red: #ef4444;
  --purple: #a855f7;
  --orange: #f97316;
  
  --text-primary: #fef9e7;
  --text-secondary: rgba(254,249,231,.65);
  --text-tertiary: rgba(254,249,231,.35);
  --text-disabled: rgba(254,249,231,.15);
  
  --border: rgba(255,255,255,.06);
  --border-gold: rgba(212,175,55,.15);
  
  --bg-card: rgba(255,255,255,.02);
  --bg-surface: rgba(255,255,255,.03);
  
  /* 阴影规范 */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
  --shadow-md: 0 8px 32px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 64px rgba(0,0,0,.5);
  --shadow-gold: 0 0 40px rgba(212,175,55,.2);
  
  /* 过渡规范 */
  --transition-fast: .2s ease;
  --transition-normal: .35s ease;
  --transition-slow: .6s ease;
}

/* ═══ 全局重置 ═══ */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  font-family: var(--font-primary);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: linear-gradient(180deg, #0a0a0f 0%, #12121a 50%, #0a0a0f 100%);
  color: var(--text-primary);
  letter-spacing: .02em;
  max-width: 420px;
  margin: 0 auto;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ═══ 容器规范 ═══ */
#app, .container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: var(--page-padding) var(--page-padding) var(--page-padding-bottom);
  position: relative;
  z-index: 1;
}

/* ═══ 头部规范（统一） ═══ */
.page-header {
  text-align: center;
  padding: 16px 0 8px;
  margin-bottom: 16px;
  position: relative;
}

/* 统一标题类名 — .page-title / .hero-title 均可 */
.page-header .page-title,
.page-header .hero-title {
  font-size: 22px;
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .05em;
  margin-bottom: 6px;
  line-height: 1.3;
}

.page-header .page-title span {
  -webkit-text-fill-color: var(--gold);
  font-weight: var(--weight-extrabold);
}

.page-header .page-subtitle,
.page-header .hero-sub {
  font-size: var(--text-small);
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: .02em;
}

/* 兼容旧版 .hero 容器 */
.hero {
  text-align: center;
  padding: 16px 0 8px;
}

.hero-title {
  font-size: 22px;
  font-weight: var(--weight-extrabold);
  background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: .05em;
  line-height: 1.3;
}

.hero-sub {
  font-size: var(--text-small);
  color: var(--text-tertiary);
  margin-top: 4px;
  letter-spacing: .02em;
}

/* ═══ 顶部导航栏统一（.top-bar / .topbar / .hdr） ═══ */
.top-bar, .topbar, .hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 12px;
  margin-bottom: 8px;
}

.top-bar .back, .topbar .back, .hdr .back,
.back-link {
  color: var(--gold);
  text-decoration: none;
  font-size: var(--text-small);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: opacity var(--transition-fast);
  font-weight: var(--weight-medium);
}

.top-bar .back:hover, .topbar .back:hover,
.back-link:hover {
  opacity: .7;
}

.top-bar .page-title, .topbar .title, .hdr .title {
  font-size: var(--text-title);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: .03em;
}

/* ═══ 钱包栏规范 ═══ */
.wallet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  margin-bottom: 8px;
}

.wallet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
  margin-right: 6px;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}

.wallet-addr {
  font-family: var(--font-mono);
  font-size: var(--text-tiny);
  color: var(--text-secondary);
}

.wallet-btn {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text-secondary);
  font-size: var(--text-small);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.wallet-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.wallet-btn.connected {
  background: rgba(34,197,94,.08);
  border-color: rgba(34,197,94,.25);
  color: var(--green);
}

/* ═══ 卡片规范（统一） ═══ */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  margin-bottom: var(--card-gap);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.card-gold {
  border-color: var(--border-gold);
  background: rgba(212,175,55,.03);
}

.card-title {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--gold);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══ 按钮规范 ═══ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.btn:active {
  transform: scale(.97);
}

.btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  color: #060912;
  box-shadow: 0 4px 24px rgba(212,175,55,.2);
}

.btn-gold:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(212,175,55,.3);
}

.btn-outline {
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
}

.btn-block {
  width: 100%;
}

.btn-sm {
  padding: 8px 16px;
  font-size: var(--text-small);
}

/* ═══ 输入框规范 ═══ */
.input {
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: var(--text-body);
  font-family: inherit;
  outline: none;
  transition: border var(--transition-fast);
}

.input:focus {
  border-color: var(--gold);
}

.input:disabled {
  opacity: .5;
}

.input-mono {
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

/* ═══ 统计网格规范 ═══ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--element-gap);
  margin-bottom: var(--section-gap);
}

.stat-cell {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 6px;
  text-align: center;
}

.stat-val {
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--blue-bright);
}

.stat-val-gold {
  font-size: 17px;
  font-weight: var(--weight-bold);
  color: var(--gold);
}

.stat-label {
  font-size: var(--text-micro);
  color: var(--text-tertiary);
  margin-top: 3px;
}

/* ═══ 大数字规范 ═══ */
.big-num {
  font-size: 28px;
  font-weight: var(--weight-extrabold);
  color: var(--gold);
  font-family: inherit;
  line-height: 1;
  text-align: center;
}

.big-label {
  font-size: var(--text-tiny);
  color: var(--text-tertiary);
  text-align: center;
  margin-top: 2px;
}

/* ═══ 进度条规范 ═══ */
.progress-wrap {
  background: rgba(255,255,255,.04);
  border-radius: var(--radius-full);
  height: 8px;
  margin: 6px 0 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light));
  transition: width .5s ease;
}

/* ═══ 标签页规范 ═══ */
.tabs {
  display: flex;
  gap: 0;
  margin: var(--section-gap) 0;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}

.tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  background: none;
  font-family: inherit;
  user-select: none;
}

.tab.active {
  background: rgba(212,175,55,.08);
  color: var(--gold);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

/* ═══ 信息框规范 ═══ */
.info-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px;
  margin: var(--element-gap) 0;
  font-size: var(--text-small);
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ═══ Toast 规范 ═══ */
#toast-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
  align-items: center;
  pointer-events: none;
}

.toast {
  padding: 10px 20px;
  border-radius: var(--radius-md);
  background: rgba(18,18,26,.95);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-primary);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: var(--element-gap);
  box-shadow: var(--shadow-md);
  animation: toastIn var(--transition-normal) ease;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══ 加载状态规范 ═══ */
.loading-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: loadingPulse 1s infinite;
  margin: 0 1.5px;
}

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

/* ═══ 动画规范 ═══ */
.animate-in {
  animation: fadeInUp var(--transition-slow) cubic-bezier(.16,1,.3,1) both;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══ 空状态规范 ═══ */
.empty-state {
  text-align: center;
  padding: 24px 16px;
  color: var(--text-tertiary);
  font-size: var(--text-small);
}

/* ═══ 页脚规范 ═══ */
.footer {
  text-align: center;
  padding: 8px 0 0;
  font-size: var(--text-small);
  color: var(--text-tertiary);
  line-height: 1.6;
}

/* ═══ 底部导航栏规范 ═══ */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 420px;
  height: 56px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(8,14,30,.38);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(79,195,247,.06);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  text-decoration: none;
  color: rgba(180,210,245,.5);
  font-size: 14px;
  padding: 10px 0;
  transition: all .3s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  border-radius: 10px;
}

.bottom-nav-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 28%;
  height: 44%;
  width: 1px;
  background: rgba(79,195,247,.07);
}

.bottom-nav-item:hover {
  color: var(--blue-bright);
}

.bottom-nav-item.active {
  color: var(--blue-core);
  text-shadow: 0 0 12px rgba(0,180,255,.5);
  background: rgba(0,180,255,.06);
  border-radius: 8px;
}

.bottom-nav-label {
  font-size: 15px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   GEN Protocol — Design System v3.0 — 扩展组件
   以下是从各页面提取的共享样式，不覆盖 v2.0 的原有规范
   ═══════════════════════════════════════════════════════ */

/* ═══ 标签卡 ═══ */
.tag {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.tag-gold { color: var(--gold); background: var(--gold-dim); }
.tag-green { color: var(--green); background: rgba(34,197,94,.1); }
.tag-red { color: var(--red); background: rgba(239,68,68,.1); }
.tag-purple { color: var(--purple); background: rgba(168,85,247,.1); }
.tag-orange { color: var(--orange); background: rgba(249,115,22,.1); }

/* ═══ 图标容器 ═══ */
.entry-icon, .game-icon {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  flex-shrink: 0;
}
.entry-icon.purple { background: linear-gradient(135deg, rgba(168,85,247,.15), rgba(168,85,247,.05)); }
.entry-icon.orange { background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(249,115,22,.05)); }
.game-icon.kline { background: linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.05)); }
.game-icon.racing { background: linear-gradient(135deg, rgba(212,175,55,.15), rgba(212,175,55,.05)); }
.game-icon.slots { background: linear-gradient(135deg, rgba(239,68,68,.12), rgba(239,68,68,.04)); }

/* ═══ 条目/游戏卡片 ═══ */
.entry-card, .game-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.entry-card:hover, .game-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(212,175,55,.08);
}
.entry-card:active, .game-card:active { transform: scale(.98); }
.entry-card .ec-info, .game-card .gc-info { flex: 1; min-width: 0; }
.entry-card .ec-name, .game-card .gc-name {
  font-size: 15px;
  font-weight: var(--weight-semibold);
  margin-bottom: 3px;
}
.entry-card .ec-desc, .game-card .gc-desc {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.entry-card .ec-tags, .game-card .gc-tags { display: flex; gap: 6px; margin-top: 6px; }
.entry-card .ec-tag, .game-card .gc-tag {
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: var(--weight-semibold);
}
.entry-card .ec-tag.purple { background: rgba(168,85,247,.1); color: var(--purple); }
.entry-card .ec-tag.orange { background: rgba(249,115,22,.1); color: var(--orange); }
.game-card .gc-tag.win { background: rgba(34,197,94,.1); color: var(--green); }
.game-card .gc-tag.time { background: rgba(212,175,55,.1); color: var(--gold); }
.entry-card .ec-arrow, .game-card .gc-arrow {
  font-size: 20px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}
.entry-card:hover .ec-arrow, .game-card:hover .gc-arrow {
  transform: translateX(4px);
  color: var(--gold);
}

/* ═══ 统计栏 ═══ */
.stats-bar { display: flex; gap: 10px; }
.stat-item {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  padding: 11px 8px;
  text-align: center;
}
.stat-item .sv { font-size: 19px; font-weight: var(--weight-bold); color: var(--gold); }
.stat-item .sl { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }

/* ═══ 用户余额栏 ═══ */
.user-balance-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.user-balance-bar .ub-label { font-size: 11px; color: var(--text-secondary); }
.user-balance-bar .ub-value { font-size: 16px; font-weight: var(--weight-bold); color: var(--green); }

/* ═══ 信息网格 ═══ */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.info-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  padding: 12px;
  text-align: center;
}
.info-card .ic-val { font-size: 16px; font-weight: var(--weight-bold); color: var(--gold); }
.info-card .ic-lbl { font-size: 9.5px; color: var(--text-tertiary); margin-top: 2px; }

/* ═══ 交易面板通用 ═══ */
.trade-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.trade-title { font-size: 15px; font-weight: var(--weight-bold); display: flex; align-items: center; gap: 6px; }
.trade-mode { font-size: 10px; padding: 2px 8px; border-radius: 4px; font-weight: var(--weight-semibold); }

/* ═══ 输入组 ═══ */
.input-group { margin-bottom: 12px; }
.input-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; display: block; }
.input-row { display: flex; gap: 8px; align-items: stretch; }

/* ═══ 数据行 ═══ */
.reward-row, .data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.reward-row:last-child, .data-row:last-child { border-bottom: none; }
.reward-gen, .data-val { font-weight: var(--weight-semibold); color: var(--gold); font-family: inherit; }

/* ═══ 进度标签 ═══ */
.progress-labels { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }

/* ═══ 预览框 ═══ */
.preview-box {
  background: rgba(249,115,22,.04);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.preview-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
.preview-row.lg { font-size: 15px; }
.preview-lbl { color: var(--text-secondary); }
.preview-val { font-weight: var(--weight-semibold); }
.preview-val.tax { color: var(--red); }
.preview-val.get { color: var(--green); font-size: 18px; font-weight: var(--weight-bold); }
.preview-divider { height: 1px; background: rgba(255,255,255,.05); margin: 6px 0; }
.price-info {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,.05);
}

/* ═══ 提交按钮 ═══ */
.submit-btn {
  width: 100%;
  padding: 15px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: var(--weight-bold);
  cursor: pointer;
  font-family: inherit;
  letter-spacing: .5px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-fast);
}
.submit-btn:active { transform: scale(.98); }
.submit-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }
.submit-btn .btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spinBtn .6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes spinBtn { to { transform: rotate(360deg); } }

/* ═══ 警告框 ═══ */
.warn-box {
  font-size: 10.5px;
  color: var(--orange);
  line-height: 1.6;
  padding: 10px 14px;
  background: rgba(249,115,22,.04);
  border-radius: 10px;
  border-left: 3px solid var(--orange);
}

/* ═══ 交易历史 ═══ */
.tx-section { display: none; }
.tx-title { font-size: 13px; font-weight: var(--weight-semibold); color: var(--gold); margin-bottom: 8px; }
.tx-list {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  max-height: 200px;
  overflow-y: auto;
}
.tx-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  font-size: 11px;
}
.tx-item:last-child { border-bottom: none; }
.tx-status { padding: 2px 6px; border-radius: 4px; font-size: 9px; font-weight: var(--weight-semibold); }
.tx-status.success { background: rgba(34,197,94,.1); color: var(--green); }
.tx-status.fail { background: rgba(239,68,68,.1); color: var(--red); }
.tx-pending { background: rgba(212,175,55,.1); color: var(--gold); }

/* ═══ 挖矿历史 ═══ */
.history-tabs { display: flex; gap: 0; margin-bottom: 16px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border); }
.history-tab {
  flex: 1; padding: 10px 0; text-align: center;
  font-size: 13px; font-weight: var(--weight-semibold); cursor: pointer;
  background: rgba(255,255,255,.02); color: var(--text-tertiary);
  border: none; font-family: inherit; transition: all var(--transition-fast);
}
.history-tab.active { background: rgba(212,175,55,.1); color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.history-tab:not(.active):hover { color: var(--text-secondary); }
.history-list { display: flex; flex-direction: column; gap: 0; }
.history-item { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.history-item:last-child { border-bottom: none; }
.history-item .hi-left { display: flex; flex-direction: column; gap: 3px; }
.history-item .hi-type { font-size: 14px; font-weight: var(--weight-semibold); color: var(--text-primary); }
.history-item .hi-date { font-size: 11px; color: var(--text-tertiary); }
.history-item .hi-right { text-align: right; }
.history-item .hi-amount { font-size: 16px; font-weight: var(--weight-bold); font-family: inherit; }
.history-item .hi-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }
.hi-amount.in { color: var(--green); }
.hi-amount.out { color: var(--gold); }
.history-empty { text-align: center; padding: 24px 0; color: var(--text-tertiary); font-size: 13px; }

/* ═══ 推荐/邀请 ═══ */
.ref-row { display: flex; gap: 8px; margin-bottom: 8px; }
.ref-row .input { flex: 1; }
.ref-status { font-size: 13px; color: var(--green); margin-top: 8px; display: none; }
.ref-status.show { display: block; }
.ref-link-wrap { display: flex; gap: 8px; margin-top: 10px; }
.ref-link-wrap .input { flex: 1; font-size: 13px; padding: 8px 12px; }
.copy-btn {
  padding: 8px 14px; background: rgba(255,255,255,.03);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--gold); font-size: 13px; cursor: pointer;
  font-family: inherit; white-space: nowrap; transition: all var(--transition-fast);
}
.copy-btn:active { transform: scale(.95); }
.copy-btn:hover { border-color: var(--gold); }

/* ═══ 拆分详情 ═══ */
.split-toggle { font-size: 13px; color: var(--gold); cursor: pointer; margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; transition: opacity var(--transition-fast); }
.split-toggle:hover { opacity: .7; }
.split-detail { display: none; margin-top: 10px; padding: 12px; background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 12px; line-height: 1.9; color: var(--text-secondary); }
.split-detail.show { display: block; }
.split-detail .sr { display: flex; justify-content: space-between; padding: 2px 0; }
.split-detail .sr .pct { color: var(--gold); font-weight: var(--weight-semibold); }

/* ═══ 退出徽章 ═══ */
.exit-badge { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: var(--weight-semibold); margin-left: 8px; }
.exit-badge.going { background: rgba(34,197,94,.1); color: var(--green); }
.exit-badge.done { background: rgba(212,175,55,.1); color: var(--gold); }

/* ═══ 状态徽章 ═══ */
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: var(--weight-semibold); }
.status-mining { background: rgba(34,197,94,.1); color: var(--green); }
.status-exited { background: rgba(212,175,55,.1); color: var(--gold); }
.status-inactive { background: rgba(255,255,255,.03); color: var(--text-tertiary); }

/* ═══ 层级表格 ═══ */
.tier-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tier-table th { padding: 6px 4px; border-bottom: 1px solid var(--border); color: var(--text-tertiary); font-weight: 500; text-align: center; }
.tier-table td { padding: 8px 4px; text-align: center; border-bottom: 1px solid rgba(255,255,255,.02); }
.tier-active { color: var(--gold); font-weight: var(--weight-bold); }
.tier-lock { color: var(--text-tertiary); }

/* ═══ FOMO 抽奖 ═══ */
.pool-hero { background: linear-gradient(135deg, rgba(168,85,247,.12), rgba(168,85,247,.03)); border: 1px solid rgba(168,85,247,.25); border-radius: var(--radius-lg); padding: 20px 18px; text-align: center; position: relative; overflow: hidden; }
.pool-hero::before { content: ''; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(168,85,247,.3), transparent 70%); pointer-events: none; }
.pool-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; letter-spacing: 2px; text-transform: uppercase; }
.pool-value { font-size: 36px; font-weight: var(--weight-extrabold); color: var(--purple); }
.pool-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 6px; }

.countdown-bar { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px; background: var(--bg-surface); border-radius: var(--radius-sm); border-left: 3px solid var(--orange); }
.countdown-label { font-size: 11px; color: var(--text-secondary); }
.countdown-time { font-size: 18px; font-weight: var(--weight-bold); color: var(--orange); font-variant-numeric: tabular-nums; letter-spacing: 1px; }

.personal-card { background: linear-gradient(135deg, rgba(212,175,55,.06), rgba(212,175,55,.02)); border: 1px solid var(--border-gold); border-radius: var(--radius-sm); padding: 14px; }
.personal-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; text-align: center; }
.ps-val { font-size: 15px; font-weight: var(--weight-bold); }
.ps-val.won { color: var(--gold); }
.ps-val.rate { color: var(--purple); }
.ps-val.streak { color: var(--orange); }
.ps-val.days { color: var(--blue-bright); }
.ps-lbl { font-size: 9px; color: var(--text-tertiary); margin-top: 2px; }

.ticket-list { background: var(--bg-card); border: 1px solid var(--border-gold); border-radius: var(--radius-sm); max-height: 240px; overflow-y: auto; }
.ticket-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.03); }
.ticket-item:last-child { border-bottom: none; }
.ticket-left { display: flex; align-items: center; gap: 10px; }
.ticket-num { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: var(--weight-bold); font-family: 'Courier New', monospace; color: #fff; }
.num-z0 { background: linear-gradient(135deg, #2563eb, #3b82f6); }
.num-z1 { background: linear-gradient(135deg, #16a34a, #22c55e); }
.num-z2 { background: linear-gradient(135deg, #d97706, #f59e0b); }
.num-z3 { background: linear-gradient(135deg, #dc2626, #ef4444); }
.ticket-day { font-size: 11px; color: var(--text-secondary); }
.ticket-status { font-size: 10px; margin-top: 2px; }
.ticket-status.valid { color: var(--green); }
.ticket-status.claimed { color: var(--gold); }
.ticket-status.expired { color: var(--text-tertiary); }
.ticket-badge { padding: 2px 8px; border-radius: 4px; font-size: 9px; font-weight: var(--weight-semibold); }
.ticket-badge.win { background: rgba(212,175,55,.15); color: var(--gold); animation: pulseGlow 1.5s infinite; }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.3); } 50% { box-shadow: 0 0 8px 3px rgba(212,175,55,.15); } }

.heatmap-bar { background: var(--bg-card); border: 1px solid rgba(168,85,247,.15); border-radius: var(--radius-sm); padding: 12px; }
.heatmap-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.heatmap-track { height: 28px; border-radius: 6px; display: flex; overflow: hidden; position: relative; }
.heat-zone { transition: width .5s ease; position: relative; display: flex; align-items: center; justify-content: center; font-size: 9px; color: rgba(255,255,255,.7); font-weight: var(--weight-semibold); z-index: 1; }
.heat-zone.z0 { background: #3b82f6; }
.heat-zone.z1 { background: #22c55e; }
.heat-zone.z2 { background: #f59e0b; }
.heat-zone.z3 { background: #ef4444; }
.heatmap-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 9px; color: var(--text-tertiary); }

/* ═══ 推荐列表（团队页） ═══ */
.list-title { text-align: left; font-size: 12px; font-weight: var(--weight-semibold); color: var(--gold); margin: 12px 0 6px; padding-left: 4px; }
.list { text-align: left; max-height: 350px; overflow-y: auto; border-radius: 10px; background: rgba(255,255,255,.02); border: 1px solid var(--border); }
.item { padding: 8px 10px; border-bottom: 1px solid var(--border); font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); word-break: break-all; display: flex; justify-content: space-between; align-items: center; }
.item:last-child { border-bottom: none; }
.item .num { color: var(--gold); font-weight: var(--weight-semibold); margin-right: 6px; min-width: 18px; }
.item .addr { flex: 1; }

/* ═══ 旧版统计（团队页） ═══ */
.stats-old { display: flex; gap: 8px; margin: 12px 0; }
.stat-old { flex: 1; background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 10px; padding: 12px 6px; text-align: center; }
.stat-num { font-size: 22px; font-weight: var(--weight-bold); color: var(--gold); }
.stat-label-old { font-size: 9px; color: var(--text-tertiary); margin-top: 3px; }

/* ═══ Section 标题（带金色竖线） ═══ */
.section-title { font-size: 14px; font-weight: var(--weight-bold); color: var(--gold); margin: 4px 0 2px; display: flex; align-items: center; gap: 6px; }
.section-title::before { content: ''; width: 3px; height: 14px; background: var(--gold); border-radius: 2px; }
.section-title.purple { color: var(--purple); }
.section-title.purple::before { background: var(--purple); }

/* ═══ 挖矿网格统计 ═══ */
.stats-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stats-row .card { text-align: center; padding: 16px 12px; }
.stats-row .card .sv { font-size: 22px; font-weight: 800; color: var(--gold); }
.stats-row .card .sl { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }

/* ═══ 超大数字 ═══ */
.big-num, .mining-amount { font-size: 36px; font-weight: var(--weight-extrabold); color: var(--gold); font-family: inherit; line-height: 1.1; text-align: center; }
.mining-usd { font-size: 14px; color: var(--text-secondary); text-align: center; margin-bottom: 12px; }
.big-label { font-size: var(--text-tiny); color: var(--text-tertiary); text-align: center; margin-top: 2px; }

/* ═══ 余额卡片 ═══ */
.balance-card { background: linear-gradient(135deg, rgba(249,115,22,.08), rgba(249,115,22,.02)); border: 1px solid rgba(249,115,22,.25); border-radius: var(--radius-lg); padding: 20px 18px; text-align: center; }
.balance-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 6px; }
.balance-value { font-size: 32px; font-weight: 800; }
.balance-usdt { font-size: 12px; color: var(--text-tertiary); margin-top: 4px; }

/* ═══ 轮播图箭头 ═══ */
.carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: rgba(5,10,25,.6); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; z-index: 10; transition: all .2s; }
.carousel-arrow:hover { background: rgba(5,10,25,.8); border-color: rgba(0,180,255,.3); }
.carousel-arrow.prev { left: 8px; }
.carousel-arrow.next { right: 8px; }

/* ═══ 奖励行特殊渲染（挖矿页） ═══ */
.reward-gen { font-weight: var(--weight-semibold); color: var(--gold); font-family: inherit; }