/* ─── Trending Page ─── */
.trending-screen { padding: 0 0 80px; }
.trending-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:16px 20px 8px; flex-wrap:wrap; }
.trending-header h1 { font-size:1.4rem; margin:0; }
.trending-header small { color:var(--text-dim); display:block; font-size:.85rem; margin-top:2px; }

.trending-period-tabs { display:flex; gap:8px; }
.trending-period-tabs button { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:6px 16px; font-size:.85rem; cursor:pointer; color:var(--text); transition:.15s; }
.trending-period-tabs button.active { background:var(--primary); color:#fff; border-color:var(--primary); }

.trending-grid { display:grid; grid-template-columns:1fr 320px; gap:20px; padding:12px 20px; max-width:1400px; margin:0 auto; }
@media (max-width:900px) { .trending-grid { grid-template-columns:1fr; } }

/* Main column - posts */
.trending-posts { }
.trending-posts-head { display:flex; justify-content:space-between; align-items:center; padding:8px 0 12px; }
.trending-posts-head h2 { font-size:1.1rem; margin:0; }
.trending-posts-head small { color:var(--text-dim); }

.trending-post-card { display:flex; gap:12px; padding:12px; background:var(--surface); border-radius:var(--radius); border:1px solid var(--line); margin-bottom:10px; transition:.15s; }
.trending-post-card:hover { border-color:var(--primary-alpha); }
.trending-post-rank { font-size:1.5rem; font-weight:800; color:var(--primary); min-width:32px; text-align:center; line-height:1; }
.trending-post-rank.top1 { color:#ffd700; }
.trending-post-rank.top2 { color:#c0c0c0; }
.trending-post-rank.top3 { color:#cd7f32; }

.trending-post-thumb { width:80px; height:80px; border-radius:var(--radius); object-fit:cover; background:var(--surface-alt); flex-shrink:0; }
.trending-post-body { flex:1; min-width:0; }
.trending-post-body .post-author { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.trending-post-body .post-author img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.trending-post-body .post-author a { color:var(--text); text-decoration:none; font-weight:600; font-size:.85rem; }
.trending-post-body .post-desc { font-size:.9rem; color:var(--text); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; }
.trending-post-meta { display:flex; gap:12px; font-size:.8rem; color:var(--text-dim); }
.trending-post-meta span { display:flex; align-items:center; gap:4px; }

/* Sidebar */
.trending-sidebar { display:flex; flex-direction:column; gap:16px; }

.trending-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.trending-card-head { padding:12px 16px 8px; font-weight:700; font-size:.95rem; border-bottom:1px solid var(--line); }
.trending-card-item { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; gap:8px; }
.trending-card-item + .trending-card-item { border-top:1px solid var(--line); }
.trending-card-item .hash-tag { font-weight:600; font-size:.9rem; color:var(--primary); text-decoration:none; }
.trending-card-item .hash-count { font-size:.8rem; color:var(--text-dim); }
.trending-card-item .trend-bar { width:60px; height:4px; border-radius:2px; background:var(--surface-alt); position:relative; }
.trending-card-item .trend-bar em { display:block; height:100%; border-radius:2px; background:var(--primary); }

.trending-creator-row { display:flex; align-items:center; gap:10px; padding:8px 16px; }
.trending-creator-row img { width:32px; height:32px; border-radius:50%; object-fit:cover; }
.trending-creator-row .creator-info { flex:1; min-width:0; }
.trending-creator-row .creator-info a { color:var(--text); text-decoration:none; font-weight:600; font-size:.85rem; }
.trending-creator-row .creator-info small { display:block; color:var(--text-dim); font-size:.75rem; }
.trending-creator-row .creator-growth { color:var(--success); font-size:.8rem; font-weight:600; }

/* Challenges banner */
.trending-challenge-banner { background:linear-gradient(135deg,var(--primary),#0891b2); color:#fff; border-radius:var(--radius); padding:20px; text-align:center; margin-bottom:16px; }
.trending-challenge-banner h3 { margin:0 0 4px; font-size:1.2rem; }
.trending-challenge-banner p { margin:0 0 12px; font-size:.9rem; opacity:.9; }
.trending-challenge-banner .hash { font-weight:700; font-size:1.1rem; }
.trending-challenge-banner .challenge-cta { display:inline-block; background:#fff; color:var(--primary); padding:8px 24px; border-radius:var(--radius); font-weight:600; text-decoration:none; font-size:.9rem; }

/* Sounds sidebar */
.trending-sound-row { display:flex; align-items:center; gap:8px; padding:6px 16px; }
.trending-sound-row .sound-icon { width:28px; height:28px; border-radius:6px; background:var(--surface-alt); display:flex; align-items:center; justify-content:center; font-size:.85rem; }
.trending-sound-row .sound-info { flex:1; min-width:0; }
.trending-sound-row .sound-info a { color:var(--text); text-decoration:none; font-size:.85rem; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trending-sound-row .sound-info small { color:var(--text-dim); font-size:.75rem; }
.trending-sound-row .sound-usage { font-size:.8rem; color:var(--text-dim); }

/* Load more */
.trending-load-more { text-align:center; padding:20px; }
.trending-load-more button { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 32px; cursor:pointer; color:var(--text); font-size:.9rem; }
.trending-load-more button:hover { border-color:var(--primary); }

/* Trending page skeleton */
.trending-skeleton { padding:20px; }
.trending-skeleton > div { height:80px; background:var(--surface-alt); border-radius:var(--radius); margin-bottom:10px; animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:.6} 50%{opacity:1} }

/* No content states */
.trending-empty { text-align:center; padding:40px 20px; color:var(--text-dim); }
.trending-empty b { display:block; font-size:1.1rem; color:var(--text); margin-bottom:4px; }