reworked site

web/style.css

@@ -28,6 +28,24 @@ header {
   gap: 12px;
 }
 
+.page-toolbar {
+  background: white;
+  padding: 16px 18px;
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
+  margin-bottom: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.page-toolbar__title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
 .header-main {
   display: flex;
   align-items: center;
@@ -1333,6 +1351,105 @@ h1 {
   text-align: center;
 }
 
+.bookmarks-page {
+  padding-bottom: 40px;
+}
+
+.bookmarks-page__intro {
+  margin-top: 12px;
+  color: #4b5563;
+  font-size: 14px;
+}
+
+.bookmark-page {
+  margin-top: 32px;
+  display: flex;
+  justify-content: center;
+}
+
+.bookmark-page__panel {
+  width: min(960px, 100%);
+  background: #ffffff;
+  border-radius: 20px;
+  border: 1px solid #e5e7eb;
+  padding: 24px 28px;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.bookmark-page__panel .bookmark-list {
+  max-height: none;
+}
+
+.bookmark-page__lead {
+  margin: 0;
+  color: #4b5563;
+  font-size: 14px;
+}
+
+.bookmark-panel__toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-end;
+  margin-bottom: 12px;
+}
+
+.bookmark-panel__search {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  flex: 1 1 220px;
+}
+
+.bookmark-panel__search input {
+  border: 1px solid #d0d3d9;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 14px;
+}
+
+.bookmark-panel__sort {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.bookmark-panel__sort label {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  color: #4b5563;
+}
+
+.bookmark-panel__sort select {
+  border: 1px solid #d0d3d9;
+  border-radius: 8px;
+  padding: 8px 10px;
+  font-size: 14px;
+  min-width: 180px;
+}
+
+.bookmark-sort__direction {
+  border: 1px solid #d0d3d9;
+  border-radius: 8px;
+  background: #f3f4f6;
+  width: 40px;
+  height: 40px;
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+}
+
+.bookmark-sort__direction:hover {
+  border-color: #a5b4fc;
+}
+
 @media (max-width: 640px) {
   .bookmark-panel {
     width: min(480px, 94vw);