@keenmate/pure-admin-theme-express 1.0.0 → 1.1.1

package/dist/express.css

@@ -135,10 +135,10 @@ figure {
 body {
   margin: 0;
   padding: 0;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: var(--base-font-family);
   font-size: 1.6rem;
-  color: var(--pa-text-primary);
-  background-color: var(--pa-primary-bg);
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-main-bg);
   line-height: 1.5;
   overflow-x: hidden;
   overflow-y: scroll;
@@ -151,7 +151,7 @@ body::before {
   left: 0;
   right: 0;
   bottom: 0;
-  background: radial-gradient(circle at 20% 80%, rgba(212, 5, 17, 0.03) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(212, 5, 17, 0.03) 0%, transparent 50%);
+  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%);
   pointer-events: none;
   z-index: -1;
 }
@@ -177,14 +177,14 @@ label {
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--pa-primary-bg);
+  background: var(--pa-main-bg);
   border-radius: 3px;
 }
 
 *::-webkit-scrollbar-thumb {
   background: var(--pa-border-color);
   border-radius: 3px;
-  border: 1px solid var(--pa-primary-bg);
+  border: 1px solid var(--pa-main-bg);
 }
 
 *::-webkit-scrollbar-thumb:hover {
@@ -196,13 +196,13 @@ label {
 }
 
 *::-webkit-scrollbar-corner {
-  background: var(--pa-primary-bg);
+  background: var(--pa-main-bg);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--pa-border-color) var(--pa-primary-bg);
+  scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
 }
 
 /* ========================================
@@ -312,7 +312,7 @@ body.pa-layout--sticky {
 .pa-layout {
   max-width: 100%;
   margin: 4.8rem auto 0;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   overflow: visible;
   display: flex;
   flex-direction: column;
@@ -453,13 +453,13 @@ body.pa-layout--sticky .pa-layout__inner {
    Sidebar navigation with nested submenus
    ======================================== */
 :root {
-  --pa-sidebar-width: 29rem;
-  --pa-sidebar-min-width: 18rem;
-  --pa-sidebar-max-width: 50rem;
+  --pa-local-sidebar-width: 28.8rem;
+  --pa-local-sidebar-min-width: 18rem;
+  --pa-local-sidebar-max-width: 50rem;
 }
 
 :where(.pa-layout__sidebar) {
-  width: var(--pa-sidebar-width);
+  width: var(--pa-local-sidebar-width);
 }
 
 .pa-layout__sidebar {
@@ -670,7 +670,7 @@ body.loaded .pa-sidebar__chevron {
   opacity: 1;
   overflow: visible !important;
   z-index: 1050;
-  border-right: 1px solid #E5E5E5;
+  border-right: 1px solid #e1e5e9;
 }
 
 .sidebar-hidden .pa-layout__sidebar--icon-collapse .pa-sidebar__item {
@@ -845,7 +845,7 @@ body.loaded .pa-sidebar__chevron {
 }
 
 body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse {
-  width: 29rem;
+  width: 28.8rem;
 }
 
 body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__label {
@@ -990,7 +990,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-header__dropdown li a {
   display: block;
   padding: 0.8rem 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   border-radius: 0;
   white-space: nowrap;
   text-decoration: none;
@@ -2825,7 +2825,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header h4,
 .pa-card__header h5,
 .pa-card__header h6 {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.6rem;
 }
 
@@ -2853,7 +2853,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   text-overflow: ellipsis;
   white-space: nowrap;
   margin: 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.6rem;
   font-weight: 600;
   line-height: 1;
@@ -2895,7 +2895,7 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 }
 
 .pa-card__meta {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -2985,15 +2985,15 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   padding: 1.2rem 1rem;
   border: none;
   background: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
   border-bottom: 2px solid transparent;
 }
 
 .pa-card__tab:hover {
-  color: var(--pa-text-primary);
-  background-color: rgba(212, 5, 17, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-card__tab--active {
@@ -3023,14 +3023,14 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   border-radius: 4px;
   font-size: 1.4rem;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
 }
 
 .pa-card__tabs--inline .pa-card__tab:hover {
-  background-color: rgba(212, 5, 17, 0.05);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.05);
+  color: var(--pa-text-color-1);
 }
 
 .pa-card__tabs--inline .pa-card__tab--active {
@@ -3049,11 +3049,11 @@ a.pa-card:hover, a.pa-card:visited {
 }
 
 a.pa-card h1, a.pa-card h2, a.pa-card h3, a.pa-card h4, a.pa-card h5, a.pa-card h6 {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 a.pa-card p {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-section {
@@ -3061,14 +3061,14 @@ a.pa-card p {
 }
 
 .pa-section h3 {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 1.6rem;
   border-bottom: 2px solid var(--pa-accent);
   padding-bottom: 0.8rem;
 }
 
 .pa-section-title {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 1.6rem;
   border-bottom: 2px solid var(--pa-accent);
   padding-bottom: 0.8rem;
@@ -3090,7 +3090,7 @@ a.pa-card p {
   padding: 0.8rem 1.2rem;
   border: none;
   background: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
   border-bottom: 2px solid transparent;
@@ -3102,13 +3102,13 @@ a.pa-card p {
 }
 
 .pa-tabs__item:hover {
-  color: var(--pa-text-primary);
-  background-color: rgba(212, 5, 17, 0.05);
+  color: var(--pa-text-color-1);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs__item--active {
-  color: #D40511;
-  border-bottom-color: #D40511;
+  color: #007bff;
+  border-bottom-color: #007bff;
   font-weight: 600;
 }
 
@@ -3137,13 +3137,13 @@ a.pa-card p {
 .pa-tabs--pills .pa-tabs__item {
   border-radius: 8px;
   border: 1px solid transparent;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
 }
 
 .pa-tabs--pills .pa-tabs__item:hover {
-  background-color: rgba(212, 5, 17, 0.1);
-  border-color: rgba(212, 5, 17, 0.3);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.1);
+  border-color: rgba(0, 123, 255, 0.3);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tabs--pills .pa-tabs__item--active {
@@ -3156,7 +3156,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: 8px;
   padding: 0.4rem;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   gap: 0.4rem;
 }
 
@@ -3168,13 +3168,13 @@ a.pa-card p {
 }
 
 .pa-tabs--boxed .pa-tabs__item:hover {
-  background-color: rgba(212, 5, 17, 0.1);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.1);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tabs--boxed .pa-tabs__item--active {
   background-color: var(--pa-card-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
@@ -3201,12 +3201,12 @@ a.pa-card p {
 }
 
 .pa-tabs--vertical .pa-tabs__item:hover {
-  background-color: rgba(212, 5, 17, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs--vertical .pa-tabs__item--active {
-  border-right-color: #D40511;
-  background-color: rgba(212, 5, 17, 0.1);
+  border-right-color: #007bff;
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-tabs--vertical .pa-tabs__item i {
@@ -3262,8 +3262,8 @@ a.pa-card p {
   bottom: 0;
   width: 3.2rem;
   border: none;
-  background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
-  color: var(--pa-text-primary);
+  background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
+  color: var(--pa-text-color-1);
   cursor: pointer;
   z-index: 1;
   display: flex;
@@ -3275,17 +3275,17 @@ a.pa-card p {
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn:hover {
-  background: linear-gradient(to right, var(--pa-primary-bg), color-mix(in srgb, var(--pa-primary-bg) 80%, transparent));
+  background: linear-gradient(to right, var(--pa-main-bg), color-mix(in srgb, var(--pa-main-bg) 80%, transparent));
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn--left {
   left: 0;
-  background: linear-gradient(to right, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
+  background: linear-gradient(to right, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn--right {
   right: 0;
-  background: linear-gradient(to left, color-mix(in srgb, var(--pa-primary-bg) 95%, transparent), transparent);
+  background: linear-gradient(to left, color-mix(in srgb, var(--pa-main-bg) 95%, transparent), transparent);
 }
 
 .pa-tabs--scrollable .pa-tabs__scroll-btn--visible {
@@ -3329,7 +3329,7 @@ a.pa-card p {
 }
 
 .pa-tabs--border-top .pa-tabs__item--active {
-  border-top-color: #D40511;
+  border-top-color: #007bff;
   border-bottom-color: transparent;
 }
 
@@ -3418,7 +3418,7 @@ a.pa-card p {
   padding: 0;
   border: none;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   transition: all 0.1s ease-out;
   border-left: 1px solid var(--pa-border-color);
@@ -3428,8 +3428,8 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-toggle:hover {
-  background-color: rgba(212, 5, 17, 0.05);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.05);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-toggle--has-active {
@@ -3479,11 +3479,11 @@ a.pa-card p {
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item:hover {
-  background-color: rgba(212, 5, 17, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-tabs__container--card .pa-tabs__overflow-menu .pa-tabs__item--active {
-  background-color: rgba(212, 5, 17, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
   border-bottom: none;
 }
 
@@ -3534,23 +3534,23 @@ a.pa-card p {
 }
 
 .pa-stat__icon--primary {
-  background-color: rgba(212, 5, 17, 0.1);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-stat__icon--success {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+  background-color: rgba(40, 167, 69, 0.1);
+  color: #28a745;
 }
 
 .pa-stat__icon--warning {
-  background-color: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #ffc107;
 }
 
 .pa-stat__icon--info {
-  background-color: rgba(6, 182, 212, 0.1);
-  color: #06b6d4;
+  background-color: rgba(23, 162, 184, 0.1);
+  color: #17a2b8;
 }
 
 .pa-stat__content {
@@ -3560,12 +3560,12 @@ a.pa-card p {
 .pa-stat__number {
   font-size: 2.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-stat__label {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -3580,14 +3580,14 @@ a.pa-card p {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   font-weight: 500;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-bottom: 0.8rem;
 }
 
 .pa-stat--hero .pa-stat__value {
   font-size: 3.2rem;
   font-weight: 700;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   line-height: 1.1;
   margin-bottom: 0.8rem;
 }
@@ -3598,15 +3598,15 @@ a.pa-card p {
 }
 
 .pa-stat--hero .pa-stat__change--positive {
-  color: #10b981;
+  color: #28a745;
 }
 
 .pa-stat--hero .pa-stat__change--negative {
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-stat--hero .pa-stat__change--neutral {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-stat--square {
@@ -3673,32 +3673,32 @@ a.pa-card p {
 }
 
 .pa-stat--square.pa-stat--primary {
-  background-color: #D40511;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--success {
-  background-color: #10b981;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--info {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--warning {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-stat--square.pa-stat--danger {
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-stat--square.pa-stat--secondary {
-  background-color: var(--pa-text-secondary);
+  background-color: var(--pa-text-color-2);
   color: #ffffff;
 }
 
@@ -3781,24 +3781,24 @@ a.pa-card p {
 
 .pa-list-basic--icon li::before {
   content: "✓";
-  color: #10b981;
+  color: #28a745;
   font-weight: 600;
   flex-shrink: 0;
 }
 
 .pa-list-basic--icon.pa-list-basic--danger li::before {
   content: "✗";
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-list-basic--icon.pa-list-basic--info li::before {
   content: "→";
-  color: #06b6d4;
+  color: #17a2b8;
 }
 
 .pa-list-basic--icon.pa-list-basic--warning li::before {
   content: "!";
-  color: #f59e0b;
+  color: #ffc107;
 }
 
 .pa-list-ordered {
@@ -3826,7 +3826,7 @@ a.pa-card p {
 
 .pa-list-definition dt {
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
   margin-top: 1.6rem;
 }
@@ -3838,7 +3838,7 @@ a.pa-card p {
 .pa-list-definition dd {
   margin-left: 2.4rem;
   margin-bottom: 0.8rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.6;
 }
 
@@ -3875,14 +3875,14 @@ a.pa-card p {
 }
 
 .pa-list__item:hover {
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
 }
 
 .pa-list__avatar {
   width: 3.5rem;
   height: 3.5rem;
   border-radius: 50%;
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3895,18 +3895,18 @@ a.pa-card p {
 
 .pa-list__title {
   font-weight: 500;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-list__subtitle {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
   margin-bottom: 0.4rem;
 }
 
 .pa-list__meta {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
@@ -4086,7 +4086,7 @@ a.pa-card p {
 
 .pa-composite-badge__button:focus {
   outline: none;
-  box-shadow: 0 0 0 2px rgba(152, 4, 12, 0.25);
+  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
 }
 
 /* ========================================
@@ -4094,67 +4094,67 @@ a.pa-card p {
    Color variations for composite badges
    ======================================== */
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #D40511;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label {
-  background-color: rgba(212, 5, 17, 0.06);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.05);
+  color: #007bff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__label:hover {
-  background-color: rgba(212, 5, 17, 0.12);
+  background-color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button {
-  background-color: #D40511;
+  background-color: #007bff;
   color: #ffffff;
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:hover {
-  background-color: #F91320;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #FFCC00;
-  color: #000000;
+  background-color: #6c757d;
+  color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__label {
-  background-color: #F2F2F2;
-  color: var(--pa-text-secondary);
+  background-color: #f8f9fa;
+  color: var(--pa-text-color-2);
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__label:hover {
-  background-color: #FFF0B2;
+  background-color: #f8f9fa;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button {
-  background-color: #FFCC00;
-  color: #000000;
+  background-color: #6c757d;
+  color: #ffffff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:hover {
-  background-color: #FFE57F;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #10b981;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-composite-badge--success .pa-composite-badge__label {
   background-color: #d4edda;
-  color: #065f46;
+  color: #155724;
 }
 
 .pa-composite-badge--success .pa-composite-badge__label:hover {
@@ -4162,26 +4162,26 @@ a.pa-card p {
 }
 
 .pa-composite-badge--success .pa-composite-badge__button {
-  background-color: #10b981;
+  background-color: #28a745;
   color: #ffffff;
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:hover {
-  background-color: #059669;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 
 .pa-composite-badge--success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__label {
   background-color: #f8d7da;
-  color: #7f1d1d;
+  color: #721c24;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__label:hover {
@@ -4189,26 +4189,26 @@ a.pa-card p {
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button {
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button:hover {
-  background-color: #D40511;
+  background-color: rgb(189.2151898734, 32.7848101266, 47.7721518987);
 }
 
 .pa-composite-badge--danger .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__label {
   background-color: #fff3cd;
-  color: #78350f;
+  color: #856404;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__label:hover {
@@ -4216,26 +4216,26 @@ a.pa-card p {
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:hover {
-  background-color: #d97706;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--info .pa-composite-badge__icon {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-composite-badge--info .pa-composite-badge__label {
   background-color: #d1ecf1;
-  color: #164e63;
+  color: #0c5460;
 }
 
 .pa-composite-badge--info .pa-composite-badge__label:hover {
@@ -4243,127 +4243,127 @@ a.pa-card p {
 }
 
 .pa-composite-badge--info .pa-composite-badge__button {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
   color: #ffffff;
 }
 
 .pa-composite-badge--info .pa-composite-badge__button:hover {
-  background-color: #0891b2;
+  background-color: rgb(17.3333333333, 122.0869565217, 138.6666666667);
 }
 
 .pa-composite-badge--info .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--light .pa-composite-badge__icon {
-  background-color: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label {
-  background-color: #FFCC00;
-  color: #333333;
+  background-color: #ffffff;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__label:hover {
-  background-color: #E5E5E5;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button {
-  background-color: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:hover {
-  background-color: #E5E5E5;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
-  background-color: #333333;
+  background-color: #343a40;
   color: #ffffff;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__label {
-  background-color: #FFF0B2;
-  color: var(--pa-text-primary);
+  background-color: #f8f9fa;
+  color: var(--pa-text-color-1);
 }
 
 .pa-composite-badge--dark .pa-composite-badge__label:hover {
-  background-color: #E5E5E5;
+  background-color: #e1e5e9;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button {
-  background-color: #333333;
+  background-color: #343a40;
   color: #ffffff;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:hover {
-  background-color: #000000;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.12);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.12);
 }
 
 .pa-composite-badge--primary .pa-composite-badge__icon {
-  background-color: #D40511;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--secondary .pa-composite-badge__icon {
-  background-color: #FFCC00;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--success .pa-composite-badge__icon {
-  background-color: #10b981;
+  background-color: #28a745;
 }
 
 .pa-composite-badge--danger .pa-composite-badge__icon {
-  background-color: #98040C;
+  background-color: #dc3545;
 }
 
 .pa-composite-badge--warning .pa-composite-badge__icon {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--info .pa-composite-badge__icon {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
 }
 
 .pa-composite-badge--light .pa-composite-badge__icon {
-  background-color: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--dark .pa-composite-badge__icon {
-  background-color: #333333;
+  background-color: #343a40;
 }
 
 .pa-composite-badge--label-primary .pa-composite-badge__label {
-  background-color: rgb(252.9493087558, 168.0506912442, 172.9723502304);
-  color: rgb(62.5253456221, 1.4746543779, 5.0138248848);
+  background-color: rgb(204, 228.6, 255);
+  color: rgb(0, 49.2, 102);
 }
 
 .pa-composite-badge--label-primary .pa-composite-badge__label:hover {
-  background-color: rgb(252.3617511521, 143.1382488479, 149.4700460829);
+  background-color: rgb(178.5, 215.4, 255);
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label {
-  background-color: rgb(255, 239.7, 178.5);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
   color: #383d41;
 }
 
 .pa-composite-badge--label-secondary .pa-composite-badge__label:hover {
-  background-color: rgb(255, 234.6, 153);
+  background-color: rgb(188.4763948498, 193.2660944206, 197.5236051502);
 }
 
 .pa-composite-badge--label-success .pa-composite-badge__label {
   background-color: #d4edda;
-  color: #065f46;
+  color: #155724;
 }
 
 .pa-composite-badge--label-success .pa-composite-badge__label:hover {
@@ -4372,7 +4372,7 @@ a.pa-card p {
 
 .pa-composite-badge--label-danger .pa-composite-badge__label {
   background-color: #f8d7da;
-  color: #7f1d1d;
+  color: #721c24;
 }
 
 .pa-composite-badge--label-danger .pa-composite-badge__label:hover {
@@ -4381,7 +4381,7 @@ a.pa-card p {
 
 .pa-composite-badge--label-warning .pa-composite-badge__label {
   background-color: #fff3cd;
-  color: #78350f;
+  color: #856404;
 }
 
 .pa-composite-badge--label-warning .pa-composite-badge__label:hover {
@@ -4390,7 +4390,7 @@ a.pa-card p {
 
 .pa-composite-badge--label-info .pa-composite-badge__label {
   background-color: #d1ecf1;
-  color: #164e63;
+  color: #0c5460;
 }
 
 .pa-composite-badge--label-info .pa-composite-badge__label:hover {
@@ -4398,107 +4398,107 @@ a.pa-card p {
 }
 
 .pa-composite-badge--label-light .pa-composite-badge__label {
-  background-color: rgb(240.1, 240.1, 240.1);
-  color: #333333;
+  background-color: rgb(253.95, 254.1, 254.25);
+  color: #2c3e50;
 }
 
 .pa-composite-badge--label-light .pa-composite-badge__label:hover {
-  background-color: rgb(255, 239.7, 178.5);
+  background-color: rgb(202.1566523605, 205.9613733906, 209.3433476395);
 }
 
 .pa-composite-badge--label-dark .pa-composite-badge__label {
-  background-color: rgb(178.5, 178.5, 178.5);
-  color: rgb(63.75, 63.75, 63.75);
+  background-color: rgb(178.3103448276, 185.5, 192.6896551724);
+  color: rgb(63.4310344828, 70.75, 78.0689655172);
 }
 
 .pa-composite-badge--label-dark .pa-composite-badge__label:hover {
-  background-color: rgb(165.75, 165.75, 165.75);
+  background-color: rgb(164.2413793103, 172.75, 181.2586206897);
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button {
-  background-color: #D40511;
+  background-color: #007bff;
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:hover {
-  background-color: #F91320;
+  background-color: rgb(51, 149.4, 255);
 }
 
 .pa-composite-badge--btn-primary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(212, 5, 17, 0.25);
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button {
-  background-color: #FFCC00;
+  background-color: #6c757d;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:hover {
-  background-color: #FFE57F;
+  background-color: #545b62;
 }
 
 .pa-composite-badge--btn-secondary .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(255, 204, 0, 0.25);
+  box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button {
-  background-color: #10b981;
+  background-color: #28a745;
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button:hover {
-  background-color: #059669;
+  background-color: rgb(30.1449275362, 125.8550724638, 52);
 }
 
 .pa-composite-badge--btn-success .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
+  box-shadow: 0 0 0 2px rgba(40, 167, 69, 0.25);
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button {
-  background-color: #f59e0b;
-  color: #ffffff;
+  background-color: #ffc107;
+  color: #212529;
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:hover {
-  background-color: #d97706;
+  background-color: rgb(211, 158.25, 0);
 }
 
 .pa-composite-badge--btn-warning .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
+  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.25);
 }
 
 .pa-composite-badge--btn-info .pa-composite-badge__button {
-  background-color: #06b6d4;
+  background-color: #17a2b8;
 }
 
 .pa-composite-badge--btn-info .pa-composite-badge__button:hover {
-  background-color: #0891b2;
+  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(6, 182, 212, 0.25);
+  box-shadow: 0 0 0 2px rgba(23, 162, 184, 0.25);
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button {
-  background-color: #EBEBEB;
-  color: #333333;
+  background-color: #f8f9fa;
+  color: #2c3e50;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:hover {
-  background-color: #E5E5E5;
+  background-color: #e9ecef;
 }
 
 .pa-composite-badge--btn-light .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(235, 235, 235, 0.25);
+  box-shadow: 0 0 0 2px rgba(248, 249, 250, 0.25);
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button {
-  background-color: #333333;
+  background-color: #343a40;
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:hover {
-  background-color: #000000;
+  background-color: #1d2124;
 }
 
 .pa-composite-badge--btn-dark .pa-composite-badge__button:focus {
-  box-shadow: 0 0 0 2px rgba(51, 51, 51, 0.25);
+  box-shadow: 0 0 0 2px rgba(52, 58, 64, 0.25);
 }
 
 /* ========================================
@@ -4530,7 +4530,7 @@ a.pa-card p {
   gap: 0.4rem;
   padding: 0.4rem 0.8rem;
   background-color: var(--pa-accent-light);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.2rem;
   font-weight: 500;
   line-height: 1.2;
@@ -4687,7 +4687,7 @@ a.pa-card p {
   cursor: pointer;
   transition: all 0.1s ease-out;
   background: none;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-btn:hover {
@@ -4708,11 +4708,11 @@ a.pa-card p {
 .pa-btn--secondary {
   background-color: transparent;
   border-color: var(--pa-border-color);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-btn--secondary:hover {
-  background-color: var(--pa-primary-bg);
+  background-color: var(--pa-main-bg);
   border-color: var(--pa-accent);
 }
 
@@ -5132,27 +5132,27 @@ a.pa-card p {
 }
 
 .pa-spinner--primary {
-  border-top-color: #D40511;
+  border-top-color: #007bff;
 }
 
 .pa-spinner--secondary {
-  border-top-color: #FFCC00;
+  border-top-color: #6c757d;
 }
 
 .pa-spinner--success {
-  border-top-color: #10b981;
+  border-top-color: #28a745;
 }
 
 .pa-spinner--danger {
-  border-top-color: #98040C;
+  border-top-color: #dc3545;
 }
 
 .pa-spinner--warning {
-  border-top-color: #f59e0b;
+  border-top-color: #ffc107;
 }
 
 .pa-spinner--info {
-  border-top-color: #06b6d4;
+  border-top-color: #17a2b8;
 }
 
 .pa-loader-dots {
@@ -5551,7 +5551,7 @@ a.pa-card p {
 
 .pa-tooltip--warning::before {
   background-color: var(--pa-btn-warning-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-tooltip--warning::after {
@@ -5889,7 +5889,7 @@ a.pa-card p {
   border: 1px solid var(--pa-border-color);
   border-radius: 50%;
   background-color: var(--pa-popover-content-bg);
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   font-weight: 700;
   cursor: pointer;
@@ -5923,7 +5923,7 @@ a.pa-card p {
   align-items: center;
   justify-content: space-between;
   padding: 0.8rem 0.3rem 0.8rem 0.8rem;
-  border-bottom: 1px solid #E5E5E5;
+  border-bottom: 1px solid #e1e5e9;
   background-color: var(--pa-card-header-bg);
   border-radius: 4px 4px 0 0;
 }
@@ -5932,14 +5932,14 @@ a.pa-card p {
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-popover__body {
   padding: 1.6rem;
   font-size: 1.4rem;
   line-height: 1.5;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-align: left;
 }
 
@@ -5967,7 +5967,7 @@ a.pa-card p {
 
 .pa-popover__body code {
   padding: 0.2rem 0.4rem;
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
   border-radius: 2px;
   font-family: monospace;
   font-size: 0.9em;
@@ -5978,7 +5978,7 @@ a.pa-card p {
   border: none;
   font-size: 1.8rem;
   line-height: 1;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   padding: 0;
   width: 2.4rem;
@@ -5991,8 +5991,8 @@ a.pa-card p {
 }
 
 .pa-popover__close:hover {
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 10%, transparent);
-  color: var(--pa-text-primary);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 10%, transparent);
+  color: var(--pa-text-color-1);
 }
 
 .pa-popover--sm .pa-popover__content {
@@ -6119,13 +6119,13 @@ a.pa-card p {
 
 .pa-alert--primary {
   color: var(--pa-accent);
-  background-color: rgba(212, 5, 17, 0.08);
-  border-color: rgba(212, 5, 17, 0.2);
+  background-color: rgba(0, 123, 255, 0.08);
+  border-color: rgba(0, 123, 255, 0.2);
 }
 
 .pa-alert--secondary {
-  color: var(--pa-text-secondary);
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 15%, transparent);
+  color: var(--pa-text-color-2);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 15%, transparent);
   border-color: var(--pa-border-color);
 }
 
@@ -6155,15 +6155,15 @@ a.pa-card p {
 }
 
 .pa-alert--light {
-  color: var(--pa-text-primary);
-  background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
+  color: var(--pa-text-color-1);
+  background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
   border-color: var(--pa-border-color);
 }
 
 .pa-alert--dark {
-  color: var(--pa-text-primary);
-  background-color: color-mix(in srgb, var(--pa-text-primary) 5%, transparent);
-  border-color: color-mix(in srgb, var(--pa-text-primary) 10%, transparent);
+  color: var(--pa-text-color-1);
+  background-color: color-mix(in srgb, var(--pa-text-color-1) 5%, transparent);
+  border-color: color-mix(in srgb, var(--pa-text-color-1) 10%, transparent);
 }
 
 .pa-alert--outline-primary {
@@ -6317,12 +6317,12 @@ a.pa-card p {
 
 .pa-callout--primary {
   border-left-color: var(--pa-accent);
-  background-color: rgba(212, 5, 17, 0.08);
+  background-color: rgba(0, 123, 255, 0.08);
 }
 
 .pa-callout--secondary {
-  border-left-color: var(--pa-text-secondary);
-  background-color: color-mix(in srgb, var(--pa-text-secondary) 5%, transparent);
+  border-left-color: var(--pa-text-color-2);
+  background-color: color-mix(in srgb, var(--pa-text-color-2) 5%, transparent);
 }
 
 .pa-callout--success {
@@ -6451,7 +6451,7 @@ a.pa-card p {
   flex-shrink: 0;
   padding-top: 0.8rem;
   margin-bottom: 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-weight: 500;
   font-size: 1.4rem;
 }
@@ -6467,7 +6467,7 @@ a.pa-card p {
   align-items: center;
   gap: 0.8rem;
   margin-bottom: 0.3rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-weight: 500;
   font-size: 1.4rem;
 }
@@ -6491,7 +6491,7 @@ a.pa-card p {
   border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color 0.1s ease-out;
 }
 
@@ -6509,7 +6509,7 @@ a.pa-card p {
   border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color 0.1s ease-out;
 }
 
@@ -6526,7 +6526,7 @@ a.pa-card p {
   border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   transition: border-color 0.1s ease-out;
   resize: vertical;
   min-height: 9.6rem;
@@ -6539,7 +6539,7 @@ a.pa-card p {
 }
 
 .pa-textarea::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-input--xs,
@@ -6570,6 +6570,34 @@ a.pa-card p {
   font-size: 1.8rem;
 }
 
+.pa-textarea--xs {
+  height: 4rem;
+  min-height: 4rem;
+  padding: 0.6rem 0.8rem;
+  font-size: 1.2rem;
+}
+
+.pa-textarea--sm {
+  height: 6rem;
+  min-height: 6rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.4rem;
+}
+
+.pa-textarea--lg {
+  height: 12rem;
+  min-height: 12rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.6rem;
+}
+
+.pa-textarea--xl {
+  height: 16rem;
+  min-height: 16rem;
+  padding: 0.8rem 0.8rem;
+  font-size: 1.8rem;
+}
+
 .pa-mode-dark input[type=date]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=time]::-webkit-calendar-picker-indicator,
 .pa-mode-dark input[type=datetime-local]::-webkit-calendar-picker-indicator,
@@ -6652,7 +6680,7 @@ a.pa-card p {
   display: block;
   margin-top: 0.4rem;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-form-help--error {
@@ -6663,6 +6691,163 @@ a.pa-card p {
   color: var(--pa-success-bg);
 }
 
+.pa-form-help--warning {
+  color: var(--pa-warning-bg);
+}
+
+.pa-form-help--color-1 {
+  color: var(--pa-color-1);
+}
+
+.pa-form-help--color-2 {
+  color: var(--pa-color-2);
+}
+
+.pa-form-help--color-3 {
+  color: var(--pa-color-3);
+}
+
+.pa-form-help--color-4 {
+  color: var(--pa-color-4);
+}
+
+.pa-form-help--color-5 {
+  color: var(--pa-color-5);
+}
+
+.pa-form-help--color-6 {
+  color: var(--pa-color-6);
+}
+
+.pa-form-help--color-7 {
+  color: var(--pa-color-7);
+}
+
+.pa-form-help--color-8 {
+  color: var(--pa-color-8);
+}
+
+.pa-form-help--color-9 {
+  color: var(--pa-color-9);
+}
+
+.pa-input--color-1,
+.pa-select--color-1,
+.pa-textarea--color-1 {
+  border-color: var(--pa-color-1);
+}
+
+.pa-input--color-1:focus,
+.pa-select--color-1:focus,
+.pa-textarea--color-1:focus {
+  border-color: var(--pa-color-1);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-1) 25%, transparent);
+}
+
+.pa-input--color-2,
+.pa-select--color-2,
+.pa-textarea--color-2 {
+  border-color: var(--pa-color-2);
+}
+
+.pa-input--color-2:focus,
+.pa-select--color-2:focus,
+.pa-textarea--color-2:focus {
+  border-color: var(--pa-color-2);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-2) 25%, transparent);
+}
+
+.pa-input--color-3,
+.pa-select--color-3,
+.pa-textarea--color-3 {
+  border-color: var(--pa-color-3);
+}
+
+.pa-input--color-3:focus,
+.pa-select--color-3:focus,
+.pa-textarea--color-3:focus {
+  border-color: var(--pa-color-3);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-3) 25%, transparent);
+}
+
+.pa-input--color-4,
+.pa-select--color-4,
+.pa-textarea--color-4 {
+  border-color: var(--pa-color-4);
+}
+
+.pa-input--color-4:focus,
+.pa-select--color-4:focus,
+.pa-textarea--color-4:focus {
+  border-color: var(--pa-color-4);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-4) 25%, transparent);
+}
+
+.pa-input--color-5,
+.pa-select--color-5,
+.pa-textarea--color-5 {
+  border-color: var(--pa-color-5);
+}
+
+.pa-input--color-5:focus,
+.pa-select--color-5:focus,
+.pa-textarea--color-5:focus {
+  border-color: var(--pa-color-5);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-5) 25%, transparent);
+}
+
+.pa-input--color-6,
+.pa-select--color-6,
+.pa-textarea--color-6 {
+  border-color: var(--pa-color-6);
+}
+
+.pa-input--color-6:focus,
+.pa-select--color-6:focus,
+.pa-textarea--color-6:focus {
+  border-color: var(--pa-color-6);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-6) 25%, transparent);
+}
+
+.pa-input--color-7,
+.pa-select--color-7,
+.pa-textarea--color-7 {
+  border-color: var(--pa-color-7);
+}
+
+.pa-input--color-7:focus,
+.pa-select--color-7:focus,
+.pa-textarea--color-7:focus {
+  border-color: var(--pa-color-7);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-7) 25%, transparent);
+}
+
+.pa-input--color-8,
+.pa-select--color-8,
+.pa-textarea--color-8 {
+  border-color: var(--pa-color-8);
+}
+
+.pa-input--color-8:focus,
+.pa-select--color-8:focus,
+.pa-textarea--color-8:focus {
+  border-color: var(--pa-color-8);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-8) 25%, transparent);
+}
+
+.pa-input--color-9,
+.pa-select--color-9,
+.pa-textarea--color-9 {
+  border-color: var(--pa-color-9);
+}
+
+.pa-input--color-9:focus,
+.pa-select--color-9:focus,
+.pa-textarea--color-9:focus {
+  border-color: var(--pa-color-9);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pa-color-9) 25%, transparent);
+}
+
 /* ========================================
    Input Groups
    Input groups with prepend/append addons and buttons
@@ -6823,7 +7008,7 @@ a.pa-card p {
   transform: translateY(-50%);
   background: transparent;
   border: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   padding: 0.4rem;
   font-size: 1.6rem;
@@ -6834,7 +7019,7 @@ a.pa-card p {
 
 .pa-input-wrapper__clear:hover {
   opacity: 1;
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-input-wrapper__clear:focus {
@@ -6911,13 +7096,13 @@ a.pa-card p {
   position: relative;
   z-index: 1;
   background: transparent;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-search-highlight__field {
   display: inline;
-  background-color: rgba(212, 5, 17, 0.15);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.15);
+  color: #007bff;
   padding: 0.2rem 0.4rem;
   border-radius: 0.4rem;
   font-weight: 500;
@@ -6925,8 +7110,8 @@ a.pa-card p {
 
 .pa-search-highlight__operator {
   display: inline;
-  background-color: rgba(16, 185, 129, 0.15);
-  color: #10b981;
+  background-color: rgba(40, 167, 69, 0.15);
+  color: #28a745;
   padding: 0.2rem 0.4rem;
   border-radius: 0.4rem;
   font-weight: 500;
@@ -6936,7 +7121,7 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #E5E5E5;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
@@ -6966,7 +7151,7 @@ a.pa-card p {
 .pa-search-autocomplete__item-type {
   margin-left: auto;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
 }
 
@@ -6974,7 +7159,7 @@ a.pa-card p {
   padding: 0.4rem 1.2rem;
   font-size: 1.2rem;
   font-weight: 500;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background-color: var(--pa-card-header-bg);
@@ -6984,18 +7169,18 @@ a.pa-card p {
 .pa-search-autocomplete__empty {
   padding: 1.2rem;
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
 .pa-virtual-textbox {
   width: 100%;
   padding: 0.8rem 0.8rem;
-  border: 1px solid #E5E5E5;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   font-size: 1.4rem;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   cursor: text;
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -7005,13 +7190,13 @@ a.pa-card p {
 
 .pa-virtual-textbox:focus {
   outline: none;
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-virtual-textbox:empty::before {
   content: attr(data-placeholder);
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
   pointer-events: none;
 }
@@ -7047,7 +7232,7 @@ a.pa-card p {
   border: 1px solid transparent;
   border-radius: 4px;
   font-size: 1.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   white-space: pre-wrap;
   word-wrap: break-word;
   pointer-events: none;
@@ -7062,13 +7247,13 @@ a.pa-card p {
   z-index: 2;
   width: 100%;
   padding: 0.8rem 0.8rem;
-  border: 1px solid #E5E5E5;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   font-size: 1.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   background: transparent;
   color: transparent;
-  caret-color: var(--pa-text-primary);
+  caret-color: var(--pa-text-color-1);
   resize: none;
   overflow: hidden;
   line-height: 1.5;
@@ -7078,12 +7263,12 @@ a.pa-card p {
 
 .pa-inline-query-editor__input:focus {
   outline: none;
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-inline-query-editor__input::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
 }
 
@@ -7093,29 +7278,29 @@ a.pa-card p {
 }
 
 .pa-inline-query-token--field {
-  background-color: rgba(212, 5, 17, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(0, 123, 255, 0.15);
+  color: var(--pa-text-color-1);
 }
 
 .pa-inline-query-token--field.pa-inline-query-token--invalid {
-  background-color: rgba(152, 4, 12, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(220, 53, 69, 0.15);
+  color: var(--pa-text-color-1);
   text-decoration: wavy underline;
 }
 
 .pa-inline-query-token--operator {
-  background-color: rgba(var(--pa-text-secondary), 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(var(--pa-text-color-2), 0.15);
+  color: var(--pa-text-color-1);
 }
 
 .pa-inline-query-token--value {
-  background-color: rgba(16, 185, 129, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(40, 167, 69, 0.15);
+  color: var(--pa-text-color-1);
 }
 
 .pa-inline-query-token--keyword {
-  background-color: rgba(245, 158, 11, 0.15);
-  color: var(--pa-text-primary);
+  background-color: rgba(255, 193, 7, 0.15);
+  color: var(--pa-text-color-1);
   font-style: italic;
 }
 
@@ -7123,7 +7308,7 @@ a.pa-card p {
   position: absolute;
   z-index: 1000;
   background: var(--pa-input-bg);
-  border: 1px solid #E5E5E5;
+  border: 1px solid #e1e5e9;
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   max-height: 24rem;
@@ -7159,14 +7344,14 @@ a.pa-card p {
 .pa-inline-query-autocomplete__item-name {
   display: block;
   font-weight: 500;
-  color: #D40511;
+  color: #007bff;
   line-height: 1.3;
 }
 
 .pa-inline-query-autocomplete__item-type {
   display: block;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.7;
   line-height: 1.3;
 }
@@ -7175,10 +7360,10 @@ a.pa-card p {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 0.2rem 0.6rem;
-  background-color: rgba(var(--pa-text-secondary), 0.1);
-  color: var(--pa-text-secondary);
+  background-color: rgba(var(--pa-text-color-2), 0.1);
+  color: var(--pa-text-color-2);
   border-radius: 0.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
 /* ========================================
@@ -7198,7 +7383,7 @@ a.pa-card p {
   gap: 0.8rem;
   cursor: pointer;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   user-select: none;
 }
 
@@ -7339,7 +7524,7 @@ input:indeterminate + .pa-checkbox__box::after {
   gap: 0.8rem;
   cursor: pointer;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-radio input {
@@ -7389,14 +7574,14 @@ input:indeterminate + .pa-checkbox__box::after {
 web-daterangepicker {
   /* ===== BASE PRIMITIVES ===== */
   /* Colors */
-  --drp-accent-color: #D40511;
-  --drp-primary-bg: #D40511;
-  --drp-primary-bg-hover: #F91320;
-  --drp-text-primary: var(--pa-text-primary);
-  --drp-text-secondary: var(--pa-text-secondary);
-  --drp-border-color: #E5E5E5;
+  --drp-accent-color: #007bff;
+  --drp-primary-bg: #007bff;
+  --drp-primary-bg-hover: rgb(51, 149.4, 255);
+  --drp-text-primary: var(--pa-text-color-1);
+  --drp-text-secondary: var(--pa-text-color-2);
+  --drp-border-color: #e1e5e9;
   --drp-card-bg: var(--pa-card-bg);
-  --drp-hover-bg: #FFF0B2;
+  --drp-hover-bg: #f8f9fa;
   /* Spacing */
   --drp-spacing-xs: 0.4rem;
   --drp-spacing-sm: 0.8rem;
@@ -7432,18 +7617,18 @@ web-daterangepicker {
   /* ===== INPUT FIELD SEMANTIC VARIABLES ===== */
   /* Input colors */
   --drp-input-background: var(--pa-input-bg);
-  --drp-input-color: var(--pa-text-primary);
-  --drp-input-border-color: 1px solid #E5E5E5;
-  --drp-input-border-color-hover: #D40511;
-  --drp-input-border-color-focus: #D40511;
-  --drp-input-placeholder-color: var(--pa-text-secondary);
+  --drp-input-color: var(--pa-text-color-1);
+  --drp-input-border-color: #ced4da;
+  --drp-input-border-color-hover: #007bff;
+  --drp-input-border-color-focus: #007bff;
+  --drp-input-placeholder-color: var(--pa-text-color-2);
   --drp-input-disabled-background: var(--pa-input-bg);
-  --drp-input-disabled-color: var(--pa-text-secondary);
+  --drp-input-disabled-color: var(--pa-text-color-2);
   /* Input focus effects */
-  --drp-input-focus-shadow-color: rgba(212, 5, 17, 0.06);
+  --drp-input-focus-shadow-color: rgba(0, 123, 255, 0.05);
   --drp-input-focus-shadow-size: 3px;
   /* Input icon */
-  --drp-input-icon-color: var(--pa-text-secondary);
+  --drp-input-icon-color: var(--pa-text-color-2);
   --drp-input-icon-opacity: 1;
   /* Input size variants - matched to Pure Admin .pa-input sizes (10px base)
      Heights: xs=31px, sm=33px, md=35px, lg=38px, xl=41px */
@@ -7479,7 +7664,7 @@ web-daterangepicker {
   --drp-input-size-xl-icon-size: 2rem; /* 20px (10px base) */
   /* ===== CALENDAR CONTAINER ===== */
   --drp-calendar-bg: var(--pa-card-bg);
-  --drp-calendar-border: #E5E5E5;
+  --drp-calendar-border: #e1e5e9;
   --drp-calendar-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
   --drp-calendar-border-radius: 4px;
   --drp-calendar-padding: 1.6rem;
@@ -7488,91 +7673,91 @@ web-daterangepicker {
   --drp-header-padding: 0.8rem 1.2rem;
   --drp-header-font-size: 1.6rem;
   --drp-header-font-weight: 600;
-  --drp-header-text-color: var(--pa-text-primary);
-  --drp-header-bg-hover: rgba(212, 5, 17, 0.12);
-  --drp-header-bg-active: rgba(212, 5, 17, 0.06);
+  --drp-header-text-color: var(--pa-text-color-1);
+  --drp-header-bg-hover: rgba(0, 123, 255, 0.12);
+  --drp-header-bg-active: rgba(0, 123, 255, 0.05);
   /* ===== NAVIGATION ===== */
   --drp-nav-btn-size: 3.2rem; /* 32px (10px base) */
-  --drp-nav-text-color: var(--pa-text-primary);
-  --drp-nav-border-color: #E5E5E5;
-  --drp-nav-bg-hover: rgba(212, 5, 17, 0.12);
-  --drp-nav-bg-active: rgba(212, 5, 17, 0.06);
-  --drp-nav-border-hover: #D40511;
+  --drp-nav-text-color: var(--pa-text-color-1);
+  --drp-nav-border-color: #e1e5e9;
+  --drp-nav-bg-hover: rgba(0, 123, 255, 0.12);
+  --drp-nav-bg-active: rgba(0, 123, 255, 0.05);
+  --drp-nav-border-hover: #007bff;
   /* ===== WEEKDAY HEADER ===== */
   --drp-weekday-font-size: 1.2rem;
   --drp-weekday-font-weight: 600;
-  --drp-weekday-color: var(--pa-text-secondary);
+  --drp-weekday-color: var(--pa-text-color-2);
   --drp-weekday-padding: 0.4rem;
   /* ===== CALENDAR GRID ===== */
   --drp-day-size: 3.6rem; /* 36px (10px base) */
   --drp-day-font-size: 1.4rem;
   --drp-day-border-radius: 2px;
   /* Day states */
-  --drp-day-text-color: var(--pa-text-primary);
-  --drp-day-bg-hover: rgba(212, 5, 17, 0.12);
+  --drp-day-text-color: var(--pa-text-color-1);
+  --drp-day-bg-hover: rgba(0, 123, 255, 0.12);
   --drp-day-border-hover: transparent;
   /* Today indicator */
-  --drp-day-today-border: #D40511;
+  --drp-day-today-border: #007bff;
   /* Selected state */
-  --drp-day-selected-bg: #D40511;
+  --drp-day-selected-bg: #007bff;
   --drp-day-selected-color: #ffffff;
   /* Range state */
-  --drp-day-range-bg: rgba(212, 5, 17, 0.06);
-  --drp-day-range-text: var(--pa-text-primary);
+  --drp-day-range-bg: rgba(0, 123, 255, 0.05);
+  --drp-day-range-text: var(--pa-text-color-1);
   /* Focused state */
-  --drp-day-focused-outline: #D40511;
+  --drp-day-focused-outline: #007bff;
   /* Disabled state */
-  --drp-day-disabled-color: var(--pa-text-secondary);
+  --drp-day-disabled-color: var(--pa-text-color-2);
   --drp-day-disabled-opacity: 0.65;
   /* Other month */
-  --drp-day-other-month-color: var(--pa-text-secondary);
+  --drp-day-other-month-color: var(--pa-text-color-2);
   --drp-day-other-month-opacity: 0.5;
   /* ===== BADGES ===== */
   /* Dot badges (original style) */
   --drp-badge-size: 0.6rem; /* 6px (10px base) */
-  --drp-badge-primary: #D40511;
-  --drp-badge-success: #10b981;
-  --drp-badge-warning: #f59e0b;
-  --drp-badge-danger: #98040C;
-  --drp-badge-info: #06b6d4;
+  --drp-badge-primary: #007bff;
+  --drp-badge-success: #28a745;
+  --drp-badge-warning: #ffc107;
+  --drp-badge-danger: #dc3545;
+  --drp-badge-info: #17a2b8;
   /* Number badges */
-  --drp-badge-number-bg: #98040C;
+  --drp-badge-number-bg: #dc3545;
   --drp-badge-number-color: #ffffff;
   /* Count badges */
-  --drp-badge-count-bg: #D40511;
+  --drp-badge-count-bg: #007bff;
   --drp-badge-count-color: #ffffff;
   /* Text badges */
-  --drp-badge-text-bg: rgba(212, 5, 17, 0.06);
-  --drp-badge-text-color: var(--pa-text-primary);
+  --drp-badge-text-bg: rgba(0, 123, 255, 0.05);
+  --drp-badge-text-color: var(--pa-text-color-1);
   /* ===== SUMMARY BAR ===== */
-  --drp-summary-bg: #EBEBEB;
-  --drp-summary-border-color: #E5E5E5;
-  --drp-summary-text-color: var(--pa-text-primary);
-  --drp-summary-count-color: #D40511;
+  --drp-summary-bg: #f8f9fa;
+  --drp-summary-border-color: #e1e5e9;
+  --drp-summary-text-color: var(--pa-text-color-1);
+  --drp-summary-count-color: #007bff;
   --drp-summary-padding: 0.8rem 1.2rem;
   --drp-summary-font-size: 1.4rem;
   --drp-summary-font-weight: 500;
   /* ===== BUTTONS ===== */
   /* Today button */
-  --drp-button-today-bg: #FFCC00;
-  --drp-button-today-bg-hover: #FFE57F;
-  --drp-button-today-color: #000000;
-  --drp-button-today-border: #E5E5E5;
+  --drp-button-today-bg: #6c757d;
+  --drp-button-today-bg-hover: #545b62;
+  --drp-button-today-color: #ffffff;
+  --drp-button-today-border: #e1e5e9;
   /* Clear button */
-  --drp-button-clear-bg: #FFCC00;
-  --drp-button-clear-bg-hover: #FFE57F;
-  --drp-button-clear-color: #000000;
-  --drp-button-clear-border: #E5E5E5;
+  --drp-button-clear-bg: #6c757d;
+  --drp-button-clear-bg-hover: #545b62;
+  --drp-button-clear-color: #ffffff;
+  --drp-button-clear-border: #e1e5e9;
   /* Cancel button */
-  --drp-button-cancel-bg: #FFCC00;
-  --drp-button-cancel-bg-hover: #FFE57F;
-  --drp-button-cancel-color: #000000;
-  --drp-button-cancel-border: #E5E5E5;
+  --drp-button-cancel-bg: #6c757d;
+  --drp-button-cancel-bg-hover: #545b62;
+  --drp-button-cancel-color: #ffffff;
+  --drp-button-cancel-border: #e1e5e9;
   /* Apply button */
-  --drp-button-apply-bg: #D40511;
-  --drp-button-apply-bg-hover: #F91320;
+  --drp-button-apply-bg: #007bff;
+  --drp-button-apply-bg-hover: rgb(51, 149.4, 255);
   --drp-button-apply-color: #ffffff;
-  --drp-button-apply-border: #D40511;
+  --drp-button-apply-border: #007bff;
   /* Button sizing */
   --drp-button-padding: 0.8rem 1rem;
   --drp-button-font-size: 1.4rem;
@@ -7580,26 +7765,26 @@ web-daterangepicker {
   --drp-button-gap: 0.8rem;
   /* ===== UNIFIED NAVIGATION ===== */
   /* Range selectors in unified nav */
-  --drp-unified-range-text-color: var(--pa-text-primary);
-  --drp-unified-range-bg-hover: rgba(212, 5, 17, 0.12);
-  --drp-unified-range-bg-active: rgba(212, 5, 17, 0.06);
+  --drp-unified-range-text-color: var(--pa-text-color-1);
+  --drp-unified-range-bg-hover: rgba(0, 123, 255, 0.12);
+  --drp-unified-range-bg-active: rgba(0, 123, 255, 0.05);
   /* Month/Year display */
-  --drp-unified-month-color: var(--pa-text-primary);
+  --drp-unified-month-color: var(--pa-text-color-1);
   /* Rolling selector disabled state */
-  --drp-unified-rolling-disabled-color: var(--pa-text-secondary);
+  --drp-unified-rolling-disabled-color: var(--pa-text-color-2);
   /* ===== ROLLING SELECTOR ===== */
   --drp-rolling-bg: var(--pa-card-bg);
-  --drp-rolling-border: #E5E5E5;
+  --drp-rolling-border: #e1e5e9;
   --drp-rolling-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  --drp-rolling-item-hover-bg: rgba(212, 5, 17, 0.12);
-  --drp-rolling-item-selected-bg: #D40511;
+  --drp-rolling-item-hover-bg: rgba(0, 123, 255, 0.12);
+  --drp-rolling-item-selected-bg: #007bff;
   --drp-rolling-item-selected-text: #ffffff;
   --drp-rolling-font-size: 1.4rem;
-  --drp-rolling-item-text-color: var(--pa-text-primary);
-  --drp-rolling-item-disabled-color: var(--pa-text-secondary);
+  --drp-rolling-item-text-color: var(--pa-text-color-1);
+  --drp-rolling-item-disabled-color: var(--pa-text-color-2);
   /* ===== LOADING OVERLAY ===== */
   --drp-loading-bg: rgba(255, 255, 255, 0.8);
-  --drp-loading-spinner-color: #D40511;
+  --drp-loading-spinner-color: #007bff;
   --drp-loading-spinner-size: 1.6rem;
   /* ===== MULTIPLE MONTHS ===== */
   --drp-months-gap: 2.4rem;
@@ -7629,7 +7814,7 @@ web-daterangepicker {
 
 .pa-file-input__filename {
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7637,7 +7822,7 @@ web-daterangepicker {
 
 .pa-file-dropzone {
   position: relative;
-  border: 3.2px dashed #E5E5E5;
+  border: 3.2px dashed #e1e5e9;
   border-radius: 4px;
   padding: 3.2rem;
   text-align: center;
@@ -7647,13 +7832,13 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone:hover {
-  border-color: #D40511;
-  background: rgba(212, 5, 17, 0.05);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-dropzone--active {
-  border-color: #D40511;
-  background: rgba(212, 5, 17, 0.1);
+  border-color: #007bff;
+  background: rgba(0, 123, 255, 0.1);
   border-style: solid;
 }
 
@@ -7679,27 +7864,27 @@ web-daterangepicker {
 
 .pa-file-dropzone__text {
   font-size: 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-file-dropzone__text strong {
-  color: #D40511;
+  color: #007bff;
   font-weight: 600;
 }
 
 .pa-file-dropzone__hint {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-dropzone__drop-prompt {
   padding: 1.2rem;
-  border-bottom: 1.6px dashed #E5E5E5;
+  border-bottom: 1.6px dashed #e1e5e9;
   margin: -3.2rem -3.2rem 1.2rem -3.2rem;
   text-align: center;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-dropzone__drop-prompt-icon {
@@ -7729,7 +7914,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__file-card:hover {
-  border-color: #D40511;
+  border-color: #007bff;
   box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
 }
 
@@ -7740,7 +7925,7 @@ web-daterangepicker {
 
 .pa-file-dropzone__file-card-name {
   font-size: 1rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7750,7 +7935,7 @@ web-daterangepicker {
 
 .pa-file-dropzone__file-card-size {
   font-size: 1rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-top: 0.4rem;
 }
 
@@ -7761,7 +7946,7 @@ web-daterangepicker {
   width: 2rem;
   height: 2rem;
   border: none;
-  background: #98040C;
+  background: #dc3545;
   color: #ffffff;
   cursor: pointer;
   border-radius: 50%;
@@ -7784,7 +7969,7 @@ web-daterangepicker {
 
 .pa-file-dropzone__file-card-remove:hover {
   transform: scale(1.1);
-  background: rgba(152, 4, 12, 0.9);
+  background: rgba(220, 53, 69, 0.9);
 }
 
 .pa-file-dropzone__image-card {
@@ -7831,7 +8016,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__image-card-remove:hover {
-  background: #98040C;
+  background: #dc3545;
   transform: scale(1.1);
 }
 
@@ -7840,7 +8025,7 @@ web-daterangepicker {
   border: none;
   background: transparent;
   font-size: 1.6rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-dropzone__summary-line {
@@ -7853,7 +8038,7 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone__summary-line:hover {
-  background-color: rgba(212, 5, 17, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-dropzone__summary-line:not(:last-child)::after {
@@ -7866,11 +8051,11 @@ web-daterangepicker {
 
 .pa-file-dropzone__summary-count {
   font-weight: 500;
-  color: #D40511;
+  color: #007bff;
 }
 
 .pa-file-dropzone__summary-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: normal;
 }
 
@@ -7878,7 +8063,7 @@ web-daterangepicker {
   display: block;
   margin-top: 0.4rem;
   font-style: italic;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -7929,7 +8114,7 @@ web-daterangepicker {
 .pa-file-popover__title {
   font-size: 1.6rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-file-popover__close {
@@ -7937,7 +8122,7 @@ web-daterangepicker {
   height: 2.4rem;
   border: none;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   border-radius: 2px;
   font-size: 2rem;
@@ -7949,8 +8134,8 @@ web-daterangepicker {
 }
 
 .pa-file-popover__close:hover {
-  background: rgba(var(--pa-text-secondary), 0.1);
-  color: var(--pa-text-primary);
+  background: rgba(var(--pa-text-color-2), 0.1);
+  color: var(--pa-text-color-1);
 }
 
 .pa-file-popover__body {
@@ -7976,7 +8161,7 @@ web-daterangepicker {
   text-align: left;
   padding: 0.4rem 0.8rem;
   border-bottom: 1px solid var(--pa-border-color);
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: 600;
   font-size: 1.2rem;
   text-transform: uppercase;
@@ -7985,15 +8170,15 @@ web-daterangepicker {
 .pa-file-popover__table td {
   padding: 0.4rem 0.8rem;
   border-bottom: 1px solid var(--pa-border-color);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-file-popover__table tbody tr:hover {
-  background: rgba(212, 5, 17, 0.05);
+  background: rgba(0, 123, 255, 0.05);
 }
 
 .pa-file-popover__table tbody tr.uploading {
-  background: rgba(212, 5, 17, 0.1);
+  background: rgba(0, 123, 255, 0.1);
 }
 
 .pa-file-popover__file-name {
@@ -8004,7 +8189,7 @@ web-daterangepicker {
 }
 
 .pa-file-popover__file-size {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   white-space: nowrap;
 }
 
@@ -8014,7 +8199,7 @@ web-daterangepicker {
 
 .pa-file-popover__progress-bar {
   height: 6.4px;
-  background: rgba(212, 5, 17, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
   margin-bottom: 0.4rem;
@@ -8022,14 +8207,14 @@ web-daterangepicker {
 
 .pa-file-popover__progress-fill {
   height: 100%;
-  background: #D40511;
+  background: #007bff;
   border-radius: 2px;
   transition: width 0.48s ease;
 }
 
 .pa-file-popover__progress-text {
   font-size: 1rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-popover__status {
@@ -8039,19 +8224,19 @@ web-daterangepicker {
 }
 
 .pa-file-popover__status--pending {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-file-popover__status--uploading {
-  color: #D40511;
+  color: #007bff;
 }
 
 .pa-file-popover__status--complete {
-  color: #10b981;
+  color: #28a745;
 }
 
 .pa-file-popover__status--error {
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-file-popover__remove-cell {
@@ -8065,7 +8250,7 @@ web-daterangepicker {
   height: 3.2rem;
   border: 1px solid var(--pa-border-color);
   background: var(--pa-card-bg);
-  color: #98040C;
+  color: #dc3545;
   cursor: pointer;
   border-radius: 2px;
   font-size: 2.4rem;
@@ -8078,9 +8263,9 @@ web-daterangepicker {
 }
 
 .pa-file-popover__remove-btn:hover {
-  background: #98040C;
+  background: #dc3545;
   color: #ffffff;
-  border-color: #98040C;
+  border-color: #dc3545;
   transform: scale(1.1);
 }
 
@@ -8121,9 +8306,9 @@ web-daterangepicker {
   display: flex;
   align-items: center;
   justify-content: center;
-  background: rgba(212, 5, 17, 0.1);
+  background: rgba(0, 123, 255, 0.1);
   border-radius: 4px;
-  color: #D40511;
+  color: #007bff;
 }
 
 .pa-file-item__info {
@@ -8134,7 +8319,7 @@ web-daterangepicker {
 .pa-file-item__name {
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -8142,7 +8327,7 @@ web-daterangepicker {
 
 .pa-file-item__meta {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-top: 0.4rem;
 }
 
@@ -8152,7 +8337,7 @@ web-daterangepicker {
   height: 2.4rem;
   border: none;
   background: transparent;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   border-radius: 2px;
   font-size: 1.8rem;
@@ -8164,8 +8349,8 @@ web-daterangepicker {
 }
 
 .pa-file-item__remove:hover {
-  background: rgba(152, 4, 12, 0.1);
-  color: #98040C;
+  background: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
 }
 
 .pa-file-item__remove::before {
@@ -8217,7 +8402,7 @@ web-daterangepicker {
 }
 
 .pa-file-preview__remove:hover {
-  background: #98040C;
+  background: #dc3545;
   transform: scale(1.1);
 }
 
@@ -8245,21 +8430,21 @@ web-daterangepicker {
 
 .pa-file-progress__bar {
   height: 6.4px;
-  background: rgba(212, 5, 17, 0.2);
+  background: rgba(0, 123, 255, 0.2);
   border-radius: 2px;
   overflow: hidden;
 }
 
 .pa-file-progress__fill {
   height: 100%;
-  background: #D40511;
+  background: #007bff;
   border-radius: 2px;
   transition: width 0.48s ease;
 }
 
 .pa-file-progress__text {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-top: 0.4rem;
   display: flex;
   justify-content: space-between;
@@ -8272,11 +8457,11 @@ web-daterangepicker {
 }
 
 .pa-file-progress__status--complete {
-  color: #10b981;
+  color: #28a745;
 }
 
 .pa-file-progress__status--error {
-  color: #98040C;
+  color: #dc3545;
 }
 
 .pa-file-icon--pdf::before {
@@ -8316,9 +8501,9 @@ web-daterangepicker {
 }
 
 .pa-file-dropzone-overlay {
-  background: rgba(212, 5, 17, 0.15);
+  background: rgba(0, 123, 255, 0.15);
   backdrop-filter: blur(3.2px);
-  border: 4.8px dashed #D40511;
+  border: 4.8px dashed #007bff;
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -8339,7 +8524,7 @@ web-daterangepicker {
 .pa-file-dropzone-overlay__text {
   font-size: 2rem;
   font-weight: 600;
-  color: #D40511;
+  color: #007bff;
 }
 
 /* ========================================
@@ -8376,7 +8561,7 @@ web-daterangepicker {
   margin: 0;
   cursor: pointer;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   user-select: none;
   width: 100%;
 }
@@ -8403,7 +8588,7 @@ web-daterangepicker {
   display: block;
   margin-top: 0.4rem;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-checkbox-list__actions {
@@ -8475,7 +8660,7 @@ web-daterangepicker {
 }
 
 .pa-checkbox-list__item--locked:hover {
-  background-color: rgba(245, 158, 11, 0.05);
+  background-color: rgba(255, 193, 7, 0.05);
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__checkbox {
@@ -8489,7 +8674,7 @@ web-daterangepicker {
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text {
-  color: #f59e0b;
+  color: #ffc107;
 }
 
 .pa-checkbox-list__item--locked .pa-checkbox-list__label .pa-checkbox-list__text::before {
@@ -8616,12 +8801,12 @@ web-daterangepicker {
 .pa-table th {
   background-color: var(--pa-table-header-bg);
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   border-bottom: 2px solid var(--pa-border-color);
 }
 
 .pa-table td {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   background-color: var(--pa-table-bg);
   height: 3.5rem0.8rem;
 }
@@ -8742,7 +8927,7 @@ web-daterangepicker {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -8783,7 +8968,7 @@ web-daterangepicker {
   background-color: transparent;
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.1s ease-out;
@@ -8817,7 +9002,7 @@ web-daterangepicker {
 }
 
 .pa-load-more__count {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   margin-left: 0.4rem;
 }
@@ -8847,7 +9032,7 @@ web-daterangepicker {
   font-weight: 600;
   border-right: 1px solid var(--pa-border-color);
   background: var(--pa-table-header-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-virtual-table__header-cell:last-child {
@@ -8879,7 +9064,7 @@ web-daterangepicker {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   background-color: inherit;
 }
 
@@ -8984,7 +9169,7 @@ web-daterangepicker {
     content: attr(data-label);
     display: block;
     font-weight: 600;
-    color: var(--pa-text-secondary);
+    color: var(--pa-text-color-2);
     font-size: 1.2rem;
     margin-bottom: 0.4rem;
     text-transform: uppercase;
@@ -9063,8 +9248,8 @@ web-daterangepicker {
 
 .pa-comparison-table__label {
   font-weight: 500;
-  color: var(--pa-text-secondary);
-  background-color: var(--pa-primary-bg);
+  color: var(--pa-text-color-2);
+  background-color: var(--pa-main-bg);
 }
 
 .pa-comparison-table__value {
@@ -9134,7 +9319,7 @@ tbody tr:hover .pa-comparison-table__copy {
 .pa-comparison-table__section td {
   background-color: var(--pa-table-header-bg);
   font-weight: 600;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   padding: 0.4rem 1.6rem;
   border-top: 2px solid var(--pa-border-color);
   border-bottom: 1px solid var(--pa-border-color);
@@ -9195,8 +9380,8 @@ code {
   font-family: "Courier New", Courier, monospace;
   font-size: 1.4rem;
   line-height: 1.8;
-  background-color: var(--pa-primary-bg);
-  color: var(--pa-text-primary);
+  background-color: var(--pa-main-bg);
+  color: var(--pa-text-color-1);
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
   overflow-x: auto;
@@ -9272,7 +9457,7 @@ code {
 .pa-code-block__title {
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin: 0;
 }
 
@@ -9300,7 +9485,7 @@ code {
 }
 
 .pa-code-comment {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-style: italic;
 }
 
@@ -9369,7 +9554,7 @@ code {
 }
 
 .pa-pager__text {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -9410,7 +9595,7 @@ code {
   background-color: transparent;
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
   transition: all 0.1s ease-out;
@@ -9435,7 +9620,7 @@ code {
   width: 1.6rem;
   height: 1.6rem;
   border: 2px solid var(--pa-border-color);
-  border-top: 2px solid #D40511;
+  border-top: 2px solid #007bff;
   border-radius: 50%;
 }
 
@@ -9444,7 +9629,7 @@ code {
 }
 
 .pa-load-more__count {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
   margin-left: 0.4rem;
 }
@@ -9454,23 +9639,24 @@ code {
    Profile panel and header button
    ======================================== */
 :root {
-  --pa-profile-panel-width: 20vw;
-  --pa-profile-panel-max-width: 48rem;
+  --pa-local-profile-panel-width: 20vw;
+  --pa-local-profile-panel-max-width: 48rem;
 }
 
 :where(.pa-profile-panel__content) {
-  width: var(--pa-profile-panel-width);
-  max-width: var(--pa-profile-panel-max-width);
+  width: var(--pa-local-profile-panel-width);
+  max-width: var(--pa-local-profile-panel-max-width);
 }
 
 .pa-header__profile-btn {
   display: flex;
   align-items: center;
+  gap: 0.4rem;
   background: none;
   border: none;
   padding: 0.4rem 0.8rem;
   border-radius: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-header-text);
   cursor: pointer;
   font-size: 1.4rem;
   transition: background-color 0.1s ease-out;
@@ -9487,7 +9673,7 @@ code {
 
 .pa-header__profile-name {
   font-weight: 500;
-  color: #000000;
+  color: var(--pa-header-profile-name-color);
 }
 
 .pa-profile-panel {
@@ -9576,7 +9762,7 @@ code {
   margin: 0 0 0.4rem 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9585,7 +9771,7 @@ code {
 .pa-profile-panel__email {
   margin: 0 0 0.8rem 0;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9615,7 +9801,7 @@ code {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   border-radius: 4px;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
 }
@@ -9654,7 +9840,7 @@ code {
   align-items: center;
   gap: 1.2rem;
   padding: 0.8rem 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-decoration: none;
   border-radius: 4px;
   transition: background-color 0.1s ease-out, color 0.1s ease-out;
@@ -9724,6 +9910,10 @@ code {
   border-bottom-color: var(--pa-accent);
 }
 
+.pa-profile-panel__tabs--icon-only .pa-profile-panel__tab-text {
+  display: none;
+}
+
 .pa-profile-panel__favorites ul {
   list-style: none;
   margin: 0;
@@ -9739,7 +9929,7 @@ code {
   align-items: center;
   gap: 1.2rem;
   padding: 0.8rem 1.6rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-decoration: none;
   border-radius: 4px;
   cursor: pointer;
@@ -9776,7 +9966,7 @@ code {
   background: none;
   border: none;
   padding: 0.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   border-radius: 4px;
   font-size: 1.4rem;
@@ -9785,7 +9975,7 @@ code {
 }
 
 .pa-profile-panel__favorite-remove:hover {
-  color: var(--pa-danger);
+  color: var(--pa-danger-bg);
   background-color: var(--pa-danger-bg-light);
 }
 
@@ -9893,14 +10083,14 @@ code {
   margin: 0;
   font-size: 1.8rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-modal__body {
   padding: 1.2rem 1.6rem;
   flex: 1;
   overflow-y: auto;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-modal__footer {
@@ -10099,13 +10289,13 @@ code {
 .pa-toast__title {
   font-weight: 600;
   margin: 0 0 0.4rem 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
 .pa-toast__message {
   margin: 0;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
   line-height: 1.5;
 }
@@ -10114,7 +10304,7 @@ code {
   flex-shrink: 0;
   background: none;
   border: none;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   cursor: pointer;
   padding: 0;
   width: 2.4rem;
@@ -10130,7 +10320,7 @@ code {
 
 .pa-toast__close:hover {
   background-color: var(--pa-accent-hover);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-toast__close:focus {
@@ -10266,81 +10456,81 @@ code {
   top: 0;
   width: 15px;
   height: 15px;
-  background: var(--pa-primary-bg);
-  border: 1px solid #D40511;
+  background: var(--pa-main-bg);
+  border: 1px solid #007bff;
   border-radius: 50%;
-  box-shadow: 3px 3px 0 rgba(212, 5, 17, 0.3);
+  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--primary::before {
-  border-color: #D40511;
-  box-shadow: 3px 3px 0 rgba(212, 5, 17, 0.3);
+  border-color: #007bff;
+  box-shadow: 3px 3px 0 rgba(0, 123, 255, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--success::before {
-  border-color: #10b981;
-  box-shadow: 3px 3px 0 rgba(16, 185, 129, 0.3);
+  border-color: #28a745;
+  box-shadow: 3px 3px 0 rgba(40, 167, 69, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--warning::before {
-  border-color: #f59e0b;
-  box-shadow: 3px 3px 0 rgba(245, 158, 11, 0.3);
+  border-color: #ffc107;
+  box-shadow: 3px 3px 0 rgba(255, 193, 7, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--danger::before {
-  border-color: #98040C;
-  box-shadow: 3px 3px 0 rgba(152, 4, 12, 0.3);
+  border-color: #dc3545;
+  box-shadow: 3px 3px 0 rgba(220, 53, 69, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--info::before {
-  border-color: #06b6d4;
-  box-shadow: 3px 3px 0 rgba(6, 182, 212, 0.3);
+  border-color: #17a2b8;
+  box-shadow: 3px 3px 0 rgba(23, 162, 184, 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--secondary::before {
-  border-color: var(--pa-text-secondary);
-  box-shadow: 3px 3px 0 rgba(var(--pa-text-secondary), 0.3);
+  border-color: var(--pa-text-color-2);
+  box-shadow: 3px 3px 0 rgba(var(--pa-text-color-2), 0.3);
 }
 
 .pa-timeline--simple .pa-timeline__item--filled::before {
-  background: #D40511;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--primary::before {
-  background: #D40511;
+  background: #007bff;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--success::before {
-  background: #10b981;
+  background: #28a745;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--warning::before {
-  background: #f59e0b;
+  background: #ffc107;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--danger::before {
-  background: #98040C;
+  background: #dc3545;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--info::before {
-  background: #06b6d4;
+  background: #17a2b8;
 }
 
 .pa-timeline--simple .pa-timeline__item--filled.pa-timeline__item--secondary::before {
-  background: var(--pa-text-secondary);
+  background: var(--pa-text-color-2);
 }
 
 .pa-timeline--simple .pa-timeline__time {
   display: block;
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin-bottom: 0.4rem;
 }
 
 .pa-timeline--simple .pa-timeline__content {
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.8;
   margin-top: 0.6rem;
 }
@@ -10356,7 +10546,7 @@ code {
   content: "";
   position: absolute;
   width: 2px;
-  background: #D40511;
+  background: #007bff;
   top: 0;
   bottom: 0;
   left: 50%;
@@ -10395,8 +10585,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   right: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #D40511;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10408,7 +10598,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   right: 8px;
-  background: #D40511;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10437,8 +10627,8 @@ code {
   height: 16px;
   top: calc(50% - 8px);
   left: -8px;
-  background: var(--pa-primary-bg);
-  border: 2px solid #D40511;
+  background: var(--pa-main-bg);
+  border: 2px solid #007bff;
   border-radius: 50%;
   z-index: 1;
 }
@@ -10450,7 +10640,7 @@ code {
   height: 2px;
   top: calc(50% - 1px);
   left: 8px;
-  background: #D40511;
+  background: #007bff;
   z-index: 1;
 }
 
@@ -10461,7 +10651,7 @@ code {
   text-align: center;
   font-size: 1.4rem;
   font-weight: 700;
-  color: #D40511;
+  color: #007bff;
   text-transform: uppercase;
   letter-spacing: 1px;
   z-index: 1;
@@ -10475,16 +10665,16 @@ code {
   width: 40px;
   height: 40px;
   top: calc(50% - 20px);
-  background: #f59e0b;
-  border: 2px solid #D40511;
+  background: #ffc107;
+  border: 2px solid #007bff;
   border-radius: 50%;
   font-size: 1.8rem;
-  color: #D40511;
+  color: #007bff;
   z-index: 1;
 }
 
 .pa-timeline--alternating .pa-timeline__content {
-  background: #f59e0b;
+  background: #ffc107;
   position: relative;
 }
 
@@ -10492,14 +10682,14 @@ code {
   margin: 0 0 0.8rem 0;
   font-size: 1.8rem;
   font-weight: 400;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-timeline--alternating .pa-timeline__content p {
   margin: 0;
   font-size: 1.6rem;
   line-height: 1.8;
-  color: #78350f;
+  color: #856404;
 }
 
 @media (max-width: 767px) {
@@ -10659,12 +10849,12 @@ code {
 .pa-timeline--feed .pa-timeline__content {
   flex: 1;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.8;
 }
 
 .pa-timeline--feed .pa-timeline__content a {
-  color: #D40511;
+  color: #007bff;
   text-decoration: none;
   font-weight: 500;
 }
@@ -10674,7 +10864,7 @@ code {
 }
 
 .pa-timeline--feed .pa-timeline__content time {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
@@ -10704,7 +10894,7 @@ code {
 
 .pa-timeline--feed .pa-timeline__comment p {
   margin: 0 0 0.8rem 0;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   line-height: 1.8;
 }
 
@@ -10732,7 +10922,7 @@ code {
 .pa-timeline--feed .pa-timeline__date-label {
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -10741,7 +10931,7 @@ code {
   flex-shrink: 0;
   width: 50px;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: 500;
   text-align: right;
   padding-right: 0.8rem;
@@ -10763,7 +10953,7 @@ code {
 .pa-timeline__loader-text {
   margin-top: 0.8rem;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-timeline__load-more-wrapper {
@@ -10858,18 +11048,18 @@ code {
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
   background-color: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   outline: none;
   transition: border-color 0.1s ease-out;
 }
 
 .pa-command-palette__input:focus {
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-command-palette__input::placeholder {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   opacity: 0.5;
 }
 
@@ -10914,7 +11104,7 @@ code {
 .pa-command-palette__empty {
   padding: 4.8rem 0.8rem;
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -10924,7 +11114,7 @@ code {
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.4rem;
 }
 
@@ -10971,7 +11161,7 @@ code {
 .pa-command-palette__item-title {
   font-size: 1.4rem;
   font-weight: 500;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   margin: 0;
   white-space: nowrap;
   overflow: hidden;
@@ -10988,7 +11178,7 @@ code {
 
 .pa-command-palette__item-meta {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin: 0;
   margin-top: 2px;
   white-space: nowrap;
@@ -11000,8 +11190,8 @@ code {
   flex-shrink: 0;
   font-size: 1.2rem;
   padding: 2px 0.4rem;
-  background-color: #E5E5E5;
-  color: var(--pa-text-secondary);
+  background-color: #e9ecef;
+  color: var(--pa-text-color-2);
   border-radius: 2px;
 }
 
@@ -11011,7 +11201,7 @@ code {
   display: flex;
   gap: 1.6rem;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-command-palette__hint {
@@ -11022,10 +11212,10 @@ code {
 
 .pa-command-palette__key {
   padding: 2px 0.4rem;
-  background-color: #E5E5E5;
+  background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-weight: 500;
   font-size: 1rem;
   line-height: 1;
@@ -11035,7 +11225,7 @@ code {
   padding: 0.8rem 0.8rem 0.4rem;
   font-size: 1.2rem;
   font-weight: 600;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   text-transform: uppercase;
   letter-spacing: 0.5px;
 }
@@ -11044,7 +11234,7 @@ code {
   padding: 0.4rem 0.8rem;
   text-align: center;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   border-top: 1px solid var(--pa-border-color);
 }
 
@@ -11094,13 +11284,13 @@ code {
 }
 
 .pa-navbar-search:hover {
-  border-color: #D40511;
+  border-color: #007bff;
 }
 
 .pa-navbar-search:focus {
   outline: none;
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-navbar-search--xs {
@@ -11135,7 +11325,7 @@ code {
 
 .pa-navbar-search__placeholder {
   flex: 1;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11155,11 +11345,11 @@ code {
   min-width: 2rem;
   height: 2rem;
   padding: 0 0.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   font-weight: 500;
-  color: var(--pa-text-secondary);
-  background-color: #E5E5E5;
+  color: var(--pa-text-color-2);
+  background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -11194,7 +11384,7 @@ code {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin: 0;
   padding-bottom: 0.4rem;
   border-bottom: 1px solid var(--pa-border-color);
@@ -11228,29 +11418,29 @@ code {
   min-width: 2.4rem;
   height: 2.4rem;
   padding: 0 0.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   font-size: 1rem;
   font-weight: 500;
-  color: var(--pa-text-primary);
-  background-color: #E5E5E5;
+  color: var(--pa-text-color-1);
+  background-color: #e9ecef;
   border: 1px solid var(--pa-border-color);
   border-radius: 2px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
 }
 
 .pa-shortcut-help__separator {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-size: 1.2rem;
 }
 
 .pa-shortcut-help__description {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
 .pa-shortcut-help__empty {
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   padding: 3.2rem;
 }
 
@@ -11263,18 +11453,18 @@ code {
   background: #f9fafb;
   border-radius: 4px;
   min-height: 6.4rem;
-  font-family: "Fira Sans Condensed", "Arial Narrow", "Arial", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
 .pa-logic-tree__empty {
   text-align: center;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   padding: 3.2rem;
   font-style: italic;
 }
 
 .pa-logic-tree__empty-branch {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-style: italic;
   padding: 0.8rem 1.2rem;
   background: #f9fafb;
@@ -11306,7 +11496,7 @@ code {
 
 .pa-logic-tree__block--condition {
   background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
-  border-color: var(--pa-primary-bg);
+  border-color: var(--pa-main-bg);
   border-left-width: 6.4px;
 }
 
@@ -11316,12 +11506,12 @@ code {
 }
 
 .pa-logic-tree__block--and {
-  border-color: #f59e0b;
+  border-color: #ffc107;
   background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
 }
 
 .pa-logic-tree__block--or {
-  border-color: #06b6d4;
+  border-color: #17a2b8;
   background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
 }
 
@@ -11423,10 +11613,10 @@ code {
 .pa-logic-tree__group-label {
   font-weight: 500;
   font-size: 1.4rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-bottom: 0.8rem;
   padding-bottom: 0.8rem;
-  border-bottom: 1.6px dashed #E5E5E5;
+  border-bottom: 1.6px dashed #e1e5e9;
 }
 
 .pa-logic-tree__group-content {
@@ -11521,7 +11711,7 @@ code {
   background: none;
   border: none;
   border-radius: 4px;
-  color: var(--pa-text-primary);
+  color: var(--pa-header-text);
   cursor: pointer;
   transition: background-color 0.1s ease-out;
 }
@@ -11547,7 +11737,7 @@ code {
   min-width: 1.6rem;
   height: 1.6rem;
   padding: 0 0.4rem;
-  background-color: #98040C;
+  background-color: #dc3545;
   color: #ffffff;
   font-size: 1rem;
   font-weight: 600;
@@ -11591,14 +11781,14 @@ code {
   margin: 0;
   font-size: 1.4rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-notifications__mark-read {
   background: none;
   border: none;
   padding: 0;
-  color: #D40511;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   cursor: pointer;
@@ -11606,7 +11796,7 @@ code {
 }
 
 .pa-notifications__mark-read:hover {
-  color: rgba(212, 5, 17, 0.12);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 .pa-notifications__list {
@@ -11635,11 +11825,11 @@ code {
 }
 
 .pa-notifications__item--unread {
-  background-color: rgba(212, 5, 17, 0.05);
+  background-color: rgba(0, 123, 255, 0.05);
 }
 
 .pa-notifications__item--unread:hover {
-  background-color: rgba(212, 5, 17, 0.1);
+  background-color: rgba(0, 123, 255, 0.1);
 }
 
 .pa-notifications__icon-wrapper {
@@ -11656,28 +11846,28 @@ code {
 }
 
 .pa-notifications__icon-wrapper--primary {
-  background-color: rgba(212, 5, 17, 0.1);
-  color: #D40511;
+  background-color: rgba(0, 123, 255, 0.1);
+  color: #007bff;
 }
 
 .pa-notifications__icon-wrapper--success {
-  background-color: rgba(16, 185, 129, 0.1);
-  color: #10b981;
+  background-color: rgba(40, 167, 69, 0.1);
+  color: #28a745;
 }
 
 .pa-notifications__icon-wrapper--warning {
-  background-color: rgba(245, 158, 11, 0.1);
-  color: #f59e0b;
+  background-color: rgba(255, 193, 7, 0.1);
+  color: #ffc107;
 }
 
 .pa-notifications__icon-wrapper--danger {
-  background-color: rgba(152, 4, 12, 0.1);
-  color: #98040C;
+  background-color: rgba(220, 53, 69, 0.1);
+  color: #dc3545;
 }
 
 .pa-notifications__icon-wrapper--secondary {
-  background-color: rgba(var(--pa-text-secondary), 0.1);
-  color: var(--pa-text-secondary);
+  background-color: rgba(var(--pa-text-color-2), 0.1);
+  color: var(--pa-text-color-2);
 }
 
 .pa-notifications__content {
@@ -11689,13 +11879,13 @@ code {
   margin: 0 0 0.2rem 0;
   font-size: 1.2rem;
   font-weight: 600;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-notifications__content p {
   margin: 0 0 0.2rem 0;
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   line-height: 1.3;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -11706,7 +11896,7 @@ code {
 
 .pa-notifications__time {
   font-size: 1rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   font-weight: 400;
   opacity: 0.7;
 }
@@ -11718,7 +11908,7 @@ code {
 }
 
 .pa-notifications__footer a {
-  color: #D40511;
+  color: #007bff;
   font-size: 1.4rem;
   font-weight: 500;
   text-decoration: none;
@@ -11726,7 +11916,7 @@ code {
 }
 
 .pa-notifications__footer a:hover {
-  color: rgba(212, 5, 17, 0.12);
+  color: rgba(0, 123, 255, 0.12);
 }
 
 @media (max-width: 768px) {
@@ -11833,7 +12023,7 @@ code {
 .pa-popconfirm__message p {
   margin: 0;
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   line-height: 1.5;
 }
 
@@ -11870,7 +12060,7 @@ code {
   display: flex;
   gap: 0.8rem;
   justify-content: flex-end;
-  background-color: rgba(229, 229, 229, 0.3);
+  background-color: rgba(225, 229, 233, 0.3);
 }
 
 .pa-popconfirm__actions .pa-btn {
@@ -11957,7 +12147,7 @@ code {
   top: 0;
   width: 40px;
   height: 40px;
-  background: #D40511;
+  background: #007bff;
   color: white;
   border: none;
   border-radius: 4px 0 0 4px;
@@ -11971,13 +12161,13 @@ code {
 }
 
 .pa-settings-panel__toggle:hover {
-  background: rgba(212, 5, 17, 0.12);
+  background: rgba(0, 123, 255, 0.12);
   width: 45px;
   right: 325px;
 }
 
 .pa-settings-panel__content {
-  background: var(--pa-content-bg);
+  background: var(--pa-subtle-bg);
   border: 1px solid var(--pa-border-color);
   border-right: none;
   border-radius: 4px 0 0 4px;
@@ -11994,7 +12184,7 @@ code {
   margin: 0 0 2.4rem 0;
   padding-bottom: 1.2rem;
   border-bottom: 2px solid var(--pa-border-color);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.8rem;
   font-weight: 600;
 }
@@ -12010,7 +12200,7 @@ code {
 .pa-settings-panel__label {
   display: block;
   margin-bottom: 0.8rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   font-weight: 500;
 }
@@ -12021,15 +12211,15 @@ code {
   border: 1px solid var(--pa-border-color);
   border-radius: 4px;
   background: var(--pa-input-bg);
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
   cursor: pointer;
 }
 
 .pa-settings-panel__select:focus {
   outline: none;
-  border-color: #D40511;
-  box-shadow: 0 0 0 3px rgba(212, 5, 17, 0.06);
+  border-color: #007bff;
+  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.05);
 }
 
 .pa-settings-panel__checkbox-group {
@@ -12042,7 +12232,7 @@ code {
   display: flex;
   align-items: center;
   cursor: pointer;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
   font-size: 1.4rem;
 }
 
@@ -12052,7 +12242,7 @@ code {
 }
 
 .pa-settings-panel__checkbox:hover {
-  color: #D40511;
+  color: #007bff;
 }
 
 .pa-settings-panel--open {
@@ -12060,7 +12250,7 @@ code {
 }
 
 .pa-settings-panel--open .pa-settings-panel__toggle {
-  background: rgba(212, 5, 17, 0.12);
+  background: rgba(0, 123, 255, 0.12);
   transform: rotate(180deg);
 }
 
@@ -12342,7 +12532,7 @@ html.font-size-4xl {
 
 .pa-text {
   font-size: 1.4rem;
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-text--xs {
@@ -12362,11 +12552,11 @@ html.font-size-4xl {
 }
 
 .pa-text--primary {
-  color: var(--pa-text-primary);
+  color: var(--pa-text-color-1);
 }
 
 .pa-text--secondary {
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
 }
 
 .pa-text--left {
@@ -12383,7 +12573,7 @@ html.font-size-4xl {
 
 .pa-text--caption {
   font-size: 1.2rem;
-  color: var(--pa-text-secondary);
+  color: var(--pa-text-color-2);
   margin-bottom: 0.8rem;
 }
 
@@ -12396,34 +12586,98 @@ html.font-size-4xl {
   gap: 0;
 }
 
+.row-gap-0 {
+  row-gap: 0;
+}
+
+.column-gap-0 {
+  column-gap: 0;
+}
+
 .gap-xs {
   gap: 0.4rem;
 }
 
+.row-gap-xs {
+  row-gap: 0.4rem;
+}
+
+.column-gap-xs {
+  column-gap: 0.4rem;
+}
+
 .gap-sm {
   gap: 0.8rem;
 }
 
+.row-gap-sm {
+  row-gap: 0.8rem;
+}
+
+.column-gap-sm {
+  column-gap: 0.8rem;
+}
+
 .gap-md {
   gap: 1.2rem;
 }
 
+.row-gap-md {
+  row-gap: 1.2rem;
+}
+
+.column-gap-md {
+  column-gap: 1.2rem;
+}
+
 .gap-base {
   gap: 1.6rem;
 }
 
+.row-gap-base {
+  row-gap: 1.6rem;
+}
+
+.column-gap-base {
+  column-gap: 1.6rem;
+}
+
 .gap-lg {
   gap: 2.4rem;
 }
 
+.row-gap-lg {
+  row-gap: 2.4rem;
+}
+
+.column-gap-lg {
+  column-gap: 2.4rem;
+}
+
 .gap-xl {
   gap: 3.2rem;
 }
 
+.row-gap-xl {
+  row-gap: 3.2rem;
+}
+
+.column-gap-xl {
+  column-gap: 3.2rem;
+}
+
 .gap-2xl {
   gap: 4.8rem;
 }
 
+.row-gap-2xl {
+  row-gap: 4.8rem;
+}
+
+.column-gap-2xl {
+  column-gap: 4.8rem;
+}
+
 .gap-1 {
   gap: 0.1rem;
 }
@@ -12468,54 +12722,6 @@ html.font-size-4xl {
   gap: 2rem;
 }
 
-.row-gap-0 {
-  row-gap: 0;
-}
-
-.row-gap-xs {
-  row-gap: 0.4rem;
-}
-
-.row-gap-sm {
-  row-gap: 0.8rem;
-}
-
-.row-gap-md {
-  row-gap: 1.2rem;
-}
-
-.row-gap-base {
-  row-gap: 1.6rem;
-}
-
-.row-gap-lg {
-  row-gap: 2.4rem;
-}
-
-.column-gap-0 {
-  column-gap: 0;
-}
-
-.column-gap-xs {
-  column-gap: 0.4rem;
-}
-
-.column-gap-sm {
-  column-gap: 0.8rem;
-}
-
-.column-gap-md {
-  column-gap: 1.2rem;
-}
-
-.column-gap-base {
-  column-gap: 1.6rem;
-}
-
-.column-gap-lg {
-  column-gap: 2.4rem;
-}
-
 .self-start {
   align-self: flex-start;
 }
@@ -12733,6 +12939,8 @@ html.font-size-4xl {
   border-color: var(--pa-color-9);
 }
 
+/* Pure Admin Visual Framework - SCSS Variables Only */
+/* NOTE: 10px rem base - all rem values are now in 10px units (1rem = 10px) */
 .m-0 {
   margin: 0 !important;
 }
@@ -13483,6 +13691,486 @@ html.font-size-4xl {
   margin-bottom: auto !important;
 }
 
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0 {
+  margin-top: 0 !important;
+}
+
+.mr-0 {
+  margin-right: 0 !important;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0 {
+  margin-left: 0 !important;
+}
+
+.mx-0 {
+  margin-left: 0 !important;
+  margin-right: 0 !important;
+}
+
+.my-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.m-xs {
+  margin: 0.4rem !important;
+}
+
+.mt-xs {
+  margin-top: 0.4rem !important;
+}
+
+.mr-xs {
+  margin-right: 0.4rem !important;
+}
+
+.mb-xs {
+  margin-bottom: 0.4rem !important;
+}
+
+.ml-xs {
+  margin-left: 0.4rem !important;
+}
+
+.mx-xs {
+  margin-left: 0.4rem !important;
+  margin-right: 0.4rem !important;
+}
+
+.my-xs {
+  margin-top: 0.4rem !important;
+  margin-bottom: 0.4rem !important;
+}
+
+.m-sm {
+  margin: 0.8rem !important;
+}
+
+.mt-sm {
+  margin-top: 0.8rem !important;
+}
+
+.mr-sm {
+  margin-right: 0.8rem !important;
+}
+
+.mb-sm {
+  margin-bottom: 0.8rem !important;
+}
+
+.ml-sm {
+  margin-left: 0.8rem !important;
+}
+
+.mx-sm {
+  margin-left: 0.8rem !important;
+  margin-right: 0.8rem !important;
+}
+
+.my-sm {
+  margin-top: 0.8rem !important;
+  margin-bottom: 0.8rem !important;
+}
+
+.m-md {
+  margin: 1.2rem !important;
+}
+
+.mt-md {
+  margin-top: 1.2rem !important;
+}
+
+.mr-md {
+  margin-right: 1.2rem !important;
+}
+
+.mb-md {
+  margin-bottom: 1.2rem !important;
+}
+
+.ml-md {
+  margin-left: 1.2rem !important;
+}
+
+.mx-md {
+  margin-left: 1.2rem !important;
+  margin-right: 1.2rem !important;
+}
+
+.my-md {
+  margin-top: 1.2rem !important;
+  margin-bottom: 1.2rem !important;
+}
+
+.m-base {
+  margin: 1.6rem !important;
+}
+
+.mt-base {
+  margin-top: 1.6rem !important;
+}
+
+.mr-base {
+  margin-right: 1.6rem !important;
+}
+
+.mb-base {
+  margin-bottom: 1.6rem !important;
+}
+
+.ml-base {
+  margin-left: 1.6rem !important;
+}
+
+.mx-base {
+  margin-left: 1.6rem !important;
+  margin-right: 1.6rem !important;
+}
+
+.my-base {
+  margin-top: 1.6rem !important;
+  margin-bottom: 1.6rem !important;
+}
+
+.m-lg {
+  margin: 2.4rem !important;
+}
+
+.mt-lg {
+  margin-top: 2.4rem !important;
+}
+
+.mr-lg {
+  margin-right: 2.4rem !important;
+}
+
+.mb-lg {
+  margin-bottom: 2.4rem !important;
+}
+
+.ml-lg {
+  margin-left: 2.4rem !important;
+}
+
+.mx-lg {
+  margin-left: 2.4rem !important;
+  margin-right: 2.4rem !important;
+}
+
+.my-lg {
+  margin-top: 2.4rem !important;
+  margin-bottom: 2.4rem !important;
+}
+
+.m-xl {
+  margin: 3.2rem !important;
+}
+
+.mt-xl {
+  margin-top: 3.2rem !important;
+}
+
+.mr-xl {
+  margin-right: 3.2rem !important;
+}
+
+.mb-xl {
+  margin-bottom: 3.2rem !important;
+}
+
+.ml-xl {
+  margin-left: 3.2rem !important;
+}
+
+.mx-xl {
+  margin-left: 3.2rem !important;
+  margin-right: 3.2rem !important;
+}
+
+.my-xl {
+  margin-top: 3.2rem !important;
+  margin-bottom: 3.2rem !important;
+}
+
+.m-2xl {
+  margin: 4.8rem !important;
+}
+
+.mt-2xl {
+  margin-top: 4.8rem !important;
+}
+
+.mr-2xl {
+  margin-right: 4.8rem !important;
+}
+
+.mb-2xl {
+  margin-bottom: 4.8rem !important;
+}
+
+.ml-2xl {
+  margin-left: 4.8rem !important;
+}
+
+.mx-2xl {
+  margin-left: 4.8rem !important;
+  margin-right: 4.8rem !important;
+}
+
+.my-2xl {
+  margin-top: 4.8rem !important;
+  margin-bottom: 4.8rem !important;
+}
+
+.p-0 {
+  padding: 0 !important;
+}
+
+.pt-0 {
+  padding-top: 0 !important;
+}
+
+.pr-0 {
+  padding-right: 0 !important;
+}
+
+.pb-0 {
+  padding-bottom: 0 !important;
+}
+
+.pl-0 {
+  padding-left: 0 !important;
+}
+
+.px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
+.py-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.p-xs {
+  padding: 0.4rem !important;
+}
+
+.pt-xs {
+  padding-top: 0.4rem !important;
+}
+
+.pr-xs {
+  padding-right: 0.4rem !important;
+}
+
+.pb-xs {
+  padding-bottom: 0.4rem !important;
+}
+
+.pl-xs {
+  padding-left: 0.4rem !important;
+}
+
+.px-xs {
+  padding-left: 0.4rem !important;
+  padding-right: 0.4rem !important;
+}
+
+.py-xs {
+  padding-top: 0.4rem !important;
+  padding-bottom: 0.4rem !important;
+}
+
+.p-sm {
+  padding: 0.8rem !important;
+}
+
+.pt-sm {
+  padding-top: 0.8rem !important;
+}
+
+.pr-sm {
+  padding-right: 0.8rem !important;
+}
+
+.pb-sm {
+  padding-bottom: 0.8rem !important;
+}
+
+.pl-sm {
+  padding-left: 0.8rem !important;
+}
+
+.px-sm {
+  padding-left: 0.8rem !important;
+  padding-right: 0.8rem !important;
+}
+
+.py-sm {
+  padding-top: 0.8rem !important;
+  padding-bottom: 0.8rem !important;
+}
+
+.p-md {
+  padding: 1.2rem !important;
+}
+
+.pt-md {
+  padding-top: 1.2rem !important;
+}
+
+.pr-md {
+  padding-right: 1.2rem !important;
+}
+
+.pb-md {
+  padding-bottom: 1.2rem !important;
+}
+
+.pl-md {
+  padding-left: 1.2rem !important;
+}
+
+.px-md {
+  padding-left: 1.2rem !important;
+  padding-right: 1.2rem !important;
+}
+
+.py-md {
+  padding-top: 1.2rem !important;
+  padding-bottom: 1.2rem !important;
+}
+
+.p-base {
+  padding: 1.6rem !important;
+}
+
+.pt-base {
+  padding-top: 1.6rem !important;
+}
+
+.pr-base {
+  padding-right: 1.6rem !important;
+}
+
+.pb-base {
+  padding-bottom: 1.6rem !important;
+}
+
+.pl-base {
+  padding-left: 1.6rem !important;
+}
+
+.px-base {
+  padding-left: 1.6rem !important;
+  padding-right: 1.6rem !important;
+}
+
+.py-base {
+  padding-top: 1.6rem !important;
+  padding-bottom: 1.6rem !important;
+}
+
+.p-lg {
+  padding: 2.4rem !important;
+}
+
+.pt-lg {
+  padding-top: 2.4rem !important;
+}
+
+.pr-lg {
+  padding-right: 2.4rem !important;
+}
+
+.pb-lg {
+  padding-bottom: 2.4rem !important;
+}
+
+.pl-lg {
+  padding-left: 2.4rem !important;
+}
+
+.px-lg {
+  padding-left: 2.4rem !important;
+  padding-right: 2.4rem !important;
+}
+
+.py-lg {
+  padding-top: 2.4rem !important;
+  padding-bottom: 2.4rem !important;
+}
+
+.p-xl {
+  padding: 3.2rem !important;
+}
+
+.pt-xl {
+  padding-top: 3.2rem !important;
+}
+
+.pr-xl {
+  padding-right: 3.2rem !important;
+}
+
+.pb-xl {
+  padding-bottom: 3.2rem !important;
+}
+
+.pl-xl {
+  padding-left: 3.2rem !important;
+}
+
+.px-xl {
+  padding-left: 3.2rem !important;
+  padding-right: 3.2rem !important;
+}
+
+.py-xl {
+  padding-top: 3.2rem !important;
+  padding-bottom: 3.2rem !important;
+}
+
+.p-2xl {
+  padding: 4.8rem !important;
+}
+
+.pt-2xl {
+  padding-top: 4.8rem !important;
+}
+
+.pr-2xl {
+  padding-right: 4.8rem !important;
+}
+
+.pb-2xl {
+  padding-bottom: 4.8rem !important;
+}
+
+.pl-2xl {
+  padding-left: 4.8rem !important;
+}
+
+.px-2xl {
+  padding-left: 4.8rem !important;
+  padding-right: 4.8rem !important;
+}
+
+.py-2xl {
+  padding-top: 4.8rem !important;
+  padding-bottom: 4.8rem !important;
+}
+
 .d-none {
   display: none !important;
 }
@@ -14852,9 +15540,6 @@ html.font-size-4xl {
 .pa-header__title h2 {
   color: #333333 !important;
 }
-.pa-header__profile-btn {
-  color: #000000 !important;
-}
 .pa-header__profile-btn:hover {
   background-color: rgba(212, 5, 17, 0.12) !important;
 }
@@ -14904,12 +15589,12 @@ html.font-size-4xl {
   color: #ffffff !important;
 }
 
-.pa-btn--primary {
+.pa-btn--color-1 {
   font-weight: 700 !important;
   background-color: #D40511 !important;
   color: #ffffff !important;
 }
-.pa-btn--primary:hover {
+.pa-btn--color-1:hover {
   background-color: #F91320 !important;
   box-shadow: 0 2px 8px rgba(212, 5, 17, 0.3) !important;
 }
@@ -14958,12 +15643,20 @@ html.font-size-4xl {
   --base-text-color-3: #CCCCCC;
   --base-text-color-4: #E5E5E5;
   --base-text-color-on-accent: #ffffff;
+  --base-main-bg: #ffffff;
+  --base-page-bg: #f8f9fa;
+  --base-subtle-bg: #e9ecef;
+  --base-inverse-bg: #2c3e50;
+  --base-overlay-bg: rgba(0, 0, 0, 0.6);
+  --base-shadow-color: rgba(0, 0, 0, 0.15);
+  --base-hover-bg: #e9ecef;
+  --base-active-bg: rgb(218.2368421053, 223.25, 228.2631578947);
+  --base-disabled-bg: #e9ecef;
+  --base-elevated-bg: #f5f5f5;
   --base-surface-1: #ffffff;
   --base-surface-2: #F2F2F2;
   --base-surface-3: #E5E5E5;
   --base-surface-inverse: #333333;
-  --base-overlay-bg: rgba(0, 0, 0, 0.6);
-  --base-shadow-color: rgba(0, 0, 0, 0.15);
   --base-primary-bg: #ffffff;
   --base-primary-bg-hover: rgb(242.25, 242.25, 242.25);
   --base-border-color: #E5E5E5;
@@ -15040,11 +15733,11 @@ html.font-size-4xl {
   --base-border-radius-sm: 0.4;
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
-  --pa-primary-bg: #ffffff;
-  --pa-bg-secondary: #F2F2F2;
-  --pa-content-bg: #F2F2F2;
-  --pa-text-primary: #333333;
-  --pa-text-secondary: #8C8C8C;
+  --pa-main-bg: #ffffff;
+  --pa-page-bg: #f8f9fa;
+  --pa-subtle-bg: #F2F2F2;
+  --pa-text-color-1: #333333;
+  --pa-text-color-2: #8C8C8C;
   --pa-accent: #D40511;
   --pa-accent-hover: rgba(212, 5, 17, 0.12);
   --pa-accent-light: rgba(212, 5, 17, 0.06);
@@ -15066,9 +15759,9 @@ html.font-size-4xl {
   --pa-btn-primary-bg-hover: #F91320;
   --pa-btn-primary-bg-light: rgba(212, 5, 17, 0.06);
   --pa-btn-primary-text: #ffffff;
-  --pa-btn-secondary-bg: #FFCC00;
-  --pa-btn-secondary-bg-hover: #FFE57F;
-  --pa-btn-secondary-text: #000000;
+  --pa-btn-secondary-bg: #6c757d;
+  --pa-btn-secondary-bg-hover: #545b62;
+  --pa-btn-secondary-text: #ffffff;
   --pa-btn-success-bg: #10b981;
   --pa-btn-success-bg-hover: #059669;
   --pa-btn-success-text: #ffffff;
@@ -15183,9 +15876,9 @@ html.font-size-4xl {
   --pa-multiselect-dropdown-bg: #ffffff;
   --pa-multiselect-dropdown-border: #E5E5E5;
   --pa-multiselect-dropdown-text: #333333;
-  --pa-multiselect-hint-bg: #F2F2F2;
+  --pa-multiselect-hint-bg: #f8f9fa;
   --pa-multiselect-hint-border: #E5E5E5;
-  --pa-multiselect-option-hover-bg: #F2F2F2;
+  --pa-multiselect-option-hover-bg: #f8f9fa;
   --pa-multiselect-pill-bg: rgba(212, 5, 17, 0.06);
   --pa-multiselect-pill-border: #D40511;
   --pa-color-1: #D40511;
@@ -15205,8 +15898,8 @@ html.font-size-4xl {
   --drp-border-color: #E5E5E5;
   --drp-primary-bg: #F2F2F2;
   --drp-primary-bg-hover: #EBEBEB;
-  --drp-text-primary: #333333;
-  --drp-text-secondary: #8C8C8C;
+  --drp-text-color-1: #333333;
+  --drp-text-bg: #8C8C8C;
   --drp-button-bg: transparent;
   --drp-button-color: #333333;
   --drp-button-accent-text-color: #ffffff;
@@ -15231,11 +15924,11 @@ html.font-size-4xl {
   --page-loader-bg: rgba(0, 0, 0, 0.95);
   --page-loader-spinner-border: #333;
   --page-loader-spinner-accent: #FFCC00;
-  --pa-primary-bg: #1a1a1a;
-  --pa-bg-secondary: #1a1a1a;
-  --pa-content-bg: #121212;
-  --pa-text-primary: #ffffff;
-  --pa-text-secondary: #aaaaaa;
+  --pa-main-bg: #1a1a1a;
+  --pa-page-bg: #1a1a1a;
+  --pa-subtle-bg: #121212;
+  --pa-text-color-1: #ffffff;
+  --pa-text-color-2: #aaaaaa;
   --pa-accent: #D40511;
   --pa-accent-hover: rgba(212, 5, 17, 0.2);
   --pa-accent-light: rgba(212, 5, 17, 0.15);
@@ -15318,6 +16011,13 @@ html.font-size-4xl {
   --pa-danger-bg-light: rgba(180, 5, 14, 0.2);
   --pa-info-bg: #06b6d4;
   --pa-info-bg-light: rgba(6, 182, 212, 0.2);
+  --base-main-bg: #242424;
+  --base-page-bg: #1a1a1a;
+  --base-subtle-bg: #2a2a2a;
+  --base-hover-bg: #2a2a2a;
+  --base-active-bg: #3a3a3a;
+  --base-disabled-bg: #2a2a2a;
+  --base-elevated-bg: #2a2a2a;
   --base-surface-1: #242424;
   --base-surface-2: #1a1a1a;
   --base-surface-3: #2a2a2a;
@@ -15348,8 +16048,8 @@ html.font-size-4xl {
   --drp-border-color: #3a3a3a;
   --drp-primary-bg: #1a1a1a;
   --drp-primary-bg-hover: #2a2a2a;
-  --drp-text-primary: #ffffff;
-  --drp-text-secondary: #aaaaaa;
+  --drp-text-color-1: #ffffff;
+  --drp-text-bg: #aaaaaa;
   --drp-button-bg: transparent;
   --drp-button-color: #ffffff;
   --drp-button-accent-text-color: #ffffff;
@@ -15378,7 +16078,7 @@ html.font-size-4xl {
 .pa-mode-dark .pa-layout__footer p {
   color: #333333 !important;
 }
-.pa-mode-dark .pa-alert--primary {
+.pa-mode-dark .pa-alert--color-1 {
   color: #ffffff !important;
   background-color: rgba(212, 5, 17, 0.25) !important;
   border-color: rgba(212, 5, 17, 0.4) !important;
@@ -15395,11 +16095,20 @@ html.font-size-4xl {
   background-color: #4a4a4a !important;
   border-color: #5a5a5a !important;
 }
-.pa-mode-dark .pa-btn--outline-secondary {
+.pa-mode-dark .pa-btn--outline-bg {
   border-color: #5a5a5a !important;
   color: #aaaaaa !important;
 }
-.pa-mode-dark .pa-btn--outline-secondary:hover {
+.pa-mode-dark .pa-btn--outline-bg:hover {
   background-color: #3a3a3a !important;
   color: #ffffff !important;
 }
+.pa-mode-dark .pa-profile-panel__header {
+  background-color: #242424;
+}
+.pa-mode-dark .pa-profile-panel__header .pa-profile-panel__name {
+  color: #ffffff;
+}
+.pa-mode-dark .pa-profile-panel__header .pa-profile-panel__email {
+  color: #aaaaaa;
+}