/* ===== 主题变量 ===== */
:root {
    --bg-gradient: linear-gradient(180deg, #eef1fb 0%, #f6f4fb 30%, #f6f7f9 72%);
    --logo-url: url("/static/img/logo.png");
    --bg: #f5f7fa;
    --text: #333;
    --text-tbtn: #333;
    --text-tbtn-hover: #fff;
    --panel-bg: #ffffff;
    --panel-head-bg: #f8f9fa;
    --border: #e3e3e3;
    --shadow: rgba(103,58,183,0.12);
    --link: #0366d6;
    --muted: #999;
    --header-bg: #FFF;
    --header-text: #fff;
    --header-link: #cfd8dc;
    --header-hover-bg: rgba(255,255,255,.15);
    --select-bg: #fff;
    --select-color: #333;
    --select-border: #ccc;
    --footer-bg: #333;
    --footer-text: #ccc;
	--tbtn-bg:rgba(33,150,243,.7);
	--tbtn-bg-hover:rgba(33,150,243,.9);
    /* 代码编辑器（亮色） */
    --code-bg: #f6f7f8;
    --editor-bg: #FFFAE8;
    --editor-bg: #f3f9fe;
    --editor-bg: #fbfaf1;
    --editor-text: #24292f;
    --editor-border: #d0d7de;
    --hl-comment: #6a737d;
    --hl-tagname: #22863a;
    --hl-punct: #24292f;
    --hl-attr: #6f42c1;
    --hl-string: #032f62;
    --hl-tpl: #bc4c00;
    --hl-keyword: #cf222e;
    --hl-func: #8250df;
    --hl-type: #0550ae;
    --hl-number: #0550ae;
    --hl-op: #953800;
    --scrollbar-track: #eff1f3;
    --scrollbar-thumb: #c1c5c9;
}
html[data-theme="dark"] {
  --bg-gradient: linear-gradient(180deg, #1a1e2b 0%, #1e1c28 30%, #202227 72%);
  --logo-url: url("/static/img/logo-dark.png");
    --bg: #16181d;
    --text: #d4d4d4;
    --text-tbtn: #d4d4d4;
	--text-tbtn-hover: #fff;
    --panel-bg: #1e1e24;
    --panel-head-bg: #2a2a30;
    --border: #3c3c3c;
    --shadow: rgba(103,58,183,0.32);
    --link: #58a6ff;
    --muted: #8b949e;
    --header-bg: #0f1115;
    --header-text: #e8e8e8;
    --header-link: #a9b3bf;
    --header-hover-bg: rgba(255,255,255,.12);
    --select-bg: #2a2a30;
    --select-color: #d4d4d4;
    --select-border: #555;
    --footer-bg: #0f1115;
    --footer-text: #9aa;
	--tbtn-bg:rgba(25,62,62,.4);
	--tbtn-bg-hover:rgba(25,62,62,.8);
    /* 代码编辑器（暗色） */
    --code-bg: #272822;
    --editor-bg: #272822;
    --editor-text: #ccc;
    --editor-border: #3c3c3c;
    --hl-comment: #6A9955;
    --hl-tagname: #569CD6;
    --hl-punct: #D4D4D4;
    --hl-attr: #9CDCFE;
    --hl-string: #CE9178;
    --hl-tpl: #DCDCAA;
    --hl-keyword: #569CD6;
    --hl-func: #C586C0;
    --hl-type: #4EC9B0;
    --hl-number: #B5CEA8;
    --hl-op: #D4D4D4;
    --scrollbar-track: #202020;
    --scrollbar-thumb: #555;
}

body { 
  /*background: var(--bg);*/
  background-image: var(--bg-gradient) !important;
  /*background-image: linear-gradient(180deg, #1a1e2b 0%, #1e1c28 30%, #202227 72%) !important;*/


  color: var(--text); font-size: 14px; transition: background .2s, color .2s; }
a { color: var(--link); }
/**/
.p0{ padding:0!important; }
.m0{ margin:0!important; }
.h300{height: 300px!important;}
.pure-menu-children{background-color: var(--panel-bg);}
/* ===== 头部 ===== */
.header { background: var(--header-bg); margin-bottom: 20px; 
  box-shadow: 0px 5px 40px 0px rgba(17, 58, 93, .1);
  position: relative; z-index: 9; height: 50px;
  /*box-shadow:0px 0px 5px rgba(0, 0, 0, 0.2); */
}
    .site-logo{
        width: 140px; height: 30px;box-sizing: border-box;
       background: var(--logo-url) no-repeat center / contain; 
    }
.header-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; height:50px; }
.header .pure-menu { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.header .pure-menu { background: transparent; }
.header .pure-menu-heading { color: var(--header-text); font-size: 16px; text-transform: none; }
.header .pure-menu-link { color: var(--text); padding: 0.75em 0.8em; }
.header .pure-menu-link:hover,
.header .pure-menu-item.pure-menu-selected .pure-menu-link { background: var(--header-hover-bg); color: var(--link); }
.header .pure-menu-horizontal { white-space: normal; }
.btn-theme {
    color: var(--text);
    cursor: pointer;
    font-size: 18px;
}
.btn-theme:hover { /*background: rgba(255,255,255,.25); */}

/* ===== 通用容器 ===== */
.container { max-width: 1140px; margin: 0 auto;
/* padding: 0 16px;*/ }

/*.header-inner>div>ul,.header-inner>div>button{ float:right }*/
/* ===== 板块卡片 ===== */
.panel {
    background: var(--panel-bg); border: 1px solid var(--border); border-radius: 6px;
    /*box-shadow: 0 1px 3px rgba(0,0,0,.08); */
    margin-bottom: 24px; overflow: hidden;
    transition: background .2s, border-color .2s;
}
.panel-head {
    background: var(--panel-head-bg); border-bottom: 1px solid var(--border);
    padding: 10px 16px; font-weight: 600; font-size: 15px;
}
.panel-head>h1{ font-size:14px; margin:0 }
.panel-body { padding: 16px; }
.panel-body>.tool-description{ background: var(--panel-head-bg); margin: 5px 0 20px 0;  padding: 20px; line-height: 1.8}
.panel-body>.tool-content{ margin:10px }
/* ===== 文章 / 链接 ===== */
.article-item { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.article-item:last-child { border-bottom: none; }
.article-item>a{ text-decoration:none }
.article-item>a:hover{ color: var(--muted);}
.article-item .date { color: var(--muted); font-size: 12px; }
.link-item { display: inline-block; margin: 4px 14px 4px 0; }

/* ===== 底部 ===== */
.footer {
    background: var(--footer-bg); color: var(--footer-text); text-align: center;
    padding: 10px 0; font-size: 12px; transition: background .2s, color .2s;
}
.footer a{ text-decoration:none; color:#58a6ff; }
/* 页脚工具分类导航：全站共享（首页不渲染），样式须在 .footer a 之后以覆盖其颜色 */
.footer-cats {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: 5px 15px; max-width: 1100px; margin: 0 auto 9px; padding: 0 12px;
    line-height: 1.5;
}
.footer-cats a { color: inherit; opacity: .78; }
.footer-cats a:hover { color: #58a6ff; opacity: 1; }
/* 版权行：链接整体不可拆（窄屏下「问题反馈」曾被拆成「问题反 / 馈」），并放宽行距便于换行阅读。
   分隔符用 ::before 生成而非写死在 HTML 里，这样它会跟着链接一起换行，不会孤零零留在行尾 */
.footer-copy { line-height: 1.8; }
.footer-copy a { white-space: nowrap; }
.footer-copy a::before { content: '· '; color: var(--footer-text); opacity: .7; }
.article-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-bottom: 20px; 
}
/* 占75% */
.article-grid > .article-left {
  flex: 1 1 calc(75% - 18px);
  padding: 0 25px 25px 25px; box-sizing: border-box;min-width: 0;
  background: var(--panel-bg); border-radius: 6px;
}
.article-left>header{ margin: 25px 0;}
.article-left .view{ margin-bottom:10px }
/* 占25% */
.article-grid > .article-right {
  flex: 1 1 calc(25% - 6px);
}

/* ---------- Markdown content ---------- */
.md-content { font-size: 14px; line-height: 1.85; color: var(--text); word-wrap: break-word;}
.md-content > *:first-child { margin-top: 0;}
.md-content h1, .md-content h2, .md-content h3, .md-content h4, .md-content h5, .md-content h6 { margin-top: 1.5em; margin-bottom: .7em; font-weight: 700; color: var(--text); scroll-margin-top: 88px;}
.md-content h1 { font-size: 1.65em;}
.md-content h2 { font-size: 1.4em; padding-bottom: .4em; border-bottom: 1px solid var(--border);}
.md-content h3 { font-size: 1.2em;}
.md-content h4 { font-size: 1.05em;}
.md-content p { margin: 0 0 1.2em;}
.md-content ul, .md-content ol { padding-left: 1.6rem; margin: 0 0 1.2em;}
.md-content ul { list-style: disc;}
.md-content ol { list-style: decimal;}
.md-content li { margin: .45rem 0;}
.md-content blockquote { border-left: 3px solid var(--link); padding: .8rem 1.2rem; margin: 1.4em 0; background: var(--panel-head-bg); color: var(--muted); border-radius: 0 6px 6px 0;}
.md-content blockquote p:last-child { margin-bottom: 0;}/* 行内代码 */
.md-content code { background: var(--panel-head-bg); padding: .15rem .45rem; border-radius: 6px; font-family: Consolas, Menlo, monospace; font-size: .88em; color: var(--link);}/* 代码块 pre */
.md-content pre { background: var(--code-bg); color: var(--editor-text); padding: 1.1rem 1.2rem; 
    border-radius: 6px; overflow-x: auto; margin: 1.4em 0; line-height: 1.65; font-size: 14px; 
    max-width: 100%;overflow: auto;
    border: 1px solid var(--editor-border); contain: layout;}
.md-content pre code { background: transparent; padding: 0; color: inherit; font-size: inherit;}
/* Markdown表格，对应PHP输出 class="md-table" */
.md-content table.md-table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; border-radius: 6px; overflow: hidden;}
.md-content table.md-table th, .md-content table.md-table td { border: 1px solid var(--border); padding: .6rem .8rem;}
.md-content table.md-table th { background: var(--panel-head-bg); font-weight: 700;}
.md-content img { max-width: 100%; height: auto; border-radius: 6px; margin: 1.4em auto; box-shadow: 0 1px 4px var(--shadow);}
.md-content a { color: var(--link); text-decoration: underline; text-underline-offset: 3px;}
.md-content a:hover { text-decoration: none;}
.md-content hr { border: none; border-top: 1px solid var(--border); margin: 2.2em 0;}
html[data-theme="dark"] .md-content pre { scrollbar-color: #505862 #30363f;}
html[data-theme="dark"] .md-content pre::-webkit-scrollbar-track { background: #30363f;}
html[data-theme="dark"] .md-content pre::-webkit-scrollbar-thumb { background: #505862;}
html[data-theme="dark"] .md-content pre::-webkit-scrollbar-thumb:hover { background: #636b77;}
ul.task-list { list-style: none; padding-left: 1em;}
li.task-list-item { display: flex; gap: 0.4em; align-items: flex-start;}
li.task-list-item input { margin-top: 0.25em;}

/* toast样式 */
.toast-wrap { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px;}
.toast-item { padding: 10px 16px; border-radius: 6px; color: #FFF; box-shadow: 0 2px 12px rgba(0,0,0,0.12); min-width: 200px; animation: toastIn 0.25s ease; display: flex; align-items: center; gap: 6px;}
.toast-item .toast-icon { font-size: 16px; line-height: 1; flex-shrink: 0;}
.toast-success { background: #58c95d;}
.toast-error { background: #e06666;}
.toast-warn { background: #c9a84a;}
.toast-info { background: #46a3a3;}
@keyframes toastIn {
    from { transform: translateY(-12px); opacity: 0;}
    to { transform: translateY(0); opacity: 1;}}


@keyframes softBreathe {
  0% { background-color: var(--panel-bg); }
  50% { background-color: var(--bg); }
  100% { background-color: var(--panel-bg); }
}
/*.soft-breathe-bg {
  animation: softBreathe 5s ease-in-out infinite;
}*/
#btnFull{ padding:2px 6px!important;animation: softBreathe 5s ease-in-out infinite; }

::-webkit-scrollbar {
  width:8px;
  height:8px;
}
::-webkit-scrollbar-track {
  background:var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background:var(--scrollbar-thumb);
  border-radius:4px;
}
::-webkit-scrollbar-thumb:hover {
  background:#888;
}

/* 侧边栏 */
.toc { position: sticky; top: 10px; max-height: calc(100vh - 104px); overflow-y: auto; padding-bottom: 1rem;max-width: 279px;box-sizing: border-box;}
.sidebar-toc { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.sidebar-toc__link { display: block; padding: 7px 10px; border-radius: var(--radius-sm); font-size: 13.5px; line-height: 1.45; transition: all .15s ease; text-decoration: none; color: var(--text);}
.sidebar-toc__link:hover { color: var(--c-primary); background: var(--c-bg-alt);}
.sidebar-toc__link.is-active { background: var(--c-primary-soft); color: var(--link); font-weight: 600;}
.sidebar-toc__link {}
.sidebar-toc__link.is-active {}
.sidebar-toc__link span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    display: block;
}
.related-articles { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border, #e5e7eb);}
.related-articles__title { font-size: 1.15rem; margin-bottom: 1rem;}
.related-articles__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem;}
.related-articles__list li { padding: .7rem 0; border-bottom: 1px dashed var(--c-border, #e5e7eb);}
.related-articles__list li:last-child { border-bottom: none;}
.related-articles__link { color: var(--link); text-decoration: none; font-size: .95rem;}
.related-articles__link:hover { color: var(--c-primary);}
.related-articles__excerpt { margin: .3rem 0 0; font-size: .82rem; color: var(--pico-muted-color); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.side-panel__title { background: var(--panel-bg,#fff); font-size: 1rem; font-weight: 600; margin: 0 0 .6rem; padding: .5rem 0; border-bottom: 1px solid var(--border,#e5e7eb);}/* ===== 右侧栏美化 ===== *//*.article-right { background:#f3f3f3 }*/
.article-right h2 { font-size: 1rem; font-weight: 600; margin: 0; padding: .6rem 0; border-bottom: 1px solid var(--border,#e5e7eb); display: flex; align-items: center; gap: .45rem;}
.article-right h2::before { content: ""; width: 4px; height: 1.05em; border-radius: 2px; background: var(--c-primary,#4f6ef2); flex-shrink: 0;}
.side-panel > ul { list-style: none; margin: 0; padding: .15rem 0 0;}
.side-panel > ul li { padding: .55rem 0; border-bottom: 1px dashed var(--border,#e5e7eb); line-height: 1.55;}
.side-panel > ul li:last-child { border-bottom: none;}
.side-panel > ul a { color: var(--text,#333); text-decoration: none; font-size: .92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s ease;}
.article-right > ul a:hover { color: var(--link,#0366d6);}
.side-panel { background: var(--panel-bg,#fff); border: 1px solid var(--border,#e5e7eb); border-radius: 6px; padding: .4rem 1rem 1rem; 
 /* box-shadow: 0 2px 10px rgba(0,0,0,.04);*/ margin-bottom: 20px;}
.side-panel.side-tools > ul li { padding: .55rem 0; line-height: 1.55;}
.side-panel.side-tools > ul a { display: flex; align-items: center; gap: .45rem; font-size: .9rem;}
.side-panel.side-tools > ul a i { font-size: 1rem; color: var(--link,#0366d6); width: 1.2em; flex-shrink: 0; line-height: 1; text-align: center; display: inline-block;}
  /* ===== 分页按钮化 ===== */
  .pagination { margin-top: 1rem; text-align: center; margin-bottom:2rem}
  .pagination ul {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pagination li { display: inline-block; margin:0 2px; }
  .pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--border, #e3e3e3);
    border-radius: 8px;
    font-size: .9rem;
    color: var(--text, #333);
    text-decoration: none;
    background: var(--panel-bg, #fff);
    transition: all .18s ease;
  }
  .pagination a:hover {
    color: var(--link, #0366d6);
    border-color: var(--link, #0366d6);
    background: var(--panel-head-bg, #f6f8fa);
  }
  .pagination .active span, .pagination .current {
    color: #fff;
    background: linear-gradient(135deg, var(--link, #0366d6), #024ea6);
    border-color: transparent;
    box-shadow: 0 2px 10px rgba(3, 102, 214, .35);
  }
  .pagination .disabled span, .pagination .disabled a {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
  }
/* ===== 面包屑导航（分类页/详情页共用） ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .7rem 1.2rem;
  margin: 1.2rem 0;
  background: var(--panel-bg,#fff);
  border: 1px solid var(--border,#e3e3e3);
  border-radius: 8px;
  font-size: .9rem;
  min-width: 0;
}
.breadcrumb a { color: var(--pico-muted-color,#888); text-decoration: none; transition: color .15s ease; white-space: nowrap; }
.breadcrumb a:hover { color: var(--link,#0366d6); }
.breadcrumb__sep { color: var(--border,#bbb); flex-shrink: 0; }
.breadcrumb__current { color: var(--link,#0366d6); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 悬浮按钮容器，右下角固定 */
.float-toolbar { position: fixed; right: 30px; bottom: 40px; display: flex; flex-direction: column; gap: 12px; z-index: 999;}
.float-btn { width: 40px; height: 40px; line-height: 40px; border-radius: 20px; 
      background-color: rgb(21 96 218 / 5%);   border: none; font-size: 20px; cursor: pointer; 
        transition: all 0.25s ease; text-align: center; text-decoration: none; display: block;}
.float-btn:hover { background-color: rgb(21 96 218 / 75%); transform: translateY(-2px); box-shadow: 0 2 10px #2552dd;}/* 回到顶部按钮滚动显隐 */
.float-btn i{ color:var(--muted); }
.float-btn:hover i{ color:#fff; }
#backTopBtn { opacity: 0; visibility: hidden;}
#backTopBtn.show { opacity: 1; visibility: visible;}/* hover触发二维码弹窗，默认隐藏 */
.qrcode-wrap { position: relative;}
.qrcode-popup { position: absolute; right: 60px; bottom: 0px; width: 180px; height: 180px; background: #ffffff; border-radius: 8px; box-shadow: 0 3px 14px rgba(0,0,0,0.25); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.25s ease;}/* 鼠标悬浮二维码按钮，显示弹窗 */
.qrcode-wrap:hover .qrcode-popup { opacity: 1; visibility: visible;}
@media (max-width: 767.98px) {
    .float-toolbar { right: 10px;}
    .qrcode-wrap { display: none;}
    .pure-u-1.pr20 { padding-right: 0;}
    .container{ padding:0 15px; }
}