/* Loading Animation */
.loading-overlay { position: fixed; inset: 0; background: rgba(255,255,255,0.95); z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; }
.loading-spinner { width: 40px; height: 40px; border: 3px solid #f5f5f7; border-top-color: #0071e3; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-text { color: #86868b; font-size: 0.9rem; }
.skeleton { background: linear-gradient(90deg, #f5f5f7 25%, #e5e5e5 50%, #f5f5f7 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-card { height: 200px; margin-bottom: 1rem; }
.skeleton-text { height: 16px; margin-bottom: 0.5rem; }
.skeleton-title { height: 24px; width: 60%; margin-bottom: 0.75rem; }

/* Empty State */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state .icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.5; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--text); }
.empty-state p { margin-bottom: 1.5rem; font-size: 0.9rem; }
.empty-state .btn { display: inline-flex; padding: 0.75rem 1.5rem; background: var(--accent); color: white; text-decoration: none; border-radius: 8px; font-weight: 500; }

/* Follow Button */
.follow-btn { padding: 0.4rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; font-size: 0.85rem; cursor: pointer; transition: all 0.2s; color: var(--text); }
.follow-btn:hover { border-color: var(--accent); color: var(--accent); }
.follow-btn.following { background: var(--accent); color: white; border-color: var(--accent); }

/* Share Poster */
.share-card { background: var(--surface); border-radius: 16px; padding: 1.5rem; max-width: 400px; text-align: center; }
.share-poster { background: linear-gradient(135deg, #0071e3, #5856d6); border-radius: 12px; padding: 2rem 1.5rem; color: white; margin-bottom: 1rem; }
.share-poster h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.share-poster p { font-size: 0.9rem; opacity: 0.9; }

/* Share Poster Generator */
.share-modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; padding: 1rem; }
.share-modal.show { display: flex; }
.share-modal-content { background: white; border-radius: 16px; padding: 1.5rem; max-width: 400px; width: 100%; }
.share-preview { background: linear-gradient(135deg, #0071e3, #5856d6); border-radius: 12px; padding: 2rem 1.5rem; color: white; text-align: center; margin-bottom: 1rem; }
.share-preview h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.share-preview p { font-size: 0.9rem; opacity: 0.9; margin-bottom: 1rem; }
.share-qr { width: 120px; height: 120px; background: white; margin: 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 3rem; }
.share-actions { display: flex; gap: 0.75rem; }
.share-actions button { flex: 1; padding: 0.75rem; border-radius: 8px; font-size: 0.9rem; cursor: pointer; border: none; font-weight: 500; }
.share-wechat { background: #07c160; color: white; }
.share-moments { background: #ff9500; color: white; }
.share-copy { background: #f5f5f7; color: #1d1d1f; }