@charset "UTF-8";
/* 主题色变量 - 前后台共用 */
/* 通过 data-theme 属性切换主题色，通过 data-bs-theme 属性切换明暗模式 */
/* 核心思路：--bs-body-bg 设为组件背景色（白/深灰），页面背景用 --x-page-bg 单独控制 */

:root {
    --bs-primary: #1d9bf0;
    --bs-primary-rgb: 29, 155, 240;
    --bs-link-color: #1d9bf0;
    --bs-link-color-hover: #1a8cd8;
    /* 组件背景色（card/dropdown/modal 等都继承此值） */
    --bs-body-bg: #fff;
    --bs-body-color: #222;

    /* ⭐ 页面背景色：格子里面的底色 → 浅土黄色（小麦/卡其调，"稍微有点土黄色"） */
    --x-page-bg: #fcf9ee;
    /* 网格线颜色：土黄底色上的稍深一点棕黄线，对比度合适不刺眼 */
    --x-page-grid: rgba(180, 155, 105, 0.55);
}




/* ⭐ 页面背景：最浅土黄色 + 网格图案（整站底色，非纯白） 
   注意：真正生效的是下面 html 层的网格，body 此处透明透出 html
   同步格子大小：html 与 body 保持一致 40px × 40px */
body {
    font-size: 14px;
    background-color: var(--x-page-bg);
    /* 网格背景：横竖各一条线，格子大小 40px × 40px */
    background-image:
        linear-gradient(var(--x-page-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--x-page-grid) 1px, transparent 1px);
    background-size: 40px 40px;
}

a {
    text-decoration: none;
    color: var(--bs-body-color);
}

/* 主题色方案 - 只需设置 --bs-primary 和 --bs-primary-rgb */
[data-theme="blue"] {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563eb;
    --bs-link-color-hover: #1d4ed8;
    --x-page-bg: #fcf9ee; /* ⭐ 所有主题统一浅土黄色（明显偏黄） */
}

[data-theme="green"] {
    --bs-primary: #16a34a;
    --bs-primary-rgb: 22, 163, 74;
    --bs-link-color: #16a34a;
    --bs-link-color-hover: #15803d;
    --x-page-bg: #fcf9ee;
}

[data-theme="purple"] {
    --bs-primary: #9333ea;
    --bs-primary-rgb: 147, 51, 234;
    --bs-link-color: #9333ea;
    --bs-link-color-hover: #7e22ce;
    --x-page-bg: #fcf9ee;
}

[data-theme="red"] {
    --bs-primary: #dc2626;
    --bs-primary-rgb: 220, 38, 38;
    --bs-link-color: #dc2626;
    --bs-link-color-hover: #b91c1c;
    --x-page-bg: #fcf9ee;
}

[data-theme="orange"] {
    --bs-primary: #ea580c;
    --bs-primary-rgb: 234, 88, 12;
    --bs-link-color: #ea580c;
    --bs-link-color-hover: #c2410c;
    --x-page-bg: #fcf9ee;
}

[data-theme="pink"] {
    --bs-primary: #db2777;
    --bs-primary-rgb: 219, 39, 119;
    --bs-link-color: #db2777;
    --bs-link-color-hover: #be185d;
    --x-page-bg: #fcf9ee;
}

[data-theme="teal"] {
    --bs-primary: #0d9488;
    --bs-primary-rgb: 13, 148, 136;
    --bs-link-color: #0d9488;
    --bs-link-color-hover: #0f766e;
    --x-page-bg: #fcf9ee;
}

[data-theme="indigo"] {
    --bs-primary: #4f46e5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4f46e5;
    --bs-link-color-hover: #4338ca;
    --x-page-bg: #fcf9ee;
}

[data-theme="cyan"] {
    --bs-primary: #0891b2;
    --bs-primary-rgb: 8, 145, 178;
    --bs-link-color: #0891b2;
    --bs-link-color-hover: #0e7490;
    --x-page-bg: #fcf9ee;
}

[data-theme="lime"] {
    --bs-primary: #65a30d;
    --bs-primary-rgb: 101, 163, 13;
    --bs-link-color: #65a30d;
    --bs-link-color-hover: #4d7c0f;
    --x-page-bg: #fcf9ee;
}

/* 暗色模式 放最下边*/
[data-bs-theme="dark"] {
    --bs-body-bg: #141414;
    --bs-body-color: #e1e1e1;
    --bs-border-color: #303030;
    --bs-tertiary-bg: #212121;
    --bs-secondary-color: #838282;
    --bs-secondary-bg: #222;

    --x-page-bg: #111;
}
/* ⭐ 暗色模式：取消土黄色网格背景，保持纯黑风格 */
[data-bs-theme="dark"] body {
    background-image: none !important;
}

.x-card {
    margin: 13px 0;
    padding: 12px;
    background-color: var(--bs-body-bg);
    border-radius: 16px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: none !important;
}
.card, .x-card {
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .x-card {
    border-color: #2a2a2a !important;
}

.card-thread {
    padding: 24px;
}

.list-mode, .index-threadlist .list-mode {
    background-color: var(--bs-tertiary-bg);
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;

}

.hot-thread-item:hover {
    box-shadow: 0 6px 16px 0 rgb(27 26 49 / 1%);
    background-color: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-body-bg);
}

.list-none {
    margin-top: 0;
}

.form-check-input,
.form-check-input:checked,
button,
input,
optgroup,
select,
textarea {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
}


.form-check-input:checked {
    background-color: var(--bs-primary);
}

.btn-primary {
    /* border-color: rgba(var(--bs-primary-rgb), 0.9) */
    background-color: var(--bs-primary);
    color: #fff;
    border: none;

}

.btn-outline-primary {
    border-color: rgba(var(--bs-primary-rgb), 0.9);


    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-body-bg);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: var(--bs-body-bg);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--bs-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-gradient: none;
}

.btn:hover,
.btn:focus-visible,
.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active,
.list-group-item.active {
    border-color: var(--bs-primary);
    background-color: var(--bs-link-color-hover);
    color: #fff;

}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {


    border-color: var(--bs-primary);
    background-color: var(--bs-link-color-hover);
    color: #fff;
    opacity: var(--bs-btn-disabled-opacity)
}

.card-header {
    border: none;
    padding: 0;
    margin-bottom: 12px;
    background: transparent;
}

.btn-outline-secondary {
    border-color: var(--x-page-bg);
    background-color: var(--x-page-bg);
    --bs-btn-border-color: var(--x-page-bg);
}
.modal-footer,
.modal-header,
.dropdown-menu,
.modal-content {
    border: none;
}
[data-bs-theme="dark"] .btn-outline-secondary,[data-bs-theme="dark"] .thread-sidebar-btn {
    border: 1px solid #424242;
}

.aie-content pre {
    padding:8px!important;
}
.aie-content .copy-code {
    padding:2px 4px;
}
.nav-pills 
 {
 
    --bs-nav-pills-link-active-bg: var(--bs-primary);
}
@media screen and (max-width: 767.98px) {

    .row>* {

        padding: 0 6px;
        margin-top: 8px;
    }

    .x-card {
        margin: 8px 0;
        padding: 12px;
    }

}

/* ============ 帖子内容分割线（主帖作者信息与正文之间） ============ */
.thread-content-divider {
    display: block;
    width: 100%;
}
.thread-divider-line {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--bs-border-color, #e5e7eb) 20%, var(--bs-border-color, #e5e7eb) 80%, transparent 100%);
    border-radius: 1px;
    opacity: 0.7;
}
/* 暗色模式适配 */
[data-bs-theme="dark"] .thread-divider-line {
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0.15) 80%, transparent 100%);
}

/* ============ 签名档上方柔和分割线 ============ */
.thread-signature-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--bs-primary-rgb, 37, 99, 235) 0, var(--bs-primary-rgb, 37, 99, 235) 15%, var(--bs-border-color, #e5e7eb) 30%, var(--bs-border-color, #e5e7eb) 100%);
    border-radius: 1px;
    opacity: 0.4;
    width: 60%;
    margin-left: 0;
}
/* 暗色模式签名分割线 */
[data-bs-theme="dark"] .thread-signature-divider {
    background: linear-gradient(90deg, transparent 0%, var(--bs-primary, #5cabff) 0, var(--bs-primary, #5cabff) 15%, rgba(255,255,255,0.12) 30%, rgba(255,255,255,0.12) 100%);
    opacity: 0.5;
}

/* 签名卡片整体过渡（悬浮时轻微高亮，不生硬） */
.thread-signature > div {
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    border: 1px solid transparent;
}
.thread-signature > div:hover {
    background: rgba(var(--bs-primary-rgb, 37, 99, 235), 0.06) !important;
    border-color: rgba(var(--bs-primary-rgb, 37, 99, 235), 0.15);
}

/* ============ 回帖内联签名（昵称下方/内容上方）简洁样式 ============ */
.thread-signature-inline {
    display: flex;
    align-items: baseline;
    gap: 4px;
    padding: 0;
    margin: 0;
    background: transparent !important;
    border: 0 !important;
}
.thread-signature-inline > div {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}
/* 签名标签：字号与 UID 行一致（0.80rem，和 UID:366 的尺寸对齐，UID=0.85em） */
.thread-signature-label {
    font-size: 0.80rem;
    font-weight: 600;
    color: var(--bs-body-tertiary, #6c757d);
    opacity: 0.85;
    flex-shrink: 0;
    padding-left: 0;
    margin-left: 0;
}
/* 签名内容：字体比标签再小一点，淡色（0.76rem，视觉上明显小于正文） */
.thread-signature-text {
    font-size: 0.76rem;
    line-height: 1.3;
    color: var(--bs-body-secondary, #adb5bd);
    opacity: 0.92;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 90%;
}
/* 暗色模式适配 */
[data-bs-theme="dark"] .thread-signature-label {
    color: #adb5bd;
}
[data-bs-theme="dark"] .thread-signature-text {
    color: #868e96;
    opacity: 0.92;
}

/* === 帖子列表元信息：统一淡灰色（参考目标截图风格），不加粗 === */
.thread-list-meta a.text-body-secondary,
.thread-list-meta .text-body-secondary,
.thread-list-meta .text-secondary,
.thread-list-meta .username.text-secondary,
.thread-list-meta .thread-list-interact,
.thread-list-meta .thread-list-interact span,
.thread-list-meta-row .thread-meta-author,
.thread-list-meta-row .thread-meta-views,
.thread-list-meta-row .thread-meta-replies,
.thread-list-meta-row .thread-meta-lastuser,
.thread-list-meta-row .thread-meta-lastdate {
    color: #71767b !important;  /* 统一淡灰色，和 NodeSeek/X 风格一致 */
    font-weight: 400 !important; /* 不加粗 */
    margin-right: 0 !important;  /* 取消 Bootstrap 类自带间距，用模板内   控制紧凑空格 */
}
/* 分隔线 | 如果有出现的话也统一淡灰 */
.thread-list-meta .text-body-tertiary {
    color: #71767b !important;
    font-weight: 400 !important;
}
/* 深色模式也对应淡灰色 */
[data-bs-theme="dark"] .thread-list-meta a.text-body-secondary,
[data-bs-theme="dark"] .thread-list-meta .text-body-secondary,
[data-bs-theme="dark"] .thread-list-meta .text-secondary,
[data-bs-theme="dark"] .thread-list-meta .username.text-secondary,
[data-bs-theme="dark"] .thread-list-meta .thread-list-interact,
[data-bs-theme="dark"] .thread-list-meta .thread-list-interact span,
[data-bs-theme="dark"] .thread-list-meta-row .thread-meta-author,
[data-bs-theme="dark"] .thread-list-meta-row .thread-meta-views,
[data-bs-theme="dark"] .thread-list-meta-row .thread-meta-replies,
[data-bs-theme="dark"] .thread-list-meta-row .thread-meta-lastuser,
[data-bs-theme="dark"] .thread-list-meta-row .thread-meta-lastdate {
    color: #8b98a5 !important;
    font-weight: 400 !important;
    margin-right: 0 !important;
}
[data-bs-theme="dark"] .thread-list-meta .text-body-tertiary {
    color: #8b98a5 !important;
    font-weight: 400 !important;
}

/* ==================== 整站白+浅灰网格主题 ==================== */
/* 亮色模式：不管选什么主题色，页面统一白背景 + 浅灰网格，组件纯白 */
:root,
[data-theme="blue"],
[data-theme="green"],
[data-theme="purple"],
[data-theme="red"],
[data-theme="orange"],
[data-theme="pink"],
[data-theme="cyan"],
[data-theme="lime"],
[data-theme="teal"],
[data-theme="indigo"],
[data-theme="black"] {
    /* 页面背景：纯白（加浅灰网格） */
    --x-page-bg: #ffffff;
    /* 组件/卡片背景：纯白 */
    --bs-body-bg: #ffffff;
    /* 三级背景：hover态、列表项用（浅灰） */
    --bs-tertiary-bg: #f7f8fa;
    /* 次要背景：和 tertiary 一致 */
    --bs-secondary-bg: #f7f8fa;
}

/* 让 html、body、main#body 统一：只有 html 画一层土黄田字格（单线，不叠加多层导致双线），body和main#body纯透明继承 */
/* ⚠️ 之前把 html+body+main#body 三个元素都画了网格，三层叠加1px线 → 视觉上变成双线/两条线，现在只给html画1层！
   ⭐ 2026.8.4 调整格子：50px → 40px；2026.8.5 灰线→土黄线 rgba(205,185,145,0.45)；
   ⭐ 2026.8.5 背景色调土黄(#f2e7c2)+格子线同步深棕黄 rgba(180,155,105,0.55) */
html {
    background-color: var(--x-page-bg) !important;
    /* 大小 40×40px，标准单线田字（横竖各一条），只画在html上，绝不叠加 */
    background-image:
        linear-gradient(rgba(180, 155, 105, 0.55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(180, 155, 105, 0.55) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
    background-position: 0 0 !important;
    background-repeat: repeat !important;
    background-attachment: scroll !important;
}

/* ================ 帖子标题 & 正文标题字号调小 ================ */
/* 帖子详情页主标题（原来 Bootstrap .h4 默认 1.5rem/24px → 1.22rem/19.5px，更紧凑精致） */
.card-thread > .card-body > h1.h4.break-all[itemprop="headline"],
.card-thread .card-body > h1.h4 {
    font-size: 1.22rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.6rem !important;
}
/* 正文内的 Markdown 标题改小，避免比帖子主标题还大显得喧宾夺主 */
.message.aie-content h1,
#body .message h1,
#body .aie-content h1,
.postlist .message h1 {
    font-size: 1.32rem !important;
    line-height: 1.5 !important;
    margin-top: 1.2rem !important;
    margin-bottom: 0.7rem !important;
}
.message.aie-content h2,
#body .message h2,
#body .aie-content h2,
.postlist .message h2 {
    font-size: 1.16rem !important;
    line-height: 1.5 !important;
    margin-top: 1rem !important;
    margin-bottom: 0.55rem !important;
}
.message.aie-content h3,
#body .message h3,
#body .aie-content h3,
.postlist .message h3 {
    font-size: 1.04rem !important;
    line-height: 1.5 !important;
    margin-top: 0.85rem !important;
    margin-bottom: 0.45rem !important;
}
.message.aie-content h4,
#body .message h4,
#body .aie-content h4,
.postlist .message h4 {
    font-size: 0.98rem !important;
    line-height: 1.5 !important;
    margin-top: 0.7rem !important;
    margin-bottom: 0.35rem !important;
}
.message.aie-content h5,
#body .message h5,
#body .aie-content h5,
.postlist .message h5,
.message.aie-content h6,
#body .message h6,
#body .aie-content h6,
.postlist .message h6 {
    font-size: 0.92rem !important;
    line-height: 1.5 !important;
    margin-top: 0.6rem !important;
    margin-bottom: 0.3rem !important;
}
body,
main#body,
.bg-body,
.bg-light {
    background-color: transparent !important;   /* 透明，透出html层的唯一一层网格 */
    background-image: none !important;         /* ❌ 绝不再画第二层网格，避免叠加变双线 */
    background-size: inherit !important;
    background-position: inherit !important;
}

/* 所有 .card / .x-card / .dropdown-menu / .modal-content / .offcanvas 等组件都用纯白背景（盖住网格） */
.card,
.x-card,
.dropdown-menu,
.modal-content,
.offcanvas,
.toast,
.list-group-item,
.input-group-text,
.form-control,
.form-select {
    background-color: var(--bs-body-bg) !important;
}

/* 暗色模式：深灰/黑 + 极淡灰网格，和亮色白灰统一调性。只在html画1层避免双线。
   ⭐ 同步格子大小：50px → 40px */
[data-bs-theme="dark"] {
    --x-page-bg: #111111;
    --bs-body-bg: #141414;
    --bs-tertiary-bg: #212121;
    --bs-secondary-bg: #222222;
    --bs-border-color: #303030;
}
[data-bs-theme="dark"] html {
    background-color: #111111 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
    background-size: 40px 40px !important;
}
[data-bs-theme="dark"] body,
[data-bs-theme="dark"] main#body {
    background-color: transparent !important;
    background-image: none !important;
}
/* ========================================================= */

/* ==================== 顶部导航栏：纯白色背景，高度压缩 ==================== */
/* 亮色模式：白色背景，无透明，无网格穿透，和摸鱼论坛一致 */
header#header.navbar,
header.navbar {
    /* ⭐ 纯白色背景，不要透明不要网格 */
    background-color: #ffffff !important;
    background-image: none !important;
    /* 强制高度严格压缩到42-44px */
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    /* 只保留底部一条细分隔线，避免出现2条横线的视觉感 */
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
header#header.navbar > *,
header.navbar > * {
    height: 44px !important;
    min-height: 44px !important;
}
.navbar .nav-link,
.navbar .nav-icon-btn,
.navbar .nav-link.btn,
/* ✅ 终极修复：排除三类特殊按钮不被导航栏全局.btn样式覆盖
   1. theme-mode-btn   外观模式三按钮（太阳/月亮/电脑）
   2. theme-color-btn  主题色色板圆圈（10个颜色）
   3. x-nav-search-btn 搜索框右侧的圆形放大镜按钮 → 否则被强制height:36px变形！ */
.navbar .btn:not(.theme-mode-btn):not(.theme-color-btn):not(.x-nav-search-btn) {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important;
    padding-left: .6rem !important;
    padding-right: .6rem !important;
    min-height: 36px !important;
    height: 36px !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
}
/* 外观三按钮（明暗/自动模式）：完全独立的样式，不受导航栏全局.btn影响 */
.dropdown-menu .theme-mode-btn {
    height: 40px !important;                 /* 固定高度，大小合适不挤压 */
    padding: 0.25rem 0 !important;           /* 内部留空间，图标不贴边 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--bs-border-color, #d1d5db) !important;
    background-color: #ffffff !important;
    color: #4b5563 !important;               /* 图标深灰，任何情况下可见 */
}
.dropdown-menu .theme-mode-btn i {
    font-size: 1.15rem;
}
/* 选中态 active：深灰底 + 白字图标；保证高亮且看得见 */
.dropdown-menu .theme-mode-btn.active,
.dropdown-menu .theme-mode-btn[aria-pressed="true"],
.dropdown-menu .btn-outline-secondary.active,
.dropdown-menu .btn-outline-secondary[aria-pressed="true"] {
    background-color: #4b5563 !important;
    border-color: #4b5563 !important;
    color: #ffffff !important;
}
/* 暗色模式下的外观按钮 */
[data-bs-theme="dark"] .dropdown-menu .theme-mode-btn {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #e5e7eb !important;
}
[data-bs-theme="dark"] .dropdown-menu .theme-mode-btn.active,
[data-bs-theme="dark"] .dropdown-menu .theme-mode-btn[aria-pressed="true"] {
    background-color: #e5e7eb !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}
/* 下拉菜单内的 outline-secondary 按钮：不要继承全局土黄色的边框/背景，恢复标准灰边白底 */
.dropdown-menu .btn-outline-secondary {
    background-color: #ffffff !important;
    border-color: #d1d5db !important;
    --bs-btn-border-color: #d1d5db !important;
    --bs-btn-hover-bg: #f3f4f6 !important;
    --bs-btn-hover-border-color: #9ca3af !important;
    --bs-btn-hover-color: #1f2937 !important;
    color: #374151 !important;
}
[data-bs-theme="dark"] .dropdown-menu .btn-outline-secondary {
    background-color: #1f1f1f !important;
    border-color: #424242 !important;
    --bs-btn-border-color: #424242 !important;
    --bs-btn-hover-bg: #2a2a2a !important;
    color: #e5e7eb !important;
}
/* ✅ 主题色10个色板按钮：完全独立，不再被导航栏全局.btn样式干扰
   → 直接使用HTML自带的 style="background-color:#xxx" 显示颜色 */
.dropdown-menu .theme-color-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 50% !important;            /* 严格正圆 */
    display: inline-block !important;         /* 不要inline-flex（空内容会收缩） */
    padding: 0 !important;                    /* 不被任何padding挤压 */
    margin: 0 !important;
    border: none !important;                  /* 去掉 Bootstrap btn 默认边框 */
    flex: 0 0 24px !important;                /* flex布局里完全固定24px不伸缩 */
    overflow: hidden !important;
    /* 🔴 绝对不要在这里写任何 background-color 的规则！
       按钮的颜色是 HTML 内联 style="background-color:xxx" 控制的，
       这里一写就会覆盖掉所有颜色，导致调色板看不见！ */
}
/* 选中的色板按钮：2px蓝色外圈描边 */
.dropdown-menu .theme-color-btn[aria-pressed="true"],
.dropdown-menu .theme-color-btn.active {
    outline: 2px solid var(--bs-primary, #1d9bf0) !important;
    outline-offset: 2px;
}
/* ⭐ 自定义等级胶囊容器：我们自己在头像右下角加了 Lv 等级胶囊，
   因此需要隐藏头像组件自带的管理组图标（防止两个图标叠在一起） */
.with-lv-badge .avatar-group-icon {
    display: none !important;
}
.navbar > .container,
.navbar > .container > .d-flex,
.navbar .container,
.navbar .container-fluid {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
}

/* ================================================================ */
/* ========== 导航栏搜索框：小巧紧凑版（左侧圆角+右侧圆形按钮） ========== */
/* ================================================================ */
/* ⭐ 整体容器：更短更矮，不占位 */
.x-nav-search-box.input-group-search {
    height: 28px !important;        /* 总高度：更矮 */
    min-height: 28px !important;
    width: 10rem !important;        /* 宽度：不那么长 */
    max-width: 10rem !important;
    gap: 6px !important;            /* 输入框和按钮之间留小缝隙（看起来像两部分） */
    border: none !important;
    background: transparent !important;
}
/* ⭐ 输入框：圆角矩形（左8px 右8px）高度28px */
.x-nav-search-box .x-nav-search-input {
    height: 28px !important;
    min-height: 28px !important;
    border-radius: 8px !important;       /* 左圆角（像图二） */
    border: 1px solid var(--bs-border-color, #e5e7eb) !important;
    border-right: 1px solid var(--bs-border-color, #e5e7eb) !important;
    padding: 2px 10px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    background-color: #f7f7f8 !important;
}
.x-nav-search-box .x-nav-search-input:focus {
    background-color: #fff !important;
    border-color: var(--bs-primary, #1d9bf0) !important;
    box-shadow: 0 0 0 2px rgba(29,155,240,.12) !important;
}
.x-nav-search-box .x-nav-search-input::placeholder {
    font-size: 11.5px !important;
    color: #a0a0a0 !important;
}
/* ⭐ 右侧按钮：圆形独立按钮（50%圆角），独立于输入框 */
.x-nav-search-box .x-nav-search-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    border-radius: 50% !important;        /* 完全圆形 */
    border: 1px solid var(--bs-border-color, #e5e7eb) !important;
    background-color: #f0f0f2 !important;
    color: #555 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.x-nav-search-box .x-nav-search-btn:hover {
    background-color: var(--bs-primary, #1d9bf0) !important;
    border-color: var(--bs-primary, #1d9bf0) !important;
    color: #fff !important;
}
.x-nav-search-box .x-nav-search-btn i {
    font-size: 14px !important;
    line-height: 1 !important;
}
/* 暗色模式下搜索框 */
[data-bs-theme="dark"] .x-nav-search-box .x-nav-search-input {
    background-color: #1e1e1e !important;
    border-color: #303030 !important;
    color: #ddd !important;
}
[data-bs-theme="dark"] .x-nav-search-box .x-nav-search-input:focus {
    background-color: #141414 !important;
}
[data-bs-theme="dark"] .x-nav-search-box .x-nav-search-btn {
    background-color: #1e1e1e !important;
    border-color: #303030 !important;
    color: #bbb !important;
}
[data-bs-theme="dark"] .x-nav-search-box .x-nav-search-btn:hover {
    background-color: var(--bs-primary, #1d9bf0) !important;
    border-color: var(--bs-primary, #1d9bf0) !important;
    color: #fff !important;
}
/* 去掉Bootstrap input-group默认的粘连圆角 */
.x-nav-search-box .input-group-text,
.x-nav-search-box .x-nav-search-input {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

/* 暗色模式：对应深色导航 */
[data-bs-theme="dark"] header#header.navbar,
[data-bs-theme="dark"] header.navbar {
    background-color: #141414 !important;
    background-image: none !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: 1px solid #2a2a2a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1) !important;
}
/* ==================== 中间内容区：严格Bootstrap嵌套结构 row(col-lg-2+col-lg-10) > main-right-card(白卡) > row(col-lg-8+col-lg-4=12) ==================== */
/* ⭐ main#body 透明，不遮挡页面背景网格（白色+浅灰网格在外围可见） */
main#body,
#body {
    background-color: transparent !important;
    background-image: inherit !important;
    background-size: inherit !important;
    background-position: inherit !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
}
/* ⭐ 暗色模式 main#body 透明 */
[data-bs-theme="dark"] main#body,
[data-bs-theme="dark"] #body {
    background-color: transparent !important;
    background-image: inherit !important;
    border: none !important;
    box-shadow: none !important;
}
/* ⭐ 白卡大容器（main-right-card）：样式在layout有内联兜底，这里同步补CSS变量+暗色模式 */
.main-right-card {
    background-color: var(--bs-body-bg, #ffffff) !important;
    background-image: none !important;
    border-radius: 18px !important;
    border: 1px solid rgba(200, 200, 200, 0.45) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.05),
                0 3px 12px rgba(0, 0, 0, 0.04) !important;
    padding: 1rem .9rem !important;
    overflow: visible !important;
}
[data-bs-theme="dark"] .main-right-card {
    background-color: #141414 !important;
    background-image: none !important;
    border: 1px solid rgba(90, 90, 90, 0.4) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25),
                0 3px 12px rgba(0, 0, 0, 0.18) !important;
}
/* ⭐ 左栏独立白卡：直接给 sidebar-left.x-card 加样式，避免双层包围框（不再给sticky-top子元素额外加卡） */
[data-bs-theme="dark"] .sticky-top .sidebar-left.x-card.card,
[data-bs-theme="dark"] .sticky-top > div > .sidebar-left.x-card.card {
    background-color: #141414 !important;
    background-image: none !important;
    border: 1px solid rgba(90, 90, 90, 0.4) !important;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25),
                0 3px 12px rgba(0, 0, 0, 0.18) !important;
}
/* ⭐ 右侧栏（x-right-col.main-right-col）：⚠️ Grid项本身绝对不加width:100%或display:flex，否则破坏Grid列宽！
   只给子元素（#sidebar-right、卡片div等）设width:100%，列宽由Grid template-columns分配！
   ❌ 绝对禁止使用 > * 选择器，会把 <style> 标签强制display:flex导致CSS代码显示在页面上！ */
.main-right-card .x-right-col.main-right-col > div,
.main-right-card .x-right-col.main-right-col > #sidebar-right {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
}
/* ⭐ 保险：Grid里的style标签永远不显示（防止被任何选择器强制显示） */
.x-main-grid style,
.x-right-col style,
.main-right-col style {
    display: none !important;
}
/* ⭐ 关键：sidebar_right.inc.htm 外层 <div class="d-none d-lg-block" id="sidebar-right"> 强制100%宽
   ⚠️ 注意：不能用 display:block!important，否则会覆盖 d-none 导致手机端显示右侧栏！
   只在 lg 及以上断点（≥992px）用 display:block，手机端保持 d-none（display:none） */
@media (min-width: 992px) {
    #sidebar-right {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important; /* lg+ 确保正常显示 */
        flex-direction: column !important;
    }
}

/* ================================= 响应式：右侧栏布局 ================================= */
/* ⭐ 超大窗口（≥1600px）：右侧栏22% */
@media (min-width: 1600px) {
    .main-right-card .x-main-grid {
        grid-template-columns: 1fr minmax(210px, 22%) !important;
    }
}
/* ⭐ 大窗口（1400-1599px）：右侧栏22% */
@media (min-width: 1400px) and (max-width: 1599.98px) {
    .main-right-card .x-main-grid {
        grid-template-columns: 1fr minmax(205px, 22%) !important;
    }
}
/* ⭐ 中等窗口（1200-1399px）：右侧栏23% */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .main-right-card .x-main-grid {
        grid-template-columns: 1fr minmax(200px, 23%) !important;
    }
}
/* ⭐ 较小桌面窗口（992-1199px）：右侧栏24% */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .main-right-card .x-main-grid {
        grid-template-columns: 1fr minmax(195px, 24%) !important;
        gap: .5rem !important;
    }
}

/* 手机/平板端（<992px）：单列布局 + 隐藏右侧栏 */
@media (max-width: 991.98px) {
    /* 手机端：main-right-card 内部 Grid 切换为单列（只有帖子区域），彻底隐藏右侧栏列 */
    .main-right-card .x-main-grid {
        grid-template-columns: minmax(0, 1fr) !important; /* 手机端单列 */
        gap: 0 !important;
    }
    /* 帖子列占满整行宽度 */
    .main-right-card .x-post-col {
        grid-column: 1 / -1 !important;
    }
    /* 右侧栏列容器彻底隐藏（不占空间） */
    .main-right-card .x-right-col.main-right-col {
        display: none !important;
        grid-column: unset !important;
    }
    /* 手机端强制隐藏右侧栏，防止任何样式覆盖 d-none */
    #sidebar-right {
        display: none !important;
    }
}
/* 右侧卡片宽度100% */
.main-right-col > * > .card,
.main-right-col .card,
.x-right-col > * > .card {
    width: 100% !important;
    max-width: 100% !important;
}
/* ⭐ 右侧栏内部卡片 padding 微调：更紧凑 */
#sidebar-right .card.x-card .card-body,
#sidebar-right .x-card .card-body,
#sidebar-right .card-body,
.main-right-col .card .card-body {
    padding: .5rem .75rem !important;
}
/* 右侧卡片标题栏 padding 大幅减小 */
#sidebar-right .card-header,
.main-right-col .card-header {
    padding: .35rem .75rem !important;
    border-bottom-width: 1px !important;
}
/* 标题栏和内容区之间的空隙 */
#sidebar-right > .card > .card-header + .card-body,
#sidebar-right > .x-card > .card-header + .card-body,
.main-right-col .card > .card-header + .card-body {
    padding-top: .3rem !important;
}
/* 最新用户的名字和头像之间不要有太大的上下间距 */
#sidebar-right .xnx-new-user-item {
    gap: 2px !important;
}
#sidebar-right .xnx-new-user-item .xnx-new-user-name {
    margin-top: 1px !important;
    line-height: 1.15 !important;
}
/* ⭐ 强制移除右侧栏 ALL 卡片标题栏的蓝色渐变/蓝色背景（含 Hook 注入的最新评论、热榜等模块），统一纯白 */
#sidebar-right .card-header,
#sidebar-right .x-card .card-header,
.main-right-col .card-header {
    background: #fff !important;
    background-image: none !important;
}
/* 暗色模式下对应适配深色背景 */
[data-theme="dark"] #sidebar-right .card-header,
[data-theme="dark"] #sidebar-right .x-card .card-header,
[data-theme="dark"] .main-right-col .card-header {
    background: #1f1f1f !important;
}
/* 帖子列表背景透明，不重复盖色 */
main#body .index-threadlist,
main#body .list-mode,
#body .index-threadlist,
#body .list-mode {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
/* ⭐ Tabs 行（最新/最热/精华 + 新回复/新发贴）上下空隙压缩 */
.index-threadlist > .row.d-flex:first-child,
.index-threadlist > div:first-child,
.list-mode > .row.d-flex:first-child,
.index-threadlist > .mb-3,
.list-mode > .mb-3 {
    margin-bottom: .5rem !important;
    padding-top: 0 !important;
    padding-bottom: .35rem !important;
}
/* ⭐ 帖子列表项：上下空隙压缩（红线区域空隙减小） */
.thread-list-item,
.threadlist > li,
.list-mode .thread-list-item {
    border-bottom: 1px solid rgba(220, 220, 220, 0.85) !important;
    padding-top: .42rem !important;
    padding-bottom: .42rem !important;
}
/* 整卡可点击：光标 + hover 背景变化，视觉提示用户点任意位置都能进帖子 */
.thread-card-clickable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease;
    border-radius: 6px;
}
.thread-card-clickable:hover {
    background-color: rgba(37, 99, 235, 0.04);
}
[data-bs-theme="dark"] .thread-card-clickable:hover {
    background-color: rgba(59, 130, 246, 0.10);
}
/* 防止整卡点击影响卡片内部交互元素的专属光标：
   a[href]/button/checkbox/radio 保持 pointer 小手；
   仅文本输入类（text/textarea/select/...）沿用浏览器默认 cursor
   （之前把全部 a 设为 cursor:auto → 标题文字错误显示 I-beam 文本光标，已修复） */
.thread-card-clickable a[href],
.thread-card-clickable button,
.thread-card-clickable label[for],
.thread-card-clickable input[type="checkbox"],
.thread-card-clickable input[type="radio"],
.thread-card-clickable input[type="submit"],
.thread-card-clickable input[type="button"],
.thread-card-clickable input[type="reset"],
.thread-card-clickable summary {
    cursor: pointer;
}
.thread-card-clickable input[type="text"],
.thread-card-clickable input[type="number"],
.thread-card-clickable input[type="email"],
.thread-card-clickable input[type="password"],
.thread-card-clickable input[type="search"],
.thread-card-clickable input[type="tel"],
.thread-card-clickable input[type="url"],
.thread-card-clickable input[type="date"],
.thread-card-clickable input[type="datetime-local"],
.thread-card-clickable input[type="month"],
.thread-card-clickable input[type="week"],
.thread-card-clickable input[type="time"],
.thread-card-clickable textarea {
    cursor: text;
}
.thread-card-clickable input[type="file"] {
    cursor: default;
}
.thread-card-clickable input:disabled,
.thread-card-clickable button:disabled,
.thread-card-clickable select:disabled,
.thread-card-clickable textarea:disabled {
    cursor: not-allowed;
}
/* 帖子项内部：头像、标题、元信息行之间的margin再削一层，不浪费垂直空间 */
.thread-list-item .thread-list-avatar {
    margin-top: 2px !important;
    margin-bottom: 0 !important;
}
.thread-list-item .thread-list-title {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
}
.thread-list-item .thread-list-meta,
.thread-list-item .thread-list-meta-row {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.threadlist > li:last-child,
.thread-list-item:last-child {
    border-bottom: none !important;
}
/* 暗色模式下帖子分隔线 */
[data-bs-theme="dark"] .thread-list-item,
[data-bs-theme="dark"] .threadlist > li {
    border-bottom: 1px solid rgba(80, 80, 80, 0.7) !important;
}
/* =========================================================================================== */

/* ================================= 私信页面 · 白+浅灰绿美化 + 布局修复 ================================= */
/* 【关键修复：my.layout.inc.htm 右侧内容区固定是 col-lg-7，之前左侧会话列表硬编码 320px，
   在窄屏/移动端就会把右侧聊天面板挤成错位（出现横向滚动条或右侧越界）。
   改法：用百分比/flex 自适应，电脑端列表 32%/聊天 68%，手机端纵向堆叠 */
.pm-chat-wrap {
    background: var(--bs-body-bg) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    /* 外层容器：合理固定高度，避免手机端被挤成 0 高度 + 防止越出屏幕 */
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: min(78vh, 760px) !important;
    min-height: 480px !important;
}
/* 电脑端：左列表 + 右聊天面板，合理 32/68 比例 */
@media (min-width: 992px) {
    .pm-chat-wrap { height: min(78vh, 760px) !important; }
}
/* 手机/平板（<992px）：纵向堆叠，不要固定 vh 高度避免切屏内容看不到 */
@media (max-width: 991.98px) {
    .pm-chat-wrap {
        flex-direction: column !important;
        height: auto !important;
        min-height: 520px !important;
    }
}

/* 【左侧会话列表】硬编码 320px → 响应式自适应，避免错位 */
.pm-conv-list {
    /* 电脑端：左栏 32% 基础，最小 260 最大 340 */
    flex: 0 0 32%;
    min-width: 0;
    max-width: 340px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border-right: 1px solid #e5e7eb !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
@media (max-width: 991.98px) {
    .pm-conv-list {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid #e5e7eb !important;
        max-height: 260px;
    }
}

.pm-conv-header {
    padding: 14px 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border-bottom: 1px solid #e5e7eb !important;
    flex: 0 0 auto;
}
/* 右侧聊天面板：自适应剩余空间，且强制最小 0 防止溢出 */
.pm-chat-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%) !important;
    overflow: hidden;
}
/* 收件箱空态 + 聊天空态：修复对齐，不再错位 */
.pm-empty-conv {
    padding: 36px 16px !important;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
}
.pm-empty-conv i { font-size: 36px !important; display:block; margin-bottom: 8px; opacity: .55 !important; }
.pm-chat-empty {
    padding: 48px 24px !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.pm-chat-empty i { font-size: 72px !important; opacity: .45 !important; color: #1d9bf0 !important; margin-bottom: 16px !important; animation: pmEmptyFloat 5s ease-in-out infinite !important; }
@keyframes pmEmptyFloat { 0%, 100% { transform: translateY(0);} 50% { transform: translateY(-6px);} }
.pm-chat-empty h6 { font-size: 18px !important; color: #374151 !important; margin-bottom: 8px !important; }
.pm-chat-empty p  { color: #6b7280 !important; font-size: 14px !important; margin-bottom: 6px !important; max-width: 420px !important; }

/* 聊天头部 + 消息区 + 输入区：严格 flex 顺序，避免挤压错位 */
.pm-chat-header {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 12px 18px !important;
    flex: 0 0 auto;
    min-width: 0;
}
.pm-chat-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    background: linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%) !important;
    padding: 22px !important;
    gap: 14px !important;
    min-height: 0; /* flex 子项滚动必需 */
    display: flex !important;
    flex-direction: column !important;
}
.pm-chat-input {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 14px 18px 16px !important;
    flex: 0 0 auto;
    min-width: 0;
}
/* 收件箱/写私信按钮：正常但不要太宽溢出，保持单行 */
.pm-conv-header .btn.btn-sm.btn-primary,
.pm-chat-empty .btn.btn-sm.btn-primary,
.pm-send-btn-wrap .btn.btn-primary,
#pmNewUserModal .btn.btn-primary {
    border-radius: 999px !important;
    padding: 7px 16px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.22) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.pm-conv-header .btn.btn-sm.btn-primary:hover,
.pm-chat-empty .btn.btn-sm.btn-primary:hover,
.pm-send-btn-wrap .btn.btn-primary:hover,
#pmNewUserModal .btn.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(37, 99, 235, 0.28) !important;
    filter: brightness(1.03) !important;
}
/* 会话列表项：保持紧凑，避免被内部内容撑破 */
.pm-conv-item {
    padding: 12px 14px !important;
    gap: 10px !important;
    margin: 3px 8px !important;
    border-radius: 14px !important;
    transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease !important;
    display: flex !important;
    align-items: center;
    min-width: 0;
}
.pm-conv-item:hover {
    background-color: #f3f4f6 !important;
    transform: translateX(3px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}
.pm-conv-item.active {
    background: linear-gradient(90deg, #eff6ff 0%, #f0f7ff 100%) !important;
    border-left: 3px solid #1d9bf0 !important;
    padding-left: 11px !important;
    box-shadow: 0 3px 10px rgba(29, 155, 240, 0.12) !important;
}
.pm-conv-unread { box-shadow: 0 2px 6px rgba(239, 68, 68, 0.25) !important; }
.pm-conv-main { flex: 1 1 auto; min-width: 0; }
.pm-conv-name, .pm-conv-preview {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pm-chat-body > div[style*="text-align:center"] {
    background-color: #e5e7eb !important;
    color: #4b5563 !important;
    font-weight: 500 !important;
}
.pm-msg-row.other .pm-msg-bubble {
    background: var(--bs-body-bg) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    border-top-left-radius: 6px !important;
    padding: 12px 16px !important;
}
.pm-msg-row.self .pm-msg-bubble {
    background: linear-gradient(135deg, #1d9bf0 0%, #1a8cd8 100%) !important;
    border-top-right-radius: 6px !important;
    box-shadow: 0 3px 12px rgba(29, 155, 240, 0.28) !important;
    padding: 12px 16px !important;
}
.pm-chat-input textarea {
    background: var(--bs-body-bg) !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 16px !important;
    transition: all .2s ease !important;
}
.pm-chat-input textarea:hover {
    border-color: #d1d5db !important;
    background: #fff !important;
}
.pm-chat-input textarea:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 4px rgba(29, 155, 240, 0.12) !important;
    background: #fff !important;
}
.pm-send-btn-wrap .btn.btn-primary { padding: 8px 24px !important; }
.pm-send-hint kbd {
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    color: #4b5563 !important;
}

/* ============ 暗色模式下的私信页面：深灰/黑对应 ============ */
[data-bs-theme="dark"] .pm-chat-wrap {
    border-color: #2a2a2a !important;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5) !important;
}
[data-bs-theme="dark"] .pm-conv-list {
    background: linear-gradient(180deg, #141414 0%, #181818 100%) !important;
    border-right-color: #2a2a2a !important;
}
[data-bs-theme="dark"] .pm-conv-header {
    background: linear-gradient(180deg, #141414 0%, #181818 100%) !important;
    border-bottom-color: #2a2a2a !important;
}
[data-bs-theme="dark"] .pm-conv-item:hover {
    background-color: #212121 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
[data-bs-theme="dark"] .pm-conv-item.active {
    background: linear-gradient(90deg, #0c4a6e 0%, #082f49 100%) !important;
    border-left-color: #1d9bf0 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4) !important;
}
[data-bs-theme="dark"] .pm-chat-main {
    background: linear-gradient(180deg, #141414 0%, #111111 100%) !important;
}
[data-bs-theme="dark"] .pm-chat-empty i { color: #1d9bf0 !important; }
[data-bs-theme="dark"] .pm-chat-empty h6 { color: #e1e1e1 !important; }
[data-bs-theme="dark"] .pm-chat-empty p  { color: #838282 !important; }
[data-bs-theme="dark"] .pm-chat-header {
    background: linear-gradient(180deg, #141414 0%, #181818 100%) !important;
    border-bottom-color: #2a2a2a !important;
}
[data-bs-theme="dark"] .pm-chat-body {
    background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%) !important;
}
[data-bs-theme="dark"] .pm-msg-row.other .pm-msg-bubble {
    border-color: #303030 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4) !important;
}
[data-bs-theme="dark"] .pm-chat-input {
    background: linear-gradient(180deg, #141414 0%, #181818 100%) !important;
    border-top-color: #2a2a2a !important;
}
[data-bs-theme="dark"] .pm-chat-input textarea {
    border-color: #303030 !important;
}
[data-bs-theme="dark"] .pm-chat-input textarea:hover {
    border-color: #404040 !important;
}
[data-bs-theme="dark"] .pm-chat-body > div[style*="text-align:center"] {
    background-color: #212121 !important;
    color: #a0a0a0 !important;
}

/* ========== 帖子页：未登录评论区提示卡（白+浅灰绿、柔和精致） ========== */
.x-guest-reply-card {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    padding: 36px 28px !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    position: relative !important;
}
.x-guest-reply-card::before {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 160px; height: 160px;
    background: radial-gradient(circle, rgba(29,155,240,0.08) 0%, rgba(29,155,240,0) 70%);
    pointer-events: none;
}
.x-guest-reply-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}
.x-guest-reply-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1a8cd8;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.7), 0 4px 14px rgba(29,155,240,0.14);
    animation: xGuestFloat 4.5s ease-in-out infinite;
}
.x-guest-reply-icon i {
    font-size: 34px;
}
@keyframes xGuestFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.x-guest-reply-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}
.x-guest-reply-tip {
    font-size: 13px !important;
    color: #6b7280 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.7 !important;
    max-width: 420px;
}
.x-guest-reply-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 6px;
}
.x-guest-reply-btn {
    padding: 7px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    box-shadow: 0 3px 10px rgba(29, 155, 240, 0.18) !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.x-guest-reply-btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(29, 155, 240, 0.24) !important;
    filter: brightness(1.03) !important;
}
.x-guest-reply-btn-outline {
    background: #fff !important;
    border-color: rgba(29, 155, 240, 0.35) !important;
    color: var(--bs-primary) !important;
    box-shadow: 0 2px 8px rgba(29, 155, 240, 0.08) !important;
}
.x-guest-reply-btn-outline:hover {
    background: rgba(29, 155, 240, 0.04) !important;
}
/* 深色模式适配 */
[data-bs-theme="dark"] .x-guest-reply-card {
    background: linear-gradient(180deg, #141414 0%, #181818 100%) !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4) !important;
}
[data-bs-theme="dark"] .x-guest-reply-icon {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%);
    color: #60a5fa;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.08), 0 4px 14px rgba(0,0,0,0.35);
}
[data-bs-theme="dark"] .x-guest-reply-title { color: #e1e1e1 !important; }
[data-bs-theme="dark"] .x-guest-reply-tip   { color: #838282 !important; }
[data-bs-theme="dark"] .x-guest-reply-btn-outline {
    background: #141414 !important;
    border-color: rgba(29, 155, 240, 0.5) !important;
}
/* =========================================================================================== */

/* ============== 全站下拉框 Select 统一美化：白灰描边 + 胶囊圆角 + 自定义箭头 + 绿色焦点态 ============== */
select.form-select,
select.form-control,
select.xnv-form-select,
select.post-fid-select,
select.post-fid-category-select,
.x-select,
select[name="fid"],
select[name="xnv_visibility"],
.form-select,
select {
    /* 统一覆盖 select 元素外观 */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;

    /* 浅灰描边 */
    border: 1px solid #d1d5db !important;
    border-radius: 999px !important;         /* 胶囊圆角 */
    background-color: #ffffff !important;    /* 纯白背景 */
    padding: 7px 38px 7px 16px !important;
    font-size: 0.88rem;
    color: #374151 !important;
    min-height: 36px;
    line-height: 1.4;

    /* 自定义下拉箭头 SVG（深灰小三角） */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;

    /* 柔和阴影 + hover 轻微上浮 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all .2s ease;
    cursor: pointer;
}
/* 去除 Firefox 原生下拉箭头 */
select.form-select::-ms-expand,
.form-select::-ms-expand,
select::-ms-expand { display: none !important; }

/* hover：描边加深 */
select.form-select:hover,
select.form-control:hover,
select.xnv-form-select:hover,
select.post-fid-select:hover,
select.post-fid-category-select:hover,
.x-select:hover,
.form-select:hover,
select:hover {
    border-color: #9ca3af !important;
    background-color: #f9fafb !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}
/* focus：绿色高亮，去除蓝色 outline */
select.form-select:focus,
select.form-control:focus,
select.xnv-form-select:focus,
select.post-fid-select:focus,
select.post-fid-category-select:focus,
.x-select:focus,
.form-select:focus,
select:focus {
    outline: none !important;
    border-color: #1d9bf0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.18) !important;
    color: #374151 !important;
}
/* disabled 态 */
select:disabled,
.form-select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: #f3f4f6 !important;
}
/* option 下拉项：和主题色协调（浏览器支持有限，尽量美化） */
select.form-select option,
.form-select option,
select option {
    background-color: #ffffff !important;
    color: #374151 !important;
    padding: 10px 14px;
    font-size: 0.88rem;
    line-height: 1.6;
    min-height: 34px;
}
/* optgroup 分组标签：加粗 + 缩进 + 浅绿灰底，让分区看起来更清晰 */
select.form-select optgroup,
.form-select optgroup,
select optgroup {
    background-color: #f0f7ff !important;
    color: #1a8cd8 !important;
    font-weight: 700 !important;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    padding: 8px 12px 4px 12px;
    margin-top: 4px;
    border-top: 1px solid #d1d5db;
}
select.form-select optgroup:first-child,
.form-select optgroup:first-child,
select optgroup:first-child {
    border-top: 0;
    margin-top: 0;
}
/* optgroup 下的子 option 缩进一点，和分组标签区分 */
select.form-select optgroup option,
.form-select optgroup option,
select optgroup option {
    padding-left: 28px !important;
    background-color: #ffffff !important;
}

/* ========== 发帖页：单级版块下拉框特化美化（更大、更醒目） ========== */
select.post-fid-select-single {
    min-height: 44px !important;
    padding: 10px 46px 10px 20px !important;
    font-size: 0.95rem !important;
    border-radius: 14px !important;
    background-position: right 16px center !important;
    background-size: 18px 18px !important;
    border-width: 1.5px !important;
    font-weight: 500;
}
select.post-fid-select-single:hover {
    transform: translateY(-1px);
}
select.post-fid-select-single:focus {
    transform: translateY(-1px);
}

/* ========== 全局下拉框：WebKit 滚动条美化（下拉展开时的滚动条） ========== */
select::-webkit-scrollbar,
.form-select::-webkit-scrollbar {
    width: 8px;
}
select::-webkit-scrollbar-track,
.form-select::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 999px;
}
select::-webkit-scrollbar-thumb,
.form-select::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #9ca3af 0%, #6b7280 100%);
    border-radius: 999px;
    border: 1px solid #f3f4f6;
}
select::-webkit-scrollbar-thumb:hover,
.form-select::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #6b7280 0%, #4b5563 100%);
}

/* ==================== 暗色模式下的下拉框 ==================== */
[data-bs-theme="dark"] select.form-select,
[data-bs-theme="dark"] select.form-control,
[data-bs-theme="dark"] select.xnv-form-select,
[data-bs-theme="dark"] select.post-fid-select,
[data-bs-theme="dark"] select.post-fid-category-select,
[data-bs-theme="dark"] .x-select,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select {
    border-color: #404040 !important;
    background-color: #141414 !important;
    color: #e1e1e1 !important;
    box-shadow: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
}
[data-bs-theme="dark"] select.form-select:hover,
[data-bs-theme="dark"] .form-select:hover {
    border-color: #505050 !important;
    background-color: #212121 !important;
}
[data-bs-theme="dark"] select.form-select:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: #1d9bf0 !important;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.28) !important;
    background-color: #141414 !important;
}

/* ============== 发帖页：付费金币输入框美化 ============== */
.xnv-price-wrap .input-group-text {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border: 1px solid #d1d5db !important;
    color: #1a8cd8 !important;
    border-right: none;
    border-radius: 999px 0 0 999px !important;
    padding: 7px 14px;
    font-size: 0.86rem;
    white-space: nowrap;
}
.xnv-price-wrap .input-group-text i { margin-right: 4px; }
.xnv-price-wrap input.form-control {
    border: 1px solid #d1d5db !important;
    border-left: none;
    border-radius: 0 999px 999px 0 !important;
    background-color: #ffffff;
    color: #374151;
    padding: 7px 14px 7px 10px;
    font-weight: 600;
    font-size: 0.92rem;
}
.xnv-price-wrap input.form-control:focus {
    outline: none !important;
    border-color: #1d9bf0 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.18) !important;
}
[data-bs-theme="dark"] .xnv-price-wrap .input-group-text {
    background: linear-gradient(180deg, #141414 0%, #181818 100%) !important;
    border-color: #303030 !important;
    color: #60a5fa !important;
}
[data-bs-theme="dark"] .xnv-price-wrap input.form-control {
    border-color: #303030 !important;
    background-color: #141414 !important;
    color: #e1e1e1 !important;
}
[data-bs-theme="dark"] .xnv-price-wrap input.form-control:focus {
    border-color: #1d9bf0 !important;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.28) !important;
}

/* ============== 可见性提示文字 ============== */
#xnvHelpText {
    color: #6b7280 !important;
    line-height: 1.5;
}
[data-bs-theme="dark"] #xnvHelpText {
    color: #9ca3af !important;
}

/* =========================================================================================== */
/* ==================== 内容可见性拦截卡片（回复可见 / 付费可见）白+浅灰绿美化 ==================== */
.xnv-lock-card {
    position: relative;
    border-radius: 18px;
    padding: 28px 24px;
    margin: 18px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f7f8fa 100%) !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    /* 关键修复：强制卡片容器居中，避免被帖子正文的 text-align: justify / left 覆盖 */
    text-align: center !important;
    overflow: hidden;
    box-sizing: border-box;
}
/* 暴力兜底：锁卡片内所有子元素文字居中，不继承正文区的 justify/left */
body .xnv-lock-card > *,
body .xnv-lock-card h1, body .xnv-lock-card h2, body .xnv-lock-card h3,
body .xnv-lock-card h4, body .xnv-lock-card h5, body .xnv-lock-card h6,
body .xnv-lock-card p,
body .xnv-lock-card span,
body .xnv-lock-card .xnv-lock-title,
body .xnv-lock-card .xnv-lock-desc {
    text-align: center !important;
}
.xnv-lock-card::before {
    /* 顶部装饰条：绿色渐变 */
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1d9bf0 0%, #60a5fa 50%, #1d9bf0 100%);
}
.xnv-lock-icon {
    width: 64px; height: 64px;
    margin: 4px auto 14px auto !important;  /* 强制水平居中 */
    border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1a8cd8;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.7), 0 4px 14px rgba(29, 155, 240, 0.14);
    font-size: 28px;
}
.xnv-lock-icon.xnv-paid-icon {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #b45309;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.8), 0 4px 16px rgba(234, 179, 8, 0.22);
}
.xnv-lock-title {
    font-size: 1.12rem;
    font-weight: 700;
    color: #374151 !important;
    margin: 6px auto 8px auto !important;   /* 强制居中 */
    width: 100%;
    text-align: center !important;
}
.xnv-lock-desc {
    color: #6b7280 !important;
    font-size: 0.9rem;
    line-height: 1.75;
    /* 修复：保留舒适的阅读宽度，同时整个盒子和内部文字都居中 */
    max-width: 520px;
    width: 100%;
    margin: 0 auto 16px auto !important;
    padding: 0 4px;
    text-align: center !important;
    box-sizing: border-box;
}
/* 价格行：flex 居中，如果屏幕窄自动换行，但整体依然居中 */
.xnv-price-row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 auto 18px auto !important;
    width: 100%;
    text-align: center !important;
}
.xnv-price-badge, .xnv-balance {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #ffffff;
    font-size: 0.88rem;
    color: #4b5563;
}
.xnv-balance { background: #eff6ff; border-color: #7dd3fc; }
.xnv-price-label { color: #6b7280; font-size: 0.82rem; }
.xnv-price-num {
    font-weight: 800;
    font-size: 1.1rem;
    color: #b45309;
}

/* 按钮通用 */
.xnv-btn {
    border-radius: 999px !important;
    padding: 10px 22px;
    font-size: 0.92rem;
    font-weight: 600;
    border: none !important;
    transition: all .2s ease;
    box-shadow: 0 3px 10px rgba(29, 155, 240, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.xnv-btn-reply {
    background: linear-gradient(180deg, #2fb7ff 0%, #1d9bf0 100%) !important;
    color: #ffffff !important;
}
.xnv-btn-reply:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(29, 155, 240, 0.28) !important;
}
.xnv-btn-paid {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.28);
}
.xnv-btn-paid:hover {
    filter: brightness(1.05);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.36) !important;
}
.xnv-btn-paid:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none !important;
}

/* 暗色模式：拦截卡片 */
[data-bs-theme="dark"] .xnv-lock-card {
    background: linear-gradient(180deg, #141414 0%, #181818 100%) !important;
    border-color: #2a2a2a !important;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255,255,255,0.03);
}
[data-bs-theme="dark"] .xnv-lock-title { color: #e1e1e1 !important; }
[data-bs-theme="dark"] .xnv-lock-desc { color: #838282 !important; }
[data-bs-theme="dark"] .xnv-lock-icon {
    background: linear-gradient(135deg, #0c4a6e 0%, #0369a1 100%);
    color: #60a5fa;
    box-shadow: inset 0 2px 6px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.35);
}
[data-bs-theme="dark"] .xnv-lock-icon.xnv-paid-icon {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    color: #fbbf24;
}
[data-bs-theme="dark"] .xnv-price-badge,
[data-bs-theme="dark"] .xnv-balance {
    background: #141414;
    border-color: #303030;
    color: #d1d5db;
}
[data-bs-theme="dark"] .xnv-price-label { color: #9ca3af; }
[data-bs-theme="dark"] .xnv-price-num { color: #fbbf24; }
[data-bs-theme="dark"] .xnv-btn-reply {
    background: linear-gradient(180deg, #1d9bf0 0%, #1a8cd8 100%) !important;
    color: #ffffff !important;
    border: 1px solid #0369a1 !important;
}
[data-bs-theme="dark"] .xnv-btn-paid {
    background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%) !important;
    color: #ffffff !important;
    border: 1px solid #92400e !important;
}

/* =========================================================================================== */
/* ================ 修复：Toast 提示在土色主题下“全白显示不正常”（高对比度重写） ================ */
/* Xiuno 的 toast 会强制加 text-white，浅土色主题里 bg-warning/bg-info 等背景 + 白字几乎不可见，
   这里强制覆盖：统一用深/纯底色 + 保证文字/按钮对比度；同时圆角、阴影更符合土色主题。 */
.toast-container { pointer-events: auto; }
.toast {
    --x-toast-radius: 14px;
    border-radius: var(--x-toast-radius) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08) !important;
    overflow: hidden;
    min-width: 260px;
    max-width: 360px;
    /* 强制覆盖 bg-* 类，保证不被浅色系 theme 变量冲淡 */
    color: #fff !important;
    border: 0 !important;
}
.toast .toast-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: #fff !important;
    padding: 10px 14px 10px 16px;
}
.toast .btn-close,
.toast .btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.85;
}
/* 各类型 toast：用深纯色（不透明）+ 左装饰条，保证白字对比度 */
.toast.bg-primary,
.toast.bg-primary.show {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(37,99,235,0.35), 0 2px 6px rgba(37,99,235,0.18) !important;
}
.toast.bg-success,
.toast.bg-success.show {
    background: linear-gradient(135deg, #1d9bf0 0%, #1a8cd8 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(29,155,240,0.32), 0 2px 6px rgba(29,155,240,0.16) !important;
}
.toast.bg-danger,
.toast.bg-danger.show {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(220,38,38,0.32), 0 2px 6px rgba(220,38,38,0.16) !important;
}
/* warning：浅黄背景 → 改成深橙色，白字依然可读；保留 Bootstrap text-dark 兼容 */
.toast.bg-warning,
.toast.bg-warning.show {
    background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(234,88,12,0.32), 0 2px 6px rgba(234,88,12,0.16) !important;
}
.toast.bg-warning * { color: #fff !important; }

/* 暗色模式 toast：稍微饱和一点 */
[data-bs-theme="dark"] .toast.bg-primary.show {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
}
[data-bs-theme="dark"] .toast.bg-success.show {
    background: linear-gradient(135deg, #2fb7ff 0%, #1a8cd8 100%) !important;
}
[data-bs-theme="dark"] .toast.bg-danger.show {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%) !important;
}
[data-bs-theme="dark"] .toast.bg-warning.show {
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%) !important;
}

/* =========================================================================================== */
/* ============= 帖子可见性：3 选卡片单选（正常浏览 / 回复可见 / 付费阅读）—— 紧凑白+浅灰绿 ============= */
#xnvCardGroup { position: relative; }
.xnv-card {
    --xnv-bg:        #ffffff;
    --xnv-border:    #e5e7eb;
    --xnv-icon-bg:   linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    --xnv-icon:      #4b5563;
    --xnv-title:     #374151;
    --xnv-desc:      #6b7280;
    --xnv-ring:      rgba(29,155,240,0.25);
    --xnv-sel-bg:    linear-gradient(180deg, #eff6ff 0%, #c7e0ff 100%);
    --xnv-sel-bd:    #1d9bf0;
    --xnv-sel-icon-bg: linear-gradient(135deg, #2fb7ff 0%, #1d9bf0 100%);
    --xnv-sel-icon:  #ffffff;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 10px 52px;
    min-height: 60px;
    height: 100%;
    cursor: pointer;
    user-select: none;
    background: var(--xnv-bg);
    border: 1.5px solid var(--xnv-border);
    border-radius: 12px;
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.04);
    color: inherit;
    text-decoration: none;
}
.xnv-card:hover {
    transform: translateY(-1px);
    border-color: #9ca3af;
    box-shadow: 0 3px 8px rgba(0,0,0,0.06), 0 8px 22px rgba(0,0,0,0.06);
}
.xnv-card:active { transform: translateY(0) scale(0.997); }
.xnv-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--xnv-ring);
    border-color: #1d9bf0;
}
.xnv-card.is-selected {
    background: var(--xnv-sel-bg);
    border-color: var(--xnv-sel-bd);
    box-shadow: 0 3px 10px rgba(29,155,240,0.18), 0 10px 26px rgba(29,155,240,0.10);
}
/* 左图标块（紧凑版）*/
.xnv-card-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--xnv-icon-bg);
    color: var(--xnv-icon);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 8px rgba(0,0,0,0.06);
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    flex-shrink: 0;
}
.xnv-card-icon i { font-size: 16px; line-height: 1; }
.xnv-card.is-selected .xnv-card-icon {
    background: var(--xnv-sel-icon-bg);
    color: var(--xnv-sel-icon);
    box-shadow: 0 3px 10px rgba(29,155,240,0.28);
}
/* 标题 + 描述：横向堆叠，避免高度不一致 */
.xnv-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    gap: 2px;
    flex: 1 1 auto;
}
.xnv-card-title {
    font-size: .92rem;
    font-weight: 700;
    letter-spacing: .2px;
    color: var(--xnv-title);
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xnv-card.is-selected .xnv-card-title { color: #0369a1; }
.xnv-card-desc {
    font-size: .74rem;
    line-height: 1.3;
    color: var(--xnv-desc);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.xnv-card.is-selected .xnv-card-desc { color: #1a8cd8; }

/* 右上勾选徽章（选中时显现） */
.xnv-card-check {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(29,155,240,0);
    color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .18s ease;
    font-size: 11px;
    flex-shrink: 0;
}
.xnv-card.is-selected .xnv-card-check {
    background: linear-gradient(135deg, #2fb7ff 0%, #1d9bf0 100%);
    color: #ffffff;
    opacity: 1;
    transform: translateY(-50%) scale(1);
    box-shadow: 0 3px 10px rgba(29,155,240,0.28);
}

/* 手机端（<576px）：保持一行布局不变，图标再缩一点，按钮不用拉到底 */
@media (max-width: 575.98px) {
    #xnvCardGroup .row { gap: 8px 0; }
    .xnv-card {
        min-height: 52px;
        padding: 8px 12px 8px 44px;
        border-radius: 10px;
    }
    .xnv-card-icon {
        width: 26px;
        height: 26px;
        left: 8px;
        border-radius: 7px;
    }
    .xnv-card-icon i { font-size: 14px; }
    .xnv-card-title { font-size: .88rem; }
    .xnv-card-desc  { font-size: .72rem; }
}

/* 付费金币输入容器（跟随卡片下方展开）—— 紧凑型 */
#xnvCardGroup .xnv-price-wrap {
    background: linear-gradient(180deg, #eff6ff 0%, #c7e0ff 100%);
    border: 1.5px dashed #93c5fd;
    animation: xnv-price-in .22s ease both;
}
@keyframes xnv-price-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
#xnvCardGroup .xnv-price-wrap .input-group-text {
    background: #bfdbfe;
    border-color: #93c5fd;
    color: #0369a1;
    padding: .25rem .5rem;
}
#xnvCardGroup .xnv-price-wrap .form-control {
    border-color: #93c5fd;
    background: #ffffff;
    color: #374151;
    font-weight: 600;
    font-size: .86rem;
    padding: .25rem .5rem;
}
#xnvCardGroup .xnv-price-wrap .form-control:focus {
    border-color: #1d9bf0;
    box-shadow: 0 0 0 3px rgba(29,155,240,0.20);
}

/* 暗色模式 */
[data-bs-theme="dark"] .xnv-card {
    --xnv-bg:        #141414;
    --xnv-border:    #303030;
    --xnv-icon-bg:   linear-gradient(135deg, #212121 0%, #2a2a2a 100%);
    --xnv-icon:      #9ca3af;
    --xnv-title:     #e1e1e1;
    --xnv-desc:      #838282;
    --xnv-ring:      rgba(29,155,240,0.25);
    --xnv-sel-bg:    linear-gradient(180deg, #0c4a6e 0%, #082f49 100%);
    --xnv-sel-bd:    #1d9bf0;
    --xnv-sel-icon-bg: linear-gradient(135deg, #1d9bf0 0%, #1a8cd8 100%);
    --xnv-sel-icon:  #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.35);
}
[data-bs-theme="dark"] .xnv-card.is-selected {
    box-shadow: 0 3px 10px rgba(29,155,240,0.24), 0 10px 26px rgba(0,0,0,0.5);
}
[data-bs-theme="dark"] .xnv-card.is-selected .xnv-card-title { color: #60a5fa; }
[data-bs-theme="dark"] .xnv-card.is-selected .xnv-card-desc  { color: #93c5fd; }
[data-bs-theme="dark"] #xnvCardGroup .xnv-price-wrap {
    background: linear-gradient(180deg, #0c4a6e 0%, #082f49 100%);
    border-color: #0369a1;
}
[data-bs-theme="dark"] #xnvCardGroup .xnv-price-wrap .input-group-text {
    background: #0c4a6e;
    border-color: #0369a1;
    color: #60a5fa;
}
[data-bs-theme="dark"] #xnvCardGroup .xnv-price-wrap .form-control {
    background: #141414;
    border-color: #0369a1;
    color: #e1e1e1;
}

/* ==========================================================================================================
   ============================================ X (Twitter) 风格主题 =========================================
   核心特征：极简黑白灰 + #1d9bf0 品牌蓝 + 1px 细线边框 + 无阴影 + hover 微变色
   ========================================================================================================== */

/* ========== X 主题：CSS 变量覆盖 ========== */
[data-bs-theme="x"] {
    /* 品牌色：X 蓝 */
    --bs-primary: #1d9bf0;
    --bs-primary-rgb: 29, 155, 240;
    --bs-link-color: #1d9bf0;
    --bs-link-color-hover: #1a8cd8;

    /* 组件背景：纯白 */
    --bs-body-bg: #ffffff;
    --bs-body-color: #0f1419;

    /* 次级色：X 经典灰 */
    --bs-secondary-color: #536471;
    --bs-secondary-bg: #f7f9f9;
    --bs-tertiary-bg: #eff3f4;

    /* 边框色：极淡灰线（X 的分割线特色） */
    --bs-border-color: #eff3f4;
    --bs-border-color-translucent: #eff3f4;

    /* 页面背景：纯白（X 也是白底内容） */
    --x-page-bg: #ffffff;

    /* 圆角：X 风格中等圆角 */
    --bs-border-radius: 8px;
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: 12px;
    --bs-border-radius-xl: 16px;
}

/* ========== X 主题：全局基底 ========== */
[data-bs-theme="x"] body {
    background-color: var(--x-page-bg);
    color: var(--bs-body-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

/* ========== X 主题：卡片 & 列表组件（去掉阴影 + 细线边框） ========== */
[data-bs-theme="x"] .x-card,
[data-bs-theme="x"] .card {
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    border: 1px solid var(--bs-border-color);
    border-radius: 0;
    box-shadow: none;
    /* X 特色：只有底部/侧边细线分割 */
}
[data-bs-theme="x"] .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 14px 18px;
}
[data-bs-theme="x"] .card-body {
    padding: 18px;
}

/* 帖子列表：X 时间线风格（每条帖子都是一个带底边线的区块） */
[data-bs-theme="x"] .list-mode {
    background-color: #ffffff;
    border-radius: 0;
    border: none;           /* ⭐ 去掉左右两侧多余竖线 */
}
[data-bs-theme="x"] .threadlist.list-none {
    background-color: #ffffff;
    border: none;
    border-radius: 0;
}
[data-bs-theme="x"] .thread-list-item,
[data-bs-theme="x"] .hot-thread-item {
    background-color: #ffffff;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
    box-shadow: none;
    padding: 8px 18px;  /* 上下间距从14px缩到8px，消除红线空白多 */
    transition: background-color 0.15s ease;
}
[data-bs-theme="x"] .thread-list-item:hover,
[data-bs-theme="x"] .hot-thread-item:hover {
    background-color: #f7f9f9;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--bs-border-color);
    border-radius: 0;
}

/* ========== X 主题：三栏布局（中间内容区有左右边线） ========== */
[data-bs-theme="x"] main#body,
[data-bs-theme="x"] #body {
    border-left: 1px solid var(--bs-border-color);
    border-right: 1px solid var(--bs-border-color);
    min-height: 100vh;
}

/* ========== X 主题：按钮（实心蓝 + 胶囊圆角 + hover 深一点） ========== */
[data-bs-theme="x"] .btn-primary {
    background-color: var(--bs-primary);
    color: #ffffff;
    border: none;
    border-radius: 9999px;
    font-weight: 700;
    padding: 8px 20px;
    transition: background-color 0.15s ease;
    box-shadow: none;
}
[data-bs-theme="x"] .btn-primary:hover {
    background-color: #1a8cd8;
    box-shadow: none;
}
[data-bs-theme="x"] .btn-primary:active {
    background-color: #177dc0;
}
[data-bs-theme="x"] .btn-outline-secondary,
[data-bs-theme="x"] .btn-outline-primary {
    border-radius: 9999px;
    font-weight: 600;
    border: 1px solid #cfd9de;
    background-color: #ffffff;
    color: #0f1419;
    transition: background-color 0.15s ease;
    box-shadow: none;
}
[data-bs-theme="x"] .btn-outline-secondary:hover,
[data-bs-theme="x"] .btn-outline-primary:hover {
    background-color: #f7f9f9;
    border-color: #cfd9de;
    color: #0f1419;
}
[data-bs-theme="x"] .nav-link.btn,
[data-bs-theme="x"] .nav-btn.btn {
    border-radius: 9999px;
    font-weight: 500;
    transition: background-color 0.15s ease;
}

/* ========== X 主题：导航 Tabs（下划线风格，无背景） ========== */
[data-bs-theme="x"] .nav-tabs,
[data-bs-theme="x"] .thread-nav-tabs {
    border-bottom: 1px solid var(--bs-border-color);
    background-color: #ffffff;
}
[data-bs-theme="x"] .thread-nav-tabs .nav-link {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #536471;
    font-weight: 500;
    padding: 14px 18px;
    position: relative;
    transition: background-color 0.15s ease, color 0.15s ease;
}
[data-bs-theme="x"] .thread-nav-tabs .nav-link:hover {
    background-color: #f7f9f9;
    color: #0f1419;
}
[data-bs-theme="x"] .thread-nav-tabs .nav-link.active {
    background-color: transparent;
    border: none;
    color: #0f1419;
    font-weight: 700;
}
[data-bs-theme="x"] .thread-nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1px;
    width: 40%;
    height: 4px;
    border-radius: 9999px;
    background-color: var(--bs-primary);
}

/* ========== X 主题：表单输入（极简边框 + 聚焦蓝边光环） ========== */
[data-bs-theme="x"] .form-control,
[data-bs-theme="x"] input[type="text"],
[data-bs-theme="x"] input[type="email"],
[data-bs-theme="x"] textarea,
[data-bs-theme="x"] .post-input {
    background-color: #ffffff;
    border: 1px solid #cfd9de;
    border-radius: 8px;
    color: #0f1419;
    padding: 10px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[data-bs-theme="x"] .form-control:focus,
[data-bs-theme="x"] input:focus,
[data-bs-theme="x"] textarea:focus,
[data-bs-theme="x"] .post-input:focus {
    outline: none;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.2);
    background-color: #ffffff;
    color: #0f1419;
}

/* ========== X 主题：Select 下拉框（覆盖土色系为 X 风） ========== */
[data-bs-theme="x"] select,
[data-bs-theme="x"] select.form-select,
[data-bs-theme="x"] select.xnv-form-select,
[data-bs-theme="x"] select.post-fid-select,
[data-bs-theme="x"] .form-select {
    appearance: none !important;
    -webkit-appearance: none !important;

    background-color: #ffffff !important;
    border: 1px solid #cfd9de !important;
    border-radius: 9999px !important;
    color: #0f1419 !important;

    padding: 8px 40px 8px 16px !important;
    font-size: 0.9rem;
    font-weight: 500;
    min-height: 40px;
    line-height: 1.5;

    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23536471' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px 16px !important;

    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    cursor: pointer;
}
[data-bs-theme="x"] select:hover,
[data-bs-theme="x"] select.form-select:hover,
[data-bs-theme="x"] .form-select:hover {
    background-color: #f7f9f9 !important;
    border-color: #cfd9de !important;
    box-shadow: none !important;
}
[data-bs-theme="x"] select:focus,
[data-bs-theme="x"] select.form-select:focus,
[data-bs-theme="x"] .form-select:focus {
    outline: none !important;
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.2) !important;
    background-color: #ffffff !important;
    color: #0f1419 !important;
}
/* X 主题：发帖页单级版块下拉框放大 */
[data-bs-theme="x"] select.post-fid-select-single {
    min-height: 48px !important;
    padding: 10px 46px 10px 20px !important;
    font-size: 0.95rem !important;
    border-radius: 12px !important;
    border-width: 1px !important;
}

/* X 主题：select option/optgroup 样式 */
[data-bs-theme="x"] select option,
[data-bs-theme="x"] .form-select option {
    background-color: #ffffff !important;
    color: #0f1419 !important;
    padding: 10px 14px;
    font-size: 0.9rem;
    line-height: 1.5;
    min-height: 32px;
}
[data-bs-theme="x"] select optgroup,
[data-bs-theme="x"] .form-select optgroup {
    background-color: #f7f9f9 !important;
    color: #536471 !important;
    font-weight: 700 !important;
    font-size: 0.82rem;
    padding: 8px 12px 4px;
    margin-top: 4px;
    border-top: 1px solid #eff3f4;
}
[data-bs-theme="x"] select optgroup:first-child,
[data-bs-theme="x"] .form-select optgroup:first-child {
    border-top: 0;
    margin-top: 0;
}
[data-bs-theme="x"] select optgroup option,
[data-bs-theme="x"] .form-select optgroup option {
    padding-left: 28px !important;
    background-color: #ffffff !important;
}

/* ========== X 主题：超链接（X 蓝 hover） ========== */
[data-bs-theme="x"] a {
    color: #0f1419;
    transition: color 0.15s ease;
}
[data-bs-theme="x"] a:hover {
    color: var(--bs-primary);
}

/* ========== X 主题：Badge（圆角胶囊 + 黑底白字或灰底黑字） ========== */
[data-bs-theme="x"] .badge {
    border-radius: 9999px;
    font-weight: 600;
    padding: 4px 10px;
}
[data-bs-theme="x"] .badge.bg-secondary {
    background-color: #eff3f4 !important;
    color: #536471 !important;
}
[data-bs-theme="x"] .badge.bg-primary {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

/* ========== X 主题：侧边栏卡片（极简、无边框或细线、hover 变色） ========== */
[data-bs-theme="x"] #sidebar-left .card,
[data-bs-theme="x"] #sidebar-right .card,
[data-bs-theme="x"] .xnx-lp-card,
[data-bs-theme="x"] .xnx-nu-card,
[data-bs-theme="x"] .xnx-fl-card {
    background-color: #f7f9f9;
    border: none;
    border-radius: 16px;
    box-shadow: none;
    margin-bottom: 14px;
    overflow: hidden;
}
[data-bs-theme="x"] #sidebar-right .card-header,
[data-bs-theme="x"] .xnx-lp-header,
[data-bs-theme="x"] .xnx-nu-header,
[data-bs-theme="x"] .xnx-fl-header {
    background-color: transparent;
    border-bottom: none;
    padding: 14px 16px 8px;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0f1419;
}
[data-bs-theme="x"] #sidebar-right .card-body,
[data-bs-theme="x"] .xnx-lp-body,
[data-bs-theme="x"] .xnx-nu-body,
[data-bs-theme="x"] .xnx-fl-body {
    padding: 0 16px 14px;
}

/* ========== X 主题：Header 顶部导航（细线底边 + 白背景） ========== */
[data-bs-theme="x"] #header-nav,
[data-bs-theme="x"] .navbar,
[data-bs-theme="x"] header.site-header {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bs-border-color);
    color: #0f1419;
}

/* ========== X 主题：底部发布按钮（FAB） ========== */
[data-bs-theme="x"] .floating-action-btn,
[data-bs-theme="x"] #floating-post-btn {
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    box-shadow: 0 6px 16px rgba(29, 155, 240, 0.35) !important;
    font-weight: 700;
}
[data-bs-theme="x"] .floating-action-btn:hover,
[data-bs-theme="x"] #floating-post-btn:hover {
    background-color: #1a8cd8 !important;
    box-shadow: 0 8px 20px rgba(29, 155, 240, 0.45) !important;
}

/* ========== X 主题：暗色模式变体（[data-bs-theme="x-dark"] 可扩展） ========== */
/* 此处为浅色 X 主题，完整暗色可在未来加 x-dark */

/* === VIP 会员样式 === */
.vip-username {
    color: #9333ea !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
}
a:hover .vip-username {
    filter: brightness(1.1);
}
/* VIP 签名档链接正常显示（无安全提示特殊样式） */
.thread-signature-text a,
.thread-signature a,
.text-body-secondary a.signature-link {
    color: #6366f1 !important;
    text-decoration: none !important;
    border-bottom: none !important;
    opacity: 1 !important;
}
.thread-signature-text a:hover,
.thread-signature a:hover {
    color: #4f46e5 !important;
    text-decoration: underline !important;
}

/* ================================================================ */
/* ========== 帖子列表：两行布局（参考截图样式） ========== */
/* ================================================================ */

/* ========== 版块标签：卡片最右侧独立列 ========== */
.thread-forum-col {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    align-self: center !important;  /* 垂直居中在整个卡片高度内 */
    padding: 0 !important;
    margin: 0 !important;
}
/* 版块标签：透明背景（非白色）+ 浅灰色描边方框，轻微圆角 */
.thread-forum-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 26px !important;
    padding: 0 12px !important;
    border-radius: 4px !important;
    background-color: transparent !important;   /* 透明背景，不要白色 */
    color: #4b5563 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    transition: all 0.15s ease !important;
}
.thread-forum-tag:hover {
    border-color: #9ca3af !important;
    background-color: #f9fafb !important;
    color: #374151 !important;
}
/* 深色模式对应的版块胶囊 */
[data-bs-theme="dark"] .thread-forum-tag,
[data-bs-theme="x"] .thread-forum-tag {
    background-color: transparent !important;
    color: #9ca3af !important;
    border-color: #404040 !important;
}
[data-bs-theme="dark"] .thread-forum-tag:hover,
[data-bs-theme="x"] .thread-forum-tag:hover {
    background-color: #212121 !important;
    border-color: #505050 !important;
    color: #e5e7eb !important;
}

/* 通用：标题行单行截断，元信息行紧凑排列 */
.thread-list-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    min-width: 0 !important;
}
.thread-list-title-row > a {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}
/* 标题行内所有徽章/图标不收缩，保持单行 */
.thread-list-title-row .badge,
.thread-list-title-row img,
.thread-list-title-row svg {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
/* ⭐ 关键修复：标题（<a>链接）后的徽章（图片/视频/附件/锁帖/审核状态），
   与标题最后一个字之间空一格，不要紧贴着显得太拥挤
   ✨ 只选择器匹配 a.hover-text-primary 之后的兄弟 .badge，不影响前面的置顶/精华徽章 */
.thread-list-title-row a.hover-text-primary ~ .badge {
    margin-left: 0.375rem !important;  /* = Bootstrap ms-1.5，一格标准间距 */
}

/* 元信息行：单行横向排列，紧凑 */
.thread-list-meta-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    min-width: 0 !important;
    gap: 0 !important;
}
/* 元信息行内各段：允许收缩，末尾截断 */
.thread-list-meta-row > span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex-shrink: 1 !important;
}
/* 作者名段：优先级稍高，给多一点空间 */
.thread-list-meta-row .thread-meta-author {
    flex-shrink: 0.8 !important;
    max-width: 28% !important;
}
/* 最后回帖人：适度收缩 */
.thread-list-meta-row .thread-meta-lastuser {
    max-width: 22% !important;
}
/* 数字段（浏览/回复）：不收缩，固定最小空间 */
.thread-list-meta-row .thread-meta-views,
.thread-list-meta-row .thread-meta-replies {
    flex-shrink: 0 !important;
}
/* 时间段：不收缩 */
.thread-list-meta-row .thread-meta-lastdate {
    flex-shrink: 0 !important;
}
/* 元信息行内的 Tabler 图标（眼睛/消息/闪电）：尺寸和颜色随文字，紧凑 */
.thread-list-meta-row .ti,
.thread-list-meta-row [class^="ti-"] {
    font-size: 0.92em !important;     /* 比文字稍小一点，视觉不突兀 */
    line-height: 1 !important;
    vertical-align: -0.08em !important;
    color: inherit !important;         /* 跟随 span 的 #71767b 淡灰色，不单独变色 */
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}

/* ========== 手机端：强制两行，标题/元信息都不折行 ========== */
@media screen and (max-width: 767.98px) {
    .thread-list-item {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    .thread-list-content {
        display: block !important;
        /* 两行总高度：约 20px(title) + 4px(gap) + 16px(meta) = 40px */
        max-height: 44px !important;
        overflow: hidden !important;
    }
    /* 标题行：强制单行截断，即使有锁帖图标也挤在同一行 */
    .thread-list-title-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        height: 20px !important;
        line-height: 20px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    .thread-list-title-row > a {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 70% !important;      /* 防止标题太长，留 30% 给徽章和锁图标 */
        flex: 0 1 auto !important;      /* flex-grow=0：不占剩余空间，让锁/图片徽章紧贴标题后面 */
        min-width: 0 !important;
        vertical-align: middle !important;
    }
    /* 手机端：标题行徽章不换行，强制内联，缩小间距 */
    .thread-list-title-row .badge {
        display: inline-flex !important;
        align-items: center !important;
        padding: 1px 5px !important;
        font-size: 0.62em !important;
        margin-left: 2px !important;
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        line-height: 1.4 !important;
        height: 16px !important;
        vertical-align: middle !important;
    }
    /* 锁帖/图片等状态图标：缩小，不换行 */
    .thread-list-title-row img,
    .thread-list-title-row svg {
        width: 14px !important;
        height: 14px !important;
        margin-left: 2px !important;
        flex-shrink: 0 !important;
        vertical-align: middle !important;
    }

    /* 元信息行：强制单行，总高16px，紧凑 */
    .thread-list-meta-row {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        height: 16px !important;
        line-height: 16px !important;
        margin-top: 4px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }
    .thread-list-meta-row > span {
        display: inline-block !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        min-width: 0 !important;
        vertical-align: middle !important;
        margin-right: 0 !important;  /* 和桌面端一致，&nbsp; 负责紧凑间距 */
    }
    /* 作者名字，限制最大宽度，末尾截断（昵称短就按实际宽度，不会撑满） */
    .thread-list-meta-row .thread-meta-author {
        flex: 0 1 auto !important;
        max-width: 28% !important;
    }
    /* 浏览量、回复数数字：不收缩 */
    .thread-list-meta-row .thread-meta-views,
    .thread-list-meta-row .thread-meta-replies {
        flex: 0 0 auto !important;
    }
    /* 最后回帖人名：适度截断（回帖人短就按实际宽度，不会撑满） */
    .thread-list-meta-row .thread-meta-lastuser {
        flex: 0 1 auto !important;
        max-width: 22% !important;
    }
    /* 时间段：不收缩，末尾 */
    .thread-list-meta-row .thread-meta-lastdate {
        flex: 0 0 auto !important;
        margin-right: 0 !important;
    }
    /* 手机端：图标再缩小，避免挤 */
    .thread-list-meta-row .ti,
    .thread-list-meta-row [class^="ti-"] {
        font-size: 0.88em !important;
        vertical-align: -0.05em !important;
    }
    /* 手机端：因为加了3个图标，宽度更紧，作者/最后回帖人再收紧5%（仍按实际宽度，不强制撑满） */
    .thread-list-meta-row .thread-meta-author {
        flex: 0 1 auto !important;
        max-width: 22% !important;
    }
    .thread-list-meta-row .thread-meta-lastuser {
        flex: 0 1 auto !important;
        max-width: 17% !important;
    }
    /* ========== 手机端：右侧版块胶囊缩小，方框形（非胶囊），浅灰描边和桌面端一致 ========== */
    .thread-forum-col {
        flex-shrink: 0 !important;
        align-self: center !important;
        margin-left: 4px !important;
        display: flex !important;
        align-items: center !important;
    }
    .thread-forum-tag {
        height: 20px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
        border-radius: 4px !important;       /* 轻微圆角方形，和桌面端一致 */
        line-height: 1 !important;
        border: 1px solid #d1d5db !important; /* 浅灰描边，和桌面端一致 */
        background-color: transparent !important; /* 透明背景，不要白色 */
        color: #4b5563 !important;
    }
}

/* ================================================================ */
/* ========== 浅黄主题：日期徽章（时间胶囊）颜色柔化 ========== */
/* ================================================================ */

/* 首页/版块页/右侧栏：日期胶囊（蓝色背景 → 柔和X蓝底+蓝文字，避免太抢眼） */
.index-threadlist .badge.bg-primary,
.list-mode .badge.bg-primary,
.py-1.px-2 .badge.bg-primary,
#sidebar-right .badge.bg-primary,
#sidebar-right .xnx-stat-card + .badge.bg-primary,
#sidebar-right .card .badge.bg-primary {
    background-color: rgba(29, 155, 240, 0.12) !important;
    color: #1a8cd8 !important;
    border: 1px solid rgba(29, 155, 240, 0.18) !important;
}

/* 通用 badge 日期胶囊内的日历图标，颜色同步柔化 */
.index-threadlist .badge.bg-primary i,
.list-mode .badge.bg-primary i,
#sidebar-right .badge.bg-primary i {
    color: inherit !important;
    opacity: .85 !important;
}

/* ================================================================ */
/* ========== Tabs 容器（最新/最热/精华行）：宽度与帖子对齐+底部通栏 ========== */
/* ================================================================ */
.index-threadlist > .py-1.px-2.px-lg-3,
.list-mode > .py-1.px-2.px-lg-3 {
    /* ⭐ 用户要求去掉左右两条多余的竖线（"最新"左边、"新发帖"右边）
       → 所有边框全删，保持干净清爽，不加 border-left/right/top/bottom */
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;            /* padding与帖子列表项对齐 */
    margin: 0 !important;                     /* 去掉左右margin，宽度与帖子完全一致 */
    background-color: #ffffff;                 /* 白背景，与帖子列表卡片一致 */
}
[data-bs-theme="dark"] .index-threadlist > .py-1.px-2.px-lg-3,
[data-bs-theme="dark"] .list-mode > .py-1.px-2.px-lg-3 {
    background-color: #141414;
}

/* ⭐ 网站底部 Footer：纯白色背景，盖住背景网格，清爽不突兀 */
.bbs-footer,
.bbs-footer .bbs-footer-bottom {
    background-color: #ffffff !important;
    background-image: none !important;
}
/* 暗色模式下：深色背景，和导航栏/卡片一致 */
[data-bs-theme="dark"] .bbs-footer,
[data-bs-theme="dark"] .bbs-footer .bbs-footer-bottom {
    background-color: #141414 !important;
    background-image: none !important;
}

/* ⭐ 嵌入视频响应式容器（B站/优酷/外链）：统一 16:9 比例，防止"扁"
   双保险方案：aspect-ratio（现代CSS） + padding-top hack（兼容旧浏览器）
   使用方法：外层 div.video-embed-wrap 包裹 iframe/video */
.video-embed-wrap {
    position: relative;
    width: 100%;
    /* 双保险：aspect-ratio + padding-top 同时生效，始终 16:9 */
    aspect-ratio: 16 / 9;
    padding-top: 0;   /* 避免同时启用 hack，直接用原生 aspect-ratio */
    max-width: 900px; /* 桌面端不要拉太宽，900px 观感合适 */
    margin: 12px auto; /* 上下留空，居中 */
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* padding-top fallback：如果浏览器不支持 aspect-ratio，回退到经典 56.25% hack */
@supports not (aspect-ratio: 16 / 9) {
    .video-embed-wrap { aspect-ratio: unset; padding-top: 56.25%; }
}
/* 内部 iframe / video：绝对铺满，替代 inset:0（兼容性更好） */
.video-embed-wrap > iframe,
.video-embed-wrap > video {
    position: absolute;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #000 !important;
    display: block !important;
}
/* 中间层 div（用户直接粘贴 iframe 时，内层多包了一层 div）也要铺满 */
.video-embed-wrap > div {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
}
.video-embed-wrap > div > iframe,
.video-embed-wrap > div > video {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #000 !important;
    display: block !important;
}
/* 响应式：移动端去掉 max-width，全屏宽 */
@media (max-width: 768px) {
    .video-embed-wrap {
        max-width: 100%;
        margin: 8px auto;
        border-radius: 10px;
    }
}

/* 🔊 视频"静音自动播 + 首次手势开最大声"的遮罩按钮与文字提示 */
.xn-video-unmute-tip {
    position: absolute;
    left: 0; right: 0; top: 12px;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.3;
    text-shadow: 0 1px 3px rgba(0,0,0,.6);
    -webkit-text-shadow: 0 1px 3px rgba(0,0,0,.6);
    pointer-events: none;
    z-index: 4;
    transition: opacity .25s;
}
.xn-video-unmute-btn {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 58px; height: 58px;
    border-radius: 999px;
    background: rgba(0,0,0,.58);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    box-shadow: 0 6px 22px rgba(0,0,0,.32);
    border: 2px solid rgba(255,255,255,.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 5;
    transition: opacity .25s, transform .25s, background-color .2s;
}
.xn-video-unmute-btn:hover {
    background: rgba(0,0,0,.72);
    transform: translate(-50%, -50%) scale(1.08);
}
.xn-video-unmute-btn.is-hide,
.xn-video-unmute-tip.is-hide {
    opacity: 0 !important;
    pointer-events: none !important;
}
@media (max-width: 768px) {
    .xn-video-unmute-tip { font-size: 12px; top: 8px; }
    .xn-video-unmute-btn { width: 48px; height: 48px; font-size: 22px; }
}

/* ⭐ 导航栏头像（手机端/PC端通用）：强制正方形+正圆形，防止变形拉伸 */
.navbar .avatar,
.navbar img.avatar,
.navbar .avatar-sm,
.navbar img.avatar-sm,
.navbar .nav-icon-btn > img,
.navbar .nav-icon-btn .avatar > img,
.navbar .nav-icon-btn .avatar-sm > img,
header .avatar,
header img.avatar,
header .avatar-sm,
header img.avatar-sm {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    aspect-ratio: 1 / 1 !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
}
/* 头像外层按钮：也是正方形圆形，不挤压头像 */
.navbar .nav-icon-btn:has(.avatar),
.navbar .nav-icon-btn:has(img.avatar),
.navbar .nav-icon-btn:has(.avatar-sm),
header .nav-icon-btn:has(.avatar),
header .nav-icon-btn:has(img.avatar) {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    aspect-ratio: 1 / 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

/* ⭐ 帖子内图片灯箱：关闭按钮/工具栏按钮——加黑底白字阴影，任何图片颜色下都清晰可见 */
/* 1. 右上角 × 关闭按钮：默认 btn-close-white 在浅色图上看不见→加厚黑圆底+自定义白叉 */
#xnLightbox .btn-close,
#xnLightbox .btn-close-white {
    background-color: rgba(0, 0, 0, 0.6) !important;
    background-image: none !important;      /* 去掉 Bootstrap 默认 × 背景图 */
    border-radius: 50% !important;          /* 圆形 */
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.55) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    position: relative;
    border: 1px solid rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
/* 自定义白色 × 叉号（两根交叉线），任何背景下清晰 */
#xnLightbox .btn-close::before,
#xnLightbox .btn-close-white::before {
    content: "";
    position: absolute;
    width: 18px; height: 2px;
    background: #ffffff;
    transform: rotate(45deg);
    box-shadow: 0 0 2px rgba(0,0,0,0.7);
}
#xnLightbox .btn-close::after,
#xnLightbox .btn-close-white::after {
    content: "";
    position: absolute;
    width: 18px; height: 2px;
    background: #ffffff;
    transform: rotate(-45deg);
    box-shadow: 0 0 2px rgba(0,0,0,0.7);
}
#xnLightbox .btn-close:hover,
#xnLightbox .btn-close-white:hover {
    background-color: rgba(0, 0, 0, 0.82) !important;
    transform: scale(1.05);
    opacity: 1 !important;
}

/* 2. 顶部工具栏按钮（缩放/旋转/重置）+ 左右翻页箭头：统一加深色半透明底 */
#xnLightbox #xnLightboxToolbar .btn,
#xnLightbox #xnLightboxPrev,
#xnLightbox #xnLightboxNext {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 3px 14px rgba(0,0,0,0.55) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1 !important;
}
#xnLightbox #xnLightboxToolbar .btn i,
#xnLightbox #xnLightboxPrev i,
#xnLightbox #xnLightboxNext i {
    color: #ffffff !important;
}
#xnLightbox #xnLightboxToolbar .btn:hover,
#xnLightbox #xnLightboxPrev:hover,
#xnLightbox #xnLightboxNext:hover {
    background-color: rgba(0, 0, 0, 0.82) !important;
    color: #fff !important;
    transform: scale(1.05);
}
/* 3. 计数器徽章加深背景，防浅色图上看不见 */
#xnLightbox #xnLightboxCounter {
    background-color: rgba(0,0,0,0.7) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}
/* 4. 缩放百分比徽章：保持清晰 */
#xnLightbox #xnLightboxScale {
    background-color: rgba(0, 0, 0, 0.6) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

/* =============================================================
 * 侧边栏：最新用户卡片 / 网格（从 footer 内联样式抽离，启用浏览器缓存）
 * ============================================================= */
.xnx-nu-card {
    margin-bottom: 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius, .5rem);
    background: var(--bs-body-bg);
    overflow: hidden;
}
.xnx-nu-header {
    display: flex !important;
    align-items: center;
    gap: .5rem;
    padding: .7rem 1rem .5rem 1rem;
    border-bottom: 0;
    background: transparent;
    font-weight: 500;
    font-size: .8rem;
    color: var(--bs-body-color);
    letter-spacing: -.01em;
}
.xnx-nu-header i {
    color: var(--bs-primary);
    font-size: .95rem;
    flex-shrink: 0;
}
.xnx-nu-body {
    padding: 0 .5rem .25rem .5rem !important;
}
.xnx-new-users-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem 0.5rem;
}
.xnx-new-user-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.3rem;
    text-align: center;
    padding: 0.3rem 0.15rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease, transform 0.15s ease;
    text-decoration: none;
}
.xnx-new-user-item:hover {
    background-color: rgba(37, 99, 235, 0.06);
    transform: translateY(-1px);
}
.xnx-new-user-name {
    width: 100%;
    font-size: 0.7rem;
    line-height: 1.2;
    color: #374151;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 767.98px) {
    .xnx-new-users-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.55rem 0.3rem;
    }
    .xnx-new-user-name { font-size: 0.65rem; }
}

/* =============================================================
 * 高性能替代 anime.js：CSS 过渡版淡入上移动画（首屏/htmx后通用，仅几KB vs 115KB）
 * 用法：1) 给目标元素加 .anim-fade-up 类设置初始态
 *       2) 延迟 X*N ms 后加 .is-visible 触发过渡（替代 stagger）
 * ============================================================= */
.anim-fade-up {
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
    will-change: opacity, transform;
}
.anim-fade-up.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.anim-fade-up-small {
    opacity: 0 !important;
    transform: translateY(15px) !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out !important;
    will-change: opacity, transform;
}
.anim-fade-up-small.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* =============================================================
 * 公告滚动：纯 CSS keyframes 替代 anime.js（y轴平移+切回）
 * 配合 JS 控制：每 3s 手动滚到下一条，动画 500ms ease-in-out
 * ============================================================= */
.announcement-scroll-inner {
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

/* =============================================================
 * 用户中心左侧侧边栏导航：统一排版（防止文字换行+图标对齐+hover高亮）
 * 结构：ul.side-nav > li.side-nav-item > a.side-nav-link
 *                          > span.menu-icon (图标)
 *                          > span.menu-text (文字)
 * ============================================================= */
.side-nav {
    list-style: none;
    padding: 4px 0;              /* ⭐ 列表上下内边距从 8→4，整体更紧凑 */
    margin: 0;
}

/* 分组标题（设置/资产/我的中心）：上下内边距减少，不顶到卡片边缘 */
.side-nav-title {
    display: block;
    padding: 8px 16px 4px;       /* ⭐ 上12→8，下6→4，左右18→16 和菜单项对齐 */
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #374151 !important;
    text-transform: uppercase;
    white-space: nowrap;
    user-select: none;
    -webkit-user-select: none;
}

/* 菜单条目：上下间距减少 */
.side-nav-item {
    display: block;
    margin: 1px 0;               /* ⭐ 菜单项之间的垂直间距：2px → 1px */
}

/* 菜单链接 a 标签：padding/margin 全部缩小，行高收紧，紧凑不拥挤 */
.side-nav-link {
    display: flex;
    align-items: center;
    gap: 8px;                    /* ⭐ 图标和文字间距：10px → 8px */
    padding: 7px 12px;           /* ⭐ 内边距：上下10→7，左右16→12 */
    margin: 1px 8px;             /* ⭐ 外边距：上下2→1，左右10→8 */
    border-radius: 6px;          /* ⭐ 圆角 8→6，紧凑风格 */
    color: #1f2937 !important;
    font-size: 14px;
    line-height: 1.35;           /* ⭐ 行高 1.5→1.35，单字高度更小 */
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color 0.15s ease, color 0.15s ease;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}
/* 图标大小也从 18px → 17px，配合紧凑行高不显得大 */
.side-nav-link .menu-icon {
    flex-shrink: 0;
    width: 20px;                 /* 保持 20px 占位，避免图标太宽文字挤 */
    text-align: center;
    font-size: 17px;             /* ⭐ 18→17，不顶到上下边 */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 图标强制继承 a 的纯黑色，防止 tabler-icons 自带灰色，opacity=1 不透明 */
.side-nav-link .menu-icon,
.side-nav-link .menu-icon i {
    color: inherit !important;
    fill: currentColor !important;
    opacity: 1 !important;
}
.side-nav-link:hover {
    background-color: rgba(59, 130, 246, 0.14) !important;  /* hover 蓝底加深 */
    color: #1d4ed8 !important;
    text-decoration: none !important;
}
/* 当前激活页（active tab）：深蓝文字+更明显蓝底 */
.side-nav-item.active > .side-nav-link {
    background-color: rgba(59, 130, 246, 0.20) !important;
    color: #1d4ed8 !important;
    font-weight: 600 !important;
}

/* 图标：统一宽度 20px，不挤压文字 */
.side-nav-link .menu-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* 文字：占满剩余宽度，保持单行，末尾省略（极端情况） */
.side-nav-link .menu-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* VIP/未读徽标：靠右对齐，不受挤压 */
.side-nav-link .badge {
    flex-shrink: 0;
    margin-left: auto;
}

/* ⚠️ 注意：移除了 @media (prefers-color-scheme: dark) 的 side-nav 暗色样式
   原因：本网站当前无真正的"暗色主题"（卡片/正文背景都是白色），
   如果浏览器/系统设置为暗色模式，会错误触发这段媒体查询 → 浅灰白色文字叠在白色卡片上，
   导致完全看不见！所以删除，保持纯黑文字，白卡片上 100% 可读。
   如果后续全站真正实现暗色主题（卡片背景变 #1f2937 之类），再加回来即可。 */

/* =============================================================
 * 🐦 X (Twitter) 风格右侧栏 —— 全局兜底样式
 * 1) 统一按钮高度 36px（登录/注册完全同高）
 * 2) 强制隐藏 hook 注入的旧模块（立即注册 / 旧日期 / 最新评论 / 旧欢迎卡）
 * 3) 紧凑布局，卡片之间 gap 12px
 * ============================================================= */

/* 1. 布局：卡片之间 12px 紧凑间距，消除大空白 */
#sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 12px !important;
    width: 100%;
    padding: 0 !important;
    margin: 0 !important;
}
#sidebar-right > * { width: 100%; min-width: 0; }
#sidebar-right > style,
#sidebar-right > script,
#sidebar-right > div:empty:not(.x-card-divider) { display: none !important; }

/* 2. X 卡片统一：16px 圆角、无边框、无阴影 */
#sidebar-right .x-card {
    border-radius: 16px !important;
    border: none !important;
    background: #fff !important;
    overflow: hidden;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
[data-bs-theme="dark"] #sidebar-right .x-card,
[data-bs-theme="x"] #sidebar-right .x-card { background: #000 !important; }

/* ⭐ 强制让旧的 #sidebar-right .card-header / .card-body 规则对新 .x-card 不生效 */
#sidebar-right .x-card > .card-header,
#sidebar-right .x-card .card-header {
    padding: 12px 16px 10px !important;
    border-bottom: 0 !important;
    background: transparent !important;
    background-image: none !important;
}
#sidebar-right .x-card > .card-body,
#sidebar-right .x-card .card-body {
    padding: 0 !important;
}

/* 3. X 卡片标题统一：18px 800 粗体，和「加入高手社区」一致 */
#sidebar-right .x-card-title {
    font-size: 18px !important;
    font-weight: 800;
    letter-spacing: -0.2px;
    line-height: 1.3;
    color: var(--bs-body-color, #0f1419);
    padding: 11px 16px 9px !important;
    margin: 0;
}

/* 4. hover 浅灰过渡 */
#sidebar-right .x-list-item,
#sidebar-right .x-follow-item {
    transition: background-color 0.15s ease;
}
#sidebar-right .x-list-item:hover,
#sidebar-right .x-follow-item:hover { background: #f7f9f9; }
[data-bs-theme="dark"] #sidebar-right .x-list-item:hover,
[data-bs-theme="x"] #sidebar-right .x-list-item:hover,
[data-bs-theme="dark"] #sidebar-right .x-follow-item:hover,
[data-bs-theme="x"] #sidebar-right .x-follow-item:hover { background: #16181c; }

/* 5. ⭐⭐⭐ X 胶囊按钮统一：登录/创建账号完全同高 32px */
#sidebar-right .x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 12px;
    border-radius: 9999px !important;
    border: 1px solid transparent;
    font-weight: 600;
    font-size: 12px !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    text-decoration: none !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}
#sidebar-right .x-btn:hover { text-decoration: none !important; }
#sidebar-right .x-btn-primary {
    background-color: #1d9bf0 !important;
    color: #fff !important;
}
#sidebar-right .x-btn-primary:hover { background-color: #1a8cd8 !important; }
/* 登录按钮：白底 + 蓝描边 + 蓝字，和黑注册按钮高度完全一致 */
#sidebar-right .x-btn-outline {
    background-color: #fff !important;
    border: 1px solid rgba(29, 155, 240, 0.45) !important;
    color: #1d9bf0 !important;
}
#sidebar-right .x-btn-outline:hover { background-color: rgba(29, 155, 240, 0.08) !important; }
#sidebar-right .x-btn-black {
    background-color: #0f1419 !important;
    color: #fff !important;
    border: 1px solid #0f1419 !important;
}
#sidebar-right .x-btn-black:hover { background-color: #272c30 !important; }

/* 6. 底部"显示更多"：X 蓝色整行 */
#sidebar-right .x-show-more {
    display: block;
    padding: 14px 16px;
    font-size: 15px;
    color: #1d9bf0 !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}
#sidebar-right .x-show-more:hover {
    background: #f7f9f9;
    color: #1d9bf0 !important;
    text-decoration: none !important;
}
[data-bs-theme="dark"] #sidebar-right .x-show-more:hover,
[data-bs-theme="x"] #sidebar-right .x-show-more:hover { background: #16181c !important; }

/* 7. 暗色分隔线适配 */
[data-bs-theme="dark"] #sidebar-right .x-stat-grid .x-stat-col,
[data-bs-theme="x"] #sidebar-right .x-stat-grid .x-stat-col { border-right-color: #2f3336; }
[data-bs-theme="dark"] #sidebar-right .x-join-date,
[data-bs-theme="x"] #sidebar-right .x-join-date,
[data-bs-theme="dark"] #sidebar-right .x-user-stats,
[data-bs-theme="x"] #sidebar-right .x-user-stats { border-top-color: #2f3336; }

/* 8. ⭐⭐⭐ 强制隐藏 Hook 注入的旧模块（造成重复"立即注册/最新评论/旧日期"的元凶）
       只要 #sidebar-right 下的直接子元素不是我们自定义的结构，一律隐藏 */
#sidebar-right > .card:not(.x-card),
#sidebar-right > .sidebar-site-brief,
#sidebar-right > .sidebar-stats,
#sidebar-right > .sidebar-hot,
#sidebar-right > .sidebar-newusers,
#sidebar-right > .sidebar-friendlink,
#sidebar-right > [class*="sidebar-"]:not(#sidebar-right),
#sidebar-right > .welc-box,
#sidebar-right > .guest-box,
#sidebar-right > .welcome-box,
#sidebar-right > .index-site-brief,
#sidebar-right > .site-brief,
#sidebar-right > .hot-card,
#sidebar-right > .new-user-card,
#sidebar-right > .stat-card,
#sidebar-right > .friend-link-card,
#sidebar-right > [class*="card"][class*="sidebar"] {
    display: none !important;
}

/* =========================================================
   ⭐⭐⭐ 【最高优先级】黑色主题（纯黑 #0f1419）
   —— 放在 CSS 文件「最最末尾」+ html 前缀 + !important 三重保险
   —— 彻底解决旧 CSS 缓存导致「选黑色变浅蓝 X 蓝」的问题
   ========================================================= */
/* 明亮模式（白底）：按钮、链接、高亮全部 #0f1419 纯黑 */
html[data-theme="black"],
:root[data-theme="black"] {
    --bs-primary: #0f1419 !important;
    --bs-primary-rgb: 15, 20, 25 !important;
    --bs-link-color: #0f1419 !important;
    --bs-link-color-hover: #000000 !important;
    --x-page-bg: #ffffff !important;
}
/* 暗色模式（黑底）：按钮、链接、高亮改成白色（不然黑底黑字完全看不见） */
html[data-bs-theme="dark"][data-theme="black"],
:root[data-bs-theme="dark"][data-theme="black"] {
    --bs-primary: #ffffff !important;
    --bs-primary-rgb: 255, 255, 255 !important;
    --bs-link-color: #ffffff !important;
    --bs-link-color-hover: #e7e9ea !important;
    --x-page-bg: #111 !important;
}
/* X 暗色主题模式 + 黑色主题的组合兜底 */
html[data-bs-theme="x"][data-theme="black"],
:root[data-bs-theme="x"][data-theme="black"] {
    --bs-primary: #ffffff !important;
    --bs-primary-rgb: 255, 255, 255 !important;
    --bs-link-color: #ffffff !important;
    --bs-link-color-hover: #e7e9ea !important;
}

/* =============================================================
 * 📌 横向导航样式 —— 从左侧边栏移到帖子列表上方
 * ============================================================= */
.sidebar-nav-horizontal {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 8px;
    margin-bottom: 0;
    background: transparent;
    border-radius: 12px;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch;
}
.sidebar-nav-horizontal::-webkit-scrollbar {
    display: none;
}
.sidebar-nav-link-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #536471;
    background: transparent;
    border-radius: 9999px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
    line-height: 1.4;
    cursor: pointer;
}
.sidebar-nav-link-item:hover {
    color: var(--bs-primary, #1d9bf0);
    background-color: rgba(29, 155, 240, 0.08);
}
.sidebar-nav-link-item.active {
    color: var(--bs-primary, #1d9bf0);
    background-color: rgba(29, 155, 240, 0.12);
    font-weight: 600;
}
.sidebar-nav-link-item i {
    font-size: 14px;
}

/* 暗色模式适配 */
[data-bs-theme="dark"] .sidebar-nav-link-item {
    color: #8b98a5;
}
[data-bs-theme="dark"] .sidebar-nav-link-item:hover {
    color: #e7e9ea;
    background-color: rgba(239, 243, 244, 0.1);
}
[data-bs-theme="dark"] .sidebar-nav-link-item.active {
    color: #e7e9ea;
    background-color: rgba(239, 243, 244, 0.15);
}

/* 移动端适配：横向滚动 */
@media (max-width: 768px) {
    .sidebar-nav-horizontal {
        padding: 3px 6px;
        -webkit-overflow-scrolling: touch;
    }
    .sidebar-nav-link-item {
        padding: 2px 7px;
        font-size: 11px;
    }
    .sidebar-nav-link-item i {
        font-size: 13px;
    }
}

/* 隐藏侧边栏中的导航（已移到顶部） */
.sidebar-left .side-nav {
    display: none !important;
}