Add trade fair column settings modal with visibility controls

web/style.css

@@ -1856,11 +1856,143 @@ h1 {
   align-items: flex-end;
 }
 
+.bookmark-subpage__toolbar-actions {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 .bookmark-subpage__meta {
   font-size: 12px;
   color: #4b5563;
 }
 
+.bookmark-subpage__config-btn {
+  border: 1px solid #d1d5db;
+  background: #ffffff;
+  color: #1f2937;
+  border-radius: 8px;
+  width: 32px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.bookmark-subpage__config-btn:hover {
+  background: #f3f4f6;
+}
+
+.bookmark-columns-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.bookmark-columns-modal[hidden] {
+  display: none;
+}
+
+.bookmark-columns-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.5);
+}
+
+.bookmark-columns-modal__content {
+  position: relative;
+  background: #ffffff;
+  border-radius: 12px;
+  width: min(640px, 94vw);
+  max-height: 86vh;
+  overflow: auto;
+  padding: 16px;
+  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.25);
+}
+
+.bookmark-columns-modal__content h3 {
+  margin: 0 0 6px;
+  font-size: 18px;
+}
+
+.bookmark-columns-modal__hint {
+  margin: 0 0 12px;
+  color: #4b5563;
+  font-size: 13px;
+}
+
+.bookmark-columns-modal__close {
+  position: absolute;
+  right: 12px;
+  top: 8px;
+  border: none;
+  background: transparent;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  color: #374151;
+}
+
+.bookmark-columns-modal__list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.bookmark-columns-modal__item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 8px 10px;
+  background: #f9fafb;
+}
+
+.bookmark-columns-modal__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: #1f2937;
+}
+
+.bookmark-columns-modal__item-actions {
+  display: inline-flex;
+  gap: 6px;
+}
+
+.bookmark-columns-modal__move {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  background: #fff;
+  cursor: pointer;
+  font-size: 14px;
+  color: #374151;
+}
+
+.bookmark-columns-modal__move:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.bookmark-columns-modal__actions {
+  margin-top: 14px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
 .bookmark-subpage__table-wrap {
   width: 100%;
   overflow-x: auto;
@@ -1997,6 +2129,12 @@ h1 {
   .bookmark-subpage__toolbar {
     gap: 8px;
   }
+
+  .bookmark-subpage__toolbar-actions {
+    margin-left: 0;
+    width: 100%;
+    justify-content: space-between;
+  }
 }
 
 .screenshot-modal {