Create style.css

style.css

@@ -0,0 +1,85 @@
+/* ---------- GLOBAL ---------- */
+body {
+  background-color: #0f1117;
+}
+
+/* ---------- BUTTONS ---------- */
+.search-btn {
+  background-color: #2563eb !important;
+  color: white !important;
+  border-radius: 999px !important;
+  padding: 12px 28px !important;
+  font-weight: 600;
+}
+
+.ask-ai {
+  background-color: #2563eb;
+  color: white;
+  border: none;
+  border-radius: 999px;
+  padding: 6px 14px;
+  cursor: pointer;
+}
+
+/* ---------- RESULT CARDS ---------- */
+.result-card {
+  background: #1a1c23;
+  padding: 16px;
+  border-radius: 12px;
+  margin-bottom: 14px;
+  box-shadow: 0 0 0 1px #2a2d36;
+}
+
+.result-actions {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+
+.result-actions a {
+  color: #60a5fa;
+  text-decoration: underline;
+}
+
+/* ---------- TOOLTIPS ---------- */
+.tooltip {
+  position: relative;
+  display: inline-block;
+  color: #93c5fd;
+  cursor: help;
+  font-size: 0.85em;
+}
+
+.tooltiptext {
+  visibility: hidden;
+  width: 260px;
+  background-color: #111827;
+  color: #e5e7eb;
+  text-align: left;
+  padding: 10px;
+  border-radius: 6px;
+  position: absolute;
+  z-index: 10;
+  bottom: 125%;
+  left: 50%;
+  transform: translateX(-50%);
+  box-shadow: 0 0 0 1px #374151;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+}
+
+/* ---------- MOBILE ---------- */
+@media (max-width: 640px) {
+  .gradio-container {
+    padding-bottom: 80px;
+  }
+
+  .tabs {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: #0f1117;
+  }
+}