As you are probably aware - the 'Cards View' is new and constantly under development. So it's inevitable that alterations/modifications to code will occur.

The image shows you are currently using the 'Card View' in version 115.15.0

It would be helpful if you could post the content of your 'userChrome.css' file, so I can copy what you are currently using. Then it's possible to replicate your current state.

If you choose to use 128*: 'Tools' > 'Developer Tools' > 'Developer Toolbox' Alllow connection This can be used to identify the areas which you want to tweak. It can be used to help you modify the 'userChrome.css'.

Here is some card css for 128 that you can modify to your liking:

/* bold sender in cards view */
.sender {
        font-weight: bold !important;
	color: blue !important;
	font-size: 14px !important;
        }

/* indent card subject */
.thread-card-subject-container :is(.subject){
	margin-left: 10px !important;
	font-size: 13px !important;
	color: darkred !important;
}

/* card date */
.date{
	font-size: 12px !important;
	color: darkred !important;
}


/* unread card sender */
tr[is="thread-card"][data-properties~="unread"] :is(.sender) {
      color: black !important;
      font-weight: bold !important;
      font-size: 14px !important;
   }

https://support.mozilla.org/en-US/questions/1447610

@Toad-Hall, thanks for your reply.

I'm not seeing a way to attach a css (or text) file, only images. So I'm pasting in the sections of CSS from my userChrome.css, pertaining to the Folder pane and the Threads pane:

UPDATE: Looking at the output, I see that this website interpreted id elements preceded by a hash sign which are at the start of a line, and rendered them as numbered lists, placing a number, a period, and a space at the start of the line in place of the hash sign.

/*------------------------------------

           Folder Pane
------------------------------------*/

1. folderPane li:not(.children), #folderPane li + li.children,
2. folderPane li.children > .container + ul[role="group"] > li.children {

 margin-top: -0.7em !important;

}

1. folderPane .mode-container + ul[role="group"] > li.children {

 margin-top: -0.6em !important;

}

1. folderPane li.unread.selected[is="folder-tree-row"][aria-selected="true"] .folder-count-badge.unread-count { color: white !important; }

/*------------------------------------

           Thread Pane
------------------------------------*/

.tabmail-tab[linkedpanel="mail3PaneTab1"] .tab-background {background-color: rgba(250,229,179,0.5) !important;}

.tabmail-tab[linkedpanel="mail3PaneTab1"] {

 color: black !important;
 font-weight: bold !important;

}

.tabmail-tab[visuallyselected="true"] {text-decoration: underline !important;}

.thread-card-container {

 padding-top: 1px !important;
 padding-bottom: 1px !important;

}

table[is="tree-view-table"] { }

table[is="tree-view-table"] .sender {

 font-style: italic !important;
 font-weight: 500;
 color: rgb(96,0,96) !important;
 font-size: 108% !important;
 display: inline-block !important;
 margin: 3px 0 -1px 0 !important;

}

 table[is="tree-view-table"] [data-properties~="unread"] .thread-card-container .sender, 
 table[is="tree-view-table"] [data-properties~="new"] .thread-card-container .sender {
   font-weight: 900 !important;
 }

tr[is="thread-card"].selected .sender {

 color: #fdf !important;

}

.thread-card-subject-container {

 margin-inline-start: 24px !important;

}

.thread-card-subject-container .subject {

 font-size: 1.25rem !important;
 font-weight: 600 !important;
 padding-bottom: 2px !important;
 }

1. threadTree [data-properties~="unread"] .thread-card-container .subject,
2. threadTree [data-properties~="new"] .thread-card-container .subject {

 font-style: italic !important;
 font-weight: 800 !important;
 color: inherit !important;

}

1. threadTree [data-properties~="new"] .thread-card-container .subject {

 background-color: rgba(19, 115, 217, 0.1) !important;
 border-top: 1px solid rgba(19, 115, 217, 0.3) !important;
 border-left: 1px solid rgba(19, 115, 217, 0.3) !important;
 margin-top: -1px !important;
 padding-left: 2px !important;
 border-bottom-right-radius: 7px !important;

}

tr[data-properties~="Tm"] {

 --tag-color: #331133 !important;
 color: #331133 !important;

} tr[data-properties~="Tg"] {

 --tag-color: #072207 !important;
 color: #072207 !important;

}

tr[is="thread-card"]:nth-child(6n+1) .thread-card-container {

 border-top: 4px solid #888 !important;
 border-top-left-radius: 14px !important;

}

tr[data-properties~="unread"] .thread-card-container::after {

 position:absolute !important;
 content: url("chrome://messenger/skin/icons/new/compact/unread.svg") !important;
 color: #4F6 !important;
 inset-inline-start: 12px !important;
 inset-block-start: 8px !important;

}

tr[is="thread-card"]:first-child .thread-card-container {

 border-top: initial !important;

}

 tr:nth-child(6n+1)[data-properties~="unread"] .thread-card-container::after {
   inset-block-start: 10px !important;
 }

   tr:first-child[data-properties~="unread"] .thread-card-container::after {
     inset-block-start: 8px !important;
   }

.thread-card-row > img.state {

 transform: scale(1.25) !important;

}

table[is="tree-view-table"] td div:not(.recipient-avatar) {

 overflow: visible !important;

}

tr.children[is="thread-card"]:not([data-properties="dummy"]) > td, tr.collapsed[is="thread-card"]:not([data-properties="dummy"]) > td {

 padding-left: 27px !important;

}

tbody:has(> tr[data-properties="dummy"]) tr.children[is="thread-card"]:not([data-properties="dummy"]) > td, tbody:has(> tr[data-properties="dummy"]) tr.collapsed[is="thread-card"]:not([data-properties="dummy"]) > td {

 padding-left: 0 !important;

}

tr[is="thread-card"][data-properties="dummy"] > td {

 left: -26px !important;

}

1. threadTree tr[data-properties~="junk"] .subject, #threadTree tr[data-properties~="junk"][data-properties~="unread"] .subject {

 color: #e27f2e !important;

}

1. threadTree [data-properties~="new"] .thread-card-container :is(.subject, .date) {

 /* font-weight: 600 !important; */

}

1. threadTree tbody [data-properties~="imapdeleted"] :is(td) .subject {

 text-decoration: none !important;

}

tr[is="thread-card"][data-properties~="flagged"] {

 background-color: rgb(250,229,179) !important;

}

 tr[is="thread-card"][data-properties~="flagged"] + tr[is="thread-card"][data-properties~="flagged"] {
   box-shadow: 0 2px 0 rgb(174,137,110) inset !important;
 }

tr.selected[is="thread-card"][data-properties~="flagged"] :is(.subject, .date) {

 color:inherit !important;

}

tr[is="thread-card"][data-properties~="flagged"]:hover {

 background-color: var(--listbox-selected-bg) !important;

}

 [is="tree-view-table-body"]:focus > .selected[data-properties~="flagged"] {
   background-color: rgb(174,137,110) !important;
 }

 [is="tree-view-table-body"] > .hover[data-properties~="flagged"] {
   background-color: rgba(174,137,110,0.1) !important;
 }

tr[data-properties~="Txnote"] .subject, .thread-card-subject-container:has(> .tag-icon[title~="XNote"]) > .subject, [aria-label~="XNote"] .subject {

 background-color: #FFCC00 !important;
 color: inherit !important;
 padding-left: 3px !important;

}

1. threadCols[wlapi_autoinjected="AddOnNS43"] {

 display: none;

}

1. threadPaneHeaderBar > .list-header-bar-container-start {

 margin-left: 7px;

}

.unified-toolbar {

 position:relative;
 left: 14px;
 top: 3px;

}

.unified-toolbar .search-bar {

 max-width: 300px !important;
 position: relative;
 top: 7px;

}

.live-content{

 position: relative;
 opacity: 1 !important;

}

.live-content .button:hover {

 transform-origin: 0 center;
 transform: scale(1.35);
 position: relative;
 z-index:100000;
 background-color: rgb(228, 228, 231) !important;

}

.live-content .button-label {

 font-weight: bold !important;
 font-stretch: 50% !important;
 font-size: 14.5px !important;

}

.live-content .button-label[data-l10n-id="toolbar-write-message-label"]{

 visibility: hidden;
 font-size: 0.0001px;
 margin-right: -2.5em;

}

 .live-content .button-label[data-l10n-id="toolbar-write-message-label"]:before {
   visibility: visible;
   display: inline-block;
   font-size: 14px !important;
   content: "New Message";
 }
 .live-content .button-label[data-l10n-id="toolbar-write-message-label"] {
   min-width:7.5em;
 }

.unified-toolbar > li {

 display: inline-block !important;
 margin-top: -4px !important;
 margin-right: -16px !important;
 aria-pressed: false !important;

}

 .unified-toolbar > li.search-bar {margin-right: 0 !important;}

 .unified-toolbar > li.spacer {
   display: block !important;
   max-width: 50px;
 }

.extension-action .prefer-icon-only .button-label {

 display: block !important;

}

.button.check-button[aria-pressed="true"]::before {

 background-color: rgb(175,0,175) !important;
 border-color: rgb(96,0,96) !important;

}

.tabmail-tab[visuallyselected="true"] {

 font-weight: bold !important;
 overflow-y: visible !important;

}

.tab-line[selected="true"] {

 background-color: var(--toolbar-color) !important;
 position: relative;
 top: -6px;

}

Of course, the above CSS is configured based on the assumption of a few other preferences set within the interface, such as UI density, the font face and size settings, etc.

Here is some code that should get you on the right track.

/* bold sender in cards view */
.sender {
	font-style: italic !important;
 	font-weight: 500;
	 color: rgb(96,0,96) !important;
	 font-size: 108% !important;
 	display: inline-block !important;
 	margin: 3px 0 -1px 0 !important;
}

/*indent entire section leaving space on far left */
.card-container {
	 margin-inline-start: 24px !important;
}


/* indent card subject */
.thread-card-subject-container :is(.subject){
	font-size: 1.25rem !important;
	font-weight: 600 !important;
 	padding-bottom: 2px !important;
}

tr[is="thread-card"][data-properties~="new"] :is(.subject) {
	background-color: rgba(19, 115, 217, 0.1) !important;
 	border-top: 1px solid rgba(19, 115, 217, 0.3) !important;
 	border-left: 1px solid rgba(19, 115, 217, 0.3) !important;
 	margin-top: -1px !important;
 	padding-left: 2px !important;
 	border-bottom-right-radius: 7px !important;
}

/* unread card sender */
tr[is="thread-card"][data-properties~="unread"] :is(.sender),
tr[is="thread-card"][data-properties~="new"] :is(.sender) {
     font-weight: 900 !important;
   }

/* line to denote section x number of emails */
tr[is="thread-card"]:nth-child(6n+1) .card-container {
 border-top: 4px solid #888 !important;
 border-top-left-radius: 14px !important;
}