:root {
    /* 深色模式下柔和的彩虹色系（soft-rainbow for dark mode） */
    --color-rainbow-red: #ff9e9e; /* 浅红 */
    --color-rainbow-orange: #ffcc80; /* 柔光橙 */
    --color-rainbow-yellow: #fff59d; /* 淡黄（不刺眼） */
    --color-rainbow-green: #a5d6a7; /* 柔绿 */
    --color-rainbow-blue: #90caf9; /* 柔蓝 */
    --color-rainbow-purple: #ce93d8; /* 柔紫 */

    /* 明亮风格的彩虹色系（vibrant, high-contrast） */
    --color-vibrant-red: #ff6b6b;
    --color-vibrant-orange: #ffa94d;
    --color-vibrant-yellow: #ffd166;
    --color-vibrant-green: #06d6a0;
    --color-vibrant-blue: #118ab2;
    --color-vibrant-purple: #7209b7;

    /* 实用型分类色（常用于 UI / 数据可视化） */
    --color-category-red: #e74c3c;
    --color-category-orange: #e67e22;
    --color-category-yellow: #f1c40f;
    --color-category-green: #2ecc71;
    --color-category-blue: #3498db;
    --color-category-purple: #9b59b6;
}
/* 定义关键帧动画 */
@keyframes rainbowAnimation {
    0% { color: var(--color-rainbow-red); }
    16.66% { color: var(--color-rainbow-orange); }
    33.32% { color: var(--color-rainbow-yellow); }
    49.98% { color: var(--color-rainbow-green); }
    66.64% { color: var(--color-rainbow-blue); }
    83.30% { color: var(--color-rainbow-purple); }
    100% { color: var(--color-rainbow-red); } /* 回到初始颜色，形成循环 */
}

/* 应用动画到特定的 a 标签 */
.rainbowChange {
    animation: rainbowAnimation 5s ease infinite; /* 动画名称、持续时间、计时函数、循环次数 */
    color: var(--color-rainbow-red); /* 初始值 */
    display: inline-block; /* 确保 a 标签可以正确显示动画 */
}

/*富文本编辑器的图片显示，移动端自动调整*/
.tinymceAutoWidth {
    /* 确保容器本身不会溢出 */
    overflow-x: auto; /* 可选：如果内容过宽，允许水平滚动 */
    /* 或者更常用的是让容器宽度适应其父元素 */
    width: 100%;
    /* 确保内部元素不会强制容器变宽 */
    word-wrap: break-word;
}

/* 关键：让图片在容器内自动缩放 */
.tinymceAutoWidth img {
    /* 设置最大宽度为容器宽度的100% */
    max-width: 100%;
    /* 高度自动，保持宽高比 */
    height: auto;
    /* 可选：添加一些边距或边框 */
    /* margin: 10px 0; */
    /* border: 1px solid #ddd; */
    /* border-radius: 4px; */
}

/*分类按钮紧凑一些*/
.btnTight {
    margin: 0;
    padding: 0;
}

.btnCategory {
    margin: 0;
    padding-left: 0.5rem;
    padding-right: 0;
}

/*用于隐藏和显示*/
.commonVisible {
    display: block;
}

.commonHidden {
    display: none;
}

/*跑马灯效果*/
.marquee-container {
    width: 100%; /* 根据需要调整宽度 */
    overflow: hidden;
    white-space: nowrap; /* 防止内容换行 */
    box-sizing: border-box;
    /*border: 1px solid #ccc; !* 可选边框 *!*/
    position: relative; /* 为了定位子元素 */
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* 初始时完全在容器外 */
    animation: marquee 10s linear infinite; /* 滚动动画 */
}

/* 使用伪元素来避免闪烁，而不是空的内联块元素 */
.marquee-content::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    overflow: hidden;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/*仿照wb标题样式 */
.commonTitle {
    background: rgba(255, 221, 203, 0.35);
    color: rgb(255, 98, 0);
    border-radius: 10px;
    padding: 0 10px 0 10px;
}

/*深底色浅文字一般用于标题或按钮*/
.commonTitle2 {
    background: #f50;
    color: #fff;
    border-radius: 10px;
    padding: 0 10px 0 10px;
}


/*滚动时固定位置，常用于导航栏 */
.stickyDiv {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 40px; /* 滚动到页面顶端时固定 留出顶端导航栏的高度 */
    z-index: 1000; /* 确保元素在其他内容之上 */
    /*background-color: #f8f9fa; !* 背景颜色 *!*/
    /* padding: 20px; /* 内边距 */
    /* margin-top: 50vh; /* 初始时，将div放置在页面中间（视口高度的一半） */
    /* transform: translateY(-50%); /* 向上移动自身高度的一半，以真正居中 */
    transition: margin-top 0.3s, transform 0.3s; /* 可选：添加过渡效果 */
}

/*图标在上，文字在下的组合样式*/
.iconUpdown {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 0; /*上下紧凑，避免导航栏太宽*/
    padding-bottom: 0.25rem;
}

.iconUpdown i {
    margin-bottom: 0; /* 下方为零，保持和文字紧密衔接 */
    padding: 0 0.25rem;
}

.iconUpdownText {
    padding: 0 0.25rem;
}

/*底部导航栏 适应pc端和手机端*/
@media (min-width: 768px) {
    /* PC端：平均分布 */
    .navbarBottom .container {
        display: flex;
        justify-content: space-around;
    }

    .navbarBottom .iconUpdown.flex-grow-1 {
        flex-grow: 1;
    }
}

@media (max-width: 767.98px) {
    /* 手机端：紧密排列 */
    .navbarBottom .container {
        justify-content: start;
        gap: 0.5rem; /* 可选：设置 a 标签之间的间距 */
    }

    .navbarBottom .iconUpdown {
        padding: 0 0.25rem;
        font-size: 0.9rem;
    }
}

/*-------------------------------------------------------------------------------------------------------------------*/
/* latin-ext */
@font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdmA_OIxo.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
    font-family: 'Audiowide';
    font-style: normal;
    font-weight: 400;
    src: local('Audiowide Regular'), local('Audiowide-Regular'), url(https://fonts.gstatic.com/s/audiowide/v7/l7gdbjpo0cum0ckerWCdlg_O.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
    padding-top: 60px; /*留出导航栏高度*/
    margin-left: 1rem; /*留出边界，防止移动端的小幅水平抖动*/
    margin-right: 1rem;
    margin-top: 0;
    margin-bottom: 0;
}

header .navbar-brand {
    font-size: 1.4em;
    font-weight: 200;
    font-family: "Audiowide", cursive;
}

.markdownx .markdownx-editor {
    border-style: none solid solid solid;
    width: 100%;
    margin-bottom: 25px;
}

.page-header {
    margin-top: 15px;
    margin-bottom: 15px;
}

.page-header h1 {
    margin: 0;
    font-weight: 100;
    font-size: 2em;
}

.no-data {
    text-align: center;
    padding: 1em 0;
}

#notifications {
    font-size: 1em;
    padding: 8px;
    color: #dddddd;
}

#notifications.new-notifications {
    color: #428bca;
}


.alert-debug {
    color: black;
    background-color: white;
    border-color: #d6e9c6;
}

.alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

.popover {
    max-width: 350px;
    width: 350px;
}

.popover ul {
    padding: 0;
    margin: 0;
}

.popover ul li {
    list-style: none;
    border-bottom: 1px solid #eeeeee;
    padding: .4em 0;
}

.popover ul li:last-child {
    border-bottom: none;
}

.popover ul li .user-picture {
    width: 45px;
    float: left;
}

.popover ul li p {
    font-size: .9em;
    padding: 0 0 0 .6em;
    margin-left: 45px;
    margin-bottom: 0;
}