/* ============================================================
   低多边形（Low-Poly）#a855f7 渐变背景
    image : ../img/bg-lowpoly-a855f7-v4.webp  (1920x1080, ~32KB)
    scope : 仅浅色模式；深色模式（html.io-black-mode）保持原样
    ============================================================ */
html:not(.io-black-mode) body {
    background-color: #ddd3fd;                      /* webp 加载前/不支持时的兜底 */
    background-image: url("../img/bg-lowpoly-a855f7-v4.webp");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* 窄屏 / 移动端：iOS Safari 对 background-attachment:fixed 支持差
   （会被静默降级成 scroll 并把图放大裁切），改用 scroll 让渐变铺满整页 */
@media (max-width: 1023.98px) {
    html:not(.io-black-mode) body {
        background-attachment: scroll;
    }
}

/* ============================================================
   详情页主容器：卡片底色（浅色纯白 / 深色跟随深色模式）
   - 浅色：#ffffff
   - 深色：html.io-black-mode 时 #2d2e2f（与主题官方深色卡底同值）
   - 不用 var(--main-bg-color)：该变量被美化插件的 :root 调色板
     永久锁成 #ffffff（:root 与 .io-black-mode 同特异性且更靠后），
     直接用它会导致深色模式下卡片仍是白的，而深色模式正文字色
     是 #b4b8bf，等于白底浅灰字，几乎看不见。
   - 只作用于单篇详情（body.single），分类/归档页保持透出背景图
   - 左右各留 8px（width:calc(100%-16px) + auto 居中）：
     1440 及以下容器本来会顶到视口右边缘，白底会把圆角切掉，
     留缝后才是「卡片」；1920 仍受 max-width:1210 约束居中，不变
   ============================================================ */
body.single main.container.my-2,
body.single div#content.container.my-2 {
    width: calc(100% - 16px);
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(76, 29, 149, 0.10);
}

html.io-black-mode body.single main.container.my-2,
html.io-black-mode body.single div#content.container.my-2 {
    background-color: #2d2e2f;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ============================================================
   羊毛文章 / 资讯：同一套白色卡片
   - 羊毛文章详情  body.single-aiwool      → .aiwool-wrap
   - 资讯详情      body.single-news        → .sinews-single
   - 资讯列表      body.post-type-archive-news → .sinews-wrap
     （其内层 .sinews-layout 是 220px + 正文 的 grid，白色由外层提供）
   - 这三个容器都是 div.container.home-content（没有 my-2），
     所以上面那条 body.single main.container.my-2 命中不到，必须单列
   - 深浅两态取值与详情页一致：浅色 #fff / 深色 #2d2e2f
     （同样不用 var(--main-bg-color)，见上方说明）
   - 不加 overflow:hidden：资讯列表左侧栏是 position:sticky，
     祖先有 overflow 会让 sticky 失效
   ============================================================ */
body.single-aiwool .aiwool-wrap,
body.single-news .sinews-single,
body.post-type-archive-news .sinews-wrap {
    width: calc(100% - 16px);
    margin-left: auto;
    margin-right: auto;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(76, 29, 149, 0.10);
}

html.io-black-mode body.single-aiwool .aiwool-wrap,
html.io-black-mode body.single-news .sinews-single,
html.io-black-mode body.post-type-archive-news .sinews-wrap {
    background-color: #2d2e2f;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* 移动端圆角小一点，贴边更自然 */
@media (max-width: 575.98px) {
    body.single main.container.my-2,
    body.single div#content.container.my-2,
    body.single-aiwool .aiwool-wrap,
    body.single-news .sinews-single,
    body.post-type-archive-news .sinews-wrap {
        border-radius: 14px;
    }
}