.media-main { padding-top: 90px; }
.media-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; align-items: center; justify-content: space-between; }
.media-modes { display:flex; gap:10px; }
.media-categories { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.media-tab, .category-chip { border: 1px solid var(--border-color); border-radius: 20px; background: #fff; cursor: pointer; white-space:nowrap; }
.media-tab { padding: 8px 14px; }
.category-chip { padding: 6px 10px; font-size: 14px; }
.media-tab.active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.category-chip.active { background: var(--primary-color); color:#fff; border-color: var(--primary-color);} 

/* 未选分类前，禁用模式按钮的状态 */
.media-tab[disabled] { opacity: .5; cursor: not-allowed; }

.media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.media-item { background:#fff; border-radius:10px; overflow:hidden; box-shadow: var(--shadow); cursor:pointer; }
.media-item img, .media-item video { width:100%; height: 200px; object-fit: cover; display:block; }

/* 移动端 */
@media (max-width: 992px){ .media-grid { grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 768px){ .media-grid { grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 576px){ .media-grid { grid-template-columns: 1fr; } .media-item img, .media-item video { height: 220px;} }

.lightbox-body img, .lightbox-body video { width:100%; height:auto; border-radius:8px; }