/* ═══════════════════════════════════════════════════════════════════
   PANECO 用户站 v2 · Plan A 黑金（浅色纸面）—— 应用壳布局
   纸色底 #FFFFFF / 墨字 #0A0A1E / 金点缀 #094197 / 白卡片
   零外链：系统字体栈，图标全内联 SVG / CSS
   v2 换壳不换业务：A 系列接口、写流程、提示组件全部保留
   ═══════════════════════════════════════════════════════════════════ */
/* DeepStone 官方字体自托管（零外链；OFL 许可） */
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/EBGaramond-SemiBold.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:'Swei B2 Serif CJKtc';src:url('fonts/SweiB2SerifCJKtc-Medium.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Swei B2 Serif CJKtc';src:url('fonts/SweiB2SerifCJKtc-SemiBold.woff2') format('woff2');font-weight:600 700;font-display:swap}

:root{
  /* DeepStone v1.3.1（demo 试点）：ink/royal/blue/paper + 语义状态色；--gold 系变量名保留为兼容别名 */
  --paper:#F7F7F7;
  --ink:#0A0A1E;
  --gold:#094197;                     /* = royal 主强调 */
  --gold-hover:#404082;               /* = blue 次强调（hover） */
  --gold-soft:#404082;
  --card:#FFFFFF;
  --sub:rgba(10,10,30,.62);
  --sub-2:rgba(10,10,30,.42);
  --hair:rgba(10,10,30,.14);          /* 中性 hairline（royal 收敛：仅按钮/链接/选中/图表） */
  --hair-ink:rgba(10,10,30,.10);
  --shadow:0 1px 2px rgba(10,10,30,.05), 0 10px 28px rgba(10,10,30,.05);
  --r-card:8px;                       /* DeepStone 容器 0–8px */
  --r-ctrl:8px;
  /* DeepStone 语义令牌（导出自 tokens.json） */
  --royal:#094197; --blue:#404082; --navy:#141539; --navy-deep:#121463;
  --line:#D8D8E2; --muted:#525267;
  --success:#287D60; --warning:#A96A13; --danger:#B94343;
  --font-display:'EB Garamond','Swei B2 Serif CJKtc',Georgia,'Songti SC',SimSun,serif;
  --dark-band:linear-gradient(90deg,#141539 0.7%,#121463 99.9%);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:'Swei B2 Serif CJKtc','Songti SC',SimSun,system-ui,sans-serif;
  background:var(--paper); color:var(--ink);
  min-width:1024px; font-size:14px; line-height:1.55;
  font-variant-numeric:tabular-nums;
}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
.app{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

/* ── 侧边栏 ─────────────────────────────── */
/* v3：侧栏 = DeepStone navy 锚点带（darkBand 纵向 + 区内白字体系，与控制台对称） */
.sidebar{
  position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  background:#141539;
  background:linear-gradient(180deg,#141539 0%,#121463 100%);
  padding:22px 16px 18px;color:rgba(247,247,247,.78);
}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 20px}
.brand .mark{width:12px;height:12px;background:var(--gold);transform:rotate(45deg);border-radius:2px;flex:none}
.brand .name{font-weight:700;letter-spacing:.28em;font-size:15px;color:#FFFFFF}
.brand .ver{font-size:10.5px;color:rgba(247,247,247,.55);letter-spacing:.08em;margin-left:auto}
.nav-group{margin-bottom:18px}
.nav-group-title{font-size:11px;letter-spacing:.14em;color:rgba(247,247,247,.5);padding:0 10px 7px}
.nav-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;border-radius:100px;color:rgba(247,247,247,.75);font-weight:500;
  border:1px solid transparent;position:relative;width:100%;text-align:left;
  transition:background .15s,color .15s;
}
.nav-item:hover{background:rgba(247,247,247,.07);color:#FFFFFF}
.nav-item.active{
  background:rgba(9,65,151,.55);color:#FFFFFF;font-weight:600;
  border:1px solid rgba(9,65,151,.8);
}
.nav-item.active::before{display:none}
.nav-item .cnt{font-size:11px;color:rgba(247,247,247,.6)}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px}
.chain-badge{
  display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(247,247,247,.8);
  border:1px solid rgba(247,247,247,.2);border-radius:999px;padding:6px 12px;background:rgba(247,247,247,.06);
}
.chain-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#FFFFFF}
.wallet-box{background:rgba(247,247,247,.07);border:1px solid rgba(247,247,247,.16);border-radius:var(--r-card);padding:12px}
.wallet-box .wb-label{font-size:11px;color:rgba(247,247,247,.5);letter-spacing:.1em;margin-bottom:6px}
.wallet-box .wb-addr{font-size:13px;font-weight:600;word-break:break-all}
.wallet-box .wb-note{font-size:11px;color:rgba(247,247,247,.55);margin-top:2px}
.wb-connect{width:100%;margin-top:8px}

/* ── 按钮 ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:100px;min-height:44px;padding:9px 20px;font-weight:600;font-size:14px;
  background:var(--gold);color:#fff;border:1px solid transparent;
  transition:background .15s,border-color .15s,transform .05s;
}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--gold-hover)}
.btn.ghost,.btn-ghost{border:1px solid var(--hair-ink);color:var(--ink);background:transparent}
.btn.ghost:hover,.btn-ghost:hover{background:rgba(10,10,30,.05)}
.btn-plain{border:1px solid var(--hair-ink);color:var(--sub);background:transparent}
.btn-plain:hover{border-color:var(--hair);color:var(--ink)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.small,.btn-sm{padding:6px 12px;font-size:12.5px}

/* ── 主区 / 顶栏 ─────────────────────────── */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;
  padding:16px 36px;background:rgba(247,247,247,.92);backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair-ink);
}
.topbar h1{font-size:20px;font-weight:650;letter-spacing:.01em}
.topbar .crumb{font-size:12px;color:var(--sub-2)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px}

.content{padding:28px 36px 40px;max-width:1240px;width:100%}
.page{display:none}
.page.show{display:block;animation:rise .18s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ── 链不匹配横幅 ───────────────────────── */
.chain-banner{
  display:none;position:sticky;top:69px;z-index:19;
  background:#094197;color:#FFF;padding:9px 36px;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.chain-banner.show{display:block}
.chain-banner button{
  margin-left:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);
  color:#FFF;border-radius:8px;padding:3px 12px;font-weight:600;
}

/* ── 统计卡 ─────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-card{background:var(--card);border:1px solid var(--hair-ink);border-radius:var(--r-card);
  padding:16px 18px}
.stat-card .sc-label{font-size:12px;color:var(--sub);letter-spacing:.02em}
.stat-card .sc-value{font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.stat-card .sc-value .unit{font-size:13px;font-weight:500;color:var(--sub);margin-left:4px}
.stat-card .sc-sub{font-size:12px;color:var(--sub-2);margin-top:4px}

/* ── 卡片通用（panel 与 card 同构，兼容旧组件） ── */
.card,.panel{background:var(--card);border:1px solid var(--hair-ink);border-radius:var(--r-card);
  padding:20px}
.card-title{font-size:14px;font-weight:650;display:flex;align-items:center;gap:8px}
.card-title .ct-sub{font-size:12px;color:var(--sub-2);font-weight:400}
.grid-2{display:grid;grid-template-columns:5fr 4fr;gap:16px;margin-bottom:20px;align-items:stretch}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:18px;flex-wrap:wrap;
  border-bottom:2px solid var(--royal);padding-bottom:12px}
.page-head h2{font-size:16px;font-weight:650}
.page-head h2::before{content:attr(data-num);font-family:var(--font-display);font-size:26px;color:var(--royal);
  font-weight:600;margin-right:10px;vertical-align:-2px}
.page-head .ph-sub{font-size:12.5px;color:var(--sub);margin-top:2px}
.page-head .ph-actions{display:flex;gap:10px;align-items:center}

/* ── donut / 图例 ───────────────────────── */
.donut-wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.donut{width:190px;height:190px;flex:none}
.donut-track{fill:none;stroke:rgba(10,10,30,.07);stroke-width:18}
.donut text{fill:var(--ink);text-anchor:middle}
.donut .d-num{font-size:26px;font-weight:700}
.donut .d-lab{font-size:11px;fill:var(--sub)}
.legend{flex:1;min-width:220px;display:flex;flex-direction:column;gap:12px}
.lg-row{display:grid;grid-template-columns:12px 1fr auto auto;gap:10px;align-items:center;font-size:13.5px}
.lg-row .dot{width:10px;height:10px;border-radius:3px}
.lg-row .lg-name{color:var(--ink)}
.lg-row .lg-val{font-weight:600}
.lg-row .lg-pct{color:var(--sub-2);width:52px;text-align:right;font-size:12.5px}

/* ── 徽章 / pill ────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  border-radius:999px;padding:2.5px 9px;letter-spacing:.02em;vertical-align:middle}
.badge.active{border:1px solid rgba(40,125,96,.45);color:var(--success);background:rgba(40,125,96,.08)}
.badge.soon{border:1px solid rgba(169,106,19,.4);color:var(--warning);background:rgba(169,106,19,.07)}
.badge.full{border:1px solid rgba(185,67,67,.4);color:var(--danger);background:rgba(185,67,67,.06)}
.badge-demo{border:1px solid var(--hair);color:var(--muted);background:rgba(82,82,103,.06)}
.badge-installed{background:var(--ink);color:#F6EFD9}
.badge-soon{border:1px dashed var(--hair);color:var(--sub)}
.badge-solid-ink{background:var(--ink);color:#FFFFFF}
.badge-run{border:1px solid var(--hair-ink);color:var(--sub)}
.pill{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;
  padding:2px 9px;border:1px solid var(--hair-ink);color:var(--sub);margin-right:4px}
.pill.warn{border-color:rgba(169,106,19,.45);color:var(--warning)}
.pill.good{border-color:rgba(40,125,96,.45);color:var(--success)}

/* ── 表格 ──────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{font-size:11.5px;color:var(--sub-2);font-weight:600;text-align:left;
  padding:8px 12px;border-bottom:1px solid var(--hair-ink);letter-spacing:.04em;white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid rgba(10,10,30,.06);vertical-align:middle}
.tbl tr:last-child td{border-bottom:none}
.tbl .num{text-align:right;font-weight:600;white-space:nowrap}
.tbl th.num{text-align:right;font-weight:600}
.tbl-note{font-size:12px;color:var(--sub-2);margin-top:10px}
/* 旧组件里的裸表也走同款 */
.content table{width:100%;border-collapse:collapse;font-size:13.5px}
.content table th{font-size:11.5px;color:var(--sub-2);font-weight:600;text-align:left;
  padding:8px 12px;border-bottom:1px solid var(--hair-ink);white-space:nowrap}
.content table td{padding:10px 12px;border-bottom:1px solid rgba(10,10,30,.06);vertical-align:middle}
.content table tr:last-child td{border-bottom:none}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12.5px}
/* DeepStone：标题/品牌衬线（官方字体栈+系统回退，零下载） */
h1,h2,h3,.display,.brand .name,.page-head h2,.card-title,.sc-label{font-family:var(--font-display)}
/* DeepStone：主按钮胶囊 */
.btn{border-radius:100px}
.btn.small,.btn.ghost,.btn.mini{border-radius:100px}

/* ── 站点卡片 ───────────────────────────── */
.site-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.site-card{background:var(--card);border:1px solid var(--hair-ink);border-radius:var(--r-card);
  padding:18px;display:flex;flex-direction:column;gap:12px}
.site-card.real{border-color:var(--hair)}
.site-card .st-head{display:flex;align-items:center;gap:8px}
.site-card .st-name{font-size:15px;font-weight:700}
.site-card .st-vault{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--sub);
  background:rgba(10,10,30,.04);border-radius:8px;padding:5px 9px;word-break:break-all}
.st-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.st-row .k{font-size:11.5px;color:var(--sub-2)}
.st-row .v{font-size:15px;font-weight:650;margin-top:1px}
.st-row .v .u{font-size:11.5px;color:var(--sub);font-weight:500;margin-left:2px}
.site-card .st-act{margin-top:auto}
.site-card .st-act .btn{width:100%}

/* ── 条形图 ─────────────────────────────── */
.bars{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.bar-row{display:grid;grid-template-columns:96px 1fr 150px;gap:12px;align-items:center;font-size:13px}
.bar-row .b-name{color:var(--sub)}
.bar-track{height:12px;border-radius:6px;background:rgba(10,10,30,.06);overflow:hidden}
.bar-fill{height:100%;border-radius:6px;background:var(--gold);min-width:2px}
.bar-row:nth-child(2) .bar-fill{background:var(--ink)}
.bar-row:nth-child(3) .bar-fill{background:var(--gold-soft)}
.bar-row .b-val{text-align:right;font-weight:600;white-space:nowrap}
.bar-row .b-val .u{font-size:11px;color:var(--sub-2);font-weight:400}

/* ── TVL ──────────────────────────────── */
.tvl-big{font-size:36px;font-weight:700;letter-spacing:-.01em;margin:14px 0 2px}
.tvl-delta{font-size:13px;color:var(--sub);margin-bottom:14px}
.tvl-chart{width:100%;aspect-ratio:560/200;display:block}
.tvl-chart-empty{width:100%;aspect-ratio:560/200;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--hair);border-radius:var(--r-ctrl);color:var(--sub-2);font-size:13px;
  background:rgba(9,65,151,.03);text-align:center;padding:0 24px}
.tvl-comp{margin-top:18px;border-top:1px solid var(--hair-ink);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.tvl-comp .lg-row{grid-template-columns:12px 1fr auto auto}

/* ── 我的仓位 ──────────────────────────── */
.pos-grid{display:grid;grid-template-columns:1fr 320px;gap:16px;margin-bottom:20px;align-items:stretch}
.vcux-card{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);
  padding:18px;display:flex;flex-direction:column;gap:8px}
.vcux-card .vx-top{display:flex;align-items:center;gap:10px}
.vcux-card .vx-num{font-size:30px;font-weight:700}
.vcux-card .vx-desc{font-size:12.5px;color:var(--sub);line-height:1.6}
.cap-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--hair);
  border-radius:999px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--gold);background:rgba(9,65,151,.05)}
.cap-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}

/* ── 页脚规格行 / 页脚 ──────────────────── */
.spec-foot{margin-top:26px;padding-top:14px;border-top:1px solid var(--hair-ink);
  font-size:12px;color:var(--sub-2);display:flex;gap:14px;flex-wrap:wrap}
.spec-foot b{color:var(--sub);font-weight:600}
#footerNote{margin-top:28px;padding:14px 0 0;border-top:1px solid var(--hair-ink);
  font-size:12px;color:var(--sub-2)}

/* ── 钱包抽屉 ───────────────────────────── */
.mask{position:fixed;inset:0;background:rgba(10,10,30,.34);opacity:0;pointer-events:none;
  transition:opacity .25s;z-index:40}
.mask.show{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:392px;max-width:92vw;z-index:41;
  background:var(--card);border-left:1px solid var(--hair);
  box-shadow:-18px 0 48px rgba(10,10,30,.14);
  transform:translateX(105%);transition:transform .28s cubic-bezier(.32,.72,.28,1);
  display:flex;flex-direction:column;padding:20px;
}
.drawer.show{transform:translateX(0)}
.dw-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.dw-head .t{font-size:16px;font-weight:700}
.dw-close{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  color:var(--sub);border:1px solid transparent}
.dw-close:hover{border-color:var(--hair-ink);color:var(--ink)}
.dw-search{position:relative;margin-bottom:14px}
.dw-search input{
  width:100%;padding:10px 12px 10px 36px;border:1px solid var(--hair-ink);border-radius:var(--r-ctrl);
  background:var(--paper);font:inherit;font-size:13.5px;color:var(--ink);outline:none;
}
.dw-search input:focus{border-color:var(--gold);background:#fff}
.dw-search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%)}
.wl-list{display:flex;flex-direction:column;gap:8px;overflow-y:auto}
.wl-row{
  display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-ctrl);
  border:1px solid var(--hair-ink);text-align:left;width:100%;
  transition:border-color .15s,background .15s;
}
.wl-row:hover{border-color:var(--hair);background:rgba(9,65,151,.04)}
.wl-row .ic{width:38px;height:38px;border-radius:10px;background:rgba(9,65,151,.09);
  display:flex;align-items:center;justify-content:center;flex:none}
.wl-row .nm{font-size:14px;font-weight:600}
.wl-row .ds{font-size:11.5px;color:var(--sub-2)}
.wl-row .rt{margin-left:auto;display:flex;align-items:center;gap:8px}
.wl-empty{padding:24px 4px;text-align:center;color:var(--sub-2);font-size:13px}
.dw-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair-ink);
  font-size:12px;color:var(--sub-2);text-align:center;line-height:1.6}
.acct{display:none;flex-direction:column;gap:14px;padding-top:6px}
.drawer.mode-acct .acct{display:flex}
.drawer.mode-acct .wl-wrap{display:none}
.acct-card{border:1px solid var(--hair);border-radius:var(--r-card);padding:16px;
  background:rgba(9,65,151,.04)}
.acct-card .a-label{font-size:11.5px;color:var(--sub-2);margin-bottom:4px}
.acct-card .a-addr{font-size:16px;font-weight:700}
.acct-card .a-full{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--sub);
  margin-top:6px;word-break:break-all}
.acct-meta{display:flex;flex-direction:column;gap:8px;font-size:13px}
.acct-meta .m-row{display:flex;justify-content:space-between;color:var(--sub)}
.acct-meta .m-row b{color:var(--ink);font-weight:600}
.acct-note{font-size:12px;color:var(--sub-2);line-height:1.6}
.acct .btn{width:100%}

/* ── 表单 / 详情页旧组件（v2 皮肤重绘） ── */
.content label{display:block;font-size:12px;color:var(--sub);margin:14px 0 6px;letter-spacing:.02em}
.content input,.content select{
  width:100%;padding:10px 12px;border:1px solid var(--hair-ink);border-radius:var(--r-ctrl);
  background:#fff;font:inherit;font-size:13.5px;color:var(--ink);outline:none;
}
.content input:focus,.content select:focus{border-color:var(--gold)}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.meta{font-size:12.5px;color:var(--sub)}
.kicker{font-size:11px;letter-spacing:.14em;color:var(--sub-2);text-transform:uppercase}
.name{font-size:16px;font-weight:650}
.note{font-size:12px;color:var(--sub-2);margin-top:12px;line-height:1.7}
.big{font-size:26px;font-weight:700;letter-spacing:-.01em}
.mini{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub-2);
  text-transform:none;letter-spacing:.02em}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:12px}
.kv>div{font-size:12px;color:var(--sub-2)}
.kv b{display:block;font-size:14.5px;color:var(--ink);font-weight:650;margin-top:2px}
.kv .meta{font-size:11px}
.stat-row{display:flex;gap:18px;margin-top:14px}
.stat{flex:1}
.stat span{font-size:11px;color:var(--sub-2)}
.stat b{display:block;font-size:14px;margin-top:2px}
.bar{height:8px;border-radius:4px;background:rgba(10,10,30,.06);overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;background:var(--gold);border-radius:4px}
.detail{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}

.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{
  padding:7px 14px;border-radius:999px;border:1px solid var(--hair-ink);
  font-size:12.5px;font-weight:600;color:var(--sub);background:transparent;
}
.tabs button.on{background:var(--ink);color:#FFFFFF;border-color:var(--ink)}

.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
.term{
  border:1px solid var(--hair-ink);border-radius:var(--r-ctrl);padding:9px 10px;text-align:center;
  background:#fff;transition:border-color .15s,background .15s;
}
.term b{display:block;font-size:13px}
.term span{font-size:11px;color:var(--sub-2)}
.term.on{border-color:var(--gold);background:rgba(9,65,151,.06)}
.term.on b{color:var(--gold)}

.steps{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.step{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--sub-2)}
.step b{
  width:22px;height:22px;border-radius:50%;border:1px solid var(--hair-ink);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;background:#fff;
}
.step.doing{color:var(--ink)}
.step.doing b{border-color:var(--gold);color:var(--gold)}
.step.done{color:var(--sub)}
.step.done b{background:var(--gold);border-color:var(--gold);color:#fff}
.step.failed{color:var(--danger)}
.step.failed b{border-color:rgba(185,67,67,.45);color:var(--danger)}

/* ── 写流程成功终态收起（v23，照 collapse-demo）：整块 0.2s 折叠为单行摘要 ── */
.flow-fold{display:grid;grid-template-rows:1fr;transition:grid-template-rows .2s ease}
.flow-fold.closed{grid-template-rows:0fr}
.flow-fold>.flow-inner{min-height:0;overflow:hidden;transition:opacity .15s ease}
.flow-fold.closed>.flow-inner{opacity:0}
.flow-head{display:flex;justify-content:flex-end}
.flow-line{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--ink);
  animation:rise .18s ease}
.flow-line .ok-dot{color:var(--success);font-weight:700}
.flow-line .mono{color:var(--sub)}
.flow-line .btn{margin-left:auto}

.errbox{border:1px solid rgba(185,67,67,.4);background:rgba(185,67,67,.05);color:var(--danger);
  border-radius:var(--r-ctrl);padding:12px 14px;font-size:13px;margin-top:10px;word-break:break-all}
.warnbox{border:1px solid var(--hair);background:rgba(9,65,151,.06);color:var(--warning);
  border-radius:var(--r-ctrl);padding:12px 14px;font-size:12.5px;margin-top:10px;line-height:1.7}
.statebox{border:1px dashed var(--hair-ink);border-radius:var(--r-ctrl);padding:14px;
  font-size:12.5px;color:var(--sub);margin-top:10px;line-height:1.7}
.statebox.ok{border-color:rgba(40,125,96,.5);color:var(--success);background:rgba(40,125,96,.05)}
.readonly-msg{border:1px solid var(--hair);background:rgba(9,65,151,.05);border-radius:var(--r-ctrl);
  padding:14px;font-size:13px;line-height:1.7}
.ok-card{border:1px solid rgba(40,125,96,.4);background:rgba(40,125,96,.05);
  border-radius:var(--r-card);padding:16px}
.hashline{margin-top:12px;font-size:12px;color:var(--sub);word-break:break-all}
.hashline button{margin-left:8px}
.proof-box{margin-top:10px;border:1px solid var(--hair-ink);border-radius:var(--r-ctrl);
  padding:10px 12px;font-size:11.5px;color:var(--sub);word-break:break-all;line-height:1.8}
.rline{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(10,10,30,.06);font-size:13px}
.rline:last-child{border-bottom:none}
.rline .meta{font-size:11px}

/* ── 弹窗 / toast / 骨架屏 / spinner ───── */
.modal-bg{position:fixed;inset:0;background:rgba(10,10,30,.4);z-index:50;
  display:none;align-items:center;justify-content:center;padding:24px}
.modal-bg.show{display:flex}
.modal{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-card);
  box-shadow:0 24px 64px rgba(10,10,30,.22);max-width:560px;width:100%;padding:22px;
  max-height:86vh;overflow-y:auto}
.toast{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,16px);z-index:60;
  background:var(--ink);color:#FFFFFF;font-size:13px;font-weight:500;
  border-radius:10px;padding:10px 18px;box-shadow:0 10px 30px rgba(10,10,30,.3);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;
  border:1px solid rgba(9,65,151,.35);max-width:80vw;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{border-color:rgba(224,108,90,.6)}
.spin{display:inline-block;width:14px;height:14px;border-radius:50%;
  border:2px solid var(--hair);border-top-color:var(--gold);animation:spin .7s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.skel-card{background:var(--card);border:1px solid var(--hair-ink);border-radius:var(--r-card);
  padding:20px}
.skel-line{height:14px;border-radius:7px;background:linear-gradient(100deg,rgba(10,10,30,.06) 40%,rgba(10,10,30,.12) 50%,rgba(10,10,30,.06) 60%);
  background-size:200% 100%;animation:paneco-skel 1.2s ease infinite;margin-top:10px}
.skel-line:first-child{margin-top:0}
.skel-line.w40{width:40%}
.skel-line.w60{width:60%}
.skel-line.w80{width:80%}
.skel-hint{font-size:12.5px;color:var(--sub-2)}
@keyframes paneco-skel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── 语言切换下拉（v10 i18n；决策 1 形态 B，白卡 hairline 随浅色站 token） ── */
.langdd{position:relative;display:inline-block}
.langdd-btn{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  border:1px solid var(--hair-ink);background:var(--card);font-size:12.5px;font-weight:600;
  color:var(--sub);white-space:nowrap;
}
.langdd-btn:hover{color:var(--ink);border-color:var(--hair)}
.langdd-btn .car{flex:none;transition:transform .18s}
.langdd.open .langdd-btn .car{transform:rotate(180deg)}
.langdd-menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:168px;
  background:var(--card);border:1px solid var(--hair);border-radius:8px;
  box-shadow:0 14px 36px rgba(10,10,30,.16);padding:6px;display:none;
}
.langdd.open .langdd-menu{display:block}
.langdd-menu button{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  padding:8px 12px;border-radius:8px;font-size:13px;color:var(--sub);text-align:left;
}
.langdd-menu button:hover{background:rgba(9,65,151,.07);color:var(--ink)}
.langdd-menu button.on{color:var(--gold);font-weight:600}
.langdd-menu button .ck{visibility:hidden;font-size:12px}
.langdd-menu button.on .ck{visibility:visible}

/* ── en 排版补偿（§2.2：字号字重不变，仅调字距） ── */
body.en .topbar h1{letter-spacing:0}
body.en .nav-group-title{letter-spacing:.10em}
body.en .stat-card .sc-label{letter-spacing:0}
body.en .badge{letter-spacing:0}
body.en .tbl th{letter-spacing:.02em}
body.en .content table th{letter-spacing:.02em}
body.en .kicker{letter-spacing:.10em}
body.en .content label{letter-spacing:0}

/* ═══ v15 追加（2026-10-08）：一级认购三步收银台（M3）· co- 前缀新增组件 ═══
   来源：ui-demos/ico/index.html「本页新增组件」节（demo-bar 非产品 UI 不迁入）。
   色值全部引用既有 token（状态绿/红 = 现网 badge.active / badge.full 原值），零新颜色。 */

/* 网络徽章（自 chain-badge 派生，页面头右侧） */
.net-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  border:1px solid var(--hair);color:var(--gold);border-radius:999px;padding:2px 10px;
  background:rgba(9,65,151,.05)}
.net-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* 倒计时条：签名相关阶段常显（默认金 / .expired 红 / .done 绿） */
.co-countdown{display:flex;align-items:center;gap:10px;background:var(--card);
  border:1px solid var(--hair);border-radius:var(--r-card);box-shadow:var(--shadow);
  padding:12px 18px;margin-bottom:16px}
.co-countdown .cc-ic{color:var(--gold);display:inline-flex}
.co-countdown .cc-lab{font-size:12.5px;color:var(--sub)}
.co-countdown .cc-num{font-family:ui-monospace,Consolas,monospace;font-size:18px;font-weight:700;
  color:var(--gold);letter-spacing:.04em}
.co-countdown .cc-note{margin-left:auto;font-size:11.5px;color:var(--sub-2)}
.co-countdown.expired{border-color:rgba(185,67,67,.4);background:rgba(185,67,67,.06)}
.co-countdown.expired .cc-num,.co-countdown.expired .cc-ic{color:var(--danger)}
.co-countdown.done{border-color:rgba(40,125,96,.45);background:rgba(40,125,96,.06)}
.co-countdown.done .cc-num{color:var(--success);font-size:13px}

/* 三步纵向主流程卡 */
.co-steps{display:flex;flex-direction:column;gap:14px}
.co-step{background:var(--card);border:1px solid var(--hair-ink);border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:18px 20px;transition:border-color .2s,opacity .2s}
.co-step.pending{opacity:.62}
.co-step.active{border-color:var(--hair)}
.co-step.done{opacity:.88}
.co-step.failed{border-color:rgba(185,67,67,.4)}
.co-step-head{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.co-num{width:26px;height:26px;border-radius:50%;border:1px solid var(--hair-ink);flex:none;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;background:#fff;color:var(--sub)}
.co-step.active .co-num{border-color:var(--gold);color:var(--gold)}
.co-step.done .co-num{background:var(--gold);border-color:var(--gold);color:#fff}
.co-step.failed .co-num{border-color:rgba(185,67,67,.4);color:var(--danger)}
.co-title{font-size:14.5px;font-weight:650;flex:1}
.co-title .ct-sub{font-size:12px;color:var(--sub-2);font-weight:400;margin-left:8px}
.co-body{margin-left:38px}

/* 金额输入（VCU↔USDC 联动） */
.amt-wrap{display:grid;grid-template-columns:1fr 200px;gap:14px;margin-top:8px}
.amt-main{position:relative}
.amt-main input{padding-right:64px;font-size:18px;font-weight:650}
.amt-unit{position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:13px;font-weight:600;color:var(--sub)}
.amt-eq{border:1px dashed var(--hair);border-radius:var(--r-ctrl);background:rgba(9,65,151,.03);
  display:flex;flex-direction:column;justify-content:center;padding:8px 16px}
.amt-eq .ae-lab{font-size:11px;color:var(--sub-2);letter-spacing:.06em}
.amt-eq .ae-val{font-size:17px;font-weight:700}
.amt-eq .ae-val .u{font-size:12px;color:var(--sub);font-weight:500;margin-left:3px}
.amt-hints{display:flex;justify-content:space-between;gap:12px;margin-top:8px;flex-wrap:wrap}

/* 订单摘要 hash 行 */
.co-hashline{margin-top:12px;font-size:12px;color:var(--sub);word-break:break-all;line-height:1.8}
.co-hashline b{font-weight:600;color:var(--sub)}
.co-hashline button{margin-left:8px;font-size:11.5px;color:var(--gold);border-bottom:1px dashed var(--hair)}

/* Flow State 面板（链上支付状态三元组） */
.flowstate{border:1px solid var(--hair-ink);border-radius:var(--r-ctrl);padding:4px 14px;margin-top:12px;
  background:rgba(10,10,30,.015)}
.fs-title{font-size:11px;letter-spacing:.1em;color:var(--sub-2);padding:10px 0 2px;text-transform:uppercase}
.flowstate .rline{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(10,10,30,.06);font-size:13px}
.flowstate .rline:last-child{border-bottom:none}
.flowstate .rline .rk{color:var(--sub);font-size:12.5px}
.flowstate .rline .rv{font-weight:600;display:flex;align-items:center;gap:8px;word-break:break-all;text-align:right}
.flowstate .rline .rv .u{font-size:11.5px;color:var(--sub-2);font-weight:500}

/* 活动记录（逐条时间戳，终态行着色） */
.co-log{margin-top:14px;border-top:1px solid var(--hair-ink);padding-top:8px}
.co-log .lg-title{font-size:11px;letter-spacing:.1em;color:var(--sub-2);margin-bottom:2px;text-transform:uppercase}
.log-row{display:flex;gap:12px;align-items:baseline;padding:5px 0;font-size:12.5px;color:var(--sub)}
.log-row .lg-t{font-family:ui-monospace,Consolas,monospace;font-size:11.5px;color:var(--sub-2);flex:none}
.log-row.ok{color:var(--success)}
.log-row.bad{color:var(--danger)}

/* 步骤内主操作行 / 备注 */
.co-actions{display:flex;gap:10px;align-items:center;margin-top:14px;flex-wrap:wrap}
.co-note{font-size:11.5px;color:var(--sub-2);line-height:1.7;margin-top:8px}

/* 交接基线响应式（§七）：390 可点；主操作触达 ≥44px 为验收项 */
@media (max-width:640px){
  .amt-wrap{grid-template-columns:1fr}
  .co-countdown{padding:8px 12px;flex-wrap:wrap;gap:8px}
  .co-countdown .cc-note{margin-left:0;width:100%}
  .co-step{padding:14px 14px}
  .co-body{margin-left:0}
  .flowstate .rline{flex-direction:column;align-items:flex-start;gap:2px}
  .flowstate .rline .rv{text-align:left}
}
@media (pointer:coarse){
  .co-actions .btn{min-height:44px}
}

/* 规范：正文可读宽度 55-75ch */
.page-head .ph-sub,.lede,.hint{max-width:72ch}

/* 规范：尊重 prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* v3.2：navy 侧栏内按钮白字体系（连接/断开） */
.wallet-box .btn-ghost, .wallet-box .btn-ghost:hover,
.wallet-box .btn-plain, .wallet-box .btn-plain:hover,
.sidebar-foot .btn-ghost, .sidebar-foot .btn-plain {
  color: #FFFFFF; border-color: rgba(247, 247, 247, .32); background: transparent;
}
.wallet-box .btn-ghost:hover, .wallet-box .btn-plain:hover {
  border-color: rgba(247, 247, 247, .6); background: rgba(247, 247, 247, .08);
}