import cells

css/styles.css

@@ -862,18 +862,21 @@ footer a:hover {
 }
 
 dialog {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    max-width: 400px;
-    width: 90%;
-    padding: var(--space-xl);
-    background: var(--bg-secondary);
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
     color: var(--text-primary);
+    background: var(--bg-secondary);
+    padding: var(--space-xl);
+    max-width: 400px;
+    width: 90%;
+    max-height: 90vh;
+    overflow-y: auto;
+}
+
+dialog[open] {
+    display: flex;
+    flex-direction: column;
 }
 
 dialog::backdrop {
@@ -910,6 +913,103 @@ kbd {
     border-radius: var(--radius-sm);
 }
 
+/* Import Dialog Styles */
+#import-dialog {
+    max-width: 650px;
+    width: 95%;
+}
+
+.import-instructions {
+    margin-bottom: var(--space-lg);
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.import-examples {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: var(--space-md);
+    margin: var(--space-md) 0;
+}
+
+.import-example {
+    background: var(--bg-tertiary);
+    padding: var(--space-md);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--border-color);
+}
+
+.import-example strong {
+    display: block;
+    margin-bottom: var(--space-xs);
+    color: var(--accent);
+    font-size: 0.85rem;
+}
+
+.import-example pre {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--text-primary);
+    white-space: pre;
+}
+
+.import-notes {
+    background: var(--bg-tertiary);
+    padding: var(--space-md);
+    border-radius: var(--radius-sm);
+    border-left: 3px solid var(--accent);
+    margin-top: var(--space-md);
+}
+
+.import-notes p {
+    margin: 0 0 var(--space-xs);
+}
+
+.import-notes ul {
+    margin: var(--space-sm) 0 0;
+    padding-left: var(--space-lg);
+    font-size: 0.85rem;
+}
+
+.import-notes li {
+    margin-bottom: var(--space-xs);
+}
+
+#import-textarea {
+    width: 100%;
+    min-height: 200px;
+    padding: var(--space-md);
+    font-family: var(--font-mono);
+    font-size: 0.9rem;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    resize: vertical;
+    margin-bottom: var(--space-md);
+}
+
+#import-textarea:focus {
+    outline: 2px solid var(--accent);
+    outline-offset: 0;
+    border-color: var(--accent);
+}
+
+#import-textarea::placeholder {
+    color: var(--text-muted);
+}
+
+.dialog-buttons {
+    display: flex;
+    gap: var(--space-md);
+    justify-content: flex-end;
+}
+
+.dialog-buttons .btn {
+    min-width: 100px;
+}
+
 @media (max-width: 640px) {
     .container {
         padding: var(--space-md);
@@ -959,6 +1059,28 @@ kbd {
     .metric-tooltip::after {
         left: 20%;
     }
+
+    dialog {
+        width: 95%;
+        max-width: none;
+        padding: var(--space-lg);
+    }
+
+    #import-dialog {
+        max-height: 85vh;
+    }
+
+    .import-examples {
+        grid-template-columns: 1fr;
+    }
+
+    .dialog-buttons {
+        flex-direction: column-reverse;
+    }
+
+    .dialog-buttons .btn {
+        width: 100%;
+    }
 }
 
 @media (prefers-reduced-motion: reduce) {