.joyin-social-wrapper { max-width: 600px; margin: 20px auto; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #333; }
.joyin-composer { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.joyin-composer-header h3 { margin: 0 0 15px 0; font-size: 16px; font-weight: 600; color: #222; }
.joyin-post-form { display: flex; flex-direction: column; }
.joyin-post-textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 6px; font-family: inherit; font-size: 14px; resize: vertical; margin-bottom: 12px; }
.joyin-post-textarea:focus { outline: none; border-color: #007cba; box-shadow: 0 0 0 3px rgba(0, 124, 186, 0.1); }
.joyin-composer-footer { display: flex; justify-content: space-between; align-items: center; }
.joyin-char-count { font-size: 12px; color: #666; }
.joyin-post-button { padding: 10px 24px; background: #007cba; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 14px; transition: background 0.2s; }
.joyin-post-button:hover { background: #005a87; }
.joyin-post-button:disabled { opacity: 0.6; cursor: not-allowed; }
.joyin-login-prompt { background: #f9f9f9; border: 1px solid #ddd; border-radius: 8px; padding: 20px; text-align: center; }
.joyin-login-link { color: #007cba; text-decoration: none; font-weight: 600; }
.joyin-login-link:hover { text-decoration: underline; }
.joyin-feed { min-height: 200px; }
.joyin-feed-loader { text-align: center; padding: 40px 20px; color: #666; }
.joyin-no-posts { text-align: center; padding: 40px 20px; color: #999; font-style: italic; }
.joyin-post { background: white; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); animation: slideIn 0.3s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.joyin-post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f0f0f0; }
.joyin-post-author { display: flex; flex-direction: column; }
.joyin-post-author strong { font-size: 15px; margin-bottom: 4px; }
.joyin-post-date { font-size: 12px; color: #999; }
.joyin-delete-post-button { background: none; border: none; color: #999; font-size: 24px; cursor: pointer; padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; transition: color 0.2s; }
.joyin-delete-post-button:hover { color: #d32f2f; }
.joyin-post-content { font-size: 14px; line-height: 1.6; margin-bottom: 12px; word-break: break-word; white-space: pre-wrap; }
.joyin-post-actions { display: flex; gap: 8px; font-size: 13px; }
.joyin-post-actions button { padding: 6px 12px; border: 1px solid #ddd; background: white; border-radius: 4px; cursor: pointer; font-size: 13px; transition: all 0.2s; flex: 1; }
.joyin-post-actions button:hover { background: #f5f5f5; border-color: #999; }
.joyin-like-button { color: #666; }
.joyin-unlike-button { color: #e74c3c; border-color: #e74c3c; }
.joyin-comment-button { color: #007cba; }
.joyin-post-comments { margin-top: 12px; padding: 12px; background: #f9f9f9; border-radius: 6px; }
.joyin-no-comments { font-size: 12px; color: #999; margin: 0; text-align: center; }
.joyin-comments-list { margin-bottom: 12px; max-height: 300px; overflow-y: auto; }
.joyin-comment { font-size: 13px; padding: 8px; background: white; border-radius: 4px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.joyin-comment strong { margin-right: 6px; }
.joyin-delete-comment { background: none; border: none; color: #999; cursor: pointer; font-size: 16px; padding: 0 4px; }
.joyin-delete-comment:hover { color: #d32f2f; }
.joyin-comment-form { display: flex; gap: 8px; margin-top: 12px; }
.joyin-comment-input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; }
.joyin-comment-input:focus { outline: none; border-color: #007cba; }
.joyin-submit-comment { padding: 8px 16px; background: #007cba; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 12px; font-weight: 600; }
.joyin-submit-comment:hover { background: #005a87; }
.joyin-feed-pagination { text-align: center; margin-top: 20px; }
.joyin-load-more-button { padding: 12px 32px; background: #f0f0f0; color: #333; border: 1px solid #ddd; border-radius: 6px; cursor: pointer; font-weight: 600; transition: background 0.2s; }
.joyin-load-more-button:hover { background: #e0e0e0; }
.joyin-notification { position: fixed; top: 20px; right: 20px; padding: 16px 20px; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 9999; font-weight: 600; animation: slideInRight 0.3s ease-out; }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
.joyin-notification-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.joyin-notification-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
@media (max-width: 600px) { .joyin-social-wrapper { margin: 10px; } .joyin-post { padding: 12px; } .joyin-post-actions { flex-direction: column; } .joyin-post-actions button { flex: auto; } .joyin-notification { left: 10px; right: 10px; top: auto; bottom: 20px; } }
@media (prefers-color-scheme: dark) { .joyin-social-wrapper { color: #e0e0e0; } .joyin-composer, .joyin-post { background: #1e1e1e; border-color: #333; } .joyin-post-textarea, .joyin-comment-input { background: #2d2d2d; color: #e0e0e0; border-color: #444; } .joyin-post-textarea:focus, .joyin-comment-input:focus { border-color: #4a9eff; } .joyin-post-actions button { background: #2d2d2d; border-color: #444; color: #e0e0e0; } .joyin-post-actions button:hover { background: #3a3a3a; border-color: #555; } .joyin-post-comments { background: #2d2d2d; } .joyin-comment { background: #262626; } }