merging category and total counts

frontend/src/index.css

@@ -412,10 +412,6 @@ label span {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
-.firearms-stats {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .mini-stat {
   border-radius: 22px;
   padding: 1.2rem 1.35rem;
@@ -436,6 +432,9 @@ label span {
 .category-count-list {
   display: grid;
   gap: 0.55rem;
+  margin-top: 0.9rem;
+  padding-top: 0.9rem;
+  border-top: 1px solid rgba(171, 180, 140, 0.08);
 }
 
 .category-count-item {

frontend/src/pages/Home.tsx

@@ -983,10 +983,20 @@ export default function Home() {
         </header>
 
         {activeView !== 'settings' ? (
-          <section className={activeView === 'firearms' ? 'stage-stats firearms-stats' : 'stage-stats'}>
+          <section className="stage-stats">
             <div className="mini-stat">
               <span>{activeView === 'ammo' ? 'Ammo types' : 'Firearms'}</span>
               <strong>{activeView === 'ammo' ? ammoTypesWithRounds : data.summary.totalFirearms}</strong>
+              {activeView === 'firearms' ? (
+                <div className="category-count-list" aria-label="Firearm counts by category">
+                  {firearmCategoryCounts.map((item) => (
+                    <div className="category-count-item" key={item.category}>
+                      <span>{item.category}</span>
+                      <strong>{item.count}</strong>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
             </div>
             <div className="mini-stat">
               <span>{activeView === 'ammo' ? 'Total rounds' : 'Total firearm value'}</span>
@@ -996,19 +1006,6 @@ export default function Home() {
                   : currency.format(data.summary.firearmsInvestment)}
               </strong>
             </div>
-            {activeView === 'firearms' ? (
-              <div className="mini-stat">
-                <span>Categories</span>
-                <div className="category-count-list" aria-label="Firearm counts by category">
-                  {firearmCategoryCounts.map((item) => (
-                    <div className="category-count-item" key={item.category}>
-                      <span>{item.category}</span>
-                      <strong>{item.count}</strong>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : null}
           </section>
         ) : null}