:root {
    --novel-widget-text-color: #333;
    --novel-widget-link-color: #007bff;
    --novel-widget-link-hover-color: #0056b3;
    --novel-widget-meta-text-color: #6c757d;
    --novel-widget-excerpt-color: #555;
    --novel-widget-border-color: #f0f0f0;
    --novel-widget-item-bg-color: #fff;
    --novel-widget-meta-bg-color: #e9ecef; /* Default meta bg, will be overridden for author/tags */
    --novel-widget-more-link-bg-color: rgba(0, 123, 255, 0.08);
    --novel-widget-more-link-bg-hover-color: rgba(0, 123, 255, 0.15);
    /* New colors for author and tags based on image 2 */
    --novel-widget-author-bg-color: #fff0e0; /* Light orange */
    --novel-widget-author-text-color: #FF6F06; /* Orange */
    --novel-widget-tag-bg-color: #e0f0ff;    /* Light blue */
    --novel-widget-tag-text-color: #2997F7;   /* Blue */
}

/* Ensure the widget itself has no top margin or padding */
.widget_zibll_novel_category_posts_widget {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.dark-theme, .dark-mode /* Assuming theme uses .dark-mode or body.dark-theme */ {
    --novel-widget-text-color: #ccc;
    --novel-widget-link-color: #58a6ff;
    --novel-widget-link-hover-color: #79c0ff;
    --novel-widget-meta-text-color: #8b949e;
    --novel-widget-excerpt-color: #adb5bd;
    --novel-widget-border-color: #30363d;
    --novel-widget-item-bg-color: #2d2e30;
    --novel-widget-meta-bg-color: #21262d;
    --novel-widget-more-link-bg-color: rgba(88, 166, 255, 0.15);
    --novel-widget-more-link-bg-hover-color: rgba(88, 166, 255, 0.25);
    /* Dark theme adjustments for new author/tag colors if needed, for now using light theme's */
    --novel-widget-author-bg-color: #4a3c2e; /* Darker orange variant */
    --novel-widget-author-text-color: #FF6F06; /* Lighter orange for dark */
    --novel-widget-tag-bg-color: #2c3a4f;    /* Darker blue variant */
    --novel-widget-tag-text-color: #2997F7;   /* Lighter blue for dark */
}

/* Widget Title */
.widget_zibll_novel_category_posts_widget .widget-title:empty {
    display: none; /* 如果标题为空，则隐藏整个标题区域 */
}

.widget_zibll_novel_category_posts_widget .widget-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Category Column Header */
.novel-category-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertically center align items */
    margin-top: 10px; /* Add 5px margin at the top */
    margin-bottom: 10px; /* Add some space below the header */
}

.novel-category-column-title-text {
    font-size: 1.1em; /* Adjust as needed */
    font-weight: bold;
    color: var(--novel-widget-text-color);
    margin-right: 10px; /* Space between title and link */
    flex-grow: 1; /* Allow title to take available space */
}

.novel-category-column-more-link {
    font-size: 0.9em; /* Adjust as needed */
    color: var(--novel-widget-link-color);
    text-decoration: none;
    white-space: nowrap; /* Prevent link from wrapping */
}

.novel-category-column-more-link:hover {
    color: #F04494; /* 玫红色 */
    text-decoration: none; /* 移除下划线 */
}

.widget_zibll_novel_category_posts_widget .widget-title {
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    padding-bottom: 5px;
    /* margin-bottom: 10px; */ /* Removed to reduce space */
    border-bottom: 2px solid var(--novel-widget-link-color); /* 标题下划线 */
    margin-top: 0 !important; /* Add this */
    padding-top: 0 !important; /* Add this */
}

.widget_zibll_novel_category_posts_widget .widget-title .widget-title-text {
    margin-right: 10px;
    flex-grow: 1;
    color: var(--novel-widget-text-color); /* 标题文本颜色 */
    /* display: flex; 已移除 */
    /* align-items: center; 已移除 */
}



/* Posts List */
.widget_zibll_novel_category_posts_widget ul.novel-posts-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: grid;
    gap: 15px;
}

.widget_zibll_novel_category_posts_widget ul.novel-posts-list.columns-1 {
    grid-template-columns: 1fr;
}

.widget_zibll_novel_category_posts_widget ul.novel-posts-list.columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.widget_zibll_novel_category_posts_widget ul.novel-posts-list.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.widget_zibll_novel_category_posts_widget ul.novel-posts-list.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* List Item */
.widget_zibll_novel_category_posts_widget ul li {
    background-color: var(--novel-widget-item-bg-color);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 15px;
    /* border: 1px solid var(--novel-widget-border-color); Moved to .has-border */
}

.widget_zibll_novel_category_posts_widget ul li.is-plain-text-list-item {
    margin-bottom: 0px; /* Reduced margin for plain text list items */
    padding: 5px 10px; /* Optionally reduce padding as well */
}

.widget_zibll_novel_category_posts_widget ul li.has-border {
    border: 1px solid var(--novel-widget-border-color); /* 列表项边框 */
}

.widget_zibll_novel_category_posts_widget ul.novel-posts-list > li:last-child {
    margin-bottom: 0;
}



/* Thumbnail */
.widget_zibll_novel_category_posts_widget ul li .post-thumbnail-small {
    margin-right: 10px;
    flex-shrink: 0;
    width: 100px;
    height: 130px;
}

.widget_zibll_novel_category_posts_widget ul li .post-thumbnail-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 3px;
}

/* Post Content */
.widget_zibll_novel_category_posts_widget ul li .post-content {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; Removed to allow content to stack naturally */
    flex-grow: 1;
    /* min-height: 100px; Removed to allow height to be determined by content */
}

/* Post Title */
.widget_zibll_novel_category_posts_widget ul li .post-title {
    margin: 0 0 5px 0;
    font-size: 1em;
}

.widget_zibll_novel_category_posts_widget ul li .post-title a {
    text-decoration: none;
    color: var(--novel-widget-text-color);
    font-weight: bold;
}

.widget_zibll_novel_category_posts_widget ul li .post-title a:hover {
    color: var(--novel-widget-link-color);
}

/* Rank Number */
.widget_zibll_novel_category_posts_widget ul li .rank-number {
    font-weight: bold;
    margin-right: 5px;
    color: #555; /* Default dark text color */
    background-color: #f0f0f0; /* Default light grey background */
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    display: inline-block;
    line-height: 1.2;
}

body.dark-theme .widget_zibll_novel_category_posts_widget ul li .rank-number,
.dark-mode .widget_zibll_novel_category_posts_widget ul li .rank-number {
    color: #ccc; /* Lighter text for dark mode */
    background-color: #3a3a3a; /* Darker background for dark mode (ranks 6-10) */
}

/* Specific rank colors will override the default dark mode if they are defined for dark mode too */
/* For example, if .rank-1 also needs a dark mode specific style: */
/* body.dark-theme .widget_zibll_novel_category_posts_widget ul li .rank-1, */
/* .dark-mode .widget_zibll_novel_category_posts_widget ul li .rank-1 { */
/*    background-color: #some_dark_pink_variant; */
/*    color: #some_light_pink_text_variant; */
/* } */

.widget_zibll_novel_category_posts_widget ul li .rank-number {
    font-weight: bold;
    margin-right: 5px;
    color: #555; /* Default dark text color */
    background-color: #f0f0f0; /* Default light grey background */
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
    display: inline-block;
    line-height: 1.2;
}

.widget_zibll_novel_category_posts_widget ul li .rank-1 {
    background-color: #FDEEEC; /* Light Pink */
    color: #D94656; /* Dark Pink/Red text */
}

.widget_zibll_novel_category_posts_widget ul li .rank-2 {
    background-color: #FFF3E0; /* Light Orange */
    color: #F58F3C; /* Dark Orange text */
}

.widget_zibll_novel_category_posts_widget ul li .rank-3 {
    background-color: #F3E8FF; /* Light Purple */
    color: #A059D9; /* Dark Purple text */
}

body.dark-theme .widget_zibll_novel_category_posts_widget ul li .rank-1,
.dark-mode .widget_zibll_novel_category_posts_widget ul li .rank-1 {
    background-color: rgba(253, 238, 236, 0.15); /* Light Pink with 0.15 alpha */
    color: #D94656; /* Dark Pink/Red text - consider adjusting for dark mode contrast if needed */
}

body.dark-theme .widget_zibll_novel_category_posts_widget ul li .rank-2,
.dark-mode .widget_zibll_novel_category_posts_widget ul li .rank-2 {
    background-color: rgba(255, 243, 224, 0.15); /* Light Orange with 0.15 alpha */
    color: #F58F3C; /* Dark Orange text - consider adjusting */
}

body.dark-theme .widget_zibll_novel_category_posts_widget ul li .rank-3,
.dark-mode .widget_zibll_novel_category_posts_widget ul li .rank-3 {
    background-color: rgba(243, 232, 255, 0.15); /* Light Purple with 0.15 alpha */
    color: #A059D9; /* Dark Purple text - consider adjusting */
}

.widget_zibll_novel_category_posts_widget ul li .rank-4 {
    background-color: #E0F2FF; /* Light Blue */
    color: #3B82F6; /* Dark Blue text */
}

body.dark-theme .widget_zibll_novel_category_posts_widget ul li .rank-4,
.dark-mode .widget_zibll_novel_category_posts_widget ul li .rank-4 {
    background-color: rgba(224, 242, 255, 0.15); /* Light Blue with 0.15 alpha */
    color: #3B82F6; /* Dark Blue text - consider adjusting */
}

.widget_zibll_novel_category_posts_widget ul li .rank-5 {
    background-color: #E6F7EA; /* Light Green */
    color: #10B981; /* Dark Green text */
}

body.dark-theme .widget_zibll_novel_category_posts_widget ul li .rank-5,
.dark-mode .widget_zibll_novel_category_posts_widget ul li .rank-5 {
    background-color: rgba(230, 247, 234, 0.15); /* Light Green with 0.15 alpha */
    color: #10B981; /* Dark Green text - consider adjusting */
}

/* Post Meta */
.widget_zibll_novel_category_posts_widget ul li .post-meta {
    font-size: 0.85em;
    /* color is now set per author/tag */
    /* margin-bottom: 3px; */ /* Removed for better vertical alignment */
    padding: 3px 8px; /* Slightly increased padding for better look */
    border-radius: 4px; /* Slightly more rounded corners */
    display: inline-flex; /* Changed to inline-flex to allow them to sit side-by-side if space allows */
    align-items: center !important; /* Ensure vertical alignment of items INSIDE .post-meta */
    vertical-align: middle; /* Helps with alignment of .post-meta block itself */
    margin-right: 8px;
    line-height: 1.2; /* Reduced line-height */
}

.widget_zibll_novel_category_posts_widget ul li .post-meta i {
    vertical-align: middle; /* Ensure icon is vertically centered with text */
    margin-right: 4px; /* Space between icon and text */
    line-height: 1; /* Ensure icon itself doesn't add extra line height */
}

.widget_zibll_novel_category_posts_widget ul li .post-author,
.widget_zibll_novel_category_posts_widget ul li .post-author a {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    background-color: var(--novel-widget-author-bg-color);
    color: var(--novel-widget-author-text-color);
}

.widget_zibll_novel_category_posts_widget ul li .post-tags,
.widget_zibll_novel_category_posts_widget ul li .post-tags a {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    background-color: var(--novel-widget-tag-bg-color);
    color: var(--novel-widget-tag-text-color);
}

/* Ensure link hover states also use the correct text color */
.widget_zibll_novel_category_posts_widget ul li .post-author a:hover,
.widget_zibll_novel_category_posts_widget ul li .post-tags a:hover {
    color: #FF0080; /* 玫红色 */
    text-decoration: none; /* 去除下划线 */
}

.widget_zibll_novel_category_posts_widget ul li .post-views,
.widget_zibll_novel_category_posts_widget ul li .post-likes {
    background-color: transparent;
    padding-left: 0;
    padding-right: 0;
}

.widget_zibll_novel_category_posts_widget ul li .post-meta:last-child {
    margin-bottom: 0;
    margin-right: 0;
}

/* Styles for post-meta-right (views and likes) */
.widget_zibll_novel_category_posts_widget ul li .post-meta-right {
    display: inline-flex;
    align-items: center;
    vertical-align: middle; /* Align this block with sibling author/tags blocks */
    font-size: 0.85em; /* Match .post-meta font size */
    color: var(--novel-widget-meta-text-color); /* Standard meta text color */
    margin-left: auto; /* Push views/likes to the right */
}

.widget_zibll_novel_category_posts_widget ul li .post-meta-right .views,
.widget_zibll_novel_category_posts_widget ul li .post-meta-right .likes {
    display: inline-flex; /* Align icon and text within each stat */
    align-items: center;
}

.widget_zibll_novel_category_posts_widget ul li .post-meta-right .likes {
    margin-left: 10px; /* Space between views and likes, complements .ml10 class if used */
}

.widget_zibll_novel_category_posts_widget ul li .post-meta-right i {
    margin-right: 4px;
    /* vertical-align is not strictly needed here as parent .views/.likes is display:inline-flex; align-items:center */
}

/* Post Excerpt */
.widget_zibll_novel_category_posts_widget ul li .post-excerpt {
    font-size: 0.9em;
    color: var(--novel-widget-excerpt-color);
    margin-top: 10px;
    margin-bottom: 10px;
}

/* Post Meta Group */
.widget_zibll_novel_category_posts_widget ul li .post-meta-group {
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    margin-top: auto;
    padding-top: 10px;
}

.widget_zibll_novel_category_posts_widget ul li .meta-group-main,
.widget_zibll_novel_category_posts_widget ul li .meta-group-secondary {
    display: flex;
    align-items: center !important;
}

.widget_zibll_novel_category_posts_widget ul li .post-meta-group .post-meta i {
    margin-right: 3px;
}

/* Multi-Category Columns */
.novel-category-columns-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 15px;
}

.novel-category-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center !important;
    margin-bottom: 5px; /* Reduced margin */
    padding-bottom: 5px; /* Reduced padding */
}

.novel-category-column-title {
    margin: 0;
    font-size: 1.1em;
    font-weight: bold;
    flex-grow: 1;
    padding-top: 0px; /* Reduced top/bottom padding */
    padding-bottom: 0px;
}



.novel-category-column {
    flex: 1 1 0;
    min-width: 280px;
}

.novel-category-column ul.novel-posts-list {
    display: block;
    padding-left: 0;
    list-style: none;
}

.novel-category-columns-wrapper.columns-1 .novel-category-column {
    flex-basis: 100%;
}

.novel-category-columns-wrapper.columns-2 .novel-category-column {
    flex-basis: calc(50% - 10px);
}

.novel-category-columns-wrapper.columns-3 .novel-category-column {
    flex-basis: calc(33.333% - 13.33px);
}

.novel-category-columns-wrapper.columns-4 .novel-category-column {
    flex-basis: calc(25% - 15px);
}

/* Limited Excerpt */
.post-excerpt-limited {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5em; /* 假设行高为 1.5em */
    min-height: 4.5em; /* 1.5em * 3 行 = 4.5em，确保至少有三行的高度 */
    max-height: 4.5em; /* 最多显示三行 */
}

.novel-category-column .novel-category-column-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 5px;
}

.novel-category-column .novel-category-column-title a {
    text-decoration: none;
    color: #333;
}

.novel-category-column .novel-category-column-title a:hover {
    color: #007bff;
}

/* Ensure author and tags are side-by-side on mobile */
@media (max-width: 767px) {
    .novel-category-columns-wrapper .post-meta-group .meta-group-main {
        display: flex; /* Changed from flex to block to handle overflow correctly */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        align-items: center;
    }
    .novel-category-columns-wrapper .post-meta.post-author,
    .novel-category-columns-wrapper .post-meta.post-tags {
        display: inline; /* Ensure they are on the same line */
        margin-right: 5px;
        /* Removed white-space: nowrap; as parent handles it */
    }
    .novel-category-columns-wrapper .post-meta-group .meta-group-main .post-tags {
        margin-right: 5px; /* Adjust as needed */
        display: inline; /* Ensure inline display */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hide-on-mobile {
        display: none !important;
    }
}

/* Desktop and larger screens */
@media (min-width: 768px) {
    .hide-on-mobile {
        display: flex !important; /* Or block, inline-block, etc., depending on the element's default display type */
    }
}

.widget_zibll_novel_category_posts_widget .post-meta-group .tags-info a:hover {
    color: #ff1493;
}

/* Mixed Mode Styles */
.mixed-mode-widget li.post-item {
    margin-bottom: 0px; /* Reduce bottom margin for tighter spacing by default */
    padding-bottom: 2px; /* Reduce bottom padding as well if it's used */
}

.mixed-mode-widget li.post-item.is-plain-text-list-item .post-title {
    margin-bottom: 0; /* Remove bottom margin from title if it's the only thing visible */
    line-height: 1.4; /* Adjust line-height for title for tighter spacing */
}

.mixed-mode-widget li.post-item:not(:hover) {
    /* Styles for non-hovered items in mixed mode */
    /* This ensures that when not hovered, the items are compact if they are text-only */
}

.mixed-mode-widget li.post-item { /* This is a duplicate, will be merged or removed by linter if not needed */
    /* Default state: text only - hide meta and thumbnail */
}

.mixed-mode-widget li.post-item .post-thumbnail-small {
    display: none !important;
}
.mixed-mode-widget li.post-item .post-meta-details {
    display: none !important;
}
















/* Ensure title is always visible */
/* Styles for the new wrapper */
.mixed-mode-widget li.post-item .post-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Styles for the title (h4) within the wrapper */
.mixed-mode-widget li.post-item .post-title-wrapper .post-title {
    margin: 0; /* Reset margin */
    flex-grow: 1; /* Allow title to take available space */
    margin-right: 8px; /* Space between title and meta */
    overflow: hidden; /* Ensure h4 itself can be part of truncation if needed */
}

.mixed-mode-widget li.post-item .post-title-wrapper .post-title a {
    /* display: block !important; */ /* Commented out to allow -webkit-line-clamp to work */
    overflow: hidden;
    text-overflow: ellipsis;
    /* -webkit-line-clamp will be set inline */
    -webkit-box-orient: vertical;
    margin: 0;
    flex: 1; /* Allow title to take available space and shrink if needed */
}

.mixed-mode-widget li.post-item .post-title-wrapper .title-meta-mixed {
    font-size: 12px;
    color: #999;
    /* margin-left: 8px; /* Replaced by margin-right on .post-title */
    /* padding-left: 8px; /* Replaced by margin-right on .post-title */
    white-space: nowrap;
    flex-shrink: 0; /* Prevent meta from shrinking */
}

.mixed-mode-widget li.post-item .post-title-wrapper .title-meta-mixed .post-author-mixed,
.mixed-mode-widget li.post-item .post-title-wrapper .title-meta-mixed .post-tags-mixed {
    margin-left: 8px;
}

.mixed-mode-widget li.post-item .post-title-wrapper .title-meta-mixed .post-author-mixed a,
.mixed-mode-widget li.post-item .post-title-wrapper .title-meta-mixed .post-tags-mixed a {
    color: var(--novel-widget-meta-text-color);
    text-decoration: none;
}

.mixed-mode-widget li.post-item .post-title-wrapper .title-meta-mixed .post-author-mixed a:hover,
.mixed-mode-widget li.post-item .post-title-wrapper .title-meta-mixed .post-tags-mixed a:hover {
    color: var(--novel-widget-link-hover-color);
}

/* Hide title-meta-mixed when the item is active (expanded) */
.mixed-mode-widget li.post-item.is-active-item .post-title-wrapper .title-meta-mixed {
    display: none !important;
}



/* Adjustments for when meta is shown on hover */
.mixed-mode-widget li.post-item:hover {
    /* You might want to adjust padding or background on hover */
}

/* Hide the PC-only option on mobile */
@media (max-width: 768px) {
    .pc-only-option {
        display: none !important;
    }
}


/* Styles for the active item in mixed mode (shows thumbnail and meta) */
.mixed-mode-widget li.post-item.is-active-item .post-thumbnail-small,
.mixed-mode-widget li.post-item.is-active-item .post-meta-details {
    display: flex !important; /* Or block for thumbnail if it's just an img, meta-details should be flex */
}

.mixed-mode-widget li.post-item.is-active-item {
    display: flex !important;
    align-items: flex-start;
    border: 1px solid #ddd; /* Add border to the active item */
    padding: 10px; /* Add padding to the active item */
    box-sizing: border-box;
}

.mixed-mode-widget li.post-item.is-active-item .post-content {
    display: flex !important;
    flex-direction: column;
    flex-grow: 1;
    min-width: 0; /* Important for text wrapping */
}

.mixed-mode-widget li.post-item.is-active-item .post-thumbnail-small {
    /* display: block !important; /* Already handled by the first rule in this block if it's flex */
    flex-shrink: 0;
    margin-right: 10px;
}

.mixed-mode-widget li.post-item.is-active-item .post-meta-details {
    /* display: flex !important; /* Already handled by the first rule in this block */
    flex-direction: column;
    width: 100%;
    margin-top: 8px; /* Space between title and meta details */
}

.mixed-mode-widget li.post-item.is-active-item .post-meta-details .post-excerpt {
    width: 100%;
    margin-bottom: 5px;
}

.mixed-mode-widget li.post-item.is-active-item .post-meta-details .post-meta-group {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

/* Responsive adjustments for smaller screens */