.wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -8px;
    left: 8px;
    overflow: hidden;
    font-size: 17px;
    font-weight: 400;
    color: #fff;
    opacity: 0.6;
    -webkit-transition: .3s ease all;
    -moz-transition: .3s ease all;
    -ms-transition: .3s ease all;
    -o-transition: .3s ease all;
    transition: .3s ease all;
}

.wrap:hover {
    opacity: 0.9;
}

.wraps {
    display: inline-block;
    text-align: center;
    width: 200px;
    height: 30px;
    line-height: 27px;
    position: absolute;
    top: 30px;
    right: -50px;
    z-index: 2;
    overflow: hidden;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    border: 1px dashed;
    box-shadow: 0 0 0 1px #000, 0px 21px 5px -18px rgba(0, 0, 0, 0.6);
    background: rgb(1, 132, 127);
}

.flash {
    font-weight: bold;
    font-size: calc(10px + 4vh);
    line-height: calc(10px + 6.6vh);
    text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
    font-family: "Sacramento", cursive;
    text-align: center;
    animation: blink 1s infinite;
    -webkit-animation: blink 1s infinite;
    margin: 1rem 0;
}
.bling{text-align:center;margin: 2rem 0;}
.bling1 {
    margin: 0;
    padding: 0;
    color: white;
    display: inline-block;
    font-size: 2.3rem;;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}

/* ===== 2026-06-30 H5/Web UI 整改 ===== */

/* 整改#1：h5 顶部导航固定——取消 Headroom 下滑时把顶栏移出(top:-125px)的行为，始终吸顶可见
   （!important 用于覆盖 Headroom 写在元素上的内联 style="top:-125px"） */
.navbar-box {
    top: 0 !important;
}

/* 整改#2：h5 侧边菜单 新增关闭按钮 + 右侧背景遮罩
   - 菜单打开时给右侧内容盖一层 rgba(0,0,0,.7) 遮罩；点击遮罩关闭（沿用 #body 现有 click→关闭）
   - 复用汉堡按钮 #toggle-nav：菜单打开时移到菜单右上角内侧、隐藏汉堡图、用内联 SVG 显示为 ✕；
     点击 ✕ 关闭（沿用 #toggle-nav 的 toggle 行为）。整段仅在 #wrap.display-nav（菜单打开态）下生效 */
#wrap.display-nav #body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 500;
}

#wrap .navbar-header .closebtn {
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
    margin: 0;
    z-index: 900;
    width: 2.6rem;
    height: 2.125rem; /* =原汉堡键高度，避免 ✕ 比原按钮高而撑高顶栏、导致开菜单时搜索框纵向抖动 */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ffffff'%20stroke-width='2.5'%20stroke-linecap='round'%3E%3Cpath%20d='M5%205L19%2019M19%205L5%2019'/%3E%3C/svg%3E") center / 1.6rem 1.6rem no-repeat !important;
}

#wrap.display-nav #toggle-nav img {
    display: none !important;
}

/* 整改#3：h5 侧边菜单打开后，仅菜单区域可滚动，底层右侧内容固定不动（修复滚动穿透）
   - :has() 现代浏览器锁 html；body / #wrap 兜底以兼容旧 webview
   - touch-action:none 屏蔽触屏滚动 */
html:has(> body.display-nav) {
    overflow: hidden !important;
}
#wrap.display-nav #nav {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
body.display-nav {
    overflow: hidden !important;
    touch-action: none;
}
#wrap.display-nav #body {
    overflow: hidden;
    touch-action: none;
}

/* 整改#4：文章详情页"热门推荐"一屏完整显示两张、左右留白对称 + 翻页对齐
   原 .top_picks_item{flex:0 0 55%}，两卡共 110%+间距致第二卡溢出被裁、第三卡露出（被误以为是 bug）。
   关键约束：post.php carousel JS 用 translateX(-currentIndex*100%) 翻页，
   要求"一页 2 item 总占位 = 容器 100%"，即 2*(item_w + margin) = 100%
   → item_w = 50% - margin = 50% - 0.9rem；margin = 0.9rem
   配 :last-child margin:0（最后一页奇数 item 也对齐）。不动 JS/箭头。 */
@media (max-width: 960px) {
    /* H5 下 wrapper 不对称 padding 补偿 item 末位 margin-right 视觉占位：
       carousel 公式要求一页 2 item 含 margin 总占 = 100% container（不能去 :last-child margin），
       但末位 margin 不渲染、视觉看就是右侧多一块空白 → 整体偏左。
       让 wrapper 左 padding 多 0.45rem (7.2px) / 右 padding 少 0.45rem，
       原 12px 对称 padding → 19.2 / 4.8 不对称，两张视觉对称居中。Web 端 (>960) 不动。 */
    .top_picks_wrapper {
        padding-left: 1.2rem;
        padding-right: 0.3rem;
    }
    /* 中间层 viewport 加 overflow:hidden：原 wrapper overflow 边界含 padding 区（13px）
       让 carousel 翻页时下一页 item 漏出右侧。.top_picks 自身不能加 overflow（会裁掉 layout
       超出的 item 导致翻页后空白）。由 footer.php 在 wrapper 内、.top_picks 外加一层 viewport 解决。 */
    .top_picks_viewport {
        overflow: hidden;
    }
    .top_picks_item {
        flex: 0 0 calc(50% - 0.9rem);
        margin-right: 0.9rem;
    }
    .top_picks_item:last-child {
        margin-right: 0;
    }
}

/* 整改#5：分类面包屑间距
   - h5：原 margin-top:-.625rem 把面包屑上拉贴住顶部模块（过于紧凑），改为 +.625rem，与 padding-bottom(.625rem) 上下各 10px 均衡
   - web(≥768)：主题 media 只改了 padding-bottom(1.25rem) 没改 margin-top（仍为 -.625rem→上下不一致），补 margin-top:1.25rem，上下各 20px 均衡 */
.xqbj-breadcrumb-container {
    margin-top: .625rem;
}
@media (min-width: 768px) {
    .xqbj-breadcrumb-container {
        margin-top: 1.25rem;
    }
}

/* 整改#6：分类面包屑当前页置灰且不可点击（原为亮色，易被误认为可点击）
   functions.php:1172 给当前项输出 aria-current="page"，可直接 CSS 命中 */
.xqbj-breadcrumb-item[aria-current="page"] a {
    color: #999 !important;
    pointer-events: none;
    cursor: default;
}

/* 整改#7：顶部搜索放大镜居中
   mirages.min.css 中 .navbar-search-container>a 是 inline + vertical-align:top，
   未在 2.5rem 圆按钮内 flex 居中 fa-search → 视觉偏左偏上。
   用 inline-flex 在容器折叠态尺寸内水平+垂直居中。 */
.navbar-search-container > #navbar-search.search-form-input {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    line-height: 1;
    vertical-align: middle;
    text-align: center;
}

/* 整改#7 (补)：H5 首页大搜索框右侧放大镜按钮居中
   mirages.min.css 给 .navbar-box .search-box .search-btn 用 absolute + top:0.5rem 死值，
   不随输入框高度自适应、视觉偏下。改用 top:50% + transform 真正垂直居中。 */
@media (max-width: 960px) {
    .navbar-box .search-box .search-btn {
        top: 50%;
        transform: translateY(-50%);
    }
}

/* 整改#9：H5 翻页组件——末页跳转按钮换行/输入框截断 + 页码 tag 美化（参考 mrdld_new common.css 同段）
   - .page-jump #pageForm 改为不换行 flex 行
   - .page-info 截断省略，input 锁 4rem 容纳 4 位页码
   - max-width:4rem !important 与 flex-basis 4rem 对齐——本主题 mirages.min.css 已设 max-width:4rem，
     但 headfix_pages.php 在 430px/390px 窄屏把它压成 3.5rem/3rem，这里强制锁回 4rem 避免 4 位页码截断
   - h5 (max-width:767px) 限制翻页跳转容器最大宽，避免与左右翻页箭头冲撞 */
.page-jump #pageForm {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    gap: .4rem;
    flex-wrap: nowrap;
}
.page-jump .page-info {
    display: inline-block;
    max-width: 8.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto;
}
.page-jump input {
    flex: 0 0 4rem;
    max-width: 4rem !important;
    text-align: center;
}
.page-jump button {
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .page-jump {
        max-width: calc(100% - 7rem);
    }
    .page-jump .page-info {
        max-width: 5.5rem;
    }
}