.category-page { display: flex; flex-direction: column; height: 100%; background-color: var(--bg-app); }
.category-container { display: flex; flex: 1; overflow: hidden; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.sidebar { width: 90px; background: rgba(255, 255, 255, 0.02); overflow-y: auto; flex-shrink: 0; padding-bottom: 100px; }
.sidebar::-webkit-scrollbar { display: none; }
.sidebar-item { padding: 16px 0; text-align: center; font-size: 14px; color: var(--text-muted); cursor: pointer; position: relative; }
.sidebar-item.active { background: var(--bg-app); color: var(--primary); font-weight: bold; }
.sidebar-item.active::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 3px; background: var(--primary); border-radius: 0 4px 4px 0; }

.category-content { flex: 1; padding: 16px; overflow-y: auto; padding-bottom: 100px; }
.category-content::-webkit-scrollbar { display: none; }
.filter-group { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.filter-tag { padding: 6px 14px; background: rgba(255, 255, 255, 0.05); border-radius: 16px; font-size: 12px; color: var(--text-muted); cursor: pointer; border: 1px solid transparent; }
.filter-tag.active { background: rgba(255, 102, 0, 0.1); color: var(--primary); border-color: var(--primary); font-weight: 500; }

/* 分类页：剧卡片采用两列瀑布流，而非强制成行对齐。
   .category-content 已有 16px 内边距，取消 .drama-grid 自带内边距。 */
.category-content .drama-grid {
    padding: 0;
    display: block;                 /* 取消 grid，改用 CSS 多列实现瀑布流 */
    column-count: 2;
    column-gap: 12px;
}
.category-content .drama-card {
    break-inside: avoid;            /* 卡片整体不被分栏截断 */
    margin-bottom: 16px;
}
.category-content .drama-card .title {
    display: block;                 /* 取消两行截断：剧名按实际长度自然换行，造就瀑布流高度参差 */
    overflow: visible;
}