1 files changed, 54 insertions, 4 deletions
diff --git a/data-viewer/data-viewer.css b/data-viewer/data-viewer.css
index 508d34f..84f0131 100644
--- a/data-viewer/data-viewer.css
+++ b/data-viewer/data-viewer.css
@@ -502,10 +502,60 @@ body {
   margin-bottom: 20px;
 }
 
-/* Responsive handling for mobile */
+/* Backup and Restore Styling */
+.backup-restore-container {
+  background-color: var(--bg-color);
+  border-radius: var(--radius-sm);
+  padding: 16px;
+  border-left: 3px solid var(--accent-color);
+}
+
+.backup-description {
+  margin-top: 0;
+  margin-bottom: 16px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.backup-actions {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.import-container, #export-settings {
+  flex: 1;
+}
+
+.import-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.import-status {
+  font-size: 14px;
+  margin-top: 8px;
+  padding: 8px 0;
+  border-radius: var(--radius-sm);
+}
+
+.status-success {
+  color: var(--success-color);
+  font-weight: 500;
+}
+
+.status-error {
+  color: var(--danger-color);
+  font-weight: 500;
+}
+
+/* Add responsive adjustments for mobile */
 @media (max-width: 768px) {
-  .tables-container {
-    grid-template-columns: 1fr;
-    gap: 16px;
+  .backup-actions {
+    flex-direction: column;
+    gap: 8px;
   }
 }