hexo-theme-ayeria 1.9.7-0

package/source/css/custom.styl

@@ -0,0 +1,971 @@
+// click_effect canvas (fireworks / clickBoom)
+.click-effect-canvas
+  position fixed
+  left 0
+  top 0
+  z-index 99999
+  pointer-events none
+
+$wrap-width = convert(hexo-config('layout.article_width'))
+$aside-width = convert(hexo-config('layout.sidebar_width'))
+$mouse-url = convert(hexo-config('mouse.path'))
+
+if hexo-config('mouse.enable')
+    body
+        cursor: url($mouse-url),auto;
+
+.sidebar
+    left - $aside-width
+    width $aside-width
+    &.on
+        left 0
+.content
+    &.on
+        margin-left 0 !important
+.navbar-toggle
+    left 1.5rem + $aside-width
+.search-form-wrap
+    right 0
+
+@media(min-width: 768px)
+    .outer, .wrap
+        width $wrap-width !important
+@media(max-width: 768px)
+    .tocbot
+        display none !important
+    .sidebar
+        left 0
+        &.on
+            left - $aside-width
+    .content
+        transform translateX($aside-width)
+        &.on
+            transform translateX(0)
+
+// 随机句子样式
+.random-sentence
+    text-align center
+    margin 0
+    padding 0
+    font-size 100%
+    color inherit
+    font-style normal
+    line-height inherit
+    
+    br
+        display block
+        margin 0.2rem 0
+
+// ================================================================
+// Typography — 字体系统
+//
+// 思源宋体 (Noto Serif SC) — 正文、标题、引用等阅读性内容
+// 思源黑体 (Noto Sans SC) — 导航、元信息、标签、页脚等功能性文本
+// 等宽字体 — 代码块、行内代码
+//
+// CDN 在 head.ejs 中通过 <link> 引入：
+//   Noto Serif SC  wght@400;700
+//   Noto Sans SC   wght@300;400
+// ================================================================
+
+$serif = "Noto Serif SC", "Source Han Serif SC", "STSong", Georgia, "Times New Roman", serif
+$sans  = "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif
+$mono  = "Consolas", "Monaco", "Courier New", monospace
+
+// --- 全局正文 ---
+body
+  font-family $serif
+
+// --- 封面标题 — 宋体 Bold ---
+.cover-inner
+  h1
+    font-family $serif
+    font-weight 700
+    letter-spacing 0.25em
+    text-indent 0.25em
+  #subtitle-box
+    font-family $serif
+    font-weight 400
+
+// --- 文章标题 — 宋体 Bold ---
+.article-header .article-title
+  font-family $serif
+  font-weight 700
+
+// --- 文章正文 — 宋体 Regular ---
+.article-entry
+  font-family $serif
+
+// --- 文章内标题 — 宋体 Bold ---
+.article-entry h1,
+.article-entry h2,
+.article-entry h3,
+.article-entry h4,
+.article-entry h5,
+.article-entry h6
+  font-family $serif
+  font-weight 700
+
+// --- 导航 — 黑体 Regular ---
+.navbar
+  font-family $sans
+
+// --- 日期、分类 — 黑体 Light ---
+.article-date,
+.article-category
+  font-family $sans
+  font-weight 300
+
+// --- 标签 — 黑体 Light ---
+.article-tag-list
+  font-family $sans
+  font-weight 300
+
+// --- 字数统计 — 黑体 Light ---
+.word_count
+  font-family $sans
+  font-weight 300
+
+// --- 归档页 — 黑体 ---
+.archive-article-date
+  font-family $sans
+  font-weight 300
+
+.archive-year
+  font-family $sans
+
+.archive-article-title
+  font-family $serif
+
+// --- 翻页导航 — 黑体 ---
+.page-nav
+  font-family $sans
+
+// --- 分类页 — 分类名用宋体 Bold，计数和子分类用黑体 ---
+.cat-block-name
+  font-family $serif
+  font-weight 700
+
+.cat-block-total,
+.cat-subitem
+  font-family $sans
+  font-weight 300
+
+// --- 页脚 — 黑体 ---
+.footer
+  font-family $sans
+
+// --- 前后篇导航 — 黑体 ---
+.article-nav
+  font-family $sans
+
+// --- 版权声明 — 黑体 Light ---
+.declare
+  font-family $sans
+  font-weight 300
+
+// --- 搜索 — 黑体 ---
+.local-search-input
+  font-family $sans
+
+// --- 随机句子 — 黑体 Regular ---
+.random-sentence
+  font-family $sans
+  font-weight 400
+
+// --- 置顶标签 — 黑体 ---
+.article-topping
+  font-family $sans
+
+// ================================================================
+// 自定义样式覆盖 — 通过 CSS 自定义属性实现亮/暗模式跟随
+//
+// 加载顺序：head.ejs 先加载 dist/main.css，再加载 css/custom.css，
+// 因此同等优先级下此处的声明生效。
+//
+// 包含：搜索弹窗重设计、代码块样式系统
+// ================================================================
+
+@css {
+  /* ---------- 搜索弹窗 — 亮色模式变量 ---------- */
+  :root {
+    --search-bg: #ffffff;
+    --search-border: rgba(0, 0, 0, 0.08);
+    --search-shadow: rgba(0, 0, 0, 0.12);
+    --search-input-bg: #f5f6f8;
+    --search-input-text: #333333;
+    --search-input-placeholder: #999999;
+    --search-title-color: #1a1a1a;
+    --search-text-color: #555555;
+    --search-divider: #eeeeee;
+    --search-overlay: rgba(0, 0, 0, 0.35);
+    --search-close-bg: #e8e8e8;
+    --search-close-hover: #d0d0d0;
+    --search-close-color: #666666;
+  }
+
+  /* ---------- 搜索弹窗 — 暗色模式变量 ---------- */
+  body.darkmode {
+    --search-bg: #2a2f3a;
+    --search-border: rgba(255, 255, 255, 0.06);
+    --search-shadow: rgba(0, 0, 0, 0.4);
+    --search-input-bg: #1c1f26;
+    --search-input-text: #d0d0d0;
+    --search-input-placeholder: #777777;
+    --search-title-color: #e0e0e0;
+    --search-text-color: #aaaaaa;
+    --search-divider: #3b414c;
+    --search-overlay: rgba(0, 0, 0, 0.55);
+    --search-close-bg: #3b414c;
+    --search-close-hover: #4a5060;
+    --search-close-color: #cccccc;
+  }
+
+  /* ---------- 搜索弹窗 — 蒙层 ---------- */
+  .search-form-wrap {
+    position: fixed !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    width: 100% !important;
+    height: 100%;
+    background: var(--search-overlay) !important;
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+    display: flex !important;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 12vh;
+    z-index: 9999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.25s ease, visibility 0.25s ease !important;
+  }
+
+  .search-form-wrap.on {
+    top: 0 !important;
+    opacity: 1 !important;
+    visibility: visible;
+  }
+
+  /* ---------- 搜索弹窗 — 浮动面板 ---------- */
+  .local-search {
+    position: relative;
+    width: 92%;
+    max-width: 580px;
+    margin: 0 auto;
+    padding: 0 !important;
+    background: var(--search-bg) !important;
+    border-radius: 14px !important;
+    box-shadow:
+      0 20px 60px var(--search-shadow),
+      0 0 0 1px var(--search-border) !important;
+    max-height: 68vh;
+    overflow: hidden !important;
+    transform: translateY(-16px) scale(0.97);
+    opacity: 0;
+    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+                opacity 0.25s ease !important;
+  }
+
+  .search-form-wrap.on .local-search {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+  }
+
+  /* ---------- 搜索弹窗 — 输入框 ---------- */
+  .local-search-input {
+    display: block;
+    width: 100% !important;
+    padding: 1.2rem 3.2rem 1.2rem 1.6rem !important;
+    margin: 0;
+    font-size: 1.5rem !important;
+    color: var(--search-input-text) !important;
+    background: var(--search-input-bg) !important;
+    border: none !important;
+    border-bottom: 1px solid var(--search-divider) !important;
+    border-radius: 14px 14px 0 0 !important;
+    outline: none !important;
+    box-sizing: border-box;
+    transition: background-color 0.3s ease;
+  }
+
+  .local-search-input::placeholder {
+    color: var(--search-input-placeholder);
+  }
+
+  /* ---------- 搜索弹窗 — 关闭按钮 ---------- */
+  .local-search-close {
+    position: absolute !important;
+    top: 0.9rem !important;
+    right: 1rem !important;
+    width: 2.2rem !important;
+    height: 2.2rem !important;
+    padding: 0 !important;
+    border: none !important;
+    border-radius: 50% !important;
+    background: var(--search-close-bg) !important;
+    color: var(--search-close-color) !important;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.15s ease;
+    z-index: 2;
+  }
+
+  .local-search-close:hover {
+    background: var(--search-close-hover) !important;
+  }
+
+  .local-search-close::before {
+    font-size: 130% !important;
+  }
+
+  /* ---------- 搜索弹窗 — 结果区域 ---------- */
+  .local-search-result {
+    position: relative;
+    overflow-y: auto;
+    max-height: calc(68vh - 4.4rem);
+    padding: 0 1.6rem;
+    text-align: left;
+    overscroll-behavior: contain;
+  }
+
+  .search-result-list {
+    list-style: none !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .search-result-list li {
+    padding: 1.2rem 0 !important;
+    border-bottom: 1px solid var(--search-divider) !important;
+  }
+
+  .search-result-list li:last-child {
+    border-bottom: none !important;
+  }
+
+  .search-result-list li .search-result-title {
+    font-size: 1.5rem !important;
+    font-weight: 600 !important;
+    color: var(--search-title-color) !important;
+    text-decoration: none;
+    display: block;
+    line-height: 1.4;
+  }
+
+  .search-result-list li .search-result-title:hover {
+    color: #0681d0 !important;
+  }
+
+  body.darkmode .search-result-list li .search-result-title:hover {
+    color: #80cfff !important;
+  }
+
+  .search-result-list li .search-result {
+    color: var(--search-text-color) !important;
+    font-size: 1.3rem;
+    line-height: 1.6;
+    padding-top: 0.4rem;
+    margin: 0;
+    max-height: 10rem;
+    overflow: hidden;
+  }
+
+  .search-result-list li em.search-keyword {
+    font-style: normal;
+    color: #e8590c !important;
+    font-weight: 600;
+  }
+
+  body.darkmode .search-result-list li em.search-keyword {
+    color: #ffb347 !important;
+  }
+
+  /* ---------- 搜索弹窗 — 无结果提示 ---------- */
+  .search-result-empty {
+    padding: 2.5rem 1rem !important;
+    text-align: center;
+  }
+
+  .search-result-empty p {
+    color: var(--search-text-color) !important;
+    font-size: 1.4rem;
+  }
+
+  /* ---------- 搜索弹窗 — 移动端适配 ---------- */
+  @media (max-width: 768px) {
+    .search-form-wrap {
+      padding-top: 6vh;
+    }
+
+    .local-search {
+      width: 95%;
+      max-height: 80vh;
+      border-radius: 12px !important;
+    }
+
+    .local-search-result {
+      max-height: calc(80vh - 4.4rem);
+    }
+  }
+
+  /* ---------- 亮色模式（默认）— VS Code Light+ ---------- */
+  :root {
+    --hl-bg: #f8f8f8;
+    --hl-fg: #383a42;
+    --hl-comment: #008000;
+    --hl-keyword: #af00db;
+    --hl-function: #795e26;
+    --hl-string: #a31515;
+    --hl-number: #098658;
+    --hl-boolean: #0000ff;
+    --hl-class: #267f99;
+    --hl-variable: #001080;
+    --hl-operator: #383a42;
+    --hl-builtin: #267f99;
+    --hl-property: #001080;
+    --hl-tag: #800000;
+    --hl-attribute: #e50000;
+    --hl-gutter: #999999;
+    --inline-code-bg: #f0f2f5;
+    --inline-code-text: #d63384;
+  }
+
+  /* ---------- 暗色模式 — VS Code Dark+ ---------- */
+  body.darkmode {
+    --hl-bg: #1e1e1e;
+    --hl-fg: #d4d4d4;
+    --hl-comment: #6a9955;
+    --hl-keyword: #c586c0;
+    --hl-function: #dcdcaa;
+    --hl-string: #ce9178;
+    --hl-number: #b5cea8;
+    --hl-boolean: #569cd6;
+    --hl-class: #4ec9b0;
+    --hl-variable: #9cdcfe;
+    --hl-operator: #d4d4d4;
+    --hl-builtin: #4ec9b0;
+    --hl-property: #9cdcfe;
+    --hl-tag: #569cd6;
+    --hl-attribute: #9cdcfe;
+    --hl-gutter: #858585;
+    --inline-code-bg: #2e3440;
+    --inline-code-text: #ffcc99;
+  }
+
+  /* ---------- 代码块容器 ---------- */
+  figure.highlight {
+    position: relative;
+    background: var(--hl-bg) !important;
+    transition: background-color 0.3s ease;
+  }
+
+  .highlight {
+    color: var(--hl-fg);
+    font-size: 1.4rem;
+  }
+
+  .highlight .line {
+    height: auto;
+    line-height: 1.5;
+  }
+
+  .highlight .gutter pre {
+    color: var(--hl-gutter);
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  /* ---------- 语法着色 ---------- */
+  .highlight .keyword   { color: var(--hl-keyword); }
+  .highlight .function  { color: var(--hl-function); }
+  .highlight .string    { color: var(--hl-string); }
+  .highlight .number    { color: var(--hl-number); }
+  .highlight .boolean   { color: var(--hl-boolean); }
+  .highlight .comment   { color: var(--hl-comment); }
+  .highlight .class     { color: var(--hl-class); }
+  .highlight .variable  { color: var(--hl-variable); }
+  .highlight .operator  { color: var(--hl-operator); }
+  .highlight .builtin   { color: var(--hl-builtin); }
+  .highlight .property  { color: var(--hl-property); }
+  .highlight .tag       { color: var(--hl-tag); }
+  .highlight .attribute { color: var(--hl-attribute); }
+
+  /* ---------- 语言标签（悬停时淡出，为复制按钮让位） ---------- */
+  figure.highlight::before {
+    position: absolute;
+    top: 0;
+    right: 1rem;
+    padding: 0 0.5rem;
+    font-size: 1.2rem;
+    line-height: 2;
+    color: var(--hl-gutter);
+    text-transform: uppercase;
+    pointer-events: none;
+    opacity: 0.7;
+    transition: opacity 0.2s linear;
+  }
+
+  figure.highlight:hover::before {
+    opacity: 0;
+  }
+
+  figure.highlight.javascript::before,
+  figure.highlight.js::before       { content: "js"; }
+  figure.highlight.typescript::before,
+  figure.highlight.ts::before       { content: "ts"; }
+  figure.highlight.python::before,
+  figure.highlight.py::before       { content: "python"; }
+  figure.highlight.java::before     { content: "java"; }
+  figure.highlight.c::before        { content: "c"; }
+  figure.highlight.cpp::before      { content: "c++"; }
+  figure.highlight.csharp::before,
+  figure.highlight.cs::before       { content: "c#"; }
+  figure.highlight.html::before     { content: "html"; }
+  figure.highlight.css::before      { content: "css"; }
+  figure.highlight.bash::before,
+  figure.highlight.shell::before,
+  figure.highlight.sh::before       { content: "bash"; }
+  figure.highlight.json::before     { content: "json"; }
+  figure.highlight.yaml::before,
+  figure.highlight.yml::before      { content: "yaml"; }
+  figure.highlight.xml::before      { content: "xml"; }
+  figure.highlight.sql::before      { content: "sql"; }
+  figure.highlight.php::before      { content: "php"; }
+  figure.highlight.go::before       { content: "go"; }
+  figure.highlight.rust::before,
+  figure.highlight.rs::before       { content: "rust"; }
+  figure.highlight.ruby::before,
+  figure.highlight.rb::before       { content: "ruby"; }
+  figure.highlight.swift::before    { content: "swift"; }
+  figure.highlight.kotlin::before,
+  figure.highlight.kt::before       { content: "kotlin"; }
+  figure.highlight.markdown::before,
+  figure.highlight.md::before       { content: "md"; }
+  figure.highlight.diff::before     { content: "diff"; }
+  figure.highlight.lua::before      { content: "lua"; }
+  figure.highlight.powershell::before { content: "ps"; }
+  figure.highlight.plaintext::before,
+  figure.highlight.text::before,
+  figure.highlight.plain::before    { content: "text"; }
+  figure.highlight.ini::before      { content: "ini"; }
+  figure.highlight.toml::before     { content: "toml"; }
+  figure.highlight.nginx::before    { content: "nginx"; }
+  figure.highlight.dockerfile::before { content: "dockerfile"; }
+
+  /* ---------- 行内代码（非代码块内的 <code>） ---------- */
+  .article-entry :not(pre) > code {
+    background: var(--inline-code-bg) !important;
+    color: var(--inline-code-text) !important;
+    padding: 0.15em 0.4em;
+    border-radius: 3px;
+    font-size: 0.9em;
+    font-family: "Consolas", "Monaco", "Courier New", monospace;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  /* ---------- 兜底：未被 Hexo 高亮引擎处理的 <pre><code> 块 ---------- */
+  .article-entry pre:not(figure.highlight pre) {
+    background: var(--hl-bg);
+    border-radius: 5px;
+    padding: 1.5rem;
+    margin: 2rem 0;
+    overflow: auto;
+    transition: background-color 0.3s ease;
+  }
+
+  .article-entry pre:not(figure.highlight pre) code {
+    color: var(--hl-fg);
+    font-family: "Consolas", "Monaco", "Courier New", monospace;
+    font-size: 1.4rem;
+    background: none !important;
+    padding: 0;
+  }
+
+  /* ===== 打赏弹层 — 亮色模式变量 ===== */
+  :root {
+    --reward-bg: rgba(255, 255, 255, 0.88);
+    --reward-border: rgba(0, 0, 0, 0.08);
+    --reward-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
+    --reward-text: #333333;
+    --reward-subtext: #666666;
+    --reward-tab-bg: rgba(0, 0, 0, 0.04);
+    --reward-tab-text: #555555;
+    --reward-tab-hover: rgba(0, 0, 0, 0.08);
+    --reward-accent: #07C160;
+    --reward-overlay: rgba(0, 0, 0, 0.5);
+    --reward-btn-bg: rgba(255, 255, 255, 0.5);
+    --reward-btn-border: rgba(255, 255, 255, 0.75);
+    --reward-btn-text: #555555;
+    --reward-btn-icon: #888888;
+    --reward-btn-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    --reward-btn-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    --reward-btn-hover-bg: rgba(255, 255, 255, 0.7);
+  }
+
+  /* ===== 打赏弹层 — 暗色模式变量 ===== */
+  body.darkmode {
+    --reward-bg: rgba(42, 47, 58, 0.95);
+    --reward-border: rgba(255, 255, 255, 0.1);
+    --reward-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+    --reward-text: #d0d0d0;
+    --reward-subtext: #aaaaaa;
+    --reward-tab-bg: rgba(255, 255, 255, 0.06);
+    --reward-tab-text: #bbbbbb;
+    --reward-tab-hover: rgba(255, 255, 255, 0.1);
+    --reward-overlay: rgba(0, 0, 0, 0.7);
+    --reward-btn-bg: rgba(255, 255, 255, 0.08);
+    --reward-btn-border: rgba(255, 255, 255, 0.15);
+    --reward-btn-text: #cccccc;
+    --reward-btn-icon: #999999;
+    --reward-btn-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
+    --reward-btn-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    --reward-btn-hover-bg: rgba(255, 255, 255, 0.14);
+  }
+
+  /* ===== 打赏弹层 — 遮罩层 ===== */
+  #mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9998;
+    background: var(--reward-overlay);
+    display: none;
+  }
+
+  /* ===== 打赏弹层 — 主面板 ===== */
+  .reward-modal {
+    position: fixed;
+    z-index: 9999;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(0.95);
+    width: 420px;
+    max-width: 94vw;
+    max-height: 90vh;
+    overflow-y: auto;
+    padding: 28px;
+    background: var(--reward-bg);
+    -webkit-backdrop-filter: blur(16px);
+    backdrop-filter: blur(16px);
+    border: 1px solid var(--reward-border);
+    border-radius: 16px;
+    box-shadow: var(--reward-shadow);
+    display: none;
+    opacity: 0;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+  }
+
+  .reward-modal::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: var(--reward-accent);
+    border-radius: 16px 16px 0 0;
+    transition: background 0.3s ease;
+  }
+
+  .reward-modal.visible {
+    display: block;
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+
+  /* ===== 打赏弹层 — 关闭按钮 ===== */
+  .reward-close {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background 0.2s ease;
+    color: var(--reward-subtext);
+  }
+  .reward-close:hover {
+    background: var(--reward-tab-hover);
+  }
+  .reward-close i {
+    font-size: 20px;
+    color: var(--reward-subtext) !important;
+  }
+
+  /* ===== 打赏弹层 — 引导文字 ===== */
+  .reward-wording {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--reward-text) !important;
+    margin: 0 0 20px 0;
+    line-height: 1.6;
+  }
+  .reward-wording i {
+    margin-right: 6px;
+    color: var(--reward-accent) !important;
+    transition: color 0.3s ease;
+  }
+
+  /* ===== 打赏弹层 — 渠道标签页 ===== */
+  .reward-tabs {
+    display: flex;
+    gap: 8px;
+    justify-content: center;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+  }
+
+  .reward-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 16px;
+    border: none;
+    border-radius: 20px;
+    background: var(--reward-tab-bg);
+    color: var(--reward-tab-text);
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    white-space: nowrap;
+    font-family: inherit;
+    line-height: 1.4;
+  }
+  .reward-tab:hover {
+    background: var(--reward-tab-hover);
+  }
+  .reward-tab.active {
+    background: var(--reward-accent);
+    color: #fff !important;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+  .reward-tab i {
+    font-size: 16px;
+    color: var(--reward-tab-text) !important;
+    transition: color 0.3s ease;
+  }
+  .reward-tab.active i {
+    color: #fff !important;
+  }
+
+  /* ===== 打赏弹层 — 二维码面板 ===== */
+  .reward-panel {
+    display: none;
+    text-align: center;
+    animation: rewardFadeIn 0.25s ease;
+  }
+  .reward-panel.active {
+    display: block;
+  }
+
+  @keyframes rewardFadeIn {
+    from { opacity: 0; transform: translateY(8px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  .reward-qrcode-wrap {
+    display: inline-block;
+    padding: 12px;
+    border: 2px solid var(--reward-accent);
+    border-radius: 12px;
+    background: #ffffff;
+    transition: border-color 0.3s ease;
+  }
+
+  .reward-qrcode {
+    display: block;
+    width: 200px;
+    height: 200px;
+    border-radius: 6px;
+  }
+
+  .reward-desc {
+    margin: 12px 0 0;
+    font-size: 14px;
+    color: var(--reward-accent) !important;
+    transition: color 0.3s ease;
+  }
+
+  .reward-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    margin-top: 12px;
+    padding: 8px 20px;
+    background: var(--reward-accent);
+    color: #fff !important;
+    border-radius: 20px;
+    font-size: 14px;
+    text-decoration: none !important;
+    transition: all 0.3s ease;
+  }
+  .reward-link:hover {
+    opacity: 0.85;
+    transform: translateY(-1px);
+    color: #fff !important;
+  }
+
+  /* ===== 打赏按钮（文章内）— 液态玻璃风格 ===== */
+  #reward-out {
+    position: relative;
+    width: 100%;
+    text-align: center;
+  }
+
+  .reward-trigger,
+  #reward-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 40px;
+    padding: 0 24px;
+    margin: 48px 0;
+    font-size: 15px;
+    color: var(--reward-btn-text) !important;
+    background: var(--reward-btn-bg);
+    -webkit-backdrop-filter: blur(12px);
+    backdrop-filter: blur(12px);
+    border: 1px solid var(--reward-btn-border);
+    border-radius: 20px;
+    cursor: pointer;
+    box-shadow: var(--reward-btn-shadow), var(--reward-btn-highlight);
+    transition: all 0.3s ease;
+    font-family: inherit;
+    line-height: 1;
+  }
+  .reward-trigger i,
+  #reward-btn i {
+    color: var(--reward-btn-icon) !important;
+    transition: color 0.3s ease;
+  }
+  .reward-trigger:hover,
+  #reward-btn:hover {
+    background: var(--reward-btn-hover-bg);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1), var(--reward-btn-highlight);
+  }
+
+  /* ===== 打赏弹层 — 移动端适配 ===== */
+  @media (max-width: 768px) {
+    .reward-modal {
+      width: 90vw;
+      padding: 20px;
+    }
+    .reward-qrcode {
+      width: 160px;
+      height: 160px;
+    }
+    .reward-tabs {
+      gap: 6px;
+    }
+    .reward-tab {
+      padding: 6px 12px;
+      font-size: 13px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .reward-tabs {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      justify-content: flex-start;
+      padding-bottom: 4px;
+      -webkit-overflow-scrolling: touch;
+    }
+    .reward-qrcode {
+      width: 140px;
+      height: 140px;
+    }
+  }
+
+  /* ===== 打赏弹层 — 多链子选择器 ===== */
+  .reward-chain-hint {
+    text-align: center;
+    font-size: 13px;
+    color: var(--reward-subtext) !important;
+    margin: 0 0 12px 0;
+  }
+
+  .reward-sub-tabs {
+    display: flex;
+    gap: 6px;
+    justify-content: center;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+  }
+
+  .reward-sub-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 5px 14px;
+    border: 1px solid var(--reward-border);
+    border-radius: 14px;
+    background: transparent;
+    color: var(--reward-tab-text);
+    font-size: 13px;
+    cursor: pointer;
+    transition: all 0.25s ease;
+    font-family: inherit;
+    line-height: 1.4;
+  }
+
+  .reward-sub-tab:hover {
+    border-color: var(--reward-accent);
+    color: var(--reward-accent);
+  }
+
+  .reward-sub-tab.active {
+    background: var(--reward-accent);
+    border-color: var(--reward-accent);
+    color: #fff !important;
+  }
+
+  .reward-sub-badge {
+    font-size: 10px;
+    padding: 1px 5px;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.25);
+    line-height: 1.3;
+  }
+
+  .reward-sub-tab:not(.active) .reward-sub-badge {
+    background: var(--reward-tab-bg);
+    color: var(--reward-accent);
+  }
+
+  .reward-sub-panel {
+    display: none;
+    text-align: center;
+    animation: rewardFadeIn 0.25s ease;
+  }
+
+  .reward-sub-panel.active {
+    display: block;
+  }
+
+  @media (max-width: 480px) {
+    .reward-sub-tabs {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      justify-content: flex-start;
+      -webkit-overflow-scrolling: touch;
+    }
+    .reward-sub-tab {
+      padding: 4px 10px;
+      font-size: 12px;
+    }
+  }
+}