src/shared/ui/SearchBar/SearchBar.svelte

@@ -70,7 +70,14 @@ function handleInputClick() {
                     bind:value={value}
                     onkeydown={handleKeyDown}
                     onclick={handleInputClick}
-                    class="flex flex-row flex-1"
+                    class="
+                        h-20 w-full md:text-2xl backdrop-blur-sm bg-white/60 dark:bg-slate-900/40
+                        border-2 border-slate-200/50 dark:border-slate-700/50
+                        focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50
+                        hover:bg-white/70 dark:hover:bg-slate-900/50 text-slate-900 dark:text-slate-100
+                        placeholder:text-slate-400 px-6 py-4 rounded-2xl transition-all duration-300
+                        font-medium
+                    "
                 />
             </div>
         {/snippet}
@@ -83,7 +90,7 @@ function handleInputClick() {
                 e.preventDefault();
             }
         })}
-        class="w-(--bits-popover-anchor-width) min-w-(--bits-popover-anchor-width)"
+        class="w-(--bits-popover-anchor-width) min-w-(--bits-popover-anchor-width) md:rounded-2xl"
     >
         {@render children?.({ id: contentId })}
     </PopoverContent>