/* KaTeX 样式 */
.katex-display {
    display: block !important;
    text-align: center;
    position: relative !important;
    width: 100% !important;
    margin: 1em 0 !important;
}

.katex-display .katex-mathml {
    display: none !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.katex-display .tag {
    position: absolute !important;
    right: 0 !important;
    top: 0;
    transform: translateY(0);
    color: #666;
    white-space: nowrap;
    font-size: 0.9em;
    margin-left: 0.5em !important;
}

.katex-html {
    display: inline-block !important;
    width: auto !important;
    white-space: nowrap !important;
}

.katex-display .katex-mathml mtable {
    width: auto !important;
}

.katex-display .katex-mathml mtd[width="50%"] {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.katex-display .katex-html {
    display: inline-block !important;
    text-align: center !important;
    width: 100% !important;
}

.katex .katex-mathml {
    position: absolute !important;
    left: -9999px !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ========================================
   🔐 hexo-blog-encrypt × Reimu 主题适配
   ======================================== */

/* ── 1. 整体容器 ── */
div#hexo-blog-encrypt:not(.hbe-decrypted) {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 56px 24px 48px !important;
    margin: 40px auto !important;
    max-width: 480px !important;

    background: var(--color-meta-shadow, #fff7f7) !important;
    border: 1.5px solid var(--red-4, #ffd0d0) !important;

    border-radius: 20px !important;
    box-shadow: 0 8px 32px var(--color-red-6-shadow, rgba(255,78,78,0.08)) !important;

    /* 隐藏插件原始的 label 动画背景块 */
    overflow: visible !important;
}

/* ── 2. 锁图标装饰（伪元素） ── */
div#hexo-blog-encrypt:not(.hbe-decrypted)::before {
    content: "🔐" !important;
    font-size: 2.8rem !important;
    line-height: 1 !important;
    margin-bottom: 12px !important;
    display: block !important;
    filter: drop-shadow(0 2px 6px var(--color-red-3-shadow, rgba(255,78,78,0.25))) !important;
    animation: hbe-float 3s ease-in-out infinite !important;
}

@keyframes hbe-float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* ── 3. 提示文字（label span） ── */
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-input-label-content {
    display: block !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: var(--red-1, #ff5252) !important;

    text-align: center !important;
    margin-bottom: 18px !important;
    letter-spacing: 0.03em !important;
    /* 覆盖插件的 transform 动画，让文字静止显示 */
    transform: none !important;
    transition: none !important;
    position: static !important;
    padding: 0 !important;
    width: auto !important;
}

/* 隐藏插件 label 的伪元素背景块（default 主题动画） */
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-input-label-default::before,
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-input-label-default::after {
    display: none !important;
}

/* 让 label 本身不遮挡输入框 */
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-input-label-default {
    position: static !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    pointer-events: none !important;
    text-align: center !important;
}

/* ── 4. 输入框容器 ── */
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-input {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    float: none !important;
    position: static !important;
}

/* ── 5. 密码输入框 ── */
#hexo-blog-encrypt:not(.hbe-decrypted) input#hbePass {
    display: block !important;
    width: 100% !important;
    max-width: 320px !important;
    height: 48px !important;
    padding: 0 16px !important;
    margin: 0 auto 20px !important;

    background: #fff !important;
    border: 2px solid var(--red-4, #ffd0d0) !important;

    border-radius: 12px !important;
    outline: none !important;

    font-size: 1rem !important;
    text-align: center !important;
    letter-spacing: 0.1em !important;
    color: var(--color-default, #333) !important;

    transition: border-color 0.25s, box-shadow 0.25s !important;
    float: none !important;
    position: static !important;
    opacity: 1 !important;
    z-index: auto !important;
}

#hexo-blog-encrypt:not(.hbe-decrypted) input#hbePass:focus {
    border-color: var(--red-2, #ff7c7c) !important;
    box-shadow: 0 0 0 3px var(--red-5, #ffecec) !important;
}

#hexo-blog-encrypt:not(.hbe-decrypted) input#hbePass::placeholder {
    color: var(--red-3, #ffafaf) !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
}

/* ── 6. 解锁按钮 ── */
#hexo-blog-encrypt:not(.hbe-decrypted) button#hbeSubmitBtn,
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-button {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: 200px !important;
    height: 46px !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;

    background: linear-gradient(135deg, var(--red-1, #ff5252) 0%, var(--red-0, #ff0000) 100%) !important;
    /* background: linear-gradient(135deg,  #d1e7e5   0%,  #68d9b0    100%) !important; */

    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;

    border: none !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 14px var(--color-red-3-shadow, rgba(255,78,78,0.35)) !important;

    cursor: var(--cursor-pointer, pointer) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;

    /* 覆盖插件 .hbe-button 的奇怪三角形伪元素 */
    position: relative !important;
    text-indent: 0 !important;
    text-align: center !important;
}

#hexo-blog-encrypt:not(.hbe-decrypted) button#hbeSubmitBtn:hover,
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-button:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 20px var(--color-red-3-shadow, rgba(255,78,78,0.45)) !important;
    background: linear-gradient(135deg, var(--red-2, #ff7c7c) 0%, var(--red-1, #ff5252) 100%) !important;
}

#hexo-blog-encrypt:not(.hbe-decrypted) button#hbeSubmitBtn:active,
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px var(--color-red-3-shadow, rgba(255,78,78,0.25)) !important;
}

/* 覆盖插件 .hbe-button::after 的三角形装饰 */
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-button::after {
    display: none !important;
}

/* ── 7. 解密后出现的"重新加密"按钮（未解密状态下的非提交按钮） ── */
#hexo-blog-encrypt:not(.hbe-decrypted) button.hbe-button:not(#hbeSubmitBtn) {
    width: 160px !important;
    height: 38px !important;
    font-size: 0.85rem !important;
    /* background: linear-gradient(135deg, var(--red-4, #ffd0d0) 0%, var(--red-3, #ffafaf) 100%) !important; */
    background: linear-gradient(135deg, #ddf2a3b7 0%,  #b9dd81 100%) !important;

    color:  #ffffff !important;
    box-shadow: 0 2px 8px var(--color-red-6-shadow, rgba(255,78,78,0.15)) !important;
    margin-top: 24px !important;
}

/* ── 8. 清除插件自带干扰元素 ── */
#hexo-blog-encrypt:not(.hbe-decrypted) br {
    display: none !important;
}

/* ── 9. hbe-content 容器 ── */
#hexo-blog-encrypt:not(.hbe-decrypted) .hbe-content {
    width: 100% !important;
    padding: 0 !important;
    font-size: 1rem !important;
    text-align: center !important;
}

/* ── 10. 暗色模式适配 ── */
[data-theme="dark"] #hexo-blog-encrypt:not(.hbe-decrypted) {
    background: rgba(255, 243, 243, 0.06) !important;
    border-color: rgba(255, 208, 208, 0.25) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] #hexo-blog-encrypt:not(.hbe-decrypted) input#hbePass {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 208, 208, 0.3) !important;
    color: #eee !important;
}

[data-theme="dark"] #hexo-blog-encrypt:not(.hbe-decrypted) input#hbePass:focus {
    border-color: var(--red-2, #ff7c7c) !important;
    box-shadow: 0 0 0 3px rgba(255, 124, 124, 0.15) !important;
}

/* ========================================
   ✅ 解密中（pending）& 解密后（decrypted）：容器重置为普通文章样式
   ======================================== */

/* 刷新时 localStorage 有缓存密钥，立即隐藏卡片（等待异步解密完成） */
#hexo-blog-encrypt.hbe-pending {
    visibility: hidden !important;
    /* 保留占位，防止页面跳动；解密完成后 hbe-decrypted 会接管 */
}

/* 解密成功后，容器被标记为 .hbe-decrypted（由 JS 添加） */
#hexo-blog-encrypt.hbe-decrypted {
    /* 完全重置加密状态的卡片样式 */
    /* hbe.js 会设置 style.display='inline'，用 !important 覆盖回 block */
    display: block !important;
    visibility: visible !important;
    flex-direction: unset !important;
    align-items: unset !important;
    justify-content: unset !important;
    gap: unset !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: unset !important;
    width: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-align: left !important;
}

/* 解密后隐藏锁图标伪元素 */
#hexo-blog-encrypt.hbe-decrypted::before {
    display: none !important;
}

/* 解密后的内容区域：与 .article-entry 内容一致 */
#hexo-blog-encrypt.hbe-decrypted > div:first-child {
    /* 继承 article-entry 的文字颜色和行高 */
    color: var(--color-default) !important;
    text-align: left !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
}

/* ── 解密后的 "Encrypt again" 按钮 ── */
#hexo-blog-encrypt.hbe-decrypted > button.hbe-button {
    /* 覆盖上面的通用 .hbe-button 样式，改为低调的小按钮 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    width: auto !important;
    height: 36px !important;
    padding: 0 18px !important;
    margin: 32px auto 8px !important;

    background: transparent !important;
    color: var(--red-3, #ffafaf) !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;

    border: 1.5px solid var(--red-4, #ffd0d0) !important;
    border-radius: 50px !important;
    box-shadow: none !important;

    cursor: var(--cursor-pointer, pointer) !important;
    transition: color 0.2s, border-color 0.2s, background 0.2s !important;
    text-indent: 0 !important;
}

#hexo-blog-encrypt.hbe-decrypted > button.hbe-button:hover {
    background: var(--red-6, #fff7f7) !important;
    color: var(--red-1, #ff5252) !important;
    border-color: var(--red-3, #ffafaf) !important;
    transform: none !important;
    box-shadow: none !important;
}

#hexo-blog-encrypt.hbe-decrypted > button.hbe-button::after {
    display: none !important;
}

[data-theme="dark"] #hexo-blog-encrypt.hbe-decrypted > button.hbe-button {
    color: rgba(255, 175, 175, 0.5) !important;
    border-color: rgba(255, 208, 208, 0.2) !important;
}

[data-theme="dark"] #hexo-blog-encrypt.hbe-decrypted > button.hbe-button:hover {
    background: rgba(255, 243, 243, 0.06) !important;
    color: var(--red-2, #ff7c7c) !important;
    border-color: rgba(255, 175, 175, 0.4) !important;
}

/* ========================================
   🔔 密码错误 Toast 提示 & 输入框抖动
   ======================================== */

/* Toast 容器 */
#hbe-toast {
    position: fixed;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 9999;

    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;

    background: #fff;
    color: var(--red-1, #ff5252);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;

    border: 1.5px solid var(--red-4, #ffd0d0);
    border-radius: 50px;
    box-shadow: 0 8px 24px rgba(255, 82, 82, 0.18);

    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

/* Toast 前置图标 */
#hbe-toast::before {
    content: "❌";
    font-size: 1rem;
}

/* Toast 显示状态 */
#hbe-toast.hbe-toast-show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* 暗色模式 Toast */
[data-theme="dark"] #hbe-toast {
    background: #2a1a1a;
    border-color: rgba(255, 82, 82, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* 输入框密码错误抖动动画 */
@keyframes hbe-shake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-8px); }
    30%       { transform: translateX(8px); }
    45%       { transform: translateX(-6px); }
    60%       { transform: translateX(6px); }
    75%       { transform: translateX(-3px); }
    90%       { transform: translateX(3px); }
}

#hexo-blog-encrypt input#hbePass.hbe-shake {
    animation: hbe-shake 0.5s ease !important;
    border-color: var(--red-1, #ff5252) !important;
    box-shadow: 0 0 0 3px rgba(255, 82, 82, 0.2) !important;
}