Update static/style.css

static/style.css

@@ -101,6 +101,40 @@ p {
     margin-bottom: 2rem;
 }
 
+/* Main tabs styling */
+.main-tabs {
+    display: flex;
+    background-color: var(--gray-100);
+    border-bottom: 1px solid var(--gray-300);
+    border-top-left-radius: 0.75rem;
+    border-top-right-radius: 0.75rem;
+    margin-bottom: 1.5rem;
+}
+
+.main-tab {
+    padding: 12px 20px;
+    cursor: pointer;
+    font-weight: 600;
+    text-align: center;
+    flex: 1;
+    transition: var(--transition);
+}
+
+.main-tab.active {
+    background-color: white;
+    border-bottom: 3px solid var(--primary);
+    color: var(--primary);
+}
+
+.tab-content {
+    display: none;
+}
+
+.tab-content.active {
+    display: block;
+}
+}
+
 .form-group {
     margin-bottom: 1.5rem;
 }
@@ -555,6 +589,59 @@ button:hover {
     gap: 6px;
 }
 
+/* Styles for API response container */
+.api-response-container {
+    margin-top: 25px;
+    border: 1px solid var(--gray-300);
+    border-radius: 8px;
+    padding: 15px;
+    background-color: white;
+    box-shadow: var(--shadow);
+}
+
+.api-response-container h3 {
+    margin-bottom: 15px;
+    color: var(--primary);
+    border-bottom: 1px solid var(--gray-200);
+    padding-bottom: 8px;
+}
+
+.api-response-content {
+    background-color: var(--gray-100);
+    border-radius: 5px;
+    padding: 12px;
+    max-height: 400px;
+    overflow-y: auto;
+    font-family: monospace;
+    white-space: pre-wrap;
+    font-size: 14px;
+}
+
+.result-item {
+    margin-bottom: 20px;
+    padding: 10px;
+    border: 1px solid var(--gray-300);
+    border-radius: 5px;
+    background-color: white;
+}
+
+.result-item h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: var(--primary-dark);
+    font-size: 16px;
+    border-bottom: 1px solid var(--gray-200);
+    padding-bottom: 5px;
+}
+
+.result-item pre {
+    margin: 0;
+    background-color: var(--gray-100);
+    padding: 8px;
+    border-radius: 4px;
+    overflow-x: auto;
+}
+
 /* Styles for problem refinement functionality */
 
 .problem-history-nav {
@@ -967,12 +1054,10 @@ button:hover {
     border-radius: 0.75rem;
     padding: 1.5rem;
     box-shadow: var(--shadow-sm);
-    cursor: pointer;
     transition: var(--transition);
 }
 
 .key-issue-card:hover {
-    border-color: var(--primary-light);
     box-shadow: var(--shadow-md);
 }
 
@@ -1035,7 +1120,6 @@ button:hover {
     padding: 15px;
     box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
-    cursor: pointer;
 }
 
 .key-issue-card:hover {