/* =========================================================
   知识库样式 · 与薛老师编程官网视觉体系保持一致
   关键词：明亮鲜艳 / 橙粉紫渐变 / 大圆角 / 柔和阴影 / 响应式
   ========================================================= */
:root {
  /* 主色：官网同款 */
  --kn-orange: #ff6b35;
  --kn-orange-deep: #e85a2a;
  --kn-orange-soft: #fff4ed;
  --kn-pink: #ff006e;
  --kn-purple: #8338ec;
  --kn-blue: #00b4d8;
  --kn-blue-deep: #0077b6;
  --kn-yellow: #ffb800;
  --kn-green: #06d6a0;
  --kn-green-deep: #059e78;

  /* 背景与文字 */
  --kn-bg: #fffbf5;
  --kn-bg-2: #fff8ee;
  --kn-card: #ffffff;
  --kn-text: #1a1a2e;
  --kn-text-2: #4a4a5e;
  --kn-muted: #8a8a9e;
  --kn-line: rgba(26, 26, 46, .08);
  --kn-line-2: rgba(26, 26, 46, .14);

  /* 渐变 */
  --kn-grad-main: linear-gradient(135deg, #ff6b35 0%, #ff006e 100%);
  --kn-grad-warm: linear-gradient(135deg, #ffb800 0%, #ff6b35 50%, #ff006e 100%);
  --kn-grad-cool: linear-gradient(135deg, #00b4d8 0%, #0077b6 100%);
  --kn-shadow: 0 12px 32px -12px rgba(255, 107, 53, .28);
  --kn-shadow-lg: 0 30px 70px -24px rgba(255, 107, 53, .35);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body {
  background: var(--kn-bg);
  color: var(--kn-text);
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: var(--kn-orange); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--kn-bg-2); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--kn-orange), var(--kn-pink)); border-radius: 5px; }

/* ---------- 顶部导航 ---------- */
.kn-header {
  position: sticky; top: 0; z-index: 99;
  background: rgba(255, 251, 245, .94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--kn-line);
  box-shadow: 0 4px 30px rgba(255, 107, 53, .05);
}
/* 顶部六色渐变条，呼应官网页脚 */
.kn-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #ff6b35, #ffb800, #06d6a0, #00b4d8, #8338ec, #ff006e);
}
.kn-header-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 24px; height: 68px;
  display: flex; align-items: center; gap: 12px;
}
/* 渐变 LOGO 方块 */
.kn-logo {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 13px;
  background: var(--kn-grad-warm);
  display: flex; align-items: center; justify-content: center;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 22px; font-weight: 900; color: #fff;
  box-shadow: 0 8px 20px rgba(255, 107, 53, .35), inset 0 -3px 8px rgba(0, 0, 0, .12), inset 0 2px 4px rgba(255, 255, 255, .3);
  position: relative; transition: transform .3s;
}
.kn-logo::after {
  content: '</>';
  position: absolute; bottom: -3px; right: -6px;
  font-family: Consolas, monospace; font-size: 8px; font-weight: 800;
  color: #fff; background: var(--kn-grad-cool);
  padding: 1px 5px; border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0, 180, 216, .5);
}
.kn-title {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 19px; font-weight: 900; letter-spacing: 1px;
  background: var(--kn-grad-main);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kn-sub { color: var(--kn-muted); font-size: 11px; letter-spacing: 3px; font-weight: 600; margin-top: 6px; }
.kn-back {
  margin-left: auto; font-size: 13px; font-weight: 700;
  color: var(--kn-orange-deep);
  background: var(--kn-orange-soft);
  border: 1.5px solid rgba(255, 107, 53, .25);
  padding: 7px 16px; border-radius: 20px;
  transition: all .3s;
}
.kn-back:hover { background: var(--kn-grad-main); color: #fff; border-color: transparent; transform: translateY(-2px); box-shadow: var(--kn-shadow); }

/* ---------- 顶部用户区 ---------- */
.kn-user { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 13px; }
.kn-user-name {
  color: var(--kn-text-2); background: #fff;
  border: 1.5px solid var(--kn-line-2);
  padding: 5px 14px; border-radius: 20px;
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.kn-user-link { color: var(--kn-orange-deep); font-weight: 700; }
.kn-user-link:hover { color: var(--kn-pink); text-decoration: underline; }

/* ---------- 左右分栏 ---------- */
.kn-layout {
  max-width: 1320px; margin: 20px auto; padding: 0 24px;
  display: flex; gap: 20px; align-items: flex-start;
}

/* 左侧树面板 */
.kn-side {
  width: 308px; flex: none;
  background: var(--kn-card);
  border: 2px solid var(--kn-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 14px 40px -22px rgba(26, 26, 46, .22);
}
.kn-side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 14px;
  background: linear-gradient(135deg, #fff8ee, #fffbf5);
  border-bottom: 1px solid var(--kn-line);
}
.kn-side-title {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 900; font-size: 16px;
}
.kn-side-title::before {
  content: ''; display: inline-block;
  width: 4px; height: 15px; border-radius: 2px;
  background: var(--kn-grad-main);
  margin-right: 8px; vertical-align: -2px;
}
.kn-search { padding: 12px 14px; border-bottom: 1px solid var(--kn-line); background: #fff; }
.kn-search input {
  width: 100%; height: 38px;
  border: 1.5px solid var(--kn-line-2);
  border-radius: 12px;
  padding: 0 14px; font-size: 13px; font-family: inherit;
  background: var(--kn-bg); color: var(--kn-text);
  outline: none; transition: all .3s;
}
.kn-search input:focus {
  border-color: var(--kn-orange);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 107, 53, .1);
}
.kn-tree-box {
  padding: 10px 8px; min-height: 340px;
  max-height: calc(100vh - 280px); overflow: auto;
  background: #fff;
}
.kn-legend {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--kn-line);
  background: linear-gradient(180deg, #fffbf5, #fff8ee);
  font-size: 11px; color: var(--kn-muted);
}

/* zTree 节点 */
.ztree li a {
  color: var(--kn-text);
  border-radius: 10px;
  padding: 2px 6px;
  height: 28px; line-height: 24px;
  font-size: 13.5px;
  transition: all .2s;
}
.ztree li a:hover { background: var(--kn-orange-soft); color: var(--kn-orange-deep); }
.ztree li a.curSelectedNode {
  background: linear-gradient(135deg, #fff1e8, #ffe6f0) !important;
  color: var(--kn-orange-deep) !important;
  border: none !important;
  font-weight: 700;
}
.ztree li a.curSelectedNode .node_name { color: inherit; }
.ztree li span.button { background-size: 100% 100%; }

/* 权限标签：树节点与图例共用渐变胶囊 */
.kn-node-tag, .kn-tag {
  display: inline-block;
  font-style: normal;
  font-size: 10px; font-weight: 800; letter-spacing: .5px;
  padding: 1px 8px; border-radius: 10px;
  margin-left: 6px; vertical-align: 1px;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}
.kn-legend .kn-tag { margin-left: 0; }
.kn-tag-public { background: linear-gradient(135deg, #06d6a0, #059e78); }
.kn-tag-private { background: linear-gradient(135deg, #ffb800, #ff6b35); }
.kn-tag-pwd { background: linear-gradient(135deg, #8338ec, #ff006e); }

/* ---------- 右侧主区 ---------- */
.kn-main {
  flex: 1; min-width: 0;
  background: var(--kn-card);
  border: 2px solid var(--kn-line);
  border-radius: 24px;
  padding: 26px 30px 44px;
  min-height: 600px;
  box-shadow: 0 14px 40px -22px rgba(26, 26, 46, .22);
  position: relative;
  overflow: hidden;
}
.kn-main::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ff6b35, #ffb800, #ff006e, #8338ec, #00b4d8);
}
.kn-pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kn-pane-title {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 24px; font-weight: 900; letter-spacing: .5px;
  word-break: break-all; line-height: 1.35;
}
.kn-pane-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kn-pane-actions .kn-btn { text-decoration: none; }
.kn-pane-meta {
  color: var(--kn-muted); font-size: 12.5px;
  border-bottom: 1.5px dashed var(--kn-line-2);
  padding-bottom: 14px; margin-top: 6px;
}

/* 空态 */
.kn-empty { text-align: center; padding: 110px 20px; color: var(--kn-muted); }
.kn-empty-icon {
  width: 84px; height: 84px; margin: 0 auto 18px;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff4ed, #ffe6f0);
  border: 2px dashed rgba(255, 107, 53, .3);
  display: flex; align-items: center; justify-content: center;
  font-size: 38px;
}
.kn-empty p { font-size: 15px; font-weight: 600; color: var(--kn-text-2); }
.kn-empty-tip { font-size: 12.5px !important; color: var(--kn-muted) !important; font-weight: 400 !important; margin-top: 6px; }

/* ---------- 富文本内容 ---------- */
.kn-doc-content { line-height: 1.9; font-size: 15px; color: var(--kn-text-2); word-break: break-word; }
.kn-doc-content h1, .kn-doc-content h2, .kn-doc-content h3 {
  font-family: "Noto Serif SC", "Songti SC", serif;
  color: var(--kn-text); margin: 24px 0 12px; line-height: 1.35;
}
.kn-doc-content h1 { font-size: 26px; }
.kn-doc-content h2 { font-size: 22px; }
.kn-doc-content h3 { font-size: 18px; }
.kn-doc-content p { margin: 10px 0; }
.kn-doc-content a { color: var(--kn-orange-deep); font-weight: 600; border-bottom: 1px dashed rgba(255, 107, 53, .4); }
.kn-doc-content img { border-radius: 14px; margin: 12px 0; box-shadow: 0 10px 30px -16px rgba(0, 0, 0, .2); }
.kn-doc-content ul, .kn-doc-content ol { padding-left: 24px; margin: 10px 0; }
.kn-doc-content li { margin: 4px 0; }
.kn-doc-content blockquote {
  margin: 16px 0; padding: 12px 18px;
  border-left: 4px solid var(--kn-orange);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(135deg, #fff8ee, #fffbf5);
  color: var(--kn-text-2);
}
.kn-doc-content table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.kn-doc-content th {
  background: linear-gradient(135deg, #fff4ed, #fff8ee);
  color: var(--kn-orange-deep); font-weight: 800;
}
.kn-doc-content th, .kn-doc-content td { border: 1px solid var(--kn-line-2); padding: 9px 12px; }
.kn-doc-content code {
  background: #fff4ed; color: var(--kn-orange-deep);
  border-radius: 6px; padding: 2px 7px;
  font-size: 13px; font-family: Consolas, "Courier New", monospace;
}
.kn-doc-content pre {
  background: #1e293b;
  border-radius: 14px;
  padding: 16px 18px;
  overflow: auto;
  margin: 16px 0;
  box-shadow: 0 16px 36px -20px rgba(15, 23, 42, .6);
}
.kn-doc-content pre code {
  background: transparent; color: #e2e8f0; padding: 0;
  font-size: 13.5px; line-height: 1.7;
}
/* 深色代码块内的行号 */
.hljs { background: transparent !important; }
.hljs-ln-numbers {
  text-align: right; color: #64748b !important;
  padding-right: 14px !important; user-select: none; min-width: 2em;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.hljs-ln-code { padding-left: 14px !important; }

/* ---------- 密码 / 无权卡片 ---------- */
.kn-pwd-pane { display: flex; justify-content: center; padding: 86px 0; }
.kn-pwd-card { text-align: center; width: 340px; max-width: 100%; }
.kn-pwd-icon {
  width: 76px; height: 76px; margin: 0 auto 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f3ecff, #ffe6f0);
  border: 2px solid rgba(131, 56, 236, .18);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  box-shadow: 0 12px 28px -14px rgba(131, 56, 236, .45);
}
.kn-pwd-card h3 {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 21px; font-weight: 900; margin: 4px 0 8px;
}
.kn-pwd-tip { color: var(--kn-muted); font-size: 13px; margin-bottom: 20px; line-height: 1.7; }
.kn-pwd-input {
  height: 44px; text-align: center; letter-spacing: 3px;
  border: 1.5px solid var(--kn-line-2);
  border-radius: 12px; background: var(--kn-bg);
  font-family: inherit; font-size: 15px;
  transition: all .3s;
}
.kn-pwd-input:focus { outline: none; border-color: var(--kn-orange); background: #fff; box-shadow: 0 0 0 4px rgba(255, 107, 53, .1); }
.kn-pwd-btn {
  width: 100%; height: 44px; margin-top: 14px;
  border: none; border-radius: 12px;
  background: var(--kn-grad-main); color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: 2px;
  cursor: pointer; transition: all .3s;
  box-shadow: 0 12px 28px -10px rgba(255, 107, 53, .5);
  font-family: inherit;
}
.kn-pwd-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(255, 107, 53, .7); }

/* ---------- 按钮 ---------- */
.kn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 0 16px; height: 34px;
  border-radius: 12px; font-size: 13px; font-weight: 700;
  cursor: pointer; border: 1.5px solid var(--kn-line-2);
  background: #fff; color: var(--kn-text);
  transition: all .3s; font-family: inherit;
}
.kn-btn-sm { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.kn-btn-primary {
  background: var(--kn-grad-main); border-color: transparent; color: #fff;
  box-shadow: 0 8px 20px -8px rgba(255, 107, 53, .6);
}
.kn-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(255, 107, 53, .75); }
.kn-btn-default:hover { border-color: var(--kn-orange); color: var(--kn-orange-deep); background: var(--kn-orange-soft); transform: translateY(-2px); }
.kn-btn-danger { color: #e0453a; }

/* ---------- 右键菜单 ---------- */
.kn-ctx-menu {
  position: fixed; z-index: 9999; min-width: 168px;
  background: #fff; border: 1.5px solid var(--kn-line);
  border-radius: 16px; padding: 8px;
  box-shadow: 0 20px 48px -16px rgba(26, 26, 46, .28);
}
.kn-ctx-item {
  padding: 10px 14px; border-radius: 10px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: all .2s;
}
.kn-ctx-item:hover { background: var(--kn-orange-soft); color: var(--kn-orange-deep); transform: translateX(2px); }
.kn-ctx-danger:hover { background: #fff0f4; color: var(--kn-pink); }

/* 移动端目录按钮 */
.kn-side-toggle {
  display: none; position: fixed; left: 14px; bottom: 20px; z-index: 999;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--kn-grad-main); color: #fff; font-size: 22px;
  box-shadow: 0 14px 30px -8px rgba(255, 107, 53, .6);
  cursor: pointer;
}

/* ---------- 登录页 ---------- */
.kn-body-login {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 107, 53, .16), transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(0, 180, 216, .14), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(255, 184, 0, .14), transparent 55%),
    linear-gradient(180deg, #fffbf5 0%, #fff8ee 100%);
}
.kn-login-wrap { width: 100%; padding: 20px; display: flex; justify-content: center; }
.kn-login-card {
  width: 400px; max-width: 100%;
  background: #fff;
  border: 2px solid var(--kn-line);
  border-radius: 26px;
  padding: 40px 34px 30px;
  box-shadow: 0 40px 90px -34px rgba(255, 107, 53, .4);
  position: relative; overflow: hidden;
}
.kn-login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: linear-gradient(90deg, #ff6b35, #ffb800, #ff006e, #8338ec, #00b4d8);
}
.kn-login-brand { text-align: center; margin-bottom: 26px; }
.kn-login-brand .kn-logo { width: 62px; height: 62px; border-radius: 18px; font-size: 30px; margin: 0 auto 14px; }
.kn-login-brand .kn-logo::after { font-size: 9px; padding: 1px 6px; right: -8px; }
.kn-login-brand h1 {
  font-family: "Noto Serif SC", "Songti SC", serif;
  margin: 4px 0 2px; font-size: 26px; letter-spacing: 2px; font-weight: 900;
  background: var(--kn-grad-main);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.kn-login-brand p { margin: 0; color: var(--kn-muted); font-size: 12px; letter-spacing: 4px; font-weight: 600; }
.kn-login-card .layui-form-label { width: 56px; padding: 9px 0; font-size: 14px; font-weight: 700; color: var(--kn-text-2); }
.kn-login-card .layui-input-block { margin-left: 56px; }
.kn-login-card .layui-input {
  height: 44px; border-radius: 12px;
  border: 1.5px solid var(--kn-line-2);
  background: var(--kn-bg); font-size: 14px;
  transition: all .3s;
}
.kn-login-card .layui-input:focus { border-color: var(--kn-orange); background: #fff; box-shadow: 0 0 0 4px rgba(255, 107, 53, .1); }
.kn-login-btn {
  width: 100%; height: 46px; font-size: 16px; font-weight: 800;
  border-radius: 14px; margin-top: 10px; letter-spacing: 2px;
  border: none; color: #fff; cursor: pointer;
  background: var(--kn-grad-main);
  box-shadow: 0 14px 32px -12px rgba(255, 107, 53, .6);
  transition: all .3s; font-family: inherit;
}
.kn-login-btn:hover { transform: translateY(-3px); box-shadow: 0 20px 42px -12px rgba(255, 107, 53, .75); }
.kn-login-tip { margin: 14px 0 0; text-align: center; color: var(--kn-muted); font-size: 12px; }
.kn-login-tip a { color: var(--kn-orange-deep); font-weight: 700; }
.kn-login-tip a:hover { text-decoration: underline; }

/* ---------- 详情页 ---------- */
.kn-detail { max-width: 900px; margin: 24px auto 40px; padding: 0 24px; }
.kn-breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--kn-orange-deep);
  background: var(--kn-orange-soft);
  border: 1.5px solid rgba(255, 107, 53, .2);
  padding: 6px 16px; border-radius: 20px;
  margin-bottom: 18px;
}
.kn-detail .kn-doc-content,
.kn-detail .kn-pwd-pane {
  background: #fff;
  border: 2px solid var(--kn-line);
  border-radius: 24px;
  padding: 34px 38px;
  box-shadow: 0 20px 50px -30px rgba(26, 26, 46, .25);
  position: relative; overflow: hidden;
}
.kn-detail .kn-doc-content::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #ff6b35, #ffb800, #ff006e, #8338ec, #00b4d8);
}
.kn-detail .kn-pwd-pane { padding: 64px 24px; }

/* ---------- 移动端适配 ---------- */
@media (max-width: 1080px) {
  .kn-side { width: 272px; }
  .kn-main { padding: 22px 22px 38px; }
}
@media (max-width: 768px) {
  .kn-header-inner { padding: 0 16px; height: 62px; gap: 8px; }
  .kn-logo { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
  .kn-title { font-size: 17px; }
  .kn-sub { display: none; }
  .kn-layout { padding: 0 12px; margin-top: 12px; }
  .kn-side {
    position: fixed; top: 62px; left: 0; bottom: 0; z-index: 998;
    width: 84%; max-width: 330px;
    border-radius: 0 20px 20px 0;
    transform: translateX(-105%);
    transition: transform .28s ease;
    box-shadow: 6px 0 30px rgba(0, 0, 0, .1);
  }
  .kn-side.open { transform: translateX(0); }
  .kn-side-toggle { display: block; }
  .kn-main { padding: 20px 16px 34px; border-radius: 20px; min-height: 62vh; }
  .kn-pane-title { font-size: 20px; }
  .kn-doc-content { font-size: 14.5px; }
  .kn-doc-content pre { padding: 12px; border-radius: 12px; }
  .kn-tree-box { max-height: calc(100vh - 250px); }
  .kn-detail { padding: 0 14px; margin: 16px auto 28px; }
  .kn-detail .kn-doc-content, .kn-detail .kn-pwd-pane { padding: 22px 18px; border-radius: 20px; }
  .kn-login-card { padding: 30px 22px 24px; border-radius: 22px; }
  .kn-login-card .layui-form-label { width: 48px; font-size: 13px; }
  .kn-login-card .layui-input-block { margin-left: 48px; }
  .kn-empty { padding: 70px 16px; }
}
@media (max-width: 420px) {
  .kn-pane-title { font-size: 18px; }
  .kn-login-brand h1 { font-size: 22px; }
}