/* v2 控制台示意图：白底、发丝线分层、浅底药丸徽标。类名与 v1 一致，仅换主题。 */
/* 图内文字与间距整体等比缩小约 0.85。
   理由：这些图是「一个应用的截图缩小后贴进页面」，真实后台跑在 1440 以上的
   窗口里，缩到 1072 宽之后字自然该比页面正文小一档。此前图内字号与正文相当，
   于是它们读起来像页面上的组件而不是截图。
   做法是在 .cs 作用域里覆写令牌——图内所有规则都引用令牌，改这一处就等比带动
   字号、内边距、圆角、行距。不用 transform: scale()：那会让 scrollWidth 这类
   几何断言测到布局值而非视觉值，1072 版心与内部裁切那几条闸会全部失真。 */
.cs {
  --fs-h2: 17px;
  --fs-body: 14px;
  --fs-small: 12px;
  --fs-micro: 11px;
  --sp-2: 7px;
  --sp-3: 10px;
  --sp-4: 14px;
  --sp-5: 20px;
  /* 产品方批注：示意图内部 UI 用 2px 微圆角——先后试过全直角（太突兀）、2px（仍偏硬），5px 定稿。
     圆形图标与胶囊徽标不在此列——它们是显式 50%/20px，不吃这两个令牌。 */
  --radius: 5px;
  --radius-sm: 5px;
}
/* 大控制台图与轮播示意卡同一种「浮起」风格（产品方批注）：描边换柔和阴影。
   轮播面板作用域里已覆写成无框透明不受影响；阴影会被 .scroller 的
   overflow 裁掉，配套在 .scroller 上留出阴影空间（见 layout.css）。 */
.cs {
  position: relative;
  min-width: 900px;
  background: var(--white);
  border: 0;
  border-radius: var(--radius-shell);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  font-size: var(--fs-small);
  color: var(--body);
}
.cs__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  /* 产品方批注：surface 太浅看不出顶栏——调色板 17 值里比它深一档的
     只有 --line，直接用；不新增色值。 */
  background: var(--line);
}
.cs__brand { display: flex; align-items: center; gap: var(--sp-3); color: var(--ink); font-weight: 600; }
.cs__brand::before {
  content: "A"; display: grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  font-size: var(--fs-micro); font-weight: 600;
}
.cs__user { font-size: var(--fs-micro); color: var(--weak); text-align: right; }

.cs__layout { display: grid; grid-template-columns: 180px 1fr; }
.cs__nav { border-right: 1px solid var(--line); padding: var(--sp-4) 0; display: flex; flex-direction: column; }
.cs__nav-group { font-size: var(--fs-micro); color: var(--weak); padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.cs__nav-item { padding: var(--sp-2) var(--sp-5); color: var(--body); display: flex; align-items: center; gap: var(--sp-2); }
.cs__nav-item--active {
  color: var(--accent); font-weight: 500;
  background: var(--surface);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--sp-5) - 2px);
}
/* 图标不设色，跟随 .cs__nav-item 的 color（含 --active 态）自动变化。
   currentColor 直接吃 svg 元素自己 computed 的 color，选中态无需重复声明。 */
.cs__nav-ic { width: 13px; height: 13px; flex: none; }
/* 「设置」跟前面几项性质不同（产品方原话），margin-top: auto 把它推到
   导航底部——.cs__nav 是 .cs__layout 网格里的一列，天然拉伸到跟 .cs__main
   等高，auto 外边距总有多余高度可推；分隔线+ 顶部留白进一步跟上面拉开。 */
.cs__nav-item--foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.cs__main { padding: var(--sp-5); }
.cs__h { font-size: 16px; color: var(--ink); margin: 0 0 var(--sp-1); }
.cs__sub { color: var(--weak); margin: 0 0 var(--sp-5); font-size: var(--fs-micro); }

.cs__card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); padding: var(--sp-4); margin-bottom: var(--sp-4);
}
.cs__card-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
.cs__card-title { color: var(--ink); font-weight: 600; }
.cs__card-note { font-size: var(--fs-micro); color: var(--weak); }

.cs__table { width: 100%; border-collapse: collapse; }
.cs__table th {
  font-size: var(--fs-micro); font-weight: 500; color: var(--weak);
  padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line);
  letter-spacing: 0.04em;
}
.cs__table th:not(.cs__num) { text-align: left; }
.cs__table td { padding: var(--sp-3); border-bottom: 1px solid var(--line); color: var(--ink); }
.cs__table tr:last-child td { border-bottom: 0; }
/* 金额等数值：不用等宽西文，用 Inter 的表格对齐字形 */
.cs__num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* 链上地址、哈希、订单号：系统等宽栈 */
.cs__id { font-family: var(--font-mono); text-align: left; font-size: var(--fs-micro); white-space: nowrap; }
/* .cs__id 字号比 .cs__card-title 小，挂在卡标题上时补回原字号（继承自 .cs 的 --fs-small） */
.cs__card-title.cs__id { font-size: var(--fs-small); }
.cs__note { color: var(--warn-fg); font-size: var(--fs-micro); margin: var(--sp-3) 0 0; }
/* 中性政策说明句：装的是完整业务规则句，跟 .cs__note 结构角色相同，
   不该降到 --weak（白底 2.58:1，低于 WCAG AA），改用 --body 保证可读 */
.cs__note--muted { color: var(--body); }

/* 徽标：浅底药丸，同色系边框与文字 */
.cs__badge {
  display: inline-block; padding: 2px var(--sp-2); border-radius: 20px;
  font-size: var(--fs-micro); border: 1px solid;
}
.cs__badge--ok   { color: var(--ok-fg);   background: var(--ok-bg);   border-color: var(--ok-line); }
.cs__badge--warn { color: var(--warn-fg); background: var(--warn-bg); border-color: var(--warn-line); }
.cs__badge--risk { color: var(--risk-fg); background: var(--risk-bg); border-color: var(--risk-line); }
/* 中性徽标不引入新色，复用中性阶 */
.cs__badge--muted { color: var(--weak); background: var(--surface); border-color: var(--line); }

/* KYT 图专用的图内布局 */
.cs__cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--sp-4); }
.cs__cols .cs__card { min-width: 0; }
.cs__gauge { display: flex; align-items: center; gap: var(--sp-4); }
.cs__gauge svg { width: 96px; height: 60px; flex: none; }
.cs__gauge-num { font-size: 24px; color: var(--risk-fg); font-variant-numeric: tabular-nums; }
.cs__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.cs__action {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3); font-size: var(--fs-micro); color: var(--body);
}
.cs__cat { display: flex; align-items: center; gap: var(--sp-2); }
.cs__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }

/* 「界面示意」标注：figcaption 是页面级免责文本而非图内 UI chrome，用 --body */

/* 首屏总览图：只是引子不是完整界面，比其它 mk-* 图矮——同一套 .cs 类，
   只把内边距收紧，不另造样式体系。 */
.cs--compact .cs__main { padding: var(--sp-4); }
.cs--compact .cs__table th,
.cs--compact .cs__table td { padding: var(--sp-2) var(--sp-3); }

/* 四动作交互示意（#mk-actions，挂在 #s03-actions 的 .acts 列表下面）：产品方
   批注「下面这四格太拥挤了，改成横向轮播」——四格从并排改成横向轨道，一次
   只完整展示一格，格宽从并排时代的约 256px 变成整个版心宽度，格内内容可以
   横着铺开，纵向不再需要迁就四格里最高的那格，普遍矮下来。四格内部仍是
   .cs 及其下面这些既有组件（.cs__card / .cs__table / .cs__badge /
   .cs__summary / .cs__note）拼出来的四张缩小版控制台卡片，不新造视觉体系。
   唯一的例外仍是 .cs 自己的 min-width:900px：站上其它 mk- 或 dg- 前缀的图
   都是整栏通宽的单张控制台，min-width:900px 保证窄屏下仍按桌面控制台的比例
   显示、靠 .scroller 横向滚动；这四格现在虽然各自撑满版心宽度，但版心本身
   在窄屏会跌破 900px，继续套这条下限会把面板顶宽、连锁触发横向滚动与内部
   裁切，因此仍在 .mk-actions 这个容器的作用域内把 .cs 的下限清零，不影响
   其它任何地方的 .cs。
   实现不引入任何框架或脚本库，纯 CSS scroll-snap：.mk-actions 本身就是横向
   滚动轨道（flex 一行、overflow-x:auto、scroll-snap-type:x mandatory），
   四个 .cs 面板各自 flex:none、宽度撑满轨道可视宽度、scroll-snap-align:
   start，停下来时永远整格对齐版心。触屏原生滑动即可，没有另写手势逻辑。
   data-carousel 这个标记专给 tools/shoot.sh 的 wide-1072 断言用：那条断言
   原本假设 .scroller 的内容不许比版心宽，轮播恰恰是刻意的横向滚动，正面
   冲突这条假设。改法不是把这一格从断言里排除，而是换判据——带这个标记的
   元素改成断言「每一个面板自身宽度不超过 .scroller 的可视宽度」，即任何
   一格停下来都必须整格可见，不许某一格自己比版心还宽；这条新判据依然抓
   真实回归（面板被撑宽、停下来时看不全），只是不再误伤「轨道总宽本来就该
   比可视区宽」这个轮播的正常状态。没有这个标记的 .scroller 不受影响，仍按
   原判据整条内容不许超版心。 */
.mk-actions {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* 轨道是滚动容器，会把贴边示意卡的阴影按自身边界裁掉：上/右/下留出
     阴影空间、等量负外边距抵消占位——卡的右缘仍精确落在 1072 版心右缘，
     阴影画进多出来的空隙里。左侧不留：卡在面板右半，左侧阴影落在透明
     面板区域内本来就可见。 */
  padding: 12px 24px 40px 0;
  margin: -12px -24px -40px 0;
}
/* 产品方批注「这几张图不用占满整个宽度，自然宽度就可以了」：格宽从强制
   width:100% 改成内容驱动——flex:none 配 width:auto 让格子按自身内容的
   偏好宽度撑开，不再被拉满整条轨道；下一格因此会在版心右侧露出一小段，
   这段露出本身就是「还有更多」的提示，不需要另加箭头之类的装饰。
   max-width:100% 是硬兜底：窄屏（如 390 档）下内容偏好的宽度很可能超过
   版心本身，兜住之后这一格仍然整格停在版心内可见——tools/shoot.sh 断言
   「任何一格的 scrollWidth 不超过 .scroller 的 clientWidth」守的正是这条，
   删掉这行上限就会在窄档破这条断言。 */
.mk-actions .cs {
  min-width: 0;
  flex: none;
  width: 100%;
  scroll-snap-align: start;
}
/* 产品方批注「滚动条太突兀了，能隐藏么」：只隐藏滚动条这个视觉元素，
   横向滚动能力照常保留（键盘、触屏、滚轮都还能滚），可发现性改由下面
   index.html 底部脚本的自动轮播 + 已有的指示器高亮承担。 */
.mk-actions {
  scrollbar-width: none;
}
.mk-actions::-webkit-scrollbar {
  display: none;
}

/* 四格面板头：取代原来的 .cs__bar（控制台品牌名 + A 字母徽标 + 资金运营 ·
   陈立 / 汇启支付），改成该动作自己的图标 + 动作名——批注原话「用 01 账户
   关联、02 创建交易、03 查询余额、04 接收通知来取代」。复用 .cs__bar 同一条
   顶栏视觉（发丝线分隔 + --surface 底），图标不单独设色，跟随本身 color
   （currentColor 直接吃 svg computed color），标题变色图标也跟着变。 */
/* 面板头搬进左列（参考图里编号与标题就在左列内部，不是一条通栏帽子）：
   通栏头会让左列只剩说明句加两三条要点、下面一大片空白，而右边窄卡有 380px 高。
   标题回到左列后左右两列才都有分量。 */
/* 左列是页面文字不是图内文字，所以不吃 .cs 那套缩小 0.85 的令牌，
   显式用页面级字号。产品方原话：「左侧的文字应该适当权重加大，因为文字不是
   示意图的文字了，这样高度上面左侧就和右侧会比较接近了」。
   编号做成参考图里那种深色圆角徽标，标题独立一行大字。 */
.mk-actions__head { display: flex; align-items: baseline; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
/* 编号不用参考图那种深色方块徽标——那是它的签名式样，跟本站白底细线、
   唯一重色是强调蓝的语言不合。站上本来就有一套 01–04 的写法：轮播上方那排
   指示器（.acts__link span）就是小号强调蓝数字加深色标题，这里照它来，
   顺带让标题与指示器在视觉上对上。 */
.mk-act__num {
  flex: none; color: var(--accent); font-weight: 500;
  font-size: var(--fs-micro); font-variant-numeric: tabular-nums;
}
.mk-act__title { color: var(--ink); font-weight: 600; font-size: 24px; line-height: var(--lh-tight); }
.mk-act__text .cs__sub { font-size: 16px; color: var(--body); margin: 0; }

/* 徽标断行：约 206px 的格内宽度下，「生效中」「待审批」这类三字词在默认
   换行下会被逼着断成「生效／中」「待审／批」——药丸标签本就该整体不换行。
   曾试过直接给全局 .cs__badge 加 white-space: nowrap，结果在 w390 这一档
   把 #mk-orders 状态列的徽标也顶成不换行，连带把那张表的自然宽度从
   898px 撑到 915px，被 .cs 的 overflow:hidden 悄悄裁掉一截（实测命中，
   check_no_internal_clip 断言当场报错）——那张表本来就已经在窄屏挤到
   临界宽度，任何一处徽标变宽都会把它顶过去。改成只在 .mk-actions 作用域
   内生效，不影响站上其它整栏宽处（含 #mk-orders）的徽标。 */
.mk-actions .cs__badge { white-space: nowrap; }

/* mk-match 曾经在这里被强收成单列：四格并排年代每格只有约 256px，两列各自
   不到 90px，装不下 merchant_id/账户号这类 cs__id 不换行的值。改成横向轮播
   后每格撑满版心（约 1072px），两列各自还有约 500px 空间，装得下这些值，
   这条覆写连同它的历史成因一起撤掉——不留一条已经不成立的窄屏专用规则。
   mk-match 回落到自己在别处定义的默认两列，跟站上其它整栏宽处的 mk-match
   共用同一套 480px 断点降级，不再需要 .mk-actions 作用域内的例外。 */

/* 卡片标题劈词：「自资账户 · 汇启支付」在约 206px 的格内宽度下，默认的
   CJK 逐字断行会在词中间随意断开（实测断成「…汇启支」+「付」），跟上面
   徽标断行是同一类问题，但不能照搬 white-space: nowrap 那条思路——标题
   本身比格宽还长，硬不换行只会把 .cs__card-head 撑宽、被 .cs 的
   overflow:hidden 悄悄裁掉一截，比劈词更糟。改用 word-break: keep-all：
   让「自资账户」「汇启支付」各自处理成不可拆的词，只许在「 · 」两侧的
   空格处折行，两个词各自不会被从中间断开，且行内该换行时仍正常换行，
   不触发横向裁切。只在 .mk-actions 作用域内生效，站上其它整栏宽处的卡片
   标题够宽，不需要这条规则。 */
.mk-actions .cs__card-title { word-break: keep-all; }

/* 「账户关联」格里的外键匹配两列对照：左列是机构侧上传的字段与值
   （商户标识、名称），右列是平台侧生成的账户号与按链分配的入金地址。
   两列各自只是普通文字流（标识本身用 .cs__id 不换行，标签允许换行），
   不强制单行，因此不会在窄格里被裁掉或撑出横向滚动。三档截图里最窄
   的一档（<=480px）这一格的可用宽度已经压到最紧，收起成单列，给
   标识文本留出足够宽度。 */
.mk-match {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: var(--sp-3); margin: 0 0 var(--sp-3);
}
.mk-match__list { list-style: none; margin: 0; padding: 0; }
.mk-match__list li {
  padding: var(--sp-1) 0; border-bottom: 1px solid var(--line);
}
.mk-match__list li:last-child { border-bottom: 0; }
.mk-match__k { color: var(--weak); margin-right: var(--sp-1); }
@media (max-width: 480px) {
  .mk-match { grid-template-columns: 1fr; }
}

/* 余额汇总卡：三个并排的小计数字，跟 .cs__card 平级的另一种卡片形状。
   仍用于 #mk-hero 总览；#mk-actions 的「查询余额」格这一拨改成状态一级 /
   资产二级的分组行列表（见下面 .mk-balance），不再用这套并排小计的形状，
   之前专门为它加的 .mk-actions .cs__summary { flex-direction: column }
   覆写随内容一起撤掉，不留一条指向已不存在用法的死规则。 */
.cs__summary { display: flex; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.cs__summary-item {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.cs__summary-label { display: block; font-size: var(--fs-micro); color: var(--weak); margin-bottom: var(--sp-1); }
.cs__summary-num {
  display: block; font-size: var(--fs-h2); color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* 「创建交易」格（#mk-actions 第二格）重做：产品方两次点名——原来是
   「标签 + 已选值 + 候选提示」的纯文本行列表（.mk-config，本次随内容一并
   删除），只看得到一个填好的表单，看不出「这里其实是可以选的」。改成
   参考图（review-shots/20260820-131a44.png）那套配置对话框视觉语言：
   填充框字段（标签在上、浅灰底值框、右侧单位）+ 候选项列表（把全部选项
   摆出来，不止显示已选中的那一个）+ 通栏主按钮，是这份视觉语言里新引入
   的一组类，其余三张窄卡如果以后需要同款表单元素可以直接复用。 */

.mk-form { margin: 0; }
/* 第四轮批注「创建交易」再紧凑一点：.mk-field 系列在 act-1（账户关联）与
   act-2（创建交易）共用，这里把字段间距、标签与填充框内边距一并收紧——
   act-1 顺带矮一点点是这条收紧的自然结果，不是专门去改它。 */
.mk-field { margin: 0 0 var(--sp-3); }
.mk-field:last-child { margin-bottom: 0; }
.mk-field__label {
  display: block; margin: 0 0 var(--sp-1);
  color: var(--ink); font-weight: 600; font-size: var(--fs-small);
}
/* 填充框：浅灰底、圆角直接用 --radius——.cs 作用域内它已经被覆写成 8px，
   跟参考图字段框的圆角量级一致，不必再另起一份数值。值与右侧单位同一行
   两端对齐，用 baseline 对齐两种不同字号的文本底线。 */
.mk-field__box {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  background: var(--surface); border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-4);
}
.mk-field__val { color: var(--ink); font-weight: 600; font-size: var(--fs-body); }
.mk-field__unit { color: var(--weak); font-size: var(--fs-micro); white-space: nowrap; }

/* 候选项列表：产品方原话「之前的明确出来能选择什么，链，收款模式之类
   的」——这一格的要点是摆出全部候选项，让人看出每一项都有得选，不是只
   看一个填好的值。未选中行是浅灰块，选中行改白底 + 蓝色边框 + 一圈淡蓝
   外环（--ring-accent，见 tokens.css，是 --accent 换算出的半透明版）。
   左侧圆形图标复用新增的 #ic-node，抽象成通用的代币/网络记号，不代表
   任何具体链的真实图标。 */
.mk-pick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mk-pick__item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
  background: var(--surface); border: 1px solid transparent;
}
.mk-pick__item--sel {
  background: var(--white); border-color: var(--accent); box-shadow: var(--ring-accent);
}
.mk-pick__icon {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); color: var(--white);
  display: flex; align-items: center; justify-content: center;
}
.mk-pick__icon svg { width: 11px; height: 11px; }
.mk-pick__label { color: var(--ink); font-size: var(--fs-small); }

/* 回执信息条：交易号 + 审批状态徽标，放在候选项列表与主按钮之间——原来
   挂在 .mk-config 最后一行，现在单独成一条，不再套进候选项列表的形状里。 */
.mk-form__receipt {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) 0; margin: 0 0 var(--sp-4);
  border-top: 1px solid var(--line);
}

/* 通栏主按钮：亮蓝底白字、圆角，带一个小前导图标——复用 #ic-check（勾形），
   跟参考图 Confirm 按钮同一个语义（提交这份配置）。字号/间距沿用 .cs
   作用域令牌，因为这个按钮本身嵌在 .cs 卡片内，不必再乘一次 0.85。这里
   不复用站上页面级的 .btn/.btn--primary——那一套是给整栏宽处的真链接按钮
   用的页面级字号，套进 400px 窄卡会显得过大。 */
.mk-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; border: 0; border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body); font-weight: 600; font-family: inherit;
}
.mk-btn svg { width: 15px; height: 15px; flex: none; }
.mk-btn--primary { background: var(--accent); color: var(--white); }

/* 「查询余额」格（#mk-actions 第三格）顶部三个数：产品方原话「顶部现在
   就按照可用、待确认、已占用，但都是以美元来计价」——独立于下面按状态
   分组的明细，统一美元折算。跟站上已有的 .cs__summary（三列并排小计）
   同一种结构角色，但那一套是给整栏宽处设计的三列卡壳，数字撑进 400px
   窄卡会被逼成两行；这里另起一个更紧凑的版本：三列等宽栅格、去掉每列
   自己的边框卡壳，只留标签+数字两行，跟下面的分组明细共用一条发丝线
   分隔。三个数必须等于下面对应分组明细的美元折算之和——见 index.html
   里这一段的自洽算式注释。
   第四轮批注「高度再紧凑一点」：这一格（顶部三个数 + 下面三组明细）是
   四格轮播里最高的一格，四格由它撑到等高，因此只压这一格的间距（下面
   .mk-balance 同理）——顶部三个数、三组明细、每组内的具体条目一条不少，
   压缩的只是行间距，不是内容。 */
.mk-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3); margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2); border-bottom: 1px solid var(--line);
}
.mk-stats__label { display: block; color: var(--weak); font-size: var(--fs-micro); margin-bottom: 2px; }
.mk-stats__num {
  display: block; color: var(--ink); font-weight: 600; font-size: var(--fs-small);
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

/* 「查询余额」格分组明细：产品方原话要把状态做成一级、资产做成二级——
   三个状态（可用 / 待确认 / 已占用）竖排分组，复用现成的 .cs__badge 当
   组名（可用用 --ok、待确认用 --warn、已占用用 --muted，跟站上其它地方
   这三个状态的徽标配色一致，不新增一套颜色语义），组内再展开到具体明细
   各自一行。可用组按资产展开（数量 + 等值），已占用组同样按资产展开
   （数量 + 占用原因）；待确认组这一拨改成按「笔」展开而不是按资产——
   产品方原话「待确认的，应该体现出来有多笔交易，每笔都有确认时间」，
   一笔一行、各自带自己的确认时间，不再是「资产 + 还需几个确认」的旧形状。
   三组都不做跨资产/跨笔合计到组内小计——组名旁边没有再放数字，组内数字
   合计的正确性由上面 .mk-stats 顶部三个数校验，两处独立展示、互相印证。
   等值美金只在 USDT/USDC 这类锚定资产的行上给一个数字，不出现汇率或
   换算说明，见 index.html 里这一段的详细注释。 */
.mk-balance__group { margin: 0 0 var(--sp-1); }
.mk-balance__group:last-child { margin-bottom: 0; }
.mk-balance__item { margin-top: var(--sp-1); }
.mk-balance__row { display: flex; justify-content: space-between; gap: var(--sp-2); }
.mk-balance__asset { color: var(--ink); font-weight: 600; }
.mk-balance__amt {
  color: var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.mk-balance__meta { margin: 0 0 0 auto; padding-left: var(--sp-2); color: var(--weak); font-size: var(--fs-micro); white-space: nowrap; }

/* 四格改「左文右窄卡」：产品方原话「左边加些文字，右边就可以是一个窄图」，
   参照 review-shots 里 BVNK 的示意，把整格从「一张通宽控制台」拆成左侧
   要点文字加右侧一张收窄的示意卡。左列排要点，右列把原有界面示意内容
   原样搬进来，只收窄宽度、内部重排，不改数值与文案。桌面并排、900px 以下
   回落成上下堆叠（文字在上，窄卡在下）——跟站上其它响应式断点（.four、
   .forms）同一个 900px 基准，不单起一套。 */
/* 左列相对右侧窄卡垂直居中：左列只有标题、一句说明与两三条要点，
   顶对齐会在左下留一大片空白（右卡有 380px 高），参考图里左块也是居中的。 */
/* 四格等高由最高那格（创建交易）决定，内容少的格子会在下方留一大片空白——
   因为内容块只在自己高度内居中、整块却贴在面板顶部。让 .cs__main 撑满面板并
   把内容块垂直居中，空白就均分到上下两侧，不再是底部一大块。 */
.mk-actions .cs { display: flex; flex-direction: column; }
.mk-actions .cs__main { flex: 1 1 auto; }
/* 左列与右侧示意卡顶部对齐（产品方批注）。此前垂直居中——当时左列只有
   两三行；改成页面级字号后左列有了分量，顶对齐更像参考图。 */
.mk-act { display: flex; align-items: flex-start; gap: var(--sp-5); }
/* 外框去掉（产品方批注）：轮播面板不再画边框与底色，视觉上只剩左侧文字
   与右侧带阴影的示意卡。宽度与吸附行为不变。 */
.mk-actions .cs { border: 0; background: transparent; box-shadow: none;
  /* 面板间留一条与轨道右侧阴影空隙同宽的间隔：否则那 12px 空隙里会露出
     下一格的一条边——产品方定过「一个一个来」，一条边也不该露。 */
  margin-right: 24px;
  /* .cs 基类的 overflow:hidden 在这里是纯遗留——面板已是透明容器，
     留着会把右侧示意卡的阴影按面板边界裁掉（卡贴着面板右缘）。 */
  overflow: visible; }
/* 左文与上下屏左对齐、示意卡与上下屏右对齐（产品方批注）：面板去框后
   内边距也清零，left 贴版心左缘、400px 示意卡贴版心右缘。 */
.mk-actions .cs__main { padding: 0; }
/* 四张示意卡高度统一到第一张的自然高度（产品方批注「内容相应增减」——
   act-4 从 10 条减到 6 条、act-3 删一行待确认、act-2 去按钮并让收款模式
   芯片换行，都是为了装进这个高度）。 */
.mk-act__demo { height: 340px; }
/* act-2 收款模式芯片：横向排、放不下换行，比三行竖排省约一半高。 */
.mk-pick--wrap { flex-direction: row; flex-wrap: wrap; }
.mk-pick--wrap .mk-pick__item { flex: 0 1 auto; padding: var(--sp-2) var(--sp-3); }
.mk-act__text { flex: 1 1 auto; min-width: 0; }
/* 窄卡宽度锁定 400px（要求区间 380 到 420px），自己起一层边框与白底，跟
   外层 .cs 面板区分成卡中卡——已有 .cs__card 就是这个视觉语言，这里单起
   一条规则只是因为宽度需要单独锁定，不是新造一套视觉。max-width:100% 兜住
   900px 以下堆叠时容器本身可能比 400px 还窄的情况。 */
.mk-act__demo {
  flex: 0 0 400px; width: 400px; max-width: 100%;
  border: 0; border-radius: var(--radius-shell);
  background: var(--white); padding: var(--sp-5);
  box-shadow: var(--shadow-card);
}
/* 「账户关联」格（act-1）改表单卡语言后，四格窄卡里再也没有 .cs__card
   用法（产品方原话「完全不像示意图……没有 bvnk 那个卡片的效果」——带 1px
   边框的卡中卡换成 .mk-field 的「标签 + 浅灰填充框」，跟 act-2 同一套
   语言）。这条 .cs__card:last-child 覆写此前只为 act-1 内两张 .cs__card
   最后一个不留多余下边距而写，现在没有任何 .cs__card 落在 .mk-act__demo
   作用域内，跟着内容一并删掉，不留一条指向空用法的死规则。 */
/* mk-match 两列对照在 400px 窄卡里各自约 180px——实测装得下 merchant_id
   这类 cs__id 不换行的值（标签与值之间的空格仍是正常换行点，值本身不会被
   逼着从中间断开），不需要额外收成单列；480px 视口断点那条降级规则
   继续按视口宽度独立生效，两条各管各的场景，不冲突。 */
/* 通知列表窄卡里第一列是时间戳，不能被两列布局逼着从中间断开换行 */
.mk-act__demo .cs__table td:first-child { white-space: nowrap; }

/* 第四轮批注取代了早前「凑到 20 个」的要求：产品方原话「不要再有纵向
   滚动条了吧，最好就跟当前轮播的外框高度匹配，基本撑满就好」——纵向
/* 左列要点：产品方参照 BVNK 示意要的两三条打勾要点，复用线性图标 sprite
   里的 ic-check，颜色跟随强调色，不新增语义色。
   （这两条规则曾被一次清理死代码的贪婪正则误伤——容器规则被整条吃掉、
   li 选择器被拼上注释残句变成废话选择器，页面上勾选图标撑到两百像素、
   原生列表圆点全部冒出来。lint 与单测都不查 CSS 合法性，全绿通过了。） */
.mk-act__points { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.mk-act__points li { display: flex; align-items: flex-start; gap: var(--sp-3); color: var(--body); font-size: 15px; line-height: var(--lh-body); }
.mk-act__points svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); }

@media (max-width: 900px) {
  .mk-act { flex-direction: column; }
  .mk-act__demo { flex: 0 0 auto; width: 100%; max-width: 420px; }
}

/* mk-yield（第 9 屏理财）、mk-custody-pick（第 8 屏交付形态）：两屏都不是
   #s03-actions 那种左文右窄卡的分栏版式，文字居中、窄卡跟在文字下方单独
   居中，没有 .mk-act 那层 flex 容器可以借。窄卡本身还是要用 .mk-act__demo
   这张卡（400px、白底、投影、无边框），并且卡内文字要套 .cs 的令牌缩放
   （--fs-h2/--fs-body 等 0.85 那套），因此这两张卡的外层元素同时挂 .cs
   与 .mk-act__demo 两个类——但 .cs 自己的控制台外框（900px 下限、1px 边框、
   overflow:hidden）会跟 .mk-act__demo 自己的边框/背景叠成新的卡中盒中盒，
   正是这次要去掉的问题，不能在这里重新引入。.mk-act__demo 在源码里排在
   .cs 后面，同优先级下 border/background 已经是 .mk-act__demo 的声明生效，
   只有 min-width:900px 没人覆写、会把窄卡强行撑到 900px（min-width 的
   优先级高于 width），这里单独清零；overflow 顺手交给 visible，不依赖
   box-shadow 不受同元素 overflow 影响这条隐含行为。 */
.cs.mk-act__demo { min-width: 0; overflow: visible; }

/* 窄卡水平居中：这两屏本身是普通块级流（不是 flex/grid 容器），
   .mk-act__demo 的 width:400px + max-width:100% 只锁宽度不负责居中，
   margin:0 auto 让它在 .wrap 版心内居中，跟旁边居中的主张句对齐。 */

/* mk-yield（理财窄卡）资产行：参照 review-shots/20260820-0bf7bb.png（BVNK
   Store funds）——图标 + 币种 + 金额一行、浅灰底圆角。行外壳直接复用
   .mk-pick__item / .mk-pick__icon（圆形图标、surface 底、圆角，跟候选行
   一模一样），只有图标右侧的内容跟 .mk-pick__label 的单行候选文字不同：
   这里要塞「币种名」+「金额」两行，新增这一小组类只管这一处的两行排版，
   不复制 .mk-pick__item 已有的行外壳属性。 */
.mk-yield__meta { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; gap: 2px; }
.mk-yield__asset { color: var(--weak); font-size: var(--fs-micro); }
.mk-yield__amt {
  color: var(--ink); font-weight: 600;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
/* 每行右侧的 APR 示意：产品方批注「右侧是不是应该类似一个理财的 apr 之类
   的示意，提示能收益呀」。跟金额一样右对齐、不换行，颜色借用既有的
   --ok-fg（跟卡头「生息中」徽标同一枚语义色，控制台示意图内部作状态，
   符合调色板规则），提示这是正向收益数字。这三行文案是全站唯一提 APR
   的地方——tools/lint_content.py 的 _rule_price 按 #mk-yield 这个元素 id
   单独开了窄口子，别处写同样的字样仍会被拦，见该文件里的注释与
   README.md 上线前必核清单。 */
.mk-yield__apr { flex: none; color: var(--ok-fg); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }


/* s09 三卡组：On-/Off-ramp、外币兑换、闲置余额理财并排，共用表单卡语言，
   三等分 1072 版心（约 347px 一张）。.cs 基类带 min-width: 900px，
   这里必须清零，否则三张 900px 的卡会把 .scroller 撑爆、内容被
   overflow: hidden 吃掉——这正是这个仓库翻过车的那类内部裁切。
   窄屏回落成上下堆叠。 */
/* 顶对齐 + 高度一致（产品方批注）：stretch 本义就是两者兼得——
   顶边同一水平线、三张拉到同一高度。 */
.mk-trio { display: flex; gap: var(--sp-4); align-items: stretch; }
/* 产品方批注：三卡的卡头做成「标签头」——跟控制台顶栏同一种灰底通栏条。
   负外边距抵掉卡的内边距让它贴满卡顶，圆角只保留上两角（跟外壳一致）。 */
.mk-trio .cs__card-head {
  background: var(--line);
  /* 三张卡头等高：exchange 没有状态徽标，content 比带徽标的矮一截，
     min-height 补到徽标行高。 */
  /* 三头等高取带徽标的总高 45px。注意全局 box-sizing: border-box，
     min-height 是含内边距的盒高——之前写 25 想当 content 高，被 40 的
     现高直接盖过，等于没写。 */
  min-height: 45px; align-items: center;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-shell) var(--radius-shell) 0 0;
}
.mk-trio .cs {
  flex: 1 1 0; min-width: 0;
  border: 0; border-radius: var(--radius-shell); background: var(--white);
  padding: var(--sp-5); box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
}
.mk-trio .mk-btn { margin-top: var(--sp-4); }
/* 兑换卡两个字段之间的换向圆钮，参考图里就是这个形态。 */
.mk-swap {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--white);
  display: flex; align-items: center; justify-content: center;
  margin: var(--sp-2) auto; color: var(--accent);
}
.mk-swap svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .mk-trio { flex-direction: column; }
}


/* act-2 网络候选改横排（产品方批注 13）：三条链一行放下，比竖排省两行高。
   芯片等分、内容居中，选中态沿用 --sel 的蓝边蓝环。 */
.mk-pick--row { flex-direction: row; }
.mk-pick--row .mk-pick__item { flex: 1 1 0; min-width: 0; justify-content: center; padding: var(--sp-2) var(--sp-2); }
/* act-4 通知事件必须单行（产品方批注 11）：换行的两条已把链名后缀删掉，
   这里锁住不许再折——若将来加长文案撑破卡宽，宽度断言与下面的探针会暴露。 */
.mk-act__demo .cs__table td { white-space: nowrap; }
/* 批注 11 是在 1440 档提的；340px 的窄卡上强制单行必然撑破——
   no-internal-clip 实测 396 > 340 逮住过。480 以下回落为可折行。 */
@media (max-width: 480px) {
  .mk-act__demo .cs__table td { white-space: normal; }
}


/* 兑换卡「买入」单位旁的小号币种圆标（产品方批注）。 */
.mk-pick__icon--sm { width: 16px; height: 16px; display: inline-flex; vertical-align: -3px; margin-right: 4px; }
.mk-pick__icon--sm svg { width: 9px; height: 9px; }
/* 国旗 emoji 是方图，放大到盖满圆容器再裁圆，跟旁边 USDT 圆标同尺寸对齐。 */
/* 裁圆用 clip-path 而不是 overflow:hidden——emoji 放大到 21px 必然溢出
   16px 容器，overflow:hidden 会被 no-internal-clip 断言判成事故性裁切
   （它分不清设计裁切与事故），clip-path 不动 overflow、断言不误伤。 */
.mk-flag { background: transparent; justify-content: center;
  clip-path: circle(50%); font-size: 21px; line-height: 16px; }