body {
    background-color: #f5f5f0; /* 米色 */
    color: #495057; /* 灰色 */
    font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 优化字体栈 */
    --success-color: #10b981;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    --warning-color: #f59e0b;
    --primary-color: #4a7b9d; /* 更平和的蓝绿色 */
    --primary-hover: #3a6b8d; /* 对应的悬停颜色 */
    --text-muted: #6b7280;
    --card-bg: #ffffff;
    --input-bg: #f9fafb;
    --input-border: #e5e7eb;
    --input-focus: #d1d5db;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
}

/* 暗黑模式变量 */
body.dark-mode {
    --card-bg: #1f2937;
    --input-bg: #374151;
    --input-border: #4b5563;
    --input-focus: #6b7280;
    --text-muted: #9ca3af;
    background-color: #121212; /* 深色背景 */
    color: #e5e7eb;
}

/* 登录页面样式 */
.login-container {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-card {
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 2.5rem;
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
    transform: translateY(0);
    transition: var(--transition);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.dark-mode .login-card {
    border-color: rgba(255, 255, 255, 0.1);
}

.login-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: inherit;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* 表单控件样式 */
.form-control {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: var(--transition);
    color: inherit;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    background-color: var(--card-bg);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: inherit;
    font-size: 0.95rem;
}

/* 按钮样式 */
.btn-primary {
    background-color: var(--primary-color);
    border: none;
    border-radius: 8px;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    width: 100%;
    margin-top: 0.5rem;
    transition: var(--transition);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.9rem;
}

.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}

.btn-primary:active {
    transform: translateY(0);
}

/* 响应式调整 */
@media (max-width: 576px) {
    .login-card {
        padding: 1.5rem;
    }
    
    .login-title {
        font-size: 1.5rem;
    }
}

/* 添加动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.login-card {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Flash消息样式 - 简洁淡色设计 */
.alert.alert-dismissible.fade.show {
    border: none !important;
    border-left: none !important;
    border-radius: 8px !important;
    padding: 0.9rem 1.2rem !important;
    margin-bottom: 1.2rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    position: relative !important;
    animation: gentleSlideIn 0.4s ease-out forwards !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    opacity: 1 !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
}

/* 自动消失的Flash消息样式 */
.flash-auto-hide {
    transition: all 0.3s ease !important;
}

.alert-dismissible .btn-close {
    padding: 0.5rem 0.75rem;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.9em auto no-repeat;
    opacity: 0.5;
    transition: all 0.2s ease;
    border-radius: 4px;
    margin-left: 0.5rem;
}

.alert-dismissible .btn-close:hover {
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.03);
    transform: scale(1.05);
}

/* 不同类型的消息样式 - 简洁淡色主题 */
.alert.alert-dismissible.fade.show.alert-success {
    background-color: #f6fdf8 !important;
    border: none !important;
    border-left: none !important;
    color: #166534 !important;
}

.alert.alert-dismissible.fade.show.alert-danger {
    background-color: #fef7f7 !important;
    border: none !important;
    border-left: none !important;
    color: #c53030 !important;
}

.alert.alert-dismissible.fade.show.alert-info {
    background-color: #f7faff !important;
    border: none !important;
    border-left: none !important;
    color: #1e40af !important;
}

.alert.alert-dismissible.fade.show.alert-warning {
    background-color: #fffbeb !important;
    border: none !important;
    border-left: none !important;
    color: #c2410c !important;
}

/* 暗黑模式适配 - 简洁淡色设计 */
body.dark-mode .alert.alert-dismissible.fade.show {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    border: none !important;
    border-left: none !important;
}

body.dark-mode .alert.alert-dismissible.fade.show.alert-success {
    background-color: #0f1f13 !important;
    border: none !important;
    border-left: none !important;
    color: #86efac !important;
}

body.dark-mode .alert.alert-dismissible.fade.show.alert-danger {
    background-color: #1f0f0f !important;
    border: none !important;
    border-left: none !important;
    color: #fca5a5 !important;
}

body.dark-mode .alert.alert-dismissible.fade.show.alert-info {
    background-color: #0f1629 !important;
    border: none !important;
    border-left: none !important;
    color: #93c5fd !important;
}

body.dark-mode .alert.alert-dismissible.fade.show.alert-warning {
    background-color: #1f1611 !important;
    border: none !important;
    border-left: none !important;
    color: #fed7aa !important;
}

/* 暗黑模式下的关闭按钮 */
body.dark-mode .alert-dismissible .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ccc'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/0.9em auto no-repeat;
}

body.dark-mode .alert-dismissible .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* 动画效果 - 简洁优雅 */
@keyframes gentleSlideIn {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 响应式调整 - 移动端优化 */
@media (max-width: 768px) {
    .alert.alert-dismissible.fade.show {
        margin: 0.8rem 0.5rem !important;
        padding: 0.8rem 1rem !important;
        border-radius: 6px !important;
        font-size: 0.9rem !important;
    }
    
    .alert-dismissible .btn-close {
        padding: 0.4rem 0.6rem;
    }
}

.content-card,
.form-container {
    background-color: rgba(255, 255, 255, 0.75); /* 浅白色 */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px); /* 兼容 Safari */
    padding: 40px 30px; /* 增加内边距 */
    border-radius: 8px;
    margin-bottom: 30px; /* 增加外边距 */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
    border: none; /* 移除了边框 */
}

/* 移除了之前的 .navbar 样式，因为 base.html 中的 navbar 已有 mb-4 */
/* Hamburger Menu Icon */
#hamburger-menu-icon {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.8); /* Light background with transparency */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari compatibility */
    border-radius: 50%; /* Circular background */
    display: flex; /* Changed from none !important to flex */
    align-items: center;
    justify-content: center;
    z-index: 1100;
    cursor: pointer;
    padding: 0; /* SVG will be centered */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    animation: scrollFromLeftToRightBackAndForth 20s linear infinite; /* 更新动画：20秒一个来回, 线性, 无限循环 (速度减半) */
}

#hamburger-menu-icon svg {
    stroke: #ffffff; /* White icon color */
    width: 20px;
    height: 20px;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none; /* Explicitly set fill to none */
}

#hamburger-menu-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%; /* Make uploaded image circular */
}

/* Dark Mode Toggle Button */
#darkModeToggle {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1100;
    padding: 0;
    background: none;
    border: none;
    margin: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

/* Dark mode style for the button itself */
body.dark-mode #darkModeToggle {
    background: none;
}


/* Sidebar Styles */
.sidebar {
    height: 100%;
    width: 250px; /* Adjust width as needed */
    position: fixed;
    z-index: 1050; /* Ensure it's above most content but below modals if any */
    top: 0;
    left: 0;
    background-color: #f5f5f0; /* 与主页背景颜色一致 */
    overflow-x: hidden;
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%); /* Initially hidden off-screen */
    padding-top: 60px; /* Space for navbar or top content */
    border-right: 1px solid #dee2e6; /* Optional border */
    box-shadow: 2px 0 10px rgba(0,0,0,0.1); /* 添加阴影效果 */
}

.sidebar.open {
    transform: translateX(0);
}

.sidebar .nav-link {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 1.1rem;
    color: #343a40; /* Darker text for links */
    display: block;
    transition: background-color 0.2s ease;
}

.sidebar .nav-link:hover {
    background-color: #ced4da; /* Hover effect */
    color: #000;
}

.sidebar .nav-link.active {
    font-weight: bold;
    color: #007bff; /* Bootstrap primary color for active link */
}

/* Adjust main content when sidebar is open */
.container.mt-4.main-content { /* Be specific to avoid affecting other containers */
    transition: margin-left 0.3s ease-in-out;
    padding-left: 15px; /* Default padding */
    padding-right: 15px; /* Default padding */
    padding-top: 55px; /* Ensure space for fixed hamburger menu, increased from 35px */
}

.container.mt-4.main-content.sidebar-open {
    margin-left: 250px; /* Same as sidebar width */
}

/* Ensure navbar is above sidebar or handle its interaction */
.navbar {
    z-index: 1060; /* Higher than sidebar if sidebar is meant to be under it */
}
/* Article container floating and bobbing effect */
.content-card {
    position: relative; /* Ensure positioning context for animation and pseudo-elements */
    
    margin-top: 1rem; /* Added top margin for visual separation */
    background-size: cover; /* Default background size if image is applied */
    background-position: center; /* Default background position */
}

/* Styles for content card with background image in post detail view */
.content-card.has-background-image {
    background-color: rgba(255, 255, 255, 0.6); /* More transparent background */
    padding-top: 60px; /* Extra padding at top for better readability */
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.content-card.has-background-image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.85); /* White overlay with 85% opacity */
    z-index: 0;
    border-radius: 8px;
}

.content-card.has-background-image > * {
    position: relative;
    z-index: 1; /* Ensure content is above the overlay */
}

/* Ensure post content is readable with background image */
.post-content {
    position: relative;
    z-index: 2;
}

/* Style for video containers in post content */
.post-content .video-container {
    margin: 25px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.content-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.7); /* White overlay with 70% opacity */
    border-radius: 8px; /* Match parent's border-radius */
    z-index: 0; /* Ensure overlay is behind content */
}

.content-card > * {
    position: relative; /* Ensure content is above the overlay */
    z-index: 1;
}

@keyframes floatAnimation {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px); /* Adjust bobbing height */
    }
}

/* Adjust margin-top for the first article card on the index page to be just below the hamburger menu */
.main-content .content-card:first-of-type {
    margin-top: 0;
}

/* Article Title Color */
.card-title {
    color: #495057; /* Bootstrap 默认灰色文本颜色 */
}
/* Ensure images within article cards are responsive */
.content-card img { /* This rule might be redundant if background images are used, but kept for other img cases */
    max-width: 100%;
    height: auto;
}

/* Video container styles for YouTube and Bilibili */
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    margin: 20px 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Specific styles for YouTube videos */
.youtube-video {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Specific styles for Bilibili videos */
.bilibili-video {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

/* Homepage article card with video background */
.article-card.has-video-background {
    position: relative;
    background-color: rgba(255, 255, 255, 0.6);
    background-size: cover;
    background-position: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card.has-video-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.75);
    border-radius: 8px;
    z-index: 0;
}

.article-card.has-video-background .card-body,
.article-card.has-video-background .card-footer {
    position: relative;
    z-index: 1;
}

/* Homepage article card with NetEase Music */
.article-card.has-netease-music {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.article-card.has-netease-music .card-body,
.article-card.has-netease-music .card-footer {
    position: relative;
    z-index: 1;
}

/* 移除视频图标 */
.article-card.has-video-background::after {
    content: none;
}
/* Styles for centering home page article content */
.home-article-body {
    text-align: center;
}

.admin-icon-preview {
    max-width: 50px;
    max-height: 50px;
    border: 1px solid #dee2e6; /* Bootstrap's $gray-300 */
    padding: 2px;
    object-fit: contain; /* Ensures the image is scaled within the bounds */
    background-color: #f8f9fa; /* Optional: light background for visibility */
}
/* Styles for index page article items */
.home-article-body {
    text-align: center; /* Existing style from lines 148-150 */
    position: relative; /* Retain for now, might not be needed for new layout */
    padding-bottom: 10px; /* Reduced padding, footer will have its own */
}

/* Remove absolute positioning from original date and read-more link selectors if they were direct children */
/* These specific selectors might not be strictly necessary if the HTML structure is guaranteed */
.home-article-body > .card-subtitle,
.home-article-body > .card-link {
    position: static; /* Override any previous absolute positioning */
}

/* New styles for the custom footer */
.home-article-body .card-footer-custom {
    display: flex;
    justify-content: space-between; /* '阅读更多' on left, date on right */
    align-items: center; /* Vertically align items */
    margin-top: 1rem; /* Space above the footer */
    padding-top: 0.5rem; /* Added padding top */
    padding-bottom: 0.5rem; /* 增加底部内边距 */
    position: relative; /* 相对定位 */
}

.home-article-body .card-footer-custom .read-more-link {
    text-decoration: none;
    color: #6c757d;
    margin-right: 1rem; /* Add some space to the right of the link */
    flex-shrink: 0; /* Prevent shrinking if space is tight */
    /* Flex item, will be on the left */
}

.home-article-body .card-footer-custom .post-date {
    margin-bottom: 0; /* Override h6 default margin */
    flex-shrink: 0; /* Prevent shrinking */
    text-align: right; /* Ensure date text aligns to its right edge */
    /* Flex item, will be on the right */
}

/* Styles for title and text, ensuring they are still centered and have the offset */
.home-article-body .card-title {
    text-align: center; /* 标题居中对齐 */
    margin-bottom: 0.5rem; /* 增加标题和摘要之间的距离 */
}

.home-article-body .card-text {
    text-align: justify; /* 摘要两端对齐 */
    margin-bottom: 1rem; /* 增加摘要和日期之间的距离 */
}
/* Remove underline from homepage article title links */
.home-article-body > a,
.home-article-body > a:hover {
    text-decoration: none;
}
/* New Homepage Carousel Styles */
#homePageCarousel { /* Targeting the main carousel container */
    padding-bottom: 0px !important; /* Attempt to remove internal bottom padding */
    margin-top: 0; /* Move carousel closer to the top navigation */
}

#homePageCarousel .carousel-item {
    height: 100%; /* 让背景图高度和容器盒子高度一致 */
    background-size: cover; /* Ensure background image covers the item */
    background-position: center; /* Center the background image */
}

#homePageCarousel .carousel-item .carousel-default-bg {
    height: 100%;
    object-fit: cover; /* Ensure images cover the area, might crop */
    width: 100%;
}

#homePageCarousel .carousel-default-bg {
    background-color: #6c757d; /* Bootstrap secondary color as placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
}

#homePageCarousel .carousel-caption {
    background-color: transparent; /* Removed background color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Added text shadow for readability */
    border-radius: .25rem; /* Optional: match Bootstrap card radius */
    padding: 1rem;
}

/* The #homePageCarousel itself will use the .content-card styles for width and general appearance */
/* Removing old carousel styles */
/* Custom Carousel Title Styles */
.carousel-item-title-custom {
    position: absolute;
    top: 20px; /* Adjust as needed */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Ensure it's above the image */
    text-align: center;
    width: 90%; /* Prevent title from touching edges */
}

.carousel-item-title-custom h5 a {
    color: #fff; /* Ensure title is visible on various backgrounds */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7); /* Improve readability */
    font-size: 1.25rem; /* Adjust font size as needed */
}

/* Responsive Carousel Caption Styles */
#homePageCarousel .carousel-caption {
    background-color: transparent; /* Removed background color */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Added text shadow for readability */
    border-radius: .25rem;
    padding: 0.5rem; /* Slightly reduced padding for smaller screens */
    bottom: 1rem; /* Adjusted position */
    left: 5%;
    right: 5%;
    width: 90%; /* Use more width on smaller screens */
}

#homePageCarousel .carousel-caption p {
    font-size: 0.875rem; /* Smaller summary text on small screens */
    margin-bottom: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit summary to 2 lines */
    line-clamp: 2; /* Standard property as fallback */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Styles for medium screens and up (Bootstrap md breakpoint: 768px) */
@media (min-width: 768px) {
    .carousel-item-title-custom h5 a {
        font-size: 1.5rem; /* Larger title for larger screens */
    }

    #homePageCarousel .carousel-caption {
        padding: 1rem; /* Restore larger padding */
        bottom: 1.25rem; /* Default Bootstrap caption bottom */
        left: 15%;
        right: 15%;
        width: 70%; /* Default Bootstrap caption width */
    }

    #homePageCarousel .carousel-caption p {
        font-size: 1rem; /* Restore larger summary text */
        -webkit-line-clamp: unset; /* Remove line clamping */
        line-clamp: unset; /* Standard property as fallback */
    }
}
/* Swiper Slide Background Handling */
.swiper-slide {
    /* Add a default min-height or aspect-ratio if needed, e.g.: */
    min-height: 240px; /* Reduced from 300px to reduce bottom blank space */
    /* Or use aspect-ratio: 16 / 9; */
    height: auto; /* Allow Swiper to manage height, overriding potential inline styles */
    display: flex; /* Optional: Helps center content if needed */
    align-items: center; /* Optional: Center vertically */
    justify-content: center; /* Optional: Center horizontally */
    position: relative; /* Ensure context for absolutely positioned children */
}

.swiper-slide-with-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.swiper-slide-no-bg {
    background-color: #f8f9fa; /* Default background for slides without images */
}

/* Dark mode adjustments if necessary */
body.dark-mode .swiper-slide-no-bg {
    background-color: #343a40; /* Example dark mode background */
}

@keyframes scrollFromLeftToRightBackAndForth {
  0% {
    transform: translateX(0px) rotate(0deg); /* 初始位置在左边，不旋转 */
  }
  50% {
    /* 移动到视口右侧，减去自身宽度(44px)和左右各10px的边距, 旋转一圈 */
    transform: translateX(calc(100vw - 44px - 20px)) rotate(360deg);
  }
  100% {
    transform: translateX(0px) rotate(0deg); /* 回到左边，回到初始旋转状态 */
  }
}

/* Pagination Styles */
.pagination {
    margin-top: 3rem;
    margin-bottom: 1.5rem;
}

.page-item {
    margin: 0 0.3rem; /* 增加页码之间的间距 */
}

.page-item:first-child {
    margin-left: 0;
}

.page-item:last-child {
    margin-right: 0;
}

.page-item.active .page-link {
    background-color: #6c757d; /* 浅灰色 */
    border-color: #6c757d;
    color: #fff;
}

.page-link {
    color: #666; /* 深灰色 */
    background-color: #f5f5f0; /* 米色 */
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
    transition: all 0.3s ease;
    padding: 0.6rem 1.1rem; /* 调整内边距使按钮更大 */
    font-weight: 500;
}

.page-link:hover {
    background-color: #e9ecef; /* 鼠标悬停时更浅的灰色 */
    color: #666;
    transform: translateY(-2px); /* 悬停时轻微上移效果 */
}

.page-item.disabled .page-link {
    color: #ccc; /* 禁用状态的颜色 */
    background-color: #fff;
    border-color: #dee2e6;
}

/* 分页组件的移动端适配 */
@media (max-width: 768px) {
    .pagination {
        margin-top: 1.2rem;
        margin-bottom: 1.2rem;
    }
    
    .page-item {
        margin: 0 0.2rem; /* 移动端稍小的间距 */
    }
    
    .page-link {
        padding: 0.5rem 0.9rem; /* 移动端稍小的内边距 */
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .pagination {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }
    
    .page-item {
        margin: 0 0.15rem; /* 小屏幕更紧凑的间距 */
    }
    
    .page-link {
        padding: 0.4rem 0.7rem; /* 小屏幕更小的内边距 */
        font-size: 0.85rem;
    }
    
    /* 在小屏幕上隐藏省略号旁边的页码 */
    .pagination .page-item.d-none-xs {
        display: none;
    }
}

/* Dark Mode Styles */
body.dark-mode {
    background-color: #121212; /* 深黑色 */
    color: #e0e0e0; /* 浅灰色 */
}

body.dark-mode .content-card,
body.dark-mode .form-container {
    background-color: rgba(30, 30, 30, 0.85); /* 深灰色 */
    box-shadow: 0 6px 15px rgba(255, 255, 255, 0.05); /* 更柔和的白色阴影 */
}

body.dark-mode .card-title {
    color: #e0e0e0; /* 浅灰色 */
}

body.dark-mode .card-text {
    color: #b0b0b0; /* 中灰色 */
}

/* Ensure theme toggle button has no border in light mode either */
.btn-outline-primary {
    border-color: transparent !important; /* Ensure no border */
}

/* Keep hover effect for light mode, or adjust as needed */
.btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff !important; /* Ensure border appears on hover */
}


body.dark-mode .btn-outline-primary {
    color: #007bff; /* 蓝色 */
    border-color: transparent !important; /* 移除蓝色边框, ensure important */
}

body.dark-mode .btn-outline-primary:hover {
    color: #fff; /* 白色 */
    background-color: #007bff; /* 蓝色 */
    border-color: #007bff; /* 悬停时保留蓝色边框，或按需修改 */
}

/* Custom styles for "Read More" button in home articles - MOVED HERE FOR PRECEDENCE */
.home-article-body .card-footer-custom .read-more-link.btn-outline-primary,
.home-article-body .card-footer-custom .read-more-link.btn-outline-primary:link,
.home-article-body .card-footer-custom .read-more-link.btn-outline-primary:visited {
    --bs-btn-color: #333333 !important; /* 深灰色 */
    color: #333333 !important;          /* 深灰色 */
    border-color: transparent !important; /* 边框透明 */
    background-color: transparent !important; /* 背景透明 */
    box-shadow: none !important; /* 移除可能的默认阴影 */
    text-decoration: none !important; /* 移除下划线 */
}

.home-article-body .card-footer-custom .read-more-link.btn-outline-primary:hover,
.home-article-body .card-footer-custom .read-more-link.btn-outline-primary:focus {
    --bs-btn-color: #000000 !important; /* 黑色 */
    color: #000000 !important; /* 悬停/焦点时更深的黑色 */
    background-color: #f0f0f0 !important; /* 悬停/焦点时浅灰色背景 */
    border-color: transparent !important; /* 保持边框透明 */
    box-shadow: none !important; /* 移除 Bootstrap 可能添加的焦点阴影 */
    text-decoration: none !important; /* 移除下划线 */
}

body.dark-mode .home-article-body .card-footer-custom .read-more-link.btn-outline-primary,
body.dark-mode .home-article-body .card-footer-custom .read-more-link.btn-outline-primary:link,
body.dark-mode .home-article-body .card-footer-custom .read-more-link.btn-outline-primary:visited {
    --bs-btn-color: #e0e0e0 !important; /* 浅灰色 */
    color: #e0e0e0 !important;          /* 浅灰色 */
    border-color: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important; /* 移除下划线 */
}

body.dark-mode .home-article-body .card-footer-custom .read-more-link.btn-outline-primary:hover,
body.dark-mode .home-article-body .card-footer-custom .read-more-link.btn-outline-primary:focus {
    --bs-btn-color: #ffffff !important; /* 白色 */
    color: #ffffff !important; /* 暗黑模式悬停/焦点时白色字体 */
    background-color: #444444 !important; /* 暗黑模式悬停/焦点时较深灰色背景 */
    border-color: transparent !important;
    box-shadow: none !important;
    text-decoration: none !important; /* 移除下划线 */
}
/* End custom styles for "Read More" button */

/* Custom styles for Post Date */
.home-article-body .card-footer-custom .post-date {
    color: #555555 !important; /* 灰色 */
    border: none !important;
    margin-bottom: 0; /* Already exists, but good to ensure */
}

body.dark-mode .home-article-body .card-footer-custom .post-date {
    color: #cccccc !important; /* 浅灰色 */
    border: none !important;
}
/* End custom styles for Post Date */

body.dark-mode .page-link {
    color: #e0e0e0; /* 浅灰色 */
    background-color: #1e1e1e; /* 深灰色 */
    border-color: #333; /* 灰色 */
}

body.dark-mode .page-link:hover {
    background-color: #2c2c2c; /* 鼠标悬停时更浅的深灰色 */
    color: #e0e0e0;
}

body.dark-mode .page-item.active .page-link {
    background-color: #444; /* 激活状态的深灰色 */
    border-color: #444;
    color: #fff;
}

body.dark-mode .page-item.disabled .page-link {
    color: #666; /* 禁用状态的深灰色 */
    background-color: #121212; /* 深黑色 */
    border-color: #333;
}

/* Dark mode for sidebar */
body.dark-mode .sidebar {
    background-color: #212529; /* Bootstrap dark background color */
    border-right: 1px solid #343a40; /* Darker border */
}

body.dark-mode .sidebar .nav-link {
    color: #adb5bd; /* Lighter text for dark mode */
}

body.dark-mode .sidebar .nav-link:hover {
    background-color: #343a40; /* Darker hover background */
    color: #f8f9fa; /* Lighter text on hover */
}

body.dark-mode .sidebar .nav-link.active {
    color: #0d6efd; /* Bootstrap primary blue for active link in dark mode */
    font-weight: bold;
}

/* Dark mode for hamburger icon background */
body.dark-mode #hamburger-menu-icon {
    background-color: rgba(52, 58, 64, 0.8); /* Dark background with transparency */
}

/* 深色模式下导航栏样式 */
body.dark-mode .navbar {
    background-color: #121212 !important; /* 与页面背景一致 */
}

/* Dark mode for admin icon preview */
body.dark-mode .admin-icon-preview {
    border: 1px solid #495057; /* Darker border */
    background-color: #343a40; /* Darker background */
}

/* Dark mode for form elements, if not covered by Bootstrap's dark theme variables */
body.dark-mode .form-control {
    background-color: #2b2b2b;
    color: #e0e0e0;
    border-color: #444;
}

body.dark-mode .form-control:focus {
    background-color: #2b2b2b;
    color: #e0e0e0;
    border-color: #007bff; /* Or your preferred focus color */
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25); /* Or your preferred focus shadow */
}

/* 选择框样式 */
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: 8px;
    padding: 0.75rem 2.25rem 0.75rem 1rem;
    font-size: 0.95rem;
    color: inherit;
    transition: var(--transition);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    background-color: var(--card-bg);
    outline: none;
}

.form-select:disabled {
    background-color: #e9ecef;
    opacity: 1;
}

body.dark-mode .form-select {
    background-color: #2b2b2b;
    color: #e0e0e0;
    border-color: #444;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e0e0e0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'/%3e%3c/svg%3e");
}

body.dark-mode .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);
    background-color: #2b2b2b;
}

/* Powered by TizzyT Footer Styles */
.footer-powered-by {
    text-align: center;
    padding: 20px 0;
    font-size: 0.9em;
    color: #6c757d; /* Bootstrap secondary color */
    margin-top: 30px; /* Space above the footer */
    border-top: 1px solid #dee2e6; /* Light border on top */
}

body.dark-mode .footer-powered-by {
    color: #adb5bd; /* Lighter gray for dark mode */
    border-top: 1px solid #343a40; /* Darker border for dark mode */
}

/* Article Card Animation Styles */
.article-card {
    opacity: 0;
    /* transform: translateY(50px); Removed: Y-axis animation is not desired for side-scrolling */
    /* Transitions:
       - opacity: for entry animation (2.0s)
       - transform: for hover (0.3s) and entry (will be 0.3s due to this overriding the 2.0s for transform)
       - box-shadow: for hover (0.3s)
    */
    transition: opacity 2.0s ease-out, /* For entry animation */
                transform 0.3s ease-in-out, /* Adjusted for responsive hover; entry animation transform also uses this duration */
                box-shadow 0.3s ease-in-out; /* For hover interaction */
    height: auto !important; /* Allow flexible height for article cards */
    min-height: 240px !important; /* Minimum height */
    max-height: none !important; /* Remove maximum height restriction */
    overflow: hidden; /* Hide content that overflows the card */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Added for .article-card */
    padding: 0; /* Remove padding from the card itself */
}

.article-card.is-visible:hover,
.article-card.is-visible:focus,
.article-card.is-visible:focus-within {
    transform: translateX(0) translateY(-5px); /* Ensure X state from .is-visible is maintained */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
}

.article-card .card-img-top {
    height: 120px; /* Adjusted height for the image within the card */
    object-fit: cover; /* Ensure image covers the area, cropping if necessary */
    width: 100%; /* Ensure image takes full width of its container */
    flex-shrink: 0; /* Moved and corrected */
    box-sizing: border-box; /* Added */
    margin: 0; /* Remove margins */
} /* Corrected closing brace for .card-img-top */

.article-card .home-article-body {
    flex-grow: 1;
    overflow-y: auto;
    min-height: 0; /* Allows the item to shrink if necessary before scrolling applies */
    display: flex;
    flex-direction: column;
    box-sizing: border-box; /* Added */
    margin: 0; /* Remove margins */
    padding: 1rem; /* Consistent padding for content */
    overflow: visible; /* Allow content to expand */
}

.article-card .card-footer-custom {
    flex-shrink: 0;
    box-sizing: border-box; /* Added */
    margin: 0; /* Remove margins */
    padding: 0.75rem 1rem; /* Padding for footer content */
    position: relative;
    z-index: 2; /* Ensure footer stays above content */
}
/* Specific animation for odd and even cards if Scheme 2 is chosen */
.article-card.initial-odd {
    transform: translateX(-50px); /* Initial X offset for odd cards, Y is 0 */
}

.article-card.initial-even {
    transform: translateX(50px); /* Initial X offset for even cards, Y is 0 */
}

.article-card.is-visible {
    opacity: 1;
    transform: translateX(0); /* Slides to final X position, Y remains 0 */
}
/* Hide Swiper navigation buttons */
#homePageCarousel .carousel-control-prev,
#homePageCarousel .carousel-control-next {
    display: none !important;
}


/* Styles for article cards with background images */
.article-card {
    background-repeat: no-repeat; /* Already has cover and center from .content-card */
    min-height: 250px; /* Ensure space for background image */
    display: flex; /* Allow flexbox to manage children's layout */
    flex-direction: column; /* Stack card-body and card-footer vertically */
    justify-content: space-between; /* Push footer to the bottom if content is short */
}

/* Ensure card body and footer content is readable over background images */
/* .content-card::before already provides a semi-transparent overlay */
/* However, if more contrast is needed, these can be uncommented and adjusted: */
/*
.article-card .card-body,
.article-card .card-footer-custom {
    background-color: rgba(255, 255, 255, 0.7); // Light overlay for text
    border-radius: 0.25rem; // Optional: if you want rounded corners for these sections
    padding: 1rem; // Ensure padding is consistent
}

body.dark-mode .article-card .card-body,
body.dark-mode .article-card .card-footer-custom {
    background-color: rgba(30, 30, 30, 0.7);
}

/* 返回首页按钮样式 */
.back-to-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: #f0f0f0; /* 浅灰色背景 */
    color: #000000; /* 黑色图标 */
    border: none;
    border-radius: 50%;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.back-to-home-btn:hover {
    background-color: #e0e0e0; /* 悬停时背景色变深 */
    transform: translateX(-4px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.back-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.back-icon svg {
    transition: transform 0.3s ease;
}

.back-to-home-btn:hover .back-icon svg {
    transform: translateX(-2px);
}

/* 暗黑模式下的按钮样式 */
body.dark-mode .back-to-home-btn {
    background-color: #2d3748; /* 深灰色背景 */
    color: #ffffff; /* 白色图标 */
}

body.dark-mode .back-to-home-btn:hover {
    background-color: #4a5568; /* 悬停时背景色变亮 */
    color: #ffffff;
}
*/

/* Adjust padding for card-body within article-card to prevent text from touching edges */
.article-card .card-body {
    padding: 1.5rem; /* Increased padding for better spacing */
}

/* Reduce bottom margin for article cards on the homepage index */
/* This targets the <div class="col"> that wraps each article card in the main articles listing */
/* It aims to reduce the vertical gap between rows of cards created by Bootstrap's g-4 utility and any explicit margins. */
.row.row-cols-1.row-cols-md-2.row-cols-lg-3.g-4 > .col {
    margin-top: 0.25rem !important;    /* Override Bootstrap's g-4 margin-top (1.5rem) */
    margin-bottom: 0.25rem !important; /* Set a small bottom margin */
}

/* Custom spacing for the main article grid on the homepage */
.article-grid-custom-spacing > .col {
    margin-top: 5px !important;    /* Drastically reduce top margin */
    margin-bottom: 5px !important; /* Drastically reduce bottom margin */
    padding-top: 0 !important;     /* Remove any top padding on the column */
    padding-bottom: 0 !important;  /* Remove any bottom padding on the column */
}

/* Ensure article cards themselves within this custom grid have no extra vertical margins */
.article-grid-custom-spacing > .col > .article-card {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 网易云音乐播放器响应式样式 */
.music-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0; /* 移除边距 */
    box-sizing: border-box;
    clear: both;
    display: flex;
    justify-content: center;
}

.music-container iframe {
    width: 100%;
    max-width: 430px; /* 限制最大宽度，避免在电脑端拉得太长 */
    height: 86px;
    border: none;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    border-radius: 0; /* 移除圆角 */
    box-shadow: none; /* 移除阴影 */
}

/* 移动端特殊适配 */
@media (max-width: 768px) {
    .music-container {
        width: 100%;
        max-width: calc(100vw - 40px); /* 减去左右边距 */
        margin: 0 auto; /* 移除边距 */
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .music-container iframe {
        width: 100%;
        max-width: 100%;
        height: 86px;
        transform: scale(0.95); /* 轻微缩放确保不超出 */
        transform-origin: center;
        box-sizing: border-box;
        border-radius: 0; /* 移除圆角 */
        box-shadow: none; /* 移除阴影 */
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .music-container {
        max-width: calc(100vw - 30px);
        margin: 0 auto; /* 移除边距 */
        padding: 0 5px;
    }
    
    .music-container iframe {
        transform: scale(0.9); /* 进一步缩放 */
        height: 80px;
        border-radius: 0; /* 移除圆角 */
        box-shadow: none; /* 移除阴影 */
    }
}

/* 移除重复的网易云音乐特定样式以避免双重盒子效果 */
.netease-music {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    /* 移除了可能造成双重阴影的额外样式 */
}

/* 暗黑模式下的音乐播放器样式 */
body.dark-mode .music-container {
    background-color: transparent; /* 移除背景色以避免双重盒子效果 */
    padding: 0; /* 移除内边距 */
    clear: both;
}

body.dark-mode .music-container iframe {
    box-shadow: none; /* 移除阴影 */
}

/* 首页文章链接卡片样式 */
.article-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* 确保链接覆盖整个卡片 */
    z-index: 1; /* 确保链接在卡片内容之上 */
}

.article-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: inherit;
}

.article-link .card-title {
    color: #495057;
    transition: color 0.2s ease;
}

.article-link:hover .card-title {
    color: #4a7b9d; /* 使用主题色 */
}

body.dark-mode .article-link .card-title {
    color: #e0e0e0;
}

body.dark-mode .article-link:hover .card-title {
    color: #4a7b9d; /* 使用主题色 */
}

/* 确保文章链接在焦点状态下有良好的可访问性 */
.article-link:focus {
    outline: 2px solid #4a7b9d;
    outline-offset: 2px;
}

/* 确保卡片内的所有内容都不会阻挡链接点击 */
.article-link .card-body,
.article-link .card-footer-custom {
    position: relative;
    z-index: 2; /* 确保内容在链接之上，但仍能点击 */
    pointer-events: none; /* 防止内容阻挡点击 */
}

.article-link .card-title,
.article-link .card-text,
.article-link .post-date,
.article-link .netease-music-player-container {
    pointer-events: auto; /* 允许文本选择但不影响点击 */
}

/* 网易云音乐播放器容器样式 */
.netease-music-player-container {
    margin: 10px 0;
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.netease-music-player {
    width: 100%;
    height: 86px;
    border: none;
    outline: none;
    box-sizing: border-box;
}

/* 网易云音乐播放器响应式样式 */
.netease-music-player-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    margin: 0; /* 移除边距 */
    box-sizing: border-box;
    clear: both;
    display: flex;
    justify-content: center;
}

.netease-music-player-container .netease-music-player {
    width: 100%;
    max-width: 430px; /* 限制最大宽度，避免在电脑端拉得太长 */
    height: 86px;
    border: none;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    border-radius: 0; /* 移除圆角 */
    box-shadow: none; /* 移除阴影 */
}

/* 移动端特殊适配 */
@media (max-width: 768px) {
    .netease-music-player-container {
        width: 100%;
        max-width: calc(100vw - 40px); /* 减去左右边距 */
        margin: 0 auto; /* 移除边距 */
        padding: 0 10px;
        box-sizing: border-box;
    }
    
    .netease-music-player-container .netease-music-player {
        width: 100%;
        max-width: 100%;
        height: 86px;
        transform: scale(0.95); /* 轻微缩放确保不超出 */
        transform-origin: center;
        box-sizing: border-box;
        border-radius: 0; /* 移除圆角 */
        box-shadow: none; /* 移除阴影 */
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .netease-music-player-container {
        max-width: calc(100vw - 30px);
        margin: 0 auto; /* 移除边距 */
        padding: 0 5px;
    }
    
    .netease-music-player-container .netease-music-player {
        transform: scale(0.9); /* 进一步缩放 */
        height: 80px;
        border-radius: 0; /* 移除圆角 */
        box-shadow: none; /* 移除阴影 */
    }
}

/* 暗黑模式下的音乐播放器样式 */
body.dark-mode .netease-music-player-container {
    background-color: transparent; /* 移除背景色以避免双重盒子效果 */
    padding: 0; /* 移除内边距 */
    clear: both;
}

body.dark-mode .netease-music-player-container .netease-music-player {
    box-shadow: none; /* 移除阴影 */
}

/* 显示菜单项中的文字 */
.sidebar .nav-link span {
    display: inline-block;
}

/* 隐藏网易云音乐和选页标题 */
.hide-page-title {
    display: none;
}

/* 面包屑导航样式 */
.breadcrumb-item a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: var(--transition);
    font-weight: 500;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: var(--primary-hover) !important;
    text-decoration: none !important;
}

/* 暗黑模式下的面包屑导航样式 */
body.dark-mode .breadcrumb-item a {
    color: var(--primary-color) !important;
}

body.dark-mode .breadcrumb-item a:hover,
body.dark-mode .breadcrumb-item a:focus {
    color: var(--primary-hover) !important;
}