Fix styling issues: dialog backgrounds, spacing tokens, and module category

- Added category 'Audio/Video' to module.json to fix 'Non répertorié' issue
- Created styles/tokens/_spacing.less with spacing tokens (xxs, xs, sm, md, lg, xl, 2xl)
- Added legacy aliases (--sp-space-xs, --sp-space-sm, --sp-space-m, etc.) for preset-import-export.less
- Added --sp-bg and --sp-surface-elevated tokens to _base.less
- Fixed _player-privacy-panel.less to use CSS custom properties instead of LESS variables
- Added background: var(--sp-surface) to all dialog root elements:
  - PlayerPrivacyPanel
  - PresetSaveDialog
  - PresetLoadDialog
  - DirectorsBoard
  - PresetImport/Export dialogs
- Added _spacing.less import to scrying-pool.less
- Rebuilt CSS (dist/styles/scrying-pool.css)

This fixes:
1. Transparent dialogs (now have proper background colors)
2. Missing spacing tokens (caused build errors)
3. Module category (now shows as 'Audio/Video' instead of 'Uncategorized')

All 900 unit tests passing.

Generated by Mistral Vibe.
Co-Authored-By: Mistral Vibe <vibe@mistral.ai>

module.json

@@ -8,6 +8,7 @@
       "name": "Morr"
     }
   ],
+  "category": "Audio/Video",
   "compatibility": {
     "minimum": "14",
     "verified": "14"

styles/components/_directors-board.less

@@ -10,6 +10,8 @@
 // via DEFAULT_OPTIONS.classes. The content section and footer live inside PARTS.
 
 .scrying-pool.directors-board {
+  background: var(--sp-surface);
+  color: var(--sp-text-primary);
 
   // ── Participant grid ──────────────────────────────────────────────────────
   .directors-board__content {

styles/components/_player-privacy-panel.less

@@ -9,6 +9,12 @@
 @import "../tokens/_base.less";
 
 .scrying-pool {
+  // Dialog root element
+  .player-privacy-panel {
+    background: var(--sp-surface);
+    color: var(--sp-text-primary);
+  }
+
   // Container
   .player-privacy-panel__container {
     display: flex;
@@ -19,7 +25,7 @@
 
   // Header
   .player-privacy-panel__header {
-    padding: @sp-spacing-sm @sp-spacing-md;
+    padding: var(--sp-spacing-sm, 8px) var(--sp-spacing-md, 12px);
     border-bottom: 1px solid var(--sp-border);
     background: var(--sp-surface);
   }
@@ -34,15 +40,15 @@
 
   // Body
   .player-privacy-panel__body {
-    padding: @sp-spacing-md;
+    padding: var(--sp-spacing-md, 12px);
     background: var(--sp-surface);
   }
 
   // Notice (read-only)
   .player-privacy-panel__notice {
-    padding: @sp-spacing-sm @sp-spacing-md;
+    padding: var(--sp-spacing-sm, 8px) var(--sp-spacing-md, 12px);
-    margin-bottom: @sp-spacing-md;
+    margin-bottom: var(--sp-spacing-md, 12px);
-    border-radius: @sp-border-radius;
+    border-radius: var(--sp-border-radius, 4px);
     font-size: 0.85em;
     text-align: center;
   }
@@ -55,18 +61,18 @@
 
   // Section
   .player-privacy-panel__section {
-    margin-bottom: @sp-spacing-md;
+    margin-bottom: var(--sp-spacing-md, 12px);
   }
 
   .player-privacy-panel__section-header {
-    margin: 0 0 @sp-spacing-xs 0;
+    margin: 0 0 var(--sp-spacing-xs, 4px) 0;
     font-size: 0.95em;
     font-weight: 600;
     color: var(--sp-text-primary);
   }
 
   .player-privacy-panel__section-description {
-    margin: 0 0 @sp-spacing-md 0;
+    margin: 0 0 var(--sp-spacing-md, 12px) 0;
     font-size: 0.85em;
     color: var(--sp-text-secondary);
     line-height: 1.4;
@@ -76,14 +82,14 @@
   .player-privacy-panel__effects-list {
     display: flex;
     flex-direction: column;
-    gap: @sp-spacing-md;
+    gap: var(--sp-spacing-md, 12px);
   }
 
   // Individual effect
   .player-privacy-panel__effect {
-    padding: @sp-spacing-sm;
+    padding: var(--sp-spacing-sm, 8px);
     border: 1px solid var(--sp-border);
-    border-radius: @sp-border-radius;
+    border-radius: var(--sp-border-radius, 4px);
     background: var(--sp-surface-elevated);
   }
 
@@ -91,7 +97,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: @sp-spacing-xs;
+    margin-bottom: var(--sp-spacing-xs, 4px);
   }
 
   .player-privacy-panel__effect-label {
@@ -117,7 +123,7 @@
   .player-privacy-panel__toggle-label {
     display: flex;
     align-items: center;
-    gap: @sp-spacing-xs;
+    gap: var(--sp-spacing-xs, 4px);
     cursor: pointer;
     user-select: none;
     font-size: 0.85em;
@@ -143,9 +149,9 @@
 
   .player-privacy-panel__toggle-text {
     display: inline-block;
-    padding: @sp-spacing-xs @sp-spacing-sm;
+    padding: var(--sp-spacing-xs, 4px) var(--sp-spacing-sm, 8px);
     border: 1px solid var(--sp-border);
-    border-radius: @sp-border-radius;
+    border-radius: var(--sp-border-radius, 4px);
     background: var(--sp-surface);
     color: var(--sp-text-primary);
     font-weight: 500;
@@ -173,14 +179,14 @@
   .player-privacy-panel__portrait-container {
     display: flex;
     flex-direction: column;
-    gap: @sp-spacing-sm;
+    gap: var(--sp-spacing-sm, 8px);
   }
 
   .player-privacy-panel__portrait-preview {
     width: 100px;
     height: 100px;
     border: 2px solid var(--sp-border);
-    border-radius: @sp-border-radius;
+    border-radius: var(--sp-border-radius, 4px);
     overflow: hidden;
     background: var(--sp-surface-elevated);
     display: flex;
@@ -196,13 +202,13 @@
 
   .player-privacy-panel__portrait-actions {
     display: flex;
-    gap: @sp-spacing-sm;
+    gap: var(--sp-spacing-sm, 8px);
     flex-wrap: wrap;
   }
 
   .player-privacy-panel__portrait-choose,
   .player-privacy-panel__portrait-remove {
     font-size: 0.85em;
-    padding: @sp-spacing-xs @sp-spacing-sm;
+    padding: var(--sp-spacing-xs, 4px) var(--sp-spacing-sm, 8px);
   }
 }

styles/components/_preset-import-export.less

@@ -9,6 +9,9 @@
 
 .scrying-pool.dialog.preset-export,
 .scrying-pool.dialog.preset-import {
+  background: var(--sp-surface);
+  color: var(--sp-text-primary);
+
   .sp-dialog-content {
     padding: var(--sp-space-m);
     color: var(--sp-text-primary);

styles/components/_preset-load-dialog.less

@@ -10,6 +10,8 @@
 // via DEFAULT_OPTIONS.classes. The content lives inside PARTS.
 
 .scrying-pool.preset-load-dialog {
+  background: var(--sp-surface);
+  color: var(--sp-text-primary);
 
   // ── Content wrapper ────────────────────────────────────────────────────
   .preset-load-dialog__content {

styles/components/_preset-save-dialog.less

@@ -10,6 +10,8 @@
 // via DEFAULT_OPTIONS.classes. The content lives inside PARTS.
 
 .scrying-pool.preset-save-dialog {
+  background: var(--sp-surface);
+  color: var(--sp-text-primary);
 
   // ── Form ───────────────────────────────────────────────────────────────
   .preset-save-dialog__form {

styles/scrying-pool.less

@@ -9,6 +9,7 @@
 
 // ── Token layers ─────────────────────────────────────────────────────────────
 @import "tokens/_base.less";
+@import "tokens/_spacing.less";
 @import "tokens/_states.less";
 @import "tokens/_motion.less";
 @import "tokens/_focus.less";

styles/tokens/_base.less

@@ -17,8 +17,10 @@
 
 :root {
   /* Surface & structure */
+  --sp-bg:                 var(--sp-theme-bg,            var(--color-bg,              hsl(220, 15%, 12%)));
   --sp-surface:             var(--sp-theme-surface,       var(--color-bg-option,       #141618));
   --sp-surface-raised:      var(--sp-theme-surface-raised, #1c1f22);
+  --sp-surface-elevated:   var(--sp-theme-surface-elevated, var(--sp-surface-raised, #1c1f22));
   --sp-border:              var(--sp-theme-border,        var(--color-border,          #282c30));
 
   /* Typography */
@@ -45,8 +47,10 @@
 /* Theme overrides — dark theme defaults */
 .scrying-pool,
 :root[data-color-scheme="dark"] {
+  --sp-theme-bg:              hsl(220, 15%, 12%);
   --sp-theme-surface:        #141618;
   --sp-theme-surface-raised: #1c1f22;
+  --sp-theme-surface-elevated: #1c1f22;
   --sp-theme-border:         #282c30;
   --sp-theme-text-primary:   #dde2e8;
   --sp-theme-text-secondary: #7a8390;

styles/tokens/_spacing.less

@@ -0,0 +1,29 @@
+/**
+ * styles/tokens/_spacing.less
+ *
+ * Layer 1 — SP Spacing Tokens
+ *
+ * Semantic spacing tokens for consistent layout.
+ * Maps to Foundry's spacing scale where available.
+ */
+
+:root {
+  --sp-spacing-xxs: 2px;
+  --sp-spacing-xs: 4px;
+  --sp-spacing-sm: 8px;
+  --sp-spacing-md: 12px;
+  --sp-spacing-lg: 16px;
+  --sp-spacing-xl: 24px;
+  --sp-spacing-2xl: 32px;
+  
+  /* Border radius */
+  --sp-border-radius: 4px;
+  --sp-border-radius-lg: 8px;
+  
+  /* Legacy aliases for preset-import-export.less */
+  --sp-space-xs: var(--sp-spacing-xs, 4px);
+  --sp-space-sm: var(--sp-spacing-sm, 8px);
+  --sp-space-m: var(--sp-spacing-md, 12px);
+  --sp-space-l: var(--sp-spacing-lg, 16px);
+  --sp-space-xl: var(--sp-spacing-xl, 24px);
+}