/* ZIEN FIT — Social Hub */
.social-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-lg); }
.social-header h1 { font:700 var(--text-card-title) var(--font-display); letter-spacing:var(--ls-display); text-transform:uppercase; }

.social-tabs { display:flex; gap:4px; background:var(--bg-surface); border:1px solid var(--border-visible); border-radius:2px; padding:3px; margin-bottom:var(--space-lg); }
.social-tab { flex:1; padding:10px 16px; font:600 13px var(--font-heading); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-secondary); background:transparent; border-radius:2px; cursor:pointer; transition:all var(--dur-fast); text-align:center; border:none; }
.social-tab.active { background:var(--gold-ghost); color:var(--gold-primary); border:1px solid var(--border-gold); }

.feed-list { display:flex; flex-direction:column; gap:var(--space-base); }
.feed-card { background:var(--bg-surface); border:1px solid var(--border-subtle); border-radius:4px; padding:var(--space-md); transition:all var(--dur-fast); }
.feed-card:hover { border-color:var(--border-gold); }
.feed-header { display:flex; align-items:center; gap:var(--space-sm); margin-bottom:var(--space-sm); }
.feed-avatar { width:36px; height:36px; border-radius:50%; background:var(--grad-gold); display:flex; align-items:center; justify-content:center; font:700 14px var(--font-display); color:var(--bg-void); flex-shrink:0; }
.feed-user { font:600 14px var(--font-heading); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-primary); }
.feed-time { font:400 11px var(--font-mono); color:var(--text-muted); margin-left:auto; }
.feed-badge-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; font:600 10px var(--font-mono); letter-spacing:var(--ls-label); text-transform:uppercase; border-radius:2px; margin-left:8px; }
.feed-content { margin-bottom:var(--space-sm); }
.feed-content p { font:400 14px var(--font-body); color:var(--text-secondary); line-height:1.6; }
.feed-stats-row { display:flex; gap:var(--space-md); flex-wrap:wrap; margin:var(--space-sm) 0; }
.feed-stat { background:var(--bg-elevated); border:1px solid var(--border-subtle); border-radius:2px; padding:8px 14px; text-align:center; }
.feed-stat .fs-value { font:700 18px var(--font-display); color:var(--gold-primary); letter-spacing:var(--ls-display); }
.feed-stat .fs-label { font:500 10px var(--font-heading); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-muted); }
.feed-actions { display:flex; gap:var(--space-base); padding-top:var(--space-sm); border-top:1px solid var(--divider); }
.feed-action { display:flex; align-items:center; gap:6px; padding:6px 12px; font:500 12px var(--font-heading); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-muted); cursor:pointer; transition:color var(--dur-fast); border:none; background:none; }
.feed-action:hover { color:var(--gold-primary); }
.feed-action.liked { color:var(--signal-red); }

.leaderboard-list { margin-bottom:var(--space-xl); }
.lb-entry { display:flex; align-items:center; gap:var(--space-base); padding:var(--space-sm) var(--space-base); border-bottom:1px solid var(--divider); transition:background var(--dur-fast); }
.lb-entry:hover { background:var(--bg-elevated); }
.lb-rank { font:700 18px var(--font-display); color:var(--text-muted); width:32px; text-align:center; letter-spacing:var(--ls-display); }
.lb-entry:nth-child(1) .lb-rank { color:var(--gold-primary); }
.lb-entry:nth-child(2) .lb-rank { color:var(--text-secondary); }
.lb-entry:nth-child(3) .lb-rank { color:#CD7F32; }
.lb-avatar { width:36px; height:36px; border-radius:50%; background:var(--bg-elevated); border:1px solid var(--border-visible); display:flex; align-items:center; justify-content:center; font:700 13px var(--font-display); color:var(--text-secondary); flex-shrink:0; }
.lb-entry:nth-child(1) .lb-avatar { background:var(--gold-ghost); border-color:var(--gold-primary); color:var(--gold-primary); }
.lb-name { flex:1; font:600 14px var(--font-heading); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--text-primary); }
.lb-value { font:700 16px var(--font-mono); color:var(--gold-primary); }
.lb-label { font:400 11px var(--font-mono); color:var(--text-muted); margin-left:4px; }
.lb-you { background:var(--gold-ghost); border-left:3px solid var(--gold-primary); }