:root{
  /* ========== 黄底墨字主题（底色 #F0B90B 币安黄） ==========
     底色是黄，所以「强调色」改用墨色：黄色叠黄色看不见。
     图片区（首屏大图 / 培养舱）仍保持深色，另在 .hero 作用域内重置变量。 */
  --gold:#1E2329;        /* 主强调（黄底上 = 墨色） */
  --gold-deep:#0B0E11;   /* 按下加深：近黑 */
  --gold-bright:#0B0E11; /* 高亮：近黑 */
  --bnb-gold:#1E2329;    /* BNB 标识金 → 墨色 */
  --bg:#F0B90B;          /* 主底色：币安黄 */
  --bg-alt:#E5AF08;      /* 交替区块：深一档黄 */
  --surface:rgba(255,255,255,.62);   /* 卡片：半透明白，叠在黄底呈奶油色 */
  --surface-2:rgba(255,255,255,.82);
  --line:rgba(30,35,41,.16);
  --line-strong:rgba(30,35,41,.30);
  --fg:#1E2329;          /* 正文：墨色 */
  --fg-mute:rgba(30,35,41,.74);
  --fg-faint:rgba(30,35,41,.52);
  --green:#1E2329;       /* 兼容旧变量名：主强调 = 墨色 */
  --blue:#8A6A00;        /* 兼容旧变量名：次强调 = 深金（编号/数值） */
  --red:#B23B33;
  --amber:#8A6A00;
  --radius:16px;
  --radius-sm:10px;
  --wrap:1320px;
}

/* 超大屏再放宽一档，避免大显示器上两侧空太多 */
@media(min-width:1600px){:root{--wrap:1460px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
svg{max-width:100%; display:block}
a{color:var(--green); text-decoration:none}
a:hover{text-decoration:underline}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em}
i{font-style:italic}
strong{color:#0B0E11; font-weight:600}
em{font-style:normal}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px}

/* 背景质感 */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background:
    radial-gradient(900px 500px at 78% -8%, rgba(255,255,255,.30), transparent 70%),
    radial-gradient(760px 460px at 8% 12%, rgba(255,255,255,.20), transparent 70%);
}
.nav,.hero,.section,.footer{position:relative; z-index:1}

/* ---------- 导航 ---------- */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(240,185,11,.80);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex; align-items:center; gap:20px; height:66px}
.brand{display:flex; align-items:center; gap:11px; color:var(--fg); flex:none}
.brand:hover{text-decoration:none}
.brand-mark{width:31px; height:31px; flex:none; border-radius:50%; object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.3,1), filter .45s ease}
.brand:hover .brand-mark{transform:rotate(-14deg) scale(1.06); filter:drop-shadow(0 0 9px rgba(30,35,41,.35))}
.brand-text{
  font-weight:700; font-size:16.5px; letter-spacing:.05em;
  background:linear-gradient(100deg,#0B0E11 30%, rgba(30,35,41,.86) 70%, rgba(30,35,41,.9));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.nav-links{display:flex; gap:22px; margin-left:6px; font-size:14px}
.nav-links a{color:var(--fg-mute)}
.nav-links a:hover{color:var(--gold-bright); text-decoration:none}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 17px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; font-family:inherit;
  border:1px solid var(--line-strong); background:transparent; color:var(--fg);
  cursor:pointer; transition:.18s ease; white-space:nowrap;
}
/* .btn 设了 display，会盖掉 hidden 属性的浏览器默认值；
   没有这条，「签名登录」按钮在未连接钱包时也会露出来。 */
.btn[hidden]{display:none}
.btn:hover{border-color:var(--green); color:var(--green); text-decoration:none}
.btn-primary{background:var(--green); border-color:var(--green); color:var(--bg)}
.btn-primary:hover{background:var(--gold-bright); border-color:var(--gold-bright); color:var(--bg)}
.btn-primary:active{background:var(--gold-deep); border-color:var(--gold-deep); color:var(--bg)}
.btn-wallet .dot{width:7px; height:7px; border-radius:50%; background:var(--fg-faint); flex:none; transition:.18s}
.btn-wallet.on .dot{background:var(--green); box-shadow:0 0 0 3px rgba(30,35,41,.18)}
.btn-wallet.on{border-color:rgba(30,35,41,.40); color:var(--green)}

@media(max-width:1000px){.nav-links{display:none}}
@media(max-width:520px){.brand span{display:none}}

/* ---------- 首屏 ---------- */
.hero{padding:84px 0 76px; border-bottom:1px solid var(--line)}
.hero-grid{display:grid; grid-template-columns:1.35fr .65fr; gap:56px; align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr; gap:40px}}
.eyebrow{
  display:inline-flex; align-items:center;
  font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--green); background:rgba(240,185,11,.09);
  border:1px solid rgba(240,185,11,.22);
  padding:5px 12px; border-radius:999px; margin-bottom:24px;
}
h1{
  font-size:clamp(34px,5.4vw,58px); line-height:1.14;
  letter-spacing:-.03em; margin:0 0 22px; font-weight:600;
}
h1 em{color:var(--green)}
.lede{font-size:clamp(15px,1.7vw,17.5px); color:var(--fg-mute); max-width:64ch; margin:0 0 30px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:42px}

.hero-stats{
  display:flex; flex-wrap:wrap; gap:12px 44px; margin:0; padding-top:26px;
  border-top:1px solid var(--line);
}
.hero-stats div{margin:0}
.hero-stats dt{font-size:12.5px; color:var(--fg-faint); letter-spacing:.04em; margin-bottom:2px}
.hero-stats dd{margin:0; font-size:26px; font-weight:600; letter-spacing:-.02em; color:var(--fg)}
.hero-stats dd span{font-size:13px; color:var(--fg-faint); font-weight:400; margin-left:3px}

.hero-figure{margin:0; text-align:center}
.hero-figure svg{width:100%; max-width:300px; margin:0 auto}
.hero-figure figcaption{margin-top:8px; font-size:12.5px; color:var(--fg-faint)}

/* ---------- 区块 ---------- */
.section{padding:82px 0; border-bottom:1px solid var(--line)}
.section-alt{background:var(--bg-alt)}
.kicker{
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--blue); margin:0 0 12px;
}
h2{font-size:clamp(23px,3.1vw,33px); line-height:1.25; letter-spacing:-.022em; margin:0 0 16px; font-weight:600}
.section-lede{color:var(--fg-mute); max-width:82ch; margin:0 0 38px; font-size:15.5px}
.section-foot{color:var(--fg-faint); max-width:82ch; margin:32px 0 0; font-size:14.5px}

/* 双栏面板 */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}
.panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px;
}
.panel h3{font-size:15px; margin:0 0 14px; font-weight:600; color:var(--fg); letter-spacing:.01em}
ul.plain{margin:0; padding-left:0; list-style:none}
ul.plain li{
  position:relative; padding-left:20px; margin-bottom:10px;
  color:var(--fg-mute); font-size:14.5px; line-height:1.65;
}
ul.plain li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--green); opacity:.55;
}
ul.plain li:last-child{margin-bottom:0}

.note{
  display:grid; grid-template-columns:110px 1fr; gap:20px;
  margin-top:26px; padding:22px 26px;
  background:rgba(255,255,255,.52);
  border:1px solid rgba(30,35,41,.18);
  border-radius:var(--radius);
}
@media(max-width:640px){.note{grid-template-columns:1fr; gap:10px}}
.note-tag{
  font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--amber);
  text-transform:uppercase; padding-top:2px;
}
.note p{margin:0; color:var(--fg-mute); font-size:14.5px}

/* ---------- 图表 ---------- */
.chart-shell{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px 20px;
}
.chart-legend{display:flex; flex-wrap:wrap; gap:20px; margin-bottom:16px; font-size:13px; color:var(--fg-mute)}
.chart-legend span{display:flex; align-items:center; gap:7px}
.sw{width:16px; height:3px; border-radius:2px; flex:none}
.sw-a{background:var(--fg-faint)}
.sw-b{background:var(--green)}
.sw-c{width:14px; height:10px; border-radius:2px; background:rgba(30,35,41,.18); border:1px solid rgba(30,35,41,.45)}
.chart-box{position:relative; width:100%; height:340px}
@media(max-width:640px){.chart-box{height:280px}}
.chart-note{margin:14px 0 0; font-size:12.5px; color:var(--fg-faint)}

/* ---------- 时间线 ---------- */
.timeline{list-style:none; margin:0; padding:0; position:relative}
.timeline::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px;
  background:linear-gradient(180deg,var(--green),var(--blue),transparent);
  opacity:.35;
}
.timeline li{
  display:grid; grid-template-columns:104px 1fr; gap:26px;
  padding:0 0 30px 26px; position:relative;
}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:""; position:absolute; left:-3.5px; top:9px;
  width:8px; height:8px; border-radius:50%;
  background:var(--bg); border:1.5px solid var(--green);
}
.tl-year{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:14px; color:var(--green); font-weight:500; padding-top:1px;
}
.tl-body h3{font-size:16.5px; margin:0 0 6px; font-weight:600}
.tl-body p{margin:0; color:var(--fg-mute); font-size:14.5px; max-width:80ch}
@media(max-width:600px){
  .timeline li{grid-template-columns:1fr; gap:6px; padding-left:22px}
}

/* ---------- 卡片 ---------- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:18px}
.cards-3{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 26px 24px;
  transition:border-color .2s ease, transform .2s ease;
}
.card:hover{border-color:var(--line-strong); transform:translateY(-2px)}
.card-num{
  display:block; font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
  color:var(--blue); letter-spacing:.08em; margin-bottom:12px;
}
.card h3{font-size:16.5px; margin:0 0 10px; font-weight:600; line-height:1.4}
.card p{margin:0; color:var(--fg-mute); font-size:14.5px; line-height:1.7}
.card-w3{border-color:rgba(30,35,41,.24); background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 60%),var(--surface)}
.card-w3 .card-num{display:none}

/* ---------- 澄清区 ---------- */
.clarify{display:grid; grid-template-columns:300px 1fr; gap:48px}
@media(max-width:860px){.clarify{grid-template-columns:1fr; gap:22px}}
.clarify-side h2{margin-bottom:0}
.clarify-body p{margin:0 0 16px; color:var(--fg-mute); font-size:15.5px}
.clarify-body p:last-child{margin-bottom:0}
.clarify-body em{
  color:var(--fg); font-style:italic;
  border-left:2px solid var(--green); padding-left:14px; display:block; margin:20px 0;
}
.clarify-caveat{
  padding-top:16px; border-top:1px solid var(--line);
  color:var(--fg-faint) !important; font-size:14px !important;
}

/* ---------- 数据格 ---------- */
.stats-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:18px}
.stat{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 24px 22px; display:flex; flex-direction:column; gap:8px;
}
.stat-v{font-size:32px; font-weight:600; letter-spacing:-.025em; color:var(--green); line-height:1.05}
.stat-v span{font-size:15px; color:var(--fg-mute); font-weight:400; margin-left:2px}
.stat-k{font-size:13.5px; color:var(--fg-mute); line-height:1.55}

/* ---------- Web3 面板 ---------- */
.w3-panel{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  margin-top:22px; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
@media(max-width:820px){.w3-panel{grid-template-columns:1fr}}
.w3-col{padding:28px 30px}
.w3-col:first-child{border-right:1px solid var(--line)}
@media(max-width:820px){
  .w3-col:first-child{border-right:none; border-bottom:1px solid var(--line)}
}
.w3-col h3{font-size:15px; margin:0 0 16px; font-weight:600}
.kv{margin:0}
.kv div{display:flex; gap:16px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.kv div:last-child{border-bottom:none}
.kv dt{color:var(--fg-faint); flex:none; width:84px}
.kv dd{margin:0; color:var(--fg-mute); word-break:break-all}
.kv dd code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; color:var(--fg);
}
.kv dd code[title]{cursor:pointer}
.kv dd code[title]:hover{color:var(--green)}
.w3-hint{margin:0; font-size:14px; color:var(--fg-mute)}
.wallet-readout{margin-top:6px}
.wr-row{display:flex; gap:14px; padding:8px 0; border-bottom:1px solid var(--line); font-size:13.5px}
.wr-row:last-child{border-bottom:none}
.wr-row span{color:var(--fg-faint); flex:none; width:56px}
.wr-row code{color:var(--green); word-break:break-all}

/* ---------- 链上版本历史 ---------- */
.chain-history{
  margin:32px 0 0; padding:26px 28px;
  border-radius:var(--radius); border:1px solid var(--line);
  background:rgba(255,255,255,.45);
}
.chain-history h3{margin:0 0 18px; font-size:15px; font-weight:600; letter-spacing:.01em}
.chain-history-list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:8px;
}
.chain-history-list li{
  display:grid; grid-template-columns:44px 1fr auto;
  align-items:center; gap:14px;
  padding:11px 14px; border-radius:var(--radius-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.55);
}
.ch-ver{
  font-size:12px; font-weight:600; letter-spacing:.03em;
  color:var(--green);
}
.ch-body{min-width:0}
.ch-hash{
  display:block; font-size:12.5px; color:var(--fg);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ch-meta{display:block; margin-top:3px; font-size:11.5px; color:var(--fg-faint)}
.ch-link{font-size:12px; color:var(--fg-mute); white-space:nowrap}
.ch-link:hover{color:var(--green); text-decoration:none}
.chain-history-empty{margin:0; font-size:13.5px; color:var(--fg-faint)}
.chain-history-empty[hidden]{display:none}

@media(max-width:640px){
  .chain-history{padding:20px 18px}
  .chain-history-list li{grid-template-columns:38px 1fr; gap:10px}
  .ch-link{grid-column:2; justify-self:start}
}

/* ---------- 参考文献 ---------- */
.refs{margin:0; padding-left:0; list-style:none; counter-reset:r; max-width:104ch}
.refs li{
  counter-increment:r; position:relative; padding:13px 0 13px 44px;
  border-bottom:1px solid var(--line);
  font-size:14px; color:var(--fg-mute); line-height:1.7;
}
.refs li:last-child{border-bottom:none}
.refs li::before{
  content:"[" counter(r) "]"; position:absolute; left:0; top:13px;
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px; color:var(--blue);
}

/* ---------- 页脚 ---------- */
.footer{padding:52px 0 72px; background:var(--bg-alt)}
.footer-inner{display:flex; flex-wrap:wrap; gap:28px; justify-content:space-between; align-items:flex-start}
.footer-title{margin:0 0 8px; font-size:14.5px; font-weight:600; color:var(--fg)}
.footer-note{margin:0; max-width:70ch; font-size:13px; color:var(--fg-faint); line-height:1.7}
.footer-links{display:flex; gap:22px; font-size:13.5px; flex-wrap:wrap}
.footer-links a{color:var(--fg-mute)}
.footer-links a:hover{color:var(--green); text-decoration:none}

/* ---------- 滚动进场 ---------- */
.reveal-ready .card,
.reveal-ready .panel,
.reveal-ready .stat,
.reveal-ready .timeline li,
.reveal-ready .refs li,
.reveal-ready .chart-shell,
.reveal-ready .fig,
.reveal-ready .tldr-item,
.reveal-ready .check-item,
.reveal-ready .debate-col,
.reveal-ready .table-shell,
.reveal-ready .abstract-block,
.reveal-ready .page-nav-item{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease, transform .55s ease;
}
.reveal-ready .is-in,
.reveal-ready li.is-in{opacity:1; transform:none}

@media (prefers-reduced-motion: reduce){
  .reveal-ready .card,
  .reveal-ready .panel,
  .reveal-ready .stat,
  .reveal-ready .timeline li,
  .reveal-ready .refs li,
  .reveal-ready .chart-shell,
  .reveal-ready .fig,
  .reveal-ready .tldr-item,
  .reveal-ready .check-item,
  .reveal-ready .debate-col,
  .reveal-ready .table-shell,
  .reveal-ready .abstract-block,
  .reveal-ready .page-nav-item{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
  .page-hero .crumbs,.page-hero h1,.page-hero .page-lede{animation:none; opacity:1; transform:none}
}

/* ---------- 图像版式 ---------- */
/* 全站插图统一 3:2（源图已按 3:2 裁切），object-fit 兜底防止比例漂移 */
.hero-figure img{
  width:100%; max-width:100%; margin:0 auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:var(--radius);
  border:1px solid var(--line-strong);
  box-shadow:0 24px 60px rgba(30,35,41,.26);
}
.fig{margin:0 0 34px}
.fig img{
  width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:0 18px 46px rgba(30,35,41,.22);
}
.fig figcaption{
  margin-top:10px; font-size:13px; color:var(--fg-faint);
  line-height:1.65; max-width:88ch;
}
.fig-narrow{max-width:560px; margin-left:auto; margin-right:auto}
.img-duo{display:grid; grid-template-columns:1fr 1fr; gap:22px}
@media(max-width:800px){.img-duo{grid-template-columns:1fr}}

/* ---------- 一分钟摘要 ---------- */
.tldr{display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--line)}
.tldr-item{
  display:grid; grid-template-columns:64px 1fr; gap:22px;
  padding:22px 4px; border-bottom:1px solid var(--line);
}
.tldr-n{
  font-family:ui-monospace,Menlo,monospace; font-size:13px;
  color:var(--blue); letter-spacing:.08em; padding-top:3px;
}
.tldr-item h3{font-size:16.5px; margin:0 0 7px; font-weight:600}
.tldr-item p{margin:0; color:var(--fg-mute); font-size:14.5px; max-width:88ch}
@media(max-width:560px){.tldr-item{grid-template-columns:1fr; gap:6px}}

.abstract-block{
  margin-top:44px; padding:26px 30px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius);
}
.abstract-block h3{
  margin:0 0 12px; font-size:13px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-faint);
}
.abstract-block p{margin:0; font-size:14.5px; color:var(--fg-mute); line-height:1.8}

/* ---------- 宽面板 ---------- */
.panel-wide{margin-top:20px}
.panel-wide p{margin:0; color:var(--fg-mute); font-size:14.5px; line-height:1.75}

/* ---------- 争议双栏 ---------- */
.debate{display:grid; grid-template-columns:1fr 1fr; gap:20px}
@media(max-width:800px){.debate{grid-template-columns:1fr}}
.debate-col{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 28px;
}
.debate-a{border-color:rgba(30,35,41,.28)}
.debate-b{border-color:rgba(138,106,0,.30)}
.debate-tag{
  display:inline-block; font-size:11.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:14px;
}
.debate-a .debate-tag{color:var(--green); background:rgba(255,255,255,.55); border:1px solid rgba(30,35,41,.22)}
.debate-b .debate-tag{color:var(--blue); background:rgba(255,255,255,.55); border:1px solid rgba(138,106,0,.28)}
.debate-col h3{font-size:17px; margin:0 0 14px; font-weight:600}

/* ---------- 数据表 ---------- */
.table-shell{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow-x:auto;
}
.data-table{width:100%; border-collapse:collapse; min-width:560px}
.data-table th,.data-table td{
  text-align:left; padding:12px 20px;
  border-bottom:1px solid var(--line); font-size:14px;
}
.data-table th{
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-faint); font-weight:600; padding-top:16px;
}
.data-table td:first-child{color:var(--fg)}
.data-table td:nth-child(2){color:var(--green); font-weight:500; white-space:nowrap}
.data-table td:last-child{
  font-family:ui-monospace,Menlo,monospace; font-size:12.5px;
  color:var(--blue); white-space:nowrap;
}
.data-table tr:last-child td{border-bottom:none}

/* ---------- 辨伪清单 ---------- */
.checklist{display:grid; grid-template-columns:1fr 1fr; gap:18px}
@media(max-width:800px){.checklist{grid-template-columns:1fr}}
.check-item{
  display:grid; grid-template-columns:44px 1fr; gap:16px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px;
}
.check-mark{
  width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  color:#e2544e; background:rgba(226,84,78,.1);
  border:1px solid rgba(226,84,78,.3); margin-top:2px;
}
.check-item h3{font-size:15.5px; margin:0 0 8px; font-weight:600}
.check-item p{margin:0; color:var(--fg-mute); font-size:14px; line-height:1.7}

/* ---------- 术语表 ---------- */
.glossary{margin:0}
.glossary div{
  display:grid; grid-template-columns:220px 1fr; gap:26px;
  padding:16px 4px; border-bottom:1px solid var(--line);
}
.glossary div:last-child{border-bottom:none}
.glossary dt{font-size:14.5px; font-weight:600; color:var(--fg)}
.glossary dd{margin:0; font-size:14px; color:var(--fg-mute); line-height:1.75}
@media(max-width:640px){
  .glossary div{grid-template-columns:1fr; gap:4px}
}

/* ---------- AI 图像声明 ---------- */
.ai-note{background:rgba(255,255,255,.45); border-color:rgba(30,35,41,.20)}
.ai-note .note-tag{color:var(--blue)}

/* ---------- 语言切换（折叠下拉） ---------- */
.lang-switch{position:relative; flex:none; margin-left:auto}
.lang-toggle{
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-size:12.5px; line-height:1; cursor:pointer;
  padding:8px 12px; border-radius:999px; color:var(--fg-mute);
  background:rgba(255,255,255,.55); border:1px solid var(--line);
  transition:.18s ease; white-space:nowrap;
}
.lang-toggle:hover{color:var(--fg); border-color:var(--line-strong)}
.lang-toggle[aria-expanded="true"]{color:var(--fg); border-color:rgba(30,35,41,.42)}
.lang-globe{width:14px; height:14px; flex:none; opacity:.85}
.lang-chev{width:9px; height:6px; flex:none; opacity:.7; transition:transform .2s ease}
.lang-toggle[aria-expanded="true"] .lang-chev{transform:rotate(180deg)}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; z-index:60;
  min-width:148px; padding:6px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid var(--line-strong); border-radius:14px;
  box-shadow:0 18px 44px rgba(30,35,41,.28);
  opacity:0; transform:translateY(-6px) scale(.98); pointer-events:none;
  transition:opacity .18s ease, transform .18s cubic-bezier(.2,.7,.3,1);
}
.lang-switch.is-open .lang-menu{opacity:1; transform:none; pointer-events:auto}
.lang-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; font-family:inherit; font-size:13px; line-height:1;
  padding:9px 12px; border-radius:9px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--fg-mute);
  transition:.14s ease; text-align:left; white-space:nowrap;
}
.lang-btn:hover{color:var(--fg); background:rgba(30,35,41,.07); text-decoration:none}
.lang-btn.is-active{
  color:var(--green); font-weight:600; background:rgba(30,35,41,.08);
}
.lang-btn.is-active::after{content:""; width:6px; height:6px; border-radius:50%; background:var(--green); flex:none}
@media(max-width:520px){
  .lang-toggle{padding:7px 10px; font-size:12px}
  .lang-menu{min-width:136px}
}

/* ---------- 养成模块 ---------- */
.farm{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-bottom:22px}
@media(max-width:860px){.farm{grid-template-columns:1fr}}

.farm-vial{
  position:relative;
  /* 培养舱是「深色玻璃器皿」：黄底主题下必须自带深底，
     否则画布里的浅色果蝇会失去对比。内部文字同时保持浅色。 */
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 42%, rgba(120,96,60,.05)),
    linear-gradient(180deg,#242a33,#161b21);
  border:1px solid rgba(255,255,255,.22);
  border-radius:26px 26px 18px 18px;
  min-height:340px; overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px rgba(30,35,41,.35);
  --fg:#eef1f5; --fg-mute:rgba(255,255,255,.72); --fg-faint:rgba(255,255,255,.5);
  --green:#FCD535; --blue:#FCD535; --line:rgba(255,255,255,.12); --line-strong:rgba(255,255,255,.2);
}
.farm-vial::after{
  content:""; position:absolute; left:12px; top:14px; bottom:14px; width:26px;
  background:linear-gradient(90deg, rgba(255,255,255,.10), transparent);
  border-radius:999px; pointer-events:none;
}
#flyCanvas{display:block; width:100%; height:340px}
@media(max-width:560px){#flyCanvas{height:280px} .farm-vial{min-height:280px}}

.vial-readout{
  position:absolute; left:22px; bottom:16px; z-index:2;
  display:flex; align-items:baseline; gap:10px;
  font-size:12.5px; color:var(--fg-faint); letter-spacing:.03em;
}
.vial-readout strong{
  font-size:26px; font-weight:600; letter-spacing:-.02em;
  color:var(--green); font-family:ui-monospace,Menlo,monospace;
}

.farm-side{display:flex; flex-direction:column; gap:18px}
.farm-stats{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.farm-stat{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:14px 16px;
  display:flex; flex-direction:column; gap:4px;
}
.farm-stat span{font-size:12.5px; color:var(--fg-faint)}
.farm-stat strong{
  font-size:19px; font-weight:600; color:var(--fg);
  font-family:ui-monospace,Menlo,monospace; letter-spacing:-.01em;
}
.farm-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.farm-actions .btn{justify-content:center; padding:11px 14px}
@media(max-width:480px){.farm-actions{grid-template-columns:1fr}}
.btn.is-done{opacity:.55; border-style:dashed}

.farm-msg{
  margin:0; padding:12px 16px; font-size:13.5px; line-height:1.65;
  color:var(--fg-mute); background:rgba(255,255,255,.50);
  border:1px solid rgba(30,35,41,.18); border-radius:var(--radius-sm);
  min-height:44px;
}
.farm-meta{margin:0; font-size:13.5px; color:var(--fg-faint); line-height:1.7}

#mutationList li, #milestoneList li{font-size:14px}
#mutationList code{
  color:var(--blue); font-size:12px; padding-left:4px;
}
.mut-lock{
  display:inline-block; font-size:11px; letter-spacing:.06em;
  color:var(--fg-faint); background:rgba(255,255,255,.55);
  border:1px solid var(--line); border-radius:4px;
  padding:1px 6px; margin-right:4px;
}
.ms-done{
  display:inline-block; font-size:11px; letter-spacing:.06em;
  color:var(--green); background:rgba(30,35,41,.08);
  border:1px solid rgba(30,35,41,.22); border-radius:4px;
  padding:1px 6px; margin-right:4px;
}

/* ============================================================
   v4 · 多页站点 + 交互升级
   ============================================================ */

/* ---------- 阅读进度条 ---------- */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:transparent; pointer-events:none;
}
.scroll-progress span{
  display:block; height:100%; width:0;
  background:linear-gradient(90deg, var(--green), var(--blue));
  box-shadow:0 0 12px rgba(30,35,41,.30);
  transform-origin:0 50%;
  will-change:width;
}

/* ---------- 导航：滚动态 + 当前页 ---------- */
.nav{transition:box-shadow .25s ease, background .25s ease}
.nav.is-scrolled{
  background:rgba(240,185,11,.95);
  box-shadow:0 8px 30px rgba(30,35,41,.18);
}
.nav-links a{position:relative; padding:4px 0; transition:color .18s ease}
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:linear-gradient(90deg,var(--green),var(--blue));
  border-radius:2px; transition:right .22s cubic-bezier(.4,0,.2,1);
}
.nav-links a:hover{text-decoration:none}
.nav-links a:hover::after{right:0}
/* 当前页：只保留高亮字色，不再常驻下划线（下划线仅鼠标悬停时出现） */
.nav-links a.is-here{color:var(--fg-mute)}
.nav-links a.is-here::after{right:100%}
.nav-links a.is-here:hover::after{right:0}

/* ---------- 按钮：涟漪 + 主按钮光泽 ---------- */
.btn{position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent}
.btn .ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,.35); pointer-events:none;
  animation:ripple .6s ease-out forwards;
}
@keyframes ripple{to{transform:scale(3); opacity:0}}
.btn-primary{overflow:hidden}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.btn-primary:hover::before{transform:translateX(120%)}
.btn:active{transform:translateY(1px)}

/* ---------- 首屏重排 ---------- */
.hero{position:relative; padding:72px 0 60px; border-bottom:1px solid var(--line); overflow:hidden}
.hero-field{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; opacity:.85;
}

/* ---------- 全站飞舞的果蝇层 ---------- */
/* 固定在视口之上，压过正文（z-index 2 > 正文 1）、但在导航（20）之下，不挡任何交互 */
.fly-swarm{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
  opacity:.82;
}
.hero-grid{position:relative; z-index:1}
.hero-grid{grid-template-columns:1fr 1.05fr; gap:52px; align-items:center}

h1{
  font-size:clamp(38px,6vw,68px); line-height:1.08; letter-spacing:-.035em;
  margin:0 0 24px; font-weight:700;
  background:linear-gradient(180deg,#101720 55%, rgba(30,35,41,.76));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
h1 em{
  color:transparent;
  background:linear-gradient(90deg,#0B0E11,#8A6A00 60%,#0B0E11);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 首屏图：玻璃外框 + 呼吸光晕 */
.hero-figure{position:relative; margin:0}
.hero-frame{
  position:relative; border-radius:22px; overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.1);
  transform:perspective(1100px) rotateY(-4deg);
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.hero-figure:hover .hero-frame{transform:perspective(1100px) rotateY(0deg) translateY(-4px)}
.hero-frame img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.hero-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(200deg, rgba(255,255,255,.14), transparent 32%),
             linear-gradient(0deg, rgba(24,29,35,.4), transparent 45%);
}
.hero-shine{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(340px 220px at var(--mx,70%) var(--my,20%), rgba(255,255,255,.14), transparent 65%);
  transition:opacity .3s; opacity:0;
}
.hero-figure:hover .hero-shine{opacity:1}
.hero-figure figcaption{margin-top:10px; font-size:11px; color:var(--fg-faint); text-align:center}

/* 首屏数据浮标：压在主视觉图底部的玻璃数据带 */
.hero-stats--overlay{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  padding:10px 14px; margin:0; border-top:none;
  border-radius:13px;
  background:rgba(10,13,18,.58); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 12px 34px rgba(0,0,0,.42);
}
.hero-stats--overlay dt{font-size:11.5px; margin-bottom:1px; white-space:nowrap}
.hero-stats--overlay dd{font-size:18px; white-space:nowrap}
@media(max-width:1100px){
  /* 窄屏时移出图外，完整展示图片 */
  .hero-stats--overlay{
    position:static; margin-top:10px;
    grid-template-columns:repeat(2,1fr); gap:9px 14px;
  }
  .hero-stats--overlay dd{font-size:18px}
}
@media(max-width:560px){
  .hero-stats--overlay{padding:10px 12px; gap:7px 10px}
  .hero-stats--overlay dt{font-size:10.5px}
  .hero-stats--overlay dd{font-size:15px}
}

/* 向下滚动提示 */
.hero-cue{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:2; width:26px; height:42px; border:1.5px solid var(--line-strong);
  border-radius:999px; display:flex; justify-content:center; padding-top:8px;
  opacity:.6; transition:opacity .2s;
}
.hero-cue:hover{opacity:1; text-decoration:none}
.hero-cue::before{
  content:""; width:4px; height:9px; border-radius:2px;
  background:var(--green); animation:cueDrop 1.8s ease-in-out infinite;
}
@keyframes cueDrop{
  0%{transform:translateY(0); opacity:1}
  70%{transform:translateY(14px); opacity:0}
  100%{transform:translateY(0); opacity:0}
}
@media(max-width:900px){.hero-cue{display:none}}

/* ---------- 首屏进场（stagger） ---------- */
.hero .eyebrow,.hero h1,.hero .lede,.hero .hero-cta,.hero .hero-stats,.hero .hero-figure{
  opacity:0; transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
body.is-ready .hero .eyebrow{opacity:1; transform:none; transition-delay:.05s}
body.is-ready .hero h1{opacity:1; transform:none; transition-delay:.14s}
body.is-ready .hero .lede{opacity:1; transform:none; transition-delay:.24s}
body.is-ready .hero .hero-cta{opacity:1; transform:none; transition-delay:.34s}
body.is-ready .hero .hero-stats{opacity:1; transform:none; transition-delay:.44s}
body.is-ready .hero .hero-figure{opacity:1; transform:none; transition-delay:.3s}

/* ---------- 数字滚动 ---------- */
[data-count]{font-variant-numeric:tabular-nums}

/* ---------- 二级页首屏 ---------- */
.page-hero{
  position:relative; padding:78px 0 64px; border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 300px at 82% -10%, rgba(255,255,255,.30), transparent 70%),
    radial-gradient(560px 280px at 10% 20%, rgba(255,255,255,.20), transparent 70%);
  overflow:hidden;
}
.crumbs{
  display:flex; align-items:center; gap:10px;
  font-size:13px; margin-bottom:18px; color:var(--fg-faint);
}
.crumbs a{color:var(--fg-faint); transition:color .18s}
.crumbs a:hover{color:var(--green); text-decoration:none}
.crumb-sep{opacity:.5}
.crumb-here{color:var(--fg)}
.page-hero h1{
  font-size:clamp(34px,5vw,56px); margin:0 0 16px; letter-spacing:-.03em;
}
.page-lede{
  color:var(--fg-mute); font-size:clamp(15px,1.8vw,17px);
  max-width:74ch; margin:0; line-height:1.8;
}

/* ---------- 二级页首屏进场 ---------- */
.page-hero .crumbs,.page-hero h1,.page-hero .page-lede{
  opacity:0; transform:translateY(18px);
  animation:pageIn .7s cubic-bezier(.2,.7,.3,1) forwards;
}
.page-hero .crumbs{animation-delay:.05s}
.page-hero h1{animation-delay:.14s}
.page-hero .page-lede{animation-delay:.24s}
@keyframes pageIn{to{opacity:1; transform:none}}

/* ---------- 页间导航（上一篇 / 下一篇） ---------- */
.page-nav{padding:44px 0 68px}
/* 首页底部：末段与 page-nav、页脚之间不再用横线分割，避免割裂感 */
[data-page="home"] #vision.section{border-bottom:none}
.page-nav-inner{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.page-nav-inner:has(> :only-child){grid-template-columns:1fr}
.page-nav-item{
  display:flex; flex-direction:column; gap:6px;
  padding:20px 24px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--line);
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.page-nav-item:hover{
  text-decoration:none; border-color:rgba(30,35,41,.42);
  transform:translateY(-2px); background:var(--surface-2);
}
.page-nav-item.next{text-align:right}
.page-nav-dir{
  font-size:12px; letter-spacing:.08em; color:var(--fg-faint); text-transform:uppercase;
}
.page-nav-item strong{font-size:16px; color:var(--fg); font-weight:600}
.page-nav-item.next strong{color:var(--green)}
@media(max-width:640px){
  .page-nav-inner{grid-template-columns:1fr}
  .page-nav-item.next{text-align:left}
}

/* ---------- 页面转场 ---------- */
body.is-leaving{opacity:0; transform:translateY(-8px); transition:opacity .22s ease, transform .22s ease}
body{transition:opacity .22s ease}

/* ---------- 卡片 3D tilt ---------- */
[data-tilt]{transform-style:preserve-3d; will-change:transform}
[data-tilt] > *{transform:translateZ(0)}

/* ---------- 交互降级 ---------- */
@media (prefers-reduced-motion: reduce){
  .hero-field{display:none}
  .fly-swarm{display:none}
  .hero .eyebrow,.hero h1,.hero .lede,.hero .hero-cta,.hero .hero-stats,.hero .hero-figure{
    opacity:1; transform:none; transition:none;
  }
  .hero-frame{transform:none}
  .btn-primary::before{display:none}
  .hero-cue::before{animation:none}
  .btn .ripple{display:none}
  body.is-leaving{opacity:1; transform:none}
  .scroll-progress span{transition:none}
}

/* ============================================================
   公益主线新增组件（愿景 / 数据条 / 领养台 / 资金去向 / 科研航线）
   ============================================================ */

/* ---------- 首屏：愿景版 ---------- */
.hero--vision .hero-copy{max-width:540px; justify-self:start; text-align:left}
.hero--vision h1{font-size:clamp(34px,4.6vw,58px); line-height:1.1; letter-spacing:-.03em; margin:0 0 20px}
.hero--vision .lede--sub{margin-top:14px; color:var(--fg-mute)}

/* ---------- 数据条 ---------- */
.section--statbar{padding-top:0; padding-bottom:34px}
.statbar{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden;
}
.statbar>div{background:var(--surface); padding:22px 24px}
.statbar dt{font-size:12.5px; color:var(--fg-faint); letter-spacing:.05em; margin-bottom:6px}
.statbar dd{margin:0; font-size:30px; font-weight:600; letter-spacing:-.03em; color:var(--green); line-height:1.1}
.statbar dd span{font-size:14px; color:var(--fg-mute); font-weight:400; margin-left:3px}
.statbar-note{margin:16px 0 0; font-size:13.5px; color:var(--fg-faint)}

/* ---------- 领养台 ---------- */
.adopt-grid{display:grid; counter-reset:adoptstep; grid-template-columns:1fr 1fr; gap:20px}
.adopt-panel{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 26px 24px;
}
.adopt-panel--wide{grid-column:1 / -1}
.adopt-step{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:600; color:var(--fg); margin:0 0 14px;
}
.adopt-step{counter-increment:adoptstep}
/* 编号用 CSS 伪元素生成：它不进入 textContent，因此不会污染 i18n 键，
   也让「01/02/03」在各语言下保持同一形态。 */
.adopt-step::before{
  content:counter(adoptstep,decimal-leading-zero);
  font-size:11.5px; font-weight:600; letter-spacing:.06em;
  color:var(--green); background:rgba(30,35,41,.08);
  border:1px solid rgba(30,35,41,.22);
  border-radius:6px; padding:2px 7px; flex:none;
}
.adopt-hint{font-size:13.5px; color:var(--fg-mute); margin:0 0 16px; line-height:1.65}

.adopt-wallets{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.wallet-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-size:12.5px; padding:5px 11px; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--fg-faint);
  background:var(--surface-2); cursor:pointer;
  transition:border-color .18s, background .18s, color .18s;
}
.wallet-chip img{border-radius:4px; flex:none}
.wallet-chip.is-found{
  color:var(--green); border-color:rgba(30,35,41,.40);
  background:rgba(255,255,255,.60);
}
.wallet-chip.is-found:hover{
  border-color:var(--fg); background:#fff;
}

.btn-block{width:100%; justify-content:center; text-align:center}

.adopt-readout{margin-top:18px; padding-top:16px; border-top:1px solid var(--line)}
.adopt-readout .wr-row{
  display:flex; gap:14px; align-items:baseline; padding:7px 0;
  font-size:13px;
}
.adopt-readout .wr-row span{color:var(--fg-faint); flex:none; width:52px}
.adopt-readout .wr-row code{color:var(--fg-mute); word-break:break-all}

.adopt-warn{
  margin:16px 0 0; padding:11px 14px; border-radius:var(--radius-sm);
  font-size:13px; color:var(--amber);
  background:rgba(255,255,255,.55); border:1px solid rgba(138,106,0,.35);
}

.adopt-field{display:block; margin-bottom:16px}
.adopt-field>span{display:block; font-size:13px; color:var(--fg-mute); margin-bottom:7px}
.adopt-field input,
.adopt-field select{
  width:100%; padding:11px 13px; font:inherit; font-size:14px;
  color:var(--fg); background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
}
.adopt-field input:focus,
.adopt-field select:focus{outline:none; border-color:var(--green)}
.adopt-field input::placeholder{color:var(--fg-faint)}

.tier-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px}
.tier{
  display:flex; flex-direction:column; gap:6px; text-align:left;
  padding:16px 16px 15px; cursor:pointer; font:inherit;
  background:var(--surface-2); color:var(--fg);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  transition:border-color .18s, background .18s, transform .18s;
}
.tier:hover{border-color:var(--line-strong); background:rgba(255,255,255,.92)}
.tier.is-active{
  border-color:var(--green); background:rgba(255,255,255,.80);
  box-shadow:0 0 0 1px rgba(30,35,41,.25) inset;
}
.tier-name{font-size:14.5px; font-weight:600; color:var(--fg)}
.tier.is-active .tier-name{color:var(--green)}
.tier-price{
  font-size:19px; font-weight:600; color:var(--fg);
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.tier-price i{font-size:11.5px; font-weight:500; font-style:normal; color:var(--fg-faint); letter-spacing:.04em}
.tier.is-active .tier-price{color:var(--green)}
.tier-desc{font-size:12.5px; color:var(--fg-faint); line-height:1.5}

/* ---------- 成长机制 ---------- */
.mech-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:22px 0 0}
.mech-n{
  display:block; font-size:11.5px; font-weight:600; letter-spacing:.08em;
  color:var(--green); margin-bottom:8px;
}
.mech h4{margin:0 0 8px; font-size:14.5px; color:var(--fg)}
.mech p{margin:0; font-size:13px; color:var(--fg-mute); line-height:1.65}
.mech-note{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:13px; color:var(--fg-faint); line-height:1.7;
}

/* ---------- 一句话说清 ---------- */
.section--pitch{padding:54px 0}
.pitch{max-width:900px; margin:0 auto}
.pitch-line{
  font-size:17.5px; color:var(--fg-mute); line-height:1.85;
  margin:0 0 20px; padding-left:20px; border-left:2px solid var(--line-strong);
}
.pitch-line:last-child{margin-bottom:0}
.pitch-line strong{color:var(--fg)}

/* ---------- 慈善计划 ---------- */
.charity-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
.charity-grid .panel p{margin:0 0 16px; font-size:14px; color:var(--fg-mute); line-height:1.7}
.charity-grid .kv dd{font-size:13px; color:var(--fg)}

/* ---------- 资金去向·说明补充 ---------- */
.panel-note{
  margin:14px 0 0 !important; padding-top:14px; border-top:1px dashed var(--line);
  font-size:12.5px !important; color:var(--fg-faint) !important; line-height:1.65;
}
/* 必须说明：用警示色区分「事实澄清」与普通正文 */
.note--alert{border-color:rgba(138,106,0,.34); background:rgba(255,255,255,.55)}
.note--alert .note-tag{color:#F3BA2F}
.note--alert code{
  font-size:12px; color:var(--fg); word-break:break-all;
  background:rgba(255,255,255,.70); padding:1px 5px; border-radius:4px;
}

/* ---------- 航线状态 ---------- */
.section-disclaim{
  max-width:82ch; margin:-22px 0 34px; padding:12px 16px;
  font-size:13.5px; color:var(--fg-mute); line-height:1.7;
  background:rgba(255,255,255,.50); border-left:2px solid var(--line-strong);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.section-disclaim strong{color:var(--fg)}
.route-status{
  margin:12px 0 0 !important; padding-top:10px; border-top:1px dashed var(--line);
  font-size:12px !important; color:var(--fg-faint) !important;
  font-variant-numeric:tabular-nums;
}

/* ---------- 数据条补充 ---------- */
.statbar-pending{margin:10px 0 0; font-size:12.5px; color:#F3BA2F; opacity:.85}

/* ---------- 响应式 ---------- */
@media(max-width:1000px){
  .adopt-grid{grid-template-columns:1fr}
  .treasury-grid{grid-template-columns:1fr}
  .charity-grid{grid-template-columns:1fr}
  .route-grid{grid-template-columns:1fr}
  .mech-grid{grid-template-columns:repeat(2,1fr)}
  .statbar{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .statbar dd{font-size:25px}
  .tier-grid{grid-template-columns:1fr}
  .mech-grid{grid-template-columns:1fr}
  .hero--vision h1{font-size:clamp(30px,8vw,40px)}
  .pitch-line{font-size:16px}
}

.adopt-status{
  margin:0 0 14px; font-size:13px; color:var(--fg-mute);
  min-height:19px;
}
.adopt-fineprint{margin:12px 0 0; font-size:12px; color:var(--fg-faint); text-align:center}

/* ---------- 资金去向 ---------- */
.treasury-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px}
.treasury-grid .panel p{margin:0 0 16px; font-size:14px; color:var(--fg-mute); line-height:1.7}
.treasury-grid .kv dd code{font-size:12px}

.note--wide{margin-bottom:20px}
.panel--ledger{margin-top:0}
.grant-list{list-style:none; margin:0; padding:0}
.grant-list li{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line); font-size:13.5px;
}
.grant-list li:last-child{border-bottom:none}
.grant-amount{font-weight:600; color:var(--green); font-variant-numeric:tabular-nums}
.grant-to{color:var(--fg-mute); word-break:break-all}
.grant-usep{grid-column:2 / -1; font-size:12.5px; color:var(--fg-faint)}
.grant-empty{margin:0; padding:18px 0 6px; font-size:13.5px; color:var(--fg-faint)}

/* ---------- 四条科研航线 ---------- */
.route-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.route-card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 26px 24px;
  display:flex; flex-direction:column;
}
.route-n{
  font-size:12px; font-weight:600; letter-spacing:.08em;
  color:var(--green); margin-bottom:12px;
}
.route-card h3{font-size:17px; margin:0 0 12px; color:var(--fg); letter-spacing:-.01em}
.route-card p{margin:0 0 12px; font-size:14px; color:var(--fg-mute); line-height:1.72}
.route-need{
  margin-top:auto !important; padding-top:12px; border-top:1px solid var(--line);
  font-size:12.5px !important; color:var(--fg-faint) !important;
}
.route-foot{margin:26px 0 0; font-size:14px; color:var(--fg-mute); line-height:1.75}

/* ---------- 社区愿景 ---------- */
.vision{max-width:820px}
.vision-body p{font-size:16px; color:var(--fg-mute); line-height:1.85; margin:0 0 18px}
.vision-line{
  font-size:20px !important; font-weight:600; color:var(--fg) !important;
  line-height:1.6 !important; padding:20px 0 20px 22px;
  border-left:3px solid var(--green);
}
.vision-sign{font-size:17px !important; color:var(--fg) !important; font-weight:600}
.vision-tail{color:var(--green) !important; font-size:15px !important}

/* ---------- 关注社区（follow） ---------- */
.follow-card{
  display:grid; grid-template-columns:128px 1fr; gap:28px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; margin-top:26px;
}
.follow-avatar{
  width:128px; height:128px; border-radius:50%;
  filter:drop-shadow(0 8px 22px rgba(30,35,41,.28));
}
.follow-avatar svg,.follow-avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover}
.follow-info h3{margin:0 0 8px; font-size:20px}
.follow-info p{margin:0 0 16px; color:var(--fg-mute); font-size:14.5px}
.follow-links{display:flex; flex-wrap:wrap; gap:10px}
@media(max-width:560px){
  .follow-card{grid-template-columns:1fr; justify-items:center; text-align:center; padding:22px}
  .follow-avatar{width:104px; height:104px}
  .follow-links{justify-content:center}
}

/* ---------- 社区愿景宣言（oath） ---------- */
.oath-sign{margin-top:18px; color:var(--bnb-gold); font-weight:600; letter-spacing:.04em}
/* 宣言配图：交替浮动，长图海报里裁出的四帧 */
.oath-fig{margin:6px 0 20px}
.oath-fig img{
  width:100%; display:block; border-radius:14px;
  border:1px solid var(--line); box-shadow:0 12px 36px rgba(30,35,41,.22);
}
.oath-fig figcaption{font-size:12.5px; color:var(--fg-faint); margin-top:9px; line-height:1.6}
.oath-fig--r{float:right; width:44%; margin:6px 0 14px 26px}
.oath-fig--l{float:left; width:52%; margin:6px 26px 14px 0}
.oath-fig--narrow{float:right; width:32%; margin:6px 0 14px 26px}
.oath-fig--wide{float:none; width:100%; margin:10px 0 24px}
.vision-body::after{content:''; display:block; clear:both}
@media(max-width:720px){
  .oath-fig--r,.oath-fig--l,.oath-fig--narrow{float:none; width:100%; margin:14px 0}
  .oath-fig{margin:14px 0}
}

/* ---------- 手机端导航：不隐藏，改为可横滑的第二行 ---------- */
@media(max-width:1000px){
  .nav-inner{flex-wrap:wrap; height:auto; padding-top:10px; row-gap:2px}
  .nav-links{
    display:flex; width:100%; order:3; margin-left:0;
    overflow-x:auto; gap:8px; padding:6px 0 12px;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{
    white-space:nowrap; font-size:13.5px; padding:7px 12px;
    border-radius:8px; background:rgba(255,255,255,.55); border:1px solid var(--line);
  }
  .nav-links a:hover{background:rgba(30,35,41,.88); color:var(--bg)}
}
@media(max-width:640px){
  .wrap{padding:0 18px}
  .hero{padding:56px 0 52px}
  .page-nav-inner{grid-template-columns:1fr; gap:10px}
  .section{padding:52px 0}
}

/* ============================================================
   首屏 v3：全幅封面 + 文字悬浮
   两层用同一张图、同一 object-position，特征完全对齐：
     · .hero-bg-blur  —— 整幅模糊压暗，托住左侧文字
     · .hero-bg-sharp —— 全幅清晰，左缘用渐变遮罩淡入模糊层
   视线落点：左边读字，右边看图；图片铺满无留白、无错位。
   ============================================================ */
.hero--vision{
  display:flex; align-items:center;
  min-height:clamp(560px, 78vh, 820px);
  padding:104px 0 92px; overflow:hidden;
}
.hero-bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.hero-bg img{
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:cover; object-position:70% 45%;   /* 焦点：金色果蝇+城市天际线 */
  user-select:none; pointer-events:none;
}
.hero-bg-blur{
  filter:blur(26px) saturate(.95) brightness(.32);
  transform:scale(1.18);           /* 放大一点，避免模糊边缘露白 */
}
/* 清晰层：全幅铺满，左侧 22%→58% 渐隐进模糊层，右侧保持通透 */
.hero-bg img.hero-bg-sharp{
  -webkit-mask-image:linear-gradient(90deg, transparent 0, transparent 22%, #000 58%);
          mask-image:linear-gradient(90deg, transparent 0, transparent 22%, #000 58%);
  filter:saturate(1.05) contrast(1.05);
}
/* 文字侧压暗 + 底部收暗，保证任何图片下都能读 */
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(24,29,35,.88) 0%, rgba(24,29,35,.72) 26%, rgba(24,29,35,.30) 50%, rgba(24,29,35,.04) 78%, rgba(24,29,35,0) 100%),
    linear-gradient(0deg, rgba(24,29,35,.82) 0%, rgba(24,29,35,.10) 44%, rgba(24,29,35,0) 100%);
}
.hero--vision .hero-grid{grid-template-columns:minmax(0,1fr); position:relative; z-index:1; width:100%}
.hero--vision .hero-copy{max-width:560px; justify-self:start; text-align:left}
.hero--vision .hero-cta{margin-bottom:0}
/* 文字悬浮感：给文案一层极轻的玻璃底，不抢图 */
.hero--vision .hero-copy{
  padding:30px 32px; border-radius:18px;
  background:linear-gradient(120deg, rgba(24,29,35,.34), rgba(24,29,35,.10));
  border:1px solid rgba(255,255,255,.06);
  backdrop-filter:blur(3px);
}
@media(max-width:900px){
  .hero--vision{min-height:0; padding:84px 0 68px}
  /* 手机：焦点略上移保住果蝇，遮罩改为整体压暗，文字直接悬浮图上 */
  .hero-bg img{object-position:70% 38%}
  .hero-bg img.hero-bg-sharp{
    -webkit-mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 34%, #000 74%);
            mask-image:linear-gradient(90deg, transparent 0, rgba(0,0,0,.45) 34%, #000 74%);
    filter:saturate(1.02) brightness(.8);
  }
  .hero-veil{
    background:
      linear-gradient(90deg, rgba(24,29,35,.62) 0%, rgba(24,29,35,.38) 55%, rgba(24,29,35,.16) 100%),
      linear-gradient(0deg, rgba(24,29,35,.85) 0%, rgba(24,29,35,.18) 50%, rgba(24,29,35,.10) 100%);
  }
  .hero--vision .hero-copy{padding:22px 20px; max-width:none}
}
/* 首页：一句话 + 数据条区域与上下板块融为一张图，去掉割裂横线 */
[data-page="home"] .hero{border-bottom:none}
[data-page="home"] .section--pitch{border-bottom:none}
[data-page="home"] .section--statbar{border-bottom:none}

/* ============================================================
   黄底主题 · 图片区适配（收尾补丁）
   底色改为 #F0B90B 后，站上只剩两处「压在图/器皿上」的区域仍需
   深底浅字：首屏大图与培养舱。二者都用作用域变量重置，
   于是同一套组件在黄底上是墨字、在深底上是亮字，不用写两份样式。
   ============================================================ */
.hero{
  --fg:#f5f7fa;
  --fg-mute:rgba(255,255,255,.78);
  --fg-faint:rgba(255,255,255,.55);
  --green:#FCD535;
  --blue:#FCD535;
  --gold-bright:#FCD535;
  --gold-deep:#E0A90A;
  --line:rgba(255,255,255,.14);
  --line-strong:rgba(255,255,255,.24);
  --surface:rgba(14,18,24,.46);
  --surface-2:rgba(14,18,24,.62);
  --bg:#14181e;              /* 让主按钮在首屏内呈「黄底墨字」 */
}
.hero h1{
  background:linear-gradient(180deg,#fff 55%, rgba(233,237,243,.72));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero h1 em{
  background:linear-gradient(90deg,#FCD535,#fff 60%,#FCD535);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero .eyebrow{
  color:#FCD535;
  background:rgba(252,213,53,.10);
  border-color:rgba(252,213,53,.30);
}
.hero .btn-primary{background:#FCD535; border-color:#FCD535; color:#14181e}
.hero .btn-primary:hover{background:#fff; border-color:#fff; color:#14181e}
.hero .btn-primary:active{background:#E0A90A; border-color:#E0A90A; color:#14181e}
.hero .hero-cue{border-color:rgba(255,255,255,.28)}
.hero .hero-cue::before{background:#FCD535}

/* ============ 领养台：签名登录按钮 ============
   未登录时用虚线，视觉上「待完成」；登录后收成实线并淡化。
   两种状态都保持同样的高度，避免点击后布局跳动。 */
.btn-login{
  margin-top:14px;
  border-style:dashed;
  border-color:rgba(30,35,41,.34);
}
.btn-login:hover{border-style:solid}
.btn-login.on{
  border-style:solid;
  border-color:rgba(30,35,41,.46);
  background:rgba(255,255,255,.40);
}

/* ============ 我的果蝇 ============ */
.fly-list{
  list-style:none;
  margin:16px 0 0;
  padding:0;
  display:grid;
  gap:10px;
}

.fly-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--surface);
}

/* 档位用深浅区分：黄底上「墨色越重越稀有」，不引入新的色相 */
.fly-badge{
  flex:none;
  min-width:64px;
  text-align:center;
  padding:5px 10px;
  border-radius:6px;
  font-size:12px;
  letter-spacing:.02em;
  background:rgba(30,35,41,.09);
  color:var(--fg);
}
.fly-badge.tier-2{background:rgba(30,35,41,.20)}
.fly-badge.tier-3{background:var(--fg); color:var(--bg)}

.fly-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.fly-body strong{
  font-size:14.5px;
  font-weight:500;
  color:var(--fg);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.fly-meta{
  font-size:12.5px;
  color:var(--fg-faint);
}

.fly-link{
  flex:none;
  font-size:12.5px;
  color:var(--fg-mute);
  text-decoration:none;
  white-space:nowrap;
  border-bottom:1px solid var(--line-strong);
}
.fly-link:hover{color:var(--fg); border-color:var(--fg)}

@media (max-width:720px){
  .fly-item{flex-wrap:wrap; gap:10px}
  .fly-body{flex-basis:100%; order:2}
  .fly-link{order:3; margin-left:auto}
  .wallet-chip{font-size:12px}
}

/* ==================================================================
   链上生命（养成页）
   这一页是站点里唯一「有状态」的部分：所有数字都来自 BSC 上的合约。
   下面的样式只负责把链上状态翻译成看得懂的东西。
   ================================================================== */

.panel-hint{margin:0; font-size:13.5px; line-height:1.7; color:var(--fg-mute)}

/* ---------- 全局状态条 ---------- */
.chain-bar{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px; margin:22px 0 26px;
}
.chain-cell{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:12px 14px;
}
.chain-cell span{font-size:12.5px; color:var(--fg-faint)}
.chain-cell strong{font-size:19px; font-weight:500; color:var(--fg); line-height:1.25}
.chain-cell code{
  font-size:12.5px; color:var(--fg-mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- 培养皿与操作台 ---------- */
.arena{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(284px,.9fr);
  gap:18px; margin-bottom:26px; align-items:start;
}
.arena-stage{
  position:relative; overflow:hidden;
  border-radius:var(--radius); border:1px solid var(--line-strong);
  background:linear-gradient(165deg,rgba(255,255,255,.74),rgba(255,255,255,.40));
}
.arena-stage canvas{display:block; width:100%; height:360px}
.arena-tag{
  position:absolute; top:12px; right:14px; z-index:1;
  font-size:12.5px; color:var(--fg-mute);
  background:rgba(255,255,255,.76); border:1px solid var(--line);
  border-radius:999px; padding:4px 11px;
}
.arena-side{display:flex; flex-direction:column; gap:13px; min-width:0}
.arena-gate,.arena-adopt{
  display:flex; flex-direction:column; gap:12px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px;
}
/* .arena-gate 自己设了 display:flex，会盖掉 [hidden] 的默认值，必须显式补回来 */
.arena-gate[hidden],.arena-adopt[hidden]{display:none}
.arena-hint{margin:0; font-size:13px; line-height:1.62; color:var(--fg-mute)}
.arena-msg{
  margin:0; padding:11px 13px; min-height:46px;
  font-size:13px; line-height:1.62; color:var(--fg-mute);
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-sm);
}

/* ---------- 表单 ---------- */
.field-label{font-size:12.5px; color:var(--fg-faint)}
.field-input{
  width:100%; box-sizing:border-box;
  padding:10px 13px; border-radius:var(--radius-sm);
  border:1px solid var(--line-strong); background:rgba(255,255,255,.78);
  color:var(--fg); font-size:14px; font-family:inherit;
}
.field-input::placeholder{color:var(--fg-faint)}
.field-input:focus{outline:2px solid rgba(30,35,41,.28); outline-offset:1px}

.tier-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.tier-sm{padding:10px 8px; flex-direction:column; gap:3px; align-items:center}
.tier-sm .tier-name{font-size:13px}
.tier-sm .tier-sub{font-size:11.5px; color:var(--fg-faint)}

/* ---------- 果蝇卡片 ---------- */
.fly-grid{
  display:grid; gap:12px; margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
}
.fly-card{
  --fly-tint:#1E2329;
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--fly-tint);
  border-radius:var(--radius); padding:14px;
  transition:.18s ease;
}
.fly-card:hover{border-color:var(--line-strong)}
.fly-card.is-dead{opacity:.56; filter:saturate(.4)}
.fly-card.is-parent{border-color:var(--fg); box-shadow:0 0 0 2px rgba(30,35,41,.22)}

.fly-head{display:flex; align-items:center; gap:8px; min-width:0}
.fly-gen{
  flex:none; font-size:11.5px; font-weight:500;
  padding:3px 7px; border-radius:6px;
  background:rgba(30,35,41,.10); color:var(--fg);
}
.fly-gen.is-immortal{background:var(--fg); color:#F0B90B}
.fly-name{
  flex:1; min-width:0; font-size:14.5px; font-weight:500; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.fly-id{flex:none; font-size:12px; color:var(--fg-faint)}

.life-bar{height:7px; border-radius:999px; background:rgba(30,35,41,.14); overflow:hidden}
.life-fill{
  display:block; height:100%; width:100%; border-radius:999px;
  background:var(--fg); transition:width .6s linear, background .3s ease;
}
.life-fill.is-low{background:#B23B33}
.life-fill.is-over{background:rgba(30,35,41,.34)}
.life-text{margin:0; font-size:12.5px; color:var(--fg-mute); font-variant-numeric:tabular-nums}

.fly-attrs{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:5px 10px;
}
.fly-attrs li{display:flex; flex-direction:column; gap:1px; min-width:0}
.fly-attrs li span{font-size:11.5px; color:var(--fg-faint)}
.fly-attrs li strong{
  font-size:12.5px; font-weight:500; color:var(--fg);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

.fly-ops{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.btn-mini{
  padding:6px 11px; font-size:12.5px; border-radius:8px;
  border:1px solid var(--line-strong); background:rgba(255,255,255,.5);
  color:var(--fg); cursor:pointer; font-family:inherit; transition:.15s ease;
}
.btn-mini:hover:not(:disabled){background:var(--fg); color:#F0B90B; border-color:var(--fg)}
.btn-mini:disabled{opacity:.42; cursor:not-allowed}

/* ---------- 繁殖槽 ---------- */
.breed-slots{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin:14px 0 12px; min-height:36px;
}
.breed-empty{font-size:13px; color:var(--fg-faint)}
.breed-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--fg);
  background:rgba(255,255,255,.72); border:1px solid var(--line-strong);
  border-radius:999px; padding:6px 8px 6px 13px;
}
.breed-drop{
  border:0; background:rgba(30,35,41,.10); color:var(--fg);
  width:19px; height:19px; border-radius:50%; cursor:pointer;
  font-size:14px; line-height:1; display:grid; place-items:center; padding:0;
}
.breed-drop:hover{background:var(--fg); color:#F0B90B}
.breed-sep{font-size:14px; color:var(--fg-faint)}
.breed-form{display:flex; gap:10px; flex-wrap:wrap}
.breed-form .field-input{flex:1; min-width:200px}
.breed-form .btn{flex:none}

/* ---------- 血脉树 ---------- */
.lineage-wrap{overflow-x:auto; margin-top:14px; padding-bottom:6px}
.lineage-svg{display:block}
.lineage-node.is-dead{opacity:.5}
.ln-gen{font-size:11.5px; fill:var(--fg-faint); font-family:inherit}
.ln-name{font-size:13px; font-weight:500; fill:var(--fg); font-family:inherit}
.ln-id{font-size:11.5px; fill:var(--fg-faint); font-family:inherit}
.ln-state{font-size:11.5px; fill:var(--fg-mute); font-family:inherit; font-variant-numeric:tabular-nums}

/* ---------- 全网实时动态 ---------- */
.feed{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column}
.feed-idle{margin:0; padding:10px 0; font-size:13px; color:var(--fg-faint)}
.feed-item{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 11px; border-radius:var(--radius-sm);
  border-bottom:1px solid var(--line);
  font-size:13px; color:var(--fg-mute);
}
.feed-item:last-child{border-bottom:0}
.feed-tag{
  flex:none; font-size:11.5px; font-weight:500;
  padding:2px 8px; border-radius:6px;
  background:rgba(30,35,41,.10); color:var(--fg);
}
.feed-item.is-record .feed-tag,
.feed-item.is-immortal .feed-tag{background:var(--fg); color:#F0B90B}
.feed-text{flex:1; min-width:0; color:var(--fg); line-height:1.55}
.feed-block{flex:none; font-size:11.5px; color:var(--fg-faint); font-variant-numeric:tabular-nums}

@media (max-width:1000px){
  .arena{grid-template-columns:minmax(0,1fr)}
  .arena-stage canvas{height:300px}
}
@media (max-width:860px){
  .chain-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fly-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}
@media (max-width:560px){
  .fly-grid{grid-template-columns:minmax(0,1fr)}
  .chain-cell strong{font-size:17px}
  .tier-sm .tier-sub{font-size:11px}
  .breed-form .field-input{min-width:0}
}

/* ============================================================
   共享钱包层：钱包选择器 / 账户面板 / 提示条

   一个覆盖全站的模态框。为什么不用 hidden 属性控制显隐：
   .wmodal 需要 display:flex 才能把卡片居中，而 display 会盖掉
   [hidden] 的默认值 —— 这个坑在 .btn 和 .arena-gate 上已经踩过两次，
   这里直接用 .is-open 类控制，不再依赖属性。
   ============================================================ */

html.wmodal-open{overflow:hidden}

.wmodal{
  position:fixed; inset:0; z-index:9000;
  display:none; align-items:center; justify-content:center;
  padding:20px;
}
.wmodal.is-open{display:flex}

.wmodal-veil{
  position:absolute; inset:0;
  background:rgba(20,24,30,.52);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}

.wmodal-card{
  position:relative; z-index:1;
  width:min(460px,100%); max-height:calc(100vh - 40px); overflow-y:auto;
  padding:26px 26px 22px;
  border-radius:20px; border:1px solid var(--line-strong);
  background:var(--bg);
  box-shadow:0 24px 60px rgba(20,24,30,.34);
}

.wmodal-x{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; padding:0; line-height:1;
  font-family:inherit; font-size:19px; color:var(--fg-mute);
  border:1px solid transparent; border-radius:9px;
  background:transparent; cursor:pointer; transition:.18s;
}
.wmodal-x:hover{color:var(--fg); border-color:var(--line-strong); background:var(--surface-2)}

.wmodal-title{margin:0 0 6px; font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--fg)}
.wmodal-sub{margin:0 0 18px; font-size:13px; line-height:1.6; color:var(--fg-mute); padding-right:26px}

/* [hidden] 必须显式补回：.wmodal-body 自己要 display:block */
.wmodal-body{display:block}
.wmodal-body[hidden]{display:none}

.wmodal-list{display:flex; flex-direction:column; gap:8px}

/* 面板里的钱包按钮比页面上的筹码大一档 —— 这里是主操作区 */
.wmodal-list .wallet-chip{
  width:100%; justify-content:flex-start;
  font-size:14px; padding:11px 14px; border-radius:12px; gap:10px;
  background:var(--surface-2);
}
.wmodal-list .wallet-chip span{flex:1; text-align:left; font-weight:500}
.wmodal-list .wallet-chip img{border-radius:5px}

.wallet-avatar{
  flex:none; width:22px; height:22px; border-radius:5px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700;
  background:rgba(30,35,41,.14); color:var(--fg);
}

.wmodal-tip{margin:0 0 12px; font-size:13px; line-height:1.6; color:var(--fg-mute)}
.wmodal-install{display:block}
.wmodal-install[hidden]{display:none}
.wmodal-install-row{display:flex; flex-wrap:wrap; gap:8px}
.wallet-chip.is-missing{
  color:var(--fg); border-color:var(--line-strong);
  background:var(--surface-2);
}
.wallet-chip.is-missing:hover{border-color:var(--fg); background:#fff; text-decoration:none}

.wmodal-rows{margin:0 0 18px; padding:14px 16px; border-radius:14px; background:var(--surface)}
.wm-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:7px 0; font-size:12.5px;
  border-bottom:1px solid var(--line);
}
.wm-row:last-child{border-bottom:0}
.wm-row span{flex:none; color:var(--fg-faint); font-weight:500}
.wm-row code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; color:var(--fg); word-break:break-all; text-align:right;
}

.wmodal-ops{display:flex; flex-direction:column; gap:8px}

.wmodal-note{
  margin:16px 0 0; padding:10px 13px; border-radius:11px;
  font-size:12.5px; line-height:1.6; color:var(--fg);
  background:rgba(30,35,41,.08);
}
.wmodal-note:empty{display:none}
.wmodal-note.is-warn{background:rgba(178,59,51,.14); color:#7A2620}

/* 面板没开时的提示条：点右上角按钮若没反应，至少能看到原因 */
.wtoast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,14px);
  z-index:9100; max-width:min(520px,calc(100vw - 32px));
  padding:11px 18px; border-radius:999px;
  font-size:13px; line-height:1.5; color:#F0B90B; background:#1E2329;
  box-shadow:0 12px 32px rgba(20,24,30,.30);
  opacity:0; pointer-events:none; transition:opacity .22s, transform .22s;
}
.wtoast.is-on{opacity:1; transform:translate(-50%,0)}

/* 一个钱包都没发现时的说明（领养台 / 生命页共用） */
.wallet-none{
  margin:0; font-size:12.5px; line-height:1.6; color:var(--fg-mute);
  flex:1 0 100%;
}

/* 已登录：右上角按钮给一个更实的底，和「已连接但没登录」区分开 */
.btn-wallet.is-login{
  background:var(--fg); color:var(--bg); border-color:var(--fg);
}
.btn-wallet.is-login .dot{background:var(--bg); box-shadow:none}

@media (max-width:560px){
  .wmodal{padding:0; align-items:flex-end}
  .wmodal-card{
    width:100%; max-height:88vh;
    border-radius:20px 20px 0 0; border-bottom:0;
    padding:24px 18px 20px;
  }
  .wmodal-list .wallet-chip{font-size:13.5px}
}

/* ============================================================
   算法交易引擎（占位页）

   这一页目前只有一句「即将上线」。占位页最容易做成一块空白，
   所以骨架先搭好：三格规划 + 一句实话，让人知道这里将来会长出什么。
   ============================================================ */

.algo-soon{
  margin-top:26px; padding:32px 30px 28px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface);
}
.algo-copy{margin:0 0 22px; font-size:15px; line-height:1.8; color:var(--fg-mute)}

.algo-plan{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
}
.algo-plan li{
  padding:18px 18px 20px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--line);
}
.algo-n{
  display:block; margin-bottom:10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px; letter-spacing:.1em; color:var(--amber); font-weight:600;
}
.algo-plan strong{display:block; font-size:15px; margin-bottom:6px}
.algo-plan em{display:block; font-size:13.5px; line-height:1.72; color:var(--fg-mute)}
.algo-note{margin:22px 0 0; font-size:13px; line-height:1.7; color:var(--fg-faint)}

@media (max-width:860px){
  .algo-plan{grid-template-columns:1fr}
  .algo-soon{padding:24px 20px 22px}
}

/* ============================================================
   文献阅读：置顶读本

   置顶标记用绝对定位挂在卡片上沿，不占正文流 ——
   它只回答「为什么这条排在最前面」，不该抢标题的位置。
   ============================================================ */

.reading{
  position:relative; margin-top:26px; padding:32px 34px 26px;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  background:var(--surface);
}
.reading--pin{box-shadow:0 12px 34px rgba(30,35,41,.10)}
.reading-flag{
  position:absolute; top:-11px; left:30px;
  padding:4px 12px; border-radius:999px;
  font-size:11.5px; font-weight:700; letter-spacing:.08em;
  background:var(--fg); color:var(--bg);
}
.reading-title{margin:6px 0 8px; font-size:23px; line-height:1.42; font-weight:700; letter-spacing:-.01em; color:var(--fg)}
.reading-by{margin:0 0 20px; font-size:13px; line-height:1.7; color:var(--fg-faint)}
.reading-body{max-width:80ch}
.reading-body p{margin:0 0 15px; font-size:15px; line-height:1.85; color:var(--fg-mute)}
.reading-body p:last-child{margin-bottom:0}

.reading-take{
  margin:24px 0 0; padding:20px 22px;
  border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--surface-2);
}
.reading-take h4{margin:0 0 12px; font-size:14.5px; font-weight:600; color:var(--fg)}
.reading-take ul{margin:0; padding:0; list-style:none}
.reading-take li{
  position:relative; padding-left:18px; margin-bottom:9px;
  font-size:14px; line-height:1.78; color:var(--fg-mute);
}
.reading-take li:last-child{margin-bottom:0}
.reading-take li::before{
  content:""; position:absolute; left:2px; top:.7em;
  width:6px; height:6px; border-radius:50%; background:var(--amber);
}
.reading-note{margin:20px 0 0; font-size:12.5px; line-height:1.72; color:var(--fg-faint)}

@media (max-width:560px){
  .reading{padding:26px 20px 22px}
  .reading-title{font-size:19px}
  .reading-flag{left:20px}
}

/* ================= 玩家中心（账号 / 档案 / 榜单 / 留言） ================= */

.acct-tabs{display:flex; gap:8px; margin:0 0 18px; flex-wrap:wrap}
.acct-tab{
  appearance:none; border:1px solid var(--line-strong); background:transparent;
  color:var(--fg-mute); font:inherit; font-size:13.5px; padding:7px 16px;
  border-radius:999px; cursor:pointer;
}
.acct-tab:hover{border-color:var(--fg)}
.acct-tab.is-active{background:var(--fg); color:#F0B90B; border-color:var(--fg)}

.acct-form{display:grid; gap:14px; margin:0 0 6px}
.acct-form textarea,.talk-form textarea{
  width:100%; font:inherit; font-size:14px; line-height:1.7; padding:10px 12px;
  border:1px solid var(--line-strong); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.72); color:var(--fg); resize:vertical;
}
.acct-form textarea:focus,.talk-form textarea:focus{outline:2px solid var(--line-strong); outline-offset:1px}

.form-msg{margin:0; font-size:13px; line-height:1.7; color:var(--fg-mute)}
.form-msg:empty{display:none}
.form-msg.is-warn{color:var(--red)}
.form-msg.is-ok{color:#0B0E11; font-weight:600}

.acct-or{margin:14px 0; text-align:center; font-size:12.5px; color:var(--fg-faint)}

.acct-id{display:flex; align-items:center; gap:14px; margin:0 0 24px; flex-wrap:wrap}
.acct-avatar{
  width:52px; height:52px; flex:0 0 52px; border-radius:50%;
  background-color:var(--fg); background-size:cover; background-position:center;
  color:#F0B90B; display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:600; overflow:hidden;
}
.acct-avatar.has-img{color:transparent}
.acct-id-text{flex:1 1 160px; min-width:0}
.acct-id-text strong{display:block; font-size:15px; word-break:break-all}
.acct-id-text p{margin:2px 0 0; word-break:break-all}

.wallet-bind{margin-top:26px; padding-top:22px; border-top:1px solid var(--line)}
.wallet-bind h4{margin:0 0 8px; font-size:14.5px; font-weight:600; color:var(--fg)}
.bind-state{
  margin:12px 0 14px; font-size:13.5px; color:var(--fg);
  font-variant-numeric:tabular-nums;
}

.fly-toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px}

.log-form{display:grid; gap:14px; margin:20px 0 0}
.log-list{margin:22px 0 0; padding:0; list-style:none; display:grid; gap:10px}
.log-item{
  padding:12px 15px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface);
}
.log-head{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; font-size:12.5px; color:var(--fg-faint)}
.log-kind{font-weight:600; color:var(--fg)}
.log-note{margin:6px 0 0; font-size:13.5px; color:var(--fg-mute); word-break:break-word}
.log-tx{display:inline-block; margin-top:6px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px}

.board-list{margin:24px 0 0; padding:0; list-style:none; display:grid; gap:8px}
.board-row{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
}
.board-rank{
  flex:0 0 26px; text-align:right; font-size:13px; color:var(--fg-faint);
  font-variant-numeric:tabular-nums;
}
.board-avatar{
  width:36px; height:36px; flex:0 0 36px; border-radius:50%;
  background-color:var(--fg); background-size:cover; background-position:center;
  color:#F0B90B; display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:600; overflow:hidden;
}
.board-avatar.has-img{color:transparent}
.board-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px}
.board-main strong{font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.board-wallet{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px}
.board-nums{flex:0 0 auto; display:flex; align-items:baseline; gap:4px}
.board-flies{font-size:19px; font-weight:600; font-variant-numeric:tabular-nums}
.board-unit{font-size:12px; color:var(--fg-faint)}

.talk-form{display:grid; gap:14px; margin:0 0 24px}
.talk-list{margin:0; padding:0; list-style:none; display:grid; gap:12px}
.talk-item{
  padding:14px 16px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--surface-2);
}
.talk-head{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:6px}
.talk-time{font-size:12px; color:var(--fg-faint)}
.talk-body{
  margin:0; font-size:14px; line-height:1.78; color:var(--fg-mute);
  white-space:pre-wrap; word-break:break-word;
}

.sub-form{display:grid; gap:14px}
.sub-topics{border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 16px 14px; margin:0}
.sub-topics legend{font-size:12.5px; color:var(--fg-faint); padding:0 6px}
.sub-topics label{display:inline-flex; align-items:center; gap:7px; margin:0 18px 6px 0; font-size:13.5px; color:var(--fg-mute)}
.sub-actions{display:flex; gap:10px; flex-wrap:wrap}

.linkish{
  appearance:none; border:0; background:none; padding:0; margin-top:8px;
  color:var(--fg); font:inherit; font-size:13px; cursor:pointer; text-decoration:underline;
}
.linkish:hover{text-decoration:none}

.empty{margin:0; padding:14px 0; font-size:13.5px; color:var(--fg-faint)}

@media (max-width:560px){
  .board-row{gap:10px; padding:10px 12px}
  .board-rank{flex-basis:18px}
  .acct-id{gap:10px}
  .acct-avatar{width:44px; height:44px; flex-basis:44px; font-size:17px}
}

/* ============================================================
   养成进化（game.html · #algo）

   设计系统：站点底色是币安黄 #F0B90B + 墨色 #1E2329，但「培养舱 / 场景」
   一贯是深色玻璃器皿作用域（见上面 .farm-vial）。养成进化本质是一间实验室养殖箱，
   因此整页采用深色作用域，与 .farm-vial 一脉相承，而不是另起一套。

   约定：
     · 变量前缀 --ev-*，组件类名前缀 .evolve-*（不复用 .farm-*）。
     · 唯一强调色 --ev-accent = 币安亮黄 #FCD535；黄底一律配墨字 --ev-accent-ink。
     · 警示 #E5674E 只用于濒死 / 回滚；信息 #5CC8D9 只用于「突变」。
     · 字体沿用站点系统栈，数值用等宽。
     · 圆角 / 阴影沿用 .farm-vial 的尺度。
     · prefers-reduced-motion 下禁用过渡；翅扇动等 Canvas 动画由脚本自行停用。
     · 禁止：emoji 当图标、紫粉渐变、新增外链、Inter/Roboto。
   ============================================================ */
.evolve{
  /* 深色层次 */
  --ev-bg-top:#242a33;
  --ev-bg-bottom:#161b21;
  --ev-surface:rgba(255,255,255,.05);
  --ev-surface-2:rgba(255,255,255,.08);
  --ev-line:rgba(255,255,255,.12);
  --ev-line-strong:rgba(255,255,255,.20);
  --ev-fg:#eef1f5;
  --ev-fg-mute:rgba(255,255,255,.72);
  --ev-fg-faint:rgba(255,255,255,.50);
  --ev-accent:#FCD535;          /* 唯一强调色：币安亮黄 */
  --ev-accent-ink:#1E2329;      /* 黄底上的文字：墨色 */
  --ev-danger:#E5674E;          /* 警示：濒死 / 回滚 */
  --ev-info:#5CC8D9;            /* 信息：突变 / 基因重掷 */
  --ev-radius:16px;
  --ev-radius-sm:10px;
  --ev-ease:cubic-bezier(.2,.7,.3,1);

  /* 深色作用域内重置站点变量：让复用的 .algo-* 旧样式在深底上依然可读 */
  --fg:var(--ev-fg);
  --fg-mute:var(--ev-fg-mute);
  --fg-faint:var(--ev-fg-faint);
  --line:var(--ev-line);
  --line-strong:var(--ev-line-strong);
  --surface:var(--ev-surface);
  --surface-2:var(--ev-surface-2);
  --green:var(--ev-accent);
  --blue:var(--ev-accent);
  --amber:var(--ev-accent);
  --red:var(--ev-danger);

  position:relative;
  background:linear-gradient(180deg,var(--ev-bg-top),var(--ev-bg-bottom));
  color:var(--ev-fg);
  border-bottom:none;
}
.evolve::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(900px 480px at 82% -6%, rgba(252,213,53,.08), transparent 70%),
    radial-gradient(720px 420px at 6% 8%, rgba(92,200,217,.06), transparent 70%);
}
.evolve .wrap{position:relative; z-index:1}
.evolve strong{color:var(--ev-fg)}
.evolve a{color:var(--ev-accent)}
.evolve h2,.evolve h3{color:var(--ev-fg)}
.evolve .kicker{color:var(--ev-accent)}
.evolve .section-lede{color:var(--ev-fg-mute)}
.evolve-heading{margin:0 0 14px}

/* ---------- 按钮 ---------- */
.evolve-btn{
  appearance:none; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:14px; font-weight:600; line-height:1;
  padding:11px 18px; border-radius:var(--ev-radius-sm);
  border:1px solid var(--ev-line-strong);
  background:var(--ev-surface-2); color:var(--ev-fg);
  transition:background .18s var(--ev-ease), border-color .18s var(--ev-ease), transform .18s var(--ev-ease);
}
.evolve-btn:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.32)}
.evolve-btn:active{transform:translateY(1px)}
.evolve-btn:disabled{opacity:.45; cursor:not-allowed}
.evolve-btn-primary{background:var(--ev-accent); color:var(--ev-accent-ink); border-color:var(--ev-accent)}
.evolve-btn-primary:hover{background:#ffe261; border-color:#ffe261}

/* ---------- 身份 / 网络 / 提示 ---------- */
.evolve-idbar{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin:0 0 4px}
.evolve-id-actions{display:flex; flex-wrap:wrap; gap:10px}
.evolve-id-facts{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0}
.evolve-id-facts div{display:flex; gap:8px; align-items:baseline}
.evolve-id-facts dt{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ev-fg-faint)}
.evolve-id-facts dd{margin:0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; color:var(--ev-fg)}

.evolve-warn{
  margin:12px 0 0; padding:10px 14px; border-radius:var(--ev-radius-sm);
  background:rgba(229,103,78,.14); border:1px solid rgba(229,103,78,.5);
  color:#FFD9CF; font-size:13.5px;
}
.evolve-msg{margin:10px 0 0; min-height:20px; font-size:13.5px; color:var(--ev-fg-mute)}

/* ---------- 顶部全局统计 ---------- */
.evolve-stats{
  list-style:none; margin:22px 0 26px; padding:0;
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;
}
.evolve-stats div{
  display:flex; flex-direction:column; gap:6px; min-width:0;
  padding:14px 16px; border-radius:var(--ev-radius-sm);
  background:var(--ev-surface); border:1px solid var(--ev-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.evolve-stats dt{font-size:12.5px; color:var(--ev-fg-faint)}
.evolve-stats dd{
  margin:0; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:22px; font-weight:600; color:var(--ev-accent);
  overflow:hidden; text-overflow:ellipsis;
}

/* ---------- 主舞台：场景 + 个体/面板 ---------- */
.evolve-stage{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:24px; margin-bottom:24px}
.evolve-scene{display:flex; flex-direction:column; gap:12px; min-width:0}
.evolve-scene-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px}
.evolve-scene-title{font-weight:600; color:var(--ev-fg)}
.evolve-scene-hint{font-size:13px; color:var(--ev-fg-faint)}
/* 示例血脉徽标：演示模式的诚实标记，运行时注入（data-no-i18n，文案由控制器 t() 写入） */
.evolve-demo-badge{
  display:inline-block; padding:2px 10px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color:#1E2329; background:#FCD535;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset;
  vertical-align:middle; white-space:nowrap;
}
.evolve-tree-wrap .evolve-demo-badge{margin-left:auto}
.evolve-vial{
  position:relative; overflow:hidden; min-height:340px;
  border-radius:26px 26px 18px 18px;
  border:1px solid rgba(255,255,255,.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01) 42%, rgba(120,96,60,.05)),
    linear-gradient(180deg,#242a33,#161b21);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 50px rgba(30,35,41,.35);
}
.evolve-canvas-scene{display:block; width:100%; height:auto}
.evolve-scene-note{margin:0; font-size:12px; color:var(--ev-fg-faint)}

.evolve-side{display:flex; flex-direction:column; gap:16px; min-width:0}
.evolve-portrait-wrap{
  display:flex; justify-content:center; padding:12px;
  border-radius:var(--ev-radius); border:1px solid var(--ev-line);
  background:var(--ev-surface);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.evolve-canvas-portrait{display:block; width:100%; max-width:260px; height:auto}

.evolve-panel{
  display:flex; flex-direction:column; gap:16px;
  padding:18px; border-radius:var(--ev-radius);
  background:var(--ev-surface); border:1px solid var(--ev-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.evolve-fly-name{margin:0; font-size:16px; font-weight:600; color:var(--ev-fg)}
.evolve-life{display:flex; flex-direction:column; gap:8px}
.evolve-life-bar{height:10px; border-radius:999px; background:rgba(255,255,255,.10); overflow:hidden}
.evolve-life-bar span{display:block; height:100%; width:0; border-radius:999px; background:var(--ev-accent); transition:width .4s var(--ev-ease)}
.evolve-life-bar span.is-low{background:var(--ev-danger)}
.evolve-life-text{margin:0; font-size:13px; color:var(--ev-fg-mute); font-family:ui-monospace,Menlo,Consolas,monospace}

.evolve-genes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.evolve-genes .evolve-gene{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ev-fg-mute); min-width:0}
.evolve-gene-swatch{width:14px; height:14px; flex:0 0 14px; border-radius:4px; border:1px solid rgba(255,255,255,.25)}

.evolve-attrs{margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px}
.evolve-attrs div{display:flex; justify-content:space-between; align-items:baseline; gap:8px; font-size:13px; min-width:0}
.evolve-attrs dt{color:var(--ev-fg-faint)}
.evolve-attrs dd{margin:0; color:var(--ev-fg); font-family:ui-monospace,Menlo,Consolas,monospace}

/* ---------- 操作区 ---------- */
.evolve-ops{display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 10px}
.evolve-ops-hint{margin:0 0 30px; font-size:12.5px; color:var(--ev-fg-faint)}

/* 运行时注入的名字输入框与档位下拉：跟随 --ev-* 深色主题，避免出现原生白控件 */
.evolve-name,
.evolve-tier{
  font:inherit; font-size:13.5px; min-width:0;
  padding:11px 14px; border-radius:var(--ev-radius-sm);
  border:1px solid var(--ev-line-strong);
  background:var(--ev-surface-2); color:var(--ev-fg);
  color-scheme:dark;
}
.evolve-name{flex:1 1 200px}
.evolve-name::placeholder{color:var(--ev-fg-faint)}
.evolve-name:focus,
.evolve-tier:focus{outline:none; border-color:var(--ev-accent); box-shadow:0 0 0 2px rgba(252,213,53,.22)}
.evolve-tier{cursor:pointer}
.evolve-tier option{color:var(--ev-fg); background:#1E2329}

/* ---------- 进化树 / 事件流 ---------- */
.evolve-section-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; margin:0 0 12px}
.evolve-section-head h3{margin:0; font-size:17px; font-weight:600}
.evolve-section-head span{font-size:13px; color:var(--ev-fg-faint)}
.evolve-tree{
  min-height:120px; padding:16px; overflow-x:auto;
  border-radius:var(--ev-radius); border:1px solid var(--ev-line); background:var(--ev-surface);
}
.evolve-tree svg{display:block}
.evolve-tree .evolve-node{cursor:pointer}
.evolve-tree .evolve-node:hover text{fill:var(--ev-accent)}
.evolve-feed-wrap{margin-top:30px}
.evolve-feed{
  list-style:none; margin:0; padding:0; max-height:320px; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
}
.evolve-feed li{
  display:flex; gap:10px; align-items:baseline; font-size:13px;
  padding:9px 12px; border-radius:var(--ev-radius-sm);
  background:var(--ev-surface); border:1px solid var(--ev-line);
}
.evolve-feed .evolve-feed-type{color:var(--ev-accent); font-weight:600}
.evolve-feed .evolve-feed-text{color:var(--ev-fg-mute); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.evolve-feed .evolve-feed-time{margin-left:auto; color:var(--ev-fg-faint); font-family:ui-monospace,Menlo,Consolas,monospace}
.evolve-feed .empty{color:var(--ev-fg-faint)}

/* ---------- 页尾「规划中」卡片（保留原算法交易引擎文案） ---------- */
.evolve-plan{
  margin-top:36px; padding:26px 24px 24px; border-radius:var(--ev-radius);
  border:1px dashed var(--ev-line-strong); background:var(--ev-surface);
}
.evolve-plan-kicker{
  margin:0 0 6px; font-size:12px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ev-fg-faint);
}
.evolve-plan-lede{margin:10px 0 0; max-width:78ch; font-size:14px; line-height:1.75; color:var(--ev-fg-mute)}
.evolve-plan .algo-soon{margin-top:18px; background:rgba(255,255,255,.04); border-color:var(--ev-line)}

/* ---------- 响应式：560px 断点下不得横向溢出 ---------- */
@media (max-width:1000px){
  .evolve-stage{grid-template-columns:1fr}
  .evolve-canvas-portrait{max-width:220px}
}
@media (max-width:760px){
  .evolve-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .evolve-stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
  .evolve-vial{min-height:240px}
  .evolve-ops{gap:8px}
  .evolve-btn{flex:1 1 auto; padding:11px 12px}
  .evolve-attrs{grid-template-columns:1fr}
  .evolve-genes{grid-template-columns:1fr}
  .evolve-plan{padding:20px 16px}
}

/* 减少动态效果：禁用过渡（Canvas 动画由脚本按同一媒体查询自行停用） */
@media (prefers-reduced-motion:reduce){
  .evolve-btn,
  .evolve-life-bar span{transition:none}
  .evolve{scroll-behavior:auto}
}