/* ==========================================================================
   engage.css — 粘性模块（可信状态 + 一键自检 · 打卡/连续天数 · 里程碑 · 配置一点即复制）
   --------------------------------------------------------------------------
   设计约束（站长原话）：
     「网站整体的风格要合适人类，要以简洁新颖高效率为主。」
     「反正要以简洁为主，方便为主，就像复制那个复制的功能一样，复制点击直接复制，
       而不是说多一个复制的按钮出来，这样子就很鸡肋。很啰嗦，很占页面。」
     「然后那个打占用太多了，迁移去我的里面 折叠起来」
     「然后解释不要直接展示，做个微型的圈内感叹号可以点击一下显示解释内容」
     「然后折叠你的成就，不要占用那么多地方」
     「整体简洁新颖高效」「手机UI优先」「以复制那种一步到位为准则」
   → 所以：整个状态行就是一个按钮（自检），配置行本身就是复制按钮，没有多余的
     「复制」按钮；没有弹窗、没有二次确认、没有关闭按钮；解释收进一颗微型 ⓘ；
     打卡与成就默认折叠，且折叠头就带着最有信息量的那个数。

   视觉语言：与页面既有组件同一套（读线上 CSS 得出，不是猜的）
     卡片      #fff / 1px rgba(23,34,63,.08) / radius 16px / 0 10px 30px rgba(23,34,63,.05)
     主蓝      #1d4ed8 · #2f6bff      青 #06b6d4
     绿        #10b981 · #059669      紫 #7c3aed
     文字      #17223f / #43557d / #5a6f9d / #7b8bb2 / #9aa9c9
     等宽      ui-monospace,Menlo,Consolas,monospace
     断点      520px（与页面 @media(max-width:520px) 一致）

   作用域（v4 起是**两个**宿主，两条选择器都写全）：
     #agv-engage     状态卡，住在「战报」
     #agv-engage-ck  打卡卡，住在「我的」
   为什么不合成一条 `[id^="agv-engage"]`：属性选择器的特异性只有 (0,1,0)，
   而 id 是 (1,0,0)。合并写法会让本模块的每条规则都掉一档特异性，页面里任何
   带 id 的规则都可能反过来盖住它。所以显式写两遍，特异性与原版逐字相同。
   类名统一 eg- 前缀，不会污染页面。

   两条硬规矩（写在这里，改这个文件前先读）：
     1) 字号**不得小于 12px**。上一轮刚把全站 <12px 的小字清干净，不许再引入。
     2) 可点元素的命中区**不得小于 44×44**。图标可以看着很小，但热区必须够大
        （做法见 .eg-info：padding 撑开 + 负 margin 收回占位）。
   ========================================================================== */

#agv-engage,
#agv-engage-ck {
  display: block;
  margin: 14px 0 0;
  /* 页面 body 是 user-select:none，这里保持一致；复制靠点击，不靠选中。 */
  -webkit-tap-highlight-color: transparent;
}
/* 「我的」里上面那张卡（身份权限）自己带下边距，这里只要一点点间隔。 */
#agv-engage-ck { margin: 12px 0 0; }

/* ==========================================================================
   首页那张卡：**只剩配置复制**（R10 末，站长第二次要求「首页自检那块删除掉不要」）。
   原来这里是一个状态卡（状态行 + ⓘ + 自检结果盒子 + 底部来源说明），
   现在整块 UI 删除，见 engage.js 的 renderConfigCard 注释。

   下面这条只是为了版式：`.eg-cfg` 本来是卡片里的**第二块**，自带 10px 上边距；
   现在它是卡片里唯一的内容，那 10px 会变成纯多余的空隙，所以第一个孩子清零。
   （.eg-status / .eg-statusline / .eg-row / .eg-dot / .eg-txt / .eg-res 这些规则
    暂时没有使用者了。留着不影响渲染，但**不要**以为它们还在生效 —— 下次改
    状态卡相关样式前先确认元素是否还存在。） */
#agv-engage .eg-cfgcard .eg-cfg:first-child { margin-top: 0; }

#agv-engage .eg-card,
#agv-engage-ck .eg-card {
  background: #ffffff;
  border: 1px solid rgba(23, 34, 63, .08);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 10px 30px rgba(23, 34, 63, .05);
  position: relative;
  overflow: hidden;
}
#agv-engage .eg-card + .eg-card,
#agv-engage-ck .eg-card + .eg-card { margin-top: 12px; }

/* ==========================================================================
   0) 微型「圈内感叹号」—— 解释按需展开
   视觉 16px 的圆圈，命中区 46×46（≥44）。负 margin 把**纵向**占位收回 16px，
   横向保留 46px：压过去的话，"自检"那颗药丸的右半边会被这颗 ⓘ 抢走点击。
   ⚠ 两件事不能改：
     1) padding / margin 的数值 —— 改小就是把热区做小；
     2) 按钮**不能**加 border-radius —— 实测（elementFromPoint 四角 + 中心）：
        圆角会让 Blink 把命中区缩成 46px 的**内切圆**，四角全部点不到
        （[false,false,false,false,true]）。所以圆角只画在里面的 .eg-info-i 上，
        按钮本体保持方角：视觉一样，热区是完整的 44×44。
   ========================================================================== */
#agv-engage .eg-info,
#agv-engage-ck .eg-info {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px;            /* 命中区：16 + 15 + 15 = 46px */
  margin: -15px 0;          /* 纵向收回占位；横向保留 46px（不与相邻按钮抢点击） */
  border: 0;
  background: transparent;
  color: #7b8bb2;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#agv-engage .eg-info:active,
#agv-engage-ck .eg-info:active { color: #1d4ed8; }
#agv-engage .eg-info:focus-visible,
#agv-engage-ck .eg-info:focus-visible { outline: 2px solid rgba(29, 78, 216, .55); outline-offset: -2px; }
#agv-engage .eg-info[aria-expanded="true"],
#agv-engage-ck .eg-info[aria-expanded="true"] { color: #1d4ed8; }
#agv-engage .eg-info[aria-expanded="true"] .eg-info-i,
#agv-engage-ck .eg-info[aria-expanded="true"] .eg-info-i {
  background: rgba(29, 78, 216, .12);
  border-color: #1d4ed8;
}
#agv-engage .eg-info-i,
#agv-engage-ck .eg-info-i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  /* 字号下限 12px（全站硬规矩）。 */
  font-size: 12px;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  text-transform: none;
}
/* 解释正文：默认 hidden（JS 控制），字号 12px，比旧的常驻小字更好读一点。 */
#agv-engage .eg-info-note,
#agv-engage-ck .eg-info-note {
  flex: 1 1 100%;
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  background: rgba(23, 34, 63, .035);
  border: 1px solid rgba(23, 34, 63, .07);
  color: #43557d;
  font-size: 12px;
  line-height: 1.75;
}
#agv-engage .eg-info-note[hidden],
#agv-engage-ck .eg-info-note[hidden] { display: none; }
#agv-engage .eg-info-note b,
#agv-engage-ck .eg-info-note b { font-weight: 800; color: #17223f; }

/* ==========================================================================
   1) 状态行 —— **纯展示**，不是按钮（R10 末，站长要求去掉手动自检）。

   原来整行是一个「点我自检」的按钮。站长说「都有自动了，没有意义」——
   自检现在进页面自动跑，所以那个按钮做的事和自动做的完全一样，
   只是让用户以为"必须点一下才算数"。已改成 <div>，因此这里也去掉了
   cursor:pointer / :active / :focus-visible / .eg-go ——
   一个不能点、却长得像按钮的元素，比没有更糟。

   解释的 ⓘ 仍与状态行并排（.eg-statusline 是它俩的容器）。
   ========================================================================== */
#agv-engage .eg-statusline {
  display: flex;
  align-items: center;
}
#agv-engage .eg-statusline .eg-row { flex: 1 1 auto; min-width: 0; }

#agv-engage .eg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 2px;
  margin: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}

#agv-engage .eg-dot {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8;
}
#agv-engage .eg-dot.ok   { background: #10b981; animation: egPulse 2.2s infinite; }
#agv-engage .eg-dot.warn { background: #f59e0b; }
#agv-engage .eg-dot.off  { background: #94a3b8; }
#agv-engage .eg-dot.busy { background: #2f6bff; animation: egPulse 1s infinite; }
@keyframes egPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, .45); }
  70%  { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

#agv-engage .eg-txt { flex: 1; min-width: 0; }
#agv-engage .eg-t1 {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #17223f;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
#agv-engage .eg-t2 {
  display: block;
  font-size: 12px;
  color: #7b8bb2;
  line-height: 1.6;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
/* `.eg-go`（「自检」药丸）已随手动自检入口一并删除 —— 见上面 1) 的注释。
   保留这段说明是为了让下一个人知道它不是漏了，而是**故意删的**：
   如果以后又要加回手动自检，记得连 .eg-row 的 cursor/active/focus 一起加回来。 */

/* 数据来源小字：状态是「服务端查询记录」，不是推断 —— 这行是可信度的锚。 */
#agv-engage .eg-src {
  font-size: 12px;
  color: #9aa9c9;
  line-height: 1.6;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(23, 34, 63, .08);
}

/* ==========================================================================
   2) 自检结果面板（内嵌，非弹层）。**只在失败/测不了时出现** ——
      成功态站长要的是"消失，显示下面已经连接即可"，那时这一块根本不渲染。
   ========================================================================== */
#agv-engage .eg-res {
  margin-top: 10px;
  border-radius: 12px;
  padding: 11px 12px;
  font-size: 12.5px;
  line-height: 1.8;
  border: 1px solid rgba(23, 34, 63, .10);
  background: rgba(23, 34, 63, .03);
  color: #43557d;
}
#agv-engage .eg-res.ok   { background: rgba(16, 185, 129, .07); border-color: rgba(16, 185, 129, .26); color: #065f46; }
#agv-engage .eg-res.bad  { background: rgba(245, 158, 11, .08); border-color: rgba(245, 158, 11, .30); color: #92400e; }
#agv-engage .eg-res.err  { background: rgba(148, 163, 184, .12); border-color: rgba(148, 163, 184, .30); color: #475569; }
#agv-engage .eg-res b { font-weight: 800; }
#agv-engage .eg-res ul { margin: 6px 0 0; padding-left: 17px; }
#agv-engage .eg-res li { margin-top: 4px; overflow-wrap: anywhere; }
#agv-engage .eg-res code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  background: rgba(23, 34, 63, .07);
  padding: 1px 5px;
  border-radius: 5px;
}
#agv-engage .eg-res .eg-kv { color: #5a6f9d; }
/* 重试：失败态唯一的手动入口，永远 ≥44px。 */
#agv-engage .eg-retry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 88px;
  margin-top: 10px;
  padding: 0 16px;
  border: 1px solid rgba(29, 78, 216, .28);
  border-radius: 12px;
  background: rgba(29, 78, 216, .10);
  color: #1d4ed8;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
#agv-engage .eg-retry:active { background: rgba(29, 78, 216, .18); }
#agv-engage .eg-retry:focus-visible { outline: 2px solid rgba(29, 78, 216, .55); outline-offset: 2px; }

/* ==========================================================================
   3) 配置行 —— 行本身就是复制按钮（没有额外的「复制」按钮）
      每行右侧一颗 ⓘ，解释（原来的 .eg-note 长句）点开才出现，文案一字未删。
   ========================================================================== */
#agv-engage .eg-cfg { margin-top: 10px; }
#agv-engage .eg-cfg-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #5a6f9d;
}
#agv-engage .eg-cfg-h .eg-hint { font-weight: 700; color: #9aa9c9; font-size: 12px; }

#agv-engage .eg-cfgitem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
#agv-engage .eg-cfgitem .eg-copy { flex: 1 1 auto; width: auto; min-width: 0; margin-top: 0; }

#agv-engage .eg-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  margin-top: 8px;
  border-radius: 12px;
  border: 1px solid rgba(23, 34, 63, .09);
  background: rgba(23, 34, 63, .02);
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
#agv-engage .eg-copy:active { background: rgba(29, 78, 216, .09); }
#agv-engage .eg-copy:focus-visible { outline: 2px solid rgba(29, 78, 216, .55); outline-offset: 2px; }
#agv-engage .eg-copy.done {
  border-color: rgba(16, 185, 129, .42);
  background: rgba(16, 185, 129, .08);
}
#agv-engage .eg-copy .k {
  flex-shrink: 0;
  width: 76px;
  font-size: 12px;
  font-weight: 800;
  color: #5a6f9d;
  line-height: 1.5;
}
#agv-engage .eg-copy .v {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 700;
  color: #17223f;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#agv-engage .eg-copy .h {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
  opacity: .8;
  white-space: nowrap;
}
#agv-engage .eg-copy.done .h { color: #059669; opacity: 1; }
#agv-engage .eg-warnline {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.7;
  color: #92400e;
  background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .26);
  border-radius: 10px;
  padding: 7px 10px;
}
#agv-engage .eg-warnline b { color: #b45309; font-weight: 800; }

/* ==========================================================================
   4) 打卡 / 连续天数卡片（v4：住在「我的」，默认折叠）
   折叠头一行 = 「打卡 · 连续 N 天」+「已解锁 3/9」+ 展开/收起。
   折叠头本身就是一个按钮，min-height 48px。
   ========================================================================== */
#agv-engage-ck .eg-ck-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 4px 0;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 12px;
}
#agv-engage-ck .eg-ck-toggle:active { background: rgba(29, 78, 216, .06); }
#agv-engage-ck .eg-ck-toggle:focus-visible { outline: 2px solid rgba(29, 78, 216, .55); outline-offset: 2px; }
#agv-engage-ck .eg-ck-sum { flex: 1 1 auto; min-width: 0; }
#agv-engage-ck .eg-ck-t { font-size: 13.5px; font-weight: 800; color: #17223f; }
#agv-engage-ck .eg-ck-sub { font-size: 12px; color: #7b8bb2; margin-left: 6px; }
/* 折叠状态下最有信息量的那个数：已解锁 x/y。 */
#agv-engage-ck .eg-ck-ach {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: #059669;
  background: rgba(16, 185, 129, .10);
  border: 1px solid rgba(16, 185, 129, .26);
  border-radius: 999px;
  padding: 5px 10px;
  white-space: nowrap;
}
#agv-engage-ck .eg-ck-caret {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 800;
  color: #1d4ed8;
  white-space: nowrap;
}
#agv-engage-ck .eg-ck-body[hidden] { display: none; }

#agv-engage-ck .eg-ck-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
#agv-engage-ck .eg-streak {
  display: flex;
  align-items: baseline;
  gap: 3px;
  flex-shrink: 0;
}
#agv-engage-ck .eg-streak b {
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  background: linear-gradient(135deg, #2f6bff, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
#agv-engage-ck .eg-streak small { font-size: 12px; font-weight: 700; color: #7b8bb2; }
#agv-engage-ck .eg-ck-meta { flex: 1; min-width: 0; }
#agv-engage-ck .eg-ck-meta b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #17223f;
}
#agv-engage-ck .eg-ck-meta span {
  display: block;
  font-size: 12px;
  color: #7b8bb2;
  line-height: 1.6;
  margin-top: 2px;
}
#agv-engage-ck .eg-ck-btn {
  flex-shrink: 0;
  min-height: 44px;
  min-width: 76px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: linear-gradient(135deg, #2f6bff, #2563eb);
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: filter .16s ease;
}
#agv-engage-ck .eg-ck-btn:active { filter: brightness(1.08); }
#agv-engage-ck .eg-ck-btn:focus-visible { outline: 2px solid rgba(29, 78, 216, .55); outline-offset: 2px; }
#agv-engage-ck .eg-ck-btn[disabled] {
  background: rgba(16, 185, 129, .12);
  color: #059669;
  cursor: default;
}
#agv-engage-ck .eg-ck-btn.busy { opacity: .65; }

/* 打卡说明：原来是铺在卡片末尾的两条长句，现在是这一颗 ⓘ。 */
#agv-engage-ck .eg-ck-noterow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
}
#agv-engage-ck .eg-info-note.local { color: #b45309; }

/* 数据还没到时的那一行占位（不写任何数字）。 */
#agv-engage-ck .eg-ck-pending {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 48px;
}

/* 30 天热力条：手机 15×2，桌面 30×1 */
#agv-engage-ck .eg-heat {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 4px;
  margin-top: 13px;
}
@media (min-width: 520px) {
  #agv-engage-ck .eg-heat { grid-template-columns: repeat(30, 1fr); }
}
#agv-engage-ck .eg-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: rgba(23, 34, 63, .07);
}
#agv-engage-ck .eg-cell.on { background: linear-gradient(135deg, #2f6bff, #06b6d4); }
#agv-engage-ck .eg-cell.today { box-shadow: 0 0 0 1.5px rgba(29, 78, 216, .5); }
#agv-engage-ck .eg-heat-cap {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #9aa9c9;
  margin-top: 6px;
}

/* 成就：卡片里再折一层，默认收起；折叠头上永远带着「已解锁 x/y」。 */
#agv-engage-ck .eg-mk-fold {
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px dashed rgba(23, 34, 63, .08);
}
#agv-engage-ck .eg-mk-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 2px 0;
  margin: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 10px;
}
#agv-engage-ck .eg-mk-toggle:active { background: rgba(29, 78, 216, .06); }
#agv-engage-ck .eg-mk-toggle:focus-visible { outline: 2px solid rgba(29, 78, 216, .55); outline-offset: 2px; }
#agv-engage-ck .eg-mk-toggle b { font-size: 13px; font-weight: 800; color: #17223f; }
#agv-engage-ck .eg-mk-sum { flex: 1 1 auto; font-size: 12px; font-weight: 800; color: #059669; }
#agv-engage-ck .eg-mk-caret { flex: 0 0 auto; font-size: 12px; font-weight: 800; color: #1d4ed8; white-space: nowrap; }
#agv-engage-ck .eg-mk-body[hidden] { display: none; }

/* 里程碑 */
#agv-engage-ck .eg-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
#agv-engage-ck .eg-mark {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(23, 34, 63, .045);
  border: 1px solid rgba(23, 34, 63, .06);
  color: #9aa9c9;
  white-space: nowrap;
}
#agv-engage-ck .eg-mark.got {
  background: rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .26);
  color: #059669;
}
#agv-engage-ck .eg-mark .eg-mi { font-size: 12px; line-height: 1; }

#agv-engage-ck .eg-next { margin-top: 12px; }
#agv-engage-ck .eg-next-t {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: #5a6f9d;
}
#agv-engage-ck .eg-next-t b { color: #17223f; font-weight: 800; }
#agv-engage-ck .eg-next-t .eg-pct { color: #7b8bb2; font-family: ui-monospace, Menlo, Consolas, monospace; }
#agv-engage-ck .eg-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(23, 34, 63, .08);
  margin-top: 7px;
  overflow: hidden;
}
#agv-engage-ck .eg-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #2f6bff, #06b6d4);
  transition: width .6s cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-reduced-motion: reduce) {
  #agv-engage .eg-dot { animation: none !important; }
  #agv-engage-ck .eg-bar i { transition: none; }
}

/* 极窄屏（320px）收一点内边距，保证不横向溢出 */
@media (max-width: 360px) {
  #agv-engage .eg-card,
  #agv-engage-ck .eg-card { padding: 13px 13px; }
  #agv-engage .eg-copy .k { width: 64px; font-size: 12px; }
  #agv-engage .eg-copy .v { font-size: 12px; }
  #agv-engage-ck .eg-streak b { font-size: 30px; }
  #agv-engage-ck .eg-ck-btn { min-width: 68px; padding: 0 12px; font-size: 13px; }
  #agv-engage-ck .eg-ck-ach { padding: 4px 8px; }
  #agv-engage-ck .eg-ck-sub { margin-left: 5px; }
}