убрал лишние элементы в боковом меню, сделал компактный список и компактные плитки еще более компактными

index.html

@@ -34,15 +34,9 @@
             ⚙
           </button>
 
-          <p class="eyebrow">Infrastructure map</p>
+          <p class="eyebrow" id="page-title">Панель экосистемы</p>
-          <h1 id="page-title">Панель экосистемы</h1>
-          <p class="lead">
-            Единая точка входа в пользовательские, административные,
-            мониторинговые и инфраструктурные интерфейсы.
-          </p>
 
           <label class="search-field">
-            <span>Поиск</span>
             <input
               type="search"
               placeholder="Grafana, S3, журнал, сервер..."
@@ -51,25 +45,6 @@
             />
           </label>
 
-          <section class="overview" aria-label="Сводка">
-            <div>
-              <span data-total-sections>0</span>
-              <p>раздела</p>
-            </div>
-            <div>
-              <span data-total-groups>0</span>
-              <p>подразделов</p>
-            </div>
-            <div>
-              <span data-total-items>0</span>
-              <p>элементов</p>
-            </div>
-            <div>
-              <span data-visible-items>0</span>
-              <p>найдено</p>
-            </div>
-          </section>
-
           <nav class="nav-tree" aria-label="Дерево навигации" data-nav-tree></nav>
           </div>
         </aside>

script.js

@@ -154,11 +154,6 @@ const accentButtons = document.querySelectorAll("[data-accent]");
 const showNumbersInput = document.querySelector("[data-show-numbers]");
 const emptyTemplate = document.querySelector("#empty-template");
 
-const totals = calculateTotals(ecosystemSections);
-document.querySelector("[data-total-sections]").textContent = totals.sections;
-document.querySelector("[data-total-groups]").textContent = totals.groups;
-document.querySelector("[data-total-items]").textContent = totals.items;
-
 renderNavigationTree();
 applyPreferences(preferences);
 renderCatalog();
@@ -276,7 +271,6 @@ function renderCatalog() {
     catalog.append(emptyTemplate.content.cloneNode(true));
   }
 
-  document.querySelector("[data-visible-items]").textContent = visibleItems;
 }
 
 function createSectionElement(section) {
@@ -519,18 +513,6 @@ function setActiveButton(buttons, key, value) {
   });
 }
 
-function calculateTotals(sections) {
-  return sections.reduce(
-    (total, section) => {
-      total.sections += 1;
-      total.groups += section.groups.length;
-      total.items += section.groups.reduce((sum, group) => sum + group.items.length, 0);
-      return total;
-    },
-    { sections: 0, groups: 0, items: 0 },
-  );
-}
-
 function normalize(value) {
   return value.toLowerCase().replaceAll("ё", "е").trim();
 }

styles.css

@@ -102,14 +102,14 @@ a {
 }
 
 .shell {
-  width: min(1320px, calc(100% - 32px));
+  width: min(1560px, calc(100% - 28px));
   margin: 0 auto;
   padding: 20px 0;
 }
 
 .app-layout {
   display: grid;
-  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
+  grid-template-columns: minmax(320px, 390px) minmax(0, 1fr);
   gap: 12px;
   align-items: start;
 }
@@ -153,14 +153,6 @@ a {
   overflow: auto;
 }
 
-.side-panel h1 {
-  font-size: clamp(1.65rem, 2.4vw, 2.45rem);
-}
-
-.side-panel .lead {
-  font-size: 0.9rem;
-}
-
 .hero-content::before {
   content: "";
   position: absolute;
@@ -183,28 +175,12 @@ a {
 .item-number {
   margin: 0;
   color: var(--accent);
-  font-size: 0.78rem;
+  font-size: 0.82rem;
   font-weight: 800;
   letter-spacing: 0.14em;
   text-transform: uppercase;
 }
 
-h1 {
-  max-width: 840px;
-  margin: 4px 0 0;
-  font-size: clamp(1.9rem, 4.4vw, 3.7rem);
-  line-height: 0.98;
-  letter-spacing: -0.07em;
-}
-
-.lead {
-  max-width: 740px;
-  margin: 0;
-  color: var(--muted);
-  font-size: clamp(0.9rem, 1.25vw, 1rem);
-  line-height: 1.5;
-}
-
 html:not([data-show-numbers="true"]) .section-number,
 html:not([data-show-numbers="true"]) .group-number,
 html:not([data-show-numbers="true"]) .item-number {
@@ -314,15 +290,27 @@ html:not([data-show-numbers="true"]) .item-number {
   display: grid;
   gap: 6px;
   max-width: 720px;
+  position: relative;
 }
 
-.search-field span,
 .control-group > span {
   color: var(--muted);
   font-size: 0.82rem;
   font-weight: 800;
 }
 
+.search-field::after {
+  content: "⌕";
+  position: absolute;
+  right: 11px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--accent);
+  font-size: 1.05rem;
+  font-weight: 900;
+  pointer-events: none;
+}
+
 .search-field input {
   width: 100%;
   min-height: 38px;
@@ -331,7 +319,7 @@ html:not([data-show-numbers="true"]) .item-number {
   background: var(--surface);
   color: var(--text);
   outline: none;
-  padding: 0 12px;
+  padding: 0 34px 0 12px;
   transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
 }
 
@@ -490,40 +478,6 @@ html:not([data-show-numbers="true"]) .item-number {
   transform: scale(1.05);
 }
 
-.overview {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1px;
-  max-width: 620px;
-  margin-top: 0;
-  border: 1px solid var(--border);
-  border-radius: 16px;
-  background: rgba(255, 255, 255, 0.035);
-  overflow: hidden;
-}
-
-.overview div {
-  padding: 8px 10px;
-  background: rgba(255, 255, 255, 0.035);
-}
-
-.overview span {
-  display: block;
-  font-size: clamp(1rem, 1.8vw, 1.35rem);
-  font-weight: 850;
-  line-height: 1;
-  letter-spacing: -0.06em;
-}
-
-.overview p {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-weight: 700;
-  font-size: 0.68rem;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
-}
-
 .nav-tree {
   display: grid;
   gap: 2px;
@@ -648,7 +602,7 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .tree-node small {
-  color: var(--muted);
+  color: var(--accent);
   font-size: 0.68rem;
   font-weight: 800;
 }
@@ -879,7 +833,7 @@ html:not([data-show-numbers="true"]) .item-number {
 
 .item-type {
   margin: 0;
-  color: var(--muted);
+  color: var(--accent);
   font-size: 0.9rem;
   font-weight: 750;
 }
@@ -962,11 +916,11 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .catalog.compact-cards-view .items-grid {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 
 .catalog.compact-list-view .items-grid {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
 }
 
 .catalog.compact-cards-view .section-head,
@@ -979,7 +933,8 @@ html:not([data-show-numbers="true"]) .item-number {
 .catalog.compact-cards-view .group-head p:not(.group-number),
 .catalog.compact-list-view .group-head p:not(.group-number),
 .catalog.compact-cards-view .tags,
-.catalog.compact-list-view .tags {
+.catalog.compact-list-view .tags,
+.catalog.compact-list-view .item-type {
   display: none;
 }
 
@@ -1029,14 +984,14 @@ html:not([data-show-numbers="true"]) .item-number {
 }
 
 .catalog.compact-list-view .nav-card {
-  min-height: 70px;
+  min-height: 56px;
-  padding: 10px 12px;
+  padding: 8px 10px;
-  grid-template-columns: 42px minmax(0, 1fr) 34px;
+  grid-template-columns: 32px minmax(0, 1fr) 28px;
 }
 
 .catalog.compact-list-view .nav-card img {
-  width: 42px;
+  width: 32px;
-  height: 42px;
+  height: 32px;
 }
 
 .catalog.compact-list-view .item-number {
@@ -1135,10 +1090,6 @@ html:not([data-show-numbers="true"]) .item-number {
     width: auto;
   }
 
-  .overview {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .section-head,
   .group-head {
     display: grid;