Improve UI

app/static/css/main.css

@@ -31,4 +31,179 @@
 input[type="date"]::-webkit-calendar-picker-indicator {
   filter: invert(1);
   opacity: 0.5;
+}
+
+/* Search result styles */
+.prose {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.prose p {
+  margin-bottom: 0.75rem;
+}
+
+.prose h1,
+.prose h2,
+.prose h3,
+.prose h4 {
+  color: #f3f4f6;
+  font-weight: 600;
+  margin: 1.5rem 0 0.75rem 0;
+}
+
+.prose a {
+  color: #60a5fa;
+  text-decoration: underline;
+}
+
+.prose code {
+  background: #374151;
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+}
+
+.prose pre {
+  background: #374151;
+  padding: 1rem;
+  border-radius: 0.375rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+}
+
+.prose pre code {
+  background: transparent;
+  padding: 0;
+}
+
+.prose ul,
+.prose ol {
+  padding-left: 1.5rem;
+  margin: 0.75rem 0;
+}
+
+.prose li {
+  margin: 0.25rem 0;
+}
+
+.prose blockquote {
+  border-left: 4px solid #4b5563;
+  padding-left: 1rem;
+  margin: 1rem 0;
+  color: #9ca3af;
+}
+
+/* Search highlight styles */
+.highlight-search {
+  background-color: #60a5fa;
+  color: #111827;
+  padding: 0.1em 0.2em;
+  border-radius: 0.2em;
+  font-weight: 600;
+}
+
+/* Preview text styles */
+.preview-text {
+  color: #9ca3af;
+  position: relative;
+}
+
+.preview-text::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 2rem;
+  background: linear-gradient(transparent, #1f2937);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.preview-text.collapsed::after {
+  opacity: 1;
+}
+
+.preview-text.collapsed {
+  max-height: 8rem;
+  overflow: hidden;
+}
+
+/* Expand button styles */
+.expand-button {
+  color: #60a5fa;
+  font-size: 0.875rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: all 0.2s;
+  border: 1px solid #374151;
+}
+
+.expand-button:hover {
+  background-color: #374151;
+}
+
+/* Form input styles */
+.form-input {
+  background-color: #1f2937;
+  border-color: #374151;
+  color: #f3f4f6;
+  transition: all 0.2s;
+}
+
+.form-input:hover {
+  border-color: #4b5563;
+}
+
+.form-input:focus {
+  border-color: #60a5fa;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
+  outline: none;
+}
+
+/* Form label styles */
+.form-label {
+  color: #9ca3af;
+  font-weight: 500;
+  margin-bottom: 0.5rem;
+}
+
+/* Search button styles */
+.search-button {
+  background-color: #2563eb;
+  color: white;
+  font-weight: 500;
+  padding: 0.5rem 1.5rem;
+  border-radius: 0.375rem;
+  transition: all 0.2s;
+  border: 1px solid transparent;
+}
+
+.search-button:hover {
+  background-color: #1d4ed8;
+}
+
+.search-button:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
+}
+
+.search-button:active {
+  background-color: #1e40af;
+}
+
+/* Form grid layout */
+.form-grid {
+  display: grid;
+  gap: 1.5rem;
+  margin-bottom: 1.5rem;
+}
+
+@media (min-width: 640px) {
+  .form-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }