/**
 * KBG UI 3.0 —— 基础组件（阶段一：Button / Tag / Badge / 基础Card /
 * Section Title / Sidebar模块标题）
 *
 * 只允许引用 kbg-ui3-tokens.css 声明的变量，不写死任何色值/px（断点数字、
 * 以及rgba透明衍生值、Telegram/金融/状态色这类Design System明确批准的
 * 例外除外）。业务组件（News Card/Exchange Card等）不在本阶段范围内。
 *
 * 2026-07-22 Remediation修订：
 *   1. --kbg-radius/--kbg-radius-sm/--kbg-orange/--kbg-text 四个token改名
 *      （见kbg-ui3-tokens.css），本文件全部引用已同步替换。
 *   2. 新增 :focus-visible 状态（Button/Chip），键盘Tab导航时有明确可见的
 *      焦点环，跟hover的光晕语义区分开，统一用金色系，不因按钮变体
 *      （含Danger）切换颜色，保持"这是焦点指示"这一个信号的一致性。
 *   3. #1a1200/#fff 硬编码色值替换为 var(--kbg-text-on-gold)/
 *      var(--kbg-text-inverse)。
 *   4. font-weight:700 硬编码替换为 var(--kbg-fw-bold)。
 *   5. Section Title/Sidebar Title 补充 line-height:var(--kbg-lh-heading)。
 *   6. Filter Chip 在预览DOM里改用真实<button>标签（原来是<span>，不可
 *      聚焦，focus-visible无从谈起），这里补上button元素的默认样式重置。
 */

/* ---------- Button ---------- */
body.kbg-ui-preview .kbg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--kbg-space-2);
    font-family: var(--kbg-font-cn);
    font-size: var(--kbg-fs-sm);
    font-weight: var(--kbg-fw-bold);
    border-radius: var(--kbg-radius-md);
    padding: var(--kbg-space-3) var(--kbg-space-5);
    cursor: pointer;
    border: var(--kbg-border-width) solid transparent;
    transition: box-shadow var(--kbg-duration) var(--kbg-ease),
                transform var(--kbg-duration-fast) var(--kbg-ease),
                border-color var(--kbg-duration) var(--kbg-ease),
                color var(--kbg-duration) var(--kbg-ease);
    text-decoration: none;
}
body.kbg-ui-preview .kbg-btn-sm {
    padding: var(--kbg-space-2) var(--kbg-space-4);
    font-size: var(--kbg-fs-xs);
}
/* 键盘焦点：鼠标点击不常驻显示（:focus-visible天然只在键盘/程序化聚焦时
   触发），跟hover的光晕视觉区分——用outline而不是box-shadow，语义更明确 */
body.kbg-ui-preview .kbg-btn:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 3px;
}

/* Primary：金色渐变底 + 深棕文字，主要操作 */
body.kbg-ui-preview .kbg-btn-primary {
    background: linear-gradient(135deg, var(--kbg-gold-1), var(--kbg-gold-2));
    color: var(--kbg-text-on-gold);
    box-shadow: var(--kbg-shadow-glow-md);
}
body.kbg-ui-preview .kbg-btn-primary:hover {
    box-shadow: 0 6px 22px rgba(255, 138, 0, .3);
}
body.kbg-ui-preview .kbg-btn-primary:active {
    transform: scale(.97);
}

/* Ghost：金边透明底，次要操作 */
body.kbg-ui-preview .kbg-btn-ghost {
    background: transparent;
    border-color: var(--kbg-gold-2);
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .kbg-btn-ghost:hover {
    border-color: var(--kbg-gold-1);
    box-shadow: var(--kbg-shadow-glow-sm);
}

/* Danger：错误色描边，仅用于举报/删除类操作，不用大面积实心 */
body.kbg-ui-preview .kbg-btn-danger {
    background: transparent;
    border-color: var(--kbg-error);
    color: var(--kbg-error);
}
body.kbg-ui-preview .kbg-btn-danger:hover {
    background: rgba(255, 77, 79, .08);
}

/* disabled：source order排在hover/active规则之后，同等特异性下靠顺序覆盖，
   确保disabled态不会被hover/active的box-shadow/transform反覆盖 */
body.kbg-ui-preview .kbg-btn:disabled,
body.kbg-ui-preview .kbg-btn.is-disabled {
    opacity: .4;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
body.kbg-ui-preview .kbg-btn:disabled:focus-visible,
body.kbg-ui-preview .kbg-btn.is-disabled:focus-visible {
    outline: none;
}

/* ---------- Tag（分类角标，非交互，用于图片角标） ---------- */
body.kbg-ui-preview .kbg-tag {
    display: inline-block;
    font-size: var(--kbg-fs-xs);
    font-weight: var(--kbg-fw-bold);
    padding: 3px var(--kbg-space-3);
    border-radius: var(--kbg-radius-xs);
    background: var(--kbg-gold-1);
    color: var(--kbg-text-on-gold);
}
/* 次金变体：Guide Card等弱化紧迫感场景使用，见Component Library第十三章 */
body.kbg-ui-preview .kbg-tag-sub {
    background: var(--kbg-gold-2);
}
/* 警示变体：Exposure Card角标使用 */
body.kbg-ui-preview .kbg-tag-alert {
    background: var(--kbg-accent-orange);
}

/* ---------- Filter Chip（交互式筛选，药丸形，真实<button>元素） ---------- */
body.kbg-ui-preview .kbg-chip {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    font-size: var(--kbg-fs-sm);
    padding: var(--kbg-space-2) var(--kbg-space-4);
    border-radius: var(--kbg-radius-pill);
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    color: var(--kbg-text-2);
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: all var(--kbg-duration-fast) var(--kbg-ease);
}
body.kbg-ui-preview .kbg-chip:hover {
    transform: translateY(-2px);
    border-color: var(--kbg-gold-2);
    box-shadow: var(--kbg-shadow-glow-sm);
}
body.kbg-ui-preview .kbg-chip:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 3px;
}
body.kbg-ui-preview .kbg-chip.is-active {
    background: var(--kbg-gold-1);
    color: var(--kbg-text-on-gold);
    border-color: transparent;
    box-shadow: var(--kbg-shadow-glow-sm);
}

/* ---------- Badge（数字/状态小圆点） ---------- */
body.kbg-ui-preview .kbg-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--kbg-radius-circle);
    font-size: 11px;
    font-weight: var(--kbg-fw-bold);
    line-height: 1; /* 圆形徽章内数字垂直居中用，不是文本阅读行高，不套用lh token */
}
/* 紧急态：红底白字，用于强提醒 */
body.kbg-ui-preview .kbg-badge-urgent {
    background: var(--kbg-error);
    color: var(--kbg-text-inverse);
}
/* 常规态：金底深棕字，用于普通新内容提示——跟紧急态语义不同，不能都用金色 */
body.kbg-ui-preview .kbg-badge-default {
    background: var(--kbg-gold-2);
    color: var(--kbg-text-on-gold);
}

/* ---------- 基础Card ---------- */
body.kbg-ui-preview .kbg-card {
    background: var(--kbg-card-bg);
    border: var(--kbg-border-width) solid var(--kbg-border-gold);
    border-radius: var(--kbg-radius-md);
    box-shadow: var(--kbg-shadow-card);
    transition: transform var(--kbg-duration) var(--kbg-ease),
                box-shadow var(--kbg-duration) var(--kbg-ease),
                border-color var(--kbg-duration) var(--kbg-ease);
}
body.kbg-ui-preview .kbg-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kbg-shadow-deep), var(--kbg-shadow-glow-md);
    border-color: var(--kbg-gold-2);
}
body.kbg-ui-preview .kbg-card-lg {
    border-radius: var(--kbg-radius-lg);
}
body.kbg-ui-preview .kbg-card-body {
    padding: var(--kbg-space-5);
}

/* ============================================================
 * News Card（Stage 5.5.1，全站唯一新闻卡片组件，D-027）
 * ------------------------------------------------------------
 * 用法：外层元素挂`.kbg-card.kbg-card-body.kbg-news-card`（可选
 * `.kbg-news-card--featured`/`.kbg-news-card--no-thumb`修饰符），内部固定
 * 输出`.kbg-news-card-media`(图+角标)+`.kbg-news-card-body`(标题/摘要/meta)。
 * Homepage（首页焦点新闻/最新资讯）、Bottom Related（Single Article）
 * 共用同一套规则，未来Category/Tag/Topic等Archive卡片直接复用，不得
 * 另建第二套。
 *
 * 以下几处修复继承自Stage 5.4.4 Bottom Related对父主题.item族DOM的真实
 * Chrome核查结果——虽然DOM class已经换了，但视觉问题的根因（图片链接默认
 * display:inline导致百分比宽高塌缩、绝对定位角标top未显式声明导致被撑成
 * 色块）在新DOM下用同样的CSS属性处理，不是巧合，是同一套底层问题的
 * 通用解法。
 * ============================================================ */
body.kbg-ui-preview .kbg-news-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
body.kbg-ui-preview .kbg-news-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--kbg-bg-1);
}
/* 图片外层<a>默认display:inline，百分比宽高<img>拿不到正确包含块会塌缩 */
body.kbg-ui-preview .kbg-news-card-img-link {
    display: block;
    width: 100%;
    height: 100%;
}
body.kbg-ui-preview .kbg-news-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.kbg-ui-preview .kbg-news-card-tag {
    position: absolute;
    top: auto; /* 显式声明，防止父主题/其它规则的top残留把绝对定位角标撑成大色块 */
    left: var(--kbg-space-3);
    bottom: var(--kbg-space-3);
    max-width: calc(100% - var(--kbg-space-3) * 2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}
/* 无缩略图时角标改为内嵌在卡片正文顶部（.kbg-news-card-tag--inline），
   跟悬浮在图片上的角标是两种真实存在的布局场景，不能共用绝对定位规则 */
body.kbg-ui-preview .kbg-news-card-tag--inline {
    position: static;
    align-self: flex-start;
    margin-bottom: var(--kbg-space-2);
}
body.kbg-ui-preview .kbg-news-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--kbg-space-4);
}
body.kbg-ui-preview .kbg-news-card-title {
    margin: 0 0 var(--kbg-space-2);
    font-size: var(--kbg-fs-body);
    line-height: var(--kbg-lh-heading);
}
body.kbg-ui-preview .kbg-news-card-title a {
    color: var(--kbg-text-1);
    text-decoration: none;
}
body.kbg-ui-preview .kbg-news-card-title a:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview .kbg-news-card-title a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
}
body.kbg-ui-preview .kbg-news-card-excerpt {
    flex: 1;
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-body);
    color: var(--kbg-text-3);
    margin: 0 0 var(--kbg-space-3);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.kbg-ui-preview .kbg-news-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kbg-space-1) var(--kbg-space-3);
    font-size: var(--kbg-fs-xs);
    color: var(--kbg-text-3);
    margin-top: auto;
}
body.kbg-ui-preview .kbg-news-card-author {
    display: flex;
    align-items: center;
    gap: var(--kbg-space-2);
    flex: 1 0 100%;
    color: var(--kbg-text-2);
    text-decoration: none;
}
body.kbg-ui-preview .kbg-news-card-author img {
    width: 20px;
    height: 20px;
    border-radius: var(--kbg-radius-circle);
    flex-shrink: 0;
}
body.kbg-ui-preview .kbg-news-card-date {
    white-space: nowrap;
}

/* ---------- Featured变体：首页主头条，大图+H3 ---------- */
body.kbg-ui-preview .kbg-news-card--featured {
    flex-direction: row;
}
body.kbg-ui-preview .kbg-news-card--featured .kbg-news-card-media {
    width: 45%;
    aspect-ratio: 16 / 11;
    flex-shrink: 0;
}
body.kbg-ui-preview .kbg-news-card--featured .kbg-news-card-title {
    font-size: var(--kbg-fs-h3);
}
body.kbg-ui-preview .kbg-news-card--featured .kbg-news-card-excerpt {
    -webkit-line-clamp: 4;
}

/* ---------- 无图状态：.kbg-news-card-media整段不存在 ---------- */
body.kbg-ui-preview .kbg-news-card--no-thumb .kbg-news-card-body {
    padding-top: var(--kbg-space-5);
}

/* ---------- 空态占位（首页"暂无精选内容"/"暂无最新资讯"，Stage 5.5.1从内联style改用class） ---------- */
body.kbg-ui-preview .kbg-news-card-empty {
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--kbg-text-3);
    font-size: var(--kbg-fs-sm);
}
body.kbg-ui-preview .kbg-news-card-empty--sm {
    min-height: 140px;
    font-size: var(--kbg-fs-xs);
}

@media (max-width: 767px) {
    body.kbg-ui-preview .kbg-news-card--featured {
        flex-direction: column;
    }
    body.kbg-ui-preview .kbg-news-card--featured .kbg-news-card-media {
        width: 100%;
        aspect-ratio: 16 / 10;
    }
    /* v1.0.1 Hotfix：真实Playwright测量线上首页"最新资讯"卡片，标题/图片/
       meta三处高度在同批文章间完全一致（40.5px/192.5px/41.14px），唯独
       .kbg-news-card-excerpt相差22px（44.19px vs 66.28px）——根因是
       -webkit-line-clamp:3只限制"最多3行"，不是固定高度，实际换行数
       2行还是3行取决于每篇文章摘要真实内容长度。用min-height把摘要区域
       锁定在"3行"应有的高度，短摘要底部留白，不再影响卡片整体高度。 */
    body.kbg-ui-preview .kbg-news-card-excerpt {
        min-height: calc(var(--kbg-lh-body) * 3em);
    }
    /* v1.0.1 Hotfix：代码核查发现的真实缺口——.kbg-news-card--no-thumb
       在无缩略图时整段跳过.kbg-news-card-media（见news-card.php:77-86），
       比有缩略图的卡片矮一个图片区块。当前线上文章样本恰好全部带图，
       尚未真实触发，但只要出现一篇无图文章就会立刻在移动端单列列表里
       变矮一截。用::before补一个等比例占位块，保持有图/无图两种卡片
       高度一致，不需要改PHP模板。 */
    body.kbg-ui-preview .kbg-news-card--no-thumb::before {
        content: "";
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        background: var(--kbg-bg-1);
    }
}

/* ============================================================
 * Empty State（Stage 5.5.1基础组件，D-030）
 * ------------------------------------------------------------
 * 用途：Archive主循环无文章时的占位（Category/Tag/Topic等Stage 5.5.2/5.5.3
 * 落地时使用）。真实要求：只覆盖`.kbg-main-column`范围，`.kbg-sidebar-column`
 * 必须保持正常渲染（Stage 5.5 Discovery真实Playwright核实过，空Category
 * 页面Sidebar"最新/热门"widget仍有真实内容，不能因主循环空而连带影响
 * Sidebar）——本组件不对Sidebar做任何假设/覆盖，只负责主栏内部的占位视觉，
 * 天然满足这条要求（`.kbg-content-layout`两栏Grid本身就是各自独立的
 * DOM分支，见Stage 5.4.5）。
 * ============================================================ */
body.kbg-ui-preview .kbg-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--kbg-space-16) 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);
    color: var(--kbg-text-3);
}
body.kbg-ui-preview .kbg-empty-state-icon {
    width: 64px;
    height: 64px;
    margin-bottom: var(--kbg-space-4);
    opacity: .6;
}
body.kbg-ui-preview .kbg-empty-state-text {
    font-size: var(--kbg-fs-sm);
    line-height: var(--kbg-lh-body);
    max-width: 320px;
}

/* ---------- Section Title（分区标题，首页/侧栏/分类页通用） ---------- */
body.kbg-ui-preview .kbg-section-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-4);
    padding-left: var(--kbg-space-3);
    border-left: 4px solid var(--kbg-gold-1);
}

/* ---------- Sidebar模块标题（比Section Title小一级，用于侧栏内部子模块） ---------- */
body.kbg-ui-preview .kbg-sidebar-title {
    font-size: var(--kbg-fs-h3);
    font-weight: var(--kbg-fw-bold);
    line-height: var(--kbg-lh-heading);
    color: var(--kbg-text-1);
    margin: 0 0 var(--kbg-space-3);
    padding-left: var(--kbg-space-2);
    border-left: 3px solid var(--kbg-gold-1);
}

/* ============================================================
 * Pagination（Stage 5.4.6，全站A类组件）
 * ------------------------------------------------------------
 * Runtime Owner真实核查（RUNTIME.md §3.11）：Category/Tag/Archive/Topic/
 * City/Country/Search 用 wpcom_pagination()，Comments 用
 * wpcom_comments_pagination()——两个函数各自独立，但真实输出的DOM结构
 * 完全一致：<ul class="pagination"><li class="disabled">/<li class="prev">/
 * <li class="active">/裸<li>/<li class="next">/<li class="pagination-go">。
 * 这里直接接管这个真实共享class，不新造.kbg-pagination包装（没有任何一处
 * 真实PHP输出会加这个新class，包装了也没用）——"A类通用组件"体现在"一套
 * 规则覆盖全部真实调用点"，不是体现在挂一个新class上。
 *
 * 不改分页URL、不改查询逻辑、不改wpcom_pagination()/wpcom_comments_
 * pagination()/paginate_links()，纯CSS覆盖真实DOM。
 *
 * 真实验证：Comments分页在当前生产配置（page_comments选项关闭）下永远
 * 不会真实渲染；Archive/Category/Search共享同一份手写分页算法，真实核实
 * 过该算法不产生省略号（"..."），只有Comments依赖的WP核心paginate_links()
 * 原生支持省略号但因上述开关关闭而不可能真实触发——省略号规则是防御性
 * 编写，未经真实样本验证，如实记录在Verification Report。
 * ============================================================ */
body.kbg-ui-preview ul.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kbg-space-2);
    list-style: none;
    margin: var(--kbg-space-6) 0 0;
    padding: 0;
}
/* Stage 5.4.7真实发现：justnews/comments.php把wpcom_comments_pagination()
   无条件包在<ul class="pagination">里，但函数内部只在真的有多页时才输出
   <li>——评论数不足一页时（当前站内真实情况，见RUNTIME.md §3.11）会留下
   一个"空"<ul>（真实DOM核实：不是完全无内容，PHP模板缩进产生了一个纯
   空白文本子节点，标准:empty选择器要求零子节点，连空白文本节点都会让
   :empty判定失败，实测验证过:empty在这里确实不生效）。真实核实过父主题
   自己未修改的生产页面同样有这个空容器，是父主题既有问题，不能改
   comments.php源码。这里改用:has()判断"内部有没有真正的<li>"，不受
   空白文本节点干扰，纯CSS隐藏，不改变任何PHP输出。 */
body.kbg-ui-preview ul.pagination:not(:has(li)) {
    display: none;
    margin: 0;
}
body.kbg-ui-preview ul.pagination > li {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 var(--kbg-space-2);
    border-radius: var(--kbg-radius-xs);
    background: var(--kbg-card-bg);
    border: var(--kbg-border-width) solid var(--kbg-border-neutral);
    color: var(--kbg-text-2);
    font-size: var(--kbg-fs-sm);
    transition: all var(--kbg-duration-fast) var(--kbg-ease);
}
body.kbg-ui-preview ul.pagination > li > a,
body.kbg-ui-preview ul.pagination > li > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}
body.kbg-ui-preview ul.pagination > li:not(.disabled):not(.active):not(.pagination-go):hover {
    border-color: var(--kbg-gold-2);
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview ul.pagination > li > a:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 2px;
    border-radius: var(--kbg-radius-xs);
}
/* 当前页 */
body.kbg-ui-preview ul.pagination > li.active {
    background: var(--kbg-gold-1);
    border-color: var(--kbg-gold-1);
    color: var(--kbg-text-on-gold);
    font-weight: var(--kbg-fw-bold);
}
/* "X / Y"页码指示——非交互，视觉弱化 */
body.kbg-ui-preview ul.pagination > li.disabled {
    background: transparent;
    border-color: transparent;
    color: var(--kbg-text-3);
    font-size: var(--kbg-fs-xs);
    cursor: default;
    min-width: auto;
    padding: 0 var(--kbg-space-1);
}
/* Prev/Next——真实DOM是空<a>标签（无文字/图标内容），沿用父主题真实在用
   的iconbg图标字体+content伪元素方案（父主题字体资源本身仍在加载，不是
   新引入依赖），只重新上色/调尺寸，不改字形来源。 */
body.kbg-ui-preview ul.pagination > li.prev > a,
body.kbg-ui-preview ul.pagination > li.next > a {
    position: relative;
}
body.kbg-ui-preview ul.pagination > li.next > a::after,
body.kbg-ui-preview ul.pagination > li.prev > a::before {
    content: "\e64d";
    font-family: iconbg;
    font-size: 13px;
    display: block;
}
body.kbg-ui-preview ul.pagination > li.prev > a::before {
    transform: rotate(180deg);
}
/* 省略号（防御性支持，WP核心paginate_links()原生class，当前无法用真实
   样本验证，见RUNTIME.md §3.11） */
body.kbg-ui-preview ul.pagination > li .dots,
body.kbg-ui-preview ul.pagination > li.dots {
    background: transparent;
    border-color: transparent;
    color: var(--kbg-text-3);
    cursor: default;
}
/* "跳转到第N页"表单——真实功能表单，GET提交，name="paged"，不改提交逻辑 */
body.kbg-ui-preview ul.pagination .pagination-go {
    background: transparent;
    border: none;
    padding: 0;
    min-width: auto;
}
body.kbg-ui-preview ul.pagination .pagination-go form {
    position: relative;
    display: flex;
}
body.kbg-ui-preview ul.pagination .pgo-input {
    width: 64px;
    height: 36px;
    background: var(--kbg-card-bg);
    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-sm);
    padding: 0 var(--kbg-space-6) 0 var(--kbg-space-2);
}
body.kbg-ui-preview .pgo-input::placeholder {
    color: var(--kbg-text-3);
}
body.kbg-ui-preview ul.pagination .pgo-input:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 1px;
    border-color: var(--kbg-gold-2);
}
body.kbg-ui-preview ul.pagination .pgo-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 28px;
    height: 36px;
    background: none;
    border: none;
    color: var(--kbg-text-3);
    cursor: pointer;
}
body.kbg-ui-preview ul.pagination .pgo-btn::after {
    content: "\e654";
    font-family: iconbg;
    font-size: 13px;
    display: block;
}
body.kbg-ui-preview ul.pagination .pgo-btn:hover {
    color: var(--kbg-gold-1);
}
body.kbg-ui-preview ul.pagination .pgo-btn:focus-visible {
    outline: 2px solid var(--kbg-gold-1);
    outline-offset: 1px;
}
/* Mobile：跳转表单隐藏，沿用父主题原有的同一断点决策（≤767px），不是
   我们新发明的行为 */
@media (max-width: 767px) {
    body.kbg-ui-preview ul.pagination .pagination-go {
        display: none;
    }
}

/**
 * 真实发现（Stage 5.10全局可访问性核查）：父主题Header用户下拉菜单
 * （`.dropdown:hover .dropdown-menu{opacity:1;...}`）真实只用`:hover`
 * 触发，键盘Tab聚焦到内部链接时不会展开子菜单，键盘用户无法访问
 * "个人中心/我的私信/退出登录"等子项。按ARCHITECTURE.md §4"覆盖父
 * 主题真实DOM"例外条款，补一条`:focus-within`触发规则，与既有
 * `:hover`规则同等视觉效果，不改变父主题CSS文件本身，不影响鼠标
 * 用户既有交互。
 */
body.kbg-ui-preview .navbar-action .profile .dropdown:focus-within .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
}