.container { max-width: 1200px; }
.page-header { max-width:1200px; }
.nav-bar { display:flex; align-items:center; gap:12px; }
.nav-bar a { padding:5px 12px; border-radius:8px; background:var(--bg-nested); color:var(--text-muted); font-size:12px; text-decoration:none; border:1px solid var(--border); transition:all 0.2s; white-space:nowrap; }
.nav-bar a:hover { border-color:var(--accent); color:var(--accent); }
.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.count-label { color: var(--text-muted); font-size: 13px; }
.gal-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--bg-nested); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 18px; }
.gal-tab { padding: 7px 18px; border: none; background: transparent; color: var(--text-muted); font-size: 13px; font-weight: 500; cursor: pointer; border-radius: 9px; transition: all 0.2s; }
.gal-tab:hover { color: var(--text-primary); }
.gal-tab.active { background: linear-gradient(135deg, #667eea, #764ba2); color: #fff; }

/* 瀑布流网格：结果格本体与悬浮操作走 common.css 通用 .img-card / .img-overlay 规则；此页只定瀑布流布局与图片填充 */
.masonry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.masonry-item { border-radius: 10px; overflow: hidden; position: relative; background: var(--bg-card); cursor: pointer; aspect-ratio: 3/4; }
.masonry-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.2s; }
.masonry-item video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; transition: transform 0.2s; }
.masonry-item:hover img, .masonry-item:hover video { transform: scale(1.02); }
.empty { grid-column: 1 / -1; text-align: center; color: var(--text-dim); padding: 40px; font-size: 14px; }

.load-more { text-align: center; padding: 20px; }
.load-more button { padding: 10px 32px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted); border-radius: 8px; font-size: 13px; cursor: pointer; transition: all 0.2s; }
.load-more button:hover { border-color: var(--accent); color: var(--accent); }

/* 触屏无 hover，结果格悬浮操作常显 */
@media (hover: none) { .masonry-item .img-overlay { opacity: 1; } }
@media (max-width: 900px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .masonry { grid-template-columns: repeat(2, 1fr); } }