/* ============================================================
   知识库页 · 头部「产物 / 知识」双 Tab
   ------------------------------------------------------------
   · 「产物」内容保持原样（React 原 m$t 成果视图）。
   · 「知识」内容整体替换为：最近使用 / 常用 / 知识库列表。
   · React 侧只渲染一个空壳 .lgkb-host，内容由本脚本填充。
   · 全部样式取 Lingee 设计系统 token（--lg-*），不写死色值。
   ============================================================ */

/* ---------- 顶部 pill-tabs 改为分段控件外观 ---------- */
.kb-page .kb-page__toolbar .pill-tabs {
  gap: 0;
  padding: 2px;
  border-radius: var(--lg-radius-pill);
  background: var(--lg-g-bg-color-black-faint);
}
.kb-page .kb-page__toolbar .pill-tabs__slider { display: none; }
.kb-page .kb-page__toolbar .pill-tabs__tab {
  height: 28px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--lg-radius-pill);
  font-size: var(--lg-font-size-small-14);
  color: var(--lg-g-fg-color-black-muted);
  transition: background var(--lg-transition), color var(--lg-transition);
}
.kb-page .kb-page__toolbar .pill-tabs__tab:hover { color: var(--lg-g-fg-color-black-strong); }
.kb-page .kb-page__toolbar .pill-tabs__tab--active {
  background: var(--lg-g-bg-color-white-heavy);
  color: var(--lg-g-fg-color-black-strong);
  font-weight: var(--lg-font-weight-semibold, 600);
  box-shadow: 0 1px 2px #0000000a, 0 1px 4px #0000000a;
}

/* ---------- 「知识」内容宿主 ---------- */
.lgkb-host { display: block; padding-bottom: 8px; }

/* ---------- 区块 ---------- */
.lgkb-sec { margin-bottom: var(--lg-spacing-0-5x-large); }
.lgkb-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-spacing-medium);
  min-height: 24px;
  margin-bottom: var(--lg-spacing-small);
}
.lgkb-sec__title {
  font-size: var(--lg-font-size-medium-16);
  font-weight: var(--lg-font-weight-semibold, 600);
  line-height: 24px;
  color: var(--lg-g-fg-color-black-strong);
}
.lgkb-more {
  display: inline-flex;
  align-items: center;
  gap: var(--lg-spacing-2x-small);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--lg-font-size-small-14);
  color: var(--lg-g-fg-color-black-muted);
  cursor: pointer;
  transition: color var(--lg-transition);
}
.lgkb-more:hover { color: var(--lg-g-fg-color-primary-default); }
.lgkb-more svg { width: 14px; height: 14px; }

/* ---------- 卡片 ---------- */
.lgkb-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lg-spacing-medium);
}
.lgkb-card {
  display: flex;
  align-items: center;
  gap: var(--lg-spacing-small);
  min-width: 0;
  padding: var(--lg-spacing-medium);
  border: 1px solid var(--lg-g-border-color-black-soft);
  border-radius: var(--lg-radius-large);
  background: var(--lg-g-bg-color-white-heavy);
  cursor: pointer;
  transition: border-color var(--lg-transition), box-shadow var(--lg-transition);
}
.lgkb-card:hover {
  border-color: var(--lg-primary-300);
  box-shadow: 0 1px 2px #0000000a, 0 1px 4px #0000000a;
}
.lgkb-card__ic {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--lg-radius-x-medium);
}
.lgkb-card__ic svg { width: 20px; height: 20px; }
.lgkb-card__ic--doc { background: var(--lg-g-bg-color-primary-faint); color: var(--lg-g-fg-color-primary-default); }
.lgkb-card__ic--sheet { background: var(--lg-g-bg-color-success-faint); color: var(--lg-g-fg-color-success-default); }
.lgkb-card__ic--book { background: var(--lg-g-bg-color-purple-faint); color: var(--lg-g-fg-color-purple-default); }
.lgkb-card__ic--note { background: var(--lg-g-bg-color-success-faint); color: var(--lg-g-fg-color-success-default); }
.lgkb-card__body { display: block; min-width: 0; }
.lgkb-card__name {
  display: block;
  font-size: var(--lg-font-size-small-14);
  font-weight: 500;
  line-height: 22px;
  color: var(--lg-g-fg-color-black-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lgkb-card__meta {
  display: block;
  margin-top: 2px;
  font-size: var(--lg-font-size-small-12);
  line-height: 18px;
  color: var(--lg-g-fg-color-black-default);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 列表工具条 ---------- */
.lgkb-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lg-spacing-medium);
  margin-bottom: var(--lg-spacing-medium);
  flex-wrap: wrap;
}
.lgkb-chips { display: flex; align-items: center; gap: var(--lg-spacing-2x-small); }
.lgkb-chip {
  height: 32px;
  padding: 0 var(--lg-spacing-medium);
  border: 1px solid transparent;
  border-radius: var(--lg-radius-pill);
  background: transparent;
  font-family: inherit;
  font-size: var(--lg-font-size-small-14);
  line-height: 20px;
  color: var(--lg-g-fg-color-black-default);
  cursor: pointer;
  transition: background var(--lg-transition), border-color var(--lg-transition), color var(--lg-transition);
}
.lgkb-chip:hover { border-color: var(--lg-g-border-color-black-soft); color: var(--lg-g-fg-color-black-strong); }
.lgkb-chip.is-on {
  border-color: var(--lg-g-border-color-primary-default);
  background: var(--lg-g-bg-color-primary-faint);
  color: var(--lg-g-fg-color-primary-default);
  font-weight: 500;
}
.lgkb-bar__right { display: flex; align-items: center; gap: var(--lg-spacing-x-small); }
.lgkb-search {
  display: inline-flex;
  align-items: center;
  gap: var(--lg-spacing-x-small);
  height: 32px;
  padding: 0 var(--lg-spacing-small);
  border: 1px solid var(--lg-g-border-color-black-soft);
  border-radius: var(--lg-radius-x-medium);
  background: var(--lg-g-bg-color-white-heavy);
  transition: border-color var(--lg-transition);
}
.lgkb-search:hover { border-color: var(--lg-g-border-color-black-moderate); }
.lgkb-search:focus-within { border-color: var(--lg-g-border-color-primary-default); }
.lgkb-search input {
  width: 152px;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: var(--lg-font-size-small-14);
  line-height: 22px;
  color: var(--lg-g-fg-color-black-strong);
}
.lgkb-search input::placeholder { color: var(--lg-g-fg-color-black-aint); }
.lgkb-search svg { order: 2; flex: 0 0 auto; width: 16px; height: 16px; color: var(--lg-g-fg-color-black-default); }
.lgkb-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--lg-spacing-2x-small);
  height: 32px;
  padding: 0 var(--lg-spacing-small);
  border: 1px solid var(--lg-g-border-color-black-soft);
  border-radius: var(--lg-radius-x-medium);
  background: var(--lg-g-bg-color-white-heavy);
  font-family: inherit;
  font-size: var(--lg-font-size-small-14);
  line-height: 22px;
  color: var(--lg-g-fg-color-black-strong);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--lg-transition), border-color var(--lg-transition);
}
.lgkb-btn:hover { background: var(--lg-g-bg-color-black-faint); border-color: var(--lg-g-border-color-black-moderate); }
.lgkb-btn svg { flex: 0 0 auto; width: 14px; height: 14px; opacity: .6; }
.lgkb-btn--primary {
  border-color: transparent;
  background: var(--lg-g-bg-color-primary-default);
  color: var(--lg-g-fg-color-white-heavy, #fff);
}
.lgkb-btn--primary:hover { background: var(--lg-g-bg-color-primary-emphasis); border-color: transparent; }
.lgkb-btn--primary svg { opacity: .9; }

/* ---------- 下拉菜单 ---------- */
.lgkb-menu {
  position: fixed;
  z-index: 1200;
  min-width: 168px;
  padding: var(--lg-spacing-2x-small);
  border: 1px solid var(--lg-g-border-color-black-soft);
  border-radius: var(--lg-radius-large);
  background: var(--lg-g-bg-color-white-heavy);
  box-shadow: 0 1px 2px #0000000a, 0 8px 24px #00000014;
}
.lgkb-menu__item {
  display: flex;
  align-items: center;
  gap: var(--lg-spacing-x-small);
  height: 32px;
  padding: 0 var(--lg-spacing-x-small);
  border-radius: var(--lg-radius-x-medium);
  font-size: var(--lg-font-size-small-14);
  color: var(--lg-g-fg-color-black-strong);
  cursor: pointer;
  transition: background var(--lg-transition);
}
.lgkb-menu__item:hover { background: var(--lg-g-bg-color-black-faint); }
.lgkb-menu__item svg { width: 15px; height: 15px; color: var(--lg-g-fg-color-black-default); }

/* ---------- 列表 ---------- */
.lgkb-table {
  border: 1px solid var(--lg-g-border-color-black-soft);
  border-radius: var(--lg-radius-large);
  background: var(--lg-g-bg-color-white-heavy);
  overflow: hidden;
}
.lgkb-thead,
.lgkb-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 2.6fr .9fr 1.2fr .8fr;
  align-items: center;
  gap: var(--lg-spacing-small);
  padding: 0 var(--lg-spacing-large);
}
.lgkb-thead {
  height: 44px;
  border-bottom: 1px solid var(--lg-g-border-color-black-subtle);
  background: var(--lg-g-bg-color-gray-subtle);
  font-size: var(--lg-font-size-small-14);
  color: var(--lg-g-fg-color-black-muted);
}
.lgkb-row {
  height: 48px;
  border-bottom: 1px solid var(--lg-g-border-color-black-subtle);
  font-size: var(--lg-font-size-small-14);
  color: var(--lg-g-fg-color-black-muted);
  cursor: pointer;
  transition: background var(--lg-transition);
}
.lgkb-row:last-child { border-bottom: 0; }
.lgkb-row:hover { background: var(--lg-g-bg-color-black-faint); }
.lgkb-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgkb-name {
  display: flex;
  align-items: center;
  gap: var(--lg-spacing-x-small);
  color: var(--lg-g-fg-color-black-strong);
}
.lgkb-name svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--lg-g-fg-color-black-default); }
.lgkb-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lgkb-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--lg-radius-small);
  font-size: var(--lg-font-size-small-12);
  line-height: 18px;
}
.lgkb-tag--person { background: var(--lg-g-bg-color-purple-faint); color: var(--lg-g-fg-color-purple-default); }
.lgkb-tag--share { background: var(--lg-g-bg-color-success-faint); color: var(--lg-g-fg-color-success-default); }
.lgkb-tag--org { background: var(--lg-g-bg-color-primary-faint); color: var(--lg-g-fg-color-primary-default); }
.lgkb-ops { display: flex; align-items: center; justify-content: flex-start; gap: var(--lg-spacing-2x-small); }
.lgkb-op {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--lg-radius-medium);
  background: transparent;
  color: var(--lg-g-fg-color-black-default);
  cursor: pointer;
  transition: background var(--lg-transition), color var(--lg-transition), opacity var(--lg-transition);
}
.lgkb-op svg { width: 15px; height: 15px; }
.lgkb-op:hover { background: var(--lg-g-bg-color-black-subtle); color: var(--lg-g-fg-color-black-strong); }
.lgkb-op--more { opacity: 0; }
.lgkb-row:hover .lgkb-op--more,
.lgkb-op--more:focus-visible { opacity: 1; }
.lgkb-empty {
  padding: 48px 0;
  text-align: center;
  font-size: var(--lg-font-size-small-14);
  color: var(--lg-g-fg-color-black-aint);
}

/* ---------- Toast ---------- */
.lgkb-toast {
  position: fixed;
  left: 50%;
  top: 24px;
  z-index: 2400;
  padding: var(--lg-spacing-x-small) var(--lg-spacing-small);
  border-radius: var(--lg-radius-x-large);
  background: var(--lg-g-fg-color-black-strong);
  color: #fff;
  font-size: var(--lg-font-size-small-14);
  line-height: 22px;
  opacity: 0;
  transform: translate(-50%, -8px);
  pointer-events: none;
  transition: opacity var(--lg-transition), transform var(--lg-transition);
}
.lgkb-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (width <= 1180px) {
  .lgkb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lgkb-thead, .lgkb-row { grid-template-columns: 2.2fr 1fr 0 .9fr 1.2fr .8fr; }
  .lgkb-cell--desc { display: none; }
}