@font-face {
    font-family: 'OptimaLTPro';
    src: url('fonts/OptimaLTPro-Roman.woff2') format('woff2'),
        url('fonts/OptimaLTPro-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 基本重置和 Body (Revert change) */
:root {
    --article-content-max-width: 720px; /* Max width of the main article text column */
    --toc-width: 250px; /* Width of the TOC sidebar itself */
    --toc-visual-gap: 50px; /* Desired visual space between TOC's right edge and Content's left edge */
    --page-min-horizontal-padding: 10px; /* Minimum padding from viewport edges for content */
    --sticky-top-offset: 40px; /* Offset for sticky elements from the top */
}

body {
    margin: 0;
    font-family: 'OptimaLTPro', sans-serif; /* Apply the new global font */
    background-color: #f8f8f8;
    color: #333333; /* Base body text color */
    /* letter-spacing: 1.5px; <<< Ensure this global letter-spacing is removed or commented out */
}

/* 顶栏样式 */
.top-bar {
    display: flex;
    align-items: center;
    height: 60px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e9ecef;
    box-sizing: border-box;
    /* position: sticky; <<< TEMP DEBUG: Disable sticky */
    /* top: 0; */
    /* z-index: 10; */
}

.top-bar-left,
.top-bar-right {
    flex: 1 1 0;
    display: flex;
}

.top-bar-left {
    justify-content: flex-start;
}

.top-bar-right {
    justify-content: flex-end;
}

.top-bar-center {
    flex-grow: 0;
    flex-shrink: 0;
    text-align: center;
}

.site-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: #212529;
}

.site-title a {
    color: inherit;
    text-decoration: none;
}

.site-title i {
    font-style: italic;
}

/* --- 恢复并调整按钮相关样式 --- */
.buttons-container {
    display: flex;
    align-items: center;
    margin-right: 15px; /* Keep overall container margin */
}

.icon-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px; /* Increased padding for larger hit area */
    border-radius: 8px; /* Slightly larger radius for hover bg */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* Needed for ::after positioning */
    color: #5a5a5a;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin: 0;
    /* Remove min-width/min-height, let padding define size */
}

/* Add margin to the first button (search) for spacing */
.search-button {
    margin-right: 8px; /* Adjust spacing as needed */
}

/* Standard hover effect (background change) */
.icon-button:hover {
    background-color: rgba(0, 0, 0, 0.05); /* Match tab hover */
    color: #212529;
}

/* Tooltip using ::after */
.icon-button::after {
    content: attr(aria-label); /* Get text from aria-label */
    position: absolute;
    top: 100%; /* Position below the button */
    left: 50%;
    transform: translateX(-50%) translateY(8px); /* Move down slightly */
    background-color: #333; /* Black background */
    color: #fff; /* White text */
    padding: 6px 12px; /* Padding inside the tooltip */
    border-radius: 6px; /* Rounded corners */
    font-size: 13px; /* Tooltip font size */
    white-space: nowrap; /* Prevent text wrapping */
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease; /* <<< CHANGE: Remove delays */
    z-index: 10;
    pointer-events: none; /* Allow clicks to pass through */
}

/* Show tooltip on hover */
.icon-button:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(12px); /* Move down further when visible */
    transition: opacity 0.2s ease, visibility 0s linear, transform 0.2s ease; /* <<< CHANGE: Remove delays */
}

/* Remove margin-left from share-button if it exists */
.icon-button.share-button {
    margin-left: 0;
}

.icon-button svg {
    width: 20px; /* Keep icon size */
    height: 20px;
    display: block; /* Ensure SVG doesn't add extra space */
}

/* --- Search Container & Input Styles --- */
.search-container {
    position: relative;
    transition: transform 0.3s ease; /* Add transition for push effect */
}

.search-input {
    position: absolute;
    right: 8px; /* <<< RESTORE: Align to the right edge OF THE BUTTON */
    top: 50%; /* Center vertically relative to button */
    transform: translateY(-50%); /* Center vertically */
    height: 32px; /* Reduced height */
    width: 0;
    opacity: 0;
    visibility: hidden; /* Default hidden */
    border: none; /* Remove border */
    border-radius: 16px; /* Half of new height */
    padding: 0 10px 0 36px; /* Adjusted left padding */
    font-size: 14px;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.05); /* Match button hover */
    transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out, visibility 0s linear 0.4s; /* Keep synchronized duration */
    z-index: 1; /* Input below button */
    outline: none; /* Remove default focus outline */
}

/* Remove focus styles if outline:none is sufficient */
/* .search-input:focus, ... */

.search-button {
    position: relative; /* Back to relative for normal flow */
    z-index: 2; /* Button above input */
    transition: transform 0.4s ease-in-out, background-color 0.2s ease, color 0.2s ease; /* Transition transform */
    margin-right: 8px; /* Spacing between search and share */
    padding: 6px; /* Reduced padding */
}

/* Active State */
.search-container.active .search-input {
    width: 220px; /* Expanded width */
    opacity: 1;
    visibility: visible; /* Make visible */
    right: calc(100% - 32px); /* <<< RESTORE right animation */
    transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out, right 0.4s ease-in-out,
        visibility 0s linear; /* <<< RESTORE right transition */
}

.search-container.active .search-button {
    /* transform: translateX(calc(-220px + 40px)); <<< REMOVE */
    transform: translateX(calc(-220px + 36px)); /* <<< CHANGE: Adjusted for new input padding */
}

/* --- 注释掉的搜索框样式 (保持注释) --- */
/*
.search-input-container { ... }
...
.search-button.hidden { ... }
*/

/* 标签页样式 */
.tabs-container {
    width: 100%;
    border-bottom: 1px solid #e9ecef;
    background-color: #fff;
    display: block;
    box-sizing: border-box; /* ADDED for consistent width calculation */
    /* position: sticky; <<< TEMP DEBUG: Disable sticky */
    /* top: 60px; */ /* Position below the 60px top-bar */
    /* z-index: 9; */ /* Below top-bar but above content */
}

.tabs-scroll-area {
    position: relative;
    height: 44px;
    display: flex;
    justify-content: center;
    padding: 0 16px;
    overflow: hidden;
}

.tabs-items {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none; /* 对Firefox */
    -ms-overflow-style: none; /* 对IE和Edge */
    max-width: 100%;
    scroll-behavior: smooth;
}

.tabs-items::-webkit-scrollbar {
    display: none; /* 对Chrome和Safari */
}

.tab-item {
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
}

.tab-item a {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 44px;
    text-decoration: none;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.tab-item a:hover {
    color: #333333;
    background-color: rgba(0, 0, 0, 0.05);
}

.tab-item.selected a {
    color: #000000;
    position: relative;
}

.tab-item.selected a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background-color: #000000;
}

.tab-scroll-button {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));
    transition: opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
}

.tab-scroll-button.left {
    left: 0;
    padding-left: 4px;
    background: linear-gradient(to right, #fff 60%, rgba(255, 255, 255, 0));
}

.tab-scroll-button.right {
    right: 0;
    padding-right: 4px;
    background: linear-gradient(to left, #fff 60%, rgba(255, 255, 255, 0));
}

.tab-scroll-button.visible {
    opacity: 1;
    pointer-events: auto;
}

.scroll-button-hitbox {
    padding: 8px;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.scroll-button-hitbox:hover {
    background-color: #f1f3f5;
}

/* 新闻内容区域 */
.news-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 维持两列基础 */
    gap: 0;
}

/* 头条新闻区域 (左侧) */
.headline-section {
    grid-column: 1;
    padding-right: 30px;
    border-right: 1px solid #e0e0e0;
}

.headline-item {
    display: block;
    text-decoration: none;
    color: inherit;
    padding-bottom: 30px;
}

.headline-item:hover .headline-title {
    text-decoration: underline;
}

/* REMOVE existing placeholder styles */
/*
.headline-image-placeholder { ... existing styles ... }
*/

/* --- ADD Styles for Real Images --- */

/* Container for headline image (optional, but good practice) */
.headline-image-container {
    width: 100%;
    height: 250px; /* Match old placeholder height */
    margin-bottom: 20px; /* Match old placeholder margin */
    border-radius: 8px; /* Match old placeholder radius */
    overflow: hidden; /* Ensure image respects border-radius */
    background-color: #f0f0f0; /* Light background while loading */
}

.headline-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit container */
}

.headline-text-content {
    text-align: center;
    padding: 0 10px;
}

.headline-title {
    font-size: 2.1rem;
    font-weight: normal;
    margin-bottom: 12px;
    line-height: 1.3;
    color: #3daad6;
    text-decoration: none;
    /* Add truncation styles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.headline-summary {
    font-size: 1rem;
    color: #333333; /* New body text color */
    line-height: 40px; /* New line height */
    letter-spacing: 1.5px; /* Ensure letter spacing is applied */
    margin-bottom: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.7em * 4);
}

.headline-meta {
    font-size: 0.85rem;
    color: #888;
    display: flex;
    align-items: center;
    justify-content: center;
}

.headline-date::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
}

/* 新闻列表区域 (右侧) */
.news-list-section {
    grid-column: 2;
    padding-left: 30px;
    display: flex;
    flex-direction: column; /* Stack items vertically */
}

.news-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    text-decoration: none;
    color: inherit;
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.news-item:last-child {
    border-bottom: none;
}

.news-item:hover .news-title {
    text-decoration: underline;
}

.news-text-content {
    flex: 1;
    padding-right: 15px;
    margin-top: 0; /* 确保没有上边距 */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 从顶部开始对齐内容 */
}

.news-title {
    font-size: 1rem;
    font-weight: bold;
    margin-top: 0; /* 移除标题上方间距 */
    margin-bottom: 5px;
    line-height: 1.4;
    color: #333333;
    text-decoration: none;
}

.news-summary {
    font-size: 0.85rem;
    color: #333333; /* New body text color */
    letter-spacing: 1.5px; /* Ensure letter spacing is applied */
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: 80px; /* 2 * 40px */
}

.news-meta {
    font-size: 0.8rem;
    color: #888;
    display: flex;
    align-items: center;
}

.news-date::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 4px;
}

/* REMOVE existing placeholder styles */
/*
.news-image-placeholder { ... existing styles ... }
*/

/* --- ADD Styles for Real Images --- */

/* Container for news list image (optional) */
.news-cover-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Crop image to fit container */
}

/* --- ADD Styles for Image Error Placeholder --- */
.image-error-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000; /* Black background */
    color: #ffffff; /* White text */
    font-size: 0.8rem; /* Adjust size as needed */
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    /* Ensure it fills the container */
    width: 100%;
    height: 100%;
}

.headline-image-container .image-error-placeholder {
    border-radius: 8px; /* Match container radius */
}

.news-image-container .image-error-placeholder {
    border-radius: 4px; /* Match container radius */
}

/* 内容页样式 - 保持不变 */

/* 可能需要引入 Font Awesome 来显示日期图标 */
/* 在 <head> 中添加: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> */

/* Helper class to hide elements */
.hidden {
    display: none !important;
}

/* Fixed Back Button Styles */
.back-button {
    position: fixed; /* Fixed position */
    top: 92px; /* Position below the top bar (72px + 20px padding) */
    left: 25px; /* Position from the left edge */
    z-index: 1000; /* Ensure it's above other content */
    display: none; /* Hidden by default */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow */
    background-color: #ffffff; /* Ensure background for visibility */
}

.back-button:hover {
    background-color: #e9ecef; /* Keep hover effect consistent */
}

.back-button svg {
    display: block; /* Ensure SVG takes up space correctly */
    width: 20px;
    height: 20px;
    fill: #5a5a5a;
}

/* Styles for when article view is active */
body.article-view-active .tabs-container,
body.article-view-active .news-container {
    display: none !important; /* Hide tabs and news list */
}

/* Show the fixed back button when article view is active */
body.article-view-active .back-button {
    display: flex !important; /* Show the fixed back button */
}

body.article-view-active .article-detail-container {
    display: grid !important; /* Show article detail */
}

/* Article Detail Container Layout - Re-adjusted for better centering */
.article-detail-container {
    /* max-width: 1100px; <<< REMOVE */
    /* margin: 40px auto; <<< REMOVE */
    /* padding: 0 20px; <<< REMOVE, padding handled differently now */
    display: grid;
    /*
      Column 1: Space to the left of content column. TOC will live here.
      Column 2: Content column (this is what gets centered effectively).
      Column 3: Space to the right of content column.
    */
    grid-template-columns: 1fr var(--article-content-max-width) 1fr;
    /* gap: 30px; <<< REMOVE, gap handled by TOC margin */

    width: 100%;
    box-sizing: border-box;
    padding-top: 40px; /* Maintain vertical padding */
    padding-bottom: 40px; /* Maintain vertical padding */

    display: none; /* Hidden by default */
}

/* Article Sidebar Styles */
.article-sidebar {
    grid-column: 1; /* Place TOC in the left 1fr column */
    justify-self: end; /* Align the TOC to the right edge of this 1fr column */

    width: var(--toc-width);
    margin-right: var(
        --toc-visual-gap
    ); /* Create space between TOC and the start of content column */

    position: sticky;
    top: var(--sticky-top-offset);
    height: calc(
        100vh - var(--sticky-top-offset) - 20px
    ); /* Adjust 20px for potential bottom spacing/padding */
    overflow-y: auto;
    font-size: 0.85rem;

    /* padding-right: 100px; <<< REMOVE old spacing method */
    /* padding-left: 0; <<< REMOVE old spacing method */
    padding-left: var(
        --page-min-horizontal-padding
    ); /* Space for TOC text from left viewport edge */
    padding-right: 15px; /* Internal padding for TOC content on its right side */

    border-right: none; /* Keep as is */
    /* width: 100%; <<< REMOVE, width is now var(--toc-width) */
    box-sizing: border-box;
}

.article-sidebar h3 {
    /* "ON THIS PAGE" */
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e9ecef;
}

/* Styling for all TOC links - Match color with ON THIS PAGE heading */
#article-toc li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0px 6px 8px; /* Adjusted padding: remove right padding here, it's on sidebar */
    text-decoration: none;
    color: #6c757d; /* Match color with ON THIS PAGE heading */
    transition: color 0.15s ease;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}

/* h2 level links - cursor pointer for expand/collapse */
#article-toc > ul > li > a {
    font-weight: 400; /* Changed from 500 to 400 */
    font-size: 0.9rem;
    cursor: pointer;
    padding-left: 12px; /* Ensure consistent padding for h2 links */
}

/* h3 level links */
#article-toc ul ul li a {
    font-weight: 400;
    font-size: 0.85rem;
    color: #6c757d; /* Match color with ON THIS PAGE heading */
    padding: 4px 8px 4px 12px; /* Keep original padding for h3 links */
}

/* Hover effects */
#article-toc li a:hover {
    color: #495057; /* Darker shade for hover */
}

/* Active state */
#article-toc li a.active {
    color: #495057; /* Darker shade for active state */
    font-weight: 600;
}

/* --- 全局滚动条样式 --- */

/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 8px; /* 垂直滚动条宽度 */
    height: 8px; /* 水平滚动条高度 */
}

::-webkit-scrollbar-track {
    background: transparent; /* 隐藏轨道背景 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background-color: #cccccc; /* 浅灰色滑块 */
    border-radius: 4px; /* 圆角 */
    border: 2px solid transparent; /* 创建一点边距感 */
    background-clip: content-box;
    transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #aaaaaa; /* 悬停时颜色变深 */
}

/* Firefox */
* {
    scrollbar-width: thin; /* 设置为细滚动条 */
    scrollbar-color: #cccccc transparent; /* 滑块颜色 和 轨道颜色 */
}

/* --- Jump Button Expansion Styles --- */
.jump-button-wrapper {
    position: relative; /* Context for absolute positioning of options */
    display: flex; /* Keep buttons aligned */
    align-items: center;
}

.jump-options-container {
    position: absolute;
    right: 0; /* Align right edge */
    transform: scaleX(0.8); /* Just scale initially */
    top: 0;
    height: 32px; /* SET Height to match search input */
    display: flex;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.05); /* Match search input background */
    border-radius: 16px; /* SET Radius to match search input */
    padding: 0 4px; /* <<< CHANGE: Reduced horizontal padding slightly */
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    white-space: nowrap; /* Prevent buttons from wrapping */
    transform-origin: right; /* Scale from right */
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
    z-index: 3; /* Above search button/input */
    box-sizing: border-box; /* <<< ADD: Ensure padding doesn't add to height */
}

.jump-option-button {
    text-decoration: none;
    color: #6c757d; /* Lighter gray to match placeholder feel */
    font-size: 14px;
    font-weight: 500;
    /* padding: 0 8px; <<< REMOVE: Padding moved for hover bg */
    padding: 4px 8px; /* <<< ADD: Vertical and horizontal padding */
    margin: 0 2px; /* <<< ADD: Small margin between items */
    border-radius: 12px; /* <<< ADD: Rounded corners for hover bg */
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.jump-option-button:hover {
    color: #ffffff; /* <<< CHANGE: White text on hover */
    background-color: #000000; /* <<< ADD: Black background on hover */
}

/* --- Headline Title Truncation --- */
.headline-title {
    font-size: 2.1rem;
    font-weight: bold;
    margin-bottom: 12px;
    line-height: 1.3;
    color: #333333;
    text-decoration: none;
    /* Add truncation styles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Active State for Jump Button */
.jump-button-wrapper.active .jump-options-container {
    opacity: 1;
    visibility: visible;
    /* transform: translateX(-50%) scaleX(1); <<< REMOVE */
    transform: scaleX(1); /* <<< CHANGE: Expand from right */
    transition: opacity 0.3s ease, visibility 0s linear, transform 0.3s ease;
}

/* REMOVE the CSS rule trying to push via adjacent sibling */
/*
.jump-button-wrapper.active + .search-container {
    transform: translateX(-95px);
}
*/

/* ADD new rule for pushing search container via JS-added class */
.search-container.pushed-left-by-jump {
    /* transform: translateX(-100px); <<< REMOVE User request */
    transform: translateX(-140px); /* <<< ADJUST: User request */
}

/* Hide original share button icon when expanded */
.jump-button-wrapper.active .share-button {
    opacity: 0;
    pointer-events: none; /* Prevent interaction */
    transition: opacity 0.2s ease;
}

/* --- Search Container Interaction --- */
/* Add transition for transform on the search container */
.search-container {
    position: relative;
    transition: transform 0.3s ease; /* Add transition for push effect */
}

/* When jump button is active, push search container left */
.jump-button-wrapper.active + .search-container {
    /* Estimate width: (approx 80px per button + 10px sep + 20px padding) * ~ -1 */
    transform: translateX(-190px);
}

/* Active State */
.search-container.active .search-input {
    width: 220px; /* Expanded width */
    opacity: 1;
    visibility: visible;
    /* right: calc(100% - 36px); <<< REMOVE */
    right: calc(100% - 32px); /* <<< CHANGE: Adjusted for new button height/width */
    transition: width 0.4s ease-in-out, opacity 0.4s ease-in-out, right 0.4s ease-in-out,
        visibility 0s linear;
}

.search-container.active .search-button {
    /* transform: translateX(calc(-220px + 40px)); <<< REMOVE */
    transform: translateX(calc(-220px + 36px)); /* <<< CHANGE: Adjusted for new input padding */
    background-color: transparent !important; /* <<< ADD: Remove active background on mobile */
}

/* --- ADD: Styles for X Feed 'No Results' Message --- */
.no-results-message {
    text-align: center;
    padding: 40px 20px; /* Add vertical and horizontal padding */
    color: #6c757d; /* Use a muted color */
    font-size: 0.95rem;
}

/* ========= Responsive Styles (Mobile) ========= */
@media (max-width: 768px) {
    /* --- General Adjustments --- */
    body {
        /* Potentially reduce base font size if needed */
    }

    .top-bar {
        padding: 0 10px; /* Reduced horizontal padding to match content */
    }

    .site-title {
        font-size: 1.1rem; /* Slightly smaller title */
    }

    /* --- Hide Site Title when Search is Active --- */
    /* Uses :has() pseudo-class */
    .top-bar:has(.search-container.active) .top-bar-center,
    .top-bar:has(.jump-button-wrapper.active) .top-bar-center {
        display: none; /* Hide the center container holding the title */
    }
    /* Ensure right icons don't get pushed too far */
    .top-bar:has(.search-container.active) .top-bar-right,
    .top-bar:has(.jump-button-wrapper.active) .top-bar-right {
        flex-grow: 1; /* Allow right side to expand */
    }

    /* --- Disable Tooltips on Mobile --- */
    .icon-button::after {
        display: none !important; /* Force hide tooltips */
    }

    /* --- News List Layout (Single Column) --- */
    .news-container {
        grid-template-columns: 1fr; /* Single column */
        padding: 0 10px; /* Adjust padding */
        margin-top: 20px; /* Reduce top margin */
    }

    .headline-section {
        padding-right: 0; /* Remove right padding */
        border-right: none; /* Remove vertical divider */
        padding-bottom: 20px; /* Add space below headline */
        margin-bottom: 20px; /* Add margin for visual separation */
        border-bottom: 1px solid #e0e0e0; /* Add bottom border */
        grid-column: 1 / -1; /* <<< ADD: Ensure it spans the single column */
    }

    .news-list-section {
        padding-left: 0; /* Remove left padding */
        grid-column: 1 / -1; /* <<< ADD: Ensure it spans the single column */
    }

    .headline-title {
        font-size: 1.8rem; /* Reduce headline title size */
    }

    .headline-summary {
        font-size: 0.95rem; /* Adjust summary size */
        -webkit-line-clamp: 3; /* Show slightly less text */
        max-height: calc(1.7em * 3);
    }

    .news-item {
        padding: 15px 0; /* Reduce padding */
    }

    .news-title {
        font-size: 0.95rem; /* Adjust title size */
    }

    .news-summary {
        font-size: 0.8rem; /* Adjust summary size */
    }

    /* --- Article Detail Layout --- */
    .article-detail-container {
        grid-template-columns: 1fr; /* Ensure single column for content */
        padding: 0 var(--page-min-horizontal-padding); /* Use variable for consistent edge padding */
        margin-top: 20px; /* Reduce top margin - keep */
        gap: 0; /* Remove gap, not needed for single column content */
    }

    .article-sidebar {
        display: none; /* Hide desktop TOC sidebar - keep */
    }

    .article-content {
        grid-column: 1 / -1; /* Span full width - keep */
        max-width: none; /* Remove max width constraint - keep */
        padding-left: 0; /* Rely on parent container for horizontal padding */
        padding-right: 0; /* Rely on parent container for horizontal padding */
        padding-bottom: 40px; /* Adjust padding - keep */
    }

    #article-title {
        font-size: 1.9rem; /* Reduce article title size */
    }

    #article-meta {
        font-size: 0.75rem; /* Reduce meta size */
        /* margin-bottom: 25px; <<< Will be overridden by more specific em value if needed, or kept if better */
        /* padding-bottom: 10px; <<< Will be overridden by more specific em value if needed, or kept if better */
        /* border-bottom will be inherited from global style unless set to none here */
        padding-bottom: 1em; /* Adjusted padding for mobile */
        margin-bottom: 1.5em; /* Adjusted margin for mobile */
    }

    #article-body {
        /* display: flex !important; <<< REMOVE */
        /* flex-direction: column !important; <<< REMOVE */
        /* gap: 10rem !important; <<< REMOVE */
    }
    .article_body_container {
        /* display: flex !important; <<< REMOVE */
        /* flex-direction: column !important; <<< REMOVE */
        /* gap: 10rem !important; <<< REMOVE */
    }

    #article-body h2 {
        font-size: 1.3rem; /* Adjust heading sizes */
        margin-top: 2em;
        margin-bottom: 0.7em;
    }

    #article-body h3 {
        font-size: 1.1rem;
        margin-top: 1.8em;
        margin-bottom: 0.6em;
    }
    #article-body p {
        line-height: 30px;
    }

    #article-body p,
    #article-body ul,
    #article-body ol,
    #article-body blockquote {
        font-size: 0.95rem;
        /* line-height: 40px; <<< REMOVE */
        line-height: 1.8; /* <<< CHANGE: More reasonable line height */
        color: #333333;
        /* letter-spacing: 1.5px; <<< REMOVE */
        letter-spacing: 0.5px; /* <<< CHANGE: Reduced letter spacing */
        /* margin-bottom: 1.5em; <<< REMOVE */
        margin-bottom: 1.2em; /* <<< CHANGE: Reduced paragraph bottom margin */
    }

    #article-body li {
        /* Specific for list items if needed */
        /* margin-bottom: 0.5em; <<< REMOVE */
        margin-bottom: 0.4em; /* <<< CHANGE: Reduced list item bottom margin */
        line-height: 1.7; /* <<< ADD: Consistent line height for list items */
    }

    /* --- Back Button --- */
    .back-button {
        top: 75px; /* Adjust position slightly */
        left: 15px;
        padding: 6px; /* Smaller button */
    }
    .back-button svg {
        width: 18px;
        height: 18px;
    }

    /* --- Search Input Expansion --- */
    .search-container.active .search-input {
        width: calc(100vw - 100px); /* Make input wider, leave space */
        /* Adjust 'right' if needed based on container width */
    }

    .search-container.active .search-button {
        /* Adjust transform based on the new input width */
        transform: translateX(
            calc(36px - (100vw - 100px))
        ); /* Simplified calculation, might need tweak */
        background-color: transparent !important; /* <<< ADD: Remove active background on mobile */
    }

    /* --- Jump Button Expansion --- */
    .jump-options-container {
        /* Might need adjustments */
        height: 36px; /* Match button height maybe? */
        border-radius: 18px;
    }
    .search-container.pushed-left-by-jump {
        /* Adjust push distance for mobile */
        transform: translateX(-120px); /* Increased push distance */
    }

    /* 移动端隐藏返回按钮，依靠系统滑动返回功能 */
    body.article-view-active .back-button {
        display: none !important; /* 强制覆盖默认显示规则 */
    }

    .tabs-scroll-area {
        padding: 0 10px; /* Reduced horizontal padding to match content */
    }
}

/* --- Swipe Transition Indicator Styles --- */
#swipe-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px; /* Default width, will be adjusted dynamically for more options */
    height: 60px;
    background-color: rgba(0, 0, 0, 0.65);
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, width 0.3s ease;
    pointer-events: none;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#swipe-indicator.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

.swipe-indicator-slider {
    position: relative;
    width: 100%; /* Changed from fixed 200px to 100% */
    height: 50px;
    display: flex;
    justify-content: space-evenly; /* Changed from space-between to space-evenly */
    align-items: center;
    padding: 0 15px;
}

.swipe-indicator-option {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    font-size: 16px;
    z-index: 2;
    transition: color 0.3s ease, transform 0.3s ease;
    width: 70px; /* Default width, will be adjusted dynamically */
    text-align: center;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swipe-indicator-option.active {
    color: #ffffff;
    font-weight: 700;
    transform: scale(1.2);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* 删除滑块相关样式 */
/* ... existing code ... */

/* 移动端适配 */
@media (max-width: 768px) {
    .x-feed-media-item video {
        max-height: 300px; /* 移动端限制视频高度 */
        min-height: 150px; /* 移动端较小的最小高度 */
    }

    /* 增大移动端的播放按钮点击区域 */
    .x-feed-media-item video::-webkit-media-controls-play-button {
        transform: scale(1.2);
    }
}

/* 图片样式 */
.x-feed-media-item img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: cover; /* 确保比例适合 */
}

/* AI 里程碑时间轴样式 - 完全来自 ai-milestones-timeline/style.css */

/* 注意：原版 body 样式与主项目冲突，此处不包含 body 样式 */

/* --- ADD: Center the main milestones container --- */
main.milestones-container {
    display: flex;
    justify-content: center;
    width: 100%;
    /* padding-top: 40px; */ /* <<< REMOVED: User request */
    padding-bottom: 40px;
    /* Add margin-top for spacing if needed */
    margin-top: 20px; /* <<< ADDED: Spacing from tabs */
}

.milestones-container .timeline-section {
    /* Scope selectors to milestones container */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%; /* Use 100% within the container */
    max-width: 800px;
    /* margin-top: 0; <<< Remove margin, use padding on parent */
    /* padding: 20px; <<< Remove padding, use padding on parent */
    box-sizing: border-box; /* Add box-sizing */
}

/* Date display above the timeline */
.milestones-container .date-display {
    /* Scope selectors */
    display: none; /* Hide the date display row */
}

.milestones-container .timeline-container {
    /* Scope selectors */
    width: 100%;
    height: 100px;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    cursor: grab;
}

/* Fixed position slot containers for alignment (with borders removed) */
.milestones-container .slot-container {
    /* Scope selectors */
    position: absolute;
    height: 100%;
    width: calc(100% / 3);
    top: 0;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 10;
}

.milestones-container .left-slot {
    left: 0;
} /* Scope selectors */
.milestones-container .center-slot {
    left: calc(100% / 3);
} /* Scope selectors */
.milestones-container .right-slot {
    right: 0;
} /* Scope selectors */

/* Timeline ruler (the scrollable part) */
.milestones-container .timeline-ruler {
    /* Scope selectors */
    position: absolute;
    height: 100%;
    display: flex;
    align-items: flex-end;
    z-index: 5;
}

/* Time units */
.milestones-container .time-unit {
    /* Scope selectors */
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #737373;
    transition: all 0.3s ease;
    box-sizing: border-box;
    padding: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.milestones-container .time-unit.selected {
    /* Scope selectors */
    font-weight: bold;
    font-size: 16px;
    color: #000;
}

.milestones-container .time-unit.phantom {
    /* Scope selectors */
    opacity: 1;
    pointer-events: none;
}

/* Unit ticks container */
.milestones-container .unit-ticks-container {
    /* Scope selectors */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: flex-end;
    z-index: 1;
}

/* Timeline ticks (vertical lines) */
.milestones-container .timeline-tick {
    /* Scope selectors */
    width: 1px;
    background-color: #333333;
    margin-right: 3px;
    height: 15px;
    flex-shrink: 0;
    flex-grow: 0;
    transition: height 0.1s ease-out;
}

/* Style for dragging */
.milestones-container .timeline-container.dragging {
    /* Scope selectors */
    cursor: grabbing;
}

/* 里程碑信息样式 */
.milestones-container .milestone-info {
    /* Scope selectors */
    width: 100%;
    max-width: 800px;
    margin: 0 auto 40px auto;
    /* border-radius: 12px; */ /* <<< REMOVED */
    /* padding: 20px 0 0 0; */ /* <<< REMOVED */
    padding: 0; /* <<< ADDED: Reset padding */
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    /* --- REVISED Fixed Height --- */
    /* max-height: 550px; */ /* <<< REMOVED */
    max-height: 450px; /* <<< REDUCED: Approx: 250(img)+20(pad)+50(header)+10(gap)+80(content)+20(pad)=430 */
    overflow: hidden;
    /* background-color: #ffffff; */ /* <<< REMOVED */
    /* border: 1px solid #e9ecef; */ /* <<< REMOVED */
}

.milestones-container .milestone-info.visible {
    /* Scope selectors */
    opacity: 1;
    transform: translateY(0);
}

.milestones-container .milestone-media {
    /* Scope selectors */
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #f5f5f5;
    display: block;
    flex-shrink: 0;
    border-radius: 8px; /* <<< ADDED: Rounded corners for image container */
}

.milestones-container .milestone-image {
    /* Scope selectors */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* transition: transform 0.3s ease; */ /* <<< REMOVED: No longer needed for hover */
    display: block;
}

.milestones-container .milestone-image:hover {
    /* Scope selectors */
    /* transform: scale(1.05); */ /* <<< REMOVED: User request */
}

.milestones-container .milestone-details {
    /* Scope selectors */
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 20px 20px 20px 20px;
    box-sizing: border-box;
    overflow: hidden;
    flex: 1;
}

.milestones-container .milestone-header {
    /* Scope selectors */
    display: flex;
    flex-direction: column;
    margin-bottom: 10px; /* <<< ADJUSTED */
    flex-shrink: 0; /* Prevent shrinking */
}

.milestones-container .milestone-title {
    /* Scope selectors */
    margin: 0 0 5px 0; /* Match .news-title margin */
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.4;
    color: #333333;
    text-decoration: none; /* Match news title */
}

.milestones-container .milestone-date {
    /* Scope selectors */
    font-size: 0.8rem; /* Match .news-meta size */
    color: #888; /* Match .news-meta color */
}
.milestones-container .milestone-date::before {
    content: '\f073'; /* Font Awesome calendar icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 4px;
}

.milestones-container .milestone-content {
    /* Scope selectors */
    font-size: 0.85rem;
    color: #333333; /* New body text color */
    line-height: 40px; /* New line height */
    letter-spacing: 1.5px; /* Ensure letter spacing is applied */
    margin: 10px 0 0 0;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    height: 80px;
    /* overflow: hidden; */ /* <<< REMOVED */
    overflow-y: auto; /* <<< ADDED: Enable scrolling */
    /* --- ADD Scrollbar Hiding --- */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
/* Webkit Scrollbar Hiding */
.milestones-container .milestone-content::-webkit-scrollbar {
    display: none;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .milestones-container .timeline-section {
        padding-bottom: 140px; /* Keep space for fixed timeline */
    }

    .milestones-container .milestone-info {
        /* Scope selectors */
        padding: 0;
        margin-bottom: 20px;
        max-width: 95%;
        max-height: 380px; /* <<< Keep overall height limit */
    }

    .milestones-container .milestone-media {
        /* Scope selectors */
        width: 100%;
        height: 200px;
        border-radius: 6px;
    }

    .milestones-container .milestone-details {
        /* Scope selectors */
        width: 100%;
        padding: 15px 15px 15px 15px;
    }

    .milestones-container .milestone-title {
        font-size: 0.95rem;
    }

    .milestones-container .milestone-content {
        /* height: 60px; */ /* <<< REMOVED */
        height: 100px; /* <<< INCREASED: More height for mobile text */
        font-size: 0.8rem;
        overflow-y: auto;
        /* Hiding rules apply from above */
    }

    /* --- ADD: Fixed Position Timeline on Mobile --- */
    .milestones-container .timeline-container {
        position: fixed;
        /* bottom: 0; */ /* <<< REMOVED */
        bottom: 20px; /* <<< ADDED: Move up from bottom */
        left: 0;
        right: 0;
        width: 100%;
        /* height: 120px; */ /* <<< REMOVED */
        height: 80px; /* <<< REDUCED: Decrease height to reduce gap */
        /* background-color: rgba(255, 255, 255, 0.95); */ /* <<< REMOVED */
        /* backdrop-filter: blur(5px); */ /* <<< REMOVED */
        /* -webkit-backdrop-filter: blur(5px); */ /* <<< REMOVED */
        /* border-top: 1px solid #e0e0e0; */ /* <<< REMOVED */
        background-color: transparent; /* Ensure transparent */
        z-index: 100;
        /* padding-bottom: 10px; */ /* <<< REMOVED: Height reduction handles spacing */
        box-sizing: border-box;
        overflow: visible; /* Ensure ticks aren't clipped if height is tight */
    }

    .milestones-container .unit-ticks-container {
        /* Adjust ticks position if needed */
        bottom: 10px; /* Adjust based on new timeline height */
    }
}

/* --- Styles for Images within Article Content --- */
.article-content img {
    display: block; /* Ensure image is on its own line */
    width: 100%; /* Make image fill container width */
    max-width: 100%; /* Prevent image exceeding container */
    aspect-ratio: 16 / 9; /* Enforce 16:9 aspect ratio */
    object-fit: cover; /* Crop image to cover the 16:9 area, maintaining aspect ratio */
    object-position: center; /* Center the image within the cropped area */
    border-radius: 8px; /* Add rounded corners (adjust px value as needed) */
    margin-top: 1.2em; /* Add space above the image */
    margin-bottom: 1.2em; /* Add space below the image */
    border: none; /* Ensure no default border */
    background-color: #f0f0f0; /* Optional: Add a light background color while image loads */
}

/* --- ADDED: Styles for Videos within Article Content --- */
.article-content video {
    display: block; /* Ensure video is on its own line */
    width: 100%; /* Make video fill container width */
    aspect-ratio: 16 / 9; /* Enforce 16:9 aspect ratio */
    object-fit: cover; /* Crop video to cover the 16:9 area, maintaining aspect ratio */
    object-position: center; /* Center the video within the cropped area */
    border-radius: 8px; /* Add rounded corners (match image style) */
    border: none; /* Ensure no default border */
    background-color: #000; /* Optional: Add a black background color while video loads */
}

/* --- Styles for Video Preview in Feed --- */
.video-preview-container {
    position: relative; /* Needed for absolute positioning of the overlay */
    cursor: pointer;
    overflow: hidden; /* Ensure overlay stays within bounds */
    border-radius: 8px; /* Match image border-radius if any */
    margin-top: 10px; /* Add some space above the video */
    max-width: 100%; /* Ensure it doesn't overflow */
}

.video-preview-container .video-thumbnail {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px; /* Match container */
    transition: filter 0.2s ease-in-out; /* Smooth hover effect */
}

.video-preview-container:hover .video-thumbnail {
    filter: brightness(0.8); /* Slightly darken image on hover */
}

.video-preview-container .play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; /* Adjust size as needed */
    height: 50px;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
    border-radius: 50%; /* Circular shape */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Allows clicks to pass through to the container */
    transition: background-color 0.2s ease;
}

.video-preview-container:hover .play-button-overlay {
    background-color: rgba(0, 0, 0, 0.8); /* Darken button on hover */
}

.video-preview-container .play-button-overlay svg {
    width: 28px; /* Size of the play icon */
    height: 28px;
    fill: #ffffff; /* White color for the icon */
}

.feed-item-media video {
    display: block;
    width: 100%; /* Make video fill container */
    max-height: 500px; /* Limit video height */
    border-radius: 8px; /* Consistent corners */
    background-color: #000; /* Black background while loading */
    aspect-ratio: 16 / 9;
    object-fit: cover; /* Keep cover as requested */
}

.media-error {
    color: #dc3545; /* Red color for error messages */
    font-size: 0.9em;
    text-align: center;
    padding: 10px;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    margin-top: 10px;
}

/* Ensure feed item images also have consistent styling */
.feed-item-media img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin-top: 10px; /* Add space above images too */
}

/* --- End Video Preview Styles --- */

/* --- ADDED Styles for Video Thumbnail --- */
.video-preview-container img.video-thumbnail {
    display: block;
    width: 100%;
    height: auto; /* Let aspect-ratio control height */
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px; /* Match video radius */
    background-color: #f0f0f0; /* Placeholder background */
}

/* Apply indentation to the media container */
.feed-item-media {
    /* Existing styles */
    margin-top: 15px;
    margin-bottom: 15px;
    /* ADD Indentation to match text */
    /* padding-left: 30px; */
    box-sizing: border-box; /* Include padding in width calculation */
}

.pagination-controls {
    display: flex;
    /* flex-direction: column; */ /* Changed for horizontal layout */
    flex-direction: row; /* Ensure horizontal layout */
    justify-content: space-between; /* Distribute space */
    align-items: center; /* Center items vertically */
    padding: 20px 0;
    margin-top: 20px; /* Space above the controls */
    width: 100%; /* Ensure it takes full width for centering */
    grid-column: 1 / -1; /* Make it span full width of parent grid */
}

.pagination-date-filter-container {
    display: flex;
    align-items: center;
    /* margin-bottom: 15px; */ /* No longer needed if horizontal */
    /* Add flex-grow if you want it to take up space, or leave for natural width */
}

.pagination-button {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #337ab7;
    padding: 8px 16px;
    margin: 0 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 14px;
}

.pagination-button:hover {
    background-color: #eee;
    color: #23527c;
}

.pagination-button.active {
    background-color: #337ab7;
    color: white;
    border-color: #337ab7;
    cursor: default;
}

.pagination-button.disabled {
    color: #777;
    cursor: not-allowed;
    background-color: #f9f9f9;
    border-color: #ddd;
}

.pagination-date-filter {
    margin: 0 5px; /* Add some spacing around date inputs */
    padding: 8px;
    border: 1px solid #ccc;
}

/* Ensure news-summary truncation (if not already globally applied effectively) */
.news-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    max-height: 80px; /* 2 * 40px */
    color: #333333; /* New body text color */
    letter-spacing: 1.5px; /* Ensure letter spacing is applied */
}

/* Responsive adjustments for smaller screens if needed for the grid */
@media (max-width: 768px) {
    .pagination-button {
        padding: 6px 12px;
        font-size: 13px;
    }
}

/* --- Mobile Table of Contents --- */
.mobile-toc-dropdown {
    display: none; /* Hidden by default */
    margin-bottom: 2rem;
    width: 100%;
    z-index: 40;
    transition: all 200ms;
    position: relative;
    font-size: 14px;
}

.mobile-toc-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: #4b5563;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-toc-button span {
    color: #6b7280;
}

.mobile-toc-button svg {
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease-in-out;
    color: #6b7280;
}

.mobile-toc-button.active svg {
    transform: rotate(180deg);
}

.mobile-toc-content {
    display: none;
    padding: 1rem 0.5rem;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    margin-top: -1px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.mobile-toc-content.active {
    display: block;
}

.mobile-toc-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.mobile-toc-content li {
    margin-bottom: 0.5rem;
}

.mobile-toc-content a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    color: #4b5563;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: background-color 0.2s ease;
}

.mobile-toc-content a:hover {
    background-color: #f3f4f6;
}

.mobile-toc-content a.active {
    color: #1e40af;
    font-weight: 500;
}

.mobile-toc-content .toc-level-h3 {
    padding-left: 1.5rem;
}

.mobile-toc-content ul ul {
    display: none;
    margin-top: 0.5rem;
}

.mobile-toc-content li.expanded > ul {
    display: block;
}

@media (max-width: 768px) {
    .article-detail-container {
        grid-template-columns: 1fr; /* Single column for content */
        padding: 0 var(--page-min-horizontal-padding); /* Use variable for consistent edge padding */
        margin-top: 20px; /* Reduce top margin - keep */
        gap: 0; /* Remove gap, not needed for single column content */
    }

    .article-sidebar {
        display: none; /* Hide desktop TOC sidebar - keep */
    }

    .mobile-toc-dropdown {
        display: block; /* Show mobile TOC dropdown */
        width: 100%;
        margin-bottom: 1.5rem;
        position: relative;
        z-index: 10;
    }

    .article-content {
        grid-column: 1 / -1; /* Span full width - keep */
        max-width: none; /* Remove max width constraint - keep */
        padding-left: 0; /* Rely on parent container for horizontal padding */
        padding-right: 0; /* Rely on parent container for horizontal padding */
        padding-bottom: 40px; /* Adjust padding - keep */
    }
}

/* Main container for TOC */
#article-toc {
    padding-left: 0; /* Keep padding-left as 0, sidebar handles outer padding */
}

#article-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Top level items (h2) */
#article-toc > ul > li {
    position: relative;
    margin-bottom: 0; /* Remove margin to eliminate gaps */
    border-left: 1px solid #e0e0e0; /* Thinner, lighter vertical line */
    transition: none; /* Remove transition effect */
}

/* Container for nested items (h3) - no vertical line */
#article-toc ul ul {
    padding-left: 16px; /* Slightly more indentation */
    margin-top: 3px;
    margin-bottom: 6px;
    display: none; /* Hidden by default */
    position: relative;
    border-left: none; /* No vertical line for h3 level */
}

/* Arrow icon for expandable items */
#article-toc li a svg {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s ease-in-out;
}

#article-toc li a:hover svg {
    color: #495057;
}

#article-toc li a.active svg {
    color: #495057;
}

#article-toc li a.active svg {
    transform: rotate(90deg);
}

/* Show nested list when parent is expanded */
#article-toc li.expanded > ul {
    display: flex;
}

.article-content {
    grid-column: 2; /* Place in the center content column */
    width: 100%; /* Occupy full width of its grid column */
    /* max-width: var(--article-content-max-width); Already handled by grid column definition */

    /* Apply min horizontal padding directly to content for when viewport is narrow */
    padding-left: var(--page-min-horizontal-padding);
    padding-right: var(--page-min-horizontal-padding);
    box-sizing: border-box;
}

#article-title {
    font-size: 1.9rem; /* Reduce article title size */
    font-weight: bold; /* Changed from 700 or other bold values */
    color: #333333; /* New title color */
    margin-bottom: 1rem;
    line-height: 1.3; /* Will adjust later if general line-height applies here */
    /* text-align: center; */ /* User might want to reconsider if title should be centered */
}

/* Another arbitrary change for a different force push */
.another-force-push-marker {
}

/* --- New Styles for Styled Pagination Navigation Buttons --- */
.pagination-nav-button {
    display: inline-flex; /* Use inline-flex to keep items on one line and allow alignment */
    align-items: center;
    justify-content: center;
    padding: 8px 16px; /* Adjust padding to fit icon and text comfortably */
    background-color: #ffffff;
    border: 1px solid #d1d5db; /* Slightly darker border than default #ddd for better visibility */
    color: #374151; /* Text color similar to .back-button's hover text color */
    font-size: 14px;
    font-weight: 500; /* Medium weight */
    border-radius: 8px; /* Rounded corners like .back-button */
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    text-decoration: none; /* Remove any default underline */
    white-space: nowrap; /* Prevent text wrapping */
}

.pagination-nav-button:hover {
    background-color: #f3f4f6; /* Light gray background on hover, similar to .back-button hover */
    border-color: #adb5bd;
    color: #1f2937; /* Darker text on hover */
}

.pagination-nav-button:disabled {
    background-color: #f9fafb;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

.pagination-nav-button:disabled:hover {
    /* Ensure disabled hover state is consistent */
    background-color: #f9fafb;
    color: #9ca3af;
    border-color: #e5e7eb;
}

.pagination-nav-icon svg {
    width: 16px; /* Slightly smaller icon */
    height: 16px;
    display: block; /* Prevent extra space */
    fill: currentColor; /* Inherit color from button text */
}

.prev-nav-button .pagination-nav-icon {
    margin-right: 8px; /* Space between icon and text for "Previous" button */
}

.next-nav-button .pagination-nav-icon {
    margin-left: 8px; /* Space between text and icon for "Next" button */
}

.pagination-nav-text {
    line-height: 1; /* Ensure text is vertically centered with icon */
}
/* --- End New Pagination Navigation Button Styles --- */

/* --- Styles for New Pagination Icon Buttons --- */
.pagination-controls .icon-button {
    /* Target icon buttons within pagination */
    background-color: #f0f0f0; /* Default white background */
    color: #374151; /* Icon color */
    padding: 8px; /* Standard icon button padding */
    border-radius: 8px; /* Standard icon button radius */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pagination-controls .icon-button:hover {
    background-color: #dddddd; /* Light gray background on hover */
    color: #1f2937; /* Darker icon/text on hover */
}

/* Disabled state for pagination icon buttons */
.pagination-controls .icon-button:disabled,
.pagination-controls .icon-button:disabled:hover {
    background-color: #f9fafb;
    color: #9ca3af;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* Ensure SVG inside these buttons are sized correctly if not inherited */
.pagination-controls .icon-button svg {
    width: 20px; /* Match general icon-button svg size */
    height: 20px;
    display: block;
    fill: currentColor; /* Ensure icon color matches button's text color */
}

/* Remove old .pagination-nav-button styles if they exist from previous attempts */
/* These might not be in the user's current reverted file, but it's safe to ensure they are not applied. */
.pagination-nav-button,
.pagination-nav-icon,
.pagination-nav-text {
    /* If these classes were used, reset their specific styles here or ensure they are removed */
    /* For now, assuming they are not present in the reverted version. */
    /* If they were, a full removal of their definitions would be better. */
}

/* Revert to pre-litepicker state */
.placeholder-for-revert {
}

/* ======= START OF CONSOLIDATED X-FEED CSS ======= */
/* Replace original X-Feed CSS block (approx. 839-1098 in backup branch style.css) with this */

.x-feed-container {
    /* padding: 15px; */ /* Removed */
    /* background-color: #f0f2f5; */ /* Removed */
    background-color: #ffffff; /* Added: White background */
    max-width: 600px; /* Added: Constrain width */
    margin: 20px auto; /* Added: Vertical margin and horizontal centering */
    padding: 0; /* Added: Reset padding, items will control their own */
    /* letter-spacing: normal;  Ensure no inherited letter-spacing issues from body */
    /* Removed box-shadow and other previous styles if any */
}

.x-feed-item {
    /* background-color: #ffffff; */ /* Removed: Handled by container */
    /* border: 1px solid #e0e0e0; */ /* Removed */
    /* border-radius: 8px; */ /* Removed */
    /* margin-bottom: 20px; */ /* Removed */
    padding: 20px 20px; /* Adjusted: Vertical padding, horizontal will be by children */
    border-bottom: 1px solid #ebebeb; /* Added: Separator line */
    color: #333333;
    font-size: 15px;
    line-height: 1.6;
}

.x-feed-item:last-child {
    border-bottom: none; /* Added: Remove separator from last item */
}

.x-feed-header,
.x-feed-text,
.x-feed-media-container {
    /* Apply consistent left/right padding for content blocks */

    box-sizing: border-box;
}

.x-feed-header {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 8px;
    margin-top: 6px;
    font-size: 14px;
    opacity: 0.8;
    /* padding-left and padding-right will be inherited if applied to parent .x-feed-item or specific blocks */
}

.x-feed-title {
    font-size: 1.1em;
    font-weight: 600;
    color: #14171a;
    margin: 0 0 2px 0; /* Reduced bottom margin */
    line-height: 1.3;
    letter-spacing: 0.4px; /* Adjusted for Optima */
    word-break: break-word;
}

.x-feed-meta {
    font-size: 0.85em; /* Slightly smaller meta */
    color: #536471; /* Twitter's secondary text color */
    text-align: right;
    line-height: 1.3;
    white-space: nowrap; /* Keep meta on one line if possible */
    flex-shrink: 0; /* Prevent meta from shrinking too much */
}

.x-feed-meta .x-feed-username {
    /* Matches JS: item.authorHandle or item.authorName */
    font-weight: 500; /* Less bold than title */
    color: #14171a; /* Username can be standard dark color */
    /* Removed twitter blue, can be too distracting. Using item.authorName which is not a link */
}

.x-feed-meta .x-feed-datetime {
    /* Matches JS: formattedDate */
    margin-left: 8px;
    color: #536471; /* Twitter's secondary text color */
}

.x-feed-text {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    white-space: pre-wrap; /* Preserve line breaks and spaces */
    word-wrap: break-word; /* Break long words to prevent overflow */
    margin-bottom: 12px; /* Space before media or actions */
}

.x-feed-media-container {
    margin-top: 10px;
    /* padding-left and padding-right are now set above */
}

.x-feed-media-item {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 10px; /* Rounded corners for the media container itself */
    margin-bottom: 10px; /* Space below media block */
    padding-top: 56.25% !important; /* Default to 16:9 aspect ratio. FORCED. */
    /* This rule establishes the aspect ratio. */
    padding-left: 0 !important; /* Ensure no horizontal padding */
    padding-right: 0 !important; /* Ensure no horizontal padding */
    padding-bottom: 0 !important; /* Ensure no bottom padding */
}

.x-feed-media-item img,
.x-feed-media-item video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-radius: 10px; /* Match parent's border-radius if media is the direct child filling it */
    display: block; /* Remove extra space below inline images */
}

/* Video specific styles (loading/error) - ensure these are compatible or updated */
.x-feed-media-item video.video-with-preview {
    position: relative;
    background-color: #f0f2f5; /* Placeholder background */
}
.x-feed-media-item video.video-with-preview::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    border: 3px solid rgba(0, 0, 0, 0.3);
    border-top-color: #000;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: video-loading-spin 1s linear infinite;
    z-index: 1;
}
@keyframes video-loading-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
.x-feed-media-item video.loaded::before,
.x-feed-media-item video.error::before {
    display: none;
}
.x-feed-media-item video.error::after {
    content: 'Media could not be loaded';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    color: #536471;
    font-size: 0.9em;
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.8);
}

.x-feed-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    padding-top: 10px;
}

.x-feed-actions-left {
    display: flex;
    gap: 15px; /* Increased gap for action buttons */
}

.x-action-button {
    background-color: transparent;
    border: none; /* Removed border */
    color: #536471; /* Twitter's icon/secondary text color */
    padding: 5px; /* Padding around icon+text */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-size: 0.8em; /* Adjusted for Optima */
    font-weight: normal; /* Standard weight for action text */
    line-height: 1;
    transition: color 0.2s ease, transform 0.1s ease;
    letter-spacing: normal; /* Reset letter spacing for buttons */
    gap: 6px;
}

.x-action-button:hover {
    color: #1da1f2; /* Twitter blue on hover for icon/text */
    /* transform: scale(1.05); Optional: slight scale effect */
}
/* Specific hover colors for different actions if desired */
/* .like-button:hover { color: #e0245e; } Red for like */
/* .retweet-button:hover { color: #17bf63; } Green for retweet */

.x-action-button svg {
    width: 18px; /* Slightly larger icons */
    height: 18px;
    margin-right: 5px;
    fill: currentColor; /* SVG color inherits from button color */
}

.x-action-button span {
    font-size: 1.1em; /* Make number slightly larger relative to button text_size (0.8em of 14px) */
    color: #536471; /* Keep numbers standard color */
}
.x-action-button:hover span {
    color: currentColor; /* Number color matches icon on hover */
}

.read-original-button {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px; /* Slightly more padding */
    border-radius: 9999px; /* Pill shape */
    background-color: #ffffff; /* 修改为白色背景 */
    color: #0f1419; /* 字体颜色修改为黑色 */
    text-decoration: none;
    font-size: 0.85em; /* Adjusted for Optima */
    font-weight: 500; /* Medium weight */
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; /* 添加过渡效果 */
    letter-spacing: normal; /* Reset letter spacing */
    border: 1px solid #d1d5db; /* 添加灰色边框 */
    margin-right: 20px; /* Adjust to align with new padding-right of content blocks */
}

.read-original-button:hover {
    background-color: #0f1419; /* 悬停时变为黑色背景 */
    color: #ffffff; /* 悬停时文字变为白色 */
    border-color: transparent; /* 悬停时边框消失 */
}

.read-original-button img {
    /* Assuming x_logo_light.png is white for dark button */
    width: 13px;
    height: 13px;
    margin-right: 6px;
}

/* 显示深色logo，隐藏浅色logo */
.read-original-button .x-logo-dark {
    display: none; /* 默认隐藏深色logo */
}

/* 处理悬停状态的logo颜色 */
.read-original-button:hover .x-logo-dark {
    display: inline; /* 悬停时显示深色logo */
}

.read-original-button .x-logo-light {
    display: inline; /* 默认显示浅色logo */
}

.read-original-button:hover .x-logo-light {
    display: none; /* 悬停时隐藏浅色logo */
}

.no-results-message {
    /* Ensure this matches the class in script.js */
    text-align: center;
    padding: 20px 15px;
    color: #536471;
    font-size: 0.95em;
    letter-spacing: 0.2px;
    background-color: #ffffff;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
}
/* ======= END OF CONSOLIDATED X-FEED CSS ======= */

/* Styles for #article-meta - applied globally, not just mobile */
#article-meta {
    font-size: 0.8rem; /* Consistent font size */
    color: #6c757d; /* Muted color for meta data */
    margin-bottom: 2em; /* Space below meta (and its border) before #article-body */
    padding-bottom: 1.5em; /* Space between text and the new border */
    border-bottom: 1px solid #e0e0e0; /* Grey separator line */
    text-align: left; /* Ensure text is aligned to the left, matching title typically */
}

/* Adjustments for pagination controls positioning and new inner grouping */
.pagination-controls {
    display: flex;
    flex-direction: row; /* Main axis for prev/next and date group */
    justify-content: space-between; /* Puts prev/next at ends, date group in middle */
    align-items: center;
    width: 100%; /* Span full width of its new parent (.older-news-section-wrapper) */
    padding: 0; /* Remove previous padding, will be handled by wrapper or inner elements */
    margin-bottom: 20px; /* Space between controls and the older-news-grid */
    /* grid-column: 1 / -1; /* No longer needed as it's inside the wrapper */
    /* margin-top: 20px; /* Replaced by wrapper's margin/padding */
}

.pagination-date-filter-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between date inputs and buttons */
    /* border: 1px solid #d1d5db; */ /* MOVED to pagination-filter-nav-group */
    /* border-radius: 8px; */ /* MOVED to pagination-filter-nav-group */
    /* padding: 10px; */ /* MOVED to pagination-filter-nav-group */
    /* background-color: #f9fafb; */ /* REMOVED */
    /* margin-bottom: 15px; /* Removed */
}

.pagination-button {
    background-color: #fff;
    border: 1px solid #ddd;
    color: #337ab7;
    padding: 8px 16px;
    margin: 0 4px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    font-size: 14px;
}

.pagination-button:hover {
    background-color: #eee;
    color: #23527c;
}

.pagination-button.active {
    background-color: #337ab7;
    color: white;
    border-color: #337ab7;
    cursor: default;
}

.pagination-button.disabled {
    color: #777;
    cursor: not-allowed;
    background-color: #f9f9f9;
    border-color: #ddd;
}

.pagination-date-filter {
    margin: 0 5px; /* Add some spacing around date inputs */
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px; /* Add border-radius to date inputs */
}

/* Ensure news-summary truncation (if not already globally applied effectively) */
.news-summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Number of lines to show */
    -webkit-box-orient: vertical;
    max-height: 80px; /* 2 * 40px */
    color: #333333; /* New body text color */
    letter-spacing: 1.5px; /* Ensure letter spacing is applied */
}

/* Responsive adjustments for smaller screens if needed for the grid */
@media (max-width: 768px) {
    .pagination-button {
        padding: 6px 12px;
        font-size: 13px;
    }
}

.pagination-nav-buttons-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between prev and next buttons */
}

/* New styling for the unified filter and navigation group */
.pagination-filter-nav-group {
    display: flex;
    align-items: center;
    gap: 10px; /* Space between all items in the group */
    border: 1px solid #d1d5db; /* Border for the group */
    border-radius: 8px; /* Rounded corners for the group */
    padding: 5px !important;
    /* background-color: #f9fafb; */ /* REMOVED - was on pagination-date-filter-container */
    /* width: 100%; */ /* Make the group take full width <<< REMOVED */
    box-sizing: border-box;
    /* flex-wrap: wrap; */ /* Allow wrapping on smaller screens if needed <<< CHANGED */
    flex-wrap: nowrap; /* Prevent wrapping */
    justify-content: space-around;
}

/* --- Scroll-to-Top Button --- */
.scroll-to-top-button {
    position: fixed;
    bottom: 40px; /* Increased to give tooltip more space */
    right: 50px; /* Increased to move button left on desktop */
    z-index: 1000;
    background-color: #ffffff;
    border: 1px solid #e0e0e0; /* Match .back-button border if any, or a general light border */
    color: #5a5a5a; /* Match .back-button color */
    padding: 8px; /* Match .icon-button padding */
    border-radius: 8px; /* Match .icon-button radius */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease, visibility 0s linear 0.3s, transform 0.3s ease;
}

.scroll-to-top-button:hover {
    background-color: #e9ecef; /* Match .back-button hover */
    color: #333;
}

.scroll-to-top-button svg {
    width: 20px; /* Match .icon-button svg size */
    height: 20px;
    display: block;
    fill: currentColor;
}

/* Tooltip for scroll-to-top button */
.scroll-to-top-button::after {
    content: attr(aria-label); /* Get text from aria-label */
    position: absolute;
    bottom: 100%; /* Position above the button */
    left: 50%;
    transform: translateX(-50%) translateY(-8px); /* Move up slightly */
    background-color: #333;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.2s ease;
    z-index: 10;
    pointer-events: none;
}

.scroll-to-top-button:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-10px); /* Adjusted translateY */
    transition: opacity 0.2s ease, visibility 0s linear, transform 0.2s ease;
}

.scroll-to-top-button.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* Ensure visibility transition applies immediately */
}

/* Responsive adjustments for scroll-to-top button on smaller screens */
@media (max-width: 768px) {
    .scroll-to-top-button {
        bottom: 20px;
        right: 20px;
        padding: 10px; /* Slightly larger padding for easier touch */
    }
    .scroll-to-top-button svg {
        width: 22px; /* Slightly larger icon for mobile */
        height: 22px;
    }
    /* Hide tooltip on mobile if it gets in the way or isn't conventional */
    .scroll-to-top-button::after {
        display: none;
    }
}

/* Container for news list image (right side of top news) */
.news-list-section .news-item .news-image-container {
    width: 110px; /* Match old placeholder width */
    height: 80px; /* Match old placeholder height */
    border-radius: 4px; /* Match old placeholder radius */
    overflow: hidden; /* Ensure image respects border-radius */
    flex-shrink: 0; /* Keep from shrinking in flex layout */
    background-color: #f0f0f0; /* Light background while loading */
}

/* 确保.news-container的基本网格结构 */
.news-container {
    max-width: 1100px;
    margin: 30px auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 1fr; /* 维持两列基础 */
    gap: 0;
}

.headline-section {
    grid-column: 1;
    padding-right: 30px;
    border-right: 1px solid #e0e0e0;
}

.news-list-section {
    grid-column: 2;
    padding-left: 30px;
}

.older-news-section-wrapper {
    grid-column: 1 / -1; /* 占据整个宽度 */
    padding-right: 380px; /* 增加右侧填充以缩小内容区域 */
    margin-top: 30px;
    box-sizing: border-box;
}

.pagination-controls {
    width: 100%;
    margin-bottom: 20px;
    /* 保持其他现有样式 */
}

.older-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px; /* 网格项之间的主间距 */
    width: 100%;
    box-sizing: border-box;
}

/* 网格中的单个新闻项 - 移除卡片化样式 */
.older-news-grid .news-item {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 图片和文本之间的间距 */
    overflow: hidden; /* 保持 overflow: hidden */
}

.older-news-grid .news-item .news-image-container {
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    position: relative;
    background-color: #f0f0f0; /* 保留占位背景色 */
    overflow: hidden;
    border-radius: 4px; /* 给图片本身保留一个轻微的圆角 */
}

.older-news-grid .news-item .news-image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.older-news-grid .news-item .news-text-content {
    text-align: left;
    overflow: hidden; /* Added to see if it helps constrain children for ellipsis */
    /* min-width: 0; */ /* Removed this attempt */
    width: 100%; /* Explicitly set width to fill parent, which is constrained by grid */
}

.older-news-grid .news-item .news-title {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
    color: #333;
    margin: 0 0 4px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-height: 1.3em; /* 约一行 */
}

.older-news-grid .news-item .news-summary {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #555;
    margin: 0 0 6px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    max-height: 1.4em; /* 约一行 */
}

.older-news-grid .news-item .news-meta {
    font-size: 0.75rem;
    color: #888;
    text-align: left;
}

/* Style for image load error within the older news grid */
.older-news-grid .news-item .news-image-container.image-load-error {
    background-color: #000000; /* Black background for error state */
}

/* Style for missing image from data within the older news grid */
.older-news-grid .news-item .news-image-container.image-missing {
    background-color: #e0e0e0; /* Slightly different gray for missing data */
}

/* Responsive adjustments for smaller screens if needed for the grid */
@media (max-width: 768px) {
    .pagination-button {
        padding: 0.1rem 0.2rem !important;
        font-size: 10px !important;
    }

    /* 移动端older-news-grid单列布局 */
    .older-news-grid {
        grid-template-columns: 1fr;
        gap: 20px; /* 调整单列时的间距 */
    }

    /* 移动端older-news-section-wrapper样式调整 */
    .older-news-section-wrapper {
        padding-right: 15px; /* 移动端减少右侧填充 */
        padding-left: 15px; /* 移动端添加左侧填充 */
    }

    /* 移动端上方新闻列表项保持横向 */
    .news-list-section .news-item {
        /* 删除flex-direction: column; */
        /* 保持横向布局，但调整间距和尺寸 */
        align-items: center;
        padding: 15px 0;
    }
    .icon-button {
        padding: 4px !important;
    }

    /* 移动端上方新闻列表图片容器样式调整 */
    .news-list-section .news-item .news-image-container {
        width: 80px; /* 设置较小的固定宽度 */
        height: 60px; /* 设置固定高度 */
        flex-shrink: 0; /* 防止图片容器被压缩 */
        position: relative;
        margin-right: 10px; /* 添加右侧间距 */
        padding-top: 0; /* 不再使用padding-top设置宽高比 */
    }

    .news-list-section .news-item .news-image-container img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* 移动端上方新闻列表文本区域 */
    .news-list-section .news-item .news-text-content {
        padding-right: 0;
        flex: 1;
        width: auto;
        overflow: hidden; /* 确保文本不会溢出 */
    }

    /* === 修改：移动端分页控件保持一行显示 === */
    .pagination-controls {
        flex-direction: row; /* 改回水平排列 */
        flex-wrap: wrap; /* 允许在需要时换行 */
        justify-content: space-between; /* 水平分散对齐 */
        align-items: center;
        padding: 4px;
        gap: 8px !important; /* 减小间距 */
    }

    .pagination-filter-nav-group {
        flex: 1; /* 占据可用空间 */
        min-width: 0; /* 允许收缩 */
        font-size: 12px; /* 减小字体大小 */
        padding: 5px; /* 减小内边距 */
        gap: 3px;
    }

    .pagination-date-filter-container {
        width: auto; /* 自动宽度 */
        flex-wrap: nowrap; /* 不换行 */
        gap: 4px; /* 减小间距 */
        margin-bottom: 0; /* 移除底部间距 */
    }

    .pagination-date-filter {
        width: 70px; /* 固定较小宽度 */
        font-size: 12px; /* 减小字体 */
        padding: 2px; /* 减小内边距 */
    }

    /* === 确保顶部新闻区域纵向排列 === */
    .news-container {
        grid-template-columns: 1fr; /* 移动端单列布局 */
    }

    .headline-section {
        grid-column: 1;
        padding-right: 0;
        border-right: none;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e0e0; /* 用底部边框分隔区域 */
    }

    .news-list-section {
        grid-column: 1;
        padding-left: 0;
    }
}

@media (max-width: 768px) {
    body {
        overflow-x: hidden; /* 防止水平滚动 */
    }

    .news-container {
        width: 100%;
        padding: 0 10px; /* .news-container 提供左右 10px 的内边距 */
        box-sizing: border-box;
        margin: 15px auto;
        grid-template-columns: 1fr; /* 确保移动端是单列 */
    }

    /* 确保标题不会溢出容器 */
    .headline-title,
    .news-title {
        max-width: 100%;
        word-break: break-word; /* 允许长单词换行 */
        white-space: normal; /* 确保标题可以多行显示并换行 */
    }

    /* 确保图片不会超出容器 */
    img {
        max-width: 100%;
        height: auto;
    }

    .older-news-section-wrapper,
    .headline-section,
    .news-list-section {
        width: 100%;
        max-width: 100%; /* 可选，因为 width: 100% 已生效 */
        padding-right: 0; /* 子区域不应再添加水平内边距 */
        padding-left: 0; /* 子区域不应再添加水平内边距 */
        box-sizing: border-box;
        /* 确保它们作为.news-container的直接子grid item正确排列 */
        grid-column: 1 / -1; /* 占据单列网格的整个宽度 */
    }

    /* 移除或调整特定于.headline-section 和 .news-list-section 的冗余或冲突的padding规则 */
    .headline-section {
        /* padding-right: 0;  已由上面的通用规则处理 */
        border-right: none;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #e0e0e0;
    }

    .news-list-section {
        /* padding-left: 0; 已由上面的通用规则处理 */
    }

    /* 其他移动端适配样式保持不变 */
    .pagination-button {
        padding: 6px 12px;
        font-size: 13px;
    }
}