:root {
      --blue: #005EB8;
      --light-blue: #0072CE;
      --orange: #FF6B00;
      --gray: #f5f7fa;
      --text: #333;
      --bg: #ffffff;
      --muted: #666;
      --card: #ffffff;
      --shadow: rgba(0,0,0,0.08);
      --border: rgba(0,0,0,0.08);
    }
    body.dark {
      --blue: #0072CE;
      --light-blue: #0099ff;
      --orange: #ff8c33;
      --gray: #121212;
      --text: #e6e6e6;
      --bg: #000000;
      --muted: #b8b8b8;
      --card: #0b0b0b;
      --shadow: rgba(255,255,255,0.08);
      --border: rgba(255,255,255,0.12);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: "PingFang SC", "Microsoft YaHei", Georgia, serif;
      line-height: 1.85;
      color: var(--text);
      background: var(--bg);
      transition: background 0.35s, color 0.35s;
    }
    a {
      color: var(--light-blue);
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    header {
      background: linear-gradient(135deg, var(--blue), var(--light-blue));
      color: white;
      padding: 68px 20px 54px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    header .brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }
    header img.logo {
      width: 110px;
      height: 110px;
      object-fit: contain;
      border-radius: 18px;
      box-shadow: 0 10px 26px rgba(0,0,0,0.18);
      background: rgba(255,255,255,0.08);
      padding: 10px;
    }
    header h1 {
      font-size: 2.6rem;
      margin-bottom: 10px;
      letter-spacing: 0.5px;
    }
    header p {
      font-size: 1.15rem;
      max-width: 960px;
      margin: 0 auto;
      opacity: 0.95;
    }
    header .meta {
      margin-top: 14px;
      font-size: 0.98rem;
      opacity: 0.9;
    }
    .theme-toggle {
      position: absolute;
      top: 18px;
      right: 22px;
      background: rgba(255,255,255,0.18);
      border: 1px solid rgba(255,255,255,0.25);
      color: white;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      cursor: pointer;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform 0.15s ease;
    }
    .theme-toggle:active {
      transform: scale(0.96);
    }
    nav {
      background: var(--blue);
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 12px 0;
      box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    }
    nav ul {
      max-width: 1100px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      list-style: none;
      padding: 0 14px;
    }
    nav a {
      color: white;
      text-decoration: none;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.95rem;
      display: inline-block;
      transition: background 0.25s ease;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.04);
    }
    nav a:hover {
      background: var(--orange);
      border-color: rgba(255,255,255,0.28);
      text-decoration: none;
    }
    main {
      max-width: 980px;
      margin: 34px auto;
      padding: 0 18px;
    }
    section {
      margin-bottom: 78px;
      opacity: 0;
      transform: translateY(18px);
      transition: all 0.65s ease;
    }
    section.visible {
      opacity: 1;
      transform: translateY(0);
    }
    h2 {
      font-size: 2.05rem;
      color: var(--blue);
      margin: 58px 0 20px;
      border-bottom: 3px solid var(--orange);
      padding-bottom: 10px;
    }
    h3 {
      font-size: 1.55rem;
      color: var(--light-blue);
      margin: 34px 0 14px;
    }
    h4 {
      font-size: 1.22rem;
      color: var(--blue);
      margin: 26px 0 10px;
    }
    h5 {
      font-size: 1.06rem;
      color: var(--blue);
      margin: 22px 0 8px;
      opacity: 0.95;
    }
    p {
      margin-bottom: 1.15em;
      text-align: justify;
    }
    ul {
      margin: 12px 0 18px 22px;
      padding-left: 18px;
    }
    li {
      margin: 8px 0;
    }
    blockquote {
      background: var(--gray);
      border-left: 6px solid var(--orange);
      padding: 18px 22px;
      margin: 22px 0;
      border-radius: 10px;
      color: var(--text);
      box-shadow: 0 10px 22px var(--shadow);
    }
    code {
      background: rgba(0,0,0,0.06);
      padding: 2px 6px;
      border-radius: 6px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.95em;
    }
    body.dark code {
      background: rgba(255,255,255,0.10);
    }
    .toc {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 14px 16px;
      box-shadow: 0 10px 22px var(--shadow);
    }
    .toc details {
      border-bottom: 1px dashed var(--border);
      padding: 10px 6px;
    }
    .toc details:last-child {
      border-bottom: none;
    }
    .toc summary {
      cursor: pointer;
      font-weight: 700;
      color: var(--blue);
      list-style: none;
    }
    .toc summary::-webkit-details-marker {
      display: none;
    }
    .toc summary a {
      color: var(--blue);
    }
    .toc summary a:hover {
      color: var(--orange);
      text-decoration: none;
    }
    .toc ul {
      margin-top: 10px;
      margin-left: 18px;
    }
    .toc li a {
      color: var(--light-blue);
    }
    .toc li a:hover {
      color: var(--orange);
      text-decoration: none;
    }
    footer {
      text-align: center;
      padding: 52px 20px;
      background: var(--blue);
      color: white;
      margin-top: 90px;
    }
    footer .small {
      font-size: 0.92rem;
      opacity: 0.9;
      margin-top: 10px;
    }
    .back-to-top {
      position: fixed;
      bottom: 34px;
      right: 24px;
      background: var(--orange);
      color: white;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(0,0,0,0.22);
      opacity: 0;
      transition: opacity 0.25s ease, transform 0.2s ease;
      z-index: 120;
    }
    .back-to-top:hover {
      transform: translateY(-2px);
    }
    @media (max-width: 860px) {
      header h1 { font-size: 2.05rem; }
      header p { font-size: 1.02rem; }
      header img.logo { width: 96px; height: 96px; }
      nav ul { gap: 8px; }
      nav a { font-size: 0.92rem; padding: 7px 12px; }
    }
    @media (max-width: 520px) {
      header { padding: 56px 18px 44px; }
      header h1 { font-size: 1.72rem; }
      h2 { font-size: 1.65rem; }
      h3 { font-size: 1.28rem; }
    }


/* ===== 内容保护（前端阻拦版）=====
   说明：浏览器最终控制权在用户手里，前端只能“提高门槛”，不能做到100%不可复制/不可下载/不可截图。
   若追求更强保护，请结合：登录鉴权、动态水印、访问控制、以及服务端安全响应头（X-Frame-Options/CSP frame-ancestors 等）。
*/
body.protect, body.protect *{
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.protect img, body.protect svg{
  -webkit-user-drag: none;
  user-drag: none;
}
.copy-allowed, .copy-allowed * , [data-allow-copy="true"], [data-allow-copy="true"] *{
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}
#wx-watermark-layer{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  opacity: 0.12;
}
#wx-watermark-layer canvas{
  width: 100%;
  height: 100%;
  display: block;
}
@media print{
  body{ display: none !important; }
}