Add avatars, profiles, and auth flows

resources/js/index.css

@@ -7,6 +7,7 @@
   --bb-gold: #e4a634;
   --bb-peach: #f4c7a3;
   --bb-border: #e0d7c7;
+  --bb-shell-max: 1880px;
 }
 
 * {
@@ -200,7 +201,7 @@ a {
 
 .bb-post-row {
   display: grid;
-  grid-template-columns: 220px 1fr;
+  grid-template-columns: 260px 1fr;
   border-top: 1px solid var(--bb-border);
 }
 
@@ -218,15 +219,22 @@ a {
 }
 
 .bb-post-avatar {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
+  width: 150px;
+  height: 150px;
+  border-radius: 12px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: rgba(255, 255, 255, 0.06);
   color: var(--bb-accent, #f29b3f);
   font-size: 1.1rem;
+  overflow: hidden;
+}
+
+.bb-post-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .bb-post-author-name {
@@ -234,9 +242,62 @@ a {
   color: var(--bb-accent, #f29b3f);
 }
 
+.bb-post-author-role {
+  color: var(--bb-ink-muted);
+  font-size: 0.9rem;
+  margin-top: -0.2rem;
+}
+
+.bb-post-author-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.15rem 0.6rem;
+  border-radius: 6px;
+  background: linear-gradient(135deg, #f4f4f4, #c9c9c9);
+  color: #7b1f2a;
+  font-weight: 700;
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  border: 1px solid rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+  width: fit-content;
+}
+
 .bb-post-author-meta {
   font-size: 0.85rem;
   color: var(--bb-ink-muted);
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  margin-top: 0.3rem;
+}
+
+.bb-post-author-stat {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+
+.bb-post-author-label {
+  color: var(--bb-ink-muted);
+  font-weight: 600;
+}
+
+.bb-post-author-value {
+  color: var(--bb-ink);
+}
+
+.bb-post-author-value i {
+  color: var(--bb-accent, #f29b3f);
+  font-size: 1.05rem;
+}
+
+.bb-post-author-contact .bb-post-author-value {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
 }
 
 .bb-post-content {
@@ -322,6 +383,11 @@ a {
     flex-direction: row;
     align-items: center;
   }
+
+  .bb-post-avatar {
+    width: 80px;
+    height: 80px;
+  }
 }
 
 .bb-forum-row {
@@ -749,8 +815,9 @@ a {
   font-weight: 600;
 }
 
-.bb-portal-shell {
-  max-width: 1400px;
+.container.bb-portal-shell,
+.container.bb-shell-container {
+  max-width: var(--bb-shell-max);
 }
 
 .bb-portal-banner {
@@ -1189,6 +1256,56 @@ a {
   margin-bottom: 0.8rem;
 }
 
+.bb-avatar-preview {
+  width: 150px;
+  height: 150px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bb-accent, #f29b3f);
+  font-size: 2rem;
+  overflow: hidden;
+}
+
+.bb-avatar-preview img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bb-profile {
+  display: flex;
+  gap: 1.2rem;
+  align-items: center;
+}
+
+.bb-profile-avatar {
+  width: 150px;
+  height: 150px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.06);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--bb-accent, #f29b3f);
+  font-size: 2rem;
+  overflow: hidden;
+}
+
+.bb-profile-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.bb-profile-name {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--bb-ink);
+}
+
 .bb-portal-list {
   list-style: none;
   padding: 0;