промежуточная работа

cmd/server/web/css/style.css

@@ -196,3 +196,78 @@ h1 {
         font-size: 15px;
     }
 }
+
+.accordion-header {
+    cursor: pointer;
+    user-select: none;
+}
+
+.accordion-header:hover {
+    opacity: 0.7;
+}
+
+.accordion-body {
+    max-height: 520px;
+    overflow: hidden;
+    transition: max-height 0.3s ease;
+}
+
+.accordion-body.collapsed {
+    max-height: 0;
+}
+
+.progress-with-signal {
+    display: flex;
+    align-items: center;
+    gap: 0;
+}
+
+.progress-90 {
+    flex: 0 0 86%;
+    margin-right: 10px;
+}
+
+/* ===== SIGNAL ICON ===== */
+.signal-icon {
+    display: flex;
+    align-items: flex-end;
+    gap: 4px;
+    width: 34px;
+    height: 34px;
+    flex-shrink: 0;
+}
+
+.sig-bar {
+    flex: 1;
+    border-radius: 2px;
+    min-width: 5px;
+    border: 1.5px solid #00ff88;
+    background-color: transparent;
+    transition: background-color 0.3s, border-color 0.3s;
+}
+
+.sig-bar-1 { height: 25%; }
+.sig-bar-2 { height: 50%; }
+.sig-bar-3 { height: 75%; }
+.sig-bar-4 { height: 100%; }
+
+/* Активные — зелёная заливка */
+.sig-bar.active-1,
+.sig-bar.active-2,
+.sig-bar.active-3,
+.sig-bar.active-4 {
+    background-color: #00ff88;
+    border-color: #00ff88;
+}
+
+/* Неактивные — прозрачные, только контур */
+.sig-bar.dim {
+    background-color: transparent;
+    border-color: #1a3a1a;
+}
+
+#last-byte {
+    font-size: 18px;
+    font-weight: bold;
+    color: #00ff88;
+}