@charset "utf-8";
/* =============================================================
   keylog-ui.css  —  「键盘日志」标签页重排版（2026-11-03）
   作用域：.hb-kl  （由 keylog-ui.js 打标记）
   只做视觉/排版，不动 React 结构
   ============================================================= */

/* ---------- 外壳 ---------- */
.hb-tabpane.hb-kl > [data-slot="card"]{
  border-radius:16px !important;
  overflow:hidden !important;
  background:#fff !important;
}
.hb-kl .hb-kl-body{ padding:12px 14px 8px !important; gap:9px !important; }

/* ---------- 头部 ---------- */
.hb-kl .hb-kl-head{ flex-wrap:wrap !important; gap:6px 10px !important; align-items:center !important; row-gap:7px !important; min-width:0 !important; }
/* 兜底：任何按钮都不许把文字拆行（旧版工具条被压扁时的叠字元凶） */
.hb-kl button{ white-space:nowrap !important; }
.hb-kl .hb-kl-head > *{ min-width:0 !important; }
.hb-kl .hb-kl-head > *:last-child{ flex:0 1 auto !important; }
.hb-kl .hb-kl-title{ flex:1 1 auto !important; min-width:0 !important; gap:8px !important; flex-wrap:nowrap !important; }
/* 标题文字和计数不能换行，否则挤压时会纵向叠在一起 */
.hb-kl .hb-kl-title > span{ white-space:nowrap !important; }
.hb-kl .hb-kl-title > svg{
  width:13px !important;height:13px !important;padding:6px !important;box-sizing:content-box !important;
  border-radius:9px !important;color:#fff !important;
  background:linear-gradient(135deg,#8b7bff 0%,#6d5efc 45%,#3b82f6 100%) !important;
  box-shadow:0 6px 14px -6px rgba(99,102,241,.75), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.hb-kl .hb-kl-title > span:not([data-slot="badge"]){
  font-size:13.5px !important;font-weight:700 !important;letter-spacing:-.01em !important;color:#0e1a31 !important;
}
.hb-kl .hb-kl-title > [data-slot="badge"]{
  height:18px !important;padding:0 8px !important;border-radius:999px !important;
  font-size:10px !important;line-height:17px !important;font-weight:600 !important;
  color:#2563eb !important;background:#eef4ff !important;border:1px solid #dbe7ff !important;
}

/* ---------- 工具条 ---------- */
.hb-kl .hb-kl-tools{ flex:0 1 auto !important; gap:5px !important; flex-wrap:wrap !important; justify-content:flex-end !important; }
.hb-kl .hb-kl-tools button{
  flex:0 0 auto !important; white-space:nowrap !important; max-width:100% !important;
  height:27px !important;min-height:27px !important;padding:0 9px !important;border-radius:8px !important;
  font-size:11px !important;line-height:25px !important;background:#fbfdff !important;border:1px solid #e6ecf7 !important;color:#40506b !important;
}
.hb-kl .hb-kl-tools button > *{ flex:0 0 auto !important; }
.hb-kl .hb-kl-tools button svg{ width:12px !important;height:12px !important; }
.hb-kl .hb-kl-tools button:hover{ background:#f0f6ff !important;border-color:#cfe0ff !important;color:#1d4ed8 !important; }
.hb-kl .hb-kl-tools button:last-child{ color:#b23a48 !important; }
.hb-kl .hb-kl-tools button:last-child:hover{ background:#fff1f2 !important;border-color:#fecdd3 !important;color:#be123c !important; }

/* ---------- 过滤行：单行横滚 + 搜索钉在右侧 ---------- */
.hb-kl .hb-kl-filters{
  flex-wrap:nowrap !important;align-items:center !important;gap:6px !important;
  overflow-x:auto;overflow-y:hidden;padding:1px 0 3px !important;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hb-kl .hb-kl-filters::-webkit-scrollbar{ display:none; }
.hb-kl .hb-kl-filters > button{
  flex:0 0 auto;height:27px !important;min-height:27px !important;padding:0 10px !important;
  border-radius:999px !important;font-size:11.5px !important;
  background:#fff !important;border:1px solid #e6ecf7 !important;color:#5b6a83 !important;
}
.hb-kl .hb-kl-filters > button svg{ width:12px !important;height:12px !important; }
.hb-kl .hb-kl-filters > button:hover{ background:#f4f8ff !important;border-color:#d5e4ff !important;color:#1d4ed8 !important; }
.hb-kl .hb-kl-filters > button[class*="bg-blue-500"]{
  background:linear-gradient(180deg,#eef5ff,#dfeaff) !important;
  border-color:#bfd6ff !important;color:#1d4ed8 !important;
  box-shadow:0 1px 2px rgba(37,99,235,.14), inset 0 1px 0 #fff !important;
}
.hb-kl .hb-kl-filters > .hb-kl-search{
  order:-1;flex:0 0 auto;position:relative;right:auto;
  padding:0 8px 0 0;background:none;
}
.hb-kl .hb-kl-search input{
  width:142px !important;height:27px !important;font-size:11.5px !important;
  border-radius:999px !important;padding-left:28px !important;background:#fbfdff !important;
  border-color:#e6ecf7 !important;
}
.hb-kl .hb-kl-search input:focus{ background:#fff !important; }
.hb-kl .hb-kl-search svg{ width:13px !important;height:13px !important; }

/* ---------- 表格 ---------- */
.hb-kl .hb-kl-tw{ overflow:auto !important; padding-right:0 !important; }
.hb-kl table{
  table-layout:fixed !important;border-collapse:separate !important;border-spacing:0 !important;width:100% !important;
}
.hb-kl thead th{
  position:sticky;top:0;z-index:2;
  height:28px !important;padding:0 8px !important;
  font-size:10.5px !important;font-weight:600 !important;color:#7b879c !important;letter-spacing:.05em;
  background:#f7faff !important;border-bottom:1px solid #e9f0fa !important;
  white-space:nowrap !important;
}
.hb-kl thead th:nth-child(1){ width:58px !important; }
.hb-kl thead th:nth-child(2){ width:76px !important; }
.hb-kl thead th:nth-child(3){ width:auto !important; }
.hb-kl thead th:nth-child(4){ width:106px !important;text-align:right !important; }
.hb-kl thead th:nth-child(4){ padding-right:10px !important; }

.hb-kl tbody td{
  padding:6px 8px !important;vertical-align:middle !important;
  border-bottom:1px solid #f3f7fd !important;
  font-size:11.5px !important;line-height:1.45 !important;
}
.hb-kl tbody tr:nth-child(even) td{ background:#fcfdff; }
.hb-kl tbody tr:hover td{ background:#f2f7ff !important; }

/* 类型列 */
.hb-kl tbody td.hb-kl-c1{
  padding-left:9px !important;
  box-shadow:inset 2px 0 0 var(--kl-c,transparent);
}
.hb-kl td.hb-kl-c1 [data-slot="badge"]{
  height:19px !important;padding:0 6px !important;border-radius:6px !important;
  font-size:10px !important;font-weight:600 !important;letter-spacing:.02em;
  background:var(--kl-bg,#f3f6fb) !important;color:var(--kl-fg,#7b879c) !important;
  border:1px solid var(--kl-bd,#e8eef7) !important;
}
/* 应用列 */
.hb-kl td.hb-kl-c2{
  white-space:nowrap !important;overflow:hidden;text-overflow:ellipsis;
  color:#40506b !important;font-size:11px !important;
}
.hb-kl td.hb-kl-c2.hb-kl-empty{ color:#c9d2e0 !important; }
/* 内容列 */
.hb-kl td.hb-kl-c3{ color:#16233c !important;overflow:hidden; }
.hb-kl td.hb-kl-c3 > div{
  display:-webkit-box !important;-webkit-box-orient:vertical !important;-webkit-line-clamp:3 !important;
  overflow:hidden !important;white-space:pre-wrap !important;word-break:break-word !important;
}
/* 时间列 */
.hb-kl td.hb-kl-c4{
  white-space:nowrap !important;text-align:right !important;padding-right:10px !important;
  font-size:10.5px !important;color:#8b97ab !important;
  font-variant-numeric:tabular-nums;letter-spacing:-.2px;
}

/* 类型配色 */
.hb-kl .hb-kl-t-app  { --kl-c:#22b8cf;--kl-bg:#ecfeff;--kl-fg:#0e7490;--kl-bd:#cffafe; }
.hb-kl .hb-kl-t-noti { --kl-c:#f59f00;--kl-bg:#fffbeb;--kl-fg:#b45309;--kl-bd:#fde68a; }
.hb-kl .hb-kl-t-text { --kl-c:#8b97ab;--kl-bg:#f4f7fc;--kl-fg:#5b6a83;--kl-bd:#e6ecf7; }
.hb-kl .hb-kl-t-pwd  { --kl-c:#f43f5e;--kl-bg:#fff1f2;--kl-fg:#be123c;--kl-bd:#fecdd3; }
.hb-kl .hb-kl-t-click{ --kl-c:#8b5cf6;--kl-bg:#f5f3ff;--kl-fg:#6d28d9;--kl-bd:#ddd6fe; }
.hb-kl .hb-kl-t-paste{ --kl-c:#10b981;--kl-bg:#ecfdf5;--kl-fg:#047857;--kl-bd:#a7f3d0; }
.hb-kl .hb-kl-t-adb  { --kl-c:#3b82f6;--kl-bg:#eff6ff;--kl-fg:#1d4ed8;--kl-bd:#bfdbfe; }
.hb-kl .hb-kl-t-adapt{ --kl-c:#6366f1;--kl-bg:#eef2ff;--kl-fg:#4338ca;--kl-bd:#c7d2fe; }
.hb-kl .hb-kl-t-other{ --kl-c:#cbd5e1;--kl-bg:#f8fafc;--kl-fg:#64748b;--kl-bd:#e2e8f0; }

/* ---------- 分页条 ---------- */
.hb-kl .hb-tab-foot{
  position:sticky;bottom:0;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0,#fff 14px) !important;
  padding:9px 0 2px !important;border:0 !important;
}

/* ---------- 窄屏适配 ---------- */
.hb-kl.hb-kl-sm .hb-kl-tools{ width:100% !important; justify-content:flex-start !important; }
.hb-kl.hb-kl-sm .hb-kl-title{ flex:1 1 100% !important; }
.hb-kl.hb-kl-sm thead th:nth-child(1){ width:52px !important; }
.hb-kl.hb-kl-sm thead th:nth-child(4){ width:96px !important; }
.hb-kl.hb-kl-sm td.hb-kl-c4{ font-size:10px !important; letter-spacing:-.35px; }
.hb-kl.hb-kl-sm .hb-kl-search input{ width:128px !important; }
.hb-kl.hb-kl-xs thead th:nth-child(2),
.hb-kl.hb-kl-xs td.hb-kl-c2{ display:none !important; }
.hb-kl.hb-kl-xs thead th:nth-child(4){ width:88px !important; }
.hb-kl.hb-kl-xs td.hb-kl-c4{ font-size:9.5px !important; letter-spacing:-.45px; }
.hb-kl.hb-kl-xs .hb-kl-search input{ width:110px !important; }