Various enhancements, restyling and new options

styles/components/_preset-import-export.less

@@ -16,8 +16,12 @@
 
 .scrying-pool.dialog.preset-export,
 .scrying-pool.dialog.preset-import {
-  background: var(--sp-surface);
+  background: var(--sp-dialog-bg);
   color: var(--sp-text-primary);
+  border: var(--sp-dialog-border);
+  border-top: 2px solid var(--sp-accent);
+  border-radius: var(--sp-dialog-radius);
+  box-shadow: var(--sp-dialog-shadow);
 
   .sp-dialog-content {
     padding: var(--sp-space-m);
@@ -29,8 +33,9 @@
     justify-content: flex-end;
     gap: var(--sp-space-xs);
     padding: var(--sp-space-m);
-    border-top: 1px solid var(--sp-border);
-    background: var(--sp-surface);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 0 0 var(--sp-dialog-radius) var(--sp-dialog-radius);
   }
 
   // Description text
@@ -89,61 +94,66 @@
   }
 
   // ---------------------------------------------------------------------------
-  // Buttons
+  // Buttons — using shared SP button tokens
   // ---------------------------------------------------------------------------
 
   .sp-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    gap: var(--sp-space-xs);
-    padding: var(--sp-space-xs) var(--sp-space-m);
-    border: none;
-    border-radius: var(--sp-radius-sm);
-    font-size: var(--sp-font-size-sm);
-    font-weight: 500;
+    gap: var(--sp-btn-gap, 6px);
+    padding: var(--sp-btn-padding, 7px 14px);
+    border: 1px solid transparent;
+    border-radius: var(--sp-btn-radius, 5px);
+    font-size: var(--sp-btn-font-size, 12px);
+    font-weight: 600;
     cursor: pointer;
-    transition: all 0.15s ease;
+    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
+    line-height: 1.2;
 
     &:disabled {
-      opacity: 0.5;
+      opacity: 0.45;
       cursor: not-allowed;
+      pointer-events: none;
     }
 
     i {
       font-size: 0.9em;
+      pointer-events: none;
     }
   }
 
   .sp-btn-primary {
-    background: var(--sp-accent);
-    color: var(--sp-accent-text);
+    background: var(--sp-btn-primary-bg, var(--sp-accent));
+    color: var(--sp-btn-primary-text, #fff);
 
     &:hover:not(:disabled) {
-      background: var(--sp-accent-hover);
+      background: var(--sp-btn-primary-hover, var(--sp-accent-hover));
     }
 
     &:active:not(:disabled) {
-      background: var(--sp-accent-active);
+      background: var(--sp-btn-primary-active, var(--sp-accent-active));
     }
   }
 
   .sp-btn-secondary {
-    background: var(--sp-surface-subtle);
-    color: var(--sp-text-primary);
-    border: 1px solid var(--sp-border);
+    background: var(--sp-btn-secondary-bg, rgba(255,255,255,0.05));
+    color: var(--sp-btn-secondary-text, var(--sp-text-secondary));
+    border-color: var(--sp-btn-secondary-border, rgba(255,255,255,0.12));
+    font-weight: 500;
 
     &:hover:not(:disabled) {
-      background: var(--sp-surface);
+      background: var(--sp-btn-secondary-hover-bg, rgba(255,255,255,0.1));
+      color: var(--sp-btn-secondary-hover-text, var(--sp-text-primary));
     }
   }
 
   .sp-btn-danger {
-    background: var(--sp-color-red);
-    color: white;
+    background: var(--sp-btn-danger-bg, var(--sp-color-red));
+    color: var(--sp-btn-danger-text, #fff);
 
     &:hover:not(:disabled) {
-      background: var(--sp-color-red-dark);
+      background: var(--sp-btn-danger-hover, var(--sp-color-red-dark));
     }
   }
 
@@ -173,17 +183,17 @@
     align-items: center;
     gap: var(--sp-space-xs);
     padding: var(--sp-space-sm) var(--sp-space-m);
-    background: var(--sp-surface-subtle);
-    border: 1px dashed var(--sp-border);
-    border-radius: var(--sp-radius-sm);
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px dashed rgba(255, 255, 255, 0.2);
+    border-radius: var(--sp-btn-radius, 5px);
     cursor: pointer;
     color: var(--sp-text-secondary);
-    transition: all 0.15s ease;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
 
     &:hover {
       border-color: var(--sp-accent);
       color: var(--sp-accent);
-      background: var(--sp-surface);
+      background: rgba(255, 255, 255, 0.06);
     }
 
     i {
@@ -222,12 +232,12 @@
     align-items: flex-start;
     gap: var(--sp-space-sm);
     padding: var(--sp-space-xs) var(--sp-space-sm);
-    border-radius: var(--sp-radius-sm);
+    border-radius: var(--sp-btn-radius, 5px);
     cursor: pointer;
     transition: background 0.15s ease;
 
     &:hover {
-      background: var(--sp-surface-subtle);
+      background: rgba(255, 255, 255, 0.04);
     }
 
     input[type="radio"] {
@@ -273,9 +283,9 @@
     padding: 0;
     max-height: 200px;
     overflow-y: auto;
-    border: 1px solid var(--sp-border);
-    border-radius: var(--sp-radius-sm);
-    background: var(--sp-surface);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: var(--sp-btn-radius, 5px);
+    background: rgba(0, 0, 0, 0.2);
   }
 
   .sp-preview-item {