Style full diagram plugin with Nord theme and dark mode support

- Add Nord-aligned gender colors: frost blue (nord9) for male,
  aurora purple (nord15) for female, in both light and dark mode
- Override plugin CSS with !important to ensure theme takes effect
- Dark mode: white names (nord6), lighter dates/subtitle (nord4),
  dark card backgrounds, themed bio tooltip and zoom controls
- Increase subtitle font size from 9px to 10px for readability
- Unify all connector line colors to use --color-border consistently

src/scss/theme.scss

@@ -1241,6 +1241,103 @@ a:hover,
   color: var(--color-text-primary);
 }
 
+// ============================================================================
+// FULL DIAGRAM PLUGIN
+// ============================================================================
+
+// Nord-aligned gender colors
+$diagram-m-fill: color.mix($nord9, $nord6, 25%);     // soft blue
+$diagram-m-stroke: $nord9;
+$diagram-m-photo: color.mix($nord9, $nord6, 40%);
+$diagram-f-fill: color.mix($nord15, $nord6, 25%);    // soft pink/purple
+$diagram-f-stroke: $nord15;
+$diagram-f-photo: color.mix($nord15, $nord6, 40%);
+$diagram-m-fill-dark: color.mix($nord9, $nord1, 30%);
+$diagram-m-stroke-dark: $nord9;
+$diagram-f-fill-dark: color.mix($nord15, $nord1, 30%);
+$diagram-f-stroke-dark: $nord15;
+
+.full-diagram-container {
+  border-color: var(--color-border);
+  background: var(--color-bg-primary);
+}
+
+.full-diagram-block {
+  border-color: var(--color-border);
+}
+
+// Person cards
+.person-card rect {
+  fill: var(--color-bg-secondary) !important;
+  stroke: var(--color-border) !important;
+  rx: 8;
+}
+
+.person-card.sex-m rect {
+  fill: #{$diagram-m-fill} !important;
+  stroke: #{$diagram-m-stroke} !important;
+}
+
+.person-card.sex-f rect {
+  fill: #{$diagram-f-fill} !important;
+  stroke: #{$diagram-f-stroke} !important;
+}
+
+.person-card.is-root rect {
+  stroke: var(--color-text-primary) !important;
+  stroke-width: 2.5;
+}
+
+// Photo placeholder
+.person-card .photo-placeholder { fill: var(--color-bg-tertiary) !important; }
+.person-card.sex-m .photo-placeholder { fill: #{$diagram-m-photo} !important; }
+.person-card.sex-f .photo-placeholder { fill: #{$diagram-f-photo} !important; }
+.person-card .silhouette { fill: rgba(255, 255, 255, 0.6) !important; }
+
+// Card text
+.person-card .person-name { fill: var(--color-text-primary) !important; }
+.person-card .person-dates { fill: var(--color-text-secondary) !important; }
+.person-card .person-subtitle { fill: var(--color-text-tertiary) !important; font-size: 10px !important; }
+
+// More ancestors indicator
+.more-ancestors-indicator rect { fill: var(--color-bg-tertiary) !important; stroke: var(--color-border) !important; }
+.person-card.sex-m .more-ancestors-indicator rect { fill: #{$diagram-m-photo} !important; stroke: #{$diagram-m-stroke} !important; }
+.person-card.sex-f .more-ancestors-indicator rect { fill: #{$diagram-f-photo} !important; stroke: #{$diagram-f-stroke} !important; }
+.more-ancestors-indicator line { stroke: var(--color-border) !important; }
+
+// Connector lines
+.link,
+.couple-link,
+.spouse-link { stroke: var(--color-border) !important; }
+
+// Bio card tooltip
+.bio-card {
+  background: var(--color-surface);
+  border-color: var(--color-border);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  color: var(--color-text-primary);
+}
+
+.bio-age { color: var(--color-text-secondary); }
+.bio-facts { border-top-color: var(--color-border); }
+.bio-fact-label { color: var(--color-text-secondary); }
+.bio-fact-value { color: var(--color-text-tertiary); }
+.bio-link {
+  color: var(--color-link);
+  border-top-color: var(--color-border);
+}
+
+// Zoom controls
+.zoom-controls button {
+  border-color: var(--color-border);
+  background: var(--color-surface);
+  color: var(--color-text-primary);
+
+  &:hover {
+    background: var(--color-surface-hover);
+  }
+}
+
 // ============================================================================
 // FOOTER
 // ============================================================================
@@ -1886,6 +1983,62 @@ div[id^=caldiv] {
     }
   }
 
+  // Full diagram plugin
+  .full-diagram-container {
+    background: var(--color-bg-primary) !important;
+    border-color: var(--color-border) !important;
+  }
+
+  .person-card rect {
+    fill: var(--color-bg-tertiary) !important;
+    stroke: var(--color-border) !important;
+  }
+
+  .person-card.sex-m rect {
+    fill: #{$diagram-m-fill-dark} !important;
+    stroke: #{$diagram-m-stroke-dark} !important;
+  }
+
+  .person-card.sex-f rect {
+    fill: #{$diagram-f-fill-dark} !important;
+    stroke: #{$diagram-f-stroke-dark} !important;
+  }
+
+  .person-card .person-name { fill: #{$nord6} !important; }
+  .person-card .person-dates { fill: #{$nord4} !important; }
+  .person-card .person-subtitle { fill: #{$nord4} !important; }
+
+  .person-card.sex-m .photo-placeholder { fill: #{color.mix($nord9, $nord0, 40%)} !important; }
+  .person-card.sex-f .photo-placeholder { fill: #{color.mix($nord15, $nord0, 40%)} !important; }
+
+  .more-ancestors-indicator rect {
+    fill: var(--color-bg-elevated) !important;
+  }
+  .person-card.sex-m .more-ancestors-indicator rect { fill: #{color.mix($nord9, $nord0, 30%)} !important; }
+  .person-card.sex-f .more-ancestors-indicator rect { fill: #{color.mix($nord15, $nord0, 30%)} !important; }
+
+  .bio-card {
+    background: var(--color-bg-elevated) !important;
+    border-color: var(--color-border) !important;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
+    color: var(--color-text-primary) !important;
+  }
+
+  .bio-name { color: var(--color-text-primary) !important; }
+  .bio-age { color: var(--color-text-secondary) !important; }
+  .bio-fact-label { color: var(--color-text-secondary) !important; }
+  .bio-fact-value { color: var(--color-text-tertiary) !important; }
+
+  .zoom-controls button {
+    background: var(--color-bg-elevated) !important;
+    border-color: var(--color-border) !important;
+    color: var(--color-text-primary) !important;
+
+    &:hover {
+      background: var(--color-surface-hover) !important;
+    }
+  }
+
   img {
     opacity: 0.92;
   }