Upload static/css/style.css with huggingface_hub

static/css/style.css

@@ -1,104 +1,1097 @@
-body { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #e3e9f6 0%, #f6f8fa 100%); margin: 0; }
+/* Base styles for modern clean UI design - Anyformat inspired */
+:root {
+  --primary-color: #0067df;
+  --primary-light: #e6f0ff;
+  --primary-dark: #004db3;
+  --success-color: #10b981;
+  --warning-color: #f59e0b;
+  --danger-color: #ef4444;
+  --info-color: #3b82f6;
+  --text-color: #333333;
+  --text-secondary: #666666;
+  --text-light: #8b949e;
+  --border-color: #e0e4e8;
+  --background-light: #ffffff;
+  --background-grey: #f8f9fa;
+  --background-light-hover: #f5f8fc;
+  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
+  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --transition-fast: 150ms ease;
+  --transition-normal: 250ms ease;
+  --font-xs: 12px;
+  --font-sm: 14px;
+  --font-md: 16px;
+  --font-lg: 18px;
+  --font-xl: 20px;
+  --font-xxl: 24px;
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 16px;
+  --spacing-lg: 24px;
+  --spacing-xl: 32px;
+}
+
+body { 
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  background-color: var(--background-light);
+  color: var(--text-color);
+  margin: 0;
+  padding: 0;
+  line-height: 1.5;
+  font-size: var(--font-md);
+}
+
+/* Header and Navigation */
+.header {
+  background-color: var(--background-light);
+  border-bottom: 1px solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+}
+
+.header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-md) var(--spacing-xl);
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.app-logo {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-xl);
+  font-weight: 600;
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+.app-logo i {
+  color: var(--primary-color);
+  font-size: 24px;
+  margin-right: 10px;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.huggingface-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--text-secondary);
+  font-size: var(--font-sm);
+  transition: var(--transition-fast);
+}
+
+.huggingface-link:hover {
+  color: var(--primary-color);
+}
+
+.huggingface-link img {
+  height: 20px;
+  margin-right: 6px;
+}
 
+.info-banner {
+  background: var(--background-grey);
+  border-bottom: 1px solid var(--border-color);
+  padding: var(--spacing-xs) var(--spacing-xl);
+  font-size: var(--font-sm);
+  color: var(--text-secondary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.info-sources {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  flex-wrap: wrap;
+}
+
+.source-label,
+.limit-label {
+  font-weight: 600;
+  color: var(--text-color);
+}
+
+.info-divider {
+  margin: 0 var(--spacing-sm);
+  color: var(--border-color);
+}
+
+.powered-by {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.huggingface-badge {
+  display: flex;
+  align-items: center;
+}
+
+.huggingface-badge img {
+  height: 16px;
+}
+
+/* Layout containers */
+.app-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.main-content {
+  flex: 1;
+  padding: var(--spacing-lg) var(--spacing-xl);
+  max-width: 1100px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+/* Tab Navigation */
+.tab-navigation {
+  margin-bottom: var(--spacing-lg);
+  overflow-x: auto;
+}
+
+.tab-bar {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border-bottom: 2px solid var(--border-color);
+  width: 100%;
+}
+
+.tab {
+  padding: var(--spacing-md) var(--spacing-lg);
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--text-secondary);
+  transition: var(--transition-fast);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  white-space: nowrap;
+}
+
+.tab:hover {
+  color: var(--primary-color);
+  background-color: var(--background-light-hover);
+}
+
+.tab.active {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+  font-weight: 600;
+}
+
+.tab .badge {
+  background-color: var(--primary-color);
+  color: white;
+  font-size: var(--font-xs);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  margin-left: var(--spacing-xs);
+  font-weight: 600;
+}
+
+/* Content Cards */
 .card, .container {
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 4px 24px rgba(25,118,210,0.09), 0 1.5px 7px rgba(44,62,80,0.05);
-  padding: 2.2em 2em;
-  margin: 40px auto;
-  max-width: 820px;
-  transition: box-shadow 0.2s;
+  background: var(--background-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+  padding: var(--spacing-lg);
+  margin: 0 auto var(--spacing-lg) auto;
+  transition: box-shadow 0.2s ease;
+  max-width: 950px;
 }
+
 .card:hover, .container:hover {
-  box-shadow: 0 8px 32px rgba(25,118,210,0.13), 0 2px 10px rgba(44,62,80,0.08);
+  box-shadow: var(--shadow-md);
 }
 
-h1, h3 { text-align: center; color: #1976d2; letter-spacing: 0.01em; }
+.section-heading {
+  margin-bottom: var(--spacing-lg);
+}
+
+.section-heading h2 {
+  font-size: var(--font-xl);
+  font-weight: 600;
+  margin: 0 0 var(--spacing-xs) 0;
+}
+
+.section-heading h3 {
+  font-size: var(--font-lg);
+  font-weight: 600;
+  margin: 0 0 var(--spacing-xs) 0;
+}
 
-form label { display: block; margin-top: 1.2em; color: #34495e; font-weight: 500; }
-form input, form button, form select {
-  width: 100%; padding: 0.55em; margin-top: 0.2em;
-  border: 1px solid #bfc9db; border-radius: 6px;
-  font-size: 1em; background: #f9fbff;
-  transition: border 0.18s, box-shadow 0.18s;
+.section-description {
+  color: var(--text-secondary);
+  margin: var(--spacing-xs) 0 0 0;
 }
-form input:focus, form select:focus {
-  border: 1.5px solid #1976d2;
+
+/* Form Elements */
+.form-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -8px;
+  max-width: 900px;
+}
+
+.form-group {
+  margin-bottom: var(--spacing-md);
+  padding: 0 8px;
+  flex: 1;
+}
+
+.col-md-6 {
+  width: 50%;
+  flex: 0 0 50%;
+}
+
+.col-md-4 {
+  width: 33.333333%;
+  flex: 0 0 33.333333%;
+}
+
+@media (max-width: 768px) {
+  .col-md-6, .col-md-4 {
+    width: 100%;
+    flex: 0 0 100%;
+  }
+}
+
+label {
+  display: block;
+  margin-bottom: var(--spacing-xs);
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: var(--font-sm);
+}
+
+.input-field,
+input[type="text"],
+input[type="number"],
+input[type="email"],
+input[type="password"],
+textarea {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: var(--font-md);
+  transition: var(--transition-fast);
   outline: none;
-  box-shadow: 0 0 0 2px #e3e9f6;
+  box-sizing: border-box;
 }
-form button {
-  background: linear-gradient(90deg, #1976d2 70%, #42a5f5 100%);
-  color: #fff;
-  font-weight: bold;
+
+.input-field:focus,
+input[type="text"]:focus,
+input[type="number"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+textarea:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(0, 103, 223, 0.15);
+}
+
+.select-field,
+select {
+  width: 100%;
+  padding: 10px 14px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  background-color: white;
+  font-size: var(--font-md);
+  transition: var(--transition-fast);
+  outline: none;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 11L3 6H13L8 11Z' fill='%23666666'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 14px center;
+  box-sizing: border-box;
+}
+
+.select-field:focus,
+select:focus {
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 3px rgba(0, 103, 223, 0.15);
+}
+
+/* Buttons */
+.btn-primary,
+button[type="submit"] {
+  background-color: var(--primary-color);
+  color: white;
   border: none;
+  border-radius: var(--radius-sm);
+  padding: 10px 16px;
+  font-weight: 600;
+  font-size: var(--font-md);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.btn-primary:hover,
+button[type="submit"]:hover {
+  background-color: var(--primary-dark);
+}
+
+.btn-secondary {
+  background-color: var(--background-grey);
+  color: var(--text-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 10px 16px;
+  font-weight: 500;
+  font-size: var(--font-md);
+  cursor: pointer;
+  transition: var(--transition-fast);
+}
+
+.btn-secondary:hover {
+  background-color: var(--border-color);
+}
+
+.btn-success {
+  background-color: var(--success-color);
+  color: white;
+}
+
+.btn-danger {
+  background-color: var(--danger-color);
+  color: white;
+}
+
+.btn-info {
+  background-color: var(--info-color);
+  color: white;
+}
+
+.btn-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
+
+.btn-icon i {
+  font-size: var(--font-md);
+}
+
+.form-actions {
+  display: flex;
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+}
+
+/* Results and Visualization */
+.results-section,
+.results-container {
+  margin-top: var(--spacing-lg);
+}
+
+.chart-container,
+.chart-area,
+.visualization-container {
+  background-color: white;
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+  margin: var(--spacing-md) auto;
+  max-width: 850px;
+}
+
+.trade-flow-map {
+  margin: var(--spacing-md) auto;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  max-width: 850px;
+  background-color: #ffffff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+}
+
+/* Map container for Leaflet */
+.leaflet-container {
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  overflow: hidden;
+  width: 100%;
+  max-width: 850px !important;
+  margin: 0 auto;
+}
+
+.chart-controls,
+.chart-control-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-md);
+}
+
+.chart-type-btn {
+  background-color: var(--background-grey);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  padding: 8px 14px;
+  font-size: var(--font-sm);
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.chart-type-btn:hover {
+  background-color: var(--background-light-hover);
+}
+
+.chart-type-btn.active {
+  background-color: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.chart-type-btn i {
+  font-size: var(--font-md);
+}
+
+/* AI Assistant Styles */
+.model-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  font-size: var(--font-sm);
+  color: var(--text-secondary);
+  margin-top: var(--spacing-xs);
+}
+
+.hf-logo {
+  height: 18px;
+}
+
+.chat-container {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 500px;
+  background-color: var(--background-grey);
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--spacing-md);
+}
+
+.message {
+  margin-bottom: var(--spacing-md);
+  max-width: 85%;
+}
+
+.message-assistant {
+  align-self: flex-start;
+}
+
+.message-user {
+  align-self: flex-end;
+  margin-left: auto;
+}
+
+.message-content {
+  background-color: white;
+  border-radius: var(--radius-md);
+  padding: var(--spacing-md);
+  box-shadow: var(--shadow-sm);
+}
+
+.message-assistant .message-content {
+  border-bottom-left-radius: 0;
+}
+
+.message-user .message-content {
+  background-color: var(--primary-light);
+  border-bottom-right-radius: 0;
+}
+
+.chat-input-container {
+  display: flex;
+  padding: var(--spacing-md);
+  background-color: white;
+  border-top: 1px solid var(--border-color);
+  gap: var(--spacing-sm);
+}
+
+.chat-input {
+  flex: 1;
+  padding: 12px 16px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  font-size: var(--font-md);
+  resize: none;
+}
+
+.quick-questions-container {
+  margin-top: var(--spacing-lg);
+}
+
+.section-title {
+  font-size: var(--font-lg);
+  font-weight: 600;
+  margin-bottom: var(--spacing-md);
+  color: var(--text-color);
+}
+
+.quick-question-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-lg);
+}
+
+.quick-question-chip {
+  background-color: var(--background-light);
+  border: 1px solid var(--border-color);
+  border-radius: 50px;
+  padding: 8px 16px;
+  font-size: var(--font-sm);
   cursor: pointer;
-  margin-top: 1.5em;
-  box-shadow: 0 2px 8px rgba(25,118,210,0.09);
-  transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
-  letter-spacing: 0.03em;
+  transition: var(--transition-fast);
+}
+
+.quick-question-chip:hover {
+  background-color: var(--primary-light);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.assistant-tools {
+  margin-top: var(--spacing-xl);
+}
+
+.tools-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+  gap: var(--spacing-md);
+  margin-top: var(--spacing-md);
+}
+
+.tool-card {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+}
+
+.tool-header {
+  background-color: var(--background-grey);
+  padding: var(--spacing-md);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tool-header i {
+  color: var(--primary-color);
+  font-size: var(--font-lg);
+}
+
+.tool-header h4 {
+  margin: 0;
+  font-size: var(--font-md);
+  font-weight: 600;
+}
+
+.tool-content {
+  padding: var(--spacing-md);
+}
+
+.form-group {
+  margin-bottom: var(--spacing-md);
+}
+
+.input-with-button {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.input-with-button input {
+  flex: 1;
+}
+
+/* Cache Management */
+.cache-control-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--spacing-md);
+}
+
+.panel-title {
+  font-size: var(--font-lg);
+  font-weight: 600;
+  margin: 0;
+}
+
+.action-buttons {
+  display: flex;
+  gap: var(--spacing-sm);
+}
+
+.cached-data-container {
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  background-color: var(--background-light);
+  min-height: 200px;
+}
+
+.loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-xl);
+  color: var(--text-secondary);
+  gap: var(--spacing-md);
 }
+
+.loading-indicator i {
+  font-size: var(--font-xl);
+  color: var(--primary-color);
+}
+
+/* Typography */
+h1, h2, h3, h4, h5, h6 {
+  color: var(--text-color);
+  margin-top: 0;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+h1 { font-size: 28px; margin-bottom: 24px; }
+h2 { font-size: 24px; margin-bottom: 20px; }
+h3 { font-size: 20px; margin-bottom: 16px; }
+
+/* Page section headings */
+.section-heading {
+  display: flex;
+  align-items: center;
+  margin-bottom: 20px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color);
+}
+
+/* Form elements */
+form label {
+  display: block;
+  margin-bottom: 8px;
+  color: var(--text-color);
+  font-weight: 500;
+  font-size: 14px;
+}
+
+form input, form select, form textarea {
+  width: 100%;
+  padding: 10px 12px;
+  margin-bottom: 16px;
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-sm);
+  font-size: 15px;
+  background-color: var(--background-light);
+  color: var(--text-color);
+  transition: all 0.2s ease;
+}
+
+form input:focus, form select:focus, form textarea:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 2px rgba(0, 103, 223, 0.15);
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  border: 1px solid transparent;
+}
+
+.btn-primary {
+  background-color: var(--primary-color);
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #0055c4;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.btn-secondary {
+  background-color: white;
+  border-color: var(--border-color);
+  color: var(--text-color);
+}
+
+.btn-secondary:hover {
+  background-color: var(--background-grey);
+  border-color: #ccd0d5;
+}
+
+/* Form buttons inherit btn styles */
+form button {
+  width: auto;
+  padding: 10px 16px;
+  font-weight: 500;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+}
+
 form button:hover {
-  background: linear-gradient(90deg, #1565c0 70%, #64b5f6 100%);
-  transform: translateY(-2px) scale(1.03);
-  box-shadow: 0 4px 16px rgba(25,118,210,0.13);
+  background-color: #0055c4;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
-#results, #predictionResults, #exportsCountryResults, #importsCountryResults, #exportsProductResults, #importsProductResults, #rankingsResults, #bilateralResults, #dataDownloadStatus {
-  margin-top: 2em;
-  font-size: 1.08em;
+/* Results and content sections */
+.results-section {
+  margin-top: 24px;
 }
-.alert { padding: 1em; border-radius: 8px; margin-bottom: 1em; font-weight: bold; }
-.alert-danger { background: #ffe5e5; color: #c0392b; border: 1px solid #e74c3c; }
-.alert-success { background: #e5ffe5; color: #27ae60; border: 1px solid #2ecc71; }
+
+#results, 
+#predictionResults, 
+#exportsCountryResults, 
+#importsCountryResults, 
+#exportsProductResults, 
+#importsProductResults, 
+#rankingsResults, 
+#bilateralResults, 
+#dataDownloadStatus {
+  margin-top: 16px;
+  font-size: 15px;
+}
+
+/* Alerts and notifications */
+.alert {
+  padding: 12px 16px;
+  border-radius: var(--radius-sm);
+  margin-bottom: 16px;
+  font-weight: 500;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+}
+
+.alert-icon {
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.alert-danger {
+  background-color: #FEEFEF;
+  color: #B42318;
+  border: 1px solid #FDE2E2;
+}
+
+.alert-success {
+  background-color: #ECFDF3;
+  color: #027A48;
+  border: 1px solid #D1FADF;
+}
+
+.alert-info {
+  background-color: #EFF8FF;
+  color: #175CD3;
+  border: 1px solid #D1E9FF;
+}
+
+.alert-warning {
+  background-color: #FFFAEB;
+  color: #B54708;
+  border: 1px solid #FEF0C7;
+}
+
+/* Loading indicators */
 .spinner {
-  border: 6px solid #f3f3f3;
-  border-top: 6px solid #1976d2;
+  border: 3px solid rgba(0, 103, 223, 0.1);
+  border-top: 3px solid var(--primary-color);
   border-radius: 50%;
-  width: 44px;
-  height: 44px;
+  width: 24px;
+  height: 24px;
   animation: spin 1s linear infinite;
-  margin: 2em auto;
+  margin: 16px auto;
   display: block;
 }
+
 @keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
+
+/* Tables */
 table {
-  width: 100%; border-collapse: separate; border-spacing: 0;
-  margin-top: 2em; min-width: 600px;
-  background: #fff; border-radius: 10px;
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  margin-bottom: 24px;
+  background: var(--background-light);
+  border-radius: var(--radius-sm);
   overflow: hidden;
-  box-shadow: 0 2px 10px rgba(25,118,210,0.07);
-  font-size: 1.07em;
+  font-size: 14px;
+  border: 1px solid var(--border-color);
 }
+
 thead {
-  background: linear-gradient(90deg, #1976d2 70%, #42a5f5 100%);
-  color: #fff;
+  background-color: var(--background-grey);
+  color: var(--text-color);
+  font-weight: 600;
 }
-th, td {
-  padding: 0.65em 0.6em;
-  border: 1px solid #e3e9f6;
+
+th {
+  padding: 12px 16px;
   text-align: left;
+  font-weight: 600;
+  border-bottom: 1px solid var(--border-color);
+}
+
+td {
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border-color);
+  color: var(--text-secondary);
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+tr:hover {
+  background-color: var(--background-grey);
+}
+/* Header and Navigation */
+.header {
+  background-color: var(--background-light);
+  border-bottom: 1px solid var(--border-color);
+  padding: 16px 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 16px;
+}
+
+.app-logo {
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 18px;
+  color: var(--text-color);
+  text-decoration: none;
+}
+
+.app-logo img {
+  height: 32px;
+  margin-right: 8px;
+}
+
+/* Info banner */
+.info-banner {
+  background-color: var(--background-grey);
+  border-bottom: 1px solid var(--border-color);
+  padding: 8px 16px;
+  font-size: 13px;
+  color: var(--text-secondary);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Tab Navigation */
+.tab-navigation {
+  border-bottom: 1px solid var(--border-color);
+  margin-bottom: 24px;
+}
+
+.tab-bar {
+  display: flex;
+  flex-wrap: wrap;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  gap: 4px;
+}
+
+.tab {
+  padding: 12px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text-secondary);
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+  transition: all 0.2s ease;
+  background: none;
+  border-radius: 0;
+}
+
+.tab:hover {
+  color: var(--primary-color);
+  background-color: var(--primary-light);
+}
+
+.tab.active {
+  color: var(--primary-color);
+  border-bottom-color: var(--primary-color);
+  font-weight: 600;
+}
+
+.tab-content {
+  display: none;
+  padding: 16px 0;
 }
-tr:nth-child(even) { background: #f6f8fa; }
-tr:hover { background: #e3e9f6; transition: background 0.18s; }
-#tradeChart, #predictionChart, #exportsCountryChart, #importsCountryChart, #exportsProductChart, #importsProductChart, #rankingsChart, #bilateralChart {
-  max-width: 100%; margin-top: 2em; background: #fff; border-radius: 10px; box-shadow: 0 2px 10px rgba(25,118,210,0.07);
+
+.tab-content.active {
+  display: block;
+}
+
+/* Badges */
+.badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 16px;
+  margin-left: 6px;
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+}
+
+/* Charts */
+.chart-container {
+  background-color: var(--background-light);
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  padding: 16px;
+  margin-bottom: 24px;
+  width: 100%;
+}
+
+#tradeChart, 
+#predictionChart, 
+#exportsCountryChart, 
+#importsCountryChart, 
+#exportsProductChart, 
+#importsProductChart, 
+#rankingsChart, 
+#bilateralChart {
+  max-width: 100%;
+  margin-top: 16px;
+  background: var(--background-light);
+  border-radius: var(--radius-sm);
+}
+
+/* Chart controls */
+.chart-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
 }
+
+.chart-type-btn {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-light);
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.chart-type-btn:hover,
+.chart-type-btn.active {
+  background-color: var(--primary-light);
+  color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+.chart-type-btn i {
+  margin-right: 6px;
+}
+
+/* Responsive adjustments */
 @media (max-width: 900px) {
-  .container, .card { max-width: 98vw; padding: 1.2em 0.5em; }
-  table { min-width: 350px; font-size: 0.97em; }
-}
-.container { max-width: 700px; margin: 40px auto; background: #fff; padding: 2em; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
-h1 { text-align: center; color: #2c3e50; }
-form label { display: block; margin-top: 1em; color: #34495e; }
-form input, form button, form select { width: 100%; padding: 0.5em; margin-top: 0.2em; border: 1px solid #ccc; border-radius: 4px; }
-form button { background: #3498db; color: #fff; font-weight: bold; border: none; cursor: pointer; margin-top: 1em; }
-form button:hover { background: #217dbb; }
-#results { margin-top: 2em; }
-.alert { padding: 1em; border-radius: 5px; margin-bottom: 1em; font-weight: bold; }
-.alert-danger { background: #ffe5e5; color: #c0392b; border: 1px solid #e74c3c; }
+  .container, .card { 
+    width: calc(100% - 32px);
+    padding: 16px;
+    margin: 16px;
+  }
+  
+  .tab-bar {
+    overflow-x: auto;
+    white-space: nowrap;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none; /* Firefox */
+  }
+  
+  .tab-bar::-webkit-scrollbar {
+    display: none; /* Chrome/Safari/Opera */
+  }
+  
+  .tab {
+    padding: 12px 10px;
+    font-size: 13px;
+  }
+  
+  table {
+    font-size: 13px;
+  }
+  
+  th, td {
+    padding: 8px 12px;
+  }
+}
 .alert-success { background: #e5ffe5; color: #27ae60; border: 1px solid #2ecc71; }
 .spinner {
   border: 6px solid #f3f3f3;
@@ -114,9 +1107,34 @@ form button:hover { background: #217dbb; }
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
 }
-table { width: 100%; border-collapse: collapse; margin-top: 2em; min-width: 600px; }
-thead { background: #3498db; color: #fff; }
-th, td { padding: 0.5em; border: 1px solid #ddd; text-align: left; }
-tr:nth-child(even) { background: #f2f2f2; }
-#results { margin-top: 2em; }
-#tradeChart { max-width: 100%; margin-top: 2em; }
+/* Custom styles for specific components */
+.trade-data-visualization {
+  margin-top: 24px;
+}
+
+.ai-assistant-container {
+  border-radius: var(--radius-md);
+  border: 1px solid var(--border-color);
+  background-color: var(--background-light);
+  padding: 16px;
+  margin-bottom: 24px;
+}
+
+.chat-message {
+  padding: 12px 16px;
+  margin-bottom: 12px;
+  border-radius: var(--radius-md);
+  max-width: 80%;
+}
+
+.chat-message-user {
+  background-color: var(--primary-light);
+  color: var(--text-color);
+  margin-left: auto;
+}
+
+.chat-message-assistant {
+  background-color: var(--background-grey);
+  color: var(--text-color);
+  margin-right: auto;
+}