/**
 * KBG UI 3.0 —— 文章详情页专属样式（Stage 5.4.1：Article Frame）
 *
 * 本轮只做Hero/Title/Meta/Excerpt的基础布局与响应式，不做正文排版细节
 * 优化（Stage 5.4.2）、不做hover/动画/渐变打磨——这些明确留到后续子阶段，
 * 本轮只保证结构不错位、不溢出、可读。
 *
 * 复用Stage 1-4已冻结的Design Tokens/Grid/Components，不重新定义任何
 * 颜色/间距/圆角变量。
 */

body.kbg-ui-preview .kbg-single-main {
    padding: var(--kbg-space-8) 0;
}

/* ============================================================
 * Breadcrumb（Stage 5.4.6）
 * ------------------------------------------------------------
 * 真实DOM来自wpcom_breadcrumb()（RUNTIME.md §3.10）：<ol class="breadcrumb">
 * <li class="home">...</li><li>...分类...</li></ol>，我们在PHP层追加了
 * 一个<li class="active kbg-breadcrumb-current">承载当前文章标题（真实
 * 函数本身对is_single()场景不输出文章标题，见Discovery）。
 *
 * 视觉刻意弱化（产品要求"不能抢夺Article Title视觉重心"）：小字号+灰色，
 * 跟父主题原有基线（12px+灰色）保持同一量级，不因为换了UI3就放大。
 * ============================================================ */
body.kbg-ui-preview .kbg-single-breadcrumb {
    margin-bottom: var(--kbg-space-5);
}
body.kbg-ui-preview .kbg-single-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
}
body.kbg-ui-preview .kbg-single-breadcrumb .breadcrumb > li {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
}
body.kbg-ui-preview .kbg-single-breadcrumb .breadcrumb a {
    color: var(--kbg-text-3);
    text-decoration: none;
}
body.kbg-ui-preview .kbg-single-breadcrumb .breadcrumb a:hover {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview .kbg-single-breadcrumb .breadcrumb a:focus-visible,
body.kbg-ui-preview .kbg-single-breadcrumb .breadcrumb .kbg-breadcrumb-current:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
    border-radius: 2px;
}
body.kbg-ui-preview .kbg-single-breadcrumb .breadcrumb .wi {
    margin: 0 var(--kbg-space-2);
    font-size: 10px;
    opacity: .7;
    flex-shrink: 0;
}
/* 当前文章标题（我们追加的<li>）——过长时截断，不横向溢出；因为它总是
   排在最后一项，用flex-shrink+min-width:0+ellipsis三件套即可安全截断，
   不需要给前面的"首页"/"分类"这两项限宽（它们本身文字短，真实内容核实
   过分类名最长也就几个字）。 */
body.kbg-ui-preview .kbg-single-breadcrumb .kbg-breadcrumb-current {
    flex-shrink: 1;
    min-width: 0;
    color: var(--kbg-text-2);
}
body.kbg-ui-preview .kbg-single-breadcrumb .kbg-breadcrumb-current span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Tablet/Mobile：优先保证"首页→分类"这两级完整可读，当前文章标题弱化
   （缩短可用宽度）；Mobile进一步收紧，真实浏览器验证长标题下不溢出为
   准，见Verification Report。 */
@media (min-width: 768px) and (max-width: 1199px) {
    body.kbg-ui-preview .kbg-single-breadcrumb .kbg-breadcrumb-current span {
        max-width: 220px;
    }
}
@media (max-width: 767px) {
    body.kbg-ui-preview .kbg-single-breadcrumb .kbg-breadcrumb-current span {
        max-width: 120px;
    }
}

/* ---------- Hero（特色图/视频） ---------- */
body.kbg-ui-preview .kbg-single-hero {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--kbg-radius-lg);
    margin-bottom: var(--kbg-space-6);
    background: var(--kbg-bg-1);
}
body.kbg-ui-preview .kbg-single-hero img,
body.kbg-ui-preview .kbg-single-hero video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Title / Meta / Excerpt ---------- */
/* 真实核查：kbg-ui3-layout.css（冻结）里body.kbg-ui-preview的全局背景是
   var(--kbg-bg-0)（深色），不是homepage专属的.home浅色Reading Layer——
   文章页没有.home这个body class，所以这里背景是深色，标题必须用浅色
   token，不能照搬Section Title那种"深棕配浅背景"的方案（那是针对.home
   浅背景专门设计的，用在这里会重演白字白底/深字深底的对比度问题）。 */
body.kbg-ui-preview .kbg-single-title {
    font-family: var(--kbg-font-tech);
    font-size: var(--kbg-fs-h1);
    font-weight: var(--kbg-fw-bold);
    line-height: var(--kbg-lh-tight);
    color: var(--kbg-text-1);
    margin: 0 0 var(--kbg-space-4);
}
body.kbg-ui-preview .kbg-single-meta {
    font-size: var(--kbg-fs-sm);
    color: var(--kbg-text-3);
    margin-bottom: var(--kbg-space-5);
}
body.kbg-ui-preview .kbg-single-meta-dot {
    margin: 0 var(--kbg-space-2);
}
body.kbg-ui-preview .kbg-single-meta-cats a {
    color: var(--kbg-text-3);
    text-decoration: none;
}
body.kbg-ui-preview .kbg-single-meta-cats a:hover {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview .kbg-single-excerpt {
    font-size: var(--kbg-fs-body);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-2);
    margin: 0 0 var(--kbg-space-6);
    padding-left: var(--kbg-space-4);
    border-left: 3px solid var(--kbg-gold-1);
}

/* ============================================================
 * Content Typography（Stage 5.4.2）
 * ------------------------------------------------------------
 * 全部规则严格限定 body.kbg-ui-preview .entry-content 作用域，不出现任何
 * 裸标签（a/img/table/p/blockquote等）的全局规则——只在这个前缀下才生效，
 * 访客态和其它页面完全不受影响。
 *
 * 正文颜色不用纯白：--kbg-text-2（浅灰）是长文阅读的基准色，标题类用
 * --kbg-gold-1/--kbg-text-1做层级区分，不是为了炫技，是为了在暗色背景下
 * 建立清晰的"标题>正文>次要信息"层级，同时避免大段纯白文字造成阅读疲劳。
 *
 * 真实数据核查（未虚构测试内容）：站内真实存在 段落/H2/H3/图片(Gutenberg
 * figure.wp-block-image)/blockquote/ul/ol/pre+code(Gutenberg代码块)/hr/
 * strong/内链/外链(target="_blank" rel="noreferrer noopener")——以上均可
 * 用真实文章验证。真实核查也确认站内当前没有任何table/figcaption/em/
 * iframe/gallery的真实用例（0篇命中），这几类按同样的设计原则实现，但
 * 未经真实内容验证，报告里会如实说明。
 * ============================================================ */
body.kbg-ui-preview .entry-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--kbg-text-2);
}

/* ---- Paragraph ---- */
body.kbg-ui-preview .entry-content p {
    margin: 0 0 var(--kbg-space-5);
}

/* ---- Heading H2-H6 ---- */
body.kbg-ui-preview .entry-content h2 {
    font-size: 26px;
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-gold-1);
    line-height: var(--kbg-lh-tight);
    margin: var(--kbg-space-8) 0 var(--kbg-space-4);
}
body.kbg-ui-preview .entry-content h3 {
    font-size: 21px;
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-gold-1);
    line-height: var(--kbg-lh-tight);
    margin: var(--kbg-space-6) 0 var(--kbg-space-3);
}
body.kbg-ui-preview .entry-content h4,
body.kbg-ui-preview .entry-content h5,
body.kbg-ui-preview .entry-content h6 {
    font-size: 18px;
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-1);
    line-height: var(--kbg-lh-tight);
    margin: var(--kbg-space-5) 0 var(--kbg-space-3);
}

/* ---- Image / Figure / Figcaption ----
   Gutenberg真实结构是<figure class="wp-block-image"><img></figure>，图片
   本身不直接是.entry-content的子元素，两条规则都要覆盖到。 */
body.kbg-ui-preview .entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--kbg-radius-md);
}
body.kbg-ui-preview .entry-content figure {
    margin: var(--kbg-space-6) 0;
}
body.kbg-ui-preview .entry-content figcaption {
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
    text-align: center;
    margin-top: var(--kbg-space-2);
}

/* ---- Blockquote ---- */
body.kbg-ui-preview .entry-content blockquote {
    margin: var(--kbg-space-6) 0;
    padding: var(--kbg-space-4) var(--kbg-space-5);
    border-left: 3px solid var(--kbg-gold-1);
    background: var(--kbg-bg-1);
    border-radius: var(--kbg-radius-xs);
    color: var(--kbg-text-2);
    font-style: italic;
}
body.kbg-ui-preview .entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* ---- UL / OL ----
   ::marker颜色用金色，跟品牌保持一致，不引入图片符号。 */
body.kbg-ui-preview .entry-content ul,
body.kbg-ui-preview .entry-content ol {
    margin: 0 0 var(--kbg-space-5);
    padding-left: var(--kbg-space-6);
}
body.kbg-ui-preview .entry-content li {
    margin-bottom: var(--kbg-space-2);
}
body.kbg-ui-preview .entry-content ul li::marker,
body.kbg-ui-preview .entry-content ol li::marker {
    color: var(--kbg-gold-1);
}

/* ---- Table ----
   真实核查：站内当前0篇文章包含table，此规则未经真实内容验证。用
   display:block+overflow-x:auto让表格本身可横向滚动，不需要额外包裹容器
   （不修改PHP模板的前提下，这是CSS-only的标准响应式表格技术）。 */
body.kbg-ui-preview .entry-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: var(--kbg-space-6) 0;
    font-size: var(--kbg-fs-sm);
}
body.kbg-ui-preview .entry-content th,
body.kbg-ui-preview .entry-content td {
    border: 1px solid var(--kbg-border-subtle);
    padding: var(--kbg-space-2) var(--kbg-space-3);
    text-align: left;
}
body.kbg-ui-preview .entry-content th {
    background: var(--kbg-bg-1);
    color: var(--kbg-gold-1);
    font-weight: var(--kbg-fw-bold);
}

/* ---- Pre / Code ----
   pre自身overflow-x:auto防止超长代码行撑宽卡片；行内code和pre>code分开
   处理，避免代码块内出现"深色底套深色底"的双层背景。 */
body.kbg-ui-preview .entry-content pre {
    overflow-x: auto;
    max-width: 100%;
    background: var(--kbg-bg-0);
    border: 1px solid var(--kbg-border-subtle);
    border-radius: var(--kbg-radius-md);
    padding: var(--kbg-space-4);
    margin: var(--kbg-space-6) 0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-body);
}
body.kbg-ui-preview .entry-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: var(--kbg-bg-1);
    color: var(--kbg-gold-1);
    padding: 2px 6px;
    border-radius: var(--kbg-radius-xs);
    font-size: .9em;
}
body.kbg-ui-preview .entry-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ---- HR ---- */
body.kbg-ui-preview .entry-content hr {
    border: none;
    border-top: 1px solid var(--kbg-border-subtle);
    margin: var(--kbg-space-8) 0;
}

/* ---- Strong / Em ----
   真实核查：<em>站内0篇真实使用，未经真实内容验证，按同样设计原则实现。 */
body.kbg-ui-preview .entry-content strong {
    color: var(--kbg-text-1);
    font-weight: var(--kbg-fw-bold);
}
body.kbg-ui-preview .entry-content em {
    font-style: italic;
    color: var(--kbg-text-1);
}

/* ---- Inline Link / External Link ----
   真实核查：Gutenberg真实给"新窗口打开"的链接自动加了
   target="_blank" rel="noreferrer noopener"，可以用这个真实存在的属性
   选择器区分外链，不需要额外新增class/属性。 */
body.kbg-ui-preview .entry-content a {
    color: var(--kbg-gold-2);
    text-decoration: underline;
    text-decoration-color: rgba(217, 165, 32, .4);
    text-underline-offset: 2px;
}
body.kbg-ui-preview .entry-content a:visited {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview .entry-content a:hover {
    color: var(--kbg-gold-1);
    text-decoration-color: var(--kbg-gold-1);
}
body.kbg-ui-preview .entry-content a:focus-visible {
    color: var(--kbg-gold-1);
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview .entry-content a[target="_blank"]::after {
    content: "\2197" / ""; /* ↗，用CSS Content"内容/替代文本"语法排除出accessible name，
                              吸取Stage 5.3.1.1 Ticker箭头的教训，不重演装饰字符污染AX名称 */
    margin-left: 2px;
    font-size: .85em;
}

/* ---- WordPress默认Gallery ----
   真实核查：站内当前0篇文章使用Gallery（无论shortcode还是Block版本），
   此规则未经真实内容验证。 */
body.kbg-ui-preview .entry-content .wp-block-gallery {
    margin: var(--kbg-space-6) 0;
}

/* ---- WordPress默认Caption（[caption]短代码/wp-caption） ---- */
body.kbg-ui-preview .entry-content .wp-caption {
    margin: var(--kbg-space-6) 0;
    max-width: 100% !important;
}
body.kbg-ui-preview .entry-content .wp-caption-text {
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
    text-align: center;
    margin-top: var(--kbg-space-2);
}

/* ---- iframe（仅响应式，不改变内容） ----
   真实核查：站内当前0篇文章包含iframe，此规则未经真实内容验证。只做
   宽度约束，不裁切/不替换内容来源。 */
body.kbg-ui-preview .entry-content iframe {
    max-width: 100%;
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    body.kbg-ui-preview .kbg-single-title {
        font-size: 24px;
    }
    body.kbg-ui-preview .entry-content h2 {
        font-size: 22px;
    }
    body.kbg-ui-preview .entry-content h3 {
        font-size: 19px;
    }
}

/* ============================================================
 * Inline Modules（Stage 5.4.3）
 * ------------------------------------------------------------
 * 范围：the_content filter chain真实追加的5个正文内嵌模块——Telegram
 * Source / Topic Links / Inline Related / Exchange Module /
 * Tools Recommend（Stage 5.4.3 Discovery真实调查确认；站内真实覆盖为0
 * 的wp-post-author / Rating Review / Expand More / Keyword Link不在
 * 此列，不写CSS、不留DOM）。
 *
 * 原则：CSS优先，不新增Wrapper——全部模块的真实DOM（Plugin/父主题原样
 * 输出）保持不变，只做样式覆盖。
 *
 * Topic Links / Inline Related / Tools Recommend三个模块的部分样式来自
 * Plugin代码里硬编码的内联style="..."属性。真实实验证实：即使把选择器
 * 特异性人为拉到很高（.kbg-topic-links.kbg-topic-links.kbg-topic-links
 * 这种重复类名写法），不加!important也无法覆盖内联样式的color/
 * background（用rgb(1,2,3)这种不可能撞色的测试值验证，计算后颜色始终
 * 是内联值本身）；只有!important能生效——这是CSS规范决定的（内联样式
 * 优先级高于任何选择器组合，!important是唯一例外）。所以这里的
 * !important不是图省事，是先做过对照实验、确认没有更好方案后的必要
 * 选择，且只用在被内联样式真正锁定的具体属性上，不用在整条规则上。
 * ============================================================ */

/* ---- 1. Telegram Source ----
   真实DOM无内联样式锁定，正常覆盖即可。 */
body.kbg-ui-preview .entry-content .kbg-source-hr {
    margin: var(--kbg-space-8) 0 var(--kbg-space-5);
    border-top-color: var(--kbg-gold-1);
    opacity: .5;
}
body.kbg-ui-preview .entry-content .kbg-source-line,
body.kbg-ui-preview .entry-content .kbg-source-link {
    font-size: var(--kbg-fs-sm);
    color: var(--kbg-text-3);
    margin: 0 0 var(--kbg-space-2);
}
body.kbg-ui-preview .entry-content .kbg-source-line strong,
body.kbg-ui-preview .entry-content .kbg-source-link strong {
    color: var(--kbg-text-2);
    font-weight: var(--kbg-fw-bold);
}

/* ---- 2. Topic Links ----
   真实验证：.kbg-topic-links内联style="color:#666"锁定了color，只覆盖
   这一个被锁定的属性；字号/间距是我们自己新增的声明，不涉及内联样式
   冲突，正常覆盖。 */
body.kbg-ui-preview .entry-content .kbg-topic-links {
    color: var(--kbg-text-3) !important;
    font-size: var(--kbg-fs-sm);
    margin: var(--kbg-space-5) 0 0;
}
body.kbg-ui-preview .entry-content .kbg-topic-links a {
    color: var(--kbg-gold-2);
}

/* ---- 3. Inline Related（延伸阅读） ----
   真实验证：background/border-left-color均为内联样式锁定，只覆盖这两个
   被锁定的颜色属性；padding/margin/font-size保留Plugin原有内联值不动，
   不重复声明。 */
body.kbg-ui-preview .entry-content .kbg-inline-related {
    background-color: var(--kbg-bg-1) !important;
    border-left-color: var(--kbg-gold-1) !important;
    color: var(--kbg-text-2);
}
body.kbg-ui-preview .entry-content .kbg-inline-related a {
    color: var(--kbg-gold-2);
}

/* ---- 4. Exchange Module ----
   真实验证发现的最高优先级Bug：.kbg-exchange-safe背景色rgb(247,247,247)
   来自父主题自身CSS（非内联），本文件里Stage 5.4.2定义的
   .entry-content strong{color:var(--kbg-text-1)}（白色）级联进这个浅色
   子容器后变成白底白字。用比基础.entry-content strong更具体的
   .kbg-exchange-safe strong选择器即可用正常特异性覆盖，不需要
   !important——跟上面三个模块的情况不同，这里没有内联样式参与。 */
body.kbg-ui-preview .entry-content .kbg-exchange-related {
    margin-top: var(--kbg-space-6);
}
body.kbg-ui-preview .entry-content .kbg-exchange-related h3 {
    font-size: var(--kbg-fs-h3);
    color: var(--kbg-gold-1);
    margin: 0 0 var(--kbg-space-3);
}
body.kbg-ui-preview .entry-content .kbg-exchange-related ul {
    margin: 0 0 var(--kbg-space-5);
}
body.kbg-ui-preview .entry-content .kbg-exchange-safe strong {
    color: #222222;
}
body.kbg-ui-preview .entry-content .kbg-exchange-safe p {
    margin: 0 0 var(--kbg-space-2);
}

/* ---- 5. Tools Recommend ----
   真实验证：同Inline Related，background/border均为内联样式锁定，只
   覆盖这两个颜色属性；label/link颜色未被内联锁定（内联样式只设了
   font-weight），走.entry-content已冻结的p/a规则即可，不需要额外覆盖。 */
body.kbg-ui-preview .entry-content .kbg-tools-recommend {
    background-color: var(--kbg-bg-1) !important;
    border-color: var(--kbg-border-subtle) !important;
}

/* ---- 6. .kbg-related-articles（Stage 5.4.6，Discovery之外新发现的正文
   静态模块，正式纳入视觉适配）----
   真实30篇样本核查（RUNTIME.md）：<div class="kbg-related-articles">
   <h2>相关阅读</h2><ul><li><a>...</a></li>...</ul></div>，无内联style，
   不需要!important。

   跟已冻结的Inline Related/Topic Links/Tools Recommend刻意做视觉区分
   （Design Review页面一致性要求"不能与Bottom Related产生层级混淆"）：
   用简洁的"阅读列表"视觉（小标题+纯文字链接列表），不用卡片/图片，跟
   Bottom Related的大图卡片网格明显不同；标题用span级别弱化处理，不是
   Inline Related那种左侧色条引述框，也不跟Bottom Related共用.entry-
   related-title的H3大标题样式——三者刻意保持三种不同的视觉重量。

   .kbg-related-articles h2 真实是裸<h2>标签，会被Stage 5.4.2冻结的
   `.entry-content h2`规则（26px金色大标题）套中——这里用更高特异性的
   `.entry-content .kbg-related-articles h2`覆盖，不修改冻结的通用h2
   规则本身，只是给这一个更具体的场景加一条更精确的规则（跟Exchange
   Module覆盖strong颜色是同一手法，非新发明）。 */
body.kbg-ui-preview .entry-content .kbg-related-articles {
    margin: var(--kbg-space-6) 0;
    padding: var(--kbg-space-4) var(--kbg-space-5);
    background: var(--kbg-bg-1);
    border: var(--kbg-border-width) solid var(--kbg-border-neutral);
    border-radius: var(--kbg-radius-md);
}
body.kbg-ui-preview .entry-content .kbg-related-articles h2 {
    font-size: var(--kbg-fs-sm);
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-3);
    line-height: var(--kbg-lh-heading);
    margin: 0 0 var(--kbg-space-3);
    padding: 0;
    letter-spacing: .02em;
}
body.kbg-ui-preview .entry-content .kbg-related-articles ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.kbg-ui-preview .entry-content .kbg-related-articles li {
    margin: 0 0 var(--kbg-space-2);
    padding-left: var(--kbg-space-4);
    position: relative;
}
body.kbg-ui-preview .entry-content .kbg-related-articles li:last-child {
    margin-bottom: 0;
}
body.kbg-ui-preview .entry-content .kbg-related-articles li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .65em;
    width: 5px;
    height: 5px;
    border-radius: var(--kbg-radius-circle);
    background: var(--kbg-gold-2);
}
body.kbg-ui-preview .entry-content .kbg-related-articles a {
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-2);
    text-decoration: none;
}
body.kbg-ui-preview .entry-content .kbg-related-articles a:visited {
    color: var(--kbg-text-3);
}
body.kbg-ui-preview .entry-content .kbg-related-articles a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .entry-content .kbg-related-articles a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
    border-radius: 2px;
}
@media (max-width: 767px) {
    body.kbg-ui-preview .entry-content .kbg-related-articles {
        padding: var(--kbg-space-4);
    }
}

/* ============================================================
 * Share / Prev-Next / Bottom Related（Stage 5.4.4）
 * ------------------------------------------------------------
 * 三个模块的真实DOM/真实业务逻辑全部来自父主题（wpcom_show_poster()、
 * $options['post_shares']、templates/entry-prev-next.php、
 * wpcom_get_related_post()+templates/loop-default.php），本文件只做CSS
 * 覆盖，不新增Wrapper、不重写JS/查询逻辑。断点统一使用kbg-ui3-responsive.css
 * 已确立的四视口体系（PC>=1600 / Laptop 1200-1599 / Tablet 768-1199 /
 * Mobile<=767），不沿用父主题自己的767/991/1239零散断点。
 * ============================================================ */

/* ---- 1. Share Buttons ----
   .kbg-single-share是single-share.php新增的挂载class（同一个真实DOM节点
   上追加，不是新Wrapper），.info-item.share是父主题原始class（保留，供
   父主题CSS选择器兼容，但父主题.entry-bar .info-item.share这类规则因为
   没有.entry-bar祖先不会命中，视觉完全由这里接管）。 */
body.kbg-ui-preview .kbg-single-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--kbg-space-3);
    margin: var(--kbg-space-6) 0 0;
    padding-top: var(--kbg-space-5);
    border-top: 1px solid var(--kbg-border-neutral);
}
body.kbg-ui-preview .kbg-single-share .meta-item {
    display: inline-flex;
    align-items: center;
    gap: var(--kbg-space-2);
    height: 36px;
    padding: 0 var(--kbg-space-4);
    border-radius: var(--kbg-radius-pill);
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    background: var(--kbg-bg-1);
    color: var(--kbg-text-2);
    font-size: var(--kbg-fs-sm);
    text-decoration: none;
    transition: all var(--kbg-duration-fast) var(--kbg-ease);
}
/* 纯图标平台（微信/X等）收窄成圆形，跟带文字的"生成海报"按钮区分 */
body.kbg-ui-preview .kbg-single-share .meta-item:not(.mobile) {
    width: 36px;
    padding: 0;
    justify-content: center;
}
body.kbg-ui-preview .kbg-single-share .meta-item .wi {
    font-size: 16px;
    line-height: 1;
}
body.kbg-ui-preview .kbg-single-share .meta-item:hover {
    transform: translateY(-2px);
    border-color: var(--kbg-gold-2);
    color: var(--kbg-gold-1);
    box-shadow: var(--kbg-shadow-glow-sm);
}
body.kbg-ui-preview .kbg-single-share .meta-item:visited {
    color: var(--kbg-text-2);
}
body.kbg-ui-preview .kbg-single-share .meta-item:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 3px;
}
/* "生成海报"（.mobile/.j-mobile-share）：延续父主题原有设计意图——这是给
   桌面端用户生成二维码海报用手机扫码分享的功能，真机移动端有系统原生
   分享，不需要这个按钮。父主题原用@media(max-width:1239px)隐藏，这里改
   用UI3自己的Tablet/Mobile断点表达同样的产品意图，不沿用父主题断点数值。 */
@media (max-width: 1199px) {
    body.kbg-ui-preview .kbg-single-share .meta-item.mobile {
        display: none;
    }
}

/* ---- 2. Prev/Next ----
   .entry-page-prev/.entry-page-next的背景图由父主题lazyload写成
   background-image（j-lazy+data-original），结构不变，这里只重排布局
   （float改flex）和视觉（暗遮罩/金色hover/文字配色）。 */
body.kbg-ui-preview .entry-page {
    display: flex;
    gap: var(--kbg-space-4);
    margin: var(--kbg-space-8) 0 0;
}
body.kbg-ui-preview .entry-page-prev,
body.kbg-ui-preview .entry-page-next {
    float: none;
    flex: 1 1 50%;
    width: auto;
    min-height: 140px;
    border-radius: var(--kbg-radius-md);
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    transition: border-color var(--kbg-duration) var(--kbg-ease),
                box-shadow var(--kbg-duration) var(--kbg-ease);
}
/* 暗遮罩：父主题::before已经是rgba(0,0,0,.5)纯黑遮罩，这里改成"底部更深
   的渐变+统一透明度"，确保浅色缩略图（比如白底截图类配图）上的白色文字
   依然有稳定对比度，不是简单调高透明度那么粗暴。 */
body.kbg-ui-preview .entry-page-prev:before,
body.kbg-ui-preview .entry-page-next:before {
    background: linear-gradient(180deg, rgba(5, 5, 5, .35) 0%, rgba(5, 5, 5, .85) 100%);
    border-radius: var(--kbg-radius-md);
}
body.kbg-ui-preview .entry-page-prev:hover,
body.kbg-ui-preview .entry-page-next:hover {
    border-color: var(--kbg-gold-2);
    box-shadow: var(--kbg-shadow-glow-sm);
}
body.kbg-ui-preview .entry-page-prev:hover:before,
body.kbg-ui-preview .entry-page-next:hover:before {
    background: linear-gradient(180deg, rgba(5, 5, 5, .25) 0%, rgba(5, 5, 5, .8) 100%);
}
body.kbg-ui-preview .entry-page-nobg:before {
    background-color: var(--kbg-bg-1);
    background-image: none;
}
body.kbg-ui-preview .entry-page-prev a,
body.kbg-ui-preview .entry-page-next a {
    color: var(--kbg-text-1);
}
body.kbg-ui-preview .entry-page-prev a:focus-visible,
body.kbg-ui-preview .entry-page-next a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: -2px;
}
body.kbg-ui-preview .entry-page-prev a span,
body.kbg-ui-preview .entry-page-next a span {
    font-size: var(--kbg-fs-body);
    font-weight: var(--kbg-fw-medium);
    line-height: var(--kbg-lh-heading);
}
body.kbg-ui-preview .entry-page-info {
    color: var(--kbg-text-3);
}
body.kbg-ui-preview .entry-page-info .wi {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview .entry-page-next:hover .entry-page-info .wi,
body.kbg-ui-preview .entry-page-prev:hover .entry-page-info .wi {
    color: var(--kbg-gold-1);
}

/* ---- 3. Bottom Related Posts ----
   Stage 5.5.1修订：卡片DOM已从父主题templates/loop-default.php的.item族
   改为统一News Card组件.kbg-news-card（D-027，全站唯一Card实现），真正的
   卡片视觉规则已挪到kbg-ui3-components.css跟Homepage共用，这里只保留
   Bottom Related场景专属的外层容器（真实wpcom_get_related_post()仍然输出
   <ul class="entry-related ...">，是一个真实<ul>，需要reset list-style/
   margin/padding；kbg-grid-4本身是通用grid工具，不含这个reset）。 */
body.kbg-ui-preview .entry-related-posts {
    margin: var(--kbg-space-8) 0 0;
}
body.kbg-ui-preview .entry-related-title {
    font-size: var(--kbg-fs-h2);
    font-weight: var(--kbg-fw-bold);
    line-height: var(--kbg-lh-heading);
    color: var(--kbg-text-1);
    margin: 0 0 var(--kbg-space-5);
    padding-left: var(--kbg-space-3);
    border-left: 4px solid var(--kbg-gold-1);
}
body.kbg-ui-preview ul.entry-related {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Share/Prev-Next 响应式（Stage 5.4.4，Related部分已并入kbg-grid-4自带的4→2→1响应式，见kbg-ui3-grid.css） ---------- */
@media (max-width: 767px) {
    body.kbg-ui-preview .entry-page {
        flex-direction: column;
    }
    body.kbg-ui-preview .entry-page-prev,
    body.kbg-ui-preview .entry-page-next {
        width: 100%;
        min-height: 120px;
    }
    body.kbg-ui-preview .kbg-single-share {
        gap: var(--kbg-space-2);
    }
}

/* ============================================================
 * Layout：主栏 + 侧栏（Stage 5.4.5）
 * ------------------------------------------------------------
 * 复用kbg-ui3-grid.css已有的.kbg-content-layout/.kbg-main-column/
 * .kbg-sidebar-column通用组件（不新造布局系统，COMPONENT_LIBRARY.md
 * 已登记这套组件供全站复用）。这里只做Single Article专属覆盖：
 *   1. 主栏轨道宽度限定为--kbg-container-narrow（原.kbg-container-narrow
 *      的效果，从"整个容器居中"改为"两栏Grid里的主栏轨道限宽"）。
 *   2. 整个两栏Grid用justify-content:center居中（轨道总宽760+340+24gap=
 *      1124px，小于PC/Laptop容器可用宽度，center让它整体居中而不是贴左
 *      留一大片空白）。
 *   3. Sidebar移动端隐藏沿用父主题原生991px（D-014，不新增UI3断点），这里
 *      只在同一断点把Grid收回单栏，避免.sidebar被display:none后Grid仍
 *      保留一条空Track造成布局错位。
 * ============================================================ */
body.kbg-ui-preview .kbg-single-main .kbg-content-layout {
    grid-template-columns: minmax(0, var(--kbg-container-narrow)) var(--kbg-sidebar-width);
    justify-content: center;
}
@media (max-width: 991px) {
    body.kbg-ui-preview .kbg-single-main .kbg-content-layout {
        grid-template-columns: minmax(0, var(--kbg-container-narrow));
    }
}

/* ============================================================
 * Author Box（Stage 5.4.5）
 * ------------------------------------------------------------
 * 真实DB配置about_author="0"，当前不会渲染（D-012），这里只是把CSS准备
 * 就绪。真实DOM结构来自justnews/templates/entry-author.php源码核对
 * （非猜测），跟Sidebar的Profile Widget共享"头像+简介"的视觉语言，保持
 * 品牌一致（Design Review组件一致性要求）。
 * ============================================================ */
body.kbg-ui-preview .entry-author {
    margin: var(--kbg-space-8) 0 0;
    padding: var(--kbg-space-6);
    background: var(--kbg-card-bg);
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    border-radius: var(--kbg-radius-md);
}
body.kbg-ui-preview .entry-author-title {
    font-size: var(--kbg-fs-h3);
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-1);
    margin: 0 0 var(--kbg-space-5);
    padding-left: var(--kbg-space-3);
    border-left: 3px solid var(--kbg-gold-1);
}
body.kbg-ui-preview .entry-author-inner {
    display: flex;
    gap: var(--kbg-space-5);
    align-items: flex-start;
}
body.kbg-ui-preview .entry-author-avatar img {
    width: 72px;
    height: 72px;
    border-radius: var(--kbg-radius-circle);
    display: block;
}
body.kbg-ui-preview .entry-author-content {
    flex: 1;
    min-width: 0;
}
body.kbg-ui-preview .entry-author-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kbg-space-3);
    margin-bottom: var(--kbg-space-2);
}
body.kbg-ui-preview .entry-author-name a {
    font-size: var(--kbg-fs-body);
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-1);
    text-decoration: none;
}
body.kbg-ui-preview .entry-author-name a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .entry-author-name a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview .entry-author-description {
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-3);
    margin: 0 0 var(--kbg-space-3);
}
/* 真实DOM核查（用运行时内存Filter渲染真实HTML片段核实，未写数据库，见
   RUNTIME.md）：wpcom-member插件真实激活时，.entry-author-action会输出
   关注/私信按钮，.entry-author-stats会输出文章/评论/粉丝三项统计——跟
   Sidebar Profile Widget的同类元素共用同一套视觉语言（Design Review
   组件一致性要求），不重新设计一套按钮/统计样式。 */
body.kbg-ui-preview .entry-author-action .btn-follow,
body.kbg-ui-preview .entry-author-action .btn-message {
    display: inline-flex;
    align-items: center;
    gap: var(--kbg-space-1);
    background: transparent;
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    border-radius: var(--kbg-radius-pill);
    color: var(--kbg-text-2);
    font-size: var(--kbg-fs-xs);
    padding: var(--kbg-space-1) var(--kbg-space-3);
    margin-left: var(--kbg-space-2);
    cursor: pointer;
    transition: all var(--kbg-duration-fast) var(--kbg-ease);
}
body.kbg-ui-preview .entry-author-action .btn-follow:hover,
body.kbg-ui-preview .entry-author-action .btn-message:hover {
    border-color: var(--kbg-gold-2);
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .entry-author-action .btn-follow:focus-visible,
body.kbg-ui-preview .entry-author-action .btn-message:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview .entry-author-stats {
    display: flex;
    gap: var(--kbg-space-5);
    margin-bottom: var(--kbg-space-3);
}
body.kbg-ui-preview .entry-author-stats .user-stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.kbg-ui-preview .entry-author-stats .user-stats-item b {
    font-size: var(--kbg-fs-body);
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .entry-author-stats .user-stats-item span {
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
}
@media (max-width: 767px) {
    body.kbg-ui-preview .entry-author {
        padding: var(--kbg-space-5);
    }
    body.kbg-ui-preview .entry-author-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    body.kbg-ui-preview .entry-author-info {
        flex-direction: column;
        gap: var(--kbg-space-2);
    }
    body.kbg-ui-preview .entry-author-stats {
        justify-content: center;
    }
}

/* ============================================================
 * Comments（Stage 5.4.5）
 * ------------------------------------------------------------
 * 真实DOM来自justnews/comments.php + WPCOM_Walker_Comment源码核对。
 * Pingback已通过functions.php里的Filter在数据层过滤掉（D-013），这里
 * 只需要覆盖"真人评论"场景的视觉，不需要额外写"区分Pingback样式"的CSS
 * （因为Pingback已经不会出现在DOM里）。
 * ============================================================ */
body.kbg-ui-preview .entry-comments {
    margin: var(--kbg-space-8) 0 0;
}
body.kbg-ui-preview .comment-reply-title,
body.kbg-ui-preview .comments-title {
    font-size: var(--kbg-fs-h2);
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-1);
    margin: 0 0 var(--kbg-space-5);
    padding-left: var(--kbg-space-3);
    border-left: 4px solid var(--kbg-gold-1);
}
body.kbg-ui-preview .comment-reply-title small a {
    color: var(--kbg-text-3);
}

/* ---- 评论表单 ---- */
body.kbg-ui-preview .comment-form {
    background: var(--kbg-card-bg);
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    border-radius: var(--kbg-radius-md);
    padding: var(--kbg-space-5);
    margin-bottom: var(--kbg-space-6);
}
body.kbg-ui-preview .comment-form-author,
body.kbg-ui-preview .comment-form-email,
body.kbg-ui-preview .comment-form-url {
    margin-bottom: var(--kbg-space-3);
}
body.kbg-ui-preview .comment-form label {
    display: block;
    font-size: var(--kbg-fs-sm);
    color: var(--kbg-text-3);
    margin-bottom: var(--kbg-space-1);
}
body.kbg-ui-preview .comment-form input[type="text"],
body.kbg-ui-preview .comment-form-comment textarea {
    width: 100%;
    background: var(--kbg-bg-0);
    border: var(--kbg-border-width) solid var(--kbg-border-neutral);
    border-radius: var(--kbg-radius-xs);
    color: var(--kbg-text-1);
    font-size: var(--kbg-fs-body);
    padding: var(--kbg-space-2) var(--kbg-space-3);
}
body.kbg-ui-preview .comment-form input[type="text"]:focus-visible,
body.kbg-ui-preview .comment-form-comment textarea:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 1px;
    border-color: var(--kbg-gold-2);
}
body.kbg-ui-preview .comment-form-comment textarea {
    resize: vertical;
    min-height: 100px;
}
body.kbg-ui-preview .comment-must-login {
    color: var(--kbg-text-2);
    margin-bottom: var(--kbg-space-3);
}
body.kbg-ui-preview .comment-must-login a {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview .form-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kbg-space-3);
    flex-wrap: wrap;
}
body.kbg-ui-preview .form-submit-text {
    display: flex;
    align-items: center;
    gap: var(--kbg-space-2);
    font-size: var(--kbg-fs-sm);
    color: var(--kbg-text-3);
}
body.kbg-ui-preview .form-submit-text img {
    border-radius: var(--kbg-radius-circle);
}
body.kbg-ui-preview .comment-form .submit,
body.kbg-ui-preview #must-submit {
    background: var(--kbg-gold-1);
    color: var(--kbg-text-on-gold);
    border: none;
    border-radius: var(--kbg-radius-pill);
    padding: var(--kbg-space-2) var(--kbg-space-5);
    font-size: var(--kbg-fs-sm);
    font-weight: var(--kbg-fw-bold);
    cursor: pointer;
    transition: all var(--kbg-duration-fast) var(--kbg-ease);
}
body.kbg-ui-preview .comment-form .submit:hover,
body.kbg-ui-preview #must-submit:hover {
    background: var(--kbg-gold-2);
    transform: translateY(-1px);
}
body.kbg-ui-preview .comment-form .submit:focus-visible,
body.kbg-ui-preview #must-submit:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}

/* ---- 评论列表 ---- */
body.kbg-ui-preview .comments-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.kbg-ui-preview .comments-list .comment-children {
    list-style: none;
    margin: var(--kbg-space-4) 0 0 var(--kbg-space-8);
    padding: 0;
}
body.kbg-ui-preview .comment-inner {
    display: flex;
    gap: var(--kbg-space-4);
    padding: var(--kbg-space-5) 0;
    border-bottom: var(--kbg-border-width) solid var(--kbg-border-neutral);
}
body.kbg-ui-preview .comment-author img {
    width: 44px;
    height: 44px;
    border-radius: var(--kbg-radius-circle);
    display: block;
}
body.kbg-ui-preview .comment-body {
    flex: 1;
    min-width: 0;
}
body.kbg-ui-preview .comment-body .nickname {
    display: flex;
    align-items: baseline;
    gap: var(--kbg-space-2);
    font-size: var(--kbg-fs-body);
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-1);
    margin-bottom: var(--kbg-space-1);
}
body.kbg-ui-preview .comment-body .nickname a {
    color: var(--kbg-text-1);
    text-decoration: none;
}
body.kbg-ui-preview .comment-body .nickname a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .comment-time {
    font-size: var(--kbg-fs-xs);
    font-weight: var(--kbg-fw-regular);
    color: var(--kbg-text-3);
}
body.kbg-ui-preview .comment-text {
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-2);
}
body.kbg-ui-preview .comment-text-reply a {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview .comment-awaiting-moderation {
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-warning);
    margin-bottom: var(--kbg-space-2);
}
body.kbg-ui-preview .reply {
    margin-top: var(--kbg-space-2);
}
body.kbg-ui-preview .reply a,
body.kbg-ui-preview .comment-reply-link {
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
    text-decoration: none;
}
body.kbg-ui-preview .reply a:hover,
body.kbg-ui-preview .comment-reply-link:hover {
    color: var(--kbg-gold-2);
}
body.kbg-ui-preview .reply a:focus-visible,
body.kbg-ui-preview .comment-reply-link:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}

/* ---- 评论分页 ----
   Stage 5.4.6：Comments分页样式已升级为全站A类组件，改由
   kbg-ui3-components.css里的ul.pagination统一覆盖（Runtime Owner核实
   Comments/Archive/Category/Search三处真实共享同一份DOM结构，见
   RUNTIME.md §3.11），此处Stage 5.4.5的局部样式正式移除，避免同一元素
   被两份规则重复声明。这是Stage 5.4.6明确批准的范围内重构，不是擅自
   改动已Freeze内容。 */

@media (max-width: 767px) {
    body.kbg-ui-preview .comment-inner {
        gap: var(--kbg-space-3);
    }
    body.kbg-ui-preview .comment-author img {
        width: 36px;
        height: 36px;
    }
    body.kbg-ui-preview .comments-list .comment-children {
        margin-left: var(--kbg-space-4);
    }
    body.kbg-ui-preview .form-submit {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ============================================================
 * Sidebar（Stage 5.4.5）
 * ------------------------------------------------------------
 * 真实DOM来自三个真实挂载的Widget（sidebars_widgets真实值，见RUNTIME.md）：
 * widget_profile（当前文章作者信息，上下文相关）/ widget_post_thumb（最新
 * 文章）/ widget_lastest_products（行业动态，图文两栏，非WooCommerce）。
 * 移动端隐藏沿用父主题原生@media(max-width:991px){.sidebar{display:none}}
 * （D-014），这里不重复声明。
 * ============================================================ */
body.kbg-ui-preview aside.sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--kbg-space-6);
}
body.kbg-ui-preview aside.sidebar .widget {
    background: var(--kbg-card-bg);
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    border-radius: var(--kbg-radius-md);
    padding: var(--kbg-space-5);
}
body.kbg-ui-preview aside.sidebar .widget-title {
    font-size: var(--kbg-fs-h3);
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-1);
    margin: 0 0 var(--kbg-space-4);
    padding-left: var(--kbg-space-2);
    border-left: 3px solid var(--kbg-gold-1);
}

/* ---- Widget: 作者信息（widget_profile） ---- */
body.kbg-ui-preview .widget_profile {
    text-align: center;
    padding-top: 0;
    overflow: hidden;
}
body.kbg-ui-preview .widget_profile .profile-cover {
    margin: 0 calc(var(--kbg-space-5) * -1) var(--kbg-space-3);
    aspect-ratio: 3 / 1;
    overflow: hidden;
    background: var(--kbg-bg-1);
}
body.kbg-ui-preview .widget_profile .profile-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.kbg-ui-preview .widget_profile .avatar-wrap {
    margin-top: calc(var(--kbg-space-8) * -1);
}
body.kbg-ui-preview .widget_profile .avatar-wrap img {
    width: 72px;
    height: 72px;
    border-radius: var(--kbg-radius-circle);
    border: 3px solid var(--kbg-bg-1);
}
body.kbg-ui-preview .widget_profile .profile-name {
    display: block;
    margin-top: var(--kbg-space-3);
    font-size: var(--kbg-fs-body);
    font-weight: var(--kbg-fw-bold);
    color: var(--kbg-text-1);
    text-decoration: none;
}
body.kbg-ui-preview .widget_profile .profile-name:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .widget_profile .author-description {
    font-size: var(--kbg-fs-xs);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-3);
    margin: var(--kbg-space-2) 0;
}
body.kbg-ui-preview .widget_profile .profile-stats-inner {
    display: flex;
    justify-content: center;
    gap: var(--kbg-space-5);
    margin: var(--kbg-space-3) 0;
}
body.kbg-ui-preview .widget_profile .user-stats-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
body.kbg-ui-preview .widget_profile .user-stats-item b {
    font-size: var(--kbg-fs-body);
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .widget_profile .user-stats-item span {
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
}
body.kbg-ui-preview .widget_profile .btn-follow,
body.kbg-ui-preview .widget_profile .btn-message {
    display: inline-flex;
    align-items: center;
    gap: var(--kbg-space-1);
    background: transparent;
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    border-radius: var(--kbg-radius-pill);
    color: var(--kbg-text-2);
    font-size: var(--kbg-fs-xs);
    padding: var(--kbg-space-1) var(--kbg-space-3);
    margin: 0 var(--kbg-space-1);
    cursor: pointer;
    transition: all var(--kbg-duration-fast) var(--kbg-ease);
}
body.kbg-ui-preview .widget_profile .btn-follow:hover,
body.kbg-ui-preview .widget_profile .btn-message:hover {
    border-color: var(--kbg-gold-2);
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .widget_profile .btn-follow:focus-visible,
body.kbg-ui-preview .widget_profile .btn-message:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview .widget_profile .profile-posts {
    text-align: left;
    margin-top: var(--kbg-space-4);
    padding-top: var(--kbg-space-4);
    border-top: var(--kbg-border-width) solid var(--kbg-border-neutral);
}
body.kbg-ui-preview .widget_profile .profile-posts ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.kbg-ui-preview .widget_profile .profile-posts li {
    margin-bottom: var(--kbg-space-2);
}
body.kbg-ui-preview .widget_profile .profile-posts a {
    font-size: var(--kbg-fs-sm);
    color: var(--kbg-text-2);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.kbg-ui-preview .widget_profile .profile-posts a:hover {
    color: var(--kbg-gold-1);
}

/* ---- Widget: 最新文章（widget_post_thumb） ---- */
body.kbg-ui-preview .widget_post_thumb ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body.kbg-ui-preview .widget_post_thumb .item {
    display: flex;
    gap: var(--kbg-space-3);
    margin-bottom: var(--kbg-space-4);
}
body.kbg-ui-preview .widget_post_thumb .item:last-child {
    margin-bottom: 0;
}
body.kbg-ui-preview .widget_post_thumb .item-img {
    flex-shrink: 0;
    width: 80px;
    aspect-ratio: 16 / 10;
    border-radius: var(--kbg-radius-xs);
    overflow: hidden;
    background: var(--kbg-bg-1);
}
body.kbg-ui-preview .widget_post_thumb .item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.kbg-ui-preview .widget_post_thumb .item-content {
    min-width: 0;
}
body.kbg-ui-preview .widget_post_thumb .item-title a {
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-heading);
    color: var(--kbg-text-1);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.kbg-ui-preview .widget_post_thumb .item-title a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .widget_post_thumb .item-date {
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
    margin: var(--kbg-space-1) 0 0;
}

/* ---- Widget: 行业动态（widget_lastest_products，两栏图文，非WooCommerce） ---- */
body.kbg-ui-preview .widget_lastest_products .p-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--kbg-space-3);
    list-style: none;
    margin: 0;
    padding: 0;
}
body.kbg-ui-preview .widget_lastest_products .p-item-wrap .thumb {
    display: block;
    aspect-ratio: 16 / 10;
    border-radius: var(--kbg-radius-xs);
    overflow: hidden;
    background: var(--kbg-bg-1);
}
body.kbg-ui-preview .widget_lastest_products .p-item-wrap .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.kbg-ui-preview .widget_lastest_products .p-item-wrap .title {
    margin: var(--kbg-space-2) 0 0;
}
body.kbg-ui-preview .widget_lastest_products .p-item-wrap .title a {
    font-size: var(--kbg-fs-xs);
    line-height: var(--kbg-lh-heading);
    color: var(--kbg-text-2);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.kbg-ui-preview .widget_lastest_products .p-item-wrap .title a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview aside.sidebar a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}

@media (max-width: 1199px) and (min-width: 992px) {
    body.kbg-ui-preview .widget_lastest_products .p-list {
        grid-template-columns: 1fr;
    }
}