major changes

resources/css/app.css

@@ -510,6 +510,59 @@ select:focus[data-flux-control] {
         color: white;
     }
 
+
+    .wms-desktop-topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        min-height: 4.25rem;
+        border-bottom: 1px solid rgb(228 228 231);
+        background: rgb(250 250 250 / 0.94);
+        padding: 0.75rem 1.5rem;
+        backdrop-filter: blur(14px);
+    }
+
+    .dark .wms-desktop-topbar {
+        border-bottom-color: rgb(63 63 70);
+        background: rgb(15 15 19 / 0.94);
+    }
+
+    .wms-topbar-brand {
+        display: inline-flex;
+        min-width: 0;
+        align-items: center;
+        gap: 0.75rem;
+        color: inherit;
+        text-decoration: none;
+    }
+
+    .wms-topbar-user-button {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.7rem;
+        border-radius: 999px;
+        border: 1px solid transparent;
+        padding: 0.35rem 0.45rem 0.35rem 0.85rem;
+        text-align: right;
+        transition: background 120ms ease, border-color 120ms ease;
+    }
+
+    .wms-topbar-user-button:hover {
+        border-color: rgb(228 228 231);
+        background: rgb(244 244 245);
+    }
+
+    .dark .wms-topbar-user-button:hover {
+        border-color: rgb(63 63 70);
+        background: rgb(39 39 42);
+    }
+
+    .wms-topbar-user-copy {
+        display: grid;
+        min-width: 0;
+    }
+
     .wms-mobile-header {
         display: none;
     }
@@ -568,6 +621,10 @@ select:focus[data-flux-control] {
     }
 
     @media (max-width: 1023px) {
+        .wms-desktop-topbar {
+            display: none;
+        }
+
         .wms-app-shell {
             display: block;
         }