:root {
  color-scheme: light;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: #eef2f1;
  color: #17211d;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0)),
    #eef2f1;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.app-shell {
  display: grid;
  grid-template-columns: 286px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  border-right: 1px solid #dce3df;
  background: #fbfcfb;
  padding: 20px 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.brand-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 8px;
  background: #16a36d;
  color: #fff;
  font-weight: 800;
}

.brand strong {
  display: block;
  color: #14231d;
  font-size: 17px;
  font-weight: 760;
}

.brand span {
  display: block;
  margin-top: 2px;
  color: #68746f;
  font-size: 12px;
}

input,
textarea,
select {
  width: 100%;
  min-width: 0;
  border: 1px solid #d6dfda;
  border-radius: 7px;
  outline: 0;
  background: #fff;
  color: #1c2b24;
  padding: 8px 10px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #69b992;
  box-shadow: 0 0 0 3px rgba(22, 163, 109, 0.12);
}

button {
  min-height: 34px;
  border: 1px solid #d6dfda;
  border-radius: 7px;
  background: #fff;
  color: #31433b;
  font-size: 13px;
  font-weight: 650;
}

button:hover {
  background: #eef4f0;
}

button.primary {
  border-color: #128058;
  background: #128058;
  color: #fff;
}

button.primary:hover {
  background: #0d714d;
}

nav,
.scope-list {
  display: grid;
  gap: 4px;
}

.search-box {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 38px;
  margin-bottom: 18px;
  border: 1px solid #dce3df;
  border-radius: 8px;
  background: #f3f6f4;
  color: #738078;
  padding: 0 11px;
}

.search-box .nav-icon {
  background: transparent;
  color: #738078;
}

.search-box input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #1c2b24;
  font-size: 13px;
  padding: 0;
  box-shadow: none;
}

.search-box input:focus {
  box-shadow: none;
}

.sidebar-scroll {
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 16px;
}

.side-heading,
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 26px;
  color: #7a8781;
  font-size: 12px;
  font-weight: 720;
}

.mini-button {
  display: grid;
  width: 24px;
  height: 24px;
  min-height: 24px;
  place-items: center;
  border: 1px solid #d2ddd8;
  border-radius: 7px;
  background: #fff;
  color: #12774f;
  font-size: 18px;
  font-weight: 720;
  line-height: 1;
  padding: 0;
}

.mini-button:hover,
.mini-button.active {
  background: #def2e8;
  color: #0b7e52;
}

.mini-button[hidden] {
  display: none;
}

.nav,
.scope-item,
.tree-item {
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #40504a;
  text-align: left;
}

.nav {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  padding: 0 9px;
}

.nav:hover,
.scope-item:hover,
.tree-item:hover {
  background: #eef4f0;
}

.nav.active {
  background: #e3f5ea;
  color: #0a7e52;
  font-weight: 760;
}

.nav-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #f1f6f3;
  color: #12774f;
}

.nav.active .nav-icon {
  background: #cdefdc;
}

.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  border-color: currentColor;
}

.icon-home::before {
  left: 5px;
  top: 8px;
  width: 10px;
  height: 8px;
  border: 1.6px solid currentColor;
  border-top: 0;
}

.icon-home::after {
  left: 5px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-left: 1.6px solid currentColor;
  border-top: 1.6px solid currentColor;
  transform: rotate(45deg);
}

.icon-upload::before {
  left: 9px;
  top: 4px;
  height: 10px;
  border-left: 1.8px solid currentColor;
}

.icon-upload::after {
  left: 5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-left: 1.8px solid currentColor;
  border-top: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.icon-archive::before {
  left: 4px;
  top: 6px;
  width: 12px;
  height: 10px;
  border: 1.6px solid currentColor;
  border-radius: 2px;
}

.icon-archive::after {
  left: 7px;
  top: 9px;
  width: 6px;
  border-top: 1.6px solid currentColor;
}

.icon-network::before {
  left: 4px;
  top: 4px;
  width: 4px;
  height: 4px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  box-shadow: 8px 0 0 -1.6px #f1f6f3, 8px 0 0 0 currentColor, 4px 8px 0 -1.6px #f1f6f3, 4px 8px 0 0 currentColor;
}

.icon-network::after {
  left: 7px;
  top: 8px;
  width: 8px;
  border-top: 1.4px solid currentColor;
  transform: rotate(32deg);
}

.icon-search::before {
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border: 1.6px solid currentColor;
  border-radius: 50%;
}

.icon-search::after {
  left: 12px;
  top: 12px;
  width: 6px;
  border-top: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.icon-link::before {
  left: 4px;
  top: 7px;
  width: 8px;
  height: 5px;
  border: 1.6px solid currentColor;
  border-radius: 5px;
  transform: rotate(-25deg);
}

.icon-link::after {
  left: 8px;
  top: 8px;
  width: 8px;
  height: 5px;
  border: 1.6px solid currentColor;
  border-radius: 5px;
  transform: rotate(-25deg);
}

.icon-users::before {
  left: 4px;
  top: 4px;
  width: 5px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  box-shadow: 7px 1px 0 -1.5px #f1f6f3, 7px 1px 0 0 currentColor;
}

.icon-users::after {
  left: 3px;
  top: 12px;
  width: 14px;
  height: 5px;
  border: 1.5px solid currentColor;
  border-radius: 7px 7px 2px 2px;
  border-bottom: 0;
}

.library-block {
  display: grid;
  gap: 3px;
  margin-top: 10px;
}

.scope-item {
  grid-template-columns: 13px 18px minmax(0, 1fr) auto;
  gap: 7px;
  padding: 8px;
}

.scope-item.active {
  background: #eff7f3;
  color: #102820;
  font-weight: 680;
}

.scope-item strong,
.tree-item span,
.nav span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.scope-caret {
  display: grid;
  width: 13px;
  place-items: center;
  color: #76867f;
  font-size: 12px;
}

.scope-meta {
  color: #7c8a83;
  font-size: 11px;
  font-weight: 640;
}

.tree-list {
  display: grid;
  gap: 2px;
  margin: 4px 0 14px 18px;
  padding-left: 8px;
  border-left: 1px solid #dce7e1;
}

.tree-item {
  grid-template-columns: 13px 18px minmax(0, 1fr);
  gap: 7px;
  min-height: 31px;
  padding: 0 8px;
  color: #506059;
  font-size: 12.5px;
}

.tree-item.is-folder {
  color: #2d463b;
  font-weight: 680;
}

.tree-item.is-open {
  background: #e9f5ef;
  color: #173a2d;
  font-weight: 680;
}

.tree-caret {
  display: grid;
  width: 13px;
  place-items: center;
  color: #76867f;
  font-size: 12px;
}

.tree-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  color: #60736a;
}

.tree-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.tree-icon-scope {
  color: #176b49;
}

.tree-icon-category {
  color: #7b5b13;
}

.tree-icon-file {
  color: #596963;
}

.usage-card {
  display: grid;
  gap: 10px;
  margin-top: auto;
  border: 1px solid #d8e5de;
  border-radius: 8px;
  background: linear-gradient(180deg, #f8fffb, #fff);
  box-shadow: 0 -10px 30px rgba(31, 54, 45, 0.05);
  padding: 13px;
}

.usage-row,
.row,
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.usage-row,
.toolbar {
  justify-content: space-between;
}

.usage-row span,
.muted {
  color: #68786f;
  font-size: 12px;
}

.usage-row strong {
  color: #172820;
  font-size: 13px;
}

.usage-track {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8efeb;
}

.usage-track div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #13a36b, #3c8bea);
}

main {
  min-width: 0;
  display: grid;
  grid-template-rows: 78px 1fr;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dce3df;
  background: rgba(251, 252, 251, 0.9);
  backdrop-filter: blur(14px);
  padding: 0 24px;
}

.breadcrumb {
  margin-bottom: 5px;
  color: #6b7872;
  font-size: 12px;
  font-weight: 650;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  color: #15231d;
  font-size: 21px;
  line-height: 1.15;
}

h2 {
  color: #13241d;
  font-size: 22px;
  line-height: 1.2;
}

h3 {
  color: #1f3029;
  font-size: 15px;
}

#statusLine {
  margin-top: 5px;
  color: #6b7872;
  font-size: 12px;
  font-weight: 640;
}

.topbar-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.ghost-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px;
}

.icon-button {
  width: 34px;
  padding: 0;
}

.user-center {
  all: unset;
  box-sizing: border-box;
  position: relative;
  display: grid;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  aspect-ratio: 1;
  align-self: center;
  place-items: center;
  border: 1px solid #d6dfda;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  cursor: pointer;
}

.user-center:hover {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(22, 163, 109, 0.1);
}

.user-center.is-anonymous {
  border-color: #cfe1d8;
  background: #fff;
  color: #0d7e52;
  font-size: 13px;
  font-weight: 780;
}

.user-center.is-authenticated {
  border-color: #193b2f;
  background: #193b2f;
}

.user-center.is-authenticated:hover {
  background: #193b2f;
}

.user-avatar-icon {
  position: relative;
  width: 22px;
  height: 22px;
}

.user-center.is-anonymous .user-avatar-icon {
  display: grid;
  place-items: center;
}

.user-center.is-authenticated .user-avatar-icon::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.user-center.is-authenticated .user-avatar-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 14px;
  width: 16px;
  height: 8px;
  border: 2px solid #fff;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.menu-message {
  color: #6a7670;
  font-size: 12px;
}

.menu-message.success,
.success {
  color: #167a51;
}

.is-admin .search-box,
.is-admin .library-block,
.is-admin #usageCard {
  display: none;
}

.is-anonymous .search-box input {
  color: #8a9690;
}

.is-admin .app-shell,
.is-standalone-page .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

.is-admin .sidebar,
.is-standalone-page .sidebar {
  display: none;
}

.is-admin .workspace {
  grid-template-columns: 1fr;
}

.is-admin .right-panel,
.is-standalone-page .right-panel {
  display: none;
}

.is-standalone-page .workspace {
  grid-template-columns: 1fr;
}

.nav,
.tree-item {
  text-decoration: none;
}

.nav.requires-login {
  color: #68786f;
}

.nav.requires-login .nav-icon {
  color: #66766e;
}

.anonymous-library {
  display: grid;
  gap: 3px;
}

.library-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  border-radius: 7px;
}

.library-row.is-current {
  background: #eff7f3;
}

.library-item {
  display: grid;
  grid-template-columns: 13px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #40504a;
  text-align: left;
  padding: 0 8px;
}

.library-item:hover {
  background: transparent;
}

.library-item .nav-icon {
  width: 18px;
  height: 18px;
}

.library-item span,
.library-item small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.library-item small {
  color: #7c8a83;
  font-size: 11px;
  font-weight: 640;
}

.library-tree {
  display: grid;
  gap: 2px;
  margin: 2px 0 8px 20px;
  padding-left: 8px;
  border-left: 1px solid #dce7e1;
}

.tree-caret {
  display: grid;
  width: 13px;
  place-items: center;
  color: #76867f;
  font-size: 12px;
}

.admin-layout {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.admin-create-panel {
  position: sticky;
  top: 24px;
}

.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.toolbar-actions input {
  width: min(320px, 42vw);
}

.admin-user-table td:first-child {
  min-width: 220px;
}

.admin-user-table td:last-child {
  min-width: 260px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: rgba(15, 31, 24, 0.36);
  padding: 24px;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal-panel {
  display: grid;
  gap: 16px;
  width: min(520px, 100%);
  border: 1px solid #d8e1dc;
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  box-shadow: 0 28px 80px rgba(20, 40, 31, 0.22);
}

.field-label {
  color: #52605a;
  font-size: 13px;
  font-weight: 680;
}

.profile-details {
  display: grid;
  gap: 12px;
}

.profile-details div {
  display: grid;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4ebe7;
}

.profile-details span {
  color: #6a7670;
  font-size: 12px;
}

.profile-details strong {
  overflow-wrap: anywhere;
}

.profile-contact-hint {
  margin: 12px 0 0;
  font-size: 12px;
}

.migrate-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: #52605a;
  line-height: 1.5;
}
.migrate-check input { margin-top: 2px; }
.migrate-panel .muted { margin: 4px 0 10px; }
#migrateStatus a { color: #1f7a4d; font-weight: 600; }

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.main-panel {
  min-width: 0;
  overflow: auto;
  padding: 24px;
}

/* 页面滚动的是整个文档（.app-shell 是 min-height 而非 height，header 也不 sticky，
   所以 .main-panel 的 overflow:auto 并不生效）。右侧面板必须自己 sticky 停靠，
   否则点目录跳转时它会跟着文档一起滚走。align-self:start 让它别被 grid 拉满，
   sticky 才有移动余量；面板内部滚动由 .kp-body 负责。 */
.right-panel {
  display: none;
  position: sticky;
  top: 0;
  align-self: start;
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  border-left: 1px solid #dce3df;
  background: #f8faf9;
  padding: 18px;
}

/* 右侧知识面板 (SPEC10 §5) —— 面板由 body 上的 has-knowledge-panel 开关控制，
   收起时只留一条可点回的窄轨，中间工作区自然变宽。 */
/* 滚动链必须一路可解析：.right-panel(固定 100vh) → #sideInfo(flex:1) → .kp → .kp-body(overflow-y:auto)。
   缺任何一环，.kp 的 height:100% 就解析不出高度，.kp-body 的 flex:1 失去约束、
   内部滚动条不出现，内容被 .right-panel 的 overflow:hidden 直接裁掉且无法下拉。 */
.has-knowledge-panel .right-panel { display: flex; flex-direction: column; }
.has-knowledge-panel #sideInfo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.has-knowledge-panel .workspace { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); }
.has-knowledge-panel.knowledge-panel-collapsed .workspace { grid-template-columns: minmax(0, 1fr) 40px; }
.knowledge-panel-collapsed .right-panel { padding: 12px 4px; }

.kp { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kp-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.kp-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; }
.kp-tab {
  flex: 1; min-width: 0; padding: 6px 4px; border: 0; border-radius: 6px;
  background: transparent; color: #4b5563; font-size: .86rem; cursor: pointer;
}
.kp-tab:hover { background: #eef2f0; }
.kp-tab.active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); font-weight: 600; }
.kp-collapse, .kp-rail-btn {
  border: 1px solid #dce3df; background: #fff; color: #4b5563;
  border-radius: 6px; cursor: pointer; line-height: 1;
}
.kp-collapse { width: 24px; height: 24px; flex: none; }
.kp-rail { display: flex; justify-content: center; }
.kp-rail-btn { width: 28px; height: 28px; }
.kp-body { flex: 1; min-height: 0; overflow-y: auto; }

.kp-empty { padding: 8px 2px; }
.kp-empty-title { font-weight: 600; color: #111827; margin: 0 0 6px; }
.kp-note { font-size: .82rem; opacity: .75; margin-top: 10px; }

.kp-toc { display: flex; flex-direction: column; gap: 1px; }
.kp-toc-item {
  display: block; padding: 5px 8px; border-radius: 5px; border-left: 2px solid transparent;
  color: #374151; font-size: .87rem; line-height: 1.45; text-decoration: none; cursor: pointer;
}
.kp-toc-item:hover { background: #eef2f0; }
.kp-toc-item.active { background: #fff; border-left-color: #2f7a5b; color: #111827; font-weight: 600; }
.kp-toc-l1 { padding-left: 20px; font-size: .84rem; }
.kp-toc-l2 { padding-left: 32px; font-size: .82rem; color: #6b7280; }
.kp-toc-l3, .kp-toc-l4, .kp-toc-l5 { padding-left: 44px; font-size: .8rem; color: #6b7280; }

/* 整屏页面：首页 / 登录 / 注册 (SPEC10 §3) --------------------------------
   布局与控件对齐 demo 的 LoginHome / AuthPage。这三个页面在工作台 shell 之外，
   #fullscreen 显示时 .app-shell 整个隐藏。 */
.is-fullscreen-page .app-shell { display: none; }
.fullscreen-page[hidden] { display: none; }

/* 这三个整屏页面用的是 <main>，必须显式推翻工作台那条
   `main { display: grid; grid-template-rows: 78px 1fr }`——否则各区块变成 grid item，
   隐式列按内容收缩（底部深色条会明显变窄），导航栏还会被钉死在 78px。 */
.login-home,
.auth-page {
  display: block;
  grid-template-rows: none;
}

.login-home {
  min-height: 100vh;
  color: #14251e;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(243, 246, 244, .72)), #f3f6f4;
}

/* 品牌在左、按钮在右（demo LoginHome 的 login-nav）。
   注意这是个 <header>，要显式清掉全局 header 规则的边框与毛玻璃背景。 */
.login-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 28px;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: none;
}

.login-actions { display: flex; align-items: center; gap: 10px; }

.brand-row { display: flex; align-items: center; gap: 12px; }
.brand-title { font-size: 17px; font-weight: 760; color: #14231d; }
.brand-subtitle { margin-top: 2px; color: #68746f; font-size: 12px; }

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 760;
}
.primary-button { border: 1px solid #0f8e5d; background: #13a36b; color: #fff; }
.primary-button:hover { background: #0f8e5d; }
.secondary-button { border: 1px solid #d6dfda; background: #fff; color: #30443b; }
.secondary-button:hover { background: #eef4f0; }
.primary-button.full { width: 100%; }
.text-button {
  width: max-content;
  border: 1px solid #cfe1d8;
  border-radius: 7px;
  background: #fff;
  color: #0d7e52;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 760;
}

.login-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(400px, .84fr);
  align-items: center;
  gap: 36px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 58px 28px 44px;
}
.login-copy h1 { max-width: 780px; margin: 0; color: #10241c; font-size: 48px; line-height: 1.12; }
.login-copy > p { max-width: 720px; margin: 22px 0 0; color: #4f6259; font-size: 17px; line-height: 1.85; }
.login-copy strong { color: #10241c; }
.button-row { display: flex; align-items: center; gap: 10px; margin-top: 26px; }

.login-preview {
  border: 1px solid #dbe6e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(28, 48, 39, .12);
  padding: 20px;
}
.preview-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #edf2ef;
  padding-bottom: 16px;
}
.preview-top span { color: #128058; font-size: 12px; font-weight: 780; text-transform: uppercase; }
.preview-top strong {
  display: grid; width: 66px; height: 66px; place-items: center;
  border-radius: 8px; background: #e8f7ef; color: #0d7e52; font-size: 20px;
}
.preview-flow { display: grid; gap: 12px; margin-top: 16px; }
.preview-step {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #e2eae6;
  border-radius: 8px;
  background: #fbfcfb;
  padding: 13px;
}
.preview-icon, .feature-icon {
  display: grid; width: 38px; height: 38px; place-items: center;
  border-radius: 8px; background: #e6f7ee; color: #0d7e52; font-size: 17px;
}
.preview-step strong { display: block; color: #142820; font-size: 14px; }
.preview-step > div > span { display: block; margin-top: 4px; color: #66766f; font-size: 12px; }

.feature-section { max-width: 1180px; margin: 0 auto; padding: 28px 28px 52px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.section-heading h2 { max-width: 620px; margin: 0; color: #13251e; font-size: 28px; line-height: 1.24; }
.login-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.login-feature-card {
  min-height: 220px;
  border: 1px solid #dfe8e4;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 42px rgba(31, 54, 45, .06);
  padding: 18px;
}
.login-feature-card h3 { margin: 18px 0 10px; color: #142820; font-size: 17px; }
.login-feature-card p { margin: 0; color: #5d6d66; font-size: 14px; line-height: 1.75; }

.login-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto 42px;
  border: 1px solid #dbe6e0;
  border-radius: 8px;
  background: #10241c;
  color: #fff;
  padding: 24px 28px;
}
.login-bottom h2 { margin: 0; font-size: 22px; }
.login-bottom p { margin: 8px 0 0; color: #b8cec4; line-height: 1.65; }
.login-bottom .primary-button { flex: none; }

.auth-page {
  display: grid;                 /* 覆盖上面的 display:block，两栏在此定义 */
  grid-template-columns: minmax(400px, .82fr) minmax(400px, 1fr);
  min-height: 100vh;
  background: linear-gradient(120deg, rgba(255, 255, 255, .94), rgba(239, 247, 243, .8)), #eef3f0;
}
.auth-panel {
  display: grid;
  align-content: center;
  gap: 24px;
  padding: 48px clamp(28px, 6vw, 84px);
  background: #fff;
  border-right: 1px solid #dce5e0;
}
.auth-copy h1 { max-width: 540px; margin: 0; color: #10241c; font-size: 34px; line-height: 1.15; }
.auth-copy p { max-width: 520px; margin: 12px 0 0; color: #5d6d66; line-height: 1.75; }
.auth-form { display: grid; gap: 14px; max-width: 460px; }
.form-field { display: grid; gap: 7px; }
.form-field span { color: #53645d; font-size: 12px; font-weight: 760; }
.form-field input {
  width: 100%;
  border: 1px solid #d8e2dd;
  border-radius: 8px;
  background: #fbfcfb;
  color: #20352c;
  outline: 0;
  padding: 11px 12px;
  font-size: 14px;
}
.auth-form .login-error { min-height: 0; }
.auth-switch { display: flex; gap: 8px; align-items: center; color: #68776f; font-size: 13px; }
.auth-switch button { min-height: 0; border: 0; background: transparent; color: #0d7e52; padding: 0; font-weight: 760; }
.auth-switch button:hover { background: transparent; text-decoration: underline; }

.auth-side { display: grid; place-items: center; padding: 48px; }
.auth-side-card {
  width: min(460px, 100%);
  border: 1px solid #dbe6e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(28, 48, 39, .12);
  padding: 22px;
}
.check-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; color: #40514a; font-size: 14px; line-height: 1.6; }
.check-dot { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 50%; background: #e6f7ee; color: #0d7e52; font-size: 12px; }

@media (max-width: 980px) {
  .login-hero, .auth-page { grid-template-columns: minmax(0, 1fr); }
  .login-copy h1 { font-size: 34px; }
  .login-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login-bottom { flex-direction: column; align-items: flex-start; }
  .auth-panel { border-right: 0; border-bottom: 1px solid #dce5e0; }
  .auth-side { padding: 28px; }
}
@media (max-width: 600px) {
  .login-feature-grid { grid-template-columns: minmax(0, 1fr); }
  .login-nav { flex-direction: column; align-items: flex-start; }
}

/* 套餐与额度 (SPEC10 §4) — 复刻 demo 的 PricingView：定价规则/界面/能力对比 */
.pricing-page {
  display: grid;
  gap: 22px;
  width: min(1240px, 100%);
  margin: 0 auto;
  padding-bottom: 32px;
}

.pricing-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  padding: 8px 0 2px;
}

.pricing-context {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.pricing-context span {
  border-radius: 999px;
  background: #fff1d8;
  color: #8b570a;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 800;
}

.pricing-context small {
  color: #6f7d76;
  font-size: 12px;
  font-weight: 700;
}

.pricing-intro h2 {
  margin: 0;
  color: #17231e;
  font-size: 30px;
  line-height: 1.2;
}

.pricing-intro p {
  max-width: 670px;
  margin: 10px 0 0;
  color: #5f6d66;
  line-height: 1.7;
}

.pricing-controls {
  display: grid;
  flex: 0 0 auto;
  justify-items: end;
  gap: 8px;
}

.pricing-controls > small {
  color: #758079;
  font-size: 11px;
}

.billing-toggle {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 3px;
  border: 1px solid #dce2df;
  border-radius: 7px;
  background: #eff2f0;
  padding: 3px;
}

.billing-toggle button {
  min-height: 34px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #59665f;
  padding: 0 11px;
  font-size: 12px;
  font-weight: 720;
  white-space: nowrap;
  cursor: pointer;
}

.billing-toggle button span {
  color: #b06a06;
  font-size: 10px;
}

.billing-toggle button:hover {
  background: #e4e9e6;
}

.billing-toggle button.is-active {
  background: #fff;
  color: #1e2b25;
  box-shadow: 0 1px 4px rgba(23, 36, 30, 0.12);
}

.pricing-usage-band {
  display: grid;
  grid-template-columns: minmax(190px, 1.25fr) repeat(3, minmax(150px, 1fr));
  gap: 20px;
  align-items: center;
  border: 1px solid #dfe5e2;
  border-radius: 8px;
  background: #f7f9f8;
  padding: 16px 18px;
}

.pricing-usage-title strong,
.pricing-usage-title span {
  display: block;
}

.pricing-usage-title strong {
  color: #24352e;
  font-size: 14px;
}

.pricing-usage-title span {
  margin-top: 5px;
  color: #758079;
  font-size: 11px;
}

.pricing-usage-item {
  min-width: 0;
}

.pricing-usage-item > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pricing-usage-item span {
  color: #68756e;
  font-size: 11px;
  font-weight: 700;
}

.pricing-usage-item strong {
  color: #25362e;
  font-size: 12px;
}

.pricing-usage-track {
  height: 5px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e7e4;
}

.pricing-usage-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #258760;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  border: 1px solid #dfe5e2;
  border-top: 3px solid #3266c5;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(31, 48, 40, 0.07);
  padding: 20px;
}

.pricing-card.ultra {
  border-color: #d8c99d;
  border-top-color: #282a28;
  box-shadow: 0 16px 40px rgba(41, 38, 28, 0.12);
}

.pricing-card.team {
  border-top-color: #11825a;
}

.plan-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  border-radius: 999px;
  background: #272a28;
  color: #fff;
  padding: 5px 8px;
  font-size: 10px;
  font-weight: 800;
}

.plan-heading {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 42px;
  padding-right: 42px;
}

.plan-icon {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 7px;
  background: #eaf1ff;
  color: #2858af;
}

.pricing-card.ultra .plan-icon {
  background: #f3ecd8;
  color: #785b13;
}

.pricing-card.team .plan-icon {
  background: #e5f5ed;
  color: #08754e;
}

.plan-heading h3 {
  margin: 0;
  color: #17251f;
  font-size: 20px;
}

.plan-heading div > span {
  display: block;
  margin-top: 2px;
  color: #68756e;
  font-size: 11px;
  font-weight: 720;
}

.plan-audience {
  min-height: 28px;
  margin-top: 16px;
  color: #536159;
  font-size: 12px;
  font-weight: 760;
}

.plan-description {
  min-height: 64px;
  margin: 5px 0 0;
  color: #647169;
  font-size: 12.5px;
  line-height: 1.65;
}

.plan-price {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  min-height: 74px;
  margin: 14px 0 16px;
  border-bottom: 1px solid #ecefed;
  padding-bottom: 15px;
}

.plan-price strong {
  color: #17231e;
  font-size: 30px;
  line-height: 1;
}

.plan-price > span {
  margin-left: 6px;
  color: #66736c;
  font-size: 12px;
}

.plan-price small {
  grid-column: 1 / -1;
  margin-top: 7px;
  color: #7a857f;
  font-size: 11px;
}

.plan-quotas {
  display: grid;
  gap: 9px;
}

.plan-quota {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 24px;
}

.plan-quota svg {
  color: #6f7b75;
}

.plan-quota span {
  color: #66736c;
  font-size: 12px;
}

.plan-quota strong {
  color: #293831;
  font-size: 12px;
  text-align: right;
}

.plan-capabilities {
  display: grid;
  gap: 8px;
  min-height: 158px;
  margin: 17px 0 18px;
  border-top: 1px solid #ecefed;
  padding-top: 15px;
}

.plan-capabilities > strong {
  color: #26362f;
  font-size: 12px;
}

.plan-capabilities > span {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #536159;
  font-size: 12px;
}

.plan-capabilities svg {
  flex: 0 0 auto;
  color: #13845a;
}

.pricing-card .secondary-button.full,
.pricing-card .primary-button.full {
  width: 100%;
  margin-top: auto;
}

.enterprise-band {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid #dde4e0;
  border-radius: 8px;
  background: #f5f7f6;
  padding: 17px 19px;
}

.enterprise-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 7px;
  background: #29342f;
  color: #fff;
}

.enterprise-band strong {
  color: #22312a;
  font-size: 14px;
}

.enterprise-band p {
  margin: 5px 0 0;
  color: #69756f;
  font-size: 12px;
  line-height: 1.55;
}

.feature-comparison {
  overflow: hidden;
  border: 1px solid #dfe5e2;
  border-radius: 8px;
  background: #fff;
}

.comparison-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 20px;
  border-bottom: 1px solid #e7ebe9;
}

.comparison-heading > div > span {
  color: #13805a;
  font-size: 11px;
  font-weight: 800;
}

.comparison-heading h3 {
  margin: 5px 0 0;
  color: #1c2b24;
  font-size: 19px;
}

.comparison-heading > p {
  margin: 0;
  color: #6b7771;
  font-size: 12px;
}

.comparison-table-wrap {
  overflow-x: auto;
}

.comparison-table {
  min-width: 760px;
  width: 100%;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  width: 22%;
  padding: 13px 18px;
  font-size: 12px;
  text-align: left;
  border-bottom: 1px solid #eef1ef;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  width: 34%;
  color: #2d3b34;
  font-weight: 720;
}

.feature-yes {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #0b7a50;
  font-weight: 720;
}

.feature-no {
  color: #a3aba7;
}

.feature-text {
  color: #59665f;
}

.checkout-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background: rgba(18, 27, 23, 0.38);
  padding: 20px;
}

.checkout-modal {
  display: grid;
  gap: 18px;
  width: min(460px, 100%);
  border: 1px solid #dce3df;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(19, 31, 26, 0.24);
  padding: 22px;
}

.checkout-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.checkout-head span {
  color: #16815a;
  font-size: 11px;
  font-weight: 800;
}

.checkout-head h3 {
  margin: 6px 0 0;
  color: #1b2b24;
  font-size: 20px;
}

.checkout-summary {
  display: grid;
  gap: 0;
  border: 1px solid #e0e6e3;
  border-radius: 7px;
  background: #f8faf9;
}

.checkout-summary div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 0 13px;
  border-bottom: 1px solid #e6ebe8;
}

.checkout-summary div:last-child {
  border-bottom: 0;
}

.checkout-summary span {
  color: #69766f;
  font-size: 12px;
}

.checkout-summary strong {
  color: #26362f;
  font-size: 13px;
}

.checkout-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #647169;
  font-size: 12px;
  line-height: 1.6;
}

.checkout-note svg {
  flex: 0 0 auto;
  margin-top: 1px;
  color: #315fbd;
}

.checkout-demo-note {
  color: #85908a;
  font-size: 11px;
  text-align: center;
}

.checkout-success {
  display: grid;
  justify-items: center;
  padding: 12px 4px 4px;
  text-align: center;
}

.checkout-success > span {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 50%;
  background: #e4f6ed;
  color: #0d8055;
}

.checkout-success h3 {
  margin: 15px 0 0;
  color: #1a2a23;
  font-size: 20px;
}

.checkout-success p {
  max-width: 360px;
  margin: 9px 0 18px;
  color: #65726b;
  font-size: 13px;
  line-height: 1.65;
}

@media (max-width: 1040px) {
  .pricing-intro,
  .comparison-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .pricing-controls {
    justify-items: start;
  }

  .pricing-usage-band {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-usage-title {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .pricing-grid {
    grid-template-columns: 1fr;
  }

  .plan-description,
  .plan-capabilities {
    min-height: 0;
  }

  .enterprise-band {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .enterprise-band .secondary-button {
    grid-column: 1 / -1;
  }
}

@media (max-width: 600px) {
  .pricing-intro h2 {
    font-size: 25px;
  }

  .billing-toggle {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .billing-toggle button {
    min-width: 0;
    padding: 0 5px;
    white-space: normal;
  }

  .pricing-usage-band {
    grid-template-columns: 1fr;
  }

  .pricing-usage-title {
    grid-column: auto;
  }
}

/* 暗色下让复刻的定价页不至于刺眼（demo 原为浅色，这里补齐暗色底） */
@media (prefers-color-scheme: dark) {
  .pricing-usage-band,
  .enterprise-band { background: #111827; border-color: #374151; }
  .pricing-usage-title strong { color: #f3f4f6; }
  .pricing-usage-item strong { color: #e5e7eb; }
  .pricing-usage-track { background: #374151; }
  .pricing-card,
  .feature-comparison,
  .checkout-modal { background: #111827; border-color: #374151; }
  .plan-heading h3,
  .plan-price strong,
  .comparison-heading h3,
  .checkout-head h3,
  .checkout-summary strong,
  .plan-quota strong,
  .plan-capabilities > strong,
  .enterprise-band strong,
  .checkout-success h3 { color: #f3f4f6; }
  .plan-description,
  .plan-audience,
  .plan-capabilities > span,
  .comparison-table td,
  .feature-text { color: #cbd5e1; }
  .plan-price { border-bottom-color: #374151; }
  .plan-capabilities { border-top-color: #374151; }
  .comparison-heading,
  .comparison-table th,
  .comparison-table td { border-color: #374151; }
  .checkout-summary { background: #0b1220; border-color: #374151; }
  .checkout-summary div { border-bottom-color: #374151; }
  .billing-toggle { background: #0b1220; border-color: #374151; }
  .billing-toggle button.is-active { background: #1f2937; color: #f3f4f6; }
}

.kp-section { margin-bottom: 16px; }
.kp-section-title { font-weight: 600; color: #111827; font-size: .88rem; margin: 0 0 8px; }
.kp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kp-tag { padding: 3px 9px; border-radius: 999px; background: #e3f5ea; color: #0a7e52; font-size: .8rem; }
/* 图谱关联内容：一行一个 section，一眼看全貌；要看原文再展开 */
.kp-frags { display: flex; flex-direction: column; gap: 2px; }
.kp-frag-line {
  display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 6px; align-items: center;
  width: 100%; min-height: 0; border: 0; border-radius: 6px; background: transparent;
  color: #374151; text-align: left; padding: 6px 8px; font-size: .86rem; font-weight: 400;
}
.kp-frag-line:hover { background: #eef2f0; }
.kp-frag.open > .kp-frag-line { background: #fff; color: #111827; font-weight: 600; }
.kp-frag-caret { color: #9ca3af; font-size: .7rem; }
/* 一行装不下就省略号，绝不折行——列表的价值就是一眼扫完 */
.kp-frag-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-frag-count { flex: none; color: #6b7280; font-size: .74rem; }
.kp-frag-ctx { margin: 2px 0 8px; padding-left: 20px; }

.kp-piece { border-left: 2px solid #d1fae5; padding: 6px 0 6px 10px; margin-bottom: 8px; }
.kp-piece-meta { display: flex; gap: 8px; justify-content: space-between; color: #6b7280; font-size: .74rem; margin-bottom: 4px; }
.kp-piece-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-piece-page { flex: none; }
.kp-piece-text { margin: 0; color: #374151; font-size: .82rem; line-height: 1.65; }
.kp-piece-more { min-height: 0; margin-top: 6px; border: 0; background: transparent; color: #0a7e52; padding: 0; font-size: .76rem; font-weight: 700; }
.kp-piece-more:hover { background: transparent; text-decoration: underline; }
.kp-piece-ctx { margin-top: 6px; border-top: 1px dashed #e5e7eb; padding-top: 6px; }
.kp-piece-ctx p { margin: 0 0 6px; font-size: .8rem; line-height: 1.6; }
.kp-frag-cur { color: #111827; background: #fef3c7; border-radius: 4px; padding: 2px 4px; }

.kp-cites { display: flex; flex-direction: column; gap: 4px; }
.kp-cite {
  display: block; padding: 6px 8px; border-radius: 6px; background: #fff; border: 1px solid #e5e7eb;
  color: #374151; font-size: .82rem; text-decoration: none; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kp-cite:hover { border-color: #69b992; color: #0a7e52; }
/* 知识点展开后，当前这篇不是链接（点了没意义），标出来即可 */
.kp-cite-self { background: #f0fdf4; border-color: #bbf7d0; color: #0a7e52; cursor: default; }

.kp-apps { display: flex; flex-direction: column; gap: 8px; }
.kp-app { display: flex; gap: 10px; align-items: flex-start; padding: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; }
.kp-app-icon { font-size: 1.1rem; }
.kp-app strong { display: block; font-size: .9rem; color: #111827; }
.kp-app .muted { font-size: .8rem; }

/* Ask tab (SPEC09)：对话流 + 输入框 */
.kp-ask { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kp-ask-log { flex: 1; min-height: 0; overflow-y: auto; padding: 2px; display: flex; flex-direction: column; gap: 10px; }
.kp-ask-turn { font-size: .84rem; line-height: 1.7; border-radius: 10px; }
.kp-ask-user { align-self: flex-end; max-width: 88%; padding: 7px 11px; background: #0a7e52; color: #fff; white-space: pre-wrap; word-break: break-word; }
.kp-ask-assistant { position: relative; align-self: stretch; padding: 9px 11px; background: #fff; border: 1px solid #e5e7eb; color: #1f2937; overflow-wrap: anywhere; }
.kp-ask-assistant > :first-child { margin-top: 0; }
.kp-ask-assistant > :last-child { margin-bottom: 0; }
.kp-ask-assistant p { margin: 0 0 8px; }
.kp-ask-assistant h1, .kp-ask-assistant h2, .kp-ask-assistant h3 { font-size: .92rem; margin: 10px 0 6px; color: #111827; }
.kp-ask-assistant ul, .kp-ask-assistant ol { margin: 0 0 8px; padding-left: 18px; }
.kp-ask-assistant img { max-width: 100%; height: auto; border-radius: 6px; margin: 6px 0; display: block; }
.kp-ask-assistant table { border-collapse: collapse; width: 100%; font-size: .78rem; margin: 6px 0; display: block; overflow-x: auto; }
.kp-ask-assistant th, .kp-ask-assistant td { border: 1px solid #e5e7eb; padding: 4px 6px; text-align: left; }
.kp-ask-assistant code { background: #f3f4f6; padding: 1px 4px; border-radius: 4px; font-size: .8em; }
.ask-cite { color: #0a7e52; font-weight: 700; cursor: pointer; padding: 0 1px; vertical-align: super; font-size: .68rem; }
.ask-cite:hover, .ask-cite.active { text-decoration: underline; }
.kp-ask-caret { display: inline-block; width: 7px; height: 1em; margin-left: 1px; background: #0a7e52; vertical-align: text-bottom; animation: kp-blink 1s steps(2) infinite; }
@keyframes kp-blink { 50% { opacity: 0; } }
.kp-ask-typing { color: #6b7280; font-size: .82rem; }
/* 出处浮层：贴角标冒出，显示片段大概内容 + 「查看原文」新窗口 */
.kp-ask-pop { position: absolute; z-index: 20; width: 250px; max-width: calc(100% - 8px); background: #fff; border: 1px solid #d1d5db; border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); padding: 8px 10px; }
.kp-ask-pop-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.kp-ask-pop-label { flex: 1; font-weight: 700; color: #0a7e52; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ask-pop-close { flex: 0 0 auto; min-height: 0; border: 0; background: transparent; color: #9ca3af; font-size: 1rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.kp-ask-pop-close:hover { color: #374151; background: transparent; }
.kp-ask-pop-body { max-height: 140px; overflow-y: auto; }
.kp-ask-pop-body p { margin: 0; font-size: .8rem; line-height: 1.6; color: #374151; }
.kp-ask-pop-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e5e7eb; }
.kp-ask-pop-file { flex: 1; color: #9ca3af; font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-ask-pop-open { flex: 0 0 auto; min-height: 0; border: 0; background: transparent; color: #0a7e52; font-weight: 700; font-size: .76rem; cursor: pointer; padding: 0; }
.kp-ask-pop-open:hover { text-decoration: underline; background: transparent; }
.kp-ask-form { display: flex; gap: 6px; align-items: flex-end; padding-top: 8px; border-top: 1px solid #e5e7eb; margin-top: 8px; }
.kp-ask-input { flex: 1; resize: none; border: 1px solid #d1d5db; border-radius: 8px; padding: 7px 9px; font-size: .84rem; font-family: inherit; line-height: 1.5; max-height: 120px; }
.kp-ask-input:focus { outline: none; border-color: #0a7e52; }
.kp-ask-send { flex: 0 0 auto; border: 0; border-radius: 8px; background: #0a7e52; color: #fff; padding: 8px 14px; font-size: .84rem; font-weight: 600; cursor: pointer; }
.kp-ask-send:disabled { opacity: .5; cursor: not-allowed; }

@media (prefers-color-scheme: dark) {
  .kp-ask-assistant { background: #111827; border-color: #374151; color: #e5e7eb; }
  .kp-ask-assistant h1, .kp-ask-assistant h2, .kp-ask-assistant h3 { color: #f3f4f6; }
  .kp-ask-assistant th, .kp-ask-assistant td { border-color: #374151; }
  .kp-ask-assistant code { background: #1f2937; }
  .kp-ask-pop { background: #1f2937; border-color: #374151; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
  .kp-ask-pop-body p { color: #e5e7eb; }
  .kp-ask-pop-foot { border-top-color: #374151; }
  .kp-ask-form { border-top-color: #374151; }
  .kp-ask-input { background: #0b1220; border-color: #374151; color: #e5e7eb; }
  .kp-ask-user { background: #065f46; }
}

@media (prefers-color-scheme: dark) {
  .kp-tab.active { background: #1f2937; color: #f3f4f6; }
  .kp-tab:hover, .kp-toc-item:hover { background: #1f2937; }
  .kp-collapse, .kp-rail-btn, .kp-app { background: #111827; border-color: #374151; color: #d1d5db; }
  .kp-empty-title, .kp-app strong, .kp-section-title { color: #f3f4f6; }
  .kp-tag { background: #064e3b; color: #a7f3d0; }
  .kp-cite { background: #111827; border-color: #374151; color: #d1d5db; }
  .kp-cite-self { background: #052e1c; border-color: #065f46; color: #a7f3d0; }
  .kp-frag-line { color: #d1d5db; }
  .kp-frag-line:hover { background: #1f2937; }
  .kp-frag.open > .kp-frag-line { background: #1f2937; color: #f9fafb; }
  .kp-piece { border-left-color: #065f46; }
  .kp-piece-text { color: #d1d5db; }
  .kp-frag-cur { background: #78350f; color: #fef3c7; }
  .doc-frag-box { background: #111827; border-left-color: #16a36d; }
  .doc-frag-hit { background: #78350f; color: #fef3c7; }
  .markdown-body .doc-cite-frag.open { background: #064e3b; }
  .kp-toc-item { color: #d1d5db; }
  .kp-toc-item.active { background: #1f2937; color: #f9fafb; }
}

.page-stack {
  display: grid;
  gap: 18px;
  max-width: 1180px;
  margin: 0 auto;
}

.login-screen {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 126px);
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) 360px;
  width: min(920px, 100%);
  overflow: hidden;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(31, 54, 45, 0.1);
}

.login-copy {
  padding: 34px;
  background:
    linear-gradient(90deg, rgba(232, 247, 239, 0.95), rgba(255, 255, 255, 0.88)),
    #fff;
}

.login-copy p {
  margin-top: 12px;
  color: #54625c;
  line-height: 1.75;
}

.login-form {
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 34px;
}

.login-form h2 {
  margin-bottom: 4px;
}

.login-error {
  min-height: 18px;
  color: #b42318;
  font-size: 12px;
}

.anonymous-home .hero-band,
.create-scope-page .hero-band {
  background:
    linear-gradient(90deg, rgba(232, 247, 239, 0.92), rgba(255, 255, 255, 0.9)),
    #fff;
}

.anonymous-score strong {
  font-size: 22px;
  line-height: 1.05;
}

.anonymous-home {
  max-width: 980px;
}

.anonymous-home .hero-band {
  justify-content: center;
  text-align: center;
}

.anonymous-home .hero-band p {
  margin-right: auto;
  margin-left: auto;
}

.anonymous-home .split-grid {
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 420px);
  align-items: stretch;
}

.inline-login-form,
.create-scope-form {
  align-content: start;
}

.inline-login-form h2,
.create-scope-form h2 {
  margin-bottom: 6px;
}

.center-form-wrap {
  display: grid;
  place-items: center;
  min-height: 360px;
}

.create-scope-form {
  width: min(520px, 100%);
}

.hero-band,
.panel,
.upload-zone,
.answer-card,
.document-view,
.graph-board {
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(31, 54, 45, 0.07);
}

.document-view {
  display: grid;
  gap: 16px;
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 42px;
}

.document-view h2 {
  font-size: 28px;
}

.document-view h3 {
  margin-top: 10px;
  font-size: 17px;
}

.document-view p,
.document-view li {
  color: #31433b;
  line-height: 1.78;
}

.document-view ul {
  margin: 0;
  padding-left: 20px;
}

.document-view .markdown-image {
  display: block;
  max-width: 100%;
  max-height: 720px;
  height: auto;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #f8fbf9;
}

.document-view .markdown-table-pdf {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.document-view .markdown-table-pdf iframe {
  width: 100%;
  min-height: 520px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #f8fbf9;
}

.document-view .markdown-table-pdf figcaption {
  font-weight: 720;
  color: #24362e;
}

.media-preview {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  border-top: 1px solid #e5ece8;
  padding-top: 18px;
}

.media-preview img,
.media-preview video {
  max-width: 100%;
  max-height: 560px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #f8fbf9;
}

.media-preview iframe {
  width: 100%;
  min-height: 420px;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #f8fbf9;
}

.doc-status-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px;
  background:
    linear-gradient(90deg, rgba(232, 247, 239, 0.9), rgba(255, 255, 255, 0.85)),
    #fff;
}

.eyebrow,
.panel-kicker {
  margin: 0 0 8px;
  color: #128058;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero-band p,
.upload-zone p,
.answer-card p {
  max-width: 680px;
  margin-top: 10px;
  color: #54625c;
  line-height: 1.75;
}

.hero-score {
  flex: 0 0 auto;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  border: 1px solid #cfe6da;
  border-radius: 8px;
  background: #f6fffa;
}

.hero-score span {
  color: #5f7169;
  font-size: 13px;
}

.hero-score strong {
  color: #0b7e50;
  font-size: 42px;
  line-height: 0.9;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.metric-card {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
}

.metric-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 8px;
  background: #e9f7ef;
  color: #0b7e52;
  font-weight: 800;
}

.metric-card strong {
  display: block;
  color: #16251e;
  font-size: 22px;
}

.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  gap: 16px;
}

.panel {
  padding: 18px;
}

.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  color: #172820;
  font-size: 15px;
  font-weight: 760;
}

.bar-list,
.timeline,
.grid {
  display: grid;
  gap: 12px;
}

.grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bar-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  color: #52635b;
  font-size: 13px;
}

.bar-track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf2ef;
}

.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a36d, #3c8bea);
}

.timeline-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.timeline-item strong {
  display: block;
  color: #1f3029;
  font-size: 14px;
}

.timeline-dot {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 8px;
  background: #e9f5ef;
  color: #0b7e52;
  font-size: 12px;
  font-weight: 800;
}

.upload-zone {
  display: grid;
  min-height: 254px;
  place-items: center;
  padding: 36px;
  text-align: center;
  border: 2px dashed #12a36b;
  background:
    radial-gradient(circle at 50% 0%, rgba(19, 163, 107, 0.16), transparent 38%),
    linear-gradient(180deg, #ecfff5, #f8fffb);
  box-shadow: inset 0 0 0 1px rgba(19, 163, 107, 0.08), 0 18px 50px rgba(31, 54, 45, 0.09);
}

.upload-cloud-icon {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  margin-bottom: 2px;
  border-radius: 999px;
  background: #13a36b;
  color: #fff;
  box-shadow: 0 12px 28px rgba(19, 163, 107, 0.24);
  font-size: 32px;
  font-weight: 800;
}

.upload-actions {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.upload-library-select {
  display: grid;
  gap: 6px;
  min-width: 220px;
  text-align: left;
}

.upload-library-select span {
  color: #51635b;
  font-size: 12px;
  font-weight: 760;
}

.upload-library-select select {
  height: 38px;
  border: 1px solid #bedccd;
  border-radius: 8px;
  background: #fff;
  color: #173027;
  outline: 0;
  padding: 0 12px;
  font-weight: 680;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 760;
}

.primary-button {
  border: 1px solid #0f8e5d;
  background: #13a36b;
  color: white;
}

.danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 760;
  border: 1px solid #f0c2bd;
  background: #fff;
  color: #b42318;
  cursor: pointer;
}
.danger-button:hover { background: #fef2f1; border-color: #e6a29b; }

.secondary-button {
  border: 1px solid #d6dfda;
  background: #fff;
  color: #30443b;
}

.upload-message {
  min-height: 18px;
  color: #51635b;
  font-size: 12px;
  font-weight: 650;
}

.processing-panel {
  padding: 0;
  overflow: hidden;
}

.processing-panel .panel-title {
  margin: 0;
  padding: 18px 20px;
  border-bottom: 1px solid #edf1ef;
}

.process-list {
  display: grid;
}

.process-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) 110px 130px minmax(180px, 1fr) 110px 90px;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  border-bottom: 1px solid #edf1ef;
  padding: 12px 20px;
  color: #273a31;
  font-size: 13px;
}

.process-row:last-child {
  border-bottom: 0;
}

.process-head {
  min-height: 42px;
  background: #f7faf8;
  color: #78867f;
  font-size: 12px;
  font-weight: 760;
}

.process-name {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.process-name strong,
.process-name small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.process-name small {
  color: #738078;
  font-size: 12px;
}

.type-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 720;
}

.type-pill {
  background: #eef4f0;
  color: #40534a;
}

.status-pill.done {
  background: #e8f7ef;
  color: #0e7b51;
}

.status-pill.processing {
  background: #e8f0ff;
  color: #285cad;
}

.status-pill.queued {
  background: #fff2d8;
  color: #9b6410;
}

.status-pill.failed {
  background: #fdebea;
  color: #b42318;
}

.process-empty {
  padding: 22px 20px;
  color: #738078;
  font-size: 13px;
}

.package-builder {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1fr);
  gap: 18px;
  align-items: start;
}

.package-scope-panel,
.package-draft-panel {
  display: grid;
  gap: 14px;
}

.package-scope-panel .toolbar,
.package-draft-panel .toolbar {
  align-items: end;
}

.package-scope-panel .toolbar input {
  width: min(280px, 42vw);
}

.package-scope-list,
.package-draft-list,
.published-package-list,
.package-detail-scopes {
  display: grid;
  gap: 10px;
}

.package-scope-row,
.package-draft-row,
.published-package-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e1e8e4;
  border-radius: 8px;
  background: #fbfdfc;
  padding: 12px;
}

.package-scope-row strong,
.package-draft-row strong,
.published-package-card a {
  color: #173027;
  font-weight: 780;
}

.package-scope-row p,
.package-draft-row p,
.published-package-card p {
  margin-top: 5px;
  color: #62726a;
  font-size: 13px;
  line-height: 1.5;
}

.package-pager,
.package-publish-form,
.package-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.package-pager {
  justify-content: flex-end;
  color: #68786f;
  font-size: 12px;
  font-weight: 680;
}

.package-publish-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.published-package-card code,
.package-detail-body code {
  display: block;
  width: fit-content;
  max-width: 100%;
  overflow-wrap: anywhere;
  margin-top: 8px;
  border-radius: 7px;
  background: #eef4f0;
  color: #30443b;
  padding: 7px 9px;
  font-size: 12px;
}

.package-use-note {
  color: #0b7e52 !important;
  font-weight: 680;
}

.package-actions {
  justify-content: flex-end;
}

.package-detail-modal {
  width: min(680px, 100%);
}

.package-detail-body {
  display: grid;
  gap: 14px;
}

.package-detail-scopes div {
  display: grid;
  gap: 4px;
  border: 1px solid #e1e8e4;
  border-radius: 8px;
  background: #fbfdfc;
  padding: 12px;
}

.package-detail-scopes span {
  color: #62726a;
  font-size: 13px;
}

.upload-box {
  display: grid;
  gap: 12px;
  place-items: center;
  min-height: 190px;
  border: 1px dashed #a8c8b9;
  border-radius: 8px;
  background: #f7fbf9;
  padding: 24px;
  text-align: center;
}

.upload-mark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 8px;
  background: #e2f4eb;
  color: #0b7e52;
  font-size: 24px;
  font-weight: 800;
}

.pipeline {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.pipeline-step {
  border: 1px solid #dce5e0;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.pipeline-step strong {
  display: block;
  color: #1b2c25;
  font-size: 13px;
}

.pipeline-step span {
  display: block;
  margin-top: 5px;
  color: #6d7c75;
  font-size: 12px;
}

.table-wrap {
  overflow: auto;
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #fff;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th,
.table td {
  border-bottom: 1px solid #edf1ef;
  padding: 11px 12px;
  text-align: left;
  vertical-align: top;
}

.table th {
  color: #607069;
  background: #f7faf8;
  font-size: 12px;
  font-weight: 760;
}

.table tr:last-child td {
  border-bottom: 0;
}

.table-link {
  min-height: 0;
  border: 0;
  background: transparent;
  padding: 0;
  color: #176b4c;
  font-weight: 760;
  text-align: left;
}

.table-link:hover {
  color: #0f5138;
  text-decoration: underline;
}

.table-action {
  min-height: 28px;
  border: 1px solid #d8e2dc;
  background: #ffffff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 760;
}

.table-action.danger {
  border-color: #f1b8b2;
  color: #b42318;
}

.table-action.danger:hover {
  background: #fff4f2;
  border-color: #e07a70;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  background: #e7f4ed;
  color: #0b7e52;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 700;
}

.badge.blue {
  background: #e8f1fb;
  color: #2563a8;
}

.badge.warn {
  background: #fff4df;
  color: #97630a;
}

.card {
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.answer-card {
  display: grid;
  gap: 12px;
  padding: 20px;
}

.search-row,
.form-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.form-grid.three {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
}

.result-card {
  display: grid;
  gap: 8px;
  border: 1px solid #dce5e0;
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

.result-card p {
  color: #40504a;
  line-height: 1.65;
}

.focused-document {
  display: grid;
  gap: 14px;
  border: 1px solid #cfe6da;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(31, 54, 45, 0.08);
  padding: 22px;
}

.focused-document p {
  color: #31433b;
  line-height: 1.78;
}

.document-meta {
  color: #64736c;
  font-size: 12px;
  font-weight: 650;
}

.graph-filter-panel {
  display: grid;
  gap: 12px;
}

.graph-scope-filter {
  display: grid;
  grid-template-columns: minmax(220px, 360px) auto auto;
  gap: 8px;
  align-items: center;
}

.graph-scope-options {
  display: flex;
  max-width: 360px;
  gap: 6px;
  overflow-x: auto;
  padding: 4px;
  border: 1px solid #d7e2dc;
  border-radius: 8px;
  background: #fbfdfb;
}

.graph-scope-option {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 8px;
  border-radius: 6px;
  color: #263b32;
  font-size: 12px;
  white-space: nowrap;
}

.graph-scope-option input {
  margin: 0;
}

.graph-stat-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(82px, 1fr));
  gap: 8px;
}

.graph-stat-row span {
  display: grid;
  gap: 2px;
  min-height: 48px;
  align-content: center;
  border: 1px solid #dce5df;
  border-radius: 8px;
  background: #fbfdfb;
  padding: 8px 10px;
  color: #65756d;
  font-size: 11px;
  font-weight: 720;
}

.graph-stat-row strong {
  color: #1c2b24;
  font-size: 16px;
}

.graph-board {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  background:
    linear-gradient(#edf3ef 1px, transparent 1px),
    linear-gradient(90deg, #edf3ef 1px, transparent 1px),
    #fff;
  background-size: 36px 36px;
}

.graph-board svg {
  display: block;
  width: 100%;
  height: 560px;
  cursor: move;
}

.graph-empty {
  display: grid;
  min-height: 560px;
  place-items: center;
  color: #64736c;
  font-weight: 700;
}

.graph-link {
  position: absolute;
  height: 2px;
  transform-origin: left center;
  background: rgba(95, 125, 111, 0.28);
  z-index: 1;
}

.graph-node {
  position: absolute;
  display: grid;
  place-items: center;
  width: 124px;
  min-height: 46px;
  transform: translate(-50%, -50%);
  border: 1px solid #cfe2d8;
  border-radius: 8px;
  background: #f8fffb;
  color: #173a2d;
  box-shadow: 0 12px 32px rgba(31, 54, 45, 0.12);
  padding: 7px;
  text-align: center;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
  overflow-wrap: anywhere;
  z-index: 2;
  cursor: pointer;
}

.graph-node:hover,
.graph-node.active {
  border-color: #6ab98f;
  box-shadow: 0 14px 34px rgba(34, 101, 71, 0.18);
}

.graph-node.root,
.graph-node.scope_summary,
.graph-node.category_summary {
  border-color: #cbd9ee;
  background: #f3f7ff;
  color: #284b80;
}

.graph-node.scope {
  border-color: #a9d6bf;
  background: #eefaf3;
  color: #11633e;
}

.graph-node.category {
  border-color: #ead1a8;
  background: #fff8ea;
  color: #725018;
}

.graph-node.source_item {
  border-color: #d8d2ea;
  background: #f7f3ff;
  color: #543f82;
}

.graph-node.fragment {
  border-color: #d8dedb;
  background: #fbfcfb;
  color: #4d5e57;
}

.graph-node.keyword {
  border-color: #d3dfbb;
  background: #f8fbef;
  color: #4e651d;
}

.graph-edge-json {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  max-height: 128px;
  overflow: auto;
  border: 1px solid #dce5df;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  color: #40554c;
  font-size: 11px;
  z-index: 3;
}

@media (max-width: 860px) {
  .graph-scope-filter {
    grid-template-columns: 1fr;
  }

  .graph-stat-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.right-stack {
  display: grid;
  align-content: start;
  gap: 14px;
  width: 100%;
  min-width: 0;
}

.assistant-card {
  border: 1px solid #dde5e0;
  border-radius: 8px;
  background: #fff;
  padding: 15px;
}

.assistant-card h2 {
  margin-bottom: 12px;
  font-size: 16px;
}

.assistant-card p,
.assistant-card li {
  color: #56665f;
  font-size: 13px;
  line-height: 1.65;
}

.assistant-card ul {
  margin: 0;
  padding-left: 18px;
}

.operation-list {
  display: grid;
  gap: 8px;
}

.operation-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid #eef2ef;
  border-radius: 8px;
  background: #fbfdfc;
  padding: 10px;
}

.operation-icon {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 7px;
  background: #e9f5ef;
  color: #0b7e52;
  font-size: 12px;
  font-weight: 800;
}

pre {
  max-height: 360px;
  overflow: auto;
  margin: 0;
  border-radius: 8px;
  background: #102019;
  color: #e7f4ed;
  padding: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.danger {
  color: #b42318;
}

@media (max-width: 1120px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .right-panel {
    height: auto;
    border-left: 0;
    border-top: 1px solid #dce3df;
  }

  .metric-grid,
  .pipeline,
  .split-grid {
    grid-template-columns: 1fr;
  }
}

/* SPEC06: scope file tree + 4-state badges + conflict dialog */
.file-tree-meta {
  margin-left: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #6b7a72;
}
.file-tree-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 8px 0 12px;
  font-size: 12px;
  color: #6b7a72;
}
.file-tree,
.file-tree-root {
  list-style: none;
  margin: 0;
  padding-left: 18px;
}
.file-tree-root {
  padding-left: 0;
}
.file-node {
  margin: 2px 0;
}
.file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 6px;
}
.file-row:hover {
  background: #f2f6f4;
}
.file-icon {
  font-size: 14px;
}
.file-name {
  font-size: 14px;
  color: #26332d;
  word-break: break-all;
}
.file-tree-empty {
  padding: 16px;
  color: #8a978f;
  font-size: 14px;
}
.file-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.badge-pre {
  background: #9aa7a0;
}
.badge-work {
  background: #e0a83d;
}
.badge-no {
  background: #c66;
}
.badge-done {
  background: #3f9d6f;
}
.conflict-modal .conflict-list {
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  color: #3a473f;
}
.conflict-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.text-button {
  background: none;
  border: none;
  color: #6b7a72;
  cursor: pointer;
  font-size: 14px;
}

/* SPEC06: collapsible folder browser */
.file-dir > details > summary {
  list-style: none;
  cursor: pointer;
}
.file-dir > details > summary::-webkit-details-marker {
  display: none;
}
.file-dir > details > summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: #8a978f;
  transition: transform 0.12s ease;
}
.file-dir > details[open] > summary::before {
  transform: rotate(90deg);
}
.file-dir-count {
  margin-left: 6px;
  font-size: 11px;
  color: #8a978f;
  background: #eef2f0;
  border-radius: 8px;
  padding: 0 7px;
}

/* SPEC06: file-type breakdown */
.type-count-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 10px;
}
.type-count {
  font-size: 12px;
  color: #52605a;
  background: #eef2f0;
  border-radius: 6px;
  padding: 2px 9px;
}
.type-count b {
  color: #26332d;
}

/* SPEC06 build/generate UI ------------------------------------------------ */
.scope-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 999px;
  font-weight: 600;
  line-height: 1.6;
}
.scope-badge.pending { background: #fee2e2; color: #b91c1c; }
.scope-badge.generating { background: #fef3c7; color: #92400e; }
@media (prefers-color-scheme: dark) {
  .scope-badge.pending { background: #7f1d1d; color: #fecaca; }
  .scope-badge.generating { background: #78350f; color: #fde68a; }
}

.scope-health-tag {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted, #64748b);
  margin-left: 8px;
}
.tree-empty-hint {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--muted, #94a3b8);
  font-style: italic;
}

/* build stepper */
.gen-steps { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 10px; }
.gen-step { display: flex; align-items: flex-start; gap: 10px; }
.gen-mark {
  flex: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: #e2e8f0; color: #64748b;
}
.gen-step.active .gen-mark { background: #2563eb; color: #fff; animation: genPulse 1.2s ease-in-out infinite; }
.gen-step.done .gen-mark { background: #16a34a; color: #fff; }
.gen-step.error .gen-mark { background: #dc2626; color: #fff; }
.gen-body { display: flex; flex-direction: column; gap: 2px; }
.gen-step.pending .gen-body strong { color: #94a3b8; }
.gen-detail { font-size: 12px; color: var(--muted, #64748b); }
.gen-file { font-size: 11px; color: #94a3b8; word-break: break-all; }
.gen-err { color: #dc2626; }
/* 在处理文件的细粒度进度（字数/图片/表格 + 知识图谱化%）；并发建图时每文件一块 */
.gen-file-item { margin-top: 6px; padding-left: 8px; border-left: 2px solid #e2e8f0; }
.gen-substat { font-size: 11px; color: #64748b; }
.gen-bar {
  display: inline-block; width: 180px; max-width: 70%; height: 6px;
  border-radius: 3px; background: #e2e8f0; overflow: hidden;
  vertical-align: middle; margin-left: 6px;
}
.gen-bar-fill { display: block; height: 100%; background: #2563eb; border-radius: 3px; transition: width .5s ease; }
@keyframes genPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-color-scheme: dark) {
  .gen-mark { background: #334155; color: #cbd5e1; }
  .gen-file-item { border-left-color: #334155; }
  .gen-substat { color: #94a3b8; }
  .gen-bar { background: #334155; }
}

/* SPEC06 知识总览 blocks (style ref: gitlearn/knowforge-demo) --------------- */
.hero-band {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;
  padding: 22px 24px; border-radius: 16px;
  background: linear-gradient(135deg, #eff6ff, #f8fafc);
  border: 1px solid #e2e8f0;
}
.hero-band .eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #2563eb; margin: 0 0 6px; }
.hero-band h2 { margin: 0 0 8px; font-size: 22px; }
.hero-band p { margin: 0; color: #475569; max-width: 60ch; }
.hero-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
/* 单列：健康度 → 重新生成 → 删除知识库，右对齐 */
.hero-actions .upload-actions { flex-direction: column; align-items: flex-end; justify-content: flex-end; flex-wrap: nowrap; gap: 8px; }
/* 「重新生成」与「删除知识库」两个按钮同宽同高，观感一致 */
.hero-actions #generateBtn, .hero-actions #deleteScopeBtn { min-width: 132px; }
@media (prefers-color-scheme: dark) {
  .hero-band { background: linear-gradient(135deg, #1e293b, #0f172a); border-color: #334155; }
  .hero-band p { color: #94a3b8; }
}

.kf-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.kf-metric {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0;
}
.kf-metric.total { background: #eef2ff; }
.kf-metric > div { display: flex; flex-direction: column; }
.kf-metric strong { font-size: 22px; line-height: 1.1; }
.kf-metric span:last-child { font-size: 12px; color: #64748b; }
@media (prefers-color-scheme: dark) {
  .kf-metric { background: #1e293b; border-color: #334155; }
  .kf-metric.total { background: #312e81; }
  .kf-metric span:last-child { color: #94a3b8; }
}

.endpoint-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px; background: #f8fafc; border: 1px solid #e2e8f0;
}
.endpoint-icon { font-size: 20px; flex: none; }
.endpoint-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.endpoint-body > span { font-size: 12px; color: #64748b; }
.endpoint-body > strong { font-size: 13px; font-weight: 600; word-break: break-all; color: #2563eb; }
.endpoint-body > p { margin: 2px 0 0; font-size: 12px; color: #64748b; }
@media (prefers-color-scheme: dark) {
  .endpoint-card { background: #1e293b; border-color: #334155; }
  .endpoint-body > span, .endpoint-body > p { color: #94a3b8; }
}

.scope-folder-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; cursor: pointer; user-select: none; margin-bottom: 0; }
.scope-folder-caret { color: #94a3b8; width: 14px; flex: none; display: inline-block; text-align: center; }
.scope-folder-head .file-icon { flex: none; }
.scope-folder-head .file-tree-meta { margin-left: auto; }
.scope-folder-body { margin-top: 8px; }
.health-chip { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .health-chip { background: #312e5f; color: #c7d2fe; } }

/* SPEC06 delete (D) state + per-file delete button --------------------------- */
.file-badge.badge-del { background: #fee2e2; color: #b91c1c; }
@media (prefers-color-scheme: dark) { .file-badge.badge-del { background: #7f1d1d; color: #fecaca; } }
.file-badge.badge-err { background: #ffedd5; color: #c2410c; }
@media (prefers-color-scheme: dark) { .file-badge.badge-err { background: #7c2d12; color: #fed7aa; } }
.file-row { position: relative; }
.file-del {
  margin-left: auto;
  border: none; background: transparent; cursor: pointer;
  color: #cbd5e1; font-size: 12px; line-height: 1; padding: 2px 6px; border-radius: 6px;
  opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
.file-row:hover .file-del { opacity: 1; }
.file-del:hover { color: #dc2626; background: #fee2e2; }
@media (prefers-color-scheme: dark) { .file-del:hover { background: #7f1d1d; } }

/* D (marked-delete) files: visible but struck-through until 重新生成 removes them. */
.file-marked-del .file-name { text-decoration: line-through; }
.file-marked-del .file-icon, .file-marked-del .file-name { opacity: .55; }
.file-restore { opacity: 1; color: #2563eb; }
.file-restore:hover { color: #1d4ed8; background: #dbeafe; }
@media (prefers-color-scheme: dark) { .file-restore { color: #93c5fd; } .file-restore:hover { background: #1e3a8a; } }

/* 阶段二 *-doc 文档渲染 (§7.6) --------------------------------------------- */
.doc-panel.markdown-body { line-height: 1.7; color: #1f2937; max-width: 900px; }
.markdown-body h1 { font-size: 1.6rem; margin: 0 0 .6em; }
.markdown-body h2 { font-size: 1.25rem; margin: 1.6em 0 .5em; padding-bottom: .3em; border-bottom: 1px solid #e5e7eb; }
.markdown-body h3 { font-size: 1.08rem; margin: 1.2em 0 .4em; }
/* 片段级出处（SPEC08 §3.2）：角标可点开该段原文，就地插在段落之后 */
.markdown-body .doc-cite-frag { cursor: pointer; }
.markdown-body .doc-cite-frag.open { background: #d1fae5; }
.doc-frag-box {
  margin: 8px 0 14px; border-left: 3px solid #16a36d; border-radius: 6px;
  background: #f6faf8; padding: 10px 12px;
}
.doc-frag-src { color: #4b5563; font-size: .8rem; margin-bottom: 6px; word-break: break-all; }
.doc-frag-box p { margin: 0 0 6px; font-size: .88rem; line-height: 1.7; }
.doc-frag-hit { color: #111827; background: #fef3c7; border-radius: 4px; padding: 2px 4px; }

/* 目录/锚点跳转后短暂点亮目标标题，滚动到位后用户能确认落点 */
.markdown-body .doc-heading-flash { background: #fef3c7; transition: background .4s ease; border-radius: 4px; }
.markdown-body p, .markdown-body li { font-size: .95rem; }
.markdown-body ul, .markdown-body ol { padding-left: 1.4em; }
/* 代码块前景/背景成对显式指定：不靠继承（系统深色模式/浏览器强制深色下，
   继承色可能与底色同为浅色 → 文字"选中才可见"） */
.markdown-body code { background: #f3f4f6; color: #1f2937; padding: .1em .35em; border-radius: 4px; font-size: .88em; }
.markdown-body pre { background: #f6f8fa; color: #1f2937; padding: 12px 14px; border-radius: 8px; overflow-x: auto; }
.markdown-body pre code { background: none; color: inherit; padding: 0; }
.markdown-body table { border-collapse: collapse; margin: .8em 0; display: block; overflow-x: auto; }
.markdown-body th, .markdown-body td { border: 1px solid #d1d5db; padding: 6px 10px; font-size: .9rem; }
.markdown-body th { background: #f3f4f6; }
.markdown-body cite { display: block; background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #6366f1; border-radius: 6px; padding: 10px 14px; margin: 0 0 1em; font-style: normal; }
.markdown-body cite b, .markdown-body cite strong { display: block; margin-bottom: .3em; color: #475569; font-size: .85rem; }
.markdown-body .doc-img { max-width: 100%; height: auto; display: block; margin: .8em auto; border: 1px solid #e5e7eb; border-radius: 6px; }
.markdown-body .doc-cite-link { color: #2563eb; text-decoration: none; }
.markdown-body .doc-cite-link:hover { text-decoration: underline; }
/* 顶部出处清单折叠块（<cite> 显示层转成 <details>，默认收起） */
.markdown-body details.doc-cite-block { background: #f8fafc; border: 1px solid #e2e8f0; border-left: 3px solid #6366f1; border-radius: 6px; padding: 8px 14px; margin: 0 0 1em; }
.markdown-body details.doc-cite-block summary { cursor: pointer; color: #64748b; font-size: .85rem; user-select: none; }
.markdown-body details.doc-cite-block[open] summary { margin-bottom: .4em; }
/* 句中引用小角标：悬停显示文件名，点击打开原文 */
.markdown-body .doc-cite-mini { font-size: .72em; vertical-align: super; opacity: .6; margin: 0 2px; white-space: nowrap; }
.markdown-body .doc-cite-mini:hover { opacity: 1; }
.markdown-body .mermaid { display: flex; justify-content: center; margin: 1em 0; background: #fff; }
/* mermaid 语法错降级块（app.js runMermaidIn 预检失败时生成） */
.markdown-body details.doc-mermaid-broken { background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px; padding: 8px 14px; margin: 1em 0; }
.markdown-body details.doc-mermaid-broken summary { cursor: pointer; color: #92400e; font-size: .85rem; user-select: none; }
.markdown-body details.doc-mermaid-broken pre { margin: .5em 0 0; }
.tree-item.doc-dir { cursor: pointer; font-weight: 600; color: #475569; user-select: none; }
.tree-item.doc-dir:hover { background: #f1f5f9; }
.doc-dir-caret { flex: 0 0 auto; width: 14px; text-align: center; font-size: 11px; color: #64748b; }
@media (prefers-color-scheme: dark) {
  .tree-item.doc-dir:hover { background: #1e293b; }
  .doc-dir-caret { color: #94a3b8; }
}
.tree-item.doc-item.is-open { background: #eef2ff; color: #4338ca; }
@media (prefers-color-scheme: dark) {
  .doc-panel.markdown-body { color: #e5e7eb; }
  .markdown-body h2 { border-color: #374151; }
  .markdown-body code, .markdown-body pre { background: #1f2937; color: #e5e7eb; }
  .markdown-body th, .markdown-body td { border-color: #374151; }
  .markdown-body th { background: #111827; }
  .markdown-body cite { background: #111827; border-color: #374151; border-left-color: #818cf8; }
  .markdown-body details.doc-cite-block { background: #111827; border-color: #374151; border-left-color: #818cf8; }
  .markdown-body details.doc-cite-block summary { color: #94a3b8; }
  .markdown-body .mermaid { background: #f8fafc; border-radius: 6px; padding: 8px; }
  .tree-item.doc-item.is-open { background: #312e81; color: #c7d2fe; }
}

/* 阶段二 目录先出、内容后填 —— 生成中占位 */
.tree-item.doc-item.is-pending { opacity: 0.7; }
.doc-pending-badge { margin-left: auto; font-size: 11px; color: #b45309; background: #fef3c7; border-radius: 10px; padding: 1px 7px; white-space: nowrap; }
.doc-generating { padding: 24px 4px; }
.doc-generating .doc-pending-badge { margin: 0; font-size: 13px; }
@media (prefers-color-scheme: dark) {
  .doc-pending-badge { color: #fcd34d; background: #422006; }
}

/* 文档树标题：完全展开、不省略、横排（用户要求）。
   基类 .tree-item 是 display:grid（13px 18px 1fr），doc-dir/doc-item 子元素数量不同会把
   标题挤进 18px 窄列 → 竖排/截断。这里改成 flex 横排，标题占满剩余宽度。 */
.tree-item.doc-item, .tree-item.doc-dir {
  display: flex; align-items: center; gap: 6px;
  height: auto; min-height: 30px; padding-top: 5px; padding-bottom: 5px;
}
.tree-item.doc-item .tree-caret, .tree-item.doc-item .tree-icon, .tree-item.doc-dir .tree-icon { flex: 0 0 auto; }
.doc-title { flex: 1 1 auto; min-width: 0; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: break-word; line-height: 1.35; }
.tree-item.doc-item .doc-pending-badge { flex: 0 0 auto; align-self: center; }

/* 知识来源文件（按贡献度）—— 知识库详情页 文件处理情况 面板内 */
.source-rank-head { margin: 16px 0 8px; font-size: 13px; font-weight: 600; color: #334155; }
.source-rank-hint { margin-left: 8px; font-size: 12px; font-weight: 400; }
.source-rank-list { display: grid; gap: 2px; max-height: 360px; overflow-y: auto; }
.source-rank-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; }
.source-rank-row:hover { background: #f1f5f9; }
.source-rank-name { flex: 0 0 auto; font-weight: 600; color: #1e293b; }
.source-rank-path { flex: 1 1 auto; min-width: 0; color: #94a3b8; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
.source-rank-score { flex: 0 0 auto; font-size: 11.5px; color: #0f8e5d; background: #eafaf3; border: 1px solid #cdeede; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.source-rank-score b { font-weight: 800; }
@media (prefers-color-scheme: dark) {
  .source-rank-head { color: #cbd5e1; }
  .source-rank-row:hover { background: #1e293b; }
  .source-rank-name { color: #e2e8f0; }
  .source-rank-path { color: #64748b; }
  .source-rank-score { color: #6ee7b7; background: #06281c; border-color: #0f5138; }
}