DataModels + Appv2 migration : OK

styles/components/actor.less

@@ -111,6 +111,28 @@
     &:hover { color: #4b4a44; }
   }
 
+  .horde-stat-label {
+    font-weight: bold;
+    font-family: "Wolfsbane2Expanded", cursive;
+    font-size: 1rem;
+    font-variant: small-caps;
+    color: #4b4a44;
+    display: flex;
+    align-items: center;
+  }
+
+  .horde-stat-row {
+    align-items: center;
+    margin-bottom: 4px;
+  }
+
+  .horde-stat-sep {
+    color: #4b4a44;
+    font-weight: bold;
+    padding: 0 4px;
+    flex: 0;
+  }
+
   .bol-footer {
     height: 62px;
     max-height: 62px;
@@ -346,12 +368,166 @@
 }
 
 .character-summary-container {
-  opacity: 0.95;
+  background: #f5f0e8;
+  padding: 4px;
+
+  // Table layout
+  .cs-table {
+    width: 100%;
+    margin: 0;
+  }
+
+  // Section headers (PJs / PNJs)
+  .cs-section-header {
+    background: linear-gradient(135deg, #7a0000, darkred);
+    padding: 4px 6px;
+    min-height: 28px;
+    align-items: center;
+    margin-top: 2px;
+
+    .item-name,
+    .cs-name-col {
+      font-family: "Wolfsbane2Expanded", cursive !important;
+      font-size: 1.1em !important;
+      color: #fff !important;
+      text-shadow: 0 1px 2px rgba(0,0,0,0.5);
+    }
+    .cs-group-header {
+      font-family: 'Signika', sans-serif !important;
+      font-size: 0.75em !important;
+      color: #ffdddd !important;
+      text-align: center;
+      justify-content: center;
+      text-transform: uppercase;
+      letter-spacing: 0.06em;
+      border-left: 1px solid rgba(255,255,255,0.25);
+    }
+  }
+
+  // Column sub-header row (abbrevs)
+  .cs-col-row {
+    background: #ede0cc;
+    min-height: 20px;
+    padding: 1px 6px;
+    align-items: center;
+    border-bottom: 1px solid #c8b89a;
+    .cs-col-header {
+      font-family: 'Signika', sans-serif !important;
+      font-size: 0.75em !important;
+      color: #7a0000 !important;
+      text-align: center;
+      justify-content: center;
+      font-weight: bold;
+    }
+  }
+
+  // Actor portrait
+  .cs-portrait-col {
+    flex: 0 0 34px;
+    width: 34px;
+    min-width: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .cs-portrait {
+    width: 30px;
+    height: 30px;
+    border-radius: 3px;
+    border: 1px solid #c0a080;
+    object-fit: cover;
+  }
+
+  // Name column
+  .cs-name-col {
+    min-width: 9rem;
+    width: 9rem;
+  }
+
+  // Actor rows
+  .cs-actor-row {
+    min-height: 36px;
+    padding: 3px 4px;
+    border-bottom: 1px solid #d0c8b8;
+    align-items: center;
+    background: #faf6ee;
+    transition: background 0.15s;
+
+    &:hover {
+      background: #ede8dc;
+    }
+  }
+
+  // Actor name link
+  .cs-actor-name {
+    font-family: 'Signika', sans-serif;
+    font-size: 0.9em;
+    color: #7a0000;
+    font-weight: bold;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover { text-decoration: underline; }
+  }
+
+  // Stat cells (clickable rolls)
+  .cs-stat {
+    justify-content: center;
+    text-align: center;
+  }
+  // Visual separator at start of a column group
+  .cs-group-sep {
+    border-left: 1px solid #c0a878;
+  }
+  .cs-col-row .cs-group-sep {
+    border-left: 1px solid #c0a878;
+  }
+  .cs-rollable {
+    display: inline-block;
+    min-width: 1.8em;
+    text-align: center;
+    color: #333;
+    font-size: 0.88em;
+    font-weight: bold;
+    font-family: 'Orbitron', sans-serif;
+    border-radius: 3px;
+    padding: 1px 3px;
+    cursor: pointer;
+    text-decoration: none;
+
+    &:hover {
+      background: darkred;
+      color: #fff;
+    }
+  }
+
+  // Resource cells (val/max)
+  .cs-resource {
+    justify-content: center;
+    font-size: 0.82em;
+    color: #555;
+    gap: 1px;
+  }
+  .cs-res-val { color: #191813; font-weight: bold; font-family: 'Orbitron', sans-serif; }
+  .cs-res-sep { color: #999; }
+  .cs-res-max { color: #888; font-family: 'Orbitron', sans-serif; }
+
+  // Horoscope inputs
+  .cs-input {
+    width: 3rem;
+    text-align: center;
+    border: 1px solid #c0a080;
+    border-radius: 3px;
+    padding: 2px 4px;
+    background: #fff;
+    font-size: 0.85em;
+  }
+
+  // Delete button
+  .actor-delete { color: #c0392b; }
+  .actor-delete:hover { color: #e74c3c; }
 }
 
-.character-summary-rollable {
-  text-decoration: underline;
-}
 
 .activated-green {
   color: darkgreen;