:root {
    --imdb-bg: #121212;
    --imdb-card-bg: #1A1A1A;
    --imdb-card-bg-hover: #2c2c2c;
    --imdb-text-primary: #FFFFFF;
    --imdb-text-secondary: #AAAAAA;
    --imdb-accent: #F5C518;
    --imdb-border: #2c2c2c;
    --douban-green: #007722;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--imdb-bg);
    color: var(--imdb-text-primary);
    margin: 0;
    padding: 20px 0;
}
.container {
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
    padding: 0 20px;
}
h1 { 
    text-align: center; 
    color: var(--imdb-accent);
    margin-top: 0;
    margin-bottom: 20px;
    /* **修改**: 调整行高以适应两行布局 */
    line-height: 1.3;
}

/* **新增**: 更新日期的样式 */
h1 .update-date {
    display: block; /* 使其独占一行 */
    margin-top: 6px; /* 与主标题的间距 */
    font-size: 1rem; /* 字体大小 */
    font-weight: 400; /* 正常字重 */
    color: var(--imdb-text-secondary); /* 使用次要文本颜色 */
    letter-spacing: 1.5px; /* 增加字母间距以提升现代感 */
}


/* --- Sticky Header --- */
.sticky-header {
    position: sticky;
    top: 0;
    background-color: var(--imdb-bg);
    z-index: 100;
    padding: 10px 0; /* 修改：将上下内边距改为 10px */
    margin-bottom: 30px;
    padding-left: 100px; /* 新增：与主内容对齐 */
    box-sizing: border-box; /* 新增：确保内边距不会增加总宽度 */
}
.genre-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 修改：默认为左对齐 */
    gap: 10px;
    /* margin-top: 15px; */ /* 移除：间距现在由 sticky-header 的 padding 和 network-filter-container 的 margin 控制 */
}
/* **新增**: 播出平台筛选容器样式 */
.network-filter-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* 修改：默认为左对齐 */
    gap: 10px;
    padding-left: 100px; /* 新增：与下方的 sticky-header 对齐 */
    margin-bottom: 10px; /* 修改：将默认下边距改为 10px */
    box-sizing: border-box; /* 新增：确保内边距不会增加总宽度 */
}

/* **新增**: 移除第二个筛选器（平台）的下边距，以避免双重间距 */
#network-filter-container {
    margin-bottom: 0;
}

/* 恢复：合并样式，所有标签都使用 .genre-tag */
.genre-tag {
    background-color: var(--imdb-card-bg);
    border: 1px solid var(--imdb-border);
    color: var(--imdb-text-secondary);
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.2s ease; /* Reverted transition */
}

.genre-tag:hover {
    background-color: var(--imdb-card-bg-hover);
    color: var(--imdb-text-primary);
    position: relative; /* Lift on hover to be above the gradient */
    z-index: 2;
}

.genre-tag.active {
    background-color: var(--imdb-accent);
    color: #000;
    border-color: var(--imdb-accent);
    position: relative; /* Add position to enable z-index */
    z-index: 3; /* Active tag should be on top of hovered tags */
}

/* Apply checkmark only to active tags within multi-select containers, but not to the "All" tag */
#genre-filter-container .genre-tag.active.multiselect-tick::before,
#network-filter-container .genre-tag.active.multiselect-tick::before {
    content: '✓ ';
    font-weight: bold;
}

/* --- File Loader (隐藏) --- */
.file-loader { display: none; }

#main-content { margin-left: 100px; }

/* --- Interactive Timeline --- */
.interactive-timeline { position: fixed; left: 20px; top: 50%; transform: translateY(-50%); z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.5s; }
.interactive-timeline.visible { opacity: 1; pointer-events: auto; }
#year-list { list-style: none; padding: 0; margin: 0; position: relative; }
#year-list::before { content: ''; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 2px; background-color: var(--imdb-border); }
.year-item { padding: 15px 0 15px 30px; position: relative; cursor: pointer; }
.year-item .dot { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; border-radius: 50%; background-color: var(--imdb-bg); border: 3px solid var(--imdb-border); transform: translateY(-50%) scale(1); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.year-item .year-text { font-size: 1rem; color: var(--imdb-text-secondary); font-weight: normal; transition: all 0.3s ease; }
.year-item:hover .dot, .year-item.active .dot { border-color: var(--imdb-accent); }
.year-item.active .dot { background-color: var(--imdb-accent); transform: translateY(-50%) scale(1.5); }
.year-item.active .year-text { color: var(--imdb-accent); font-weight: bold; font-size: 1.2rem; }

/* --- Coming Soon & Month Headers --- */
#coming-soon-container { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 4px solid var(--imdb-accent); }
.month-group-header { font-size: 1.8rem; font-weight: 300; color: var(--imdb-accent); border-bottom: 2px solid var(--imdb-border); padding-bottom: 10px; margin: 40px 0 20px 0; }
.month-group-header:first-of-type { margin-top: 0; }
#coming-soon-container .month-group-header { border-bottom: none; }

/* --- 水平滚动容器样式 --- */
.scroller-wrapper { position: relative; }
.scroller-container { overflow-x: auto; overflow-y: hidden; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--imdb-border) var(--imdb-bg); scroll-behavior: smooth; }
.scroller-container::-webkit-scrollbar { height: 8px; }
.scroller-container::-webkit-scrollbar-track { background: var(--imdb-bg); }
.scroller-container::-webkit-scrollbar-thumb { background-color: var(--imdb-border); border-radius: 4px; }
.horizontal-scroller { display: flex; gap: 16px; width: max-content; }
.horizontal-scroller .show-card { width: 160px; flex-shrink: 0; }

/* **核心修改**：箭头按钮样式 */
.scroller-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    background-color: rgba(26, 26, 26, 0.8);
    border: none;
    color: white;
    border-radius: 50%;
    font-size: 2.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding-bottom: 4px;
    transition: opacity 0.3s, background-color 0.3s;
}
.scroller-arrow:hover { background-color: rgba(44, 44, 44, 0.9); }
.scroller-arrow:disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}
.scroller-arrow.left { left: -24px; }
.scroller-arrow.right { right: -24px; }

/* --- Card Grid Layout (for past items) --- */
.month-grid { display: grid; gap: 16px; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1280px) { .month-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 1024px) { .month-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { 
    .sticky-header { padding-left: 0; } /* 新增：在小屏幕上移除内边距 */
    .network-filter-container,
    .genre-filter-container,
    #rating-filter-container { /* 新增：确保评分容器也应用相对定位 */
        position: relative; /* 为渐变遮罩提供定位上下文 */
        /* Add CSS Mask for fading effect */
        -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
        mask-image: linear-gradient(to right, black 90%, transparent 100%);
    }

    .network-filter-container { 
        padding-left: 0; 
        overflow-x: auto;
        flex-wrap: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
    } 
    #rating-filter-container { /* 新增：确保评分容器在移动端也能水平滚动 */
        overflow-x: auto;
        flex-wrap: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .genre-filter-container {
        overflow-x: auto;
        flex-wrap: nowrap;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .network-filter-container::-webkit-scrollbar,
    .genre-filter-container::-webkit-scrollbar,
    #rating-filter-container::-webkit-scrollbar { /* 新增：隐藏评分容器的滚动条 */
        display: none;
    }
    
    /* REMOVED the ::after pseudo-element for gradient overlay */

    .genre-tag {
        flex-shrink: 0; /* 防止标签在flex容器中被压缩 */
        /* **新增**: 让标签更紧凑 */
        padding: 6px 12px;
        font-size: 13px;
    }

    body { padding: 8px 0; } 
    .container { padding: 0 8px; } 
    #main-content { margin-left: 0; } 
    .interactive-timeline { display: none; } 
    .month-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .horizontal-scroller .show-card { width: 140px; }
    .scroller-arrow { display: none !important; }
}

/* --- IMDb Style Card --- */
.show-card { background-color: var(--imdb-card-bg); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s ease-in-out, background-color 0.2s; border: none; box-shadow: none; }
.show-card:hover { transform: scale(1.05); background-color: var(--imdb-card-bg-hover); z-index: 10; }
.card-poster-container { position: relative; }
.card-poster-container.clickable { cursor: pointer; }
.show-card img.poster { width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; background-color: #222; display: block; }
.watchlist-button { position: absolute; top: 0; left: 0; width: 28px; height: 38px; background-color: rgba(0, 0, 0, 0.7); cursor: pointer; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); transition: background-color 0.2s; }
.watchlist-button:hover { background-color: var(--imdb-accent); }
.watchlist-button .watchlist-icon { color: white; width: 20px; height: 20px; position: absolute; top: 6px; left: 4px; transition: transform 0.2s; }
.watchlist-button:hover .watchlist-icon { transform: scale(1.1); color: #000; }
.card-content { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; }
.card-rating { font-size: 13px; margin-bottom: 8px; font-weight: bold; display: flex; align-items: center; gap: 0.3em; }
.card-rating .imdb-gold { color: var(--imdb-accent); }
.card-rating .douban-green { color: var(--douban-green); font-weight: normal; }
.card-rating .no-rating-text { color: var(--imdb-text-primary); font-weight: normal; }
.card-title { font-size: 14px; font-weight: bold; color: var(--imdb-text-primary); margin: 0 0 4px 0; line-height: 1.3; height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta-info { font-size: 12px; color: var(--imdb-text-secondary); margin-bottom: 12px; flex-grow: 1; white-space: nowrap; }
.card-links { display: flex; gap: 8px; margin-top: auto; }
.card-link { flex: 1; text-align: center; padding: 8px 0; background-color: rgba(255, 255, 255, 0.1); border-radius: 4px; text-decoration: none; color: var(--imdb-text-primary); font-size: 13px; font-weight: bold; transition: background-color 0.2s; }
.card-link:hover { background-color: rgba(255, 255, 255, 0.2); }
@media (max-width: 900px) { .card-content { padding: 8px; } .card-rating { font-size: 11px; margin-bottom: 4px; } .card-title { font-size: 12px; height: 32px; } .card-meta-info { font-size: 10px; } .card-link { padding: 6px 0; font-size: 11px; } }

/* --- Loaders & Results --- */
#no-results { color: var(--imdb-text-secondary); margin-top: 40px; }
.loader { border-top-color: var(--imdb-accent); border: 5px solid #2c2c2c; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; border-radius: 50%; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.loading-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; justify-content: center; align-items: center; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0s 0.3s; }
.loading-overlay.visible { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }

/* --- Skeleton Loader Styles --- */
.skeleton {
    opacity: 0.7;
    animation: skeleton-loading 1.5s infinite linear;
    background: linear-gradient(90deg, var(--imdb-card-bg) 25%, #2a2a2a 50%, var(--imdb-card-bg) 75%);
    background-size: 200% 100%;
}

.month-group-header.skeleton {
    /* Override to look like a real header */
    color: var(--imdb-accent);
    background: none;
    animation: none;
    border-bottom: 2px solid var(--imdb-border);
}

.update-date.skeleton {
    height: 1rem; /* Match font-size of final state */
    width: 120px; /* Approximate width of the date text */
    margin: 6px auto 0; /* Match margin-top and center it */
    border-radius: 4px;
}

/* Skeleton card for the main responsive grid */
.month-grid .show-card.skeleton {
    aspect-ratio: 2 / 3;
    border-radius: 4px;
}

/* Skeleton card for the horizontal scroller (fixed size) */
.horizontal-scroller .show-card.skeleton {
    width: 160px;
    height: 290px; /* Fixed height to match the approximate final card height */
    flex-shrink: 0;
    border-radius: 4px;
}

/* --- Toast Notification --- */
.toast-notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 100px); /* Start off-screen */
    background-color: var(--imdb-accent);
    color: #000;
    padding: 12px 24px;
    border-radius: 25px;
    z-index: 10000;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 0.5s, visibility 0s 0.5s;
}

.toast-notification.show {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
    transition: transform 0.5s cubic-bezier(0.215, 0.610, 0.355, 1), opacity 0.5s, visibility 0s;
}

.genre-tag.skeleton {
    pointer-events: none; /* Make skeleton tags unclickable */
    user-select: none;
    /* Override skeleton animation to make tags look static */
    opacity: 1;
    animation: none;
    background: var(--imdb-card-bg);
    border: 1px solid var(--imdb-border);
}

#region-filter-container {
    border-bottom: 1px solid var(--imdb-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}