.filter-bar{gap:var(--sp-2);margin-bottom:var(--sp-8);flex-wrap:wrap;justify-content:center;display:flex}.filter-pill{padding:var(--sp-2) var(--sp-5);border-radius:var(--radius-full);font-size:var(--fs-sm);color:var(--c-text-secondary);background:var(--c-bg-card);border:1px solid var(--c-border);cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none;font-weight:500}.filter-pill:hover{color:var(--c-text-primary);border-color:var(--c-accent);background:var(--c-accent-soft)}.filter-pill--active{color:#fff;background:var(--c-accent);border-color:var(--c-accent);box-shadow:0 0 12px var(--c-accent-glow)}.filter-pill--toggle{color:var(--c-accent);background:0 0;border-style:dashed}.filter-pill--toggle:hover{background:var(--c-accent-soft)}.banner-grid{columns:4;column-gap:6px}.banner-card{break-inside:avoid;border-radius:var(--radius-sm);transition:all var(--transition-base);animation:fadeInUp var(--transition-slow) ease both;cursor:pointer;background:0 0;border:none;margin-bottom:6px;position:relative;overflow:hidden}.banner-card:hover{z-index:2;transform:translateY(-2px);box-shadow:0 6px 24px #6c63ff40}.banner-card__image-wrapper{position:relative;overflow:hidden}.banner-card__image{width:100%;height:auto;transition:transform var(--transition-base);display:block}.banner-card:hover .banner-card__image{transform:scale(1.03)}.banner-card__categories{bottom:var(--sp-3);left:var(--sp-3);gap:var(--sp-1);flex-wrap:wrap;display:flex;position:absolute}.banner-card__cat-tag{padding:2px var(--sp-2);font-size:var(--fs-xs);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.05em;background:#6c63ffcc;font-weight:600}.banner-card__cat-tag--more{background:#fff3;font-size:.65rem;font-weight:500}.banner-card__link-icon{top:var(--sp-3);right:var(--sp-3);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-sm);opacity:0;width:28px;height:28px;transition:all var(--transition-fast);color:#fff;font-size:var(--fs-sm);background:#0009;justify-content:center;align-items:center;display:flex;position:absolute;transform:translateY(-4px)}.banner-card:hover .banner-card__link-icon{opacity:1;transform:translateY(0)}.banner-card--sponsored{background:linear-gradient(var(--c-bg-card,#1a1a2e), var(--c-bg-card,#1a1a2e)) padding-box, linear-gradient(135deg, gold, #ff6b35, #ff4081) border-box;border-radius:var(--radius-md);border:2px solid #0000;overflow:hidden}.banner-card--sponsored:hover{box-shadow:0 6px 24px #ff6b354d}.banner-card__sponsored-badge{top:var(--sp-2);left:var(--sp-2);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-sm);z-index:3;letter-spacing:.02em;pointer-events:none;background:#000000a6;padding:2px 8px;font-size:.7rem;font-weight:600;position:absolute}.banner-card__image--contain{object-fit:contain;padding:var(--sp-4);background:#ffffff0d;min-height:120px;max-height:200px}.banner-card__sponsor-info{justify-content:space-between;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);background:#ffffff0d;border-top:1px solid #ffffff14;display:flex}.banner-card__sponsor-name{font-size:var(--fs-xs);color:var(--c-text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-weight:600;overflow:hidden}.banner-card__commission{color:gold;white-space:nowrap;border-radius:var(--radius-sm);background:#ffd7001f;padding:1px 6px;font-size:.65rem;font-weight:700}.wall-state{text-align:center;padding:var(--sp-16) var(--sp-4);color:var(--c-text-secondary)}.wall-state__icon{margin-bottom:var(--sp-4);opacity:.5;font-size:3rem}.wall-state__text{font-size:var(--fs-lg);margin-bottom:var(--sp-4)}.wall-state__action{margin-top:var(--sp-4)}.skeleton-grid{columns:4;column-gap:6px}.skeleton-card{break-inside:avoid;border-radius:var(--radius-sm);background:var(--c-bg-card);border:none;margin-bottom:6px;animation:1.5s ease-in-out infinite shimmer;overflow:hidden}.skeleton-card__body{background:linear-gradient(90deg, var(--c-bg-card) 25%, var(--c-bg-card-hover) 50%, var(--c-bg-card) 75%);background-size:200% 100%;animation:1.5s ease-in-out infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}@media (width<=1280px){.banner-grid,.skeleton-grid{columns:3}}@media (width<=768px){.banner-grid,.skeleton-grid{columns:2}}@media (width<=480px){.banner-grid,.skeleton-grid{columns:1}}