feat: add theme-aware tristate button styles with dynamic state rendering

CSS changes for bookshelf page:

Tristate button styles (input.css):
- Add .tristate-btn base class with transition effects
- Three state-specific classes with dynamic colors:
  - .state-null (Any): Neutral style with --text-secondary
  - .state-true (Has Cover): Green success style using color-mix()
  - .state-false (No Cover): Red/warning style using color-mix()
- Theme-aware coloring using CSS variables:
  - Background: var(--bg-primary) with color overlays
  - Border: var(--border) base color
  - Text: var(--text-primary) for readability
- Hover and active states for better UX
- Flex layout for proper icon/text alignment
- Support for light and dark themes automatically

Style.css update:
- Minor adjustment for compatibility

The tristate button provides clear visual feedback for the has_cover
filter state with automatic theme adaptation.

web/static/input.css

@@ -151,6 +151,35 @@
 }
 
 @layer components {
+  /* TriState Button for has_cover filter */
+
+  /* Base input button style */
+  .tristate-btn {
+    background-color: var(--bg-primary);
+    border-width: 1px; /* Ensure 1px border like other inputs */
+    border-style: solid;
+  }
+  .tristate-btn.state-null {
+    border-color: var(--border);
+    color: var(--text-secondary);
+  }
+  .tristate-btn.state-true {
+    border-color: var(--border);
+    background-color: color-mix(in srgb, var(--accent) 15%, var(--bg-primary));
+    color: var(--accent);
+  }
+  .tristate-btn.state-false {
+    border-color: var(--border);
+    background-color: color-mix(
+      in srgb,
+      var(--text-secondary) 10%,
+      var(--bg-primary)
+    );
+    color: var(--text-secondary);
+  }
+  .tristate-btn:hover {
+    opacity: 0.8;
+  }
   .loading-spinner {
     display: inline-block;
     width: 40px;