Update styles.css

styles.css

@@ -1,175 +1,26 @@
-/* Layout + Theme -------------------------------------------------------- */
-.stApp {
-  background: radial-gradient(circle at top, #1e2433 0%, #0f131d 55%, #0c0f17 100%);
-  color: #f7f8fc;
-  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-}
+/* -- Sidebar width & padding -- */
+section[data-testid="stSidebar"]          { width: 300px !important; }
+section[data-testid="stSidebarContent"]   { width: 300px !important;
+                                            padding: 0.75rem; }
 
-.main .block-container {
-  max-width: 860px;
-  margin-left: 1.5rem;
-  margin-right: auto;
-  padding-left: 1.5rem;
-  padding-right: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 3rem;
-}
+/* -- Title size -- */
+h1 { font-size: 2.1rem !important; margin-bottom: 1rem; }
 
-/* Sidebar --------------------------------------------------------------- */
-section[data-testid="stSidebar"] {
-  width: 240px !important;
-}
-
-section[data-testid="stSidebarContent"] {
-  width: 240px !important;
-  padding: 1rem;
-  background: rgba(10, 12, 20, 0.85);
-  border-right: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-section[data-testid="stSidebar"] h4,
-section[data-testid="stSidebar"] label,
-section[data-testid="stSidebar"] p,
-section[data-testid="stSidebar"] span {
-  color: #f5f6fa !important;
-}
-
-.stButton button {
-  border-radius: 999px;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  background: rgba(255, 255, 255, 0.04);
-  color: #f7f8fc;
-}
-
-.stButton button:hover {
-  border-color: rgba(88, 130, 255, 0.9);
-  background: rgba(88, 130, 255, 0.15);
-}
-
-/* Headlines ------------------------------------------------------------- */
-h1 {
-  font-size: 2.4rem !important;
-  margin-bottom: 1rem !important;
-}
-
-.eyebrow {
-  text-transform: uppercase;
-  letter-spacing: 0.2em;
-  font-size: 0.7rem;
-  color: rgba(255, 255, 255, 0.6);
-  margin-bottom: 0.3rem;
-}
-
-/* Hero + Stat cards ----------------------------------------------------- */
-.hero-card {
-  display: flex;
-  justify-content: space-between;
-  gap: 1.5rem;
-  padding: 1.5rem;
-  margin: 0.5rem 0 1rem;
-  border-radius: 18px;
-  background: linear-gradient(130deg, rgba(73, 99, 255, 0.15), rgba(9, 10, 18, 0.85));
-  border: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-.hero-card h2 {
-  margin: 0 0 0.4rem;
-  font-size: 1.6rem;
-}
-
-.hero-card p {
-  margin: 0;
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.status-chip {
-  align-self: center;
-  text-align: right;
-  padding: 0.8rem 1rem;
-  border-radius: 16px;
-  background: rgba(12, 18, 35, 0.75);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  min-width: 170px;
-}
-
-.status-chip span {
-  display: block;
-  font-size: 0.7rem;
-  text-transform: uppercase;
-  letter-spacing: 0.15em;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.status-chip strong {
-  font-size: 1.1rem;
-}
-
-.status-chip small {
-  display: block;
-  font-size: 0.75rem;
-  color: rgba(255, 255, 255, 0.4);
-}
-
-.stat-card {
-  border-radius: 16px;
-  padding: 1rem 1.25rem;
-  background: rgba(15, 22, 38, 0.9);
-  border: 1px solid rgba(255, 255, 255, 0.05);
-  height: 100%;
-}
-
-.stat-card span {
-  font-size: 0.75rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.stat-card h4 {
-  margin: 0.35rem 0 0;
-  font-size: 1.1rem;
-}
-
-.pill {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  border-radius: 999px;
-  padding: 0.2rem 0.85rem;
-  font-size: 0.75rem;
-  border: 1px solid rgba(255, 255, 255, 0.15);
-  color: rgba(255, 255, 255, 0.75);
-}
-
-.pill.on {
-  border-color: rgba(87, 214, 141, 0.6);
-  background: rgba(87, 214, 141, 0.12);
-  color: #8ef2c9;
-}
-
-.pill-group {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.5rem;
-  margin: 0.75rem 0 1.25rem;
-}
-
-/* Chat history columns -------------------------------------------------- */
-div.answer {
-  white-space: pre-wrap;
-  overflow-wrap: anywhere;
-}
+/* -- Ensure long links wrap inside comparison columns -- */
+div.answer { white-space: pre-wrap; overflow-wrap: anywhere; }
 
+/* Tighten spacing between comparison columns */
 div[data-testid="column"] {
-  padding-left: 0.25rem !important;
-  padding-right: 0.25rem !important;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-  flex-grow: 1;
-}
-
-.vertical-divider {
-  height: 100%;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
-  margin: 0 0.4rem;
-}
+    padding-left: 0.25rem !important;
+    padding-right: 0.25rem !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+    flex-grow: 1;
+  }
+  
+  /* Align vertical divider better */
+  .vertical-divider {
+    height: 100%;
+    border-left: 1px solid #ccc;
+    margin: 0 0.4rem;
+  }