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

:root {
    --bs-primary: #2563eb;
    --bs-primary-rgb: 37, 99, 235;
    --bs-link-color: #2563eb;
    --bs-link-color-hover: #1d4ed8;
    /* 组件背景色（card/dropdown/modal 等都继承此值） */
    --bs-body-bg: #fff;
    --bs-body-color: #222;

    /* 页面背景色（与组件背景区分） */
    --x-page-bg: #f7f8fa;
}




/* 页面背景：body 用页面色，组件自动用 --bs-body-bg（白色） */
body {
    font-size: 14px;

    background-color: var(--x-page-bg);
}

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: #f7f8fa;
}

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

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

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

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

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

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

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

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

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

/* 暗色模式 放最下边*/
[data-bs-theme="dark"] {
    --bs-body-bg: #161616;
    --bs-body-color: #e0e0e0;
    --bs-border-color: #333;
    --bs-tertiary-bg: #2a2a2a;
    --bs-secondary-color: #888;
    --bs-secondary-bg: #222;

    --x-page-bg: #111;
}

.x-card {
    margin: 13px 0;
    padding: 12px;
    background-color: var(--bs-body-bg);
    border-radius: var(--bs-border-radius-lg);
    border: none;
    box-shadow: 0 6px 16px 0 rgb(27 26 49 / 1%);
}

.card-thread {
    padding: 24px;
}

.list-mode {
    background-color: var(--bs-tertiary-bg);
    border-radius: var(--bs-border-radius-lg);
    border: 1px solid var(--bs-body-bg);

}

.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 {
    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;
}

.btn-outline-secondary {
    border-color: var(--x-page-bg);
    background-color: var(--x-page-bg);
    --bs-btn-border-color: var(--x-page-bg);
}

.dropdown-menu,
.modal-content {
    border: none;
}


@media screen and (max-width: 768px) {

    .row>* {

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

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


}