@charset "UTF-8";
/*******************************
* 文件名：backend.css
* 所属模板：xiaok（小K风格导航）
* 创建时间：2026-09-29
* 作者：DHPro
* 功能描述：后台「其他广告配置」「公告管理」注入内容块在 xiaok 下的样式承接
*   覆盖 6 类后台可配、前台注入的元素（4dj 本身无这些元素，故按 4dj 的毛玻璃卡片语言落地）：
*     1) 首页滚动公告 dh_notice（.xk-notice-scroll）
*     2) 三处文字广告 indexwzgg / sitewzgg / postwzgg（.xk-notice）
*     3) 首页侧边栏 HTML 广告 indexsider 与 站点·文章分类侧边栏广告 sortsider（.xk-html-ad）
*     4) 首页自助广告 zzgg 的 3 个 iframe（.xk-selfad）
*     5) 站点缩略图 snapshot（.xk-snapshot）
*   规格：统一复用 xiaok 毛玻璃卡片（rgba(255,255,255,.75) + blur(12px) + r16 + 边框 + 阴影）。
*   注意：page.css 的 .content-item 规则带 !important，本文件用更高权重选择器
*        （.content-item.xk-xxx）+ 必要的 !important 覆盖内边距，未改动 page.css 本体。
*******************************/

/* ===== 1) 文字公告 / 滚动公告 ===== */
/* 后台「其他广告配置」的三处文字广告与首页 dh_notice 滚动条共用此卡片；
   比常规 .content-item 更紧凑（细条状），内边距与图标间距按 14px 级排版。 */
.content-item.xk-notice {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 14px 20px !important;
    margin-bottom: 10px !important;
    text-align: left;
}
.content-item.xk-notice > i {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1;
    color: #4a6cf7;
}
.xk-notice .xk-notice-body {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.7;
    color: #4a5568;
    word-break: break-word;
}
.xk-notice .xk-notice-body a {
    color: #4a6cf7;
    text-decoration: none;
}
.xk-notice .xk-notice-body a:hover {
    text-decoration: underline;
}
/* 滚动公告：容器按 .xk-notice 的弹性宽度撑满，marquee 自身负责横向滚动 */
.xk-notice .xk-notice-body marquee {
    display: block;
    width: 100%;
}

/* ===== 2) 首页 / 分类页侧边栏 HTML 广告 ===== */
/* indexsider（首页）与 sortsider（站点分类 / 文章列表 / 文章分类）都是后台直填的 HTML 代码块；
   xiaok 无右侧栏，故按 aurelia 的做法落在内容列，用卡片包住并做溢出兜底：
   内联 img / table / iframe 一律限宽，超长文本断行，避免撑破毛玻璃卡片。 */
.content-item.xk-html-ad {
    padding: 16px 20px !important;
    text-align: center;
    overflow: hidden;
}
.xk-html-ad img,
.xk-html-ad iframe,
.xk-html-ad table {
    max-width: 100%;
}
.xk-html-ad iframe {
    display: block;
    margin: 0 auto;
    border: 0;
}
.xk-html-ad a {
    color: #4a6cf7;
    text-decoration: none;
    word-break: break-word;
}
.xk-html-ad a:hover {
    text-decoration: underline;
}

/* ===== 3) 首页自助广告（zzgg 开关，3 个 iframe） ===== */
/* 结构与 default 首页一致（文字广告 / 双列横幅 / 大横幅），
   但 default 用 width 100% / 101% / 99.8%，其中 101% 在 xiaok 下会产生横向溢出，
   故三个 iframe 统一 width:100%；高度由 xkSelfAds() 的脚本在同源可读时按内容高度自适应，
   脚本读不到内容（异常）时回退 120px，CSS 的 60px 为脚本执行前的初始高度。 */
.content-item.xk-selfad {
    padding: 12px !important;
    overflow: hidden;
}
.xk-selfad .xk-selfad-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.xk-selfad .xk-selfad-frame {
    display: block;
    width: 100%;
    height: 60px;
    border: 0;
    overflow: hidden;
}

/* ===== 4) 站点缩略图（snapshot） ===== */
/* 后台「站点缩略图接口」的本地代理图（Api.Snapshot.php）。
   版位 4:3（与后台默认接口 mini.s-shot.ru 的 1024×768 输出比例一致，cover 不裁掉内容），
   并限宽 640px 居中 —— 否则在 PC 内容列会撑到 1082×676，占去大半个首屏；
   移动端 440 屏宽下自然为 410×307。接口 404 时由 img 的 onerror 隐藏整块，不出现裂图。 */
.content-item.xk-snapshot {
    padding: 16px 20px !important;
}
.xk-snapshot .xk-snapshot-box {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
    background: #f7fafc;
    line-height: 0;
}
.xk-snapshot .xk-snapshot-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* ===== 暗色适配 ===== */
body.dark-mode .content-item.xk-notice .xk-notice-body {
    color: #a0aec0;
}
body.dark-mode .content-item.xk-notice > i {
    color: #6a8cff;
}
body.dark-mode .xk-notice .xk-notice-body a,
body.dark-mode .xk-html-ad a {
    color: #6a8cff;
}
body.dark-mode .xk-snapshot .xk-snapshot-box {
    background: rgba(255, 255, 255, 0.06);
}

/* ===== 移动端 ===== */
@media (max-width: 768px) {
    .content-item.xk-notice {
        padding: 12px 14px !important;
        margin-bottom: 14px !important;
        gap: 8px;
    }
    .content-item.xk-notice > i {
        font-size: 16px;
    }
    .xk-notice .xk-notice-body {
        font-size: 13px;
    }
    .content-item.xk-html-ad {
        padding: 12px 14px !important;
    }
    .content-item.xk-snapshot {
        padding: 14px 14px !important;
    }
}