/* ============================================================
   稳定币理财 · 决策雷达版式（2026-10-03 FINAL APPROVAL 正式上线）
   视觉 = 已上线首页 v4（emerald 翠绿深色）同一套设计令牌（逐值同源）
   · 作用域 .xe4；类名一律 xe4- 前缀，不复用/覆盖站点既有类名
   · 由已验收原型 exearn-proto/exearn.css 收敛而来：
     移除 tab / 机会入口 / 详情页样式（正式详情页沿用 /saving/detail 既有版式）
   ============================================================ */
.xe4 {
  --xe-bg: linear-gradient(180deg, #060D0C 0%, #091214 50%, #060B0E 100%);
  --xe-card: #0E1A1E;
  --xe-card-subtle: #132227;
  --xe-text: #F1F5F9;
  --xe-sub: #94A3B8;
  --xe-muted: #64748B;
  --xe-border: rgba(45, 212, 191, 0.14);
  --xe-border-strong: rgba(16, 185, 129, 0.45);
  --xe-accent: #10B981;
  --xe-accent-2: #34D399;
  --xe-warn: #F59E0B;
  --xe-link: #4f8cff;
  --xe-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.5);
  --xe-shadow-hover: 0 16px 40px -10px rgba(16, 185, 129, 0.18);
  background: var(--xe-bg);
  color: var(--xe-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  min-height: 100vh;
  padding-bottom: 8px;
  -webkit-font-smoothing: antialiased;
}
.xe4 *, .xe4 *::before, .xe4 *::after { box-sizing: border-box; }
.xe4 p, .xe4 h1, .xe4 h2, .xe4 h3, .xe4 dl, .xe4 dd, .xe4 ul { margin: 0; }
.xe4 ul { padding: 0; list-style: none; }
.xe4 .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.xe4-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.xe4-acc { color: var(--xe-accent-2); }
.xe4-muted { color: var(--xe-muted); }

.xe4-wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.xe4-sec { margin-top: 48px; }
.xe4-opps { margin-top: 40px; scroll-margin-top: 76px; }
.xe4-listsec { scroll-margin-top: 76px; }

/* ---------- 子导航（4 项：稳定币理财 / 交易所活动 / Binance Alpha / OKX Boost） ---------- */
.xe4-subnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 20px 0 4px; border-bottom: 1px solid var(--xe-border); }
.xe4-sub { appearance: none; background: transparent; border: 1px solid transparent; border-radius: 999px; color: var(--xe-sub); font: inherit; font-size: 13px; font-weight: 700; padding: 7px 15px; cursor: pointer; text-decoration: none; position: static; }
.xe4-sub:hover { color: var(--xe-text); }
.xe4-sub.on { color: #04121a; background: linear-gradient(135deg, var(--xe-accent), var(--xe-accent-2)); }

/* ---------- Hero（决策雷达：只围绕「现在能在交易所赚什么」） ---------- */
.xe4-hero { display: flex; flex-direction: column; align-items: flex-start; padding-top: 32px; }
.xe4-hero > * + * { margin-top: 18px; }
.xe4-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--xe-accent-2); }
.xe4-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--xe-accent-2); animation: xe4-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; }
@keyframes xe4-ping { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); } 75%, 100% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } }
.xe4-h1 { font-size: 38px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.12; }
.xe4-hl { color: var(--xe-accent-2); }
.xe4-sub2 { font-size: 13px; color: var(--xe-sub); line-height: 1.8; max-width: 720px; }
.xe4-sub2 b { color: var(--xe-text); font-weight: 800; }
.xe4-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.xe4-btn { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 11px 22px; font-size: 14px; font-weight: 800; font-family: inherit; text-decoration: none; cursor: pointer; border: 1px solid transparent; background: linear-gradient(135deg, var(--xe-accent), var(--xe-accent-2)); color: #04121a; }
.xe4-btn:hover { filter: brightness(1.08); }
.xe4-btn-ghost { background: transparent; border-color: var(--xe-border-strong); color: var(--xe-accent-2); }
.xe4-path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; margin-top: 8px; }
.xe4-path li { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--xe-sub); border: 1px solid var(--xe-border); border-radius: 12px; padding: 10px 12px; background: rgba(14, 26, 30, .6); }
.xe4-path i { font-style: normal; flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(52, 211, 153, .14); color: var(--xe-accent-2); font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.xe4-exname { display: block; font-weight: 800; font-size: 14px; }

/* ---------- 交易所 logo（真实品牌：OKX/Binance 为 Simple Icons 官方路径；Bybit/Gate 为品牌色字标） ---------- */
.xe4-logo { position: static; flex: none; width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--xe-border); background: #17252B; }
.xe4-logo .xe4-mark { width: 24px; height: 24px; fill: #fff; display: block; }
.xe4-logo .xe4-mark-word { font-size: 10px; font-weight: 900; letter-spacing: .04em; }
.xe4-logo-sm { width: 44px; height: 44px; }
.xe4-logo-okx { background: #000; }
.xe4-logo-binance { background: rgba(240, 185, 11, .12); }
.xe4-logo-binance .xe4-mark { fill: #F0B90B; }
.xe4-logo-bybit .xe4-mark-word { color: #F7A600; }
.xe4-logo-gate .xe4-mark-word { color: #88C7CC; }

/* ---------- 通用卡片 / 区块（中性深蓝灰卡 + 1px 细边框；hover 上浮 + 翠绿描边） ---------- */
.xe4-card { background: var(--xe-card); border: 1px solid var(--xe-border); box-shadow: var(--xe-shadow); transition: transform .25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .25s, border-color .25s; }
.xe4-card:hover { transform: translateY(-2px); box-shadow: var(--xe-shadow-hover); border-color: var(--xe-border-strong); }
.xe4-sechead { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; justify-content: space-between; }
.xe4-h2 { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; }
.xe4-secdesc { font-size: 12.5px; color: var(--xe-sub); margin-top: 6px; max-width: 780px; line-height: 1.7; }
.xe4-batch { font-size: 11px; color: var(--xe-muted); white-space: nowrap; }

/* ---------- 今日核验速览（hero 正下方，4 卡；不改变 hero 高度） ---------- */
.xe4-opp-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
.xe4-opp { border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.xe4-opp-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.xe4-opp-id { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.xe4-opp-name { font-size: 14px; font-weight: 800; }
.xe4-opp-max { flex: none; font-size: 10px; font-weight: 900; color: #04121a; background: linear-gradient(135deg, var(--xe-accent), var(--xe-accent-2)); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.xe4-opp-rate { display: flex; align-items: baseline; gap: 8px; }
.xe4-opp-rate em { font-style: normal; font-size: 30px; font-weight: 900; color: var(--xe-accent-2); letter-spacing: -0.01em; }
.xe4-opp-rate i { font-style: normal; font-size: 11px; color: var(--xe-muted); }
.xe4-opp-verdict { font-size: 11.5px; color: var(--xe-sub); line-height: 1.6; }
.xe4-opp .xe4-detail { align-self: flex-end; }

/* ---------- 交易所速览（紧凑：官方样式 logo + 诚实活动计数） ---------- */
.xe4-exgrid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.xe4-exrow { border-radius: 16px; padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.xe4-exid { min-width: 0; display: block; }
.xe4-exact { display: block; margin-top: 4px; font-size: 12px; color: var(--xe-sub); }
.xe4-exact b { font-size: 20px; font-weight: 900; margin-right: 3px; }
.xe4-exnote { display: block; font-size: 11px; color: var(--xe-muted); margin-top: 4px; line-height: 1.55; }
.xe4-warnline { color: var(--xe-warn); }

/* ---------- 机会分析（真实 tier 与存续形态字段驱动） ---------- */
.xe4-ana-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 20px; }
.xe4-ana { border-radius: 16px; padding: 20px; }
.xe4-ana-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.xe4-ana-head h3 { font-size: 15px; font-weight: 800; }
.xe4-ana-n { font-size: 12px; font-weight: 800; color: var(--xe-accent-2); border: 1px solid var(--xe-border); border-radius: 999px; padding: 2px 10px; }
.xe4-ana-note { font-size: 12px; color: var(--xe-muted); margin-top: 6px; line-height: 1.7; }
.xe4-ana-list { margin-top: 12px; }
.xe4-ana-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--xe-border); }
.xe4-ana-name { font-size: 13px; font-weight: 700; }
.xe4-ana-rate { grid-row: span 2; text-align: right; }
.xe4-ana-rate em { font-style: normal; font-size: 17px; font-weight: 900; color: var(--xe-accent-2); }
.xe4-ana-rate i { display: block; font-style: normal; font-size: 10px; color: var(--xe-muted); margin-top: 2px; }
.xe4-ana-verdict { font-size: 11px; color: var(--xe-sub); }
.xe4-ana-list .xe4-detail { align-self: center; grid-row: span 2; }

/* ---------- 理财列表 ---------- */
.xe4-toolbar { border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.xe4-filters { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.xe4-fitem { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--xe-muted); }
.xe4-fitem select { appearance: none; border-radius: 999px; border: 1px solid var(--xe-border); background: var(--xe-card-subtle); color: var(--xe-text); padding: 7px 14px; font-size: 12px; font-family: inherit; position: static; }
.xe4-fitem select option { background: #0E1A1E; color: var(--xe-text); }
.xe4-reset { appearance: none; background: transparent; border: 1px solid var(--xe-border); border-radius: 999px; color: var(--xe-sub); font: inherit; font-size: 12px; font-weight: 700; padding: 7px 14px; cursor: pointer; }
.xe4-reset:hover { color: var(--xe-accent-2); border-color: var(--xe-accent); }
.xe4-count { font-size: 12px; color: var(--xe-muted); }
.xe4-list { margin-top: 14px; display: grid; gap: 12px; }
.xe4-row { position: static; border-radius: 16px; padding: 20px; display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.xe4-row-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.xe4-row-id { min-width: 0; display: block; }
.xe4-row-title { display: inline-block; font-size: 17px; font-weight: 600; }
.xe4-asset-tag { position: static; display: inline-block; margin-left: 8px; font-size: 10px; font-weight: 700; line-height: 1.7; padding: 1px 7px; border-radius: 4px; background: rgba(52, 211, 153, .12); color: var(--xe-accent-2); white-space: nowrap; }
.xe4-row-meta { display: block; font-size: 12px; color: var(--xe-sub); margin-top: 4px; }
.xe4-row-rate .lab { display: block; font-size: 11px; color: var(--xe-muted); white-space: nowrap; }
.xe4-row-rate .val { display: block; font-size: 24px; font-weight: 900; color: var(--xe-accent-2); margin-top: 2px; white-space: nowrap; }
.xe4-row-rule .lab { display: block; font-size: 11px; color: var(--xe-muted); }
.xe4-row-rule .val { display: block; font-size: 13px; font-weight: 700; margin-top: 4px; line-height: 1.6; }
.xe4-row-rule .val i { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: var(--xe-sub); margin-top: 2px; }
.xe4-row-act { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.xe4-row-act .ok { font-size: 12px; font-weight: 700; color: var(--xe-accent-2); }
.xe4-detail { font-size: 12px; font-weight: 700; color: var(--xe-link); text-decoration: none; white-space: nowrap; position: static; }
.xe4-detail:hover { color: #8fb4ff; text-decoration: underline; }
.xe4-empty { border-radius: 16px; padding: 20px; border: 1px dashed var(--xe-border); background: rgba(148, 163, 184, .04); font-size: 13px; color: var(--xe-sub); line-height: 1.7; }
.xe4-empty b { color: var(--xe-text); }

/* ---------- 响应式 ---------- */
@media (min-width: 640px) {
  .xe4-ana-grid { grid-template-columns: repeat(2, 1fr); }
  .xe4-opp-grid { grid-template-columns: repeat(2, 1fr); }
  .xe4-exgrid { grid-template-columns: repeat(2, 1fr); }
  .xe4-path { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .xe4-ana-grid { grid-template-columns: repeat(2, 1fr); }
  .xe4-opp-grid { grid-template-columns: repeat(4, 1fr); }
  .xe4-exgrid { grid-template-columns: repeat(4, 1fr); }
  .xe4-path { grid-template-columns: repeat(4, 1fr); }
  .xe4-row { grid-template-columns: 38fr 23fr 27fr 12fr; column-gap: 12px; align-items: center; padding: 24px 20px; }
  .xe4-row-act { flex-direction: column; align-items: flex-end; }
  .xe4-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media (max-width: 639px) {
  .xe4-wrap { padding: 0 18px; }
  .xe4-sec { margin-top: 40px; }
  .xe4-opps { margin-top: 36px; }
  .xe4-h1 { font-size: 28px; }
  .xe4-path { grid-template-columns: 1fr; }
  .xe4-path li { padding: 9px 11px; }
  .xe4-row-act { justify-content: space-between; }
}