Update header styles

frontend/src/App.tsx

@@ -3,6 +3,7 @@
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import type { JSX } from 'react';
+import { LogOut, User } from 'lucide-react';
 
 import ActionModal from './components/ActionModal';
 import DocumentGrid from './components/DocumentGrid';
@@ -739,11 +740,17 @@ export default function App(): JSX.Element {
   return (
     <main className="app-shell">
       <header className="topbar">
-        <div>
+        <div className="topbar-inner">
+          <div className="topbar-brand">
             <h1>LedgerDock</h1>
             <p>Document command deck for OCR, routing intelligence, and controlled metadata ops.</p>
+            <p className="topbar-auth-status">
+              <User className="topbar-user-icon" aria-hidden="true" />
+              You are currently signed in as <span className="topbar-current-username">{authUser?.username}</span>
+            </p>
           </div>
           <div className="topbar-controls">
+            <div className="topbar-primary-row">
               <div className="topbar-nav-group">
                 <button
                   type="button"
@@ -775,13 +782,13 @@ export default function App(): JSX.Element {
                   </button>
                 )}
               </div>
-
+              <button
-          <div className="topbar-auth-group">
+                type="button"
-            <span className="auth-user-badge">
+                className="secondary-action topbar-icon-action"
-              {authUser?.username} ({authUser?.role})
+                onClick={() => void handleLogout()}
-            </span>
+                aria-label="Sign out"
-            <button type="button" className="secondary-action" onClick={() => void handleLogout()}>
+              >
-              Sign Out
+                <LogOut className="topbar-signout-icon" aria-hidden="true" />
               </button>
             </div>
 
@@ -802,6 +809,7 @@ export default function App(): JSX.Element {
               </div>
             )}
           </div>
+        </div>
       </header>
 
       {error && <p className="error-banner">{error}</p>}

frontend/src/styles.css

@@ -4,7 +4,7 @@
 .app-shell {
   width: min(1820px, 100% - 2rem);
   margin: 0 auto;
-  padding: var(--space-3) 0 var(--space-4);
+  padding: 0 0 var(--space-4);
   display: grid;
   gap: var(--space-3);
 }
@@ -70,18 +70,33 @@
 
 .topbar {
   position: sticky;
-  top: var(--space-2);
+  top: 0;
   z-index: 50;
+  left: 0;
+  width: 100vw;
+  margin-left: calc(50% - 50vw);
+  margin-right: calc(50% - 50vw);
+  padding: 0;
+  border: 1px solid var(--color-border-strong);
+  border-radius: 0;
+  background: linear-gradient(180deg, rgba(28, 42, 63, 0.96) 0%, rgba(20, 30, 47, 0.96) 100%);
+  box-shadow: var(--shadow-soft);
+  backdrop-filter: blur(10px);
+}
+
+.topbar-inner {
+  width: min(1820px, 100% - 2rem);
+  margin: 0 auto;
   display: grid;
   grid-template-columns: minmax(260px, 1fr) auto;
   gap: var(--space-3);
   align-items: start;
   padding: var(--space-3);
-  border: 1px solid var(--color-border-strong);
+}
-  border-radius: var(--radius-lg);
+
-  background: linear-gradient(180deg, rgba(28, 42, 63, 0.96) 0%, rgba(20, 30, 47, 0.96) 100%);
+.topbar-brand {
-  box-shadow: var(--shadow-soft);
+  display: grid;
-  backdrop-filter: blur(10px);
+  gap: 0;
 }
 
 .topbar h1 {
@@ -97,14 +112,40 @@
   font-size: 0.85rem;
 }
 
+.topbar-auth-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.45rem;
+  color: var(--color-text-muted);
+  font-size: 0.76rem;
+}
+
+.topbar-user-icon {
+  width: 0.85rem;
+  height: 0.85rem;
+}
+
+.topbar-current-username {
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: 0.76rem;
+}
+
 .topbar-controls {
   display: grid;
   gap: var(--space-2);
   justify-items: end;
 }
 
+.topbar-primary-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+}
+
 .topbar-nav-group,
-.topbar-auth-group,
 .topbar-document-group,
 .topbar-settings-group {
   display: flex;
@@ -113,20 +154,19 @@
   gap: var(--space-2);
 }
 
-.topbar-auth-group {
+.topbar-icon-action {
-  align-items: center;
+  width: 2.05rem;
-}
+  min-height: 2.05rem;
-
+  padding: 0;
-.auth-user-badge {
   display: inline-flex;
   align-items: center;
-  padding: 0.28rem 0.5rem;
+  justify-content: center;
   border-radius: var(--radius-xs);
-  border: 1px solid rgba(108, 135, 184, 0.7);
+}
-  background: rgba(17, 28, 44, 0.85);
+
-  color: var(--color-text-muted);
+.topbar-signout-icon {
-  font-size: 0.74rem;
+  width: 0.92rem;
-  font-family: var(--font-mono);
+  height: 0.92rem;
 }
 
 .topbar-document-group .upload-actions-inline {
@@ -1308,6 +1348,12 @@ button:disabled {
   }
 
   .topbar {
+    width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+  }
+
+  .topbar-inner {
     grid-template-columns: 1fr;
   }
 
@@ -1316,10 +1362,16 @@ button:disabled {
   }
 
   .topbar-nav-group,
+  .topbar-primary-row,
   .topbar-document-group,
   .topbar-settings-group {
     justify-content: flex-start;
   }
+
+  .topbar-primary-row {
+    justify-content: space-between;
+    width: 100%;
+  }
 }
 
 @media (max-width: 1040px) {
@@ -1404,12 +1456,14 @@ button:disabled {
 
 @media (max-width: 560px) {
   .topbar-nav-group,
+  .topbar-primary-row,
   .topbar-document-group,
   .topbar-settings-group {
     width: 100%;
   }
 
   .topbar-nav-group button,
+  .topbar-primary-row button,
   .topbar-document-group button,
   .topbar-settings-group button {
     flex: 1;