added filter on main feed

src/styles/layout.css

@@ -52,6 +52,49 @@
 }
 .f-topbar-login-icon { font-size: 1.1rem; line-height: 1; }
 
+/* ── Search Bar ── */
+.f-search-bar {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 16px;
+  background: var(--bg-filter); backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--border);
+}
+
+.f-search-icon {
+  width: 18px; height: 18px; flex-shrink: 0;
+  color: var(--muted);
+}
+
+.f-search-input {
+  flex: 1; min-width: 0;
+  background: var(--bg-input);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 10px 14px;
+  font-family: var(--font); font-size: 0.9rem;
+  color: var(--text-primary);
+  outline: none;
+  transition: border-color .2s, box-shadow .2s;
+}
+.f-search-input::placeholder { color: var(--muted); }
+.f-search-input:focus {
+  border-color: rgba(var(--teal-rgb), .5);
+  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .12);
+}
+
+.f-search-clear {
+  background: none; border: none; cursor: pointer;
+  color: var(--muted); padding: 4px; border-radius: 6px;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0; transition: color .15s, background .15s;
+}
+.f-search-clear:hover { color: var(--text-primary); background: var(--hover-bg); }
+
+@media (max-width: 768px) {
+  .f-search-bar { padding: 8px 12px; }
+  .f-search-input { padding: 8px 12px; font-size: 0.85rem; }
+}
+
 /* ── Filter Bar ── */
 .f-filter-bar {
   display: flex; gap: 10px;