@keenmate/pure-css 1.0.0-rc03 → 1.0.0-rc05

package/dist/css/pure-css.css

@@ -1,11 +1,12 @@
+@charset "UTF-8";
 :root,
-.pa-mode-light,
-.pa-mode-dark {
-  --pa-text-strong: color-mix(in srgb, var(--pa-text-color-1) 85%, transparent);
-  --pa-text-secondary: color-mix(in srgb, var(--pa-text-color-1) 70%, transparent);
-  --pa-text-tertiary: color-mix(in srgb, var(--pa-text-color-1) 55%, transparent);
-  --pa-surface-hover: color-mix(in srgb, var(--pa-text-color-1) 4%, transparent);
-  --pa-surface-track: color-mix(in srgb, var(--pa-text-color-1) 12%, transparent);
+.pc-mode-light,
+.pc-mode-dark {
+  --pc-text-strong: color-mix(in srgb, var(--pc-text-color-1) 85%, transparent);
+  --pc-text-secondary: color-mix(in srgb, var(--pc-text-color-1) 70%, transparent);
+  --pc-text-tertiary: color-mix(in srgb, var(--pc-text-color-1) 55%, transparent);
+  --pc-surface-hover: color-mix(in srgb, var(--pc-text-color-1) 4%, transparent);
+  --pc-surface-track: color-mix(in srgb, var(--pc-text-color-1) 12%, transparent);
 }
 
 html {
@@ -27,16 +28,16 @@ p {
 }
 
 :where(a) {
-  color: var(--pa-link-color);
+  color: var(--pc-link-color);
   text-decoration: underline;
 }
 
 :where(a:hover) {
-  color: var(--pa-link-color-hover);
+  color: var(--pc-link-color-hover);
 }
 
 :where(a:visited) {
-  color: var(--pa-link-color-visited);
+  color: var(--pc-link-color-visited);
 }
 
 ul, ol {
@@ -89,8 +90,8 @@ body {
   padding: 0;
   font-family: var(--base-font-family);
   font-size: 1.6rem;
-  color: var(--pa-text-color-1);
-  background-color: var(--pa-main-bg);
+  color: var(--pc-text-color-1);
+  background-color: var(--pc-main-bg);
   line-height: 1.5;
 }
 
@@ -110,1793 +111,3014 @@ label {
 }
 
 *::-webkit-scrollbar-track {
-  background: var(--pa-main-bg);
-  border-radius: var(--pa-border-radius-sm);
+  background: var(--pc-main-bg);
+  border-radius: var(--pc-border-radius-sm);
 }
 
 *::-webkit-scrollbar-thumb {
-  background: var(--pa-border-color);
-  border-radius: var(--pa-border-radius-sm);
-  border: 1px solid var(--pa-main-bg);
+  background: var(--pc-border-color);
+  border-radius: var(--pc-border-radius-sm);
+  border: 1px solid var(--pc-main-bg);
 }
 *::-webkit-scrollbar-thumb:hover {
-  background: var(--pa-accent);
+  background: var(--pc-accent);
 }
 *::-webkit-scrollbar-thumb:active {
-  background: var(--pa-accent-hover);
+  background: var(--pc-accent-hover);
 }
 
 *::-webkit-scrollbar-corner {
-  background: var(--pa-main-bg);
+  background: var(--pc-main-bg);
 }
 
 /* Firefox */
 * {
   scrollbar-width: thin;
-  scrollbar-color: var(--pa-border-color) var(--pa-main-bg);
+  scrollbar-color: var(--pc-border-color) var(--pc-main-bg);
 }
 
-.pa-row {
+.pc-row {
   display: flex;
   flex-wrap: wrap;
   margin-inline: -0.8rem;
   row-gap: 0.8rem;
 }
-.pa-row .pa-row {
+.pc-row .pc-row {
   margin-inline: 0;
 }
 
-.pa-row--no-gutter {
+.pc-row--no-gutter {
   margin-inline: 0;
 }
-.pa-row--no-gutter > [class*=pa-col] {
+.pc-row--no-gutter > [class*=pc-col] {
   padding-inline: 0;
 }
 
-.pa-row--center {
+.pc-row--center {
   justify-content: center;
 }
 
-.pa-row--end {
+.pc-row--end {
   justify-content: flex-end;
 }
 
-.pa-row--between {
+.pc-row--between {
   justify-content: space-between;
 }
 
-.pa-row--around {
+.pc-row--around {
   justify-content: space-around;
 }
 
-.pa-row--stretch {
+.pc-row--stretch {
   align-items: stretch;
 }
 
-.pa-row--top {
+.pc-row--top {
   align-items: flex-start;
 }
 
-.pa-row--middle {
+.pc-row--middle {
   align-items: center;
 }
 
-.pa-row--bottom {
+.pc-row--bottom {
   align-items: flex-end;
 }
 
-.pa-row--same-height > [class*=pa-col] > .pa-card {
+.pc-row--same-height > [class*=pc-col] > .pa-card {
   height: 100%;
 }
 
-.pa-col {
+.pc-col {
   flex: 1;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-auto {
+.pc-col-auto {
   flex: 0 0 auto;
   width: auto;
   padding-inline: 0.8rem;
 }
 
-.pa-col-5 {
+.pc-col-5 {
   flex: 0 0 5%;
   max-width: 5%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-10 {
+.pc-col-10 {
   flex: 0 0 10%;
   max-width: 10%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-15 {
+.pc-col-15 {
   flex: 0 0 15%;
   max-width: 15%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-20 {
+.pc-col-20 {
   flex: 0 0 20%;
   max-width: 20%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-25 {
+.pc-col-25 {
   flex: 0 0 25%;
   max-width: 25%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-30 {
+.pc-col-30 {
   flex: 0 0 30%;
   max-width: 30%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-35 {
+.pc-col-35 {
   flex: 0 0 35%;
   max-width: 35%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-40 {
+.pc-col-40 {
   flex: 0 0 40%;
   max-width: 40%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-45 {
+.pc-col-45 {
   flex: 0 0 45%;
   max-width: 45%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-50 {
+.pc-col-50 {
   flex: 0 0 50%;
   max-width: 50%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-55 {
+.pc-col-55 {
   flex: 0 0 55%;
   max-width: 55%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-60 {
+.pc-col-60 {
   flex: 0 0 60%;
   max-width: 60%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-65 {
+.pc-col-65 {
   flex: 0 0 65%;
   max-width: 65%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-70 {
+.pc-col-70 {
   flex: 0 0 70%;
   max-width: 70%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-75 {
+.pc-col-75 {
   flex: 0 0 75%;
   max-width: 75%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-80 {
+.pc-col-80 {
   flex: 0 0 80%;
   max-width: 80%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-85 {
+.pc-col-85 {
   flex: 0 0 85%;
   max-width: 85%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-90 {
+.pc-col-90 {
   flex: 0 0 90%;
   max-width: 90%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-95 {
+.pc-col-95 {
   flex: 0 0 95%;
   max-width: 95%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-100 {
+.pc-col-100 {
   flex: 0 0 100%;
   max-width: 100%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-1-2 {
+.pc-col-1-2 {
   flex: 0 0 50%;
   max-width: 50%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-1-3 {
+.pc-col-1-3 {
   flex: 0 0 33.333%;
   max-width: 33.333%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-2-3 {
+.pc-col-2-3 {
   flex: 0 0 66.667%;
   max-width: 66.667%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-1-4 {
+.pc-col-1-4 {
   flex: 0 0 25%;
   max-width: 25%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-3-4 {
+.pc-col-3-4 {
   flex: 0 0 75%;
   max-width: 75%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-1-5 {
+.pc-col-1-5 {
   flex: 0 0 20%;
   max-width: 20%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-2-5 {
+.pc-col-2-5 {
   flex: 0 0 40%;
   max-width: 40%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-3-5 {
+.pc-col-3-5 {
   flex: 0 0 60%;
   max-width: 60%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-4-5 {
+.pc-col-4-5 {
   flex: 0 0 80%;
   max-width: 80%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-1-6 {
+.pc-col-1-6 {
   flex: 0 0 16.667%;
   max-width: 16.667%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-5-6 {
+.pc-col-5-6 {
   flex: 0 0 83.333%;
   max-width: 83.333%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-1-12 {
+.pc-col-1-12 {
   flex: 0 0 8.333%;
   max-width: 8.333%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-5-12 {
+.pc-col-5-12 {
   flex: 0 0 41.667%;
   max-width: 41.667%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-7-12 {
+.pc-col-7-12 {
   flex: 0 0 58.333%;
   max-width: 58.333%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-col-11-12 {
+.pc-col-11-12 {
   flex: 0 0 91.667%;
   max-width: 91.667%;
   padding-inline: 0.8rem;
   min-width: 0;
 }
 
-.pa-offset-5 {
+.pc-offset-5 {
   margin-inline-start: 5%;
 }
 
-.pa-offset-10 {
+.pc-offset-10 {
   margin-inline-start: 10%;
 }
 
-.pa-offset-15 {
+.pc-offset-15 {
   margin-inline-start: 15%;
 }
 
-.pa-offset-20 {
+.pc-offset-20 {
   margin-inline-start: 20%;
 }
 
-.pa-offset-25 {
+.pc-offset-25 {
   margin-inline-start: 25%;
 }
 
-.pa-offset-30 {
+.pc-offset-30 {
   margin-inline-start: 30%;
 }
 
-.pa-offset-35 {
+.pc-offset-35 {
   margin-inline-start: 35%;
 }
 
-.pa-offset-40 {
+.pc-offset-40 {
   margin-inline-start: 40%;
 }
 
-.pa-offset-45 {
+.pc-offset-45 {
   margin-inline-start: 45%;
 }
 
-.pa-offset-50 {
+.pc-offset-50 {
   margin-inline-start: 50%;
 }
 
-.pa-offset-55 {
+.pc-offset-55 {
   margin-inline-start: 55%;
 }
 
-.pa-offset-60 {
+.pc-offset-60 {
   margin-inline-start: 60%;
 }
 
-.pa-offset-65 {
+.pc-offset-65 {
   margin-inline-start: 65%;
 }
 
-.pa-offset-70 {
+.pc-offset-70 {
   margin-inline-start: 70%;
 }
 
-.pa-offset-75 {
+.pc-offset-75 {
   margin-inline-start: 75%;
 }
 
-.pa-offset-80 {
+.pc-offset-80 {
   margin-inline-start: 80%;
 }
 
-.pa-offset-85 {
+.pc-offset-85 {
   margin-inline-start: 85%;
 }
 
-.pa-offset-90 {
+.pc-offset-90 {
   margin-inline-start: 90%;
 }
 
-.pa-offset-95 {
+.pc-offset-95 {
   margin-inline-start: 95%;
 }
 
 @container (min-width: 576px) {
-  .pa-col-sm-5 {
+  .pc-col-sm-5 {
     flex: 0 0 5%;
     max-width: 5%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-10 {
+  .pc-col-sm-10 {
     flex: 0 0 10%;
     max-width: 10%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-15 {
+  .pc-col-sm-15 {
     flex: 0 0 15%;
     max-width: 15%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-20 {
+  .pc-col-sm-20 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-25 {
+  .pc-col-sm-25 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-30 {
+  .pc-col-sm-30 {
     flex: 0 0 30%;
     max-width: 30%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-35 {
+  .pc-col-sm-35 {
     flex: 0 0 35%;
     max-width: 35%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-40 {
+  .pc-col-sm-40 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-45 {
+  .pc-col-sm-45 {
     flex: 0 0 45%;
     max-width: 45%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-50 {
+  .pc-col-sm-50 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-55 {
+  .pc-col-sm-55 {
     flex: 0 0 55%;
     max-width: 55%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-60 {
+  .pc-col-sm-60 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-65 {
+  .pc-col-sm-65 {
     flex: 0 0 65%;
     max-width: 65%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-70 {
+  .pc-col-sm-70 {
     flex: 0 0 70%;
     max-width: 70%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-75 {
+  .pc-col-sm-75 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-80 {
+  .pc-col-sm-80 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-85 {
+  .pc-col-sm-85 {
     flex: 0 0 85%;
     max-width: 85%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-90 {
+  .pc-col-sm-90 {
     flex: 0 0 90%;
     max-width: 90%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-95 {
+  .pc-col-sm-95 {
     flex: 0 0 95%;
     max-width: 95%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-100 {
+  .pc-col-sm-100 {
     flex: 0 0 100%;
     max-width: 100%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-1-2 {
+  .pc-col-sm-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-1-3 {
+  .pc-col-sm-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-2-3 {
+  .pc-col-sm-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-1-4 {
+  .pc-col-sm-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-3-4 {
+  .pc-col-sm-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-1-5 {
+  .pc-col-sm-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-2-5 {
+  .pc-col-sm-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-3-5 {
+  .pc-col-sm-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-4-5 {
+  .pc-col-sm-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-1-6 {
+  .pc-col-sm-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-5-6 {
+  .pc-col-sm-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-1-12 {
+  .pc-col-sm-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-5-12 {
+  .pc-col-sm-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-7-12 {
+  .pc-col-sm-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-sm-11-12 {
+  .pc-col-sm-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-offset-sm-5 {
+  .pc-offset-sm-5 {
     margin-inline-start: 5%;
   }
-  .pa-offset-sm-10 {
+  .pc-offset-sm-10 {
     margin-inline-start: 10%;
   }
-  .pa-offset-sm-15 {
+  .pc-offset-sm-15 {
     margin-inline-start: 15%;
   }
-  .pa-offset-sm-20 {
+  .pc-offset-sm-20 {
     margin-inline-start: 20%;
   }
-  .pa-offset-sm-25 {
+  .pc-offset-sm-25 {
     margin-inline-start: 25%;
   }
-  .pa-offset-sm-30 {
+  .pc-offset-sm-30 {
     margin-inline-start: 30%;
   }
-  .pa-offset-sm-35 {
+  .pc-offset-sm-35 {
     margin-inline-start: 35%;
   }
-  .pa-offset-sm-40 {
+  .pc-offset-sm-40 {
     margin-inline-start: 40%;
   }
-  .pa-offset-sm-45 {
+  .pc-offset-sm-45 {
     margin-inline-start: 45%;
   }
-  .pa-offset-sm-50 {
+  .pc-offset-sm-50 {
     margin-inline-start: 50%;
   }
-  .pa-offset-sm-55 {
+  .pc-offset-sm-55 {
     margin-inline-start: 55%;
   }
-  .pa-offset-sm-60 {
+  .pc-offset-sm-60 {
     margin-inline-start: 60%;
   }
-  .pa-offset-sm-65 {
+  .pc-offset-sm-65 {
     margin-inline-start: 65%;
   }
-  .pa-offset-sm-70 {
+  .pc-offset-sm-70 {
     margin-inline-start: 70%;
   }
-  .pa-offset-sm-75 {
+  .pc-offset-sm-75 {
     margin-inline-start: 75%;
   }
-  .pa-offset-sm-80 {
+  .pc-offset-sm-80 {
     margin-inline-start: 80%;
   }
-  .pa-offset-sm-85 {
+  .pc-offset-sm-85 {
     margin-inline-start: 85%;
   }
-  .pa-offset-sm-90 {
+  .pc-offset-sm-90 {
     margin-inline-start: 90%;
   }
-  .pa-offset-sm-95 {
+  .pc-offset-sm-95 {
     margin-inline-start: 95%;
   }
-  .pa-col-sm-auto {
+  .pc-col-sm-auto {
     flex: 0 0 auto;
     width: auto;
   }
 }
 @container (min-width: 768px) {
-  .pa-col-md-5 {
+  .pc-col-md-5 {
     flex: 0 0 5%;
     max-width: 5%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-10 {
+  .pc-col-md-10 {
     flex: 0 0 10%;
     max-width: 10%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-15 {
+  .pc-col-md-15 {
     flex: 0 0 15%;
     max-width: 15%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-20 {
+  .pc-col-md-20 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-25 {
+  .pc-col-md-25 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-30 {
+  .pc-col-md-30 {
     flex: 0 0 30%;
     max-width: 30%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-35 {
+  .pc-col-md-35 {
     flex: 0 0 35%;
     max-width: 35%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-40 {
+  .pc-col-md-40 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-45 {
+  .pc-col-md-45 {
     flex: 0 0 45%;
     max-width: 45%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-50 {
+  .pc-col-md-50 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-55 {
+  .pc-col-md-55 {
     flex: 0 0 55%;
     max-width: 55%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-60 {
+  .pc-col-md-60 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-65 {
+  .pc-col-md-65 {
     flex: 0 0 65%;
     max-width: 65%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-70 {
+  .pc-col-md-70 {
     flex: 0 0 70%;
     max-width: 70%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-75 {
+  .pc-col-md-75 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-80 {
+  .pc-col-md-80 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-85 {
+  .pc-col-md-85 {
     flex: 0 0 85%;
     max-width: 85%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-90 {
+  .pc-col-md-90 {
     flex: 0 0 90%;
     max-width: 90%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-95 {
+  .pc-col-md-95 {
     flex: 0 0 95%;
     max-width: 95%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-100 {
+  .pc-col-md-100 {
     flex: 0 0 100%;
     max-width: 100%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-1-2 {
+  .pc-col-md-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-1-3 {
+  .pc-col-md-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-2-3 {
+  .pc-col-md-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-1-4 {
+  .pc-col-md-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-3-4 {
+  .pc-col-md-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-1-5 {
+  .pc-col-md-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-2-5 {
+  .pc-col-md-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-3-5 {
+  .pc-col-md-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-4-5 {
+  .pc-col-md-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-1-6 {
+  .pc-col-md-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-5-6 {
+  .pc-col-md-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-1-12 {
+  .pc-col-md-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-5-12 {
+  .pc-col-md-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-7-12 {
+  .pc-col-md-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-md-11-12 {
+  .pc-col-md-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-offset-md-5 {
+  .pc-offset-md-5 {
     margin-inline-start: 5%;
   }
-  .pa-offset-md-10 {
+  .pc-offset-md-10 {
     margin-inline-start: 10%;
   }
-  .pa-offset-md-15 {
+  .pc-offset-md-15 {
     margin-inline-start: 15%;
   }
-  .pa-offset-md-20 {
+  .pc-offset-md-20 {
     margin-inline-start: 20%;
   }
-  .pa-offset-md-25 {
+  .pc-offset-md-25 {
     margin-inline-start: 25%;
   }
-  .pa-offset-md-30 {
+  .pc-offset-md-30 {
     margin-inline-start: 30%;
   }
-  .pa-offset-md-35 {
+  .pc-offset-md-35 {
     margin-inline-start: 35%;
   }
-  .pa-offset-md-40 {
+  .pc-offset-md-40 {
     margin-inline-start: 40%;
   }
-  .pa-offset-md-45 {
+  .pc-offset-md-45 {
     margin-inline-start: 45%;
   }
-  .pa-offset-md-50 {
+  .pc-offset-md-50 {
     margin-inline-start: 50%;
   }
-  .pa-offset-md-55 {
+  .pc-offset-md-55 {
     margin-inline-start: 55%;
   }
-  .pa-offset-md-60 {
+  .pc-offset-md-60 {
     margin-inline-start: 60%;
   }
-  .pa-offset-md-65 {
+  .pc-offset-md-65 {
     margin-inline-start: 65%;
   }
-  .pa-offset-md-70 {
+  .pc-offset-md-70 {
     margin-inline-start: 70%;
   }
-  .pa-offset-md-75 {
+  .pc-offset-md-75 {
     margin-inline-start: 75%;
   }
-  .pa-offset-md-80 {
+  .pc-offset-md-80 {
     margin-inline-start: 80%;
   }
-  .pa-offset-md-85 {
+  .pc-offset-md-85 {
     margin-inline-start: 85%;
   }
-  .pa-offset-md-90 {
+  .pc-offset-md-90 {
     margin-inline-start: 90%;
   }
-  .pa-offset-md-95 {
+  .pc-offset-md-95 {
     margin-inline-start: 95%;
   }
-  .pa-col-md-auto {
+  .pc-col-md-auto {
     flex: 0 0 auto;
     width: auto;
   }
 }
 @container (min-width: 992px) {
-  .pa-col-lg-5 {
+  .pc-col-lg-5 {
     flex: 0 0 5%;
     max-width: 5%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-10 {
+  .pc-col-lg-10 {
     flex: 0 0 10%;
     max-width: 10%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-15 {
+  .pc-col-lg-15 {
     flex: 0 0 15%;
     max-width: 15%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-20 {
+  .pc-col-lg-20 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-25 {
+  .pc-col-lg-25 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-30 {
+  .pc-col-lg-30 {
     flex: 0 0 30%;
     max-width: 30%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-35 {
+  .pc-col-lg-35 {
     flex: 0 0 35%;
     max-width: 35%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-40 {
+  .pc-col-lg-40 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-45 {
+  .pc-col-lg-45 {
     flex: 0 0 45%;
     max-width: 45%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-50 {
+  .pc-col-lg-50 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-55 {
+  .pc-col-lg-55 {
     flex: 0 0 55%;
     max-width: 55%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-60 {
+  .pc-col-lg-60 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-65 {
+  .pc-col-lg-65 {
     flex: 0 0 65%;
     max-width: 65%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-70 {
+  .pc-col-lg-70 {
     flex: 0 0 70%;
     max-width: 70%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-75 {
+  .pc-col-lg-75 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-80 {
+  .pc-col-lg-80 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-85 {
+  .pc-col-lg-85 {
     flex: 0 0 85%;
     max-width: 85%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-90 {
+  .pc-col-lg-90 {
     flex: 0 0 90%;
     max-width: 90%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-95 {
+  .pc-col-lg-95 {
     flex: 0 0 95%;
     max-width: 95%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-100 {
+  .pc-col-lg-100 {
     flex: 0 0 100%;
     max-width: 100%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-1-2 {
+  .pc-col-lg-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-1-3 {
+  .pc-col-lg-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-2-3 {
+  .pc-col-lg-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-1-4 {
+  .pc-col-lg-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-3-4 {
+  .pc-col-lg-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-1-5 {
+  .pc-col-lg-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-2-5 {
+  .pc-col-lg-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-3-5 {
+  .pc-col-lg-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-4-5 {
+  .pc-col-lg-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-1-6 {
+  .pc-col-lg-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-5-6 {
+  .pc-col-lg-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-1-12 {
+  .pc-col-lg-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-5-12 {
+  .pc-col-lg-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-7-12 {
+  .pc-col-lg-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-lg-11-12 {
+  .pc-col-lg-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-offset-lg-5 {
+  .pc-offset-lg-5 {
     margin-inline-start: 5%;
   }
-  .pa-offset-lg-10 {
+  .pc-offset-lg-10 {
     margin-inline-start: 10%;
   }
-  .pa-offset-lg-15 {
+  .pc-offset-lg-15 {
     margin-inline-start: 15%;
   }
-  .pa-offset-lg-20 {
+  .pc-offset-lg-20 {
     margin-inline-start: 20%;
   }
-  .pa-offset-lg-25 {
+  .pc-offset-lg-25 {
     margin-inline-start: 25%;
   }
-  .pa-offset-lg-30 {
+  .pc-offset-lg-30 {
     margin-inline-start: 30%;
   }
-  .pa-offset-lg-35 {
+  .pc-offset-lg-35 {
     margin-inline-start: 35%;
   }
-  .pa-offset-lg-40 {
+  .pc-offset-lg-40 {
     margin-inline-start: 40%;
   }
-  .pa-offset-lg-45 {
+  .pc-offset-lg-45 {
     margin-inline-start: 45%;
   }
-  .pa-offset-lg-50 {
+  .pc-offset-lg-50 {
     margin-inline-start: 50%;
   }
-  .pa-offset-lg-55 {
+  .pc-offset-lg-55 {
     margin-inline-start: 55%;
   }
-  .pa-offset-lg-60 {
+  .pc-offset-lg-60 {
     margin-inline-start: 60%;
   }
-  .pa-offset-lg-65 {
+  .pc-offset-lg-65 {
     margin-inline-start: 65%;
   }
-  .pa-offset-lg-70 {
+  .pc-offset-lg-70 {
     margin-inline-start: 70%;
   }
-  .pa-offset-lg-75 {
+  .pc-offset-lg-75 {
     margin-inline-start: 75%;
   }
-  .pa-offset-lg-80 {
+  .pc-offset-lg-80 {
     margin-inline-start: 80%;
   }
-  .pa-offset-lg-85 {
+  .pc-offset-lg-85 {
     margin-inline-start: 85%;
   }
-  .pa-offset-lg-90 {
+  .pc-offset-lg-90 {
     margin-inline-start: 90%;
   }
-  .pa-offset-lg-95 {
+  .pc-offset-lg-95 {
     margin-inline-start: 95%;
   }
-  .pa-col-lg-auto {
+  .pc-col-lg-auto {
     flex: 0 0 auto;
     width: auto;
   }
 }
 @container (min-width: 1200px) {
-  .pa-col-xl-5 {
+  .pc-col-xl-5 {
     flex: 0 0 5%;
     max-width: 5%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-10 {
+  .pc-col-xl-10 {
     flex: 0 0 10%;
     max-width: 10%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-15 {
+  .pc-col-xl-15 {
     flex: 0 0 15%;
     max-width: 15%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-20 {
+  .pc-col-xl-20 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-25 {
+  .pc-col-xl-25 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-30 {
+  .pc-col-xl-30 {
     flex: 0 0 30%;
     max-width: 30%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-35 {
+  .pc-col-xl-35 {
     flex: 0 0 35%;
     max-width: 35%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-40 {
+  .pc-col-xl-40 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-45 {
+  .pc-col-xl-45 {
     flex: 0 0 45%;
     max-width: 45%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-50 {
+  .pc-col-xl-50 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-55 {
+  .pc-col-xl-55 {
     flex: 0 0 55%;
     max-width: 55%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-60 {
+  .pc-col-xl-60 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-65 {
+  .pc-col-xl-65 {
     flex: 0 0 65%;
     max-width: 65%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-70 {
+  .pc-col-xl-70 {
     flex: 0 0 70%;
     max-width: 70%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-75 {
+  .pc-col-xl-75 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-80 {
+  .pc-col-xl-80 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-85 {
+  .pc-col-xl-85 {
     flex: 0 0 85%;
     max-width: 85%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-90 {
+  .pc-col-xl-90 {
     flex: 0 0 90%;
     max-width: 90%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-95 {
+  .pc-col-xl-95 {
     flex: 0 0 95%;
     max-width: 95%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-100 {
+  .pc-col-xl-100 {
     flex: 0 0 100%;
     max-width: 100%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-1-2 {
+  .pc-col-xl-1-2 {
     flex: 0 0 50%;
     max-width: 50%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-1-3 {
+  .pc-col-xl-1-3 {
     flex: 0 0 33.333%;
     max-width: 33.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-2-3 {
+  .pc-col-xl-2-3 {
     flex: 0 0 66.667%;
     max-width: 66.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-1-4 {
+  .pc-col-xl-1-4 {
     flex: 0 0 25%;
     max-width: 25%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-3-4 {
+  .pc-col-xl-3-4 {
     flex: 0 0 75%;
     max-width: 75%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-1-5 {
+  .pc-col-xl-1-5 {
     flex: 0 0 20%;
     max-width: 20%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-2-5 {
+  .pc-col-xl-2-5 {
     flex: 0 0 40%;
     max-width: 40%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-3-5 {
+  .pc-col-xl-3-5 {
     flex: 0 0 60%;
     max-width: 60%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-4-5 {
+  .pc-col-xl-4-5 {
     flex: 0 0 80%;
     max-width: 80%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-1-6 {
+  .pc-col-xl-1-6 {
     flex: 0 0 16.667%;
     max-width: 16.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-5-6 {
+  .pc-col-xl-5-6 {
     flex: 0 0 83.333%;
     max-width: 83.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-1-12 {
+  .pc-col-xl-1-12 {
     flex: 0 0 8.333%;
     max-width: 8.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-5-12 {
+  .pc-col-xl-5-12 {
     flex: 0 0 41.667%;
     max-width: 41.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-7-12 {
+  .pc-col-xl-7-12 {
     flex: 0 0 58.333%;
     max-width: 58.333%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-col-xl-11-12 {
+  .pc-col-xl-11-12 {
     flex: 0 0 91.667%;
     max-width: 91.667%;
     padding-inline: 0.8rem;
     min-width: 0;
   }
-  .pa-offset-xl-5 {
+  .pc-offset-xl-5 {
     margin-inline-start: 5%;
   }
-  .pa-offset-xl-10 {
+  .pc-offset-xl-10 {
     margin-inline-start: 10%;
   }
-  .pa-offset-xl-15 {
+  .pc-offset-xl-15 {
     margin-inline-start: 15%;
   }
-  .pa-offset-xl-20 {
+  .pc-offset-xl-20 {
     margin-inline-start: 20%;
   }
-  .pa-offset-xl-25 {
+  .pc-offset-xl-25 {
     margin-inline-start: 25%;
   }
-  .pa-offset-xl-30 {
+  .pc-offset-xl-30 {
     margin-inline-start: 30%;
   }
-  .pa-offset-xl-35 {
+  .pc-offset-xl-35 {
     margin-inline-start: 35%;
   }
-  .pa-offset-xl-40 {
+  .pc-offset-xl-40 {
     margin-inline-start: 40%;
   }
-  .pa-offset-xl-45 {
+  .pc-offset-xl-45 {
     margin-inline-start: 45%;
   }
-  .pa-offset-xl-50 {
+  .pc-offset-xl-50 {
     margin-inline-start: 50%;
   }
-  .pa-offset-xl-55 {
+  .pc-offset-xl-55 {
     margin-inline-start: 55%;
   }
-  .pa-offset-xl-60 {
+  .pc-offset-xl-60 {
     margin-inline-start: 60%;
   }
-  .pa-offset-xl-65 {
+  .pc-offset-xl-65 {
     margin-inline-start: 65%;
   }
-  .pa-offset-xl-70 {
+  .pc-offset-xl-70 {
     margin-inline-start: 70%;
   }
-  .pa-offset-xl-75 {
+  .pc-offset-xl-75 {
     margin-inline-start: 75%;
   }
-  .pa-offset-xl-80 {
+  .pc-offset-xl-80 {
     margin-inline-start: 80%;
   }
-  .pa-offset-xl-85 {
+  .pc-offset-xl-85 {
     margin-inline-start: 85%;
   }
-  .pa-offset-xl-90 {
+  .pc-offset-xl-90 {
     margin-inline-start: 90%;
   }
-  .pa-offset-xl-95 {
+  .pc-offset-xl-95 {
     margin-inline-start: 95%;
   }
-  .pa-col-xl-auto {
+  .pc-col-xl-auto {
     flex: 0 0 auto;
     width: auto;
   }
 }
-.pa-col--no-padding {
+.pc-col--no-padding {
   padding-inline: 0;
 }
 
-.pa-col--grow {
+.pc-col--grow {
   flex-grow: 1;
 }
 
-.pa-col--shrink {
+.pc-col--shrink {
   flex-shrink: 1;
 }
 
-.pa-hide {
+.pc-hide {
   display: none !important;
 }
 
-.pa-show {
+.pc-show {
   display: block !important;
 }
 
 @media (min-width: 576px) {
-  .pa-hide-sm {
+  .pc-hide-sm {
     display: none !important;
   }
-  .pa-show-sm {
+  .pc-show-sm {
     display: block !important;
   }
 }
 @media (max-width: 575px) {
-  .pa-hide-below-sm {
+  .pc-hide-below-sm {
     display: none !important;
   }
-  .pa-show-below-sm {
+  .pc-show-below-sm {
     display: block !important;
   }
 }
 @media (min-width: 768px) {
-  .pa-hide-md {
+  .pc-hide-md {
     display: none !important;
   }
-  .pa-show-md {
+  .pc-show-md {
     display: block !important;
   }
 }
 @media (max-width: 767px) {
-  .pa-hide-below-md {
+  .pc-hide-below-md {
     display: none !important;
   }
-  .pa-show-below-md {
+  .pc-show-below-md {
     display: block !important;
   }
 }
 @media (min-width: 992px) {
-  .pa-hide-lg {
+  .pc-hide-lg {
     display: none !important;
   }
-  .pa-show-lg {
+  .pc-show-lg {
     display: block !important;
   }
 }
 @media (max-width: 991px) {
-  .pa-hide-below-lg {
+  .pc-hide-below-lg {
     display: none !important;
   }
-  .pa-show-below-lg {
+  .pc-show-below-lg {
     display: block !important;
   }
 }
 @media (min-width: 1200px) {
-  .pa-hide-xl {
+  .pc-hide-xl {
     display: none !important;
   }
-  .pa-show-xl {
+  .pc-show-xl {
     display: block !important;
   }
 }
 @media (max-width: 1199px) {
-  .pa-hide-below-xl {
+  .pc-hide-below-xl {
     display: none !important;
   }
-  .pa-show-below-xl {
+  .pc-show-below-xl {
     display: block !important;
   }
 }
-.pa-card__body .pa-row > [class*=pa-col] {
+.pa-card__body .pc-row > [class*=pc-col] {
   padding-bottom: 0;
 }
 
 @media (max-width: 768px) {
-  .pa-col-5 {
+  .pc-col-5 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-10 {
+  .pc-col-10 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-15 {
+  .pc-col-15 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-20 {
+  .pc-col-20 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-25 {
+  .pc-col-25 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-30 {
+  .pc-col-30 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-35 {
+  .pc-col-35 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-40 {
+  .pc-col-40 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-45 {
+  .pc-col-45 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-50 {
+  .pc-col-50 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-55 {
+  .pc-col-55 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-60 {
+  .pc-col-60 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-65 {
+  .pc-col-65 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-70 {
+  .pc-col-70 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-75 {
+  .pc-col-75 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-80 {
+  .pc-col-80 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-85 {
+  .pc-col-85 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-90 {
+  .pc-col-90 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-95 {
+  .pc-col-95 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-1-2 {
+  .pc-col-1-2 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-1-3 {
+  .pc-col-1-3 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-2-3 {
+  .pc-col-2-3 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-1-4 {
+  .pc-col-1-4 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-3-4 {
+  .pc-col-3-4 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-1-5 {
+  .pc-col-1-5 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-2-5 {
+  .pc-col-2-5 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-3-5 {
+  .pc-col-3-5 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-4-5 {
+  .pc-col-4-5 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-1-6 {
+  .pc-col-1-6 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-5-6 {
+  .pc-col-5-6 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-1-12 {
+  .pc-col-1-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-5-12 {
+  .pc-col-5-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-7-12 {
+  .pc-col-7-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-col-11-12 {
+  .pc-col-11-12 {
     flex: 0 0 100%;
     max-width: 100%;
   }
-  .pa-offset-5 {
+  .pc-offset-5 {
     margin-inline-start: 0;
   }
-  .pa-offset-10 {
+  .pc-offset-10 {
     margin-inline-start: 0;
   }
-  .pa-offset-15 {
+  .pc-offset-15 {
     margin-inline-start: 0;
   }
-  .pa-offset-20 {
+  .pc-offset-20 {
     margin-inline-start: 0;
   }
-  .pa-offset-25 {
+  .pc-offset-25 {
     margin-inline-start: 0;
   }
-  .pa-offset-30 {
+  .pc-offset-30 {
     margin-inline-start: 0;
   }
-  .pa-offset-35 {
+  .pc-offset-35 {
     margin-inline-start: 0;
   }
-  .pa-offset-40 {
+  .pc-offset-40 {
     margin-inline-start: 0;
   }
-  .pa-offset-45 {
+  .pc-offset-45 {
     margin-inline-start: 0;
   }
-  .pa-offset-50 {
+  .pc-offset-50 {
     margin-inline-start: 0;
   }
-  .pa-offset-55 {
+  .pc-offset-55 {
     margin-inline-start: 0;
   }
-  .pa-offset-60 {
+  .pc-offset-60 {
     margin-inline-start: 0;
   }
-  .pa-offset-65 {
+  .pc-offset-65 {
     margin-inline-start: 0;
   }
-  .pa-offset-70 {
+  .pc-offset-70 {
     margin-inline-start: 0;
   }
-  .pa-offset-75 {
+  .pc-offset-75 {
     margin-inline-start: 0;
   }
-  .pa-offset-80 {
+  .pc-offset-80 {
     margin-inline-start: 0;
   }
-  .pa-offset-85 {
+  .pc-offset-85 {
     margin-inline-start: 0;
   }
-  .pa-offset-90 {
+  .pc-offset-90 {
     margin-inline-start: 0;
   }
-  .pa-offset-95 {
+  .pc-offset-95 {
     margin-inline-start: 0;
   }
 }
+/* ========================================
+   Navbar Component
+   Fixed navbar and constrained container widths
+   ======================================== */
+.pc-navbar {
+  position: fixed;
+  top: 0;
+  inset-inline: 0;
+  height: 4.8rem;
+  background-color: var(--pc-navbar-bg);
+  border-bottom: 1px solid var(--pc-navbar-border-color);
+  z-index: 4000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+body.pc-container-sm .pc-navbar {
+  max-width: 76.8rem;
+  inset-inline: 0;
+  margin-inline: auto;
+}
+
+body.pc-container-md .pc-navbar {
+  max-width: 102.4rem;
+  inset-inline: 0;
+  margin-inline: auto;
+}
+
+body.pc-container-lg .pc-navbar {
+  max-width: 128rem;
+  inset-inline: 0;
+  margin-inline: auto;
+}
+
+body.pc-container-xl .pc-navbar {
+  max-width: 160rem;
+  inset-inline: 0;
+  margin-inline: auto;
+}
+
+body.pc-container-2xl .pc-navbar {
+  max-width: 192rem;
+  inset-inline: 0;
+  margin-inline: auto;
+}
+
+.pc-navbar__inner {
+  width: 100%;
+  padding: 0 1.6rem;
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.pc-navbar__start {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  flex-shrink: 0;
+}
+
+.pc-navbar__center {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.pc-navbar__center:has(.pc-navbar-search) {
+  min-width: 18rem;
+}
+.pc-navbar__center:has(.pc-navbar-search) > * {
+  min-width: 0;
+}
+
+.pc-navbar__end {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+
+/* ========================================
+   Navbar/Header Elements
+   Burger menu, brand, navigation, title, profile button, theme switcher
+   ======================================== */
+.pc-fit-hidden {
+  display: none !important;
+}
+
+.pc-app-header {
+  flex-shrink: 0;
+}
+.pc-app-header h1 {
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--pc-navbar-text);
+  white-space: nowrap;
+}
+.pc-app-header__version {
+  margin-inline-start: 0.4rem;
+  font-size: 1.2rem;
+  font-weight: 400;
+  color: var(--pc-navbar-text-secondary);
+}
+
+.pc-navbar__burger {
+  flex-shrink: 0;
+  margin-inline-start: 0.3rem;
+}
+
+.pc-navmenu {
+  flex-shrink: 0;
+}
+.pc-navmenu > ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: 1.2rem;
+}
+.pc-navmenu > ul > li {
+  margin: 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.pc-navmenu > ul > li > a {
+  text-decoration: none;
+  color: var(--pc-navbar-text-secondary);
+  font-weight: 500;
+  padding: 0.4rem 0.8rem;
+  border-radius: var(--pc-border-radius);
+  transition: all 0.1s ease-out;
+  font-size: 1.4rem;
+  display: flex;
+  align-items: center;
+}
+.pc-navmenu > ul > li > a:hover {
+  color: var(--pc-navbar-text);
+  background-color: color-mix(in srgb, currentColor 12%, transparent);
+}
+.pc-navmenu > ul > li.pc-navmenu__item--active > a, .pc-navmenu > ul > li.pc-navmenu__item--active > a:hover {
+  color: var(--pc-navbar-text);
+  background-color: color-mix(in srgb, currentColor 22%, transparent);
+  font-weight: 600;
+}
+.pc-navmenu__item--has-dropdown {
+  position: static;
+}
+@media (hover: hover) {
+  .pc-navmenu__item--has-dropdown:hover > .pc-navmenu__dropdown {
+    display: block !important;
+  }
+}
+.pc-navmenu__item--has-dropdown.is-open > .pc-navmenu__dropdown {
+  display: block !important;
+}
+.pc-navmenu__link {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.pc-navmenu__dropdown {
+  display: none !important;
+  position: absolute;
+  top: 100%;
+  inset-inline-start: 0;
+  min-width: 19.2rem;
+  background-color: var(--pc-card-bg);
+  border: 1px solid var(--pc-border-color);
+  border-radius: var(--pc-border-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 1100;
+  padding: 0.4rem 0;
+  margin-top: 0;
+  list-style: none;
+  flex-direction: column;
+}
+.pc-navmenu__dropdown li {
+  margin: 0;
+  display: block;
+  position: relative;
+}
+.pc-navmenu__dropdown li.pc-navmenu__item--has-dropdown::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  inset-inline-start: 100%;
+  width: 6.4px;
+  height: 100%;
+  z-index: 1099;
+}
+@media (hover: hover) {
+  .pc-navmenu__dropdown li:hover > .pc-navmenu__dropdown {
+    display: block !important;
+  }
+}
+.pc-navmenu__dropdown li.is-open > .pc-navmenu__dropdown {
+  display: block !important;
+}
+.pc-navmenu__dropdown li a {
+  display: block;
+  padding: 0.8rem 1.6rem;
+  color: var(--pc-text-color-1);
+  border-radius: 0;
+  white-space: nowrap;
+  text-decoration: none;
+  font-weight: 500;
+  font-size: 1.4rem;
+}
+.pc-navmenu__dropdown li a:hover {
+  background-color: var(--pc-accent-light);
+  color: var(--pc-accent);
+}
+.pc-navmenu__dropdown--level2 {
+  top: 0;
+  inset-inline-start: 100%;
+  margin-top: 0;
+  margin-inline-start: 0;
+}
+@media (hover: none) {
+  .pc-navmenu__dropdown .pc-navmenu__dropdown {
+    position: static;
+    inset: auto;
+    min-width: 0;
+    margin: 0;
+    border: none;
+    box-shadow: none;
+    padding: 0;
+  }
+  .pc-navmenu__dropdown .pc-navmenu__dropdown li a {
+    padding-inline-start: 3.2rem;
+  }
+}
+.pc-navmenu[data-pc-fit-nav] {
+  flex-shrink: 1;
+  min-width: 0;
+}
+.pc-navmenu[data-pc-fit-nav] > ul > li {
+  flex-shrink: 0;
+}
+.pc-navmenu__item--more {
+  position: relative;
+}
+.pc-navmenu__more-chevron {
+  display: inline-block;
+  margin-inline-start: 0.4rem;
+  font-size: 1.2rem;
+  transition: transform 0.1s ease-out;
+}
+.pc-navmenu__item--more.is-open .pc-navmenu__more-chevron {
+  transform: rotate(90deg);
+}
+.pc-navmenu__more-menu {
+  z-index: 4010;
+}
+.pc-navmenu__more-menu.pc-navmenu__more-menu--open {
+  display: block !important;
+}
+.pc-navmenu__more-menu .pc-navmenu__dropdown {
+  display: block !important;
+  position: static;
+  min-width: 0;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+  margin: 0;
+}
+.pc-navmenu__more-menu .pc-navmenu__dropdown li a {
+  padding-inline-start: 3.2rem;
+}
+.pc-navmenu__more-menu .pc-navmenu__item--has-dropdown > a {
+  font-weight: 600;
+}
+.pc-navmenu__more-menu .pc-navmenu__item--has-dropdown::after {
+  content: none;
+}
+
+.pc-navbar__start:has(.pc-navmenu[data-pc-fit-nav]) {
+  flex-shrink: 1;
+  min-width: 0;
+}
+
+.pc-page-header {
+  flex: 1;
+  min-width: 0;
+  text-align: center;
+}
+.pc-page-header h2 {
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--pc-navbar-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pc-navbar__profile-btn {
+  flex-shrink: 0;
+}
+
+.burger-menu {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  width: 2.4rem;
+  height: 2.4rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+.burger-menu span {
+  width: 100%;
+  height: 2px;
+  background-color: var(--pc-navbar-text);
+  border-radius: var(--pc-border-radius);
+  transition: all 0.15s ease-out;
+  transform-origin: center;
+}
+.burger-menu.active span:nth-child(1) {
+  transform: rotate(45deg) translate(3px, 3px);
+}
+.burger-menu.active span:nth-child(2) {
+  opacity: 0;
+}
+.burger-menu.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(3px, -3px);
+}
+[dir=rtl] .burger-menu.active span:nth-child(1) {
+  transform: rotate(45deg) translate(-3px, 3px);
+}
+[dir=rtl] .burger-menu.active span:nth-child(3) {
+  transform: rotate(-45deg) translate(-3px, -3px);
+}
+.burger-menu:hover span {
+  background-color: var(--pc-accent);
+}
+
+.theme-switcher {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+.theme-switcher label {
+  color: var(--pc-navbar-text-secondary);
+  font-size: 1.4rem;
+}
+.theme-switcher select {
+  padding: 0.4rem 0.8rem;
+  border: 1px solid var(--pc-border-color);
+  border-radius: var(--pc-border-radius);
+  background-color: var(--pc-navbar-bg);
+  color: var(--pc-navbar-text);
+  font-size: 1.4rem;
+}
+.theme-switcher select:focus {
+  outline: none;
+  border-color: var(--pc-accent);
+}
+
+/* ========================================
+   Sidebar Component
+   Sidebar navigation with nested submenus
+   ======================================== */
+/* ========================================
+   Resize handle — the shared grab-knob
+   ONE knob look for every drag-to-resize affordance: the sidebar resize handle
+   and the splitter gutter. Callers own WHERE the knob sits (sticky on the
+   sidebar edge, centred on a splitter gutter); these mixins own how it LOOKS —
+   including a viewport-responsive width so it's slim on desktop and chunkier on
+   small / touch-first viewports (no oversized knob on a wide screen).
+   ======================================== */
+:root {
+  --pc-local-sidebar-width: 28.8rem;
+  --pc-local-sidebar-min-width: 18rem;
+  --pc-local-sidebar-max-width: 50rem;
+}
+
+:where(.pc-layout__sidebar) {
+  width: var(--pc-local-sidebar-width);
+}
+
+.pc-layout__sidebar {
+  background-color: var(--pc-sidebar-bg);
+  border-inline-end: 1px solid var(--pc-border-color);
+  flex-shrink: 0;
+  position: relative;
+}
+
+.pc-sidebar-resize {
+  position: absolute;
+  top: 0;
+  inset-inline-end: 0;
+  width: 6px;
+  height: 100%;
+  cursor: ew-resize;
+  z-index: 100;
+  touch-action: none;
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
+.pc-sidebar-resize::before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  content: "⋮";
+  width: 14px;
+  height: 44px;
+  border-radius: min(var(--pc-border-radius-lg), 4px);
+  background-color: var(--pc-card-bg);
+  border: 2px solid var(--pc-border-color);
+  color: var(--pc-text-color-2);
+  font-size: 1.8rem;
+  line-height: 1;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+  transition: border-color 0.1s ease-out, color 0.1s ease-out;
+}
+@media (max-width: 1024px) {
+  .pc-sidebar-resize::before {
+    width: 20px;
+    height: 48px;
+    border-radius: min(var(--pc-border-radius-lg), 6px);
+  }
+}
+.pc-sidebar-resize::before {
+  position: sticky;
+  top: 50vh;
+  transform: translate(50%, -50%);
+}
+.pc-sidebar-resize:hover::before, .pc-sidebar-resize--active::before {
+  border-color: var(--pc-accent);
+  color: var(--pc-accent);
+}
+
+@media (pointer: coarse) {
+  .pc-sidebar-resize {
+    width: 24px;
+  }
+}
+body.pc-layout--sticky .pc-sidebar-resize::before {
+  position: absolute;
+  top: 50%;
+  inset-inline-end: 0;
+}
+
+body.pc-sidebar-resizing {
+  cursor: ew-resize !important;
+  user-select: none;
+}
+body.pc-sidebar-resizing * {
+  cursor: ew-resize !important;
+}
+
+body.pc-layout--sticky .pc-layout__sidebar {
+  overflow-y: auto;
+  overflow-y: overlay;
+  overflow-x: visible;
+}
+
+.pc-sidebar__nav {
+  padding: 1.6rem 0;
+}
+.pc-sidebar__nav ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.pc-sidebar__section {
+  padding: 1.2rem 1.6rem 0.4rem;
+  font-size: 1.2rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--pc-sidebar-text-secondary);
+  user-select: none;
+}
+.pc-sidebar__section:first-child {
+  padding-top: 0.4rem;
+}
+.pc-sidebar__divider {
+  height: 0;
+  margin: 0.4rem 1.6rem;
+  padding: 0;
+  border: 0;
+  border-top: 1px solid var(--pc-border-color);
+  list-style: none;
+}
+.pc-sidebar__link {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 0.8rem 1.6rem;
+  color: var(--pc-sidebar-text-secondary);
+  text-decoration: none;
+  font-weight: 500;
+  border-inline-end: 3px solid transparent;
+}
+body.loaded .pc-sidebar__link {
+  transition: all 0.1s ease-out;
+}
+.pc-sidebar__link:hover {
+  color: var(--pc-sidebar-text);
+  background-color: var(--pc-accent-light);
+}
+.pc-sidebar__link--active {
+  color: var(--pc-accent);
+  background-color: var(--pc-accent-hover);
+  border-inline-end-color: var(--pc-accent);
+  font-weight: 600;
+}
+.pc-sidebar__search {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  width: calc(100% - 0.8rem * 2);
+  margin: 0.8rem;
+  height: 3.5rem;
+  padding: 0 1.6rem;
+  color: var(--pc-text-color-2);
+  background-color: var(--pc-input-bg);
+  border: 1px solid var(--pc-border-color);
+  border-radius: var(--pc-border-radius);
+  text-align: start;
+  font-weight: 500;
+  cursor: pointer;
+}
+.pc-sidebar__search[hidden] {
+  display: none;
+}
+body.loaded .pc-sidebar__search {
+  transition: all 0.1s ease-out;
+}
+.pc-sidebar__search:hover {
+  border-color: #007bff;
+  color: var(--pc-sidebar-text);
+}
+.pc-layout__sidebar--icon-collapse .pc-sidebar__search {
+  width: auto;
+  margin: 0;
+  padding: 0.8rem 1.6rem;
+  background: transparent;
+  border-color: transparent;
+  border-radius: 0;
+}
+.pc-sidebar__search--input {
+  cursor: text;
+}
+.pc-sidebar__search--input .pc-sidebar__search-icon {
+  width: 2.4rem;
+  min-width: 2.4rem;
+  height: 2.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font-size: 1.6rem;
+  line-height: 1;
+  cursor: pointer;
+}
+.pc-sidebar__search--input .pc-sidebar__search-field {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--pc-sidebar-text);
+  font: inherit;
+  padding: 0;
+}
+.pc-sidebar__search--input .pc-sidebar__search-field::placeholder {
+  color: var(--pc-text-color-2);
+  opacity: 0.5;
+}
+.pc-sidebar__search--input .pc-sidebar__search-field::-webkit-search-decoration, .pc-sidebar__search--input .pc-sidebar__search-field::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+.pc-layout__sidebar--icon-collapse .pc-sidebar__search--input {
+  justify-content: center;
+}
+.pc-layout__sidebar--icon-collapse .pc-sidebar__search--input .pc-sidebar__search-field {
+  display: none;
+}
+.pc-sidebar__toggle {
+  display: flex;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 0.8rem 1.6rem;
+  color: var(--pc-sidebar-text-secondary);
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: start;
+  font-weight: 500;
+  cursor: pointer;
+}
+body.loaded .pc-sidebar__toggle {
+  transition: all 0.1s ease-out;
+}
+.pc-sidebar__toggle:hover {
+  color: var(--pc-sidebar-text);
+  background-color: var(--pc-accent-light);
+}
+.pc-sidebar__toggle--active {
+  color: var(--pc-accent);
+  background-color: var(--pc-accent-hover);
+}
+.pc-sidebar__icon {
+  width: 2.4rem;
+  min-width: 2.4rem;
+  height: 2.4rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 1.6rem;
+  text-align: center;
+  line-height: 1;
+}
+.pc-sidebar__label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+body.loaded .pc-sidebar__label {
+  transition: opacity 0.15s ease-out, width 0.15s ease-out;
+}
+.pc-sidebar__submenu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: none;
+  background-color: var(--pc-sidebar-submenu-bg);
+}
+.pc-sidebar__submenu--open {
+  display: block;
+}
+.pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link {
+  padding-inline-start: 4rem;
+  font-size: 1.5rem;
+  border-inline-end: 2px solid transparent;
+}
+.pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link:hover {
+  background-color: var(--pc-sidebar-submenu-hover-bg);
+}
+.pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link--active {
+  background-color: var(--pc-sidebar-submenu-active-bg);
+  color: var(--pc-sidebar-submenu-active-text);
+  border-inline-end-color: var(--pc-accent);
+}
+.pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__toggle {
+  padding-inline-start: 4rem;
+  font-size: 1.5rem;
+}
+.pc-sidebar__submenu .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link {
+  padding-inline-start: 5.2rem;
+  font-size: 1.4rem;
+  border-inline-end: 1px solid transparent;
+}
+.pc-sidebar__submenu .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link--active {
+  border-inline-end-color: var(--pc-accent);
+}
+.pc-sidebar__chevron {
+  margin-inline-start: auto;
+  font-size: 1.2rem;
+}
+body.loaded .pc-sidebar__chevron {
+  transition: transform 0.1s ease-out;
+}
+.pc-sidebar__item--open > .pc-sidebar__toggle > .pc-sidebar__chevron {
+  transform: rotate(90deg);
+}
+[dir=rtl] .pc-sidebar__item--open > .pc-sidebar__toggle > .pc-sidebar__chevron {
+  transform: rotate(-90deg);
+}
+
+/* ========================================
+   Sidebar States
+   Hidden, icon-collapse, and expanded states
+   ======================================== */
+.sidebar-hidden .pc-layout__sidebar {
+  width: 0;
+  opacity: 0;
+  overflow: hidden;
+  border-inline-end: none;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse {
+  width: 6.4rem;
+  opacity: 1;
+  overflow: visible !important;
+  z-index: 1050;
+  border-inline-end: 1px solid #e1e5e9;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item {
+  position: relative;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__label {
+  opacity: 0;
+  width: 0;
+  overflow: hidden;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__chevron {
+  display: none;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu {
+  display: none;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__link,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__toggle {
+  padding: 0.8rem 1.6rem;
+  position: relative;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__link:hover,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__toggle:hover {
+  overflow: visible;
+  z-index: 1000;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__link:hover .pc-sidebar__label,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__toggle:hover .pc-sidebar__label {
+  opacity: 1;
+  width: auto;
+  overflow: visible;
+  position: absolute;
+  inset-inline-start: 100%;
+  top: 0;
+  bottom: 0;
+  padding: 0.8rem 1.6rem;
+  background-color: var(--pc-sidebar-bg);
+  border: 1px solid var(--pc-border-color);
+  border-inline-start: none;
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--pc-border-radius);
+  border-end-end-radius: var(--pc-border-radius);
+  border-end-start-radius: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  white-space: nowrap;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover {
+  display: block !important;
+  max-height: none !important;
+  overflow: visible !important;
+  position: absolute;
+  inset-inline-start: 100%;
+  top: 0;
+  min-width: 12rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: var(--pc-sidebar-submenu-bg);
+  border: 1px solid var(--pc-border-color);
+  border-inline-start: none;
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--pc-border-radius);
+  border-end-end-radius: var(--pc-border-radius);
+  border-end-start-radius: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1001;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__item,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__item {
+  position: relative;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__link,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__link,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__toggle {
+  padding: 0.8rem 1.6rem;
+  justify-content: flex-start;
+  gap: 1.2rem;
+  font-size: 1.4rem;
+  width: 100%;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__link:hover,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle:hover,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__link:hover,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__toggle:hover {
+  background-color: var(--pc-sidebar-submenu-hover-bg);
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__link--active,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle--active,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__link--active,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__toggle--active {
+  background-color: var(--pc-sidebar-submenu-active-bg);
+  color: var(--pc-sidebar-submenu-active-text);
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__icon,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__icon {
+  width: 2.4rem;
+  min-width: 2.4rem;
+  justify-content: center;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__label,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__label {
+  position: static;
+  opacity: 1;
+  width: auto;
+  padding: 0;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__chevron,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__chevron {
+  display: inline;
+  margin-inline-start: auto;
+  transform: none !important;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__submenu,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__submenu {
+  display: none;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__item:hover > .pc-sidebar__submenu,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__submenu .pc-sidebar__submenu:hover,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__item:hover > .pc-sidebar__submenu,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__submenu .pc-sidebar__submenu:hover {
+  display: block !important;
+  max-height: none !important;
+  overflow: visible !important;
+  position: absolute;
+  inset-inline-start: 100%;
+  top: 0;
+  min-width: 19.2rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: var(--pc-sidebar-submenu-bg);
+  border: 1px solid var(--pc-border-color);
+  border-inline-start: none;
+  border-start-start-radius: 0;
+  border-start-end-radius: var(--pc-border-radius);
+  border-end-end-radius: var(--pc-border-radius);
+  border-end-start-radius: 0;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  z-index: 1002;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__link,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__submenu .pc-sidebar__submenu:hover .pc-sidebar__link,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__submenu .pc-sidebar__submenu:hover .pc-sidebar__toggle,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__link,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__toggle,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__submenu .pc-sidebar__submenu:hover .pc-sidebar__link,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__submenu .pc-sidebar__submenu:hover .pc-sidebar__toggle {
+  font-size: 1.2rem;
+}
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__chevron,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__submenu .pc-sidebar__submenu:hover .pc-sidebar__chevron,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__item:hover > .pc-sidebar__submenu .pc-sidebar__chevron,
+.sidebar-hidden .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu:hover .pc-sidebar__submenu .pc-sidebar__submenu:hover .pc-sidebar__chevron {
+  transform: none !important;
+}
+
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse {
+  width: var(--pc-local-sidebar-width);
+}
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__label {
+  opacity: 1;
+  width: auto;
+}
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__chevron {
+  display: inline;
+}
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__link,
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__toggle {
+  padding: 0.8rem 1.6rem;
+  justify-content: flex-start;
+  gap: 1.2rem;
+}
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link,
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__toggle {
+  padding-inline-start: 4rem;
+}
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__link,
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__submenu .pc-sidebar__submenu > .pc-sidebar__item > .pc-sidebar__toggle {
+  padding-inline-start: 5.2rem;
+}
+body:not(.sidebar-hidden) .pc-layout__sidebar--icon-collapse .pc-sidebar__icon {
+  width: 2.4rem;
+}
+
+/* ========================================
+   Layout Container
+   Main layout wrapper, content areas, sticky/scroll modes
+   ======================================== */
+body.pc-layout--sticky {
+  height: 100vh;
+  overflow: hidden;
+}
+
+.pc-layout {
+  max-width: 100%;
+  margin: 4.8rem auto 0;
+  background-color: var(--pc-main-bg);
+  overflow: visible;
+  display: flex;
+  flex-direction: column;
+}
+
+body.pc-container-sm .pc-layout {
+  max-width: 76.8rem;
+  box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
+  border-left: 1px solid var(--pc-border-color);
+  border-right: 1px solid var(--pc-border-color);
+}
+
+body.pc-container-md .pc-layout {
+  max-width: 102.4rem;
+  box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
+  border-left: 1px solid var(--pc-border-color);
+  border-right: 1px solid var(--pc-border-color);
+}
+
+body.pc-container-lg .pc-layout {
+  max-width: 128rem;
+  box-shadow: 0 0 80px rgba(0, 0, 0, 0.15);
+  border-left: 1px solid var(--pc-border-color);
+  border-right: 1px solid var(--pc-border-color);
+}
+
+body.pc-container-xl .pc-layout {
+  max-width: 160rem;
+  box-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
+  border-left: 1px solid var(--pc-border-color);
+  border-right: 1px solid var(--pc-border-color);
+}
+
+body.pc-container-2xl .pc-layout {
+  max-width: 192rem;
+  box-shadow: 0 0 60px rgba(0, 0, 0, 0.12);
+  border-left: 1px solid var(--pc-border-color);
+  border-right: 1px solid var(--pc-border-color);
+}
+
+body.pc-layout--sticky .pc-layout {
+  height: calc(100vh - 4.8rem);
+}
+
+body:not(.pc-layout--sticky) .pc-layout {
+  min-height: calc(100vh - 4.8rem);
+}
+
+.pc-layout__inner {
+  display: flex;
+  width: 100%;
+  flex: 1;
+}
+
+body.pc-layout--sticky .pc-layout__inner {
+  flex: 1;
+  overflow: hidden;
+}
+
+.pc-layout__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+
+.pc-layout__main {
+  flex: 1;
+  padding: 1.6rem;
+  container-type: inline-size;
+}
+
+.pc-layout__footer {
+  min-height: 4.8rem;
+  background-color: var(--pc-footer-bg);
+  border-top: 1px solid var(--pc-footer-border-color);
+  display: flex;
+  align-items: center;
+  padding: 0.4rem 1.6rem;
+  flex-shrink: 0;
+  gap: 1.6rem;
+}
+
+.pc-footer__start {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  flex-shrink: 0;
+}
+
+.pc-footer__center {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pc-footer__end {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  flex-shrink: 0;
+}
+.pc-footer__end--vertical {
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.4rem;
+}
+
+@media (max-width: 768px) {
+  .pc-layout__footer {
+    flex-wrap: wrap;
+    min-height: auto;
+    padding: 0.8rem 1.6rem;
+  }
+  .pc-footer__start,
+  .pc-footer__center,
+  .pc-footer__end {
+    flex-shrink: 1;
+    min-width: 0;
+  }
+  .pc-footer__start {
+    flex: 1 1 auto;
+  }
+  .pc-footer__center {
+    display: none;
+  }
+  .pc-footer__end {
+    flex: 0 1 auto;
+  }
+  .pc-footer__end--vertical {
+    align-items: flex-end;
+  }
+}
+/* ========================================
+   Layout Responsive
+   Mobile and tablet media queries
+   ======================================== */
+:root {
+  --pc-mobile-breakpoint: 768px;
+  --pc-transition-fast: 0.1s;
+  --pc-transition-normal: 0.15s;
+  --pc-transition-medium: 0.25s;
+  --pc-transition-slow: 0.3s;
+  --pc-easing-snappy: ease-out;
+}
+
+@media (max-width: 768px) {
+  .pc-layout__sidebar,
+  .pc-layout__sidebar--icon-collapse {
+    position: fixed;
+    top: 4.8rem;
+    inset-inline-start: 0;
+    bottom: 0;
+    width: 90vw;
+    z-index: 1050;
+    background-color: var(--pc-sidebar-bg);
+    opacity: 1;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-inline-end: none;
+    transform: translateX(-100%);
+    visibility: hidden;
+  }
+  body.loaded .pc-layout__sidebar,
+  body.loaded .pc-layout__sidebar--icon-collapse {
+    transition: transform 0.25s ease-out, visibility 0.25s ease-out;
+  }
+  [dir=rtl] .pc-layout__sidebar,
+  [dir=rtl] .pc-layout__sidebar--icon-collapse {
+    transform: translateX(100%);
+  }
+  .pc-layout__sidebar--icon-collapse .pc-sidebar__label {
+    opacity: 1 !important;
+    width: auto !important;
+    overflow: visible !important;
+    position: static !important;
+  }
+  body::before {
+    content: "";
+    position: fixed;
+    top: 4.8rem;
+    inset-inline: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 1040;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+  }
+  body.loaded body::before {
+    transition: opacity 0.25s ease-out, visibility 0.25s ease-out;
+  }
+  .sidebar-visible {
+    overflow: hidden;
+  }
+  .sidebar-visible .pc-layout__sidebar,
+  .sidebar-visible .pc-layout__sidebar--icon-collapse {
+    transform: translateX(0);
+    visibility: visible;
+  }
+  .sidebar-visible::before {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+  }
+  .pc-sidebar-resize {
+    display: none;
+  }
+  .pc-navbar__inner {
+    gap: 0.8rem;
+  }
+  .pc-navmenu:not([data-pc-fit-nav]) {
+    display: none;
+  }
+  .theme-switcher label {
+    display: none;
+  }
+}
+@media (max-width: 1024px) and (min-width: 769px) {
+  .pc-layout__sidebar {
+    width: min(var(--pc-local-sidebar-width), 16rem);
+  }
+  .pc-layout__sidebar__nav ul li a {
+    padding: 0.8rem 1.2rem;
+    font-size: 1.4rem;
+  }
+  body.pc-sidebar-resized:not(.sidebar-hidden) .pc-layout__sidebar {
+    width: var(--pc-local-sidebar-width);
+  }
+}
+/* ========================================
+   Fit — Floating-menu sink (fit.js)
+   The self-contained relocation target for
+   data-pc-fit="relocate" data-pc-fit-target="floating-menu".
+   fit.js creates the trigger (pinned in the container) + panel (on <body>)
+   on demand and toggles --open; this styles them. No sidebar dependency.
+   Relocated from pure-admin-core: the fit engine (fit.js) + its flyout sink
+   now live in the foundation package.
+   ======================================== */
+.pc-fit-flyout__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  width: 2.8rem;
+  height: 2.8rem;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--pc-border-radius);
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.pc-fit-flyout__trigger:hover {
+  background: var(--pc-hover-bg, rgba(0, 0, 0, 0.05));
+}
+.pc-fit-flyout__trigger:focus-visible {
+  outline: 2px solid var(--pc-accent-color);
+  outline-offset: 1px;
+}
+.pc-fit-flyout__trigger[aria-expanded=true] {
+  background: var(--pc-hover-bg, rgba(0, 0, 0, 0.08));
+}
+
+.pc-fit-flyout__dots {
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background: currentColor;
+  position: relative;
+}
+.pc-fit-flyout__dots::before, .pc-fit-flyout__dots::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  width: 0.4rem;
+  height: 0.4rem;
+  border-radius: 50%;
+  background: currentColor;
+}
+.pc-fit-flyout__dots::before {
+  inset-inline-start: -0.7rem;
+}
+.pc-fit-flyout__dots::after {
+  inset-inline-start: 0.7rem;
+}
+
+.pc-fit-flyout__panel {
+  position: fixed;
+  z-index: 4010;
+  display: none;
+  min-width: 20rem;
+  max-width: 32rem;
+  padding: 0.8rem;
+  background: var(--pc-card-bg);
+  border: 1px solid var(--pc-border-color);
+  border-radius: var(--pc-border-radius);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+.pc-fit-flyout__panel--open {
+  display: block;
+}
+
+.pc-fit-flyout__item {
+  padding: 0.4rem 0.8rem;
+}
+.pc-fit-flyout__item + .pc-fit-flyout__item {
+  border-top: 1px solid var(--pc-border-color);
+}
+
 /* Pure Admin Visual Framework - Default Font Definitions */
 .font-family-system {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -3256,6 +4478,30 @@ label {
   flex-shrink: 1 !important;
 }
 
+.flex-1 {
+  flex: 1 1 0% !important;
+}
+
+.flex-auto {
+  flex: 1 1 auto !important;
+}
+
+.flex-initial {
+  flex: 0 1 auto !important;
+}
+
+.flex-none {
+  flex: none !important;
+}
+
+.flex-grow {
+  flex-grow: 1 !important;
+}
+
+.flex-shrink {
+  flex-shrink: 1 !important;
+}
+
 .text-center {
   text-align: center !important;
 }
@@ -3951,6 +5197,30 @@ label {
   max-height: 50rem !important;
 }
 
+.h-full {
+  height: 100% !important;
+}
+
+.h-screen {
+  height: 100vh !important;
+}
+
+.min-h-full {
+  min-height: 100% !important;
+}
+
+.min-h-screen {
+  min-height: 100vh !important;
+}
+
+.max-h-full {
+  max-height: 100% !important;
+}
+
+.max-h-screen {
+  max-height: 100vh !important;
+}
+
 .minw-5 {
   min-width: 5% !important;
 }
@@ -4360,23 +5630,23 @@ label {
 }
 
 .border {
-  border: 1px solid var(--pa-border-color) !important;
+  border: 1px solid var(--pc-border-color) !important;
 }
 
 .border-top {
-  border-top: 1px solid var(--pa-border-color) !important;
+  border-top: 1px solid var(--pc-border-color) !important;
 }
 
 .border-right {
-  border-right: 1px solid var(--pa-border-color) !important;
+  border-right: 1px solid var(--pc-border-color) !important;
 }
 
 .border-bottom {
-  border-bottom: 1px solid var(--pa-border-color) !important;
+  border-bottom: 1px solid var(--pc-border-color) !important;
 }
 
 .border-left {
-  border-left: 1px solid var(--pa-border-color) !important;
+  border-left: 1px solid var(--pc-border-color) !important;
 }
 
 .border-0 {
@@ -4416,67 +5686,67 @@ label {
 }
 
 .text-primary {
-  color: var(--pa-accent) !important;
+  color: var(--pc-accent) !important;
 }
 
 .text-success {
-  color: var(--pa-success-text) !important;
+  color: var(--pc-success-text) !important;
 }
 
 .text-danger {
-  color: var(--pa-danger-text) !important;
+  color: var(--pc-danger-text) !important;
 }
 
 .text-warning {
-  color: var(--pa-warning-text) !important;
+  color: var(--pc-warning-text) !important;
 }
 
 .text-info {
-  color: var(--pa-info-text) !important;
+  color: var(--pc-info-text) !important;
 }
 
 .text-color-1 {
-  color: var(--pa-color-1) !important;
+  color: var(--pc-color-1) !important;
 }
 
 .text-color-2 {
-  color: var(--pa-color-2) !important;
+  color: var(--pc-color-2) !important;
 }
 
 .text-color-3 {
-  color: var(--pa-color-3) !important;
+  color: var(--pc-color-3) !important;
 }
 
 .text-color-4 {
-  color: var(--pa-color-4) !important;
+  color: var(--pc-color-4) !important;
 }
 
 .text-color-5 {
-  color: var(--pa-color-5) !important;
+  color: var(--pc-color-5) !important;
 }
 
 .text-color-6 {
-  color: var(--pa-color-6) !important;
+  color: var(--pc-color-6) !important;
 }
 
 .text-color-7 {
-  color: var(--pa-color-7) !important;
+  color: var(--pc-color-7) !important;
 }
 
 .text-color-8 {
-  color: var(--pa-color-8) !important;
+  color: var(--pc-color-8) !important;
 }
 
 .text-color-9 {
-  color: var(--pa-color-9) !important;
+  color: var(--pc-color-9) !important;
 }
 
 .rounded {
-  border-radius: var(--pa-border-radius) !important;
+  border-radius: var(--pc-border-radius) !important;
 }
 
 .rounded-lg {
-  border-radius: var(--pa-border-radius-lg) !important;
+  border-radius: var(--pc-border-radius-lg) !important;
 }
 
 .rounded-circle {
@@ -4488,23 +5758,23 @@ label {
 }
 
 .rounded-top {
-  border-top-left-radius: var(--pa-border-radius) !important;
-  border-top-right-radius: var(--pa-border-radius) !important;
+  border-top-left-radius: var(--pc-border-radius) !important;
+  border-top-right-radius: var(--pc-border-radius) !important;
 }
 
 .rounded-bottom {
-  border-bottom-left-radius: var(--pa-border-radius) !important;
-  border-bottom-right-radius: var(--pa-border-radius) !important;
+  border-bottom-left-radius: var(--pc-border-radius) !important;
+  border-bottom-right-radius: var(--pc-border-radius) !important;
 }
 
 .rounded-left {
-  border-top-left-radius: var(--pa-border-radius) !important;
-  border-bottom-left-radius: var(--pa-border-radius) !important;
+  border-top-left-radius: var(--pc-border-radius) !important;
+  border-bottom-left-radius: var(--pc-border-radius) !important;
 }
 
 .rounded-right {
-  border-top-right-radius: var(--pa-border-radius) !important;
-  border-bottom-right-radius: var(--pa-border-radius) !important;
+  border-top-right-radius: var(--pc-border-radius) !important;
+  border-bottom-right-radius: var(--pc-border-radius) !important;
 }
 
 .shadow-none {
@@ -4667,7 +5937,7 @@ label {
   row-gap: 5rem !important;
 }
 
-.pa-cq {
+.pc-cq {
   container-type: inline-size;
 }
 
@@ -4767,201 +6037,45 @@ label {
   --base-border-radius-md: 0.6;
   --base-border-radius-lg: 0.8;
   color-scheme: light;
-  --pa-main-bg: #f8f9fa;
-  --pa-page-bg: #f8f9fa;
-  --pa-subtle-bg: #ffffff;
-  --pa-text-color-1: #2c3e50;
-  --pa-text-color-2: #6c757d;
-  --pa-accent: #007bff;
-  --pa-accent-hover: rgba(0, 123, 255, 0.12);
-  --pa-accent-light: color-mix(in srgb, var(--pa-accent) 5%, transparent);
-  --pa-link-color: var(--pa-accent);
-  --pa-link-color-hover: color-mix(in srgb, var(--pa-link-color), currentColor 50%);
-  --pa-link-color-visited: var(--pa-link-color);
-  --pa-border-color: var(--base-border-color, #e1e5e9);
-  --pa-success: #22c55e;
-  --pa-warning: #f97316;
-  --pa-danger: #ef4444;
-  --pa-info: #17a2b8;
-  --pa-very-positive: #16a34a;
-  --pa-positive: var(--pa-success);
-  --pa-neutral: #9ca3af;
-  --pa-negative: var(--pa-danger);
-  --pa-very-negative: #dc2626;
-  --pa-chart-trendline-height: 3rem;
-  --pa-chart-trendline-stroke: 2.1;
-  --pa-detail-bg: rgba(15, 17, 21, 0.97);
-  --pa-detail-text: #ffffff;
-  --pa-detail-row-label: rgba(255, 255, 255, 0.75);
-  --pa-detail-title: rgba(255, 255, 255, 0.55);
-  --pa-detail-shadow: 0 1.4rem 3.6rem rgba(0, 0, 0, 0.55);
-  --pa-navbar-bg: #ffffff;
-  --pa-navbar-border-color: #e1e5e9;
-  --pa-navbar-text: #2c3e50;
-  --pa-navbar-text-secondary: #6c757d;
-  --pa-navbar-profile-name-color: #2c3e50;
-  --pa-sidebar-bg: #f8f9fa;
-  --pa-sidebar-text: #2c3e50;
-  --pa-sidebar-text-secondary: #6c757d;
-  --pa-sidebar-submenu-bg: #e9ecef;
-  --pa-sidebar-submenu-hover-bg: rgb(85.5830753354%, 87.5490196078%, 89.5149638803%);
-  --pa-sidebar-submenu-active-bg: rgb(79.7936016512%, 82.5490196078%, 85.3044375645%);
-  --pa-sidebar-submenu-active-text: #2c3e50;
-  --pa-footer-bg: #ffffff;
-  --pa-footer-border-color: #e1e5e9;
-  --pa-btn-primary-bg: #007bff;
-  --pa-btn-primary-bg-hover: rgb(20%, 58.5882352941%, 100%);
-  --pa-btn-primary-bg-light: color-mix(in srgb, var(--pa-btn-primary-bg) 5%, transparent);
-  --pa-btn-primary-text: #ffffff;
-  --pa-btn-secondary-bg: #6c757d;
-  --pa-btn-secondary-bg-hover: #545b62;
-  --pa-btn-secondary-text: #ffffff;
-  --pa-btn-secondary-outline-color: var(--pa-btn-secondary-bg);
-  --pa-btn-success-bg: var(--pa-success);
-  --pa-btn-success-bg-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
-  --pa-btn-success-text: #ffffff;
-  --pa-btn-danger-bg: var(--pa-danger);
-  --pa-btn-danger-bg-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
-  --pa-btn-danger-text: #ffffff;
-  --pa-btn-warning-bg: var(--pa-warning);
-  --pa-btn-warning-bg-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
-  --pa-btn-warning-text: #212529;
-  --pa-btn-info-bg: var(--pa-info);
-  --pa-btn-info-bg-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
-  --pa-btn-info-text: #ffffff;
-  --pa-btn-light-bg: #f8f9fa;
-  --pa-btn-light-bg-hover: #e9ecef;
-  --pa-btn-light-text: #2c3e50;
-  --pa-btn-dark-bg: #343a40;
-  --pa-btn-dark-bg-hover: #1d2124;
-  --pa-btn-dark-text: #ffffff;
-  --pa-success-bg: var(--pa-success);
-  --pa-success-bg-hover: rgb(10.3896103896%, 60.1986249045%, 28.7242169595%);
-  --pa-success-bg-light: color-mix(in srgb, var(--pa-success) 10%, transparent);
-  --pa-success-bg-subtle: color-mix(in srgb, var(--pa-success) 8%, transparent);
-  --pa-success-border: color-mix(in srgb, var(--pa-success) 20%, transparent);
-  --pa-success-text: #155724;
-  --pa-success-text-light: #d4edda;
-  --pa-danger-bg: var(--pa-danger);
-  --pa-danger-bg-hover: rgb(92.1491355163%, 8.2430213465%, 8.2430213465%);
-  --pa-danger-bg-light: color-mix(in srgb, var(--pa-danger) 10%, transparent);
-  --pa-danger-bg-subtle: color-mix(in srgb, var(--pa-danger) 8%, transparent);
-  --pa-danger-border: color-mix(in srgb, var(--pa-danger) 20%, transparent);
-  --pa-danger-text: #721c24;
-  --pa-danger-text-light: #f8d7da;
-  --pa-warning-bg: var(--pa-warning);
-  --pa-warning-bg-hover: rgb(84.1086225285%, 35.7371400443%, 2.1658872754%);
-  --pa-warning-bg-light: color-mix(in srgb, var(--pa-warning) 10%, transparent);
-  --pa-warning-bg-subtle: color-mix(in srgb, var(--pa-warning) 8%, transparent);
-  --pa-warning-border: color-mix(in srgb, var(--pa-warning) 20%, transparent);
-  --pa-warning-text: #856404;
-  --pa-warning-text-light: #fff3cd;
-  --pa-info-bg: var(--pa-info);
-  --pa-info-bg-hover: rgb(6.7973856209%, 47.8772378517%, 54.3790849673%);
-  --pa-info-bg-light: color-mix(in srgb, var(--pa-info) 10%, transparent);
-  --pa-info-bg-subtle: color-mix(in srgb, var(--pa-info) 8%, transparent);
-  --pa-info-border: color-mix(in srgb, var(--pa-info) 20%, transparent);
-  --pa-info-text: #0c5460;
-  --pa-info-text-light: #d1ecf1;
-  --pa-card-bg: #ffffff;
-  --pa-card-header-bg: #f8f9fa;
-  --pa-card-footer-bg: #ffffff;
-  --pa-card-tabs-bg: #f8f9fa;
-  --pa-input-bg: #ffffff;
-  --pa-input-border: #ced4da;
-  --pa-input-text: #495057;
-  --pa-input-focus-border-color: #007bff;
-  --pa-select-focus-border-color: #007bff;
-  --pa-textarea-focus-border-color: #007bff;
-  --pa-checkbox-border-color: #e1e5e9;
-  --pa-checkbox-border-color-hover: #007bff;
-  --pa-checkbox-border-color-checked: #007bff;
-  --pa-checkbox-bg: #ffffff;
-  --pa-checkbox-bg-checked: #007bff;
-  --pa-checkbox-bg-indeterminate: #007bff;
-  --pa-checkbox-checkmark-color: white;
-  --pa-checkbox-focus-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
-  --pa-input-group-prepend-bg: #6c757d;
-  --pa-input-group-prepend-text: #6c757d;
-  --pa-input-group-append-bg: #6c757d;
-  --pa-input-group-append-text: #6c757d;
-  --pa-table-bg: #ffffff;
-  --pa-table-header-bg: #f8f9fa;
-  --pa-table-stripe: #f8f9fa;
-  --pa-table-hover-bg: #f8f9fa;
-  --pa-table-hover-accent-color: #007bff;
-  --pa-modal-overlay-bg: rgba(0, 0, 0, 0.5);
-  --pa-modal-content-bg: #ffffff;
-  --pa-badge-success-bg: #d4edda;
-  --pa-badge-success-text: #155724;
-  --pa-badge-warning-bg: #fff3cd;
-  --pa-badge-warning-text: #856404;
-  --pa-badge-info-bg: #d1ecf1;
-  --pa-badge-info-text: #0c5460;
-  --pa-badge-danger-bg: #f8d7da;
-  --pa-badge-danger-text: #721c24;
-  --pa-composite-badge-icon-bg: #6c757d;
-  --pa-composite-badge-label-bg: #e9ecef;
-  --pa-composite-badge-label-text: #2c3e50;
-  --pa-composite-badge-label-hover-bg: #e9ecef;
-  --pa-tooltip-bg: #2c3e50;
-  --pa-tooltip-text: #ffffff;
-  --pa-popover-content-bg: #ffffff;
-  --pa-popover-text-light: #ffffff;
-  --pa-popover-text-dark: #000000;
-  --pa-loader-overlay-bg: rgba(255, 255, 255, 0.8);
-  --pa-profile-overlay-bg: rgba(0, 0, 0, 0.3);
-  --pa-detail-panel-overlay-bg: rgba(0, 0, 0, 0.3);
-  --pa-detail-panel-selected-bg: rgba(0, 123, 255, 0.08);
-  --pa-detail-panel-z-index: 4500;
-  --pa-command-palette-backdrop-bg: rgba(0, 0, 0, 0.5);
-  --pa-command-palette-item-hover-bg: rgba(0, 123, 255, 0.05);
-  --pa-command-palette-item-active-bg: rgba(0, 123, 255, 0.1);
-  --pa-command-palette-highlight-bg: rgba(0, 123, 255, 0.2);
-  --pa-command-palette-highlight-text: #007bff;
-  --pa-command-palette-key-bg: #ffffff;
-  --pa-command-palette-key-text: #2c3e50;
-  --pa-command-palette-key-font-size: 1.2rem;
-  --pa-command-palette-key-font-weight: 600;
-  --pa-multiselect-dropdown-bg: #ffffff;
-  --pa-multiselect-dropdown-border: #e1e5e9;
-  --pa-multiselect-dropdown-text: #2c3e50;
-  --pa-multiselect-hint-bg: #f8f9fa;
-  --pa-multiselect-hint-border: #e1e5e9;
-  --pa-multiselect-option-hover-bg: #f8f9fa;
-  --pa-multiselect-pill-bg: rgba(0, 123, 255, 0.05);
-  --pa-multiselect-pill-border: #007bff;
-  --pa-color-1: transparent;
-  --pa-color-2: transparent;
-  --pa-color-3: transparent;
-  --pa-color-4: transparent;
-  --pa-color-5: transparent;
-  --pa-color-6: transparent;
-  --pa-color-7: transparent;
-  --pa-color-8: transparent;
-  --pa-color-9: transparent;
-  --pa-color-1-text: #ffffff;
-  --pa-color-2-text: #ffffff;
-  --pa-color-3-text: #ffffff;
-  --pa-color-4-text: #ffffff;
-  --pa-color-5-text: #ffffff;
-  --pa-color-6-text: #ffffff;
-  --pa-color-7-text: #ffffff;
-  --pa-color-8-text: #ffffff;
-  --pa-color-9-text: #ffffff;
-  --pa-border-radius-sm: 2px;
-  --pa-border-radius: 4px;
-  --pa-border-radius-lg: 8px;
-  --pa-alert-success-text: color-mix(in srgb, var(--pa-success-bg) 60%, black);
-  --pa-alert-success-bg: color-mix(in srgb, var(--pa-success-bg) 15%, transparent);
-  --pa-alert-success-border: color-mix(in srgb, var(--pa-success-bg) 30%, transparent);
-  --pa-alert-danger-text: color-mix(in srgb, var(--pa-danger-bg) 60%, black);
-  --pa-alert-danger-bg: color-mix(in srgb, var(--pa-danger-bg) 15%, transparent);
-  --pa-alert-danger-border: color-mix(in srgb, var(--pa-danger-bg) 30%, transparent);
-  --pa-alert-warning-text: color-mix(in srgb, var(--pa-warning-bg) 60%, black);
-  --pa-alert-warning-bg: color-mix(in srgb, var(--pa-warning-bg) 15%, transparent);
-  --pa-alert-warning-border: color-mix(in srgb, var(--pa-warning-bg) 30%, transparent);
-  --pa-alert-info-text: color-mix(in srgb, var(--pa-info-bg) 60%, black);
-  --pa-alert-info-bg: color-mix(in srgb, var(--pa-info-bg) 15%, transparent);
-  --pa-alert-info-border: color-mix(in srgb, var(--pa-info-bg) 30%, transparent);
+  --pc-main-bg: #f8f9fa;
+  --pc-page-bg: #f8f9fa;
+  --pc-subtle-bg: #ffffff;
+  --pc-text-color-1: #2c3e50;
+  --pc-text-color-2: #6c757d;
+  --pc-accent: #007bff;
+  --pc-accent-hover: rgba(0, 123, 255, 0.12);
+  --pc-accent-light: color-mix(in srgb, var(--pc-accent) 5%, transparent);
+  --pc-link-color: var(--pc-accent);
+  --pc-link-color-hover: color-mix(in srgb, var(--pc-link-color), currentColor 50%);
+  --pc-link-color-visited: var(--pc-link-color);
+  --pc-border-color: var(--base-border-color, #e1e5e9);
+  --pc-success: #22c55e;
+  --pc-warning: #f97316;
+  --pc-danger: #ef4444;
+  --pc-info: #17a2b8;
+  --pc-success-text: #155724;
+  --pc-danger-text: #721c24;
+  --pc-warning-text: #856404;
+  --pc-info-text: #0c5460;
+  --pc-color-1: transparent;
+  --pc-color-2: transparent;
+  --pc-color-3: transparent;
+  --pc-color-4: transparent;
+  --pc-color-5: transparent;
+  --pc-color-6: transparent;
+  --pc-color-7: transparent;
+  --pc-color-8: transparent;
+  --pc-color-9: transparent;
+  --pc-color-1-text: #ffffff;
+  --pc-color-2-text: #ffffff;
+  --pc-color-3-text: #ffffff;
+  --pc-color-4-text: #ffffff;
+  --pc-color-5-text: #ffffff;
+  --pc-color-6-text: #ffffff;
+  --pc-color-7-text: #ffffff;
+  --pc-color-8-text: #ffffff;
+  --pc-color-9-text: #ffffff;
+  --pc-border-radius-sm: 2px;
+  --pc-border-radius: 4px;
+  --pc-border-radius-lg: 8px;
 }