/*! V7 · [R143] 密码记录「查看」按钮 + 完整信息弹窗（纯皮肤层）
 *  爹：记录里每条信息加一个「查看」按钮，点开显示完整内容 + 快捷复制 + 关闭
 *  实现：① 每行末尾用 CSS 伪元素画「查看」入口（零 DOM 注入 → React 重渲染不会闪/不会报错）
 *        ② 点击「查看」或「内容」单元格 → 弹出全文弹窗（字段表 + 完整内容 + 复制/复制全部/关闭）
 *        ③ 复制走 clipboard API，http 非安全上下文自动降级 textarea+execCommand
 *  回退：删掉 index.html 里 mk-klview.css / mk-klview.js 两行即可
 * ========================================================================== */

/* ---------- ① 每行末尾的「查看」入口 ---------- */
/* [R143] 动作列原来只有 140px：两个原生按钮就把「查看」挤出可视区（被省略号吃掉）
   → ① 加宽到 200px ② 取消 nowrap/ellipsis，改为可换行：任何窗口宽度下按钮都不会被裁掉 */
.mk-r141-keylog .ctrl-kl-tbl thead th:nth-child(5) { width: 200px !important; }
.mk-r141-keylog .ctrl-kl-tbl tbody td:nth-child(5) {
  white-space: normal !important; overflow: visible !important; text-overflow: clip !important;
  padding-top: 3px !important; padding-bottom: 3px !important;
}

.ctrl-page .ctrl-kl-tbl tbody tr > td:last-child::after {
  content: "查看";
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 5px; padding: 1px 8px; height: 20px; vertical-align: middle;
  border: 1px solid rgba(37, 99, 235, .34); border-radius: 999px;
  background: rgba(37, 99, 235, .08); color: #1d4ed8;
  font: 600 10.5px/1.5 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
  cursor: pointer; white-space: nowrap; transition: .15s;
}
.ctrl-page .ctrl-kl-tbl tbody tr > td:last-child:hover::after {
  background: rgba(37, 99, 235, .18); border-color: rgba(37, 99, 235, .55);
}
.ctrl-page .ctrl-kl-tbl tbody tr > td.ctrl-kl-v { cursor: pointer; }
.ctrl-page .ctrl-kl-tbl tbody tr > td.ctrl-kl-v:hover { background: rgba(37, 99, 235, .05); }

/* ---------- ② 完整信息弹窗 ---------- */
.mkkv-modal { display: none; position: fixed; inset: 0; z-index: 2147482500;
  background: rgba(15, 23, 42, .40); backdrop-filter: blur(2px); }
.mkkv-modal.on { display: flex; align-items: center; justify-content: center; padding: 24px; }
.mkkv-card { width: min(620px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: #fff; color: #111827; border-radius: 16px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(2, 6, 23, .34);
  font: 13px/1.6 system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
.mkkv-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid #eef2f7; }
.mkkv-hd b { font-size: 14.5px; font-weight: 700; }
.mkkv-hd .mkkv-type { margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; color: #1d4ed8; background: rgba(37, 99, 235, .10); }
.mkkv-x { cursor: pointer; color: #94a3b8; padding: 2px 7px; border-radius: 7px; font-size: 15px; line-height: 1.2; }
.mkkv-x:hover { background: #f1f5f9; color: #334155; }
.mkkv-body { padding: 14px 16px; overflow: auto; }
.mkkv-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 16px; margin-bottom: 12px; }
.mkkv-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mkkv-k { flex: 0 0 auto; font-size: 11.5px; color: #94a3b8; }
.mkkv-v { flex: 1 1 auto; min-width: 0; font-weight: 600; color: #1f2937; word-break: break-all; }
.mkkv-full-label { font-size: 11.5px; color: #94a3b8; margin-bottom: 5px; }
.mkkv-full { padding: 11px 12px; border: 1px solid #e6ebf2; border-radius: 10px; background: #f8fafc;
  color: #111827; font-size: 13px; line-height: 1.75; white-space: pre-wrap; word-break: break-word;
  max-height: 46vh; overflow: auto; user-select: text; }
.mkkv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 16px; border-top: 1px solid #eef2f7; }
.mkkv-tip { font-size: 12px; color: #16a34a; min-height: 18px; }
.mkkv-acts { display: inline-flex; gap: 8px; flex: 0 0 auto; }
.mkkv-btn { padding: 7px 14px; border: 1px solid #e2e8f0; border-radius: 9px; background: #fff;
  color: #475569; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: .15s; }
.mkkv-btn:hover { background: #f1f5f9; }
.mkkv-btn.is-primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.mkkv-btn.is-primary:hover { background: #1d4ed8; }

html[data-theme="dark"] .mkkv-card { background: #0f172a; color: #e5e7eb; }
html[data-theme="dark"] .mkkv-hd, html[data-theme="dark"] .mkkv-foot { border-color: #1f2937; }
html[data-theme="dark"] .mkkv-v { color: #e5e7eb; }
html[data-theme="dark"] .mkkv-full { background: #111827; border-color: #1f2937; color: #e5e7eb; }
html[data-theme="dark"] .mkkv-btn { background: #111827; border-color: #1f2937; color: #cbd5e1; }
html[data-theme="dark"] .mkkv-btn.is-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
html[data-theme="dark"] .mkkv-x:hover { background: #1f2937; color: #e5e7eb; }

@media (max-width: 720px) {
  .mkkv-modal.on { padding: 10px; }
  .mkkv-meta { grid-template-columns: 1fr; }
}