/* --------------------------------------------------------------------------
   4. 内容排版：代码、快捷键、提示框
   -------------------------------------------------------------------------- */

/* [功能] 快捷键样式 (<kbd>)
   [外观] 模拟键盘按键，白底黑字灰边
   [⚠️夜间模式重点] 背景 #fff 和文字 #333 必须覆盖 */
kbd {
    padding: 4px 8px;
    border: 1px solid rgba(63, 63, 63, .25);
    box-shadow: 0 1px 0 rgba(63, 63, 63, .25);
    background-color: #fff;
    /* 硬编码白色 */
    color: #333;
    /* 硬编码黑色 */
    border-radius: 4px;
    display: inline-block;
    margin: 0 2px;
    white-space: nowrap;
}

/* [功能] 行内代码高亮
   [场景] 文章内容中未指定 class 的 code 标签 */
.wp-posts-content code:not([class]) {
    color: var(--theme-color);
    background-color: var(--focus-color-opacity1);
}

/* [功能] 全局文字阴影
   [作用] 增加文字立体感
   [⚠️夜间模式注意] 黑色阴影在深色背景下可能显脏，需调整颜色或不透明度 */
body * {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* [功能] 多彩渐变提示框 (#zm_*)
   [场景] 不同 ID 对应不同颜色主题 (绿色成功、蓝色信息等)
   [特点] 使用渐变背景和两侧阴影营造立体感 */
#zm_gll {
    border-radius: 8px;
    color: #eee;
    overflow: hidden;
    margin: 10px 0;
    padding: 15px 15px 15px 35px;
    box-shadow: 6px 0 12px -5px #446e5c, -6px 0 12px -5px #ccd4a3;
    background-image: linear-gradient(102deg, rgba(68, 110, 92, 1) 17.4%, rgba(107, 156, 120, 1) 49.3%, rgba(154, 183, 130, 1) 83.4%, rgba(247, 237, 191, 1) 110.3%)
}

/* 其他 zm_ 系列 ID 类似，此处省略以保持简洁，逻辑相同 */

/* [功能] 经典警示框 (#sc_*)
   [类型] 红色边框 (#sc_redb), 蓝色背景 (#sc_blue), 错误提示 (#sc_error), 普通提示 (#sc_tips)
   [⚠️夜间模式注意] 背景色多为浅色硬编码，需反转为深色半透明 */
#sc_redb {
    margin: 10px 0;
    padding: 0 15px;
    border: 1px solid #e3e3e3;
    border-left: 4px solid #ed0505;
    border-radius: 1px
}

#sc_blue {
    color: #1ba1e2;
    background: rgba(27, 161, 226, .26) no-repeat;
    border: 1px solid #1ba1e2;
    padding: 8px;
    border-radius: 1px
}

#sc_error {
    color: #c66;
    background: #ffecea no-repeat;
    /* 硬编码浅红背景 */
    border: 1px solid #ebb1b1;
    border-radius: 1px
}

#sc_tips {
    color: #777;
    background: #eaeaea no-repeat;
    /* 硬编码浅灰背景 */
    border: 1px solid #ccc;
    overflow: hidden;
    margin: 10px 0;
    border-radius: 10px;
    box-shadow: 0 10px 12px 1px rgba(0, 0, 0, .08)
}

/* [功能] 折叠摘要与引用块 (.ds-abstract, .ds-blockquote)
   [特点] 虚线边框，标题悬浮在边框上
   [⚠️夜间模式注意] 背景 #fff 和边框 #ececec 需调整 */
.ds-abstract {
    background: #fff;
    /* 硬编码白色 */
    font-size: 15px;
    color: #999;
    display: block
}

.ds-abstract ds-fieldset {
    padding: 5px 15px;
    margin: 0 0 10px 0;
    border: 1px dashed #ececec
        /* 硬编码浅灰 */
}

.abstract {
    color: #9c9797;
    border: 1px dashed #e0e0e0;
    padding: 5px;
    margin: 20px 0;
    position: relative
}

.abstract-title {
    position: absolute;
    top: -12px;
    left: 12px;
    background: #fff;
    padding: 0 5px;
    font-size: 14px;
    color: #666;
    font-weight: 700
}

.article-content .abstract-title {
    top: -15px;
}

/* [功能] Joe 主题风格引用框 (.joe_callout, .joe_card__describe)
   [特点] 左侧粗边框，标题悬浮
   [变量] 使用了 --classA, --classB 等自定义变量，需确保夜间模式定义这些变量 */
html {
    --theme: #42a1ff;
    --background: #fff;
    --main: #303133;
    --routine: #606266;
    --minor: #909399;
    --seat: #c0c4cc;
    --classA: #dcdfe6;
    --classB: #e4e7ed;
    --classC: #ebeef5;
    --classD: #f2f6fc;
    --radius-wrap: 12px;
    --radius-inner: 4px;
    --text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    --box-shadow: 0 10px 10px rgba(0, 0, 0, .1);
    --color-pink: #f888ffb5;
    --color-purple: #8880ff;
    --color-orange: #ffa07a;
    --color-green: #67c23a
}

.joe_detail__article code:not([class]) {
    background-color: #fff;
    color: #333;
    margin: 2px
}

.joe_detail {
    padding: 30px
}

.joe_detail__article p {
    line-height: 36px;
    margin: auto;
    font-size: 14px;
    text-align: center;
    color: var(--main-color)
}

.joe_detail {
    padding: 0 30px 30px
}

.joe_gird {
    display: grid
}

.joe_gird__item *:last-child {
    margin-bottom: 0 !important
}

.joe_dotted {
    display: block;
    width: 100%;
    height: 2px;
    background-size: 80px
}

.joe_callout {
    padding: 12px;
    border: 1px solid var(--classB);
    border-left-width: 4px;
    border-radius: var(--radius-inner);
    color: var(--key-color);
    line-height: 36px
}

.joe_callout *:last-child {
    margin-bottom: 0 !important
}

.joe_card__describe {
    position: relative;
    border: 1px dashed var(--classA);
    line-height: 26px
}

.joe_card__describe-title {
    border-radius: 6px;
    position: absolute;
    top: 0;
    left: 8px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    background: var(--background);
    padding: 0 5px;
    color: var(--main);
    font-weight: 500;
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.joe_card__describe-content {
    color: var(--routine);
    padding: 18px 15px 15px
}

.joe_card__describe-content *:last-child {
    margin-bottom: 0 !important
}

.joe_detail {
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    padding: 20px;
    box-shadow: var(--box-shadow)
}

.joe_detail__article {
    padding-top: 17px;
    font-size: 17px;
    word-break: break-all;
    color: var(--routine);
}

.joe_detail__article h5 {
    color: var(--main-color);
    margin-bottom: 18px;
    position: relative;
    font-weight: 600
}

.joe_detail__article h5 {
    font-size: 28px;
    line-height: 32px;
    padding: 20px 0;
    text-align: center
}

.joe_detail__article h5:before {
    content: '「';
    color: var(--theme);
    font-weight: 600;
    margin-right: 5px
}

.joe_detail__article h5:after {
    content: '」';
    color: var(--theme);
    font-weight: 600;
    margin-left: 5px
}

.joe_detail__article p:before {
    content: '';
    margin-right: 6px
}

.joe_detail__article p {
    line-height: 36px;
    margin: 0 20px 20px
}

.joe_detail__article code:not([class]) {
    border-radius: var(--radius-inner);
    padding: 0 8px;
    margin: 4px;
    font-family: 'Joe Font';
    font-size: 14px;
    word-break: keep-all;
    border: 1px solid var(--color-purple);
    vertical-align: baseline
}

.joe_detail__article ol {
    margin-bottom: 18px;
    padding-left: 40px
}

.joe_detail__article ol li {
    line-height: 30px
}

.joe_detail__article ul li::marker {
    content: '\f105   ';
    font: normal normal normal 15px/1 FontAwesome;
    text-shadow: var(--text-shadow)
}

.joe_detail__article ul li:hover::marker {
    content: '\f101   ';
    font: normal normal normal 15px/1 FontAwesome;
    text-shadow: var(--text-shadow);
    color: var(--color-pink)
}

.joe_detail__article ol li {
    color: var(--main-color);
    transition: .2s all
}

.joe_detail__article ol li:hover {
    color: var(--color-orange)
}

.joe_detail__article ol li::marker {
    content: " # " counter(list-item) "  ";
    color: var(--color-green)
}

.joe_detail__article ol li:hover::marker {
    content: " # " counter(list-item) "  ";
    color: var(--color-orange)
}

.joe_detail__article ol li {
    list-style: decimal
}

@media (max-width: 768px) {
    html .joe_detail__article {
        font-size: 14px
    }

    html .joe_detail__article p {
        line-height: 28px
    }

    .joe_detail__article code:not([class]) {
        font-size: 13px
    }
}

.sevent1,
.sevent2 {
    grid-template-columns: repeat(7, 1fr)
}

@media (max-width: 425px) {
    .joe_detail {
        padding: 20px
    }

    .joe_detail__article ol {
        margin-bottom: 18px;
        padding-left: 30px
    }

    .sevent1,
    .sevent2 {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width: 760px) {
    .joe_gird__item {
        margin-right: 10px
    }
}

@media (max-width: 680px) {
    .joe_gird {
        white-space: nowrap;
        overflow-y: scroll
    }
}

.aut-4 {
    background: #ff7a2c
}

.aut-5 {
    background: #f64444
}

.aut-6 {
    background: #cc00ffb8
}

.aut-7 {
    background-image: -webkit-linear-gradient(0deg, #c43ae6 0%, #9593ff 100%)
}

.aut-8 {
    background-image: -webkit-linear-gradient(0deg, #3a8ee6 0%, #93c8ff 100%)
}

.aut-11,
.aut-27 {
    background-image: -webkit-linear-gradient(0deg, #47b18a 0%, #00ffb8 100%)
}

.aut-a {
    background-image: -webkit-linear-gradient(0deg, #3a8ee6 0%, #93c8ff 100%);
    font-size: 10px;
    color: #fff;
    display: inline-block;
    vertical-align: text-top;
    font-weight: 400;
    border-radius: 2px;
    line-height: 1.4;
    padding: 0 4px;
    margin-left: 5px;
    letter-spacing: 0px
}

.aut-10 {
    background-image: -webkit-linear-gradient(0deg, #ffd459 0%, red 180%)
}

.aut-11 {
    background-image: -webkit-linear-gradient(0deg, gold 0%, #a2a200 100%)
}

/* [功能] 剪刀图标分割线
   [交互] 鼠标悬停时，剪刀图标从左移动到右 */
hr:before {
    /* position: absolute; */
    margin-top: -11px;
    left: 5%;
    z-index: 1;
    color: var(--muted-3-color);
    content: '\f0c4';
    /* FontAwesome 剪刀图标 */
    /* font: normal normal normal 14px/1 FontAwesome; */
    font-size: 20px;
    transition: all 1.5s ease-in-out;
}

hr:hover::before {
    left: 95%;
}

/* [功能] SVG 波浪动画 (Parallax Waves)
   [场景] 幻灯片底部装饰
   [逻辑] 多层波浪以不同速度和透明度移动 */
.parallax {
    fill: var(--body-bg-color);
}

.parallax>use {
    animation: move-forever 30s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
    opacity: 0.5;
}

.parallax>use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
    opacity: 0.6;
}

.parallax>use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
    opacity: 0.7;
}

.parallax>use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
    opacity: 1;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }

    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* [功能] 虚线装饰条 */
.joe_dotted {
    display: block;
    width: 100%;
    height: 2px;
    background-size: 80px;
    background-image: repeating-linear-gradient(-45deg, #ff6c6c 0, #ff6c6c 20%, transparent 0, transparent 25%, #1989fa 0, #1989fa 45%, transparent 0, transparent 50%);
}

/* [功能] 锚点定位修复 (防止被固定导航遮挡) */
/* .menu-target-fix {
    display: block;
    position: relative;
    top: -80px
} */

.wp-posts-content li {
    margin-bottom: 2px;
}

/* ==========================================================================
   JOE 主题风格组件 - 夜间模式深度适配
   基于 body.dark-theme / html.dark-theme
   ========================================================================== */

/* 0. 全局基础变量映射 (防止被覆盖) */
body.dark-theme,
html.dark-theme {
    --joe-night-bg: var(--main-bg-color);
    --joe-night-border: var(--main-border-color);
    --joe-night-text: var(--main-color);
    --joe-night-muted: var(--muted-color);
    --joe-night-code-bg: rgba(255, 255, 255, 0.08);
    --joe-night-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* ==========================================================================
   1. 快捷键与代码块 (kbd, code)
   策略：反转为深色背景，提亮文字，弱化边框
   ========================================================================== */

/* 快捷键 <kbd> */
body.dark-theme kbd,
html.dark-theme kbd {
    background-color: var(--joe-night-code-bg) !important;
    color: #e0e0e0 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) !important;
    /* 深色阴影 */
}

/* 行内代码 (wp-posts-content) */
body.dark-theme .wp-posts-content code:not([class]),
html.dark-theme .wp-posts-content code:not([class]) {
    background-color: var(--joe-night-code-bg) !important;
    color: var(--theme-color) !important;
    /* 保持主题色高亮 */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Joe 主题文章内代码 */
body.dark-theme .joe_detail__article code:not([class]),
html.dark-theme .joe_detail__article code:not([class]) {
    background-color: var(--joe-night-code-bg) !important;
    color: #d4d4d4 !important;
    border-color: var(--color-purple) !important;
    /* 保持紫色边框或调整为淡紫 */
    opacity: 0.9;
}

/* 全局文字阴影优化 (夜间模式下去除黑色阴影，改为微弱发光或无阴影) */
body.dark-theme body *,
html.dark-theme body * {
    text-shadow: none !important;
    /* 去除脏脏的黑影 */
}

/* ==========================================================================
   2. 多彩提示框 (#zm_*)
   策略：保留渐变色调但大幅降低亮度，文字强制变白
   ========================================================================== */

body.dark-theme #zm_gll,
body.dark-theme #zm_mhz,
body.dark-theme #zm_xgh,
body.dark-theme #zm_tkzj,
body.dark-theme #zm_xyz,
body.dark-theme #zm_xty,
body.dark-theme #zm_yyz,
body.dark-theme #zm_szh,
html.dark-theme #zm_gll,
html.dark-theme #zm_mhz,
html.dark-theme #zm_xgh,
html.dark-theme #zm_tkzj,
html.dark-theme #zm_xyz,
html.dark-theme #zm_xty,
html.dark-theme #zm_yyz,
html.dark-theme #zm_szh {
    color: #eee !important;
    border: 1px solid var(--joe-night-border) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
}

/* 绿色渐变 (#zm_gll) - 深绿化 */
body.dark-theme #zm_gll,
html.dark-theme #zm_gll {
    background-image: linear-gradient(102deg, #1a3c2b 17.4%, #2f5236 49.3%, #3a4f2e 83.4%, #4a4526 110.3%) !important;
}

/* 其他 zm 系列通用处理：如果原背景太亮，这里可以统一压暗，或者依赖上面的 color 修正 */
/* 注意：由于 zm 系列使用了复杂的 inline gradient，最稳妥的是在夜间模式下给一个半透明遮罩或强制 background-color */
body.dark-theme #zm_gll::before,
html.dark-theme #zm_gll::before {
    /* 可选：添加一层黑色半透明遮罩来压暗渐变 */
    /* content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); pointer-events: none; */
}

/* ==========================================================================
   3. 经典警示框 (#sc_*)
   策略：背景转为深色半透明，保留边框颜色作为标识
   ========================================================================== */

/* 红色边框 (#sc_redb) */
body.dark-theme #sc_redb,
html.dark-theme #sc_redb {
    background-color: rgba(237, 5, 5, 0.08) !important;
    border-color: var(--joe-night-border) !important;
    border-left-color: #ef5350 !important;
    color: var(--joe-night-text) !important;
}

/* 蓝色背景 (#sc_blue) */
body.dark-theme #sc_blue,
html.dark-theme #sc_blue {
    color: #64b5f6 !important;
    background: rgba(27, 161, 226, 0.12) !important;
    border-color: rgba(27, 161, 226, 0.4) !important;
}

/* 错误提示 (#sc_error) */
body.dark-theme #sc_error,
html.dark-theme #sc_error {
    color: #ef9a9a !important;
    background: rgba(255, 236, 236, 0.03) !important;
    border-color: rgba(235, 177, 177, 0.3) !important;
}

/* 普通提示 (#sc_tips) */
body.dark-theme #sc_tips,
html.dark-theme #sc_tips {
    color: var(--joe-night-muted) !important;
    background: var(--muted-bg-color) !important;
    border-color: var(--joe-night-border) !important;
    box-shadow: 0 10px 12px 1px rgba(0, 0, 0, 0.3) !important;
}

/* ==========================================================================
   4. 折叠摘要与引用 (.ds-*, .abstract)
   策略：深色背景，柔和虚线边框
   ========================================================================== */

body.dark-theme .ds-abstract,
html.dark-theme .ds-abstract {
    background: var(--muted-bg-color) !important;
    color: var(--joe-night-muted) !important;
}

body.dark-theme .ds-abstract ds-fieldset,
html.dark-theme .ds-abstract ds-fieldset {
    border-color: var(--joe-night-border) !important;
    background: transparent !important;
}

body.dark-theme .ds-abstract ds-legend,
html.dark-theme .ds-abstract ds-legend {
    color: var(--joe-night-text) !important;
    background: var(--main-bg-color) !important;
    border: 1px solid var(--joe-night-border);
    border-radius: 4px;
    padding: 0 5px;
}

body.dark-theme .ds-blockquote,
html.dark-theme .ds-blockquote {
    color: var(--joe-night-muted) !important;
    border-color: var(--joe-night-border) !important;
    background: var(--muted-bg-color) !important;
}

body.dark-theme .abstract,
html.dark-theme .abstract {
    border-color: var(--joe-night-border) !important;
    background: var(--muted-bg-color) !important;
}

body.dark-theme .abstract-title,
html.dark-theme .abstract-title {
    background: var(--muted-bg-color) !important;
    color: var(--joe-night-text) !important;
    /* border: 1px solid var(--joe-night-border); */
    border-radius: 4px;
}

/* ==========================================================================
   5. Joe 主题核心组件 (.joe_*)
   策略：利用 CSS 变量自动适配，修正硬编码部分
   ========================================================================== */

/* 容器背景 */
body.dark-theme .joe_detail,
html.dark-theme .joe_detail {
    background: var(--main-bg-color) !important;
    border: 1px solid var(--main-border-color) !important;
    box-shadow: var(--joe-night-shadow) !important;
}

/* 文章文字颜色 */
body.dark-theme .joe_detail__article,
body.dark-theme .joe_detail__article p,
body.dark-theme .joe_card__describe-content,
html.dark-theme .joe_detail__article,
html.dark-theme .joe_detail__article p,
html.dark-theme .joe_card__describe-content {
    color: var(--routine) !important;
    /* 使用主题变量，通常已适配夜间 */
    opacity: 0.9;
}

/* 标题颜色 */
body.dark-theme .joe_detail__article h5,
html.dark-theme .joe_detail__article h5 {
    color: var(--main-color) !important;
}

body.dark-theme .joe_detail__article h5:before,
body.dark-theme .joe_detail__article h5:after,
html.dark-theme .joe_detail__article h5:before,
html.dark-theme .joe_detail__article h5:after {
    color: var(--theme) !important;
}

/* 引用框 (.joe_callout) */
body.dark-theme .joe_callout,
html.dark-theme .joe_callout {
    background: var(--muted-bg-color) !important;
    border-color: var(--main-border-color) !important;
    color: var(--key-color) !important;
}

/* 描述卡片 (.joe_card__describe) */
body.dark-theme .joe_card__describe,
html.dark-theme .joe_card__describe {
    border-color: var(--main-border-color) !important;
    background: var(--muted-bg-color) !important;
}

body.dark-theme .joe_card__describe-title,
html.dark-theme .joe_card__describe-title {
    background: var(--main-bg-color) !important;
    color: var(--main-color) !important;
    border: 1px solid var(--main-border-color);
    border-radius: 4px;
}

/* 列表标记颜色修正 (夜间模式下荧光色可能太刺眼，稍微降低饱和度或保持) */
body.dark-theme .joe_detail__article ol li::marker,
html.dark-theme .joe_detail__article ol li::marker {
    color: var(--color-green) !important;
    opacity: 0.8;
}

body.dark-theme .joe_detail__article ul li:hover::marker,
html.dark-theme .joe_detail__article ul li:hover::marker {
    color: var(--color-pink) !important;
}

/* ==========================================================================
   6. 作者标签 (.aut-*)
   策略：降低渐变亮度，避免在深色背景下“发光”刺眼
   ========================================================================== */

body.dark-theme .aut-4,
html.dark-theme .aut-4 {
    background: #cc5a12 !important;
}

body.dark-theme .aut-5,
html.dark-theme .aut-5 {
    background: #b82a2a !important;
}

body.dark-theme .aut-6,
html.dark-theme .aut-6 {
    background: #8a00b8 !important;
}

/* 渐变类调整 (使用 filter  brightness 压暗) */
body.dark-theme .aut-7,
body.dark-theme .aut-8,
body.dark-theme .aut-11,
body.dark-theme .aut-27,
body.dark-theme .aut-a,
body.dark-theme .aut-10,
html.dark-theme .aut-7,
html.dark-theme .aut-8,
html.dark-theme .aut-11,
html.dark-theme .aut-27,
html.dark-theme .aut-a,
html.dark-theme .aut-10 {
    filter: brightness(0.7) !important;
    /* 整体压暗 30% */
    opacity: 0.9;
}

/* ==========================================================================
   7. 分割线与装饰 (hr, joe_dotted)
   策略：调整图标颜色和虚线颜色
   ========================================================================== */

/* 剪刀分割线 */
body.dark-theme hr:before,
html.dark-theme hr:before {
    color: var(--muted-3-color) !important;
    opacity: 0.6;
}

/* 虚线装饰条 (原色太鲜艳，改为低饱和度) */
body.dark-theme .joe_dotted,
html.dark-theme .joe_dotted {
    /* 重新定义一个深色模式的虚线渐变，或者简单降低透明度 */
    opacity: 0.5;
    filter: grayscale(0.4);
}

/* ==========================================================================
   8. 波浪动画 (.parallax)
   策略：填充色自动跟随变量，无需额外修改，但可调整透明度
   ========================================================================== */
body.dark-theme .parallax,
html.dark-theme .parallax {
    fill: var(--body-bg-color);
    opacity: 0.8;
    /* 夜间模式稍微淡化一点 */
}