.g-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 28px; }
.g-head { position: sticky; top: 0; z-index: 10; background: rgba(12, 13, 15, .86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.g-bar { display: flex; align-items: center; gap: 20px; height: 68px; }
.g-brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; margin-right: auto; min-width: 0; }
.g-brand span { font-size: 16px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.g-brand em { font-style: normal; font-size: 12px; color: var(--accent); letter-spacing: .08em; white-space: nowrap; }
.g-bar input { max-width: 280px; height: 36px; border-radius: 18px; padding: 0 16px; }

.g-cats { display: flex; gap: 6px; padding-top: 2px; padding-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.g-cats::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; height: 30px; padding: 0 14px; border-radius: 15px; border: 1px solid var(--line-2); background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; }
.chip:hover { color: var(--text); }
.chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip b { font-weight: 500; opacity: .55; margin-left: 4px; font-size: 11px; }

.g-count { margin: 22px 0 14px; font-size: 12px; letter-spacing: .04em; }
.g-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px 18px; padding-bottom: 48px; }

.card { display: block; text-decoration: none; }
.card .ph { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.card .ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1), opacity .4s; opacity: 0; }
.card .ph img.ld { opacity: 1; }
.card:hover .ph img { transform: scale(1.045); }
.card .ph::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55)); opacity: 0; transition: opacity .3s; }
.card:hover .ph::after { opacity: 1; }
.card .badge { position: absolute; left: 10px; top: 10px; z-index: 1; font-size: 10px; font-weight: 600; letter-spacing: .12em; padding: 4px 8px; border-radius: 4px; background: rgba(12, 13, 15, .7); color: #fff; backdrop-filter: blur(6px); }
.card .badge.ft { left: auto; right: 10px; background: var(--accent); color: var(--accent-ink); }
.card .noimg { position: absolute; inset: 0; display: grid; place-items: center; color: var(--line-2); font-size: 34px; font-weight: 600; letter-spacing: .1em; }
.card .meta { padding: 10px 2px 0; }
.card h3 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .sub { margin-top: 3px; font-size: 12px; color: var(--muted); }

.g-empty { text-align: center; padding: 90px 0; }
.g-empty p { margin: 4px 0; }
.g-empty .btn { margin-top: 18px; }
.g-foot { padding: 24px 28px 36px; font-size: 12px; border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .g-wrap { padding: 0 16px; }
  .g-bar { gap: 12px; height: 60px; }
  .g-brand em { display: none; }
  .g-bar input { max-width: 170px; }
  .g-grid { grid-template-columns: 1fr; gap: 18px; }
}