feat: style search input with color scheme and auto-focus on load

- Adds CSS for input[type=search] using theme colors (bg, text, accent)
- Adds autofocus attribute so search box is focused on page load

src/Roux/Html.hs

@@ -148,6 +148,9 @@ page title content =
                             , "a:hover { text-decoration: underline; }"
                             , "a[role=button] { --pico-color: var(--roux-accent); }"
                             , ""
+                            , "/* Search input */"
+                            , "input[type=search] { background: var(--roux-bg); color: var(--roux-text); border-color: rgba(184, 92, 56, 0.3); }"
+                            , "input[type=search]:focus { border-color: var(--roux-accent); box-shadow: 0 0 0 1px var(--roux-accent); }"
                             , ".roux-navbar { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; margin-bottom: 1rem; border-bottom: 0.5px solid rgba(184, 92, 56, 0.2); }"
                             , ".roux-navbar ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }"
                             , ".roux-navbar li { margin: 0; padding: 0; }"
@@ -341,6 +344,7 @@ indexPage _mode recipes =
             ! A.id "roux-search"
             ! A.placeholder "Search recipes..."
             ! A.style "margin-bottom: 1rem;"
+            ! A.autofocus ""
         -- Container for JS-rendered recipe list
         H.div ! A.id "roux-recipe-list" $ H.p "Loading recipes..."
         -- Embedded JSON: recipe data