/* static/css/index.css - Butterfly风格优化版本 */

/* === 全局变量和基础样式 === */
:root {
    /* 基础颜色 */
    --color-bg-body: #0a0a1a; /* 页面背景，改为电子风格的深色 */
    --color-bg-card: rgba(10,10,30,0.7); /* 卡片背景，与footer一致 */
    --color-text-main: #00ffcc;  /* 主要文本，与footer一致 */
    --color-text-muted: #00ffcc; /* 次要文本，用于元信息等 */
    --color-border: #00ffcc;    /* 边框颜色，与footer一致 */
    --color-primary: #ff00cc; /* 主题色，电子风格的亮色 */
    --color-primary-dark: #cc0099; /* 主题色悬停/激活态 */
    --color-link: #00ffcc; /* 链接颜色，与footer一致 */
    --color-link-hover: #00ccff; /* 链接悬停色 */
    --color-heading: #ff00cc; /* 标题颜色，与footer一致 */
    --color-toc-bg: rgba(10,10,30,0.7); /* TOC摘要背景色 */
    --color-toc-border: #00ffcc; /* TOC摘要边框色 */

    /* 社交图标颜色 */
    --color-social-qq: #12b7f5;
    --color-social-weixin: #2dbd3a;
    --color-social-email: #f39c12;

    /* 尺寸与间距 */
    --gap-base: 1rem;     /* 基础间距，通常用于元素间距 */
    --gap-sm: 0.5rem;     /* 小间距 */
    --gap-md: 1.5rem;     /* 中等间距，常用于卡片内边距 */
    --gap-lg: 2rem;     /* 大间距，常用于区块间距 */
    --border-radius-base: 0.6rem; /* 卡片圆角 */
    --border-radius-sm: 0.4rem; /* 小圆角 */
    --card-shadow: 0 0 5px #00ffcc inset, 0 0 10px #0055cc; /* 卡片阴影，与footer一致 */
    --card-shadow-hover: 0 0 10px #00ffcc inset, 0 0 20px #0055cc; /* 卡片悬停阴影 */

    /* 字体 */
    --font-body: "Orbitron", "Courier New", monospace; /* 正文及大部分元素字体，与footer一致 */
    --font-heading: "Orbitron", "Courier New", monospace; /* 标题字体，与footer一致 */
    --font-code: 'Fira Code', monospace; /* 代码字体 */
}

body {
    background-color: var(--color-bg-body);
    color: var(--color-text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    padding-bottom: var(--gap-lg); /* 页面底部留白 */
    min-height: 100vh; /* 确保页面至少占满视口高度 */
    position: relative; /* 用于固定元素的定位上下文 */
    overflow-x: hidden; /* 防止水平滚动条出现 */
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(45deg, rgba(0,255,204,0.1) 25%, transparent 25%, transparent 75%, rgba(0,255,204,0.1) 75%),
        linear-gradient(45deg, rgba(0,255,204,0.1) 25%, transparent 25%, transparent 75%, rgba(0,255,204,0.1) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    z-index: -1;
    opacity: 0.3;
}

body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 1px, transparent 1px, transparent 2px);
    z-index: -1;
    pointer-events: none;
}

a {
    color: var(--color-link);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease; /* 链接颜色过渡 */
}

a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 0;
    background: var(--color-link);
    transition: width 0.3s;
}

a:hover {
    color: var(--color-link-hover);
}

a:hover::after {
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    margin-top: 0;
    margin-bottom: var(--gap-sm); /* 标题下间距 */
    font-weight: bold;
    line-height: 1.3;
    text-shadow: 0 0 5px var(--color-heading), 0 0 10px var(--color-heading);
}

p {
    margin-top: 0;
    margin-bottom: var(--gap-base); /* 段落下间距 */
}

/* Bootstrap 默认元素的调整 */
.container {
    padding-top: var(--gap-lg);
    padding-bottom: var(--gap-lg);
}

.row {
    /* 调整 Bootstrap 默认的负外边距，使其与 padding 配合 */
    margin-left: calc(var(--gap-base) / -2);
    margin-right: calc(var(--gap-base) / -2);
}

/* 调整 Bootstrap 列的内边距 */
.row > [class*='col-'] {
    padding-left: calc(var(--gap-base) / 2);
    padding-right: calc(var(--gap-base) / 2);
}

/* --- 留言按钮样式 (固定右下角) --- */
.div-lv {
    position: fixed; /* 固定定位 */
    bottom: 30px;   /* 距离底部 */
    right: 30px;    /* 距离右侧 */
    z-index: 1000;  /* 确保在其他内容之上 */
}

.leaving-message {
    display: flex; /* 使用flexbox使其内容居中 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    background-color: transparent; /* 背景透明 */
    color: var(--color-text-main);
    padding: 12px 25px; /* 增加内边距 */
    border-radius: 30px; /* 更大的圆角，胶囊状 */
    font-size: 1rem; /* 调整字体大小 */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--card-shadow);
    white-space: nowrap; /* 防止文字换行 */
    text-decoration: none; /* 移除下划线 */
    border: 1px solid var(--color-border);
}

.leaving-message:hover {
    background-color: var(--color-primary);
    transform: translateY(-3px); /* 悬停上移 */
    box-shadow: var(--card-shadow-hover);
}

/* --- 文章列表区域 --- */
#main {
    padding-bottom: var(--gap-lg); /* 主内容区域底部留白 */
}

.article-card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-base);
    box-shadow: var(--card-shadow); /* 应用卡片阴影 */
    margin-bottom: var(--gap-md); /* 卡片间距 */
    overflow: hidden; /* 确保圆角和图片不会溢出 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑过渡 */
    display: flex; /* 使用flexbox布局 */
    flex-direction: column; /* 内容垂直排列 */
    border: 1px solid var(--color-border);
}

.article-card:hover {
    transform: translateY(-5px); /* 悬停上移 */
    box-shadow: var(--card-shadow-hover); /* 悬停时使用更强的阴影 */
}

.article-card .card-img-top {
    width: 100%;
    height: 250px; /* 设置图片固定高度 */
    object-fit: cover; /* 保持图片比例，裁剪多余部分 */
    border-top-left-radius: var(--border-radius-base);
    border-top-right-radius: var(--border-radius-base);
    transition: transform 0.5s ease; /* 图片缩放过渡 */
}

.article-card:hover .card-img-top {
    transform: scale(1.05); /* 悬停时图片放大 */
}

.article-card .card-body {
    padding: var(--gap-md); /* 内边距 */
}

.article-meta .badge {
    opacity: 0.9; /* 徽章透明度 */
}

.article-meta .badge:hover {
    opacity: 1; /* 悬停时徽章变亮 */
}

.article-summary {
    margin-bottom: var(--gap-md); /* 摘要下间距 */
    line-height: 1.6;
    
    font-size: 0.95rem;
    color: var(--color-text-main); /* 摘要文字颜色 */
    flex-grow: 1; /* 填充剩余垂直空间 */
}

.article-summary p {
    margin: 0; /* 移除p标签默认外边距 */
}

.article-summary .toc-summary {
    background-color: var(--color-toc-bg); /* 淡蓝色背景 */
    border: 1px solid var(--color-toc-border); /* 添加边框 */
    border-left: 4px solid var(--color-primary); /* 左侧强调色边框 */
    padding: var(--gap-sm) var(--gap-base); /* 调整内边距 */
    border-radius: var(--border-radius-sm); /* 添加圆角 */
    font-size: 0.9rem;
    color: var(--color-text-main);
    margin-top: var(--gap-sm); /* 与上面的 meta 间距 */
    margin-bottom: var(--gap-sm); /* 与下面的 footer 间距 */
    overflow: hidden; /* 防止内部列表点溢出 */
}

.article-summary .toc-summary strong {
    color: var(--color-heading); /* 主要内容标题颜色 */
    display: block; /* 让“主要内容”单独占一行 */
    margin-bottom: 0.5em; /* 与列表项间距 */
    font-weight: bold;
}

.article-summary .toc-summary ul,
.article-summary .toc-summary ol {
    list-style: none; /* 移除默认列表点 */
    padding-left: 0; /* 移除默认内边距 */
    margin: 0; /* 移除默认外边距 */
}

.article-summary .toc-summary li {
    margin-bottom: 0.3rem; /* 列表项间距 */
    position: relative; /* 为自定义列表点定位 */
    padding-left: 1.2em; /* 为自定义列表点留空间 */
    line-height: 1.4; /* 列表项行高 */
}

.article-summary .toc-summary li::before {
    content: "•"; /* 或者其他符号，例如 "→" */
    color: var(--color-primary); /* 列表点颜色 */
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0; /* 顶部对齐 */
    font-size: 1.1em; /* 调整符号大小 */
    line-height: inherit; /* 继承父元素的行高 */
}

.article-summary .toc-summary a {
    color: var(--color-text-main); /* 链接颜色 */
    text-decoration: none; /* 移除下划线 */
    transition: color 0.2s ease; /* 颜色过渡 */
    font-size: 1em; /* 保持和li一样的字体大小 */
}

.article-summary .toc-summary a:hover {
    color: var(--color-link-hover);
}

.article-footer {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: space-between; /* 使元素分散对齐 */
    margin-top: auto; /* 将 footer 推到卡片底部 */
    padding-top: var(--gap-sm); /* 与摘要留点间距 */
    border-top: 1px dashed var(--color-border); /* 添加顶部虚线分隔 */
}

.article-footer span {
    display: flex; /* 使图标和文字对齐 */
    align-items: center;
}

.article-footer span i {
    margin-right: 5px; /* 图标与文字间距 */
}

.article-footer .btn-outline-primary {
    padding: 0.3rem 0.75rem; /* 按钮内边距 */
    font-size: 0.85rem; /* 按钮字体大小 */
    border-radius: 20px; /* 按钮圆角 */
    border-color: var(--color-primary); /* 边框颜色 */
    color: var(--color-primary); /* 文字颜色 */
    transition: all 0.3s ease; /* 添加过渡 */
    margin-left: var(--gap-base); /* 与前面的元素留间距 */
    flex-shrink: 0; /* 防止按钮被压缩 */
}

.article-footer .btn-outline-primary:hover {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 悬停阴影 */
}

/* --- 分页样式 --- */
.pagination {
    margin-top: var(--gap-lg); /* 分页区域顶部间距 */
}

.pagination .page {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--gap-sm); /* 页码按钮间距 */
}

.pagination .page a,
.pagination .page span {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-main);
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: var(--color-bg-card);
}

.pagination .page a:hover {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

.pagination .page .current {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
    font-weight: bold;
    cursor: default;
}

.pagination .page .disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- 侧边栏样式 --- */
/* 侧边栏列容器，注意 Bootstrap 的响应式隐藏类 */
.col-lg-4.col-xl-4 {
    padding-bottom: var(--gap-lg); /* 侧边栏底部留白 */
}

.sidebar-card {
    background-color: var(--color-bg-card);
    border-radius: var(--border-radius-base);
    box-shadow: var(--card-shadow); /* 应用卡片阴影 */
    margin-bottom: var(--gap-md); /* 卡片间距 */
    padding: var(--gap-md); /* 内边距 */
    overflow: hidden; /* 确保内容不溢出圆角 */
    position: relative; /* 用于内部元素的定位 */
    font-family: var(--font-body);
    color: var(--color-text-main);
    transition: box-shadow 0.3s ease; /* 阴影过渡 */
    border: 1px solid var(--color-border);
}

.sidebar-card:hover {
    box-shadow: var(--card-shadow-hover); /* 悬停阴影 */
}

.sidebar-card h5 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    margin-top: 0;
    margin-bottom: var(--gap-sm); /* 标题下间距 */
    font-size: 1.1rem;
    font-weight: bold;
    display: flex;
    align-items: center; /* 使标题和small标签对齐 */
    line-height: 1.2;
    text-shadow: 0 0 5px var(--color-heading), 0 0 10px var(--color-heading);
}

.sidebar-card h5 i.fas,
.sidebar-card h5 i.far {
     margin-right: 8px; /* 标题图标与文字间距 */
     font-size: 1.2em;
     color: var(--color-primary); /* 图标颜色 */
}

.sidebar-card h5 small {
    font-size: 0.7em;
    color: var(--color-text-muted);
    margin-left: var(--gap-sm); /* small标签与标题间距 */
    font-weight: normal;
}

.sidebar-card hr {
    margin-top: var(--gap-sm); /* hr上间距 */
    margin-bottom: var(--gap-base); /* hr下间距 */
    border-top: 1px solid var(--color-border); /* hr边框颜色 */
}

/* --- 关于我卡片 (.about-card) --- */
.about-card .avatar-wrapper {
    text-align: center; /* 头像居中 */
    margin-bottom: var(--gap-base); /* 头像下间距 */
}

.about-card .avatar-wrapper img {
    width: 100px;
    height: 100px;
    border-radius: 50%; /* 圆形头像 */
    border: 3px solid var(--color-primary); /* 头像边框，使用主题色 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 头像阴影 */
    transition: transform 0.3s ease; /* 头像悬停过渡 */
    object-fit: cover; /* 确保图片不变形 */
}

.about-card .avatar-wrapper img:hover { transform: scale(1.08); } /* 头像悬停放大 */

.about-card .abname {
    font-size: 1.5rem;
    margin: var(--gap-sm) 0 0.3rem; /* 昵称上下间距 */
    font-weight: bold;
    color: var(--color-heading); /* 昵称颜色 */
    /* 覆盖通用sidebar h5样式 */
    border-left: none;
    padding-left: 0;
    display: block; /* 确保它是块级元素以便 text-align: center 生效 */
    text-align: center; /* 显式设置文本居中 */
}

.about-card .abposition {
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: var(--gap-sm); /* 职位下间距 */
    color: var(--color-text-muted);
}

.about-card .abtext {
    font-size: 0.95rem;
    text-align: center;
    margin-bottom: var(--gap-base); /* 描述下间距 */
    font-weight: bold;
    color: var(--color-primary); /* 描述文字颜色 */
}

/* 社交图标容器 */
.social-icons-row {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

/* 社交图标基础样式 */
.social-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background-color: rgba(0, 255, 204, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 255, 204, 0.5);
}

.social-icon:hover {
    background-color: rgba(0, 255, 204, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.5);
}

.social-icon i {
    color: #00ffcc;
    font-size: 1.2rem;
}

/* 工具提示样式 */
.social-tooltip {
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: 12rem;
    padding: 0.75rem;
    background-color: rgba(10, 10, 30, 0.95);
    border-radius: 0.5rem;
    border: 1px solid #00ffcc;
    color: #00ffcc;
    font-size: 0.85rem;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 255, 204, 0.3);
}

.social-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0.5rem;
    border-style: solid;
    border-color: #00ffcc transparent transparent transparent;
}

.social-icon:hover .social-tooltip {
    opacity: 1;
    visibility: visible;
}

/* 二维码容器 */
.qr-code-container {
    margin-top: 0.5rem;
    padding: 0.25rem;
    background-color: white;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.qr-code-container img {
    max-width: 100%;
    height: auto;
    border-radius: 0.25rem;
}

/* 邮箱图标特殊处理 */
.social-icon.email a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* 为不同图标添加颜色 */
.social-icon.qq:hover {
    background-color: rgba(18, 183, 245, 0.2);
    border-color: #12b7f5;
}

.social-icon.qq:hover i {
    color: #12b7f5;
}

.social-icon.weixin:hover {
    background-color: rgba(45, 189, 58, 0.2);
    border-color: #2dbd3a;
}

.social-icon.weixin:hover i {
    color: #2dbd3a;
}

.social-icon.email:hover {
    background-color: rgba(243, 156, 18, 0.2);
    border-color: #f39c12;
}

.social-icon.email:hover i {
    color: #f39c12;
}
.page-link-item {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-bottom: 10px; /* 项间距 */
    padding: 8px 12px; /* 内边距 */
    background-color: var(--color-bg-card);
    border-radius: 20px; /* 圆角 */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.3s ease; /* 添加过渡 */
    color: var(--color-text-main); /* 文字颜色 */
    font-weight: bold;
    text-decoration: none; /* 移除下划线 */
    overflow: hidden; /* 防止内容溢出 */
    border: 1px solid var(--color-border);
}

.page-link-item:last-child { margin-bottom: 0; } /* 最后一项无底部间距 */

.page-link-item:hover {
    background-color: var(--color-primary); /* 悬停背景色变主题色 */
    color: #fff; /* 悬停文字变白色 */
    transform: translateX(5px); /* 悬停向右移动 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 悬停阴影 */
}

.page-link-item i {
    margin-right: 10px; /* 图标与文字间距 */
    font-size: 1.1em;
    transition: color 0.3s ease; /* 图标颜色过渡 */
}

.page-link-item:hover i {
    color: #fff; /* 悬停时图标变白色 */
}

.page-link-item span {
    flex-grow: 1; /* 文本内容填充剩余空间 */
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 隐藏溢出文字 */
    text-overflow: ellipsis; /* 显示省略号 */
}

/* --- 音乐播放器卡片 (.music-player-card) --- */
.music-player-card .audio-controls {
    margin-top: var(--gap-base); /* 控制区上间距 */
    display: flex;
    align-items: center;
    justify-content: center; /* 控制居中 */
}

/* 原生 audio 标签样式调整 */
.music-player-card audio {
    width: calc(100% - 50px); /* 留出下一曲按钮的空间 */
    height: 40px;
    vertical-align: middle;
    /* filter 可以用来改变默认控制条的颜色，但兼容性需要注意 */
    filter: invert(80%) sepia(10%) saturate(100%) hue-rotate(180deg);
    /* 或者更简单的改变主色调 */
    /* filter: hue-rotate(90deg) invert(100%) saturate(200%); */
}

/* 下一曲按钮样式 */
.music-player-card #playNextBtn {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明边框 */
    border-radius: 50%; /* 圆形 */
    padding: 0;
    width: 40px;
    height: 40px;
    margin-left: 10px; /* 与 audio 标签间距 */
    font-size: 1.1rem;
    line-height: 1; /* 居中文本 */
    text-align: center;
    transition: background-color 0.3s ease;
    flex-shrink: 0; /* 不被压缩 */
    cursor: pointer;
    display: flex; /* 使用flexbox居中图标 */
    justify-content: center;
    align-items: center;
}

.music-player-card #playNextBtn:hover {
    background-color: rgba(255, 255, 255, 0.4); /* 悬停背景色更深 */
}

.music-player-card #playNextBtn i {
    pointer-events: none; /* 确保点击的是按钮不是图标 */
}

/* --- 图表卡片 (.chart-card) --- */
.chart-card #category-chart {
    width: 100%;
    min-height: 250px; /* 图表最小高度 */
    /* ECharts会在这里渲染 */
}

/* --- 排行榜/最近浏览列表 (.ranking-list-card) --- */
.ranking-list-card ol {
    list-style: none; /* 移除默认列表点 */
    padding-left: 0; /* 移除默认内边距 */
    margin-bottom: 0; /* 移除默认外边距 */
    counter-reset: list-item-counter; /* 重置计数器 */
}

.ranking-list-card li {
    margin-bottom: 0.6rem; /* 项间距 */
    padding-bottom: 0.6rem; /* 项底部内边距 */
    border-bottom: 1px dashed var(--color-border); /* 底部虚线分隔 */
    counter-increment: list-item-counter; /* 增加计数器 */
    position: relative; /* 用于::before定位 */
    padding-left: 2.5em; /* 为排名数字留空间 */
    font-size: 0.95rem;
    display: flex; /* 使用flexbox布局 */
    align-items: center; /* 垂直居中 */
    gap: 0.8em; /* 链接和元信息间距 */
    width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* 隐藏溢出内容 */
}

/* 排名数字样式 */
.ranking-list-card li::before {
    content: counter(list-item-counter, decimal-leading-zero); /* 使用计数器生成两位数字 */
    position: absolute;
    left: 0; /* 定位在左侧 */
    top: 50%;
    transform: translateY(-50%); /* 垂直居中 */
    font-weight: bold;
    color: #fff;
    background-color: var(--color-primary); /* 默认背景色为主题色 */
    font-size: 0.8em; /* 字体大小 */
    border-radius: 4px; /* 圆角 */
    padding: 0.2em 0.6em; /* 内边距 */
    min-width: 1.8em; /* 最小宽度，确保两位数时对齐 */
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* 阴影 */
    z-index: 1; /* 确保在内容上方 */
}

/* 使用 CSS 选择器为前三名添加特殊背景色 */
.ranking-list-card li:nth-child(1)::before { background-color: #e74c3c; } /* 第一名红色 */
.ranking-list-card li:nth-child(2)::before { background-color: #e67e22; } /* 第二名橙色 */
.ranking-list-card li:nth-child(3)::before { background-color: #f1c40f; } /* 第三名黄色 */

.ranking-list-card li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none; /* 最后一项无底部边框 */
}

.ranking-list-card li a {
    flex-grow: 1; /* 链接填充剩余空间 */
    flex-shrink: 1; /* 允许收缩 */
    min-width: 0; /* 解决flex item在溢出时的问题 */
    white-space: nowrap; /* 防止链接文本换行 */
    overflow: hidden; /* 隐藏溢出文字 */
    text-overflow: ellipsis; /* 显示省略号 */
    color: var(--color-text-main); /* 默认文字颜色 */
    text-decoration: none;
    transition: color 0.2s ease; /* 颜色过渡 */
}

.ranking-list-card li a:hover {
    color: var(--color-link-hover); /* 悬停颜色 */
}

.ranking-list-card li .item-meta {
    flex-shrink: 0; /* 不收缩 */
    color: var(--color-text-muted); /* 元信息颜色 */
    font-size: 0.8em;
    white-space: nowrap;
    text-align: right;
    margin-left: auto; /* 推到最右侧 */
}

/* --- 标签云 (.tag-cloud-card) --- */
.tag-cloud-card .tag-cloud-container {
    text-align: center; /* 标签居中 */
    line-height: 2; /* 行高 */
    padding-top: var(--gap-sm); /* 容器顶部内边距 */
    padding-bottom: var(--gap-sm); /* 容器底部内边距 */
}

.tag-cloud-card .tag-item {
    display: inline-block; /* 使标签并排显示 */
    margin: 5px 8px; /* 标签外边距 */
    padding: 6px 14px; /* 标签内边距 */
    border-radius: 20px; /* 圆角，胶囊状 */
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
    font-size: 0.9rem; /* 默认字体大小 */
    background-color: var(--color-bg-card);
    color: var(--color-text-main); /* 默认文字颜色 */
    border: 1px solid var(--color-border); /* 默认边框 */
    cursor: pointer;
    white-space: nowrap; /* 防止文字换行 */
}

.tag-cloud-card .tag-item:hover {
    transform: scale(1.05); /* 悬停放大 */
    box-shadow: 0 3px 8px rgba(0,0,0,0.12); /* 悬停阴影 */
    background-color: var(--color-primary); /* 悬停背景色 */
    color: #fff; /* 悬停文字颜色 */
    border-color: var(--color-primary); /* 悬停边框颜色 */
}

/* 示例大小/颜色类 (用于JS或后端动态添加) */
.tag-cloud-card .tag-size-1 { font-size: 0.85rem; opacity: 0.8; }
.tag-cloud-card .tag-size-2 { font-size: 0.95rem; }
.tag-cloud-card .tag-size-3 { font-size: 1.1rem; font-weight: bold; }

/* 示例颜色类 */
.tag-cloud-card .tag-color-1 { background-color: #e9f7ef; color: #3cb371; border-color: #8fdbc4;}
.tag-cloud-card .tag-color-2 { background-color: #e1f5fe; color: #039be5; border-color: #81d4fa;}
.tag-cloud-card .tag-color-3 { background-color: #fff3e0; color: #f68a00; border-color: #ffcc80;}
.tag-cloud-card .tag-color-4 { background-color: #fce4ec; color: #e91e63; border-color: #f48fb1;}

/* 标签云空状态提示 */
.tag-cloud-card .text-center {
    padding: var(--gap-sm) 0;
    color: var(--color-text-muted);
}

/* --- 最近浏览历史容器初始消息样式 --- */
.recent-history-card .initial-msg {
    text-align: center;
    padding: var(--gap-sm) 0;
    color: var(--color-text-muted);
}

/* --- 响应式调整 --- */
@media (max-width: 991.98px) { /* Small devices (landscape phones, less than 992px) */
    .col-lg-4.col-xl-4 {
        margin-top: var(--gap-md); /* 顶部增加间距 */
        padding-top: 0;
    }
    .container {
        padding-top: var(--gap-md);
        padding-bottom: var(--gap-md);
    }
    .article-card {
        margin-bottom: var(--gap-md); /* 卡片间距 */
    }
    .sidebar-card {
        margin-bottom: var(--gap-md); /* 侧边栏卡片间距 */
        padding: var(--gap-base); /* 侧边栏卡片内边距减小 */
    }
    .article-card .card-body {
        padding: var(--gap-base); /* 文章卡片body内边距减小 */
    }
    /* 小屏幕下调整固定留言按钮位置 */
    .div-lv {
        bottom: 20px;
        right: 20px;
    }
    .leaving-message {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    /* 侧边栏 h5 字体大小在小屏幕下调整 */
    .sidebar-card h5 {
        font-size: 1rem;
    }
}

@media (max-width: 767.98px) { /* Extra small devices (phones, less than 768px) */
    .container {
        padding-top: var(--gap-base);
        padding-bottom: var(--gap-base);
    }
    .article-card .card-img-top {
        height: 200px; /* 文章图片高度减小 */
    }
    .article-title-link {
        font-size: 1.1rem; /* 文章标题字体大小减小 */
    }
    /* 元信息字体大小 */
    .article-meta, .article-footer {
        font-size: 0.8rem;
    }
    .article-footer .btn-outline-primary {
        padding: 0.25rem 0.6rem;
        font-size: 0.8rem;
    }
    .sidebar-card {
        padding: var(--gap-base); /* 侧边栏卡片内边距 */
    }
    /* 社交图标尺寸减小 */
    .social-icons-row {
        gap: var(--gap-sm);
    }
    .social-icon {
        width: 40px; height: 40px;
    }
    .social-icon i {
        font-size: 18px;
    }
    /* 页面链接项内边距减小 */
    .page-link-item {
        padding: 6px 10px;
    }
    .page-link-item i {
        margin-right: 8px;
        font-size: 1em;
    }
    /* 更小屏幕下调整固定留言按钮位置 */
    .div-lv {
        bottom: 15px;
        right: 15px;
    }
    .leaving-message {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
    /* 排行榜列表项内边距减小 */
    .ranking-list-card li {
        padding-left: 2em;
        font-size: 0.9rem;
    }
    .ranking-list-card li::before {
        font-size: 0.7em;
        min-width: 1.6em;
        padding: 0.1em 0.4em;
    }
    /* 标签项尺寸减小 */
    .tag-cloud-card .tag-item {
        margin: 4px 6px;
        padding: 5px 12px;
        font-size: 0.85rem;
    }
    .tag-cloud-card .tag-size-1 { font-size: 0.8rem; }
    .tag-cloud-card .tag-size-2 { font-size: 0.9rem; }
    .tag-cloud-card .tag-size-3 { font-size: 1rem; }

    /* 音乐播放器 audio 标签宽度可能需要进一步调整 */
    .music-player-card audio {
        width: calc(100% - 45px); /* 减小为下一曲按钮留白 */
    }
    .music-player-card #playNextBtn {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}

/* 隐藏在小屏幕下的元素，配合 Bootstrap 的 hidden-xs hidden-sm 类 */
/* .hidden-xs, .hidden-sm { display: none !important; } */
/* Bootstrap 5+ 使用 d-{breakpoint}-none */
/* 你在HTML中使用了 hidden-xs hidden-sm，这通常是 Bootstrap 3/4 的类。如果使用 BS5，需要替换为 d-none d-md-block 或类似的组合 */
/* 这里保留原样，假设你使用的是 BS3/4 或兼容层 */
@media (max-width: 767.98px) { /* Extra small devices (<768px) */
    .hidden-xs { display: none !important; }
}
@media (max-width: 991.98px) and (min-width: 768px) { /* Small devices (768px-991.98px) */
    .hidden-sm { display: none !important; }
}

/* 整体容器布局优化 */
/* ----------- 分页容器调整 ----------- */
.pagination-container { /* 新增：包裹所有分页相关内容的容器 */
    display: flex;
    flex-wrap: wrap; /* 允许项目换行 */
    justify-content: center; /* 默认居中所有分页组件 */
    align-items: center;
    gap: 1.5rem; /* 组件之间的间距：信息、页码、跳转 */
    margin: 1.5rem auto; /* 上下留白，并水平居中整个分页区域 */
    padding: 0 1rem; /* 左右留白，防止在小屏幕上贴边 */
}

.pagination {
    display: flex;
}

/* 活跃页高亮 */
.pagination .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* 禁用状态 */
.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

/* ----------- 分页信息概览 ----------- */
.pagination-summary {
    font-size: 0.95rem; /* 调整字体大小，与分页按钮协调 */
    color: var(--color-text-main);
    white-space: nowrap;
    text-align: center;
    margin: 0; /* 移除旧的 margin-right，由 container 的 gap 控制 */
}

.pagination-summary strong {
    color: var(--color-primary);
    font-weight: bold;
}

/* ----------- 跳转输入框 + 按钮 ----------- */
.pagination-goto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0; /* 移除旧的 margin，由 container 的 gap 控制 */
}

.pagination-goto input {
    width: 70px; /* 稍微加宽输入框 */
    padding: .4rem .6rem; /* 调整内边距，与按钮更匹配 */
    font-size: .9rem; /* 调整字体大小 */
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: .25rem;
}

.pagination-goto button {
    padding: .4rem .8rem; /* 调整内边距，与输入框更匹配 */
    font-size: .9rem; /* 调整字体大小 */
    border-radius: .25rem;
    background-color: var(--color-bg-card);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    transition: all 0.3s ease;
}

.pagination-goto button:hover {
    background-color: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}


  

  /* 昵称样式 */
  .nickname {
    color: #f0f;
    font-size: 20px;
    margin: 0;
  }
  
  /* 联系方式容器 */
  .contact {
    margin-top: 15px;
    line-height: 1.6;
  }
  
  /* 触发元素（微信/QQ 文字） */
  .wechat-trigger,
  .qq-trigger {
    /* 让鼠标悬浮时显示手型 */
    cursor: pointer; 
    /* 给二维码预留悬浮空间 */
    position: relative; 
    color: #0ff; /* 霓虹蓝文字 */
  }
  
  /* 二维码容器默认隐藏 */
  .qrcode {
    /* 绝对定位，脱离文档流 */
    position: absolute; 
    /* 调整位置，避免遮挡 */
    top: 25px; 
    left: 50%;
    /* 让二维码水平居中 */
    transform: translateX(-50%); 
    /* 默认隐藏 */
    display: none; 
    width: 120px;
    padding: 10px;
    background: #fff;
    border: 2px solid #f0f;
    border-radius: 8px;
    /* 提高层级，避免被遮挡 */
    z-index: 999; 
  }
  
  /* 二维码图片样式 */
  .qrcode img {
    width: 100%;
    display: block;
  }
  
  /* 悬浮时显示二维码 */
  .wechat-trigger:hover .wechat-qrcode,
  .qq-trigger:hover .qq-qrcode {
    display: block;
  }
  
  /* 可选：添加霓虹光效（增强电子风格） */
  .card {
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff inset;
  }
  .avatar {
    box-shadow: 0 0 8px #f0f;
  }

  /* =============================加入动画 =============================*/
/* 全屏动画容器的基础样式 - 默认完全可见并覆盖 */
/* 全屏动画容器的基础样式 - 默认完全可见并覆盖 */
#intro-animation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    pointer-events: all;
    transition: opacity 0.8s ease-out;
}

#intro-animation-overlay.fade-out {
    opacity: 0;
}



/* 动画内容（Logo、文字）的容器样式 */
.animation-content {
    color: white;
    text-align: center;
    will-change: opacity, transform;
}

/* 动画内容（Logo）的样式 */
.animation-content .logo {
    width: 150px;
    height: 150px;
    margin-bottom: 20px;
    border-radius: 50%;
    opacity: 0; /* 初始隐藏Logo */
    transform: translateY(20px); /* 初始位置略低 */
    /* Logo 入场动画，通过 .animate-in 激活 */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform, filter;
}

/* Logo入场动画 */
.animation-content.animate-in .logo {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s; /* Logo稍晚一点显示 */
}

/* 🌟 Logo 闪动动画的新类 🌟 */
.animation-content .logo.flickering-logo {
    animation: flicker 1.5s infinite steps(10), /* 闪动动画 */
               scalePulse 0.8s infinite alternate; /* 大小微小波动动画 */
}

/* 🌟 非主流闪动动画的关键帧 🌟 */
@keyframes flicker {
    0%, 100% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    5% {
        opacity: 0.8;
        filter: brightness(1.2) hue-rotate(10deg);
    }
    10% {
        opacity: 1;
        filter: brightness(0.9) hue-rotate(0deg);
    }
    15% {
        opacity: 0.7;
        filter: brightness(1.5) hue-rotate(-15deg);
    }
    20% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    25% {
        opacity: 0.9;
        filter: brightness(1.1) hue-rotate(5deg);
    }
    30% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    35% {
        opacity: 0.6;
        filter: brightness(1.8) hue-rotate(20deg);
    }
    40% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    50% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    55% {
        opacity: 0.95;
        filter: brightness(1.05) hue-rotate(-5deg);
    }
    60% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    65% {
        opacity: 0.85;
        filter: brightness(1.15) hue-rotate(8deg);
    }
    70% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    75% {
        opacity: 0.9;
        filter: brightness(1.1) hue-rotate(-10deg);
    }
    80% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    85% {
        opacity: 0.75;
        filter: brightness(1.3) hue-rotate(12deg);
    }
    90% {
        opacity: 1;
        filter: brightness(1) hue-rotate(0deg);
    }
    95% {
        opacity: 0.9;
        filter: brightness(1.1) hue-rotate(-7deg);
    }
}

/* 🌟 大小微小波动动画 🌟 */
@keyframes scalePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}


/* 字体动画的关键帧 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 单个字符或单词的样式 */
.anim-item {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}

/* 当动画内容容器激活时，触发文字动画 */
.animation-content.animate-in .anim-item {
    animation: fadeInUp 0.6s ease-out forwards;
}

.animation-content h1 {
    font-size: 3em;
    margin-bottom: 10px;
}

.animation-content p {
    font-size: 1.2em;
}