style(sidebar): align /sidebar screen with Flutter original

Match the Dart lib/ui/sidebar/sidebar_screen.dart + profile_view.dart
exactly:
- White inner shell with 24px padding
- Back button row (arrow icon + "Back" text, no "Profile" header)
- Single "Other" section with one "Log out" row
- Drop profile card, Account/Data/Session sections, and Sign-in CTA

Match Flutter row visuals in the shared SettingsSection:
- Gray (#f5f5f5) rounded row pill on a white card
- 20px chevron, 1px rgba(61,49,74,0.5) divider
- Destructive color #ff6b6b, 14px/600 black section title

Add tokens: --color-settings-card-background, --color-settings-row-background,
--color-settings-divider, --color-chevron-icon, --color-destructive.

Wire the BlocConsumer listener equivalent: on currentUser transitioning to
null, dispatch ChatAuthStatusChanged + AuthReset and router.replace("/chat").

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/app/_components/core/settings-section.module.css

@@ -6,40 +6,44 @@
 
 .title {
   margin: 0;
-  padding: 0 var(--spacing-md);
-  font-size: var(--font-size-sm);
-  font-weight: 500;
-  color: var(--color-section-title);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+  padding: 0 var(--spacing-xs);
+  font-size: var(--font-size-md);
+  font-weight: 600;
+  color: #000000;
+  text-transform: none;
+  letter-spacing: 0;
 }
 
 .list {
   margin: 0;
   padding: 0;
   list-style: none;
-  background: var(--color-settings-card-background);
-  border-radius: var(--radius-lg);
+  background: var(--color-settings-card-background, #ffffff);
+  border-radius: var(--radius-lg, 12px);
   overflow: hidden;
 }
 
+.list > li {
+  background: var(--color-settings-row-background, #f5f5f5);
+}
+
 .row {
   display: flex;
   align-items: center;
   gap: var(--spacing-md);
   width: 100%;
-  padding: var(--spacing-md) var(--spacing-lg);
+  padding: var(--spacing-md);
   border: none;
   background: transparent;
-  color: var(--color-settings-text-primary);
-  font-size: var(--font-size-md);
+  color: #000000;
+  font-size: var(--font-size-lg);
   text-align: left;
   cursor: pointer;
   transition: background 0.15s ease;
 }
 
 .row:hover {
-  background: rgba(255, 255, 255, 0.04);
+  background: rgba(0, 0, 0, 0.04);
 }
 
 .row:focus-visible {
@@ -53,7 +57,7 @@
   justify-content: center;
   width: 24px;
   height: 24px;
-  color: var(--color-chevron-icon);
+  color: var(--color-chevron-icon, #000000);
   flex-shrink: 0;
 }
 
@@ -66,9 +70,9 @@
 }
 
 .rowTitle {
-  font-size: var(--font-size-md);
-  font-weight: 500;
-  color: var(--color-settings-text-primary);
+  font-size: var(--font-size-lg);
+  font-weight: 400;
+  color: #000000;
 }
 
 .subtitle {
@@ -83,19 +87,21 @@
 }
 
 .chevron {
-  color: var(--color-chevron-icon);
+  color: var(--color-chevron-icon, #000000);
   flex-shrink: 0;
+  width: 20px;
+  height: 20px;
 }
 
 .divider {
-  height: var(--border-light);
-  background: var(--color-settings-divider);
-  margin: 0 var(--spacing-lg);
+  height: 1px;
+  background: rgba(61, 49, 74, 0.5);
+  margin: 0 var(--spacing-md);
 }
 
 .destructive {
-  color: var(--color-destructive);
+  color: var(--color-destructive, #ff6b6b);
 }
 .destructive .rowTitle {
-  color: var(--color-destructive);
+  color: var(--color-destructive, #ff6b6b);
 }

src/app/_components/core/settings-section.tsx

@@ -55,8 +55,8 @@ export function SettingsSection({ title, items }: SettingsSectionProps) {
                 <span className={styles.trailing}>{item.trailing}</span>
               ) : null}
               <svg
-                width="16"
-                height="16"
+                width="20"
+                height="20"
                 viewBox="0 0 24 24"
                 fill="none"
                 aria-hidden="true"