feat: add DiceBear avatar proxy with style picker on signup and profile pages

Implement avatar generation via local proxy at `/avatar/{style}/{seed}` that fetches from DiceBear 9.x API with in-memory caching and fallback to initial-based SVG. Add avatar style selection dropdown to signup form and profile edit page, storing `avatar_style` in user records. Update comment rendering to support nested threading with parent-child relationships in post view. Add `avatar_url` and `avatar_styles` template globals, register avatar router in main app, and include avatar CSS classes for rounded image display.

devplacepy/static/css/feed.css

@@ -8,6 +8,10 @@
 .feed-sidebar {
     position: sticky;
     top: calc(var(--nav-height) + 1rem);
+    background: var(--bg-card);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    padding: 1rem;
 }
 
 .feed-sidebar h3 {
@@ -22,7 +26,7 @@
 .feed-categories {
     display: flex;
     flex-direction: column;
-    gap: 0.25rem;
+    gap: 0.125rem;
 }
 
 .feed-category {
@@ -37,7 +41,7 @@
 }
 
 .feed-category:hover {
-    background: var(--bg-card);
+    background: var(--bg-card-hover);
     color: var(--text-primary);
 }
 
@@ -76,6 +80,7 @@
 
 .feed-nav-btn:hover {
     color: var(--text-primary);
+    background: var(--bg-card-hover);
 }
 
 .feed-nav-btn.active {
@@ -89,6 +94,19 @@
     gap: 0.25rem;
 }
 
+.feed-nav-actions button {
+    color: var(--text-muted);
+    padding: 0.375rem 0.5rem;
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    transition: all 0.2s;
+}
+
+.feed-nav-actions button:hover {
+    color: var(--text-primary);
+    background: var(--bg-card-hover);
+}
+
 .feed-posts {
     display: flex;
     flex-direction: column;
@@ -99,12 +117,13 @@
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    padding: 1rem;
-    transition: border-color 0.2s;
+    padding: 1.25rem;
+    transition: all 0.2s;
 }
 
 .post-card:hover {
     border-color: var(--border-light);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .post-header {
@@ -114,21 +133,29 @@
     margin-bottom: 0.75rem;
 }
 
+.post-author-wrap {
+    display: flex;
+    flex-direction: column;
+    line-height: 1.3;
+}
+
 .post-author {
     font-weight: 600;
     font-size: 0.875rem;
+    color: var(--text-primary);
 }
 
 .post-author-role {
-    font-size: 0.75rem;
+    font-size: 0.6875rem;
     color: var(--text-muted);
     font-weight: 400;
 }
 
 .post-time {
-    font-size: 0.75rem;
+    font-size: 0.6875rem;
     color: var(--text-muted);
     margin-left: auto;
+    white-space: nowrap;
 }
 
 .post-topic {
@@ -140,14 +167,19 @@
     font-weight: 700;
     margin-bottom: 0.5rem;
     color: var(--text-primary);
+    line-height: 1.3;
 }
 
 .post-content {
     font-size: 0.875rem;
     color: var(--text-secondary);
-    line-height: 1.6;
+    line-height: 1.65;
     margin-bottom: 0.75rem;
     word-break: break-word;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
 }
 
 .post-actions {
@@ -159,14 +191,18 @@
 }
 
 .post-action-btn {
-    display: flex;
+    display: inline-flex;
     align-items: center;
     gap: 0.375rem;
-    padding: 0.375rem 0.625rem;
+    padding: 0.375rem 0.75rem;
     border-radius: var(--radius);
     font-size: 0.8125rem;
+    font-weight: 500;
     color: var(--text-muted);
     transition: all 0.2s;
+    background: none;
+    border: none;
+    cursor: pointer;
 }
 
 .post-action-btn:hover {
@@ -174,10 +210,15 @@
     color: var(--text-secondary);
 }
 
-.post-action-btn.voted {
+.post-action-btn.voted,
+.post-action-btn.vote-up {
     color: var(--accent);
 }
 
+.post-action-btn.share {
+    margin-left: auto;
+}
+
 .feed-right {
     position: sticky;
     top: calc(var(--nav-height) + 1rem);
@@ -190,7 +231,7 @@
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    padding: 1rem;
+    padding: 1.25rem;
 }
 
 .daily-topic-label {
@@ -205,12 +246,14 @@
 .daily-topic-card h4 {
     font-size: 0.875rem;
     margin-bottom: 0.375rem;
+    line-height: 1.4;
 }
 
 .daily-topic-card p {
     font-size: 0.8125rem;
     color: var(--text-secondary);
-    margin-bottom: 0.5rem;
+    line-height: 1.5;
+    margin-bottom: 0.75rem;
 }
 
 .daily-topic-card .topic-links {
@@ -227,7 +270,7 @@
     background: var(--bg-card);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
-    padding: 1rem;
+    padding: 1.25rem;
 }
 
 .community-stats h3 {
@@ -242,16 +285,28 @@
 .stat-row {
     display: flex;
     justify-content: space-between;
+    align-items: center;
     padding: 0.375rem 0;
     font-size: 0.8125rem;
 }
 
+.stat-row:not(:last-child) {
+    border-bottom: 1px solid var(--border);
+    margin-bottom: 0.25rem;
+    padding-bottom: 0.5rem;
+}
+
 .stat-row .label {
     color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
 }
 
 .stat-row .value {
-    font-weight: 600;
+    font-weight: 700;
+    color: var(--text-primary);
+    font-size: 0.9375rem;
 }
 
 .feed-fab {
@@ -267,14 +322,17 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow: var(--shadow-lg);
+    box-shadow: 0 4px 16px rgba(255, 107, 53, 0.4);
     transition: all 0.2s;
     z-index: 100;
+    border: none;
+    cursor: pointer;
 }
 
 .feed-fab:hover {
     background: var(--accent-hover);
     transform: scale(1.05);
+    box-shadow: 0 6px 20px rgba(255, 107, 53, 0.5);
 }
 
 @media (max-width: 1024px) {