/* 知识资料库 · 样式（沿用 smart-nav 猫咪主题风格：深浅双主题 + 玻璃卡片） */
:root {
  --acc: #5b6ee8;
  --acc-d: #7c9cf5;
  --acc-rgb: 91, 110, 232;
  --acc-d-rgb: 124, 156, 245;
}
* { box-sizing: border-box; }
/* 关键修复：浏览器对 <button>/<input>/<select> 默认不继承字体和颜色（强制用系统黑字），
   导致深色主题下阶段卡片等按钮内的文字仍是黑色、看不清 —— 显式让表单控件跟随主题 */
button, input, select, textarea {
  font-family: inherit;
  font-size: 100%;
  color: inherit;
}
html, body { margin: 0; padding: 0; min-height: 100%; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  display: flex; flex-direction: column; min-height: 100vh;
  transition: background .4s, color .4s;
}
body.theme-dark {
  background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(var(--acc-d-rgb), .14), transparent 70%), #1e2430;
  color: #e5e7eb;
}
body.theme-light {
  background: radial-gradient(ellipse 80% 55% at 50% -5%, rgba(var(--acc-rgb), .10), transparent 70%), #f6f4ef;
  color: #3f3f3f;
}

.kb-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; gap: 12px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
body.theme-dark .kb-top { background: rgba(30, 36, 48, .72); border-bottom: 1px solid rgba(255,255,255,.06); }
body.theme-light .kb-top { background: rgba(246, 244, 239, .85); border-bottom: 1px solid rgba(0,0,0,.08); }
.kb-top-left { display: flex; align-items: center; gap: 14px; }
.kb-top h1 { font-size: 20px; margin: 0; display: flex; align-items: center; gap: 10px; }
.kb-top h1 i { color: var(--acc); }
body.theme-dark .kb-top h1 i { color: var(--acc-d); }
.kb-top-right { display: flex; align-items: center; gap: 10px; }

.kb-btn {
  border: none; cursor: pointer; border-radius: 12px; padding: 8px 14px;
  font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
  transition: background .2s, transform .1s;
}
.kb-btn:active { transform: scale(.96); }
.kb-btn.ghost {
  background: rgba(255,255,255,.06); color: inherit;
  border: 1px solid rgba(255,255,255,.10);
}
body.theme-light .kb-btn.ghost { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.10); }
.kb-btn.ghost:hover { background: rgba(var(--acc-rgb), .15); }
.kb-btn.primary { background: var(--acc); color: #fff; }
body.theme-dark .kb-btn.primary { background: var(--acc-d); color: #10153a; }
.kb-btn.danger { background: rgba(220,38,38,.15); color: #f87171; border: 1px solid rgba(220,38,38,.3); }
body.theme-light .kb-btn.danger { background: rgba(220,38,38,.08); color: #b91c1c; }
.kb-btn:disabled { opacity: .5; cursor: not-allowed; }

.kb-main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 24px; }

.kb-card {
  border-radius: 16px; padding: 20px;
  transition: background .4s, border-color .4s;
}
body.theme-dark .kb-card { background: rgba(44,48,54,.6); border: 1px solid rgba(255,255,255,.06); box-shadow: 0 20px 25px -5px rgba(0,0,0,.3); }
body.theme-light .kb-card { background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08); box-shadow: 0 10px 25px -5px rgba(0,0,0,.08); }

.hidden { display: none !important; }

/* —— 认证弹窗 —— */
#auth-modal { z-index: 400; } /* 需叠在阶段详情弹窗(300)之上 */
#auth-modal .auth-card { max-width: 420px; width: 100%; margin: 0; padding: 22px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.auth-tab {
  flex: 1; padding: 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; font-size: 14px; font-weight: 600;
  background: transparent; color: inherit; opacity: .6; transition: all .2s;
}
.auth-tab.active {
  background: rgba(var(--acc-rgb), .16); color: var(--acc); opacity: 1;
  border-color: rgba(var(--acc-rgb), .35);
}
body.theme-dark .auth-tab.active { color: var(--acc-d); }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form label { font-size: 12px; opacity: .75; display: block; margin-bottom: 6px; }
.auth-input {
  width: 100%; padding: 11px 14px; border-radius: 12px; font-size: 14px;
  outline: none; transition: border-color .2s; border: 1px solid transparent;
}
body.theme-dark .auth-input { background: rgba(255,255,255,.07); color: #e5e7eb; border-color: rgba(255,255,255,.12); }
body.theme-light .auth-input { background: rgba(0,0,0,.04); color: #111; border-color: rgba(0,0,0,.12); }
.auth-input:focus { border-color: rgba(var(--acc-rgb), .6); }
/* 用户名可能含下划线 _，用等宽字体+略大字号保证 _ 清晰可辨，避免“输了却看不清” */
#login-user, #reg-user { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 15px; letter-spacing: .3px; }
.auth-msg { margin-top: 14px; font-size: 13px; min-height: 18px; }
.auth-msg.err { color: #f87171; }
.auth-msg.ok { color: #34d399; }
.auth-hint { font-size: 12px; opacity: .6; margin-top: 12px; line-height: 1.7; }

/* —— 阶段分组 —— */
#kb-welcome { margin-bottom: 18px; }
#kb-welcome h2 { margin: 0 0 6px; font-size: 18px; }
#kb-welcome p { margin: 0; font-size: 13px; opacity: .75; line-height: 1.8; }
.stage-group { margin-bottom: 26px; }
.stage-group-title {
  font-size: 14px; font-weight: 700; margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.stage-group-title .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); }
body.theme-dark .stage-group-title .dot { background: var(--acc-d); }
.stage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.stage-card {
  border-radius: 14px; padding: 16px; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 8px; transition: transform .15s, border-color .2s;
  border: 1px solid transparent;
}
.stage-card:hover { transform: translateY(-2px); border-color: rgba(var(--acc-rgb), .45); }
body.theme-dark .stage-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.08); }
body.theme-light .stage-card { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
.stage-card .s-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 18px; background: rgba(var(--acc-rgb), .16); color: var(--acc); }
body.theme-dark .stage-card .s-icon { color: var(--acc-d); }
.stage-card .s-name { font-size: 15px; font-weight: 700; }
.stage-card .s-id { font-size: 11px; opacity: .55; letter-spacing: .5px; }
.stage-card .s-count { font-size: 12px; opacity: .7; }

/* —— 模态框 —— */
.kb-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(2,6,23,.6); backdrop-filter: blur(4px);
}
.kb-modal-card {
  width: 100%; max-width: 560px; max-height: 80vh; overflow: auto;
  border-radius: 18px; padding: 22px;
}
body.theme-dark .kb-modal-card { background: #1b2230; border: 1px solid rgba(255,255,255,.10); }
body.theme-light .kb-modal-card { background: #fff; border: 1px solid rgba(0,0,0,.12); }
.kb-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.kb-modal-head h2 { margin: 0; font-size: 17px; }
.kb-modal-body { display: flex; flex-direction: column; gap: 12px; }
.kb-form-row { display: flex; flex-direction: column; gap: 6px; }
.kb-form-row label { font-size: 12px; opacity: .75; }
.file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 12px; font-size: 13px;
}
body.theme-dark .file-row { background: rgba(255,255,255,.05); }
body.theme-light .file-row { background: rgba(0,0,0,.03); }
.file-row .f-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .f-meta { font-size: 11px; opacity: .55; flex-shrink: 0; }
.file-row .f-actions { display: flex; gap: 8px; flex-shrink: 0; }
.stage-toolbar { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.drag-hint { font-size: 11px; opacity: .6; }
.type-hint-btn {
  font-size: 12px; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid rgba(128,128,128,.35); background: none; color: inherit;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .75; flex-shrink: 0;
}
.type-hint-btn:hover { opacity: 1; }
.type-hint {
  position: absolute; top: 44px; left: 16px; z-index: 60;
  max-width: 320px; padding: 10px 12px; border-radius: 10px;
  font-size: 12px; line-height: 1.7;
}
body.theme-dark .type-hint { background: #1b2230; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body.theme-light .type-hint { background: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.trash-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 4px; }
.trash-all { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.trash-check { margin: 0 10px 0 2px; }
.toolbar-spacer { flex: 1; }
.sort-group { display: flex; gap: 4px; }
.sort-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid rgba(128,128,128,.3); background: none; color: inherit; opacity: .7;
}
.sort-btn.active { opacity: 1; background: rgba(var(--acc-rgb), .15); border-color: rgba(var(--acc-rgb), .5); }
#stage-files.drag-over { outline: 2px dashed var(--acc); outline-offset: -6px; border-radius: 12px; }
body.theme-dark #stage-files.drag-over { outline-color: var(--acc-d); }
.kb-stats {
  display: flex; align-items: center; gap: 6px;
  margin: -4px 0 16px; padding: 10px 14px; border-radius: 12px; font-size: 13px;
}
body.theme-dark .kb-stats { background: rgba(255,255,255,.05); }
body.theme-light .kb-stats { background: rgba(0,0,0,.03); }
.kb-stats.warn { background: rgba(245,158,11,.18) !important; color: #f59e0b !important; }
body.theme-light .kb-stats.warn { color: #b45309 !important; }
.kb-stats.danger { background: rgba(239,68,68,.20) !important; color: #ef4444 !important; }
body.theme-light .kb-stats.danger { color: #b91c1c !important; }
.kb-modal-card.preview-card { width: min(960px, 94vw); }
#preview-content { min-height: 60vh; }
.preview-frame { width: 100%; height: 70vh; border: 0; border-radius: 8px; background: #fff; }
.preview-img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 8px; }
.empty-note { text-align: center; padding: 24px 0; font-size: 13px; opacity: .6; }
.member-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; }
body.theme-dark .member-row { background: rgba(255,255,255,.05); }
body.theme-light .member-row { background: rgba(0,0,0,.03); }
/* 成员列表三列布局：用户名 / 备注 / 权限 */
.member-col-head { display: flex; align-items: center; gap: 12px; padding: 2px 12px 6px; font-size: 11px; opacity: .6; }
.member-col-head > span { flex: 1; } .member-col-head > span:last-child { flex: 0 0 92px; }
.member-row > .m-user { display: flex; flex-direction: column; flex: 0 0 128px; overflow: hidden; text-overflow: ellipsis; }
.member-row > .m-note { flex: 1; min-width: 0; }
.member-row > .m-role { flex: 0 0 92px; display: flex; justify-content: flex-end; }
.m-user .m-date { font-size: 11px; opacity: .5; }
.note-input {
  width: 100%; padding: 6px 9px; border-radius: 8px; font-size: 12px;
  border: 1px solid rgba(128,128,128,.3); outline: none; transition: border-color .2s;
}
.note-input:focus { border-color: rgba(var(--acc-rgb), .6); }
body.theme-dark .note-input { background: rgba(255,255,255,.06); color: #e5e7eb; }
body.theme-light .note-input { background: rgba(0,0,0,.04); color: #111; }
/* 权限下拉：双主题下文字与展开项均需清晰可见 */
.member-row select { padding: 6px 8px; border-radius: 8px; font-size: 12px; background: transparent; color: inherit; border: 1px solid rgba(128,128,128,.35); }
.member-row select option { background: #ffffff; color: #111827; }
body.theme-dark .member-row select option { background: #1b2230; color: #e5e7eb; }
.invite-box {
  margin-top: 14px; padding: 12px; border-radius: 12px; font-size: 13px;
  background: rgba(16,185,129,.10); border: 1px dashed rgba(16,185,129,.4);
}
.invite-box code { font-size: 15px; font-weight: 800; letter-spacing: 2px; }
.section-title { font-size: 13px; font-weight: 700; opacity: .85; margin: 16px 0 8px; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.user-chip-btn { cursor: pointer; border: 0; background: none; color: inherit; padding: 6px 8px; border-radius: 10px; transition: background .15s; }
.user-chip-btn:hover { background: rgba(var(--acc-rgb), .14); }
.user-chip .chev { font-size: 10px; opacity: .6; margin-left: 2px; }
.user-menu {
  position: fixed; top: 58px; right: 20px; z-index: 500;
  min-width: 190px; padding: 6px; border-radius: 12px; font-size: 13px;
  display: flex; flex-direction: column; gap: 2px;
}
body.theme-dark .user-menu { background: #1b2230; border: 1px solid rgba(255,255,255,.10); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
body.theme-light .user-menu { background: #fff; border: 1px solid rgba(0,0,0,.12); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.user-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 10px; border-radius: 8px; background: none; border: 0;
  color: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.user-menu-item:hover { background: rgba(var(--acc-rgb), .14); }
.user-menu-item.danger { color: #f87171; }
body.theme-light .user-menu-item.danger { color: #b91c1c; }
.user-menu-item .menu-state { margin-left: auto; font-size: 11px; opacity: .6; }
.switch {
  margin-left: auto; width: 36px; height: 20px; border-radius: 10px; flex-shrink: 0;
  background: rgba(128,128,128,.35); position: relative; transition: background .2s;
}
.switch .switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; transition: left .2s;
}
.user-menu-item.on .switch { background: var(--acc); }
body.theme-dark .user-menu-item.on .switch { background: var(--acc-d); }
.user-menu-item.on .switch .switch-knob { left: 18px; }