@keenmate/pure-admin-core 2.6.0 → 2.7.1

package/dist/css/main.css

@@ -2629,6 +2629,19 @@ p {
   padding: 0;
 }
 
+:where(a) {
+  color: var(--pa-link-color);
+  text-decoration: underline;
+}
+
+:where(a:hover) {
+  color: var(--pa-link-color-hover);
+}
+
+:where(a:visited) {
+  color: var(--pa-link-color-visited);
+}
+
 ul, ol {
   margin: 0 0 1.6rem 0;
   padding: 0;
@@ -2692,7 +2705,7 @@ body::before {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle at 20% 80%, rgba(0, 123, 255, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(0, 123, 255, 0.03) 0%, transparent 50%);
+  background: radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--pa-accent) 3%, transparent) 0%, transparent 50%), radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--pa-accent) 3%, transparent) 0%, transparent 50%);
   pointer-events: none;
   z-index: -1;
 }
@@ -3132,6 +3145,7 @@ body.loaded .pa-sidebar__label {
 }
 .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__link--active {
   background-color: var(--pa-sidebar-submenu-active-bg);
+  color: var(--pa-sidebar-submenu-active-text);
   border-inline-end-color: var(--pa-accent);
 }
 .pa-sidebar__submenu > .pa-sidebar__item > .pa-sidebar__toggle {
@@ -3271,6 +3285,7 @@ body.loaded .pa-sidebar__chevron {
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__submenu:hover .pa-sidebar__link--active,
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__submenu:hover .pa-sidebar__toggle--active {
   background-color: var(--pa-sidebar-submenu-active-bg);
+  color: var(--pa-sidebar-submenu-active-text);
 }
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__item:hover > .pa-sidebar__submenu .pa-sidebar__icon,
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__submenu:hover .pa-sidebar__icon {
@@ -5664,11 +5679,11 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   border-top: none !important;
 }
 .pa-card--live-up {
-  background-color: rgba(34, 197, 94, 0.1);
+  background-color: color-mix(in srgb, var(--pa-positive) 10%, transparent);
   transition: background-color 0.3s ease;
 }
 .pa-card--live-down {
-  background-color: rgba(239, 68, 68, 0.1);
+  background-color: color-mix(in srgb, var(--pa-negative) 10%, transparent);
   transition: background-color 0.3s ease;
 }
 .pa-card--live-neutral {
@@ -5826,7 +5841,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 .pa-card__tab:hover {
   color: var(--pa-text-color-1);
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-card__tab--active {
   color: var(--pa-accent);
@@ -5856,7 +5871,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   transition: all 0.1s ease-out;
 }
 .pa-card__tabs--inline .pa-card__tab:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-card__tabs--inline .pa-card__tab--active {
@@ -5923,11 +5938,11 @@ a.pa-card p {
 }
 .pa-tabs__item:hover {
   color: var(--pa-text-color-1);
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-tabs__item--active {
-  color: #007bff;
-  border-bottom-color: #007bff;
+  color: var(--pa-accent);
+  border-bottom-color: var(--pa-accent);
   font-weight: 600;
 }
 .pa-tabs__item i {
@@ -5953,8 +5968,8 @@ a.pa-card p {
   background-color: var(--pa-main-bg);
 }
 .pa-tabs--pills .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.1);
-  border-color: rgba(0, 123, 255, 0.3);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
+  border-color: color-mix(in srgb, var(--pa-accent) 30%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-tabs--pills .pa-tabs__item--active {
@@ -5976,7 +5991,7 @@ a.pa-card p {
   padding: 0.8rem 1.2rem;
 }
 .pa-tabs--boxed .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-tabs--boxed .pa-tabs__item--active {
@@ -6008,11 +6023,11 @@ a.pa-card p {
   min-height: 4rem;
 }
 .pa-tabs--vertical .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-tabs--vertical .pa-tabs__item--active {
-  border-inline-end-color: #007bff;
-  background-color: rgba(0, 123, 255, 0.1);
+  border-inline-end-color: var(--pa-accent);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 .pa-tabs--vertical .pa-tabs__item i {
   width: 2.4rem;
@@ -6204,7 +6219,7 @@ a.pa-card p {
   height: 4rem;
 }
 .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
@@ -6248,10 +6263,10 @@ a.pa-card p {
   white-space: nowrap;
 }
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item:hover {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item--active {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   border-bottom: none;
 }
 .pa-tabs__vertical-layout {
@@ -6295,20 +6310,24 @@ a.pa-card p {
   font-size: 2rem;
 }
 .pa-stat__icon--primary {
-  background-color: rgba(0, 123, 255, 0.1);
-  color: #007bff;
+  background-color: var(--pa-accent-light);
+  color: var(--pa-accent);
 }
 .pa-stat__icon--success {
-  background-color: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
+  background-color: var(--pa-success-bg-light);
+  color: var(--pa-success-bg);
 }
 .pa-stat__icon--warning {
-  background-color: rgba(249, 115, 22, 0.1);
-  color: #f97316;
+  background-color: var(--pa-warning-bg-light);
+  color: var(--pa-warning-bg);
+}
+.pa-stat__icon--danger {
+  background-color: var(--pa-danger-bg-light);
+  color: var(--pa-danger-bg);
 }
 .pa-stat__icon--info {
-  background-color: rgba(23, 162, 184, 0.1);
-  color: #17a2b8;
+  background-color: var(--pa-info-bg-light);
+  color: var(--pa-info-bg);
 }
 .pa-stat__content {
   flex: 1;
@@ -6347,14 +6366,20 @@ a.pa-card p {
   font-size: 1.2rem;
   font-weight: 600;
 }
+.pa-stat--hero .pa-stat__change--very-positive, .pa-stat--hero-compact .pa-stat__change--very-positive {
+  color: var(--pa-very-positive);
+}
 .pa-stat--hero .pa-stat__change--positive, .pa-stat--hero-compact .pa-stat__change--positive {
-  color: #22c55e;
+  color: var(--pa-positive);
+}
+.pa-stat--hero .pa-stat__change--neutral, .pa-stat--hero-compact .pa-stat__change--neutral {
+  color: var(--pa-neutral);
 }
 .pa-stat--hero .pa-stat__change--negative, .pa-stat--hero-compact .pa-stat__change--negative {
-  color: #ef4444;
+  color: var(--pa-negative);
 }
-.pa-stat--hero .pa-stat__change--neutral, .pa-stat--hero-compact .pa-stat__change--neutral {
-  color: var(--pa-text-color-2);
+.pa-stat--hero .pa-stat__change--very-negative, .pa-stat--hero-compact .pa-stat__change--very-negative {
+  color: var(--pa-very-negative);
 }
 .pa-stat--square {
   container-type: inline-size;
@@ -6497,21 +6522,21 @@ a.pa-card p {
 }
 .pa-list-basic--icon li::before {
   content: "✓";
-  color: #22c55e;
+  color: var(--pa-success);
   font-weight: 600;
   flex-shrink: 0;
 }
 .pa-list-basic--icon.pa-list-basic--danger li::before {
   content: "✗";
-  color: #ef4444;
+  color: var(--pa-danger);
 }
 .pa-list-basic--icon.pa-list-basic--info li::before {
   content: "→";
-  color: #17a2b8;
+  color: var(--pa-info);
 }
 .pa-list-basic--icon.pa-list-basic--warning li::before {
   content: "!";
-  color: #f97316;
+  color: var(--pa-warning);
 }
 
 .pa-list-ordered {
@@ -6767,7 +6792,7 @@ a.pa-card p {
 }
 .pa-composite-badge__button:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-danger) 25%, transparent);
 }
 
 /* ========================================
@@ -7031,7 +7056,7 @@ a.pa-card p {
   background-color: rgb(51, 149.4, 255);
 }
 .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-primary-bg) 25%, transparent);
 }
 .pa-composite-badge--btn-secondary .pa-composite-badge__button {
   background-color: #6c757d;
@@ -7040,7 +7065,7 @@ a.pa-card p {
   background-color: #545b62;
 }
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-secondary-bg) 25%, transparent);
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button {
   background-color: #22c55e;
@@ -7049,7 +7074,7 @@ a.pa-card p {
   background-color: rgb(26.4935064935, 153.5064935065, 73.2467532468);
 }
 .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-success) 25%, transparent);
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button {
   background-color: #f97316;
@@ -7059,7 +7084,7 @@ a.pa-card p {
   background-color: rgb(214.4769874477, 91.129707113, 5.5230125523);
 }
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-warning) 25%, transparent);
 }
 .pa-composite-badge--btn-info .pa-composite-badge__button {
   background-color: #17a2b8;
@@ -7068,7 +7093,7 @@ a.pa-card p {
   background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
 }
 .pa-composite-badge--btn-info .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-info) 25%, transparent);
 }
 .pa-composite-badge--btn-light .pa-composite-badge__button {
   background-color: #f8f9fa;
@@ -7078,7 +7103,7 @@ a.pa-card p {
   background-color: #e9ecef;
 }
 .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-light-bg) 25%, transparent);
 }
 .pa-composite-badge--btn-dark .pa-composite-badge__button {
   background-color: #343a40;
@@ -7087,7 +7112,7 @@ a.pa-card p {
   background-color: #1d2124;
 }
 .pa-composite-badge--btn-dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--pa-btn-dark-bg) 25%, transparent);
 }
 
 /* ========================================
@@ -7167,17 +7192,17 @@ a.pa-card p {
   background-color: var(--pa-accent-light);
 }
 .pa-label--secondary {
-  background-color: rgba(108, 117, 125, 0.1);
-  color: #6c757d;
-  border-color: #6c757d;
+  background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) 10%, transparent);
+  color: var(--pa-btn-secondary-bg);
+  border-color: var(--pa-btn-secondary-bg);
 }
 .pa-label--secondary.pa-label--outline {
   background-color: transparent;
-  color: #6c757d;
-  border-color: #6c757d;
+  color: var(--pa-btn-secondary-bg);
+  border-color: var(--pa-btn-secondary-bg);
 }
 .pa-label--secondary.pa-label--outline:hover {
-  background-color: rgba(108, 117, 125, 0.1);
+  background-color: color-mix(in srgb, var(--pa-btn-secondary-bg) 10%, transparent);
 }
 .pa-label--success {
   background-color: var(--pa-success-bg-light);
@@ -7764,15 +7789,16 @@ a.pa-card p {
 .pa-btn-split {
   position: relative;
   display: inline-flex;
-  border-radius: var(--pa-border-radius);
-  overflow: hidden;
 }
-.pa-btn-split .pa-btn {
-  border-radius: 0;
-}
-.pa-btn-split .pa-btn:first-child {
+.pa-btn-split > .pa-btn:first-child {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
   border-inline-end: none;
 }
+.pa-btn-split > .pa-btn-split__toggle {
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+}
 .pa-btn-split__toggle {
   border-inline-start: 1px solid rgba(255, 255, 255, 0.25);
   padding-inline: 0;
@@ -8776,8 +8802,8 @@ a.pa-card p {
 }
 .pa-alert--primary {
   color: var(--pa-accent);
-  background-color: rgba(0, 123, 255, 0.08);
-  border-color: rgba(0, 123, 255, 0.2);
+  background-color: color-mix(in srgb, var(--pa-accent) 8%, transparent);
+  border-color: color-mix(in srgb, var(--pa-accent) 20%, transparent);
 }
 .pa-alert--secondary {
   color: var(--pa-text-color-2);
@@ -9047,7 +9073,7 @@ a.pa-card p {
 }
 .pa-callout--primary {
   border-inline-start-color: var(--pa-accent);
-  background-color: rgba(0, 123, 255, 0.08);
+  background-color: color-mix(in srgb, var(--pa-accent) 8%, transparent);
 }
 .pa-callout--secondary {
   border-inline-start-color: var(--pa-text-color-2);
@@ -9722,7 +9748,7 @@ a.pa-card p {
 }
 .pa-input-wrapper__clear:hover {
   opacity: 1;
-  color: #ef4444;
+  color: var(--pa-danger);
 }
 .pa-input-wrapper__clear:focus {
   outline: none;
@@ -9797,16 +9823,16 @@ a.pa-card p {
 }
 .pa-search-highlight__field {
   display: inline;
-  background-color: rgba(0, 123, 255, 0.15);
-  color: #007bff;
+  background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
+  color: var(--pa-accent);
   padding: 0.2rem 0.4rem;
   border-radius: var(--pa-border-radius-sm);
   font-weight: 500;
 }
 .pa-search-highlight__operator {
   display: inline;
-  background-color: rgba(34, 197, 94, 0.15);
-  color: #22c55e;
+  background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
+  color: var(--pa-success);
   padding: 0.2rem 0.4rem;
   border-radius: var(--pa-border-radius-sm);
   font-weight: 500;
@@ -9957,24 +9983,24 @@ a.pa-card p {
   font-weight: 500;
 }
 .pa-inline-query-token--field {
-  background-color: rgba(0, 123, 255, 0.15);
+  background-color: color-mix(in srgb, var(--pa-accent) 15%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--field.pa-inline-query-token--invalid {
-  background-color: rgba(239, 68, 68, 0.15);
+  background-color: color-mix(in srgb, var(--pa-danger) 15%, transparent);
   color: var(--pa-text-color-1);
   text-decoration: wavy underline;
 }
 .pa-inline-query-token--operator {
-  background-color: rgba(var(--pa-text-color-2), 0.15);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--value {
-  background-color: rgba(34, 197, 94, 0.15);
+  background-color: color-mix(in srgb, var(--pa-success) 15%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-inline-query-token--keyword {
-  background-color: rgba(249, 115, 22, 0.15);
+  background-color: color-mix(in srgb, var(--pa-warning) 15%, transparent);
   color: var(--pa-text-color-1);
   font-style: italic;
 }
@@ -10028,7 +10054,7 @@ a.pa-card p {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 0.2rem 0.6rem;
-  background-color: rgba(var(--pa-text-color-2), 0.1);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
   color: var(--pa-text-color-2);
   border-radius: var(--pa-border-radius-sm);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -10257,12 +10283,12 @@ web-multiselect {
   cursor: pointer;
 }
 .pa-file-dropzone:hover {
-  border-color: #007bff;
-  background: rgba(0, 123, 255, 0.05);
+  border-color: var(--pa-accent);
+  background: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-file-dropzone--active {
-  border-color: #007bff;
-  background: rgba(0, 123, 255, 0.1);
+  border-color: var(--pa-accent);
+  background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   border-style: solid;
 }
 .pa-file-dropzone__input {
@@ -10288,7 +10314,7 @@ web-multiselect {
   margin-bottom: 0.4rem;
 }
 .pa-file-dropzone__text strong {
-  color: #007bff;
+  color: var(--pa-accent);
   font-weight: 600;
 }
 .pa-file-dropzone__hint {
@@ -10327,7 +10353,7 @@ web-multiselect {
   transition: all 0.1s ease-out;
 }
 .pa-file-dropzone__file-card:hover {
-  border-color: #007bff;
+  border-color: var(--pa-accent);
   box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
 }
 .pa-file-dropzone__file-card-icon {
@@ -10355,7 +10381,7 @@ web-multiselect {
   width: 2rem;
   height: 2rem;
   border: none;
-  background: #ef4444;
+  background: var(--pa-danger);
   color: #ffffff;
   cursor: pointer;
   border-radius: 50%;
@@ -10375,7 +10401,7 @@ web-multiselect {
 }
 .pa-file-dropzone__file-card-remove:hover {
   transform: scale(1.1);
-  background: rgba(239, 68, 68, 0.9);
+  background: color-mix(in srgb, var(--pa-danger) 90%, transparent);
 }
 .pa-file-dropzone__image-card {
   position: relative;
@@ -10416,7 +10442,7 @@ web-multiselect {
   opacity: 1;
 }
 .pa-file-dropzone__image-card-remove:hover {
-  background: #ef4444;
+  background: var(--pa-danger);
   transform: scale(1.1);
 }
 .pa-file-dropzone__summary {
@@ -10435,7 +10461,7 @@ web-multiselect {
   transition: background-color 0.1s ease-out;
 }
 .pa-file-dropzone__summary-line:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 .pa-file-dropzone__summary-line:not(:last-child)::after {
   content: " • ";
@@ -10445,7 +10471,7 @@ web-multiselect {
 }
 .pa-file-dropzone__summary-count {
   font-weight: 500;
-  color: #007bff;
+  color: var(--pa-accent);
 }
 .pa-file-dropzone__summary-size {
   color: var(--pa-text-color-2);
@@ -10519,7 +10545,7 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-popover__close:hover {
-  background: rgba(var(--pa-text-color-2), 0.1);
+  background: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
   color: var(--pa-text-color-1);
 }
 .pa-file-popover__body {
@@ -10553,10 +10579,10 @@ web-multiselect {
   color: var(--pa-text-color-1);
 }
 .pa-file-popover__table tbody tr:hover {
-  background: rgba(0, 123, 255, 0.05);
+  background: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-file-popover__table tbody tr.uploading {
-  background: rgba(0, 123, 255, 0.1);
+  background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 .pa-file-popover__file-name {
   overflow: hidden;
@@ -10573,14 +10599,14 @@ web-multiselect {
 }
 .pa-file-popover__progress-bar {
   height: 6.4px;
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
   margin-bottom: 0.4rem;
 }
 .pa-file-popover__progress-fill {
   height: 100%;
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: var(--pa-border-radius-sm);
   transition: width 0.48s ease;
 }
@@ -10597,13 +10623,13 @@ web-multiselect {
   color: var(--pa-text-color-2);
 }
 .pa-file-popover__status--uploading {
-  color: #007bff;
+  color: var(--pa-accent);
 }
 .pa-file-popover__status--complete {
-  color: #22c55e;
+  color: var(--pa-success);
 }
 .pa-file-popover__status--error {
-  color: #ef4444;
+  color: var(--pa-danger);
 }
 .pa-file-popover__remove-cell {
   text-align: center;
@@ -10615,7 +10641,7 @@ web-multiselect {
   height: 3.2rem;
   border: 1px solid var(--pa-border-color);
   background: var(--pa-card-bg);
-  color: #ef4444;
+  color: var(--pa-danger);
   cursor: pointer;
   border-radius: var(--pa-border-radius-sm);
   font-size: 2.4rem;
@@ -10627,9 +10653,9 @@ web-multiselect {
   font-weight: 700;
 }
 .pa-file-popover__remove-btn:hover {
-  background: #ef4444;
+  background: var(--pa-danger);
   color: #ffffff;
-  border-color: #ef4444;
+  border-color: var(--pa-danger);
   transform: scale(1.1);
 }
 
@@ -10666,9 +10692,9 @@ web-multiselect {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(0, 123, 255, 0.1);
+  background: color-mix(in srgb, var(--pa-accent) 10%, transparent);
   border-radius: var(--pa-border-radius);
-  color: #007bff;
+  color: var(--pa-accent);
 }
 .pa-file-item__info {
   flex: 1;
@@ -10704,8 +10730,8 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-item__remove:hover {
-  background: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+  background: color-mix(in srgb, var(--pa-danger) 10%, transparent);
+  color: var(--pa-danger);
 }
 .pa-file-item__remove::before {
   content: "×";
@@ -10752,7 +10778,7 @@ web-multiselect {
   justify-content: center;
 }
 .pa-file-preview__remove:hover {
-  background: #ef4444;
+  background: var(--pa-danger);
   transform: scale(1.1);
 }
 .pa-file-preview__remove::before {
@@ -10777,13 +10803,13 @@ web-multiselect {
 }
 .pa-file-progress__bar {
   height: 6.4px;
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
 }
 .pa-file-progress__fill {
   height: 100%;
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: var(--pa-border-radius-sm);
   transition: width 0.48s ease;
 }
@@ -10800,10 +10826,10 @@ web-multiselect {
   font-weight: 600;
 }
 .pa-file-progress__status--complete {
-  color: #22c55e;
+  color: var(--pa-success);
 }
 .pa-file-progress__status--error {
-  color: #ef4444;
+  color: var(--pa-danger);
 }
 
 .pa-file-icon--pdf::before {
@@ -10835,9 +10861,9 @@ web-multiselect {
 }
 
 .pa-file-dropzone-overlay {
-  background: rgba(0, 123, 255, 0.15);
+  background: color-mix(in srgb, var(--pa-accent) 15%, transparent);
   backdrop-filter: blur(3.2px);
-  border: 4.8px dashed #007bff;
+  border: 4.8px dashed var(--pa-accent);
   border-radius: var(--pa-border-radius);
   display: flex;
   align-items: center;
@@ -10855,7 +10881,7 @@ web-multiselect {
 .pa-file-dropzone-overlay__text {
   font-size: 2rem;
   font-weight: 600;
-  color: #007bff;
+  color: var(--pa-accent);
 }
 
 /* ========================================
@@ -10974,7 +11000,7 @@ web-multiselect {
   cursor: not-allowed;
 }
 .pa-checkbox-list__item--locked:hover {
-  background-color: rgba(249, 115, 22, 0.05);
+  background-color: color-mix(in srgb, var(--pa-warning) 5%, transparent);
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__checkbox {
   cursor: not-allowed;
@@ -10985,7 +11011,7 @@ web-multiselect {
   position: relative;
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text {
-  color: #f97316;
+  color: var(--pa-warning);
 }
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text::before {
   content: "🔒 ";
@@ -11795,7 +11821,7 @@ tbody tr:hover .pa-comparison-table__copy {
   opacity: 1;
 }
 .pa-comparison-table__changed {
-  background-color: rgba(244, 114, 182, 0.15);
+  background-color: color-mix(in srgb, #ec4899 15%, transparent);
   position: relative;
 }
 .pa-comparison-table__changed::before {
@@ -11808,19 +11834,19 @@ tbody tr:hover .pa-comparison-table__copy {
   background-color: #ec4899;
 }
 .pa-comparison-table__changed--solid {
-  background-color: rgba(244, 114, 182, 0.25) !important;
+  background-color: color-mix(in srgb, #ec4899 25%, transparent) !important;
 }
 .pa-comparison-table__changed--solid::before {
   content: none;
 }
 .pa-comparison-table__conflict {
-  background-color: rgba(251, 146, 60, 0.15);
+  background-color: color-mix(in srgb, #f97316 15%, transparent);
 }
 .pa-comparison-table__conflict::before {
   background-color: #f97316;
 }
 .pa-comparison-table__conflict--solid {
-  background-color: rgba(251, 146, 60, 0.25) !important;
+  background-color: color-mix(in srgb, #f97316 25%, transparent) !important;
 }
 .pa-comparison-table__conflict--solid::before {
   content: none;
@@ -12517,6 +12543,7 @@ code {
 .pa-modal__footer {
   padding: 1.2rem 1.6rem;
   border-top: 1px solid var(--pa-border-color);
+  border-radius: 0 0 var(--pa-border-radius) var(--pa-border-radius);
   display: flex;
   justify-content: flex-end;
   gap: 1.2rem;
@@ -12559,6 +12586,55 @@ code {
   color: var(--pa-btn-danger-text);
 }
 
+.pa-modal--banded .pa-modal__header {
+  background-color: var(--pa-modal-band-bg);
+  color: var(--pa-modal-band-text);
+  border-bottom-color: var(--pa-modal-band-border);
+}
+.pa-modal--banded .pa-modal__header .pa-modal__title {
+  color: var(--pa-modal-band-text);
+}
+.pa-modal--banded .pa-modal__footer {
+  background-color: var(--pa-modal-band-bg);
+  color: var(--pa-modal-band-text);
+  border-top-color: var(--pa-modal-band-border);
+}
+.pa-modal--banded .pa-modal__header .pa-btn,
+.pa-modal--banded .pa-modal__footer .pa-btn {
+  background-color: var(--pa-text-color-1);
+  color: var(--pa-modal-content-bg);
+  border-color: var(--pa-text-color-1);
+}
+.pa-modal--banded .pa-modal__header .pa-btn:hover,
+.pa-modal--banded .pa-modal__footer .pa-btn:hover {
+  background-color: color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
+  border-color: color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
+}
+
+.pa-modal--banded.pa-modal--success {
+  --pa-modal-band-bg: var(--pa-alert-success-bg);
+  --pa-modal-band-text: var(--pa-alert-success-text);
+  --pa-modal-band-border: var(--pa-alert-success-border);
+}
+
+.pa-modal--banded.pa-modal--warning {
+  --pa-modal-band-bg: var(--pa-alert-warning-bg);
+  --pa-modal-band-text: var(--pa-alert-warning-text);
+  --pa-modal-band-border: var(--pa-alert-warning-border);
+}
+
+.pa-modal--banded.pa-modal--danger {
+  --pa-modal-band-bg: var(--pa-alert-danger-bg);
+  --pa-modal-band-text: var(--pa-alert-danger-text);
+  --pa-modal-band-border: var(--pa-alert-danger-border);
+}
+
+.pa-modal--banded.pa-modal--info {
+  --pa-modal-band-bg: var(--pa-alert-info-bg);
+  --pa-modal-band-text: var(--pa-alert-info-text);
+  --pa-modal-band-border: var(--pa-alert-info-border);
+}
+
 .pa-modal__body--scrollable {
   max-height: 60vh;
   overflow-y: auto;
@@ -13258,51 +13334,51 @@ code {
   width: 15px;
   height: 15px;
   background: var(--pa-main-bg);
-  border: 1px solid #007bff;
-  border-radius: 50%;
-  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
+  border: 1px solid var(--pa-accent);
+  border-radius: 30%;
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-accent) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--primary::before {
-  border-color: #007bff;
-  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
+  border-color: var(--pa-btn-primary-bg);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-btn-primary-bg) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--success::before {
-  border-color: #22c55e;
-  box-shadow: 3px 3px 0 rgba(34, 197, 94, 0.3);
+  border-color: var(--pa-success);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-success) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--warning::before {
-  border-color: #f97316;
-  box-shadow: 3px 3px 0 rgba(249, 115, 22, 0.3);
+  border-color: var(--pa-warning);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-warning) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--danger::before {
-  border-color: #ef4444;
-  box-shadow: 3px 3px 0 rgba(239, 68, 68, 0.3);
+  border-color: var(--pa-danger);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-danger) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--info::before {
-  border-color: #17a2b8;
-  box-shadow: 3px 3px 0 rgba(23, 162, 184, 0.3);
+  border-color: var(--pa-info);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-info) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--secondary::before {
   border-color: var(--pa-text-color-2);
-  box-shadow: 3px 3px 0 rgba(var(--pa-text-color-2), 0.3);
+  box-shadow: 3px 3px 0 color-mix(in srgb, var(--pa-text-color-2) 50%, transparent);
 }
 .pa-timeline--simple .pa-timeline__item--filled::before {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--primary::before {
-  background: #007bff;
+  background: var(--pa-btn-primary-bg);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--success::before {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--warning::before {
-  background: #f97316;
+  background: var(--pa-warning);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--danger::before {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--info::before {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--secondary::before {
   background: var(--pa-text-color-2);
@@ -13330,7 +13406,7 @@ code {
   content: "";
   position: absolute;
   width: 2px;
-  background: #007bff;
+  background: var(--pa-accent);
   top: 0;
   bottom: 0;
   left: 50%;
@@ -13375,7 +13451,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   right: 8px;
-  background: #007bff;
+  background: var(--pa-accent);
   z-index: 1;
 }
 .pa-timeline--alternating .pa-timeline__item:nth-child(even) {
@@ -13411,7 +13487,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   left: 8px;
-  background: #007bff;
+  background: var(--pa-accent);
   z-index: 1;
 }
 .pa-timeline--alternating .pa-timeline__date {
@@ -13421,7 +13497,7 @@ code {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
-  color: #007bff;
+  color: var(--pa-accent);
   text-transform: uppercase;
   letter-spacing: 1px;
   z-index: 1;
@@ -13434,15 +13510,15 @@ code {
   width: 40px;
   height: 40px;
   top: calc(50% - 20px);
-  background: #f97316;
-  border: 2px solid #007bff;
+  background: var(--pa-warning);
+  border: 2px solid var(--pa-accent);
   border-radius: 50%;
   font-size: 1.8rem;
-  color: #007bff;
+  color: var(--pa-accent);
   z-index: 1;
 }
 .pa-timeline--alternating .pa-timeline__content {
-  background: #f97316;
+  background: var(--pa-warning);
   position: relative;
 }
 .pa-timeline--alternating .pa-timeline__content h3 {
@@ -13455,7 +13531,7 @@ code {
   margin: 0;
   font-size: 1.6rem;
   line-height: 1.8;
-  color: #856404;
+  color: var(--pa-warning-text);
 }
 @media (max-width: 767px) {
   .pa-timeline--alternating:not(.pa-timeline--keep-layout)::after {
@@ -13593,7 +13669,7 @@ code {
   line-height: 1.8;
 }
 .pa-timeline--feed .pa-timeline__content a {
-  color: #007bff;
+  color: var(--pa-accent);
   text-decoration: none;
   font-weight: 500;
 }
@@ -14196,11 +14272,11 @@ code {
   background: #fff;
 }
 .pa-logic-tree__block--and {
-  border-color: #f97316;
+  border-color: var(--pa-warning);
   background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
 }
 .pa-logic-tree__block--or {
-  border-color: #17a2b8;
+  border-color: var(--pa-info);
   background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
 }
 .pa-logic-tree__block--group {
@@ -14450,14 +14526,14 @@ code {
   background: none;
   border: none;
   padding: 0;
-  color: #007bff;
+  color: var(--pa-accent);
   font-size: 1.4rem;
   font-weight: 500;
   cursor: pointer;
   transition: color 0.1s ease-out;
 }
 .pa-notifications__mark-read:hover {
-  color: rgba(0, 123, 255, 0.12);
+  color: var(--pa-accent-hover);
 }
 
 .pa-notifications__list {
@@ -14483,10 +14559,10 @@ code {
   background-color: var(--pa-accent-light);
 }
 .pa-notifications__item--unread {
-  background-color: rgba(0, 123, 255, 0.05);
+  background-color: color-mix(in srgb, var(--pa-accent) 5%, transparent);
 }
 .pa-notifications__item--unread:hover {
-  background-color: rgba(0, 123, 255, 0.1);
+  background-color: color-mix(in srgb, var(--pa-accent) 10%, transparent);
 }
 
 .pa-notifications__icon-wrapper {
@@ -14496,29 +14572,29 @@ code {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
   font-size: 1.6rem;
-  background-color: var(--pa-accent-light);
   color: var(--pa-accent);
+  border: 1px solid transparent;
+  border-radius: var(--pa-border-radius);
 }
 .pa-notifications__icon-wrapper--primary {
-  background-color: rgba(0, 123, 255, 0.1);
-  color: #007bff;
+  border-color: var(--pa-btn-primary-bg);
+  color: var(--pa-btn-primary-bg);
 }
 .pa-notifications__icon-wrapper--success {
-  background-color: rgba(34, 197, 94, 0.1);
-  color: #22c55e;
+  border-color: var(--pa-success);
+  color: var(--pa-success);
 }
 .pa-notifications__icon-wrapper--warning {
-  background-color: rgba(249, 115, 22, 0.1);
-  color: #f97316;
+  border-color: var(--pa-warning);
+  color: var(--pa-warning);
 }
 .pa-notifications__icon-wrapper--danger {
-  background-color: rgba(239, 68, 68, 0.1);
-  color: #ef4444;
+  border-color: var(--pa-danger);
+  color: var(--pa-danger);
 }
 .pa-notifications__icon-wrapper--secondary {
-  background-color: rgba(var(--pa-text-color-2), 0.1);
+  border-color: var(--pa-text-color-2);
   color: var(--pa-text-color-2);
 }
 
@@ -14557,14 +14633,14 @@ code {
   text-align: center;
 }
 .pa-notifications__footer a {
-  color: #007bff;
+  color: var(--pa-accent);
   font-size: 1.4rem;
   font-weight: 500;
   text-decoration: none;
   transition: color 0.1s ease-out;
 }
 .pa-notifications__footer a:hover {
-  color: rgba(0, 123, 255, 0.12);
+  color: var(--pa-accent-hover);
 }
 
 @media (max-width: 768px) {
@@ -14696,7 +14772,7 @@ code {
   display: flex;
   gap: 0.8rem;
   justify-content: flex-end;
-  background-color: rgba(225, 229, 233, 0.3);
+  background-color: color-mix(in srgb, var(--pa-border-color) 30%, transparent);
 }
 .pa-popconfirm__actions .pa-btn {
   font-size: 1.2rem;
@@ -15255,7 +15331,7 @@ code {
 .pa-field--copied .pa-field__value::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 .pa-field-group {
@@ -15515,16 +15591,20 @@ code {
   font-size: 1.3rem;
 }
 .pa-fields--chips .pa-field__value--success {
-  background: var(--pa-success-bg-light, rgba(0, 200, 80, 0.12));
-  color: var(--pa-success-color, #28a745);
+  background: var(--pa-success-bg-light);
+  color: var(--pa-success);
 }
 .pa-fields--chips .pa-field__value--warning {
-  background: var(--pa-warning-bg-light, rgba(255, 165, 0, 0.12));
-  color: var(--pa-warning-color, #e68a00);
+  background: var(--pa-warning-bg-light);
+  color: var(--pa-warning);
 }
 .pa-fields--chips .pa-field__value--danger {
-  background: var(--pa-danger-bg-light, rgba(255, 0, 0, 0.12));
-  color: var(--pa-danger-color, #dc3545);
+  background: var(--pa-danger-bg-light);
+  color: var(--pa-danger);
+}
+.pa-fields--chips .pa-field__value--info {
+  background: var(--pa-info-bg-light);
+  color: var(--pa-info);
 }
 
 .pa-desc-container {
@@ -15684,7 +15764,7 @@ code {
 .pa-desc-table__value--copied::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 .pa-dot-leaders {
@@ -15960,7 +16040,7 @@ code {
 .pa-banded__row--copied .pa-banded__value::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 .pa-accent-grid {
@@ -15971,19 +16051,19 @@ code {
 .pa-accent-grid__item {
   padding: 0.8rem 1.2rem;
   padding-inline-start: 1.4rem;
-  border-inline-start: 3px solid var(--pa-accent, #3b82f6);
+  border-inline-start: 3px solid var(--pa-accent);
 }
 .pa-accent-grid__item--success {
-  border-inline-start-color: var(--pa-success-color, #28a745);
+  border-inline-start-color: var(--pa-success);
 }
 .pa-accent-grid__item--warning {
-  border-inline-start-color: var(--pa-warning-color, #e68a00);
+  border-inline-start-color: var(--pa-warning);
 }
 .pa-accent-grid__item--danger {
-  border-inline-start-color: var(--pa-danger-color, #dc3545);
+  border-inline-start-color: var(--pa-danger);
 }
 .pa-accent-grid__item--info {
-  border-inline-start-color: var(--pa-info-color, #17a2b8);
+  border-inline-start-color: var(--pa-info);
 }
 .pa-accent-grid__label {
   font-size: 1.1rem;
@@ -16050,7 +16130,7 @@ code {
 .pa-accent-grid__item--copied .pa-accent-grid__value::after {
   content: "Copied!" !important;
   opacity: 1 !important;
-  color: var(--pa-color-4, #28a745);
+  color: var(--pa-success);
 }
 
 /* ========================================
@@ -16060,7 +16140,7 @@ code {
 .pa-progress {
   width: 100%;
   height: 0.8rem;
-  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+  background: var(--pa-surface-track);
   border-radius: var(--pa-border-radius);
   overflow: hidden;
   position: relative;
@@ -16068,7 +16148,7 @@ code {
 .pa-progress__fill {
   height: 100%;
   width: var(--value, 0%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: inherit;
   transition: width 0.25s ease;
 }
@@ -16093,16 +16173,16 @@ code {
   height: 1.2rem;
 }
 .pa-progress--success > .pa-progress__fill {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-progress--warning > .pa-progress__fill {
-  background: #f97316;
+  background: var(--pa-warning);
 }
 .pa-progress--danger > .pa-progress__fill {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-progress--info > .pa-progress__fill {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-progress--rounded {
   border-radius: 50rem;
@@ -16135,28 +16215,28 @@ code {
   height: 1.2rem;
   border-radius: var(--pa-border-radius);
   overflow: hidden;
-  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+  background: var(--pa-surface-track);
 }
 .pa-stacked-bar__segment {
   height: 100%;
   width: var(--value, 0%);
   transition: width 0.25s ease;
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-stacked-bar__segment--success {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-stacked-bar__segment--warning {
-  background: #f97316;
+  background: var(--pa-warning);
 }
 .pa-stacked-bar__segment--danger {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-stacked-bar__segment--info {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-stacked-bar__segment--secondary {
-  background: #6c757d;
+  background: var(--pa-btn-secondary-bg);
 }
 .pa-stacked-bar__legend {
   display: flex;
@@ -16178,22 +16258,22 @@ code {
   flex-shrink: 0;
 }
 .pa-stacked-bar__legend-swatch--primary {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-stacked-bar__legend-swatch--success {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-stacked-bar__legend-swatch--warning {
-  background: #f97316;
+  background: var(--pa-warning);
 }
 .pa-stacked-bar__legend-swatch--danger {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-stacked-bar__legend-swatch--info {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-stacked-bar__legend-swatch--secondary {
-  background: #6c757d;
+  background: var(--pa-btn-secondary-bg);
 }
 .pa-stacked-bar--sm {
   height: 0.5rem;
@@ -16209,7 +16289,7 @@ code {
   width: 8rem;
   height: 8rem;
   border-radius: 50%;
-  background: conic-gradient(#007bff calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  background: conic-gradient(var(--pa-accent) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -16257,57 +16337,65 @@ code {
   font-size: 1.2rem;
 }
 .pa-progress-ring--success {
-  background: conic-gradient(#22c55e calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  background: conic-gradient(var(--pa-success) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 .pa-progress-ring--warning {
-  background: conic-gradient(#f97316 calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  background: conic-gradient(var(--pa-warning) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 .pa-progress-ring--danger {
-  background: conic-gradient(#ef4444 calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  background: conic-gradient(var(--pa-danger) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 .pa-progress-ring--info {
-  background: conic-gradient(#17a2b8 calc(var(--value, 0) * 3.6deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  background: conic-gradient(var(--pa-info) calc(var(--value, 0) * 3.6deg), var(--pa-surface-track) 0deg);
 }
 
 .pa-gauge {
-  width: 12rem;
-  height: calc(12rem / 2);
-  border-radius: 12rem 12rem 0 0;
-  overflow: hidden;
-  background: conic-gradient(from 0.75turn, #007bff calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  --pa-gauge-fill: var(--pa-accent);
+  --pa-gauge-size: 12rem;
+  width: var(--pa-gauge-size);
+  height: calc(var(--pa-gauge-size) / 2);
+  margin-bottom: 1.6rem;
   position: relative;
   flex-shrink: 0;
 }
+.pa-gauge::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: var(--pa-gauge-size) var(--pa-gauge-size) 0 0;
+  background: conic-gradient(from 0.75turn at 50% 100%, var(--pa-gauge-fill) calc(var(--value, 0) * 1.8deg), var(--pa-surface-track) 0deg);
+  -webkit-mask-image: radial-gradient(circle farthest-side at 50% 100%, transparent 0 70%, #000 70%);
+  mask-image: radial-gradient(circle farthest-side at 50% 100%, transparent 0 70%, #000 70%);
+}
 .pa-gauge__inner {
   position: absolute;
   bottom: 0;
   left: 15%;
   right: 15%;
   height: 70%;
-  border-radius: 12rem 12rem 0 0;
-  background: var(--pa-card-bg);
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
-  padding-bottom: 0.4rem;
+  align-items: flex-end;
+  justify-content: center;
 }
 .pa-gauge__value {
-  font-size: 2.4rem;
+  font-size: 2.8rem;
   font-weight: 700;
   line-height: 1;
   color: var(--pa-text-color-1);
 }
-.pa-gauge__label {
-  font-size: 1.2rem;
-  color: var(--pa-text-color-2);
-  margin-top: 0.4rem;
-}
-.pa-gauge__min, .pa-gauge__max {
+.pa-gauge__label, .pa-gauge__min, .pa-gauge__max {
   position: absolute;
-  bottom: 0;
+  top: 100%;
+  margin-top: 0.4rem;
   font-size: 1rem;
+  line-height: 1.2rem;
   color: var(--pa-text-color-2);
+  white-space: nowrap;
+}
+.pa-gauge__label {
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 1.2rem;
 }
 .pa-gauge__min {
   left: 0;
@@ -16316,19 +16404,19 @@ code {
   right: 0;
 }
 .pa-gauge--success {
-  background: conic-gradient(from 0.75turn, #22c55e calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  --pa-gauge-fill: var(--pa-success);
 }
 .pa-gauge--warning {
-  background: conic-gradient(from 0.75turn, #f97316 calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  --pa-gauge-fill: var(--pa-warning);
 }
 .pa-gauge--danger {
-  background: conic-gradient(from 0.75turn, #ef4444 calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  --pa-gauge-fill: var(--pa-danger);
 }
 .pa-gauge--info {
-  background: conic-gradient(from 0.75turn, #17a2b8 calc(var(--value, 0) * 1.8deg), color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 0deg);
+  --pa-gauge-fill: var(--pa-info);
 }
-.pa-gauge--zones {
-  background: conic-gradient(from 0.75turn, #22c55e 0deg, #22c55e 90deg, #f97316 90deg, #f97316 135deg, #ef4444 135deg, #ef4444 180deg, color-mix(in srgb, var(--pa-text-color-1) 12%, transparent) 180deg);
+.pa-gauge--zones::before {
+  background: conic-gradient(from 0.75turn at 50% 100%, var(--pa-success) 0deg, var(--pa-success) 90deg, var(--pa-warning) 90deg, var(--pa-warning) 135deg, var(--pa-danger) 135deg, var(--pa-danger) 180deg, var(--pa-surface-track) 180deg);
 }
 
 .pa-data-bar {
@@ -16346,31 +16434,31 @@ code {
 .pa-data-bar__track {
   width: 100%;
   height: 0.4rem;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--pa-surface-track);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
 }
 .pa-data-bar__fill {
   height: 100%;
   width: var(--value, 0%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: inherit;
   transition: width 0.25s ease;
 }
 .pa-data-bar--success .pa-data-bar__fill {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-data-bar--warning .pa-data-bar__fill {
-  background: #f97316;
+  background: var(--pa-warning);
 }
 .pa-data-bar--danger .pa-data-bar__fill {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-data-bar--info .pa-data-bar__fill {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-data-bar--negative .pa-data-bar__fill {
-  background: #ef4444;
+  background: var(--pa-danger);
   margin-inline-start: auto;
 }
 
@@ -16382,43 +16470,43 @@ code {
 }
 .pa-heatmap__cell {
   border-radius: var(--pa-border-radius-sm);
-  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+  background: var(--pa-surface-track);
 }
 .pa-heatmap__cell[data-level="1"] {
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
 }
 .pa-heatmap__cell[data-level="2"] {
-  background: rgba(0, 123, 255, 0.4);
+  background: color-mix(in srgb, var(--pa-accent) 40%, transparent);
 }
 .pa-heatmap__cell[data-level="3"] {
-  background: rgba(0, 123, 255, 0.65);
+  background: color-mix(in srgb, var(--pa-accent) 65%, transparent);
 }
 .pa-heatmap__cell[data-level="4"] {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="1"] {
-  background: rgba(34, 197, 94, 0.2);
+  background: color-mix(in srgb, var(--pa-success) 20%, transparent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="2"] {
-  background: rgba(34, 197, 94, 0.4);
+  background: color-mix(in srgb, var(--pa-success) 40%, transparent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="3"] {
-  background: rgba(34, 197, 94, 0.65);
+  background: color-mix(in srgb, var(--pa-success) 65%, transparent);
 }
 .pa-heatmap--success .pa-heatmap__cell[data-level="4"] {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="1"] {
-  background: rgba(239, 68, 68, 0.2);
+  background: color-mix(in srgb, var(--pa-danger) 20%, transparent);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="2"] {
-  background: rgba(239, 68, 68, 0.4);
+  background: color-mix(in srgb, var(--pa-danger) 40%, transparent);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="3"] {
-  background: rgba(239, 68, 68, 0.65);
+  background: color-mix(in srgb, var(--pa-danger) 65%, transparent);
 }
 .pa-heatmap--danger .pa-heatmap__cell[data-level="4"] {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-heatmap__legend {
   display: flex;
@@ -16432,19 +16520,19 @@ code {
   width: 1.2rem;
   height: 1.2rem;
   border-radius: var(--pa-border-radius-sm);
-  background: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+  background: var(--pa-surface-track);
 }
 .pa-heatmap__legend-cell[data-level="1"] {
-  background: rgba(0, 123, 255, 0.2);
+  background: color-mix(in srgb, var(--pa-accent) 20%, transparent);
 }
 .pa-heatmap__legend-cell[data-level="2"] {
-  background: rgba(0, 123, 255, 0.4);
+  background: color-mix(in srgb, var(--pa-accent) 40%, transparent);
 }
 .pa-heatmap__legend-cell[data-level="3"] {
-  background: rgba(0, 123, 255, 0.65);
+  background: color-mix(in srgb, var(--pa-accent) 65%, transparent);
 }
 .pa-heatmap__legend-cell[data-level="4"] {
-  background: #007bff;
+  background: var(--pa-accent);
 }
 .pa-heatmap--compact {
   grid-template-columns: repeat(53, 1rem);
@@ -16464,22 +16552,22 @@ code {
 .pa-sparkline__bar {
   width: 0.3rem;
   height: var(--value, 50%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: var(--pa-border-radius-sm) var(--pa-border-radius-sm) 0 0;
   transition: height 0.25s ease;
   min-height: 1px;
 }
 .pa-sparkline--success .pa-sparkline__bar {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-sparkline--warning .pa-sparkline__bar {
-  background: #f97316;
+  background: var(--pa-warning);
 }
 .pa-sparkline--danger .pa-sparkline__bar {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-sparkline--info .pa-sparkline__bar {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-sparkline--sm {
   height: 2rem;
@@ -16524,7 +16612,7 @@ code {
 .pa-bar-list__bar {
   width: 100%;
   height: 0.4rem;
-  background: rgba(0, 0, 0, 0.06);
+  background: var(--pa-surface-track);
   border-radius: var(--pa-border-radius-sm);
   overflow: hidden;
 }
@@ -16533,21 +16621,21 @@ code {
   display: block;
   height: 100%;
   width: var(--value, 0%);
-  background: #007bff;
+  background: var(--pa-accent);
   border-radius: inherit;
   transition: width 0.25s ease;
 }
 .pa-bar-list--success .pa-bar-list__bar::after {
-  background: #22c55e;
+  background: var(--pa-success);
 }
 .pa-bar-list--warning .pa-bar-list__bar::after {
-  background: #f97316;
+  background: var(--pa-warning);
 }
 .pa-bar-list--danger .pa-bar-list__bar::after {
-  background: #ef4444;
+  background: var(--pa-danger);
 }
 .pa-bar-list--info .pa-bar-list__bar::after {
-  background: #17a2b8;
+  background: var(--pa-info);
 }
 .pa-bar-list--compact {
   gap: 0.8rem;
@@ -16563,6 +16651,1526 @@ code {
   height: 0.3rem;
 }
 
+/* ========================================
+   KPI · shared base
+   Cross-cutting building blocks used by every pa-kpi-* showcase.
+   Tokens (--pa-positive, --pa-detail-bg, --pa-chart-trendline-*) live in
+   _base-css-variables.scss; this file only defines the shared class
+   surface that consumes them.
+   ======================================== */
+/* ----- LIVE indicator (title-bar pulse) ---------------------------------
+   Used in every KPI card header — a small mono "LIVE" caption with a
+   pulsing green dot. Sits next to the card title. */
+.pa-kpi-live {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--pa-text-secondary);
+}
+.pa-kpi-live__dot {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background: var(--pa-positive);
+  box-shadow: 0 0 6px var(--pa-positive);
+  animation: pa-kpi-pulse 1.6s ease-in-out infinite;
+}
+
+@keyframes pa-kpi-pulse {
+  50% {
+    opacity: 0.35;
+  }
+}
+/* ----- Card header row --------------------------------------------------
+   Title (h2/h3 by author choice) on one side, controls + LIVE on the other.
+   Wraps onto multiple rows on narrow cards. Every showcase uses this shape. */
+.pa-kpi-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1.6rem;
+  flex-wrap: wrap;
+}
+
+/* ----- Card footer caption ---------------------------------------------
+   Two-line mono caption row at the bottom of the card (left: data source,
+   right: timestamp). Strong text inside picks up the focal color so things
+   like a metric name or count stand out. */
+.pa-kpi-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  color: var(--pa-text-secondary);
+}
+.pa-kpi-footer strong {
+  color: var(--pa-text-color-1);
+  font-weight: 700;
+}
+
+/* ----- Sparkline endpoint dot ------------------------------------------
+   The SVG circle that marks the end of a sparkline is converted to a CSS
+   span at init time — the SVG uses preserveAspectRatio="none" so an
+   embedded <circle> renders as an oval at non-square aspect ratios.
+   See kpi-showcases.js for the conversion; here we only style the result. */
+.pa-kpi-spark-dot {
+  position: absolute;
+  width: 6px;
+  height: 6px;
+  margin: -3px 0 0 -3px; /* centre on the (left, top) anchor */
+  border-radius: 50%;
+  background: currentColor; /* inherits sentiment color from chart wrapper */
+  pointer-events: none;
+}
+
+/* Wrapper inserted around an SVG sparkline at init time when its parent
+   isn't already a positioned anchor — so the .pa-kpi-spark-dot can be
+   absolutely positioned relative to the chart. */
+.pa-kpi-spark-wrap {
+  display: block;
+  position: relative;
+  width: 100%;
+}
+
+/* ----- Hover detail popover --------------------------------------------
+   Bloomberg-dark by default regardless of host theme (terminal/data-dashboard
+   aesthetic). Override the --pa-detail-* tokens at :root or .pa-kpi-detail
+   level for a light/theme-aware variant.
+
+   Positioned by Floating UI anchored to a virtual element at the cursor —
+   the JS appends each popover to <body> at init so ancestor overflow:hidden
+   doesn't clip it. position: fixed because cursor coords are viewport-
+   relative; pointer-events:none so the cursor passes through cleanly and
+   tile mouseleave fires reliably. */
+.pa-kpi-detail {
+  position: fixed;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 9000;
+  min-width: 26rem;
+  max-width: 32rem;
+  background: var(--pa-detail-bg);
+  color: var(--pa-detail-text);
+  padding: 1.2rem 1.5rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.25rem;
+  line-height: 1.5;
+  border-radius: 0.4rem;
+  box-shadow: var(--pa-detail-shadow);
+}
+.pa-kpi-detail[data-show] {
+  visibility: visible;
+}
+.pa-kpi-detail__title {
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--pa-detail-title);
+  margin-bottom: 0.6rem;
+}
+.pa-kpi-detail dl {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 0.35rem 1.6rem;
+  margin: 0;
+}
+.pa-kpi-detail dt {
+  margin: 0;
+  color: var(--pa-detail-row-label);
+  font-weight: 400;
+}
+.pa-kpi-detail dd {
+  margin: 0;
+  text-align: end;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.pa-kpi-detail {
+  /* Inline sentiment hints for dd content (e.g. <dd>+12% <span class="pos">…</span></dd>) */
+}
+.pa-kpi-detail .pos {
+  color: var(--pa-positive);
+}
+.pa-kpi-detail .neg {
+  color: var(--pa-negative);
+}
+.pa-kpi-detail .warn {
+  color: var(--pa-warning);
+}
+
+/* ----- Section heading strip used outside card chrome -------------------
+   The 7 showcases each render a "stress-test" section that places tiles
+   directly inside .pa-col-* page-grid cells (no card wrapper). The strip
+   above those layouts hosts a label or LIVE indicator at the row's end. */
+.pa-kpi-sectionhead {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 1.6rem;
+  margin-bottom: 1.2rem;
+}
+
+/* ========================================
+   KPI · Terminal grid
+   Bloomberg-style dense panel: mono numbers, status pills, inline SVG
+   sparklines, ▲▼ deltas, segmented view-mode toggle (VALUE/Δ%/TREND).
+   Shared chrome (header, live, footer, detail popover, spark-dot) is in
+   _kpi-base.scss.
+   ======================================== */
+/* ----- View-mode toggle (segmented button group) ------------------------ */
+.pa-kpi-terminal__controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.pa-kpi-terminal__viewtoggle {
+  display: inline-flex;
+  border: 1px solid var(--pa-border-color);
+  border-radius: 0.4rem;
+  overflow: hidden;
+}
+
+.pa-kpi-terminal__viewbtn {
+  background: transparent;
+  border: 0;
+  color: var(--pa-text-color-2);
+  padding: 0.4rem 1.1rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.1rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  cursor: pointer;
+  transition: background-color 0.1s ease-out, color 0.1s ease-out;
+}
+.pa-kpi-terminal__viewbtn:hover {
+  color: var(--pa-text-color-1);
+}
+.pa-kpi-terminal__viewbtn.is-active {
+  background: var(--pa-text-color-1);
+  color: var(--pa-card-bg);
+}
+
+/* ----- Grid + tile borders ----------------------------------------------
+   Hairline 1px borders between tiles, no gap. Last-row/last-column
+   borders suppressed via :nth-last-child / :nth-child selectors. */
+.pa-kpi-terminal__body {
+  padding: 0;
+}
+
+.pa-kpi-terminal__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+.pa-kpi-terminal__grid .pa-kpi-tile {
+  border-bottom: 1px solid var(--pa-border-color);
+  border-right: 1px solid var(--pa-border-color);
+}
+
+.pa-kpi-terminal__grid--2col .pa-kpi-tile:nth-child(2n) {
+  border-right: 0;
+}
+.pa-kpi-terminal__grid--2col .pa-kpi-tile:nth-last-child(-n+2) {
+  border-bottom: 0;
+}
+
+/* ----- Tile (per-KPI panel) --------------------------------------------- */
+.pa-kpi-tile {
+  position: relative;
+  padding: 1.4rem 1.8rem 1.6rem;
+  min-height: 16rem;
+  display: flex;
+  flex-direction: column;
+  /* Standalone modifier: tile lives directly inside a .pa-col-* (no
+     neighbour cells in a parent grid) — gets a full border + card bg so
+     it doesn't look orphaned. */
+}
+.pa-kpi-tile--standalone {
+  background: var(--pa-card-bg);
+  border: 1px solid var(--pa-border-color);
+  margin-bottom: 1.2rem;
+}
+.pa-kpi-tile--standalone:last-child {
+  margin-bottom: 0;
+}
+
+/* ----- Tile head: ID · period + status pill ----------------------------- */
+.pa-kpi-tile__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  letter-spacing: 0.04em;
+  margin-bottom: 0.3rem;
+}
+
+.pa-kpi-tile__id {
+  color: var(--pa-text-tertiary);
+  font-weight: 600;
+}
+
+.pa-kpi-tile__status {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 0.3rem 0.9rem;
+  line-height: 1.3;
+}
+.pa-kpi-tile__status--warn {
+  background: var(--pa-warning-bg);
+  color: var(--pa-btn-warning-text);
+}
+.pa-kpi-tile__status {
+  /* GOOD is the "default" state — text-only, no chrome */
+}
+.pa-kpi-tile__status--good {
+  background: transparent;
+  color: var(--pa-text-color-1);
+  padding: 0.2rem 0;
+}
+.pa-kpi-tile__status--neutral {
+  background: color-mix(in srgb, var(--pa-text-color-2) 25%, transparent);
+  color: var(--pa-text-color-1);
+}
+
+/* ----- Label ------------------------------------------------------------ */
+.pa-kpi-tile__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--pa-text-strong);
+  margin-bottom: 0.8rem;
+}
+
+/* ----- Big value with 3-mode swap --------------------------------------
+   Author renders three .pa-kpi-tile__value siblings (data-mode="value" /
+   "delta" / "trend"); the active mode is selected via the
+   .pa-kpi-terminal[data-view="X"] attribute. JS toggles that attribute
+   when the segmented control is clicked. */
+.pa-kpi-tile__values {
+  margin-bottom: 0.4rem;
+}
+
+.pa-kpi-tile__value {
+  display: none;
+  align-items: baseline;
+  gap: 0.3rem;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+}
+.pa-kpi-tile__value--very-positive .pa-kpi-tile__num {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-tile__value--positive .pa-kpi-tile__num {
+  color: var(--pa-positive);
+}
+.pa-kpi-tile__value--neutral .pa-kpi-tile__num {
+  color: var(--pa-neutral);
+}
+.pa-kpi-tile__value--negative .pa-kpi-tile__num {
+  color: var(--pa-negative);
+}
+.pa-kpi-tile__value--very-negative .pa-kpi-tile__num {
+  color: var(--pa-very-negative);
+}
+
+.pa-kpi-terminal[data-view=value] .pa-kpi-tile__value[data-mode=value],
+.pa-kpi-terminal[data-view=delta] .pa-kpi-tile__value[data-mode=delta],
+.pa-kpi-terminal[data-view=trend] .pa-kpi-tile__value[data-mode=trend] {
+  display: inline-flex;
+}
+
+.pa-kpi-tile__num {
+  font-size: 3.8rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+
+.pa-kpi-tile__unit {
+  font-size: 1.6rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+}
+
+/* ----- Previous-value + delta row -------------------------------------- */
+.pa-kpi-tile__prev {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  margin-top: auto; /* push to bottom of flex column */
+  margin-bottom: 0.4rem;
+  color: var(--pa-text-tertiary);
+}
+
+.pa-kpi-tile__delta--very-positive {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-tile__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-tile__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-tile__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-tile__delta--very-negative {
+  color: var(--pa-very-negative);
+}
+
+/* ----- Sparkline -------------------------------------------------------- */
+.pa-kpi-tile__spark {
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+  overflow: visible;
+}
+.pa-kpi-tile__spark polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Sentiment-coloured sparkline. Class names use up/down wording but pick
+   colours from the sentiment-of-the-change axis, not line shape — so an
+   error-rate metric whose line is falling but the change is good uses
+   --up. See showcase docs for the rationale. Colour is set on both the
+   SVG and the JS-inserted .pa-kpi-spark-wrap so currentColor resolves
+   for the SVG content (line) and the HTML dot (inside the wrap). */
+.pa-kpi-tile--up-strong .pa-kpi-tile__spark, .pa-kpi-tile--up-strong .pa-kpi-spark-wrap {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-tile--up .pa-kpi-tile__spark, .pa-kpi-tile--up .pa-kpi-spark-wrap {
+  color: var(--pa-positive);
+}
+.pa-kpi-tile--flat .pa-kpi-tile__spark, .pa-kpi-tile--flat .pa-kpi-spark-wrap {
+  color: var(--pa-neutral);
+}
+.pa-kpi-tile--down .pa-kpi-tile__spark, .pa-kpi-tile--down .pa-kpi-spark-wrap {
+  color: var(--pa-negative);
+}
+.pa-kpi-tile--down-strong .pa-kpi-tile__spark, .pa-kpi-tile--down-strong .pa-kpi-spark-wrap {
+  color: var(--pa-very-negative);
+}
+
+/* ========================================
+   KPI · Sparkline list
+   Each KPI is one row: label · sparkline · value · Δ%. Built for vertical
+   scanning rather than per-tile depth — no view-mode toggle, no status
+   pills. Container queries collapse 4-col → 2-row → 3-row as the card
+   narrows.
+   ======================================== */
+/* Card is a query container so rows react to *card* width, not viewport. */
+.pa-kpi-spark-list {
+  container-type: inline-size;
+}
+
+.pa-kpi-spark-list__body {
+  padding: 0;
+}
+
+/* ----- Row: wide 4-column grid (label · chart · value · delta) ---------- */
+.pa-kpi-spark-row {
+  display: grid;
+  grid-template-columns: minmax(14rem, 28%) minmax(10rem, 1fr) minmax(8rem, 18%) minmax(7rem, 12%);
+  align-items: center;
+  gap: 1.6rem;
+  padding: 1.4rem 2rem;
+  border-bottom: 1px solid var(--pa-border-color);
+}
+.pa-kpi-spark-row:last-child {
+  border-bottom: 0;
+}
+
+/* Mid-narrow card (1×3 page-grid + 45% column): stack to 2 rows.
+   Label/value/delta on top, full-width chart below. Default order is
+   value-above-chart; use .pa-kpi-spark-list--chart-first to flip. */
+@container (max-width: 640px) {
+  .pa-kpi-spark-row {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-rows: auto auto;
+    grid-template-areas: "label value delta" "chart chart chart";
+    column-gap: 1.2rem;
+    row-gap: 0.4rem;
+    align-items: baseline;
+    padding: 1.2rem 1.6rem;
+  }
+  .pa-kpi-spark-row__label {
+    grid-area: label;
+    align-self: center;
+    font-size: 1.25rem;
+  }
+  .pa-kpi-spark-row__value {
+    grid-area: value;
+  }
+  .pa-kpi-spark-row__delta {
+    grid-area: delta;
+    font-size: 1.25rem;
+  }
+  .pa-kpi-spark-row__chart {
+    grid-area: chart;
+  }
+  .pa-kpi-spark-row__num {
+    font-size: 2rem;
+  }
+  /* --chart-first: rotates the canonical L→R order 90°. Label on top,
+     chart in the middle, value+delta side-by-side at the bottom. */
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "label  label" "chart  chart" "value  delta";
+    row-gap: 0.5rem;
+    column-gap: 1rem;
+    padding: 1.2rem 1.6rem;
+  }
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__label {
+    align-self: start;
+  }
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__value {
+    text-align: start;
+    align-self: baseline;
+  }
+  .pa-kpi-spark-list--chart-first .pa-kpi-spark-row__delta {
+    align-self: baseline;
+  }
+}
+/* Very narrow card (~280–360px, 25% page-grid stress test): force the
+   chart-first 3-row layout regardless of modifier. */
+@container (max-width: 360px) {
+  .pa-kpi-spark-row {
+    grid-template-columns: 1fr auto;
+    grid-template-rows: auto auto auto;
+    grid-template-areas: "label  label" "chart  chart" "value  delta";
+    row-gap: 0.5rem;
+    column-gap: 1rem;
+    padding: 1.2rem 1.4rem;
+  }
+  .pa-kpi-spark-row__label {
+    grid-area: label;
+    align-self: start;
+  }
+  .pa-kpi-spark-row__chart {
+    grid-area: chart;
+  }
+  .pa-kpi-spark-row__value {
+    grid-area: value;
+    text-align: start;
+    align-self: baseline;
+  }
+  .pa-kpi-spark-row__delta {
+    grid-area: delta;
+    align-self: baseline;
+  }
+}
+/* ----- Cell typography -------------------------------------------------- */
+.pa-kpi-spark-row__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+}
+
+/* Sparkline cell — line + filled area + trailing dot (the dot is rendered
+   as a CSS span by the JS init pass; see kpi-showcases.js). */
+.pa-kpi-spark-row__chart {
+  position: relative; /* anchor for .pa-kpi-spark-dot */
+}
+.pa-kpi-spark-row__chart svg {
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+  overflow: visible;
+}
+.pa-kpi-spark-row__chart polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.pa-kpi-spark-row__chart polygon {
+  fill: currentColor;
+  fill-opacity: 0.18; /* same hue as line, soft area shading */
+  stroke: none;
+}
+
+/* Sentiment-coloured sparkline. Color is set on the chart wrapper so
+   currentColor resolves for both the SVG content (line/area) and the
+   dot inside the wrapper. */
+.pa-kpi-spark-row--up-strong .pa-kpi-spark-row__chart {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-spark-row--up .pa-kpi-spark-row__chart {
+  color: var(--pa-positive);
+}
+.pa-kpi-spark-row--flat .pa-kpi-spark-row__chart {
+  color: var(--pa-neutral);
+}
+.pa-kpi-spark-row--down .pa-kpi-spark-row__chart {
+  color: var(--pa-negative);
+}
+.pa-kpi-spark-row--down-strong .pa-kpi-spark-row__chart {
+  color: var(--pa-very-negative);
+}
+
+/* ----- Value (focal white number + muted unit) ------------------------- */
+.pa-kpi-spark-row__value {
+  font-family: var(--base-font-family-mono);
+  text-align: end;
+  line-height: 1;
+}
+
+.pa-kpi-spark-row__num {
+  font-size: 2.6rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+
+.pa-kpi-spark-row__unit {
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin-left: 0.2rem;
+}
+
+/* ----- Delta (sentiment-coloured) -------------------------------------- */
+.pa-kpi-spark-row__delta {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 600;
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+.pa-kpi-spark-row__delta--very-positive {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-spark-row__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-spark-row__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-spark-row__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-spark-row__delta--very-negative {
+  color: var(--pa-very-negative);
+}
+
+/* ========================================
+   KPI · Comparison gauges
+   Goal-oriented progress bars. Each KPI shows label · value, a bar with a
+   target tick, and a 0 · tgt scale below. Bar fill = value/target * 100%,
+   capped visually so overshoots are signalled by colour, not overflow.
+   ======================================== */
+.pa-kpi-gauge-list {
+  container-type: inline-size;
+}
+
+.pa-kpi-gauge-list__body {
+  padding: 0;
+}
+
+/* 2-column internal grid by default; collapses to 1-col when card narrows. */
+.pa-kpi-gauge-list__grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+
+@container (max-width: 600px) {
+  .pa-kpi-gauge-list__grid {
+    grid-template-columns: 1fr;
+  }
+}
+/* ----- Gauge tile (label/value head · bar · 0/tgt scale) ---------------- */
+.pa-kpi-gauge {
+  position: relative;
+  padding: 1.6rem 2rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  border-right: 1px solid var(--pa-border-color);
+  /* Per-tile bar colour cascade — modifiers below set the var, the fill
+     reads it. Cleaner than per-modifier-per-element rules; host apps can
+     override at the tile level via inline style="--pa-kpi-bar-color: …". */
+  --pa-kpi-bar-color: var(--pa-positive);
+}
+.pa-kpi-gauge:nth-child(2n) {
+  border-right: 0;
+}
+.pa-kpi-gauge:nth-last-child(-n+2) {
+  border-bottom: 0;
+}
+.pa-kpi-gauge--positive {
+  --pa-kpi-bar-color: var(--pa-positive);
+}
+.pa-kpi-gauge--warning {
+  --pa-kpi-bar-color: var(--pa-warning);
+}
+.pa-kpi-gauge--negative {
+  --pa-kpi-bar-color: var(--pa-negative);
+}
+.pa-kpi-gauge--neutral {
+  --pa-kpi-bar-color: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
+}
+
+@container (max-width: 600px) {
+  .pa-kpi-gauge {
+    border-right: 0;
+  }
+  .pa-kpi-gauge:nth-last-child(-n+2) {
+    border-bottom: 1px solid var(--pa-border-color);
+  }
+  .pa-kpi-gauge:last-child {
+    border-bottom: 0;
+  }
+}
+/* ----- Head: label left, value right (baseline-aligned) ----------------- */
+.pa-kpi-gauge__head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 1.2rem;
+  margin-bottom: 0.8rem;
+}
+
+.pa-kpi-gauge__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+}
+
+.pa-kpi-gauge__value {
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+}
+
+.pa-kpi-gauge__num {
+  font-size: 2.6rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+
+.pa-kpi-gauge__unit {
+  font-size: 1.3rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin-left: 0.2rem;
+}
+
+/* ----- Bar (track + sentiment-coloured fill + target tick) -------------- */
+.pa-kpi-gauge__bar {
+  /* Author-controlled tick position (default 100% — the target sits at the
+     right edge of the bar's "0 → target" scale). Override per-tile via
+     style="--pa-kpi-gauge-tick-pos: 80%" if the bar represents a wider
+     scale where the target sits inside the bar. */
+  --pa-kpi-gauge-tick-pos: 100%;
+  --pa-kpi-gauge-tick-color: var(--pa-text-color-1);
+  position: relative;
+  height: 0.7rem;
+  background: var(--pa-surface-track);
+  margin-bottom: 0.5rem;
+  overflow: visible; /* tick can sit just outside the track */
+  /* Target tick — small bar slightly taller than the track. Centred on
+     --pa-kpi-gauge-tick-pos via the negative margin-left (matches half
+     the tick width). Full opacity so it stays readable on dark themes
+     against bright orange/green fills. */
+}
+.pa-kpi-gauge__bar::after {
+  content: "";
+  position: absolute;
+  left: var(--pa-kpi-gauge-tick-pos);
+  margin-left: -0.15rem;
+  top: -0.2rem;
+  bottom: -0.2rem;
+  width: 0.3rem;
+  background: var(--pa-kpi-gauge-tick-color);
+}
+
+.pa-kpi-gauge__fill {
+  height: 100%;
+  background: var(--pa-kpi-bar-color);
+  /* Width set inline per tile via style="width: X%". */
+  transition: width 0.3s ease;
+}
+
+/* ----- Scale row (0 left · tgt XYZ right) ------------------------------- */
+.pa-kpi-gauge__scale {
+  display: flex;
+  justify-content: space-between;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  color: var(--pa-text-tertiary);
+}
+
+/* ========================================
+   KPI · Hero + supporting
+   Marketing/exec dashboard pattern: one headline metric on the left (huge
+   container-query-relative value, inline meta row, big filled-area
+   sparkline), and a vertical rail of compact supporting tiles on the
+   right. Container query collapses to single column on narrow cards.
+   ======================================== */
+.pa-kpi-hero-list {
+  container-type: inline-size;
+}
+
+.pa-kpi-hero-list__body {
+  padding: 1.6rem;
+}
+
+/* ----- Layout: hero left, rail right ------------------------------------ */
+.pa-kpi-hero-list__layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.4rem;
+}
+
+@container (max-width: 700px) {
+  .pa-kpi-hero-list__layout {
+    grid-template-columns: 1fr;
+  }
+}
+.pa-kpi-hero-list__rail {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* ----- HERO panel (label · big value · meta row · sparkline) ------------ */
+.pa-kpi-hero-main {
+  position: relative;
+  padding: 1.8rem 2rem;
+  border: 1px solid var(--pa-border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  /* Sentiment cascade — chart and delta inherit via currentColor. */
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-main--positive {
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-main--negative {
+  --pa-kpi-accent: var(--pa-negative);
+}
+.pa-kpi-hero-main--neutral {
+  --pa-kpi-accent: var(--pa-neutral);
+}
+.pa-kpi-hero-main--up-strong {
+  --pa-kpi-accent: var(--pa-very-positive);
+}
+
+.pa-kpi-hero-main__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+}
+
+.pa-kpi-hero-main__value {
+  display: inline-flex;
+  align-items: baseline;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+  margin: 0.4rem 0 0.6rem;
+}
+
+.pa-kpi-hero-main__num {
+  /* Container-query-relative: scales with the hero panel's width.
+     Floor keeps it readable in narrow page-grid cards. */
+  font-size: clamp(4rem, 17cqi, 7rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+
+.pa-kpi-hero-main__unit {
+  font-size: clamp(1.8rem, 8cqi, 3rem);
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin: 0 0.1rem;
+}
+
+/* Meta row: inline delta + period text + target on one baseline. */
+.pa-kpi-hero-main__meta {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: baseline;
+  gap: 0.4rem 1.4rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+}
+
+.pa-kpi-hero-main__delta {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0.4rem;
+  color: var(--pa-kpi-accent);
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1.2;
+}
+
+.pa-kpi-hero-main__period {
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  line-height: 1.3;
+}
+
+.pa-kpi-hero-main__target {
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  text-align: end;
+}
+
+/* Hero sparkline — chart container fills extra vertical space (when the
+   rail forces a tall row); SVG inside stays at fixed pixel height so the
+   line shape is never distorted along Y. The SVG uses
+   preserveAspectRatio="none", so any element that should keep its shape
+   needs to live outside that scaling or have fixed pixel dimensions. */
+.pa-kpi-hero-main__chart {
+  flex: 1 1 10rem;
+  min-height: 10rem;
+  margin-top: 0.6rem;
+  color: var(--pa-kpi-accent);
+  display: flex;
+  align-items: flex-end; /* SVG wrap pinned to bottom */
+}
+.pa-kpi-hero-main__chart polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.pa-kpi-hero-main__chart polygon {
+  fill: currentColor;
+  fill-opacity: 0.18;
+  stroke: none;
+}
+
+.pa-kpi-hero-main__chart-svg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+}
+.pa-kpi-hero-main__chart-svg svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+/* ----- SIDE rail tile (2×2 grid, value spans both rows on right) -------- */
+.pa-kpi-hero-side {
+  position: relative;
+  padding: 1.2rem 1.4rem;
+  border: 1px solid var(--pa-border-color);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas: "label  value" "delta  value";
+  column-gap: 1.2rem;
+  row-gap: 0.4rem;
+  align-items: center;
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-side--positive {
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-hero-side--negative {
+  --pa-kpi-accent: var(--pa-negative);
+}
+.pa-kpi-hero-side--neutral {
+  --pa-kpi-accent: var(--pa-neutral);
+}
+.pa-kpi-hero-side--up-strong {
+  --pa-kpi-accent: var(--pa-very-positive);
+}
+
+.pa-kpi-hero-side__label {
+  grid-area: label;
+  align-self: end; /* tucks against the vertically-centred value */
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  line-height: 1.25;
+}
+
+.pa-kpi-hero-side__value {
+  grid-area: value;
+  align-self: center;
+  font-family: var(--base-font-family-mono);
+  line-height: 1;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: baseline;
+}
+
+.pa-kpi-hero-side__num {
+  font-size: 2.4rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+
+.pa-kpi-hero-side__unit {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--pa-text-secondary);
+  margin: 0 0.35rem;
+}
+
+.pa-kpi-hero-side__delta {
+  grid-area: delta;
+  align-self: start;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  color: var(--pa-kpi-accent);
+}
+
+/* ========================================
+   KPI · Bento layout
+   Magazine-style asymmetric tile sizing with sparklines as soft background
+   fills behind the values. 6 tiles arranged on a 6-col × 3-row grid
+   (hero left-half × 2 rows, two stacked right-half × 2 rows, three equal
+   tiles bottom row). Tile placement by source order via :nth-child.
+   ======================================== */
+.pa-kpi-bento {
+  container-type: inline-size;
+}
+
+.pa-kpi-bento__body {
+  padding: 1.6rem;
+}
+
+/* ----- Bento grid ------------------------------------------------------- */
+.pa-kpi-bento__grid {
+  display: grid;
+  grid-template-columns: repeat(6, 1fr);
+  grid-template-rows: 12rem 12rem 12rem;
+  grid-template-areas: "hero hero hero a    a    a" "hero hero hero b    b    b" "c    c    d    d    e    e";
+  gap: 1rem;
+}
+.pa-kpi-bento__grid > :nth-child(1) {
+  grid-area: hero;
+}
+.pa-kpi-bento__grid > :nth-child(2) {
+  grid-area: a;
+}
+.pa-kpi-bento__grid > :nth-child(3) {
+  grid-area: b;
+}
+.pa-kpi-bento__grid > :nth-child(4) {
+  grid-area: c;
+}
+.pa-kpi-bento__grid > :nth-child(5) {
+  grid-area: d;
+}
+.pa-kpi-bento__grid > :nth-child(6) {
+  grid-area: e;
+}
+
+/* Narrow card → stack everything single column. Hero modifier still
+   bumps the value font-size so it reads as the headline. */
+@container (max-width: 700px) {
+  .pa-kpi-bento__grid {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-template-areas: none;
+    gap: 0.8rem;
+  }
+  .pa-kpi-bento__grid > :nth-child(n) {
+    grid-area: auto;
+  }
+  .pa-kpi-bento-tile {
+    min-height: 10rem;
+  }
+  .pa-kpi-bento-tile--hero {
+    min-height: 14rem;
+  }
+}
+/* ----- Tile (per-KPI bento cell) ---------------------------------------- */
+.pa-kpi-bento-tile {
+  /* Per-tile inline-size container so the value font-size scales with
+     *this* tile's width via cqi (not the outer card's width). The hero
+     and the smaller bottom tiles each scale to their own column. */
+  container-type: inline-size;
+  position: relative;
+  overflow: hidden;
+  padding: 1.3rem 1.5rem;
+  border: 1px solid var(--pa-border-color);
+  background: var(--pa-card-bg);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas: "label delta" ".     .    " "value value";
+  gap: 0.4rem 1rem;
+  /* Sparkline + delta sentiment cascade via currentColor. */
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-bento-tile--positive {
+  --pa-kpi-accent: var(--pa-positive);
+}
+.pa-kpi-bento-tile--negative {
+  --pa-kpi-accent: var(--pa-negative);
+}
+.pa-kpi-bento-tile--neutral {
+  --pa-kpi-accent: var(--pa-neutral);
+}
+.pa-kpi-bento-tile--up-strong {
+  --pa-kpi-accent: var(--pa-very-positive);
+}
+.pa-kpi-bento-tile--down-strong {
+  --pa-kpi-accent: var(--pa-very-negative);
+}
+.pa-kpi-bento-tile--hero {
+  padding: 1.6rem 1.8rem;
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__num {
+  font-size: clamp(3.6rem, 22cqi, 7rem);
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__unit {
+  font-size: clamp(1.6rem, 9cqi, 2.6rem);
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__label,
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__delta {
+  font-size: 1.4rem;
+}
+.pa-kpi-bento-tile--hero .pa-kpi-bento-tile__chart {
+  height: 70%;
+}
+
+/* ----- Top row: label + delta, both layered over the chart -------------- */
+.pa-kpi-bento-tile__label {
+  grid-area: label;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 60%, transparent);
+  z-index: 1;
+  line-height: 1.2;
+}
+
+.pa-kpi-bento-tile__delta {
+  grid-area: delta;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  font-weight: 700;
+  color: var(--pa-kpi-accent);
+  z-index: 1;
+  align-self: start;
+  line-height: 1.2;
+}
+
+/* ----- Value (bottom of grid, layered over chart) ----------------------- */
+.pa-kpi-bento-tile__value {
+  grid-area: value;
+  align-self: end;
+  position: relative;
+  z-index: 1;
+  font-family: var(--base-font-family-mono);
+  display: inline-flex;
+  align-items: baseline;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.pa-kpi-bento-tile__num {
+  font-size: clamp(2rem, 14cqi, 3.2rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--pa-text-color-1);
+}
+
+.pa-kpi-bento-tile__unit {
+  font-size: clamp(1.2rem, 7cqi, 1.6rem);
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  margin: 0 0.3rem;
+}
+
+/* ----- Sparkline background ---------------------------------------------
+   Absolutely positioned, fills the bottom 65% of the tile. The value sits
+   over it (z-index: 1 above). The line/area read through behind the
+   digits at lower opacity so the value remains the focal point. SVG is
+   nested in a fixed-height wrapper so taller tiles don't distort the line
+   shape (preserveAspectRatio="none" would otherwise stretch the Y axis). */
+.pa-kpi-bento-tile__chart {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 65%;
+  pointer-events: none;
+  color: var(--pa-kpi-accent);
+  z-index: 0;
+  display: flex;
+  align-items: flex-end;
+}
+.pa-kpi-bento-tile__chart svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.pa-kpi-bento-tile__chart polyline {
+  fill: none;
+  stroke: currentColor;
+  stroke-opacity: 0.55;
+  stroke-width: var(--pa-chart-trendline-stroke);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.pa-kpi-bento-tile__chart polygon {
+  fill: currentColor;
+  fill-opacity: 0.1;
+  stroke: none;
+}
+
+.pa-kpi-bento-tile__chart-svg {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: var(--pa-chart-trendline-height);
+}
+
+/* ========================================
+   KPI · Numeric strip (densest)
+   Tabular "spreadsheet-style" table card with metric/now/prev/Δ%/vs target
+   columns — most data per pixel, no chart chrome. Each row is its own
+   grid sharing the same column template so cells align across rows
+   without needing subgrid. Wide-only by design — no responsive collapse;
+   narrow placements should use Comparison gauges instead.
+   ======================================== */
+.pa-kpi-strip__body {
+  padding: 0;
+}
+
+/* ----- Table layout ----------------------------------------------------- */
+.pa-kpi-strip__row,
+.pa-kpi-strip__head-row {
+  display: grid;
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.6fr); /* target (bar + pct stacked) */
+  column-gap: 1.6rem;
+  align-items: center;
+  position: relative;
+  padding: 1.1rem 1.6rem;
+}
+
+/* Divider between data rows / between head and first row only. */
+.pa-kpi-strip__row + .pa-kpi-strip__row,
+.pa-kpi-strip__head-row + .pa-kpi-strip__row {
+  border-top: 1px solid var(--pa-border-color);
+}
+
+/* Hover host: subtle row highlight so the cursor-anchored popover has a
+   clear "this row" anchor. */
+.pa-kpi-strip__row:hover {
+  background: var(--pa-surface-hover);
+}
+
+/* ----- Header cells (uppercase mono captions) --------------------------- */
+.pa-kpi-strip__head {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.1rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--pa-text-tertiary);
+}
+.pa-kpi-strip__head--num {
+  text-align: end;
+}
+
+/* ----- Metric label ----------------------------------------------------- */
+.pa-kpi-strip__metric {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.4rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 78%, transparent);
+  line-height: 1.2;
+}
+
+/* ----- NOW (focal value) ------------------------------------------------ */
+.pa-kpi-strip__now {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.8rem;
+  font-weight: 700;
+  text-align: end;
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-end;
+  color: var(--pa-text-color-1);
+  white-space: nowrap;
+  line-height: 1;
+}
+.pa-kpi-strip__now .pa-kpi-strip__num {
+  font-weight: 700;
+}
+.pa-kpi-strip__now .pa-kpi-strip__unit {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  margin: 0 0.2rem;
+}
+
+/* ----- PREV (reference data, low contrast) ------------------------------ */
+.pa-kpi-strip__prev {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--pa-text-tertiary);
+  text-align: end;
+  white-space: nowrap;
+}
+
+/* ----- Δ% (sentiment-coloured) ------------------------------------------ */
+.pa-kpi-strip__delta {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.5rem;
+  font-weight: 700;
+  text-align: end;
+  white-space: nowrap;
+  color: var(--pa-positive);
+}
+.pa-kpi-strip__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-strip__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-strip__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-strip__delta--up-strong {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-strip__delta--down-strong {
+  color: var(--pa-very-negative);
+}
+
+/* ----- VS TARGET (bar + pct stacked, capped at 100% visual) -------------
+   Theme-neutral grey fill — the pct value itself signals overshoot /
+   undershoot ("97" vs "108" vs "54") so colour reinforcement isn't
+   needed. The bar visually caps at 100% via overflow: hidden so an
+   over-target metric reads as "fully filled" rather than overflowing. */
+.pa-kpi-strip__target {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.pa-kpi-strip__bar {
+  position: relative;
+  height: 0.5rem;
+  background: var(--pa-surface-track);
+  overflow: hidden;
+  border-radius: 0.1rem;
+}
+
+.pa-kpi-strip__fill {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: color-mix(in srgb, var(--pa-text-color-1) 40%, transparent);
+}
+
+.pa-kpi-strip__bar-pct {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.05rem;
+  font-weight: 600;
+  color: var(--pa-text-secondary);
+  align-self: flex-end;
+  line-height: 1;
+}
+
+/* ----- --no-prev: 4-col layout (metric / now / Δ% / target) -------------
+   Useful for narrow placements; markup omits the prev cells. */
+.pa-kpi-strip--no-prev .pa-kpi-strip__row,
+.pa-kpi-strip--no-prev .pa-kpi-strip__head-row {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.6fr);
+}
+
+/* ========================================
+   KPI · Editorial minimal
+   Six KPIs in a 2×3 / 3×2 grid with hairline rules between cells,
+   generous space, and an extra-light-weight number as the focal point per
+   tile. No charts, no pills — the design's whole identity is the thin
+   numeral. Renders as a table card (zero card-body padding) so hairlines
+   go edge-to-edge.
+   ======================================== */
+.pa-kpi-edit__body {
+  padding: 0;
+}
+
+/* ----- Grid + hairline rules -------------------------------------------
+   `gap: 1px` over `background: var(--pa-border-color)` with each tile
+   painting `background: var(--pa-card-bg)` on top. Only the gap shows
+   through, giving perfect single-pixel hairlines on every interior
+   boundary (vertical and horizontal) for free, regardless of column
+   count. The card's outer border supplies the perimeter. */
+.pa-kpi-edit__grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1px;
+  background: var(--pa-border-color);
+  container-type: inline-size;
+}
+
+@container (max-width: 640px) {
+  .pa-kpi-edit__grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@container (max-width: 360px) {
+  .pa-kpi-edit__grid {
+    grid-template-columns: 1fr;
+  }
+}
+/* Modifier: force 2-col regardless of card width. For placements wanting
+   a deterministic 2×N layout (e.g. 4 tiles as clean 2×2) instead of
+   relying on the container query to land in the right bucket. */
+.pa-kpi-edit__grid--2col {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+/* ----- Tile (editorial spacing leans on the 2.4rem padding) ------------- */
+.pa-kpi-edit__tile {
+  background: var(--pa-card-bg);
+  padding: 2.4rem 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+  position: relative;
+  min-width: 0;
+  /* Hover host: faint wash so the cursor-anchored popover has a clear
+     "this tile" anchor. */
+}
+.pa-kpi-edit__tile:hover {
+  background: color-mix(in srgb, var(--pa-text-color-1) 4%, var(--pa-card-bg));
+}
+
+/* ----- Label (uppercase mono caption) ----------------------------------- */
+.pa-kpi-edit__label {
+  font-family: var(--base-font-family-mono);
+  font-size: 1.2rem;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  line-height: 1.3;
+}
+
+/* ----- Value (the editorial signature) ---------------------------------
+   - NOT mono — mono fonts rarely have a true 200 weight; using the body
+     sans gives proper thin glyphs that read as "editorial" rather than
+     "monospace at low contrast".
+   - font-weight: 200 (extra-light). 300 was tested first but didn't read
+     distinctly enough as "light" against the body's 400 default.
+   - clamp() lets the number shrink in narrow 25% page-grid cells without
+     manual breakpoints. */
+.pa-kpi-edit__value {
+  font-family: var(--base-font-family);
+  font-size: clamp(3.2rem, 18cqi, 5.6rem);
+  font-weight: 200;
+  letter-spacing: -0.02em;
+  line-height: 1;
+  color: var(--pa-text-color-1);
+  display: flex;
+  align-items: baseline;
+  gap: 0.2rem;
+  flex-wrap: wrap;
+}
+
+.pa-kpi-edit__num {
+  font-weight: 200;
+  font-variant-numeric: tabular-nums;
+}
+
+.pa-kpi-edit__unit {
+  font-size: 0.4em;
+  font-weight: 300;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  letter-spacing: 0;
+}
+
+/* ----- Meta row (delta + tgt) ------------------------------------------ */
+.pa-kpi-edit__meta {
+  display: flex;
+  align-items: baseline;
+  gap: 1.4rem;
+  font-family: var(--base-font-family-mono);
+  font-size: 1.3rem;
+  line-height: 1.3;
+  flex-wrap: wrap;
+}
+
+.pa-kpi-edit__delta {
+  font-weight: 700;
+  white-space: nowrap;
+  color: var(--pa-positive);
+}
+.pa-kpi-edit__delta--positive {
+  color: var(--pa-positive);
+}
+.pa-kpi-edit__delta--negative {
+  color: var(--pa-negative);
+}
+.pa-kpi-edit__delta--neutral {
+  color: var(--pa-neutral);
+}
+.pa-kpi-edit__delta--up-strong {
+  color: var(--pa-very-positive);
+}
+.pa-kpi-edit__delta--down-strong {
+  color: var(--pa-very-negative);
+}
+
+.pa-kpi-edit__target {
+  font-weight: 500;
+  color: color-mix(in srgb, var(--pa-text-color-1) 50%, transparent);
+  white-space: nowrap;
+}
+.pa-kpi-edit__target em {
+  font-style: normal;
+  color: color-mix(in srgb, var(--pa-text-color-1) 38%, transparent);
+  margin-right: 0.5rem;
+}
+
 /* ========================================
    Utility Components
    Font utilities, compact mode, component showcase