@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/app-plus/pages/demo/colors.css

@@ -0,0 +1,4008 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ */
+/* ============================================================
+   一、浅色模式变量
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度
+   ============================================================ */
+/* ============================================================
+   四、状态色透明度
+   ============================================================ */
+/* ============================================================
+   五、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、常用渐变色
+   ============================================================ */
+/* ============================================================
+   七、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+.prism-nav-bar[data-v-f278b148] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  background: var(--prism-bg-color-card);
+  border-bottom: 0.03125rem solid var(--prism-border-color-light);
+}
+.prism-nav-bar.glass-effect[data-v-f278b148] {
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: saturate(180%) blur(40px);
+  -webkit-backdrop-filter: saturate(180%) blur(40px);
+  border-bottom: 0.03125rem solid rgba(0, 0, 0, 0.1);
+}
+.nav-bar-content[data-v-f278b148] {
+  height: 2.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 1rem;
+}
+.nav-bar-left[data-v-f278b148] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: -0.1875rem;
+}
+.nav-bar-back[data-v-f278b148] {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+.nav-bar-back[data-v-f278b148]:active {
+  opacity: 0.7;
+  transform: scale(0.95);
+}
+.nav-bar-back .fa[data-v-f278b148] {
+  font-size: 0.875rem;
+  color: var(--prism-text-primary);
+}
+.nav-bar-icon[data-v-f278b148] {
+  width: 1.75rem;
+  height: 1.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  flex-shrink: 0;
+}
+.nav-bar-icon .fa[data-v-f278b148] {
+  font-size: 1rem;
+  line-height: 1;
+}
+.nav-bar-title[data-v-f278b148] {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+  line-height: 1;
+}
+.nav-bar-actions[data-v-f278b148] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-top: -0.1875rem;
+  /* 小程序环境下预留胶囊位置 */
+}
+
+/* 主题切换按钮 */
+.theme-btn[data-v-f278b148] {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9rem;
+  background: var(--prism-bg-color-icon-btn);
+  border: 0.03125rem solid var(--prism-border-color-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s;
+}
+.theme-btn[data-v-f278b148]:active {
+  opacity: 0.7;
+  transform: scale(0.96);
+}
+.theme-btn .fa[data-v-f278b148] {
+  color: var(--prism-warning-color);
+  font-size: 0.75rem;
+}
+
+/* 深色模式 - 毛玻璃效果 */
+.prism-nav-bar.dark-mode.glass-effect[data-v-f278b148] {
+  background: rgba(26, 26, 26, 0.4);
+  border-bottom-color: rgba(255, 255, 255, 0.12);
+}
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ */
+/* ============================================================
+   一、浅色模式变量
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度
+   ============================================================ */
+/* ============================================================
+   四、状态色透明度
+   ============================================================ */
+/* ============================================================
+   五、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、常用渐变色
+   ============================================================ */
+/* ============================================================
+   七、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+/* 右侧索引条 */
+.prism-index-bar[data-v-4b4fa71a] {
+  position: fixed;
+  right: 0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+  z-index: 999;
+  padding: 0.5rem 0.375rem;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 0.75rem;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.prism-index-item[data-v-4b4fa71a] {
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 50%;
+  border: 0.09375rem solid rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.15);
+  transition: all 0.3s ease;
+  position: relative;
+  flex-shrink: 0;
+}
+.prism-index-item[data-v-4b4fa71a]:active {
+  transform: scale(1.15);
+}
+.prism-index-item.active[data-v-4b4fa71a] {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-width: 0.125rem;
+  border-color: #FFFFFF;
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
+}
+
+/* 气泡提示 */
+.prism-index-indicator[data-v-4b4fa71a] {
+  position: fixed;
+  right: 2.5rem;
+  padding: 0.375rem 0.625rem;
+  color: #FFFFFF;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
+  animation: fadeIn-4b4fa71a 0.2s ease;
+  z-index: 1000;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+/* 气泡箭头 */
+.prism-index-indicator-arrow[data-v-4b4fa71a] {
+  position: absolute;
+  right: -0.25rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0;
+  height: 0;
+  border-left: 0.25rem solid;
+  border-top: 0.25rem solid transparent;
+  border-bottom: 0.25rem solid transparent;
+}
+@keyframes fadeIn-4b4fa71a {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+/* 深色模式适配 */
+.dark-mode.prism-index-bar .prism-index-item[data-v-4b4fa71a] {
+  border-color: rgba(0, 0, 0, 0.5);
+  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4);
+}
+.dark-mode.prism-index-bar .prism-index-item.active[data-v-4b4fa71a] {
+  border-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.6);
+}
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ */
+/* ============================================================
+   一、浅色模式变量
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度
+   ============================================================ */
+/* ============================================================
+   四、状态色透明度
+   ============================================================ */
+/* ============================================================
+   五、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、常用渐变色
+   ============================================================ */
+/* ============================================================
+   七、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+/* Demo 页面通用样式 */
+/* 注意：.page-container 和 .main-content 基础样式已在 @/styles/base.scss 中定义 */
+/* 注意：导航栏已统一使用 PrismNavBar 组件 */
+/* 注意：.card-desc 已统一在 @/styles/card.scss 中定义 */
+/**
+ * Prism UI - 卡片和容器组件样式
+ *
+ * 基础样式 .prism-card-base 定义在 @/theme/colors.scss
+ */
+/* ============================================================
+   prism-card - 卡片容器（带背景）
+
+   结构：
+   .prism-card
+     .card-title    - 卡片标题（带左侧色块）
+     .card-desc     - 卡片描述
+     内容
+   ============================================================ */
+.prism-card {
+  position: relative;
+  border-radius: 0.625rem;
+  padding: 1rem;
+  transition: all 0.2s ease;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.04);
+}
+.dark-mode .prism-card {
+  box-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.2);
+}
+.prism-card .card-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 1rem;
+  padding-left: 0.5rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.prism-card .card-title::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 0.1875rem;
+  height: 1rem;
+  background: var(--prism-primary-color, #3478F6);
+  border-radius: 0.09375rem;
+}
+.dark-mode .prism-card .card-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.prism-card .card-desc {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+}
+.dark-mode .prism-card .card-desc {
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.prism-card .subsection {
+  margin-bottom: 1rem;
+}
+.prism-card .subsection:last-child {
+  margin-bottom: 0;
+}
+.prism-card .subsection-title {
+  font-size: 0.8125rem;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 0.5rem;
+}
+.dark-mode .prism-card .subsection-title {
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.prism-card .subsection-desc {
+  font-size: 0.75rem;
+  color: var(--prism-text-secondary, #86909C);
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.5rem;
+  background: var(--prism-bg-color, #F7F8FA);
+  border-radius: 0.25rem;
+  line-height: 1.5;
+}
+.dark-mode .prism-card .subsection-desc {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+/* ============================================================
+   prism-section - 区块容器（透明背景）
+
+   结构：
+   .prism-section
+     .section-title     - 区块标题
+     .section-desc      - 区块描述
+     .subsection        - 子区块
+       .subsection-title  - 子区块标题
+       .subsection-desc   - 子区块描述
+       内容
+   ============================================================ */
+.prism-section {
+  padding: 1rem 1rem;
+}
+.prism-section + .prism-section {
+  padding-bottom: 0.5rem;
+}
+.prism-section .section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 1rem;
+}
+.dark-mode .prism-section .section-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.prism-section .section-desc {
+  font-size: 0.75rem;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+}
+.dark-mode .prism-section .section-desc {
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.prism-section .prism-card:not(.glass) {
+  margin-bottom: 1rem;
+}
+.prism-section .prism-card:not(.glass):last-child {
+  margin-bottom: 0;
+}
+.prism-section .subsection {
+  margin-bottom: 1rem;
+}
+.prism-section .subsection:last-child {
+  margin-bottom: 0;
+}
+.prism-section .subsection-title {
+  font-size: 0.8125rem;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 0.5rem;
+}
+.dark-mode .prism-section .subsection-title {
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.prism-section .subsection-desc {
+  font-size: 0.75rem;
+  color: var(--prism-text-secondary, #86909C);
+  padding: 0.5rem 0.75rem;
+  margin-bottom: 0.5rem;
+  background: var(--prism-bg-color, #F7F8FA);
+  border-radius: 0.25rem;
+  line-height: 1.5;
+}
+.dark-mode .prism-section .subsection-desc {
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+/* ============================================================
+   区块头部
+   ============================================================ */
+.prism-section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+.prism-section-title {
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.75rem 0;
+  color: var(--prism-text-primary, #1D2129);
+}
+.dark-mode .prism-section-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.prism-more-link {
+  display: flex;
+  align-items: center;
+  gap: 0.125rem;
+}
+.prism-more-link .more-text,
+.prism-more-link .more-icon {
+  font-size: 0.75rem;
+  color: var(--prism-primary-color, #3478F6);
+}
+/* ============================================================
+   prism-grid - 通用宫格布局
+
+   用法：
+   .prism-grid.col-{3|4|5}   - 指定列数（默认4列）
+
+   结构：
+   .prism-grid.col-4
+     .grid-item
+       .prism-icon.{color}
+       .grid-label
+   ============================================================ */
+.prism-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.5rem;
+}
+.prism-grid.col-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.prism-grid.col-4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+.prism-grid.col-5 {
+  grid-template-columns: repeat(5, 1fr);
+}
+.prism-grid.glass {
+  padding: 0.75rem 0.5rem;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.04);
+}
+.dark-mode .prism-grid.glass {
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.2);
+}
+.prism-grid .grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+.prism-grid .grid-item:active {
+  opacity: 0.8;
+}
+.prism-grid .grid-item .prism-icon {
+  margin-bottom: 0.375rem;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.625rem;
+}
+.prism-grid .grid-item .prism-icon .fa, .prism-grid .grid-item .prism-icon .fa-solid, .prism-grid .grid-item .prism-icon .iconfont {
+  font-size: 1rem;
+}
+.prism-grid .grid-item .prism-badge {
+  top: -0.125rem;
+  right: 0.5rem;
+}
+.prism-grid .grid-item .prism-number-badge {
+  top: -0.125rem;
+  right: 0.375rem;
+}
+.prism-grid .grid-label {
+  font-size: 0.6875rem;
+  color: var(--prism-text-primary, #1D2129);
+}
+.dark-mode .prism-grid .grid-label {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+/**
+ * Prism UI 颜色主题系统
+ * 使用 SCSS 变量定义，自动注入到所有组件
+ *
+ * 📦 包含内容：
+ * 1. 14种颜色：purple, blue, green, red, orange, cyan, yellow, pink,
+ *    magenta, indigo, teal, violet, rose, ai
+ *
+ * 2. 每种颜色的变量命名规范：$prism-{颜色}-{变体}
+ *    - $prism-purple              主色
+ *    - $prism-purple-dark         深色模式
+ *    - $prism-purple-lighter      更亮色
+ *    - $prism-purple-alpha-15     15%透明度
+ *    - $prism-purple-alpha-25     25%透明度
+ *    - $prism-purple-alpha-35     35%透明度
+ *    - $prism-purple-gradient     渐变
+ *    - $prism-purple-gradient-shadow  渐变阴影
+ *    - $prism-purple-gradient-alpha   半透明渐变
+ *
+ * 3. CSS类命名规范：.prism-{组件}-{颜色}-{形态?}
+ *    组件: icon / btn / card
+ *    颜色: purple / blue / green / red / orange / cyan / yellow / pink / magenta / indigo / teal / violet / rose / ai
+ *    形态: (无) 自适应 / solid 实心 / gradient 渐变 / glass 玻璃 / outline 轮廓
+ *
+ * 4. 自动生成的CSS类（14种颜色 × 3组件 × 5形态 = 210个类）
+ *
+ * 5. 语义化别名：primary→blue, success→green, warning→orange, danger→red, info→cyan
+ *
+ * 💡 使用方式：
+ *    @import '@/theme/colors.scss';
+ *
+ *    // HTML中使用
+ *    <view class="prism-icon-purple">...</view>
+ *    <view class="prism-btn-blue-gradient">...</view>
+ *
+ *    // SCSS中使用变量
+ *    .custom { background: $prism-violet-gradient; }
+ */
+/* ==================== 颜色变量定义 ==================== */
+/* Purple 紫色 */
+/* Blue 蓝色 */
+/* Green 绿色 */
+/* Red 红色 */
+/* Orange 橙色 */
+/* Cyan 青色 */
+/* Yellow 黄色 */
+/* Pink 粉色 */
+/* Magenta 品红色 */
+/* Indigo 靛蓝色 */
+/* Teal 青绿色 */
+/* Violet 紫罗兰色 */
+/* Rose 玫瑰色 */
+/* AI 智能辅助色（5色渐变：红→粉→玫瑰→紫→蓝） */
+/* ==================== 图标按钮 prism-icon-btn ==================== */
+.prism-icon-btn {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--prism-text-secondary, #666);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: 1.125rem;
+}
+.prism-icon-btn:active {
+  opacity: 0.7;
+  transform: scale(0.95);
+}
+.prism-icon-btn .fa, .prism-icon-btn .fa-brands, .prism-icon-btn .iconfont {
+  font-size: inherit;
+}
+.prism-icon-btn .prism-badge {
+  top: 0;
+  right: 0;
+}
+.prism-icon-btn .prism-number-badge {
+  top: -0.1875rem;
+  right: -0.1875rem;
+}
+.dark-mode .prism-icon-btn {
+  color: var(--prism-text-secondary, #999);
+}
+/* 尺寸类已由原子化修饰符替代，使用: prism-icon-btn {xs|sm|md|lg|xl} */
+/* Mixin：图标按钮颜色主题（自适应，默认形态） */
+/* 生成所有图标按钮颜色类 */
+.prism-icon-btn--purple {
+  color: #722ED1;
+  background: rgba(114, 46, 209, 0.15);
+}
+.prism-icon-btn--purple .fa, .prism-icon-btn--purple .fa-brands, .prism-icon-btn--purple .iconfont {
+  color: #722ED1;
+}
+.prism-icon-btn--purple:active {
+  background: rgba(114, 46, 209, 0.25);
+}
+.dark-mode .prism-icon-btn--purple {
+  color: #A855F7;
+  background: rgba(114, 46, 209, 0.25);
+}
+.dark-mode .prism-icon-btn--purple .fa, .dark-mode .prism-icon-btn--purple .fa-brands, .dark-mode .prism-icon-btn--purple .iconfont {
+  color: #A855F7;
+}
+.dark-mode .prism-icon-btn--purple:active {
+  background: rgba(168, 85, 247, 0.35);
+}
+.prism-icon-btn--blue, .prism-icon-btn--primary {
+  color: #3478F6;
+  background: rgba(52, 120, 246, 0.15);
+}
+.prism-icon-btn--blue .fa, .prism-icon-btn--primary .fa, .prism-icon-btn--blue .fa-brands, .prism-icon-btn--primary .fa-brands, .prism-icon-btn--blue .iconfont, .prism-icon-btn--primary .iconfont {
+  color: #3478F6;
+}
+.prism-icon-btn--blue:active, .prism-icon-btn--primary:active {
+  background: rgba(52, 120, 246, 0.25);
+}
+.dark-mode .prism-icon-btn--blue, .dark-mode .prism-icon-btn--primary {
+  color: #60A5FA;
+  background: rgba(52, 120, 246, 0.25);
+}
+.dark-mode .prism-icon-btn--blue .fa, .dark-mode .prism-icon-btn--primary .fa, .dark-mode .prism-icon-btn--blue .fa-brands, .dark-mode .prism-icon-btn--primary .fa-brands, .dark-mode .prism-icon-btn--blue .iconfont, .dark-mode .prism-icon-btn--primary .iconfont {
+  color: #60A5FA;
+}
+.dark-mode .prism-icon-btn--blue:active, .dark-mode .prism-icon-btn--primary:active {
+  background: rgba(96, 165, 250, 0.35);
+}
+.prism-icon-btn--green, .prism-icon-btn--success {
+  color: #00B42A;
+  background: rgba(0, 180, 42, 0.15);
+}
+.prism-icon-btn--green .fa, .prism-icon-btn--success .fa, .prism-icon-btn--green .fa-brands, .prism-icon-btn--success .fa-brands, .prism-icon-btn--green .iconfont, .prism-icon-btn--success .iconfont {
+  color: #00B42A;
+}
+.prism-icon-btn--green:active, .prism-icon-btn--success:active {
+  background: rgba(0, 180, 42, 0.25);
+}
+.dark-mode .prism-icon-btn--green, .dark-mode .prism-icon-btn--success {
+  color: #34D399;
+  background: rgba(0, 180, 42, 0.25);
+}
+.dark-mode .prism-icon-btn--green .fa, .dark-mode .prism-icon-btn--success .fa, .dark-mode .prism-icon-btn--green .fa-brands, .dark-mode .prism-icon-btn--success .fa-brands, .dark-mode .prism-icon-btn--green .iconfont, .dark-mode .prism-icon-btn--success .iconfont {
+  color: #34D399;
+}
+.dark-mode .prism-icon-btn--green:active, .dark-mode .prism-icon-btn--success:active {
+  background: rgba(52, 211, 153, 0.35);
+}
+.prism-icon-btn--red, .prism-icon-btn--danger {
+  color: #F53F3F;
+  background: rgba(245, 63, 63, 0.15);
+}
+.prism-icon-btn--red .fa, .prism-icon-btn--danger .fa, .prism-icon-btn--red .fa-brands, .prism-icon-btn--danger .fa-brands, .prism-icon-btn--red .iconfont, .prism-icon-btn--danger .iconfont {
+  color: #F53F3F;
+}
+.prism-icon-btn--red:active, .prism-icon-btn--danger:active {
+  background: rgba(245, 63, 63, 0.25);
+}
+.dark-mode .prism-icon-btn--red, .dark-mode .prism-icon-btn--danger {
+  color: #F87171;
+  background: rgba(245, 63, 63, 0.25);
+}
+.dark-mode .prism-icon-btn--red .fa, .dark-mode .prism-icon-btn--danger .fa, .dark-mode .prism-icon-btn--red .fa-brands, .dark-mode .prism-icon-btn--danger .fa-brands, .dark-mode .prism-icon-btn--red .iconfont, .dark-mode .prism-icon-btn--danger .iconfont {
+  color: #F87171;
+}
+.dark-mode .prism-icon-btn--red:active, .dark-mode .prism-icon-btn--danger:active {
+  background: rgba(248, 113, 113, 0.35);
+}
+.prism-icon-btn--orange, .prism-icon-btn--warning {
+  color: #FF7D00;
+  background: rgba(255, 125, 0, 0.15);
+}
+.prism-icon-btn--orange .fa, .prism-icon-btn--warning .fa, .prism-icon-btn--orange .fa-brands, .prism-icon-btn--warning .fa-brands, .prism-icon-btn--orange .iconfont, .prism-icon-btn--warning .iconfont {
+  color: #FF7D00;
+}
+.prism-icon-btn--orange:active, .prism-icon-btn--warning:active {
+  background: rgba(255, 125, 0, 0.25);
+}
+.dark-mode .prism-icon-btn--orange, .dark-mode .prism-icon-btn--warning {
+  color: #FB923C;
+  background: rgba(255, 125, 0, 0.25);
+}
+.dark-mode .prism-icon-btn--orange .fa, .dark-mode .prism-icon-btn--warning .fa, .dark-mode .prism-icon-btn--orange .fa-brands, .dark-mode .prism-icon-btn--warning .fa-brands, .dark-mode .prism-icon-btn--orange .iconfont, .dark-mode .prism-icon-btn--warning .iconfont {
+  color: #FB923C;
+}
+.dark-mode .prism-icon-btn--orange:active, .dark-mode .prism-icon-btn--warning:active {
+  background: rgba(251, 146, 60, 0.35);
+}
+.prism-icon-btn--cyan, .prism-icon-btn--info {
+  color: #14C9C9;
+  background: rgba(20, 201, 201, 0.15);
+}
+.prism-icon-btn--cyan .fa, .prism-icon-btn--info .fa, .prism-icon-btn--cyan .fa-brands, .prism-icon-btn--info .fa-brands, .prism-icon-btn--cyan .iconfont, .prism-icon-btn--info .iconfont {
+  color: #14C9C9;
+}
+.prism-icon-btn--cyan:active, .prism-icon-btn--info:active {
+  background: rgba(20, 201, 201, 0.25);
+}
+.dark-mode .prism-icon-btn--cyan, .dark-mode .prism-icon-btn--info {
+  color: #22D3EE;
+  background: rgba(20, 201, 201, 0.25);
+}
+.dark-mode .prism-icon-btn--cyan .fa, .dark-mode .prism-icon-btn--info .fa, .dark-mode .prism-icon-btn--cyan .fa-brands, .dark-mode .prism-icon-btn--info .fa-brands, .dark-mode .prism-icon-btn--cyan .iconfont, .dark-mode .prism-icon-btn--info .iconfont {
+  color: #22D3EE;
+}
+.dark-mode .prism-icon-btn--cyan:active, .dark-mode .prism-icon-btn--info:active {
+  background: rgba(34, 211, 238, 0.35);
+}
+.prism-icon-btn--yellow {
+  color: #FFB400;
+  background: rgba(255, 180, 0, 0.15);
+}
+.prism-icon-btn--yellow .fa, .prism-icon-btn--yellow .fa-brands, .prism-icon-btn--yellow .iconfont {
+  color: #FFB400;
+}
+.prism-icon-btn--yellow:active {
+  background: rgba(255, 180, 0, 0.25);
+}
+.dark-mode .prism-icon-btn--yellow {
+  color: #FCD34D;
+  background: rgba(255, 180, 0, 0.25);
+}
+.dark-mode .prism-icon-btn--yellow .fa, .dark-mode .prism-icon-btn--yellow .fa-brands, .dark-mode .prism-icon-btn--yellow .iconfont {
+  color: #FCD34D;
+}
+.dark-mode .prism-icon-btn--yellow:active {
+  background: rgba(252, 211, 77, 0.35);
+}
+.prism-icon-btn--pink {
+  color: #F53F7F;
+  background: rgba(245, 63, 127, 0.15);
+}
+.prism-icon-btn--pink .fa, .prism-icon-btn--pink .fa-brands, .prism-icon-btn--pink .iconfont {
+  color: #F53F7F;
+}
+.prism-icon-btn--pink:active {
+  background: rgba(245, 63, 127, 0.25);
+}
+.dark-mode .prism-icon-btn--pink {
+  color: #F472B6;
+  background: rgba(245, 63, 127, 0.25);
+}
+.dark-mode .prism-icon-btn--pink .fa, .dark-mode .prism-icon-btn--pink .fa-brands, .dark-mode .prism-icon-btn--pink .iconfont {
+  color: #F472B6;
+}
+.dark-mode .prism-icon-btn--pink:active {
+  background: rgba(244, 114, 182, 0.35);
+}
+.prism-icon-btn--magenta {
+  color: #EB2F96;
+  background: rgba(235, 47, 150, 0.15);
+}
+.prism-icon-btn--magenta .fa, .prism-icon-btn--magenta .fa-brands, .prism-icon-btn--magenta .iconfont {
+  color: #EB2F96;
+}
+.prism-icon-btn--magenta:active {
+  background: rgba(235, 47, 150, 0.25);
+}
+.dark-mode .prism-icon-btn--magenta {
+  color: #EC4899;
+  background: rgba(235, 47, 150, 0.25);
+}
+.dark-mode .prism-icon-btn--magenta .fa, .dark-mode .prism-icon-btn--magenta .fa-brands, .dark-mode .prism-icon-btn--magenta .iconfont {
+  color: #EC4899;
+}
+.dark-mode .prism-icon-btn--magenta:active {
+  background: rgba(236, 72, 153, 0.35);
+}
+.prism-icon-btn--indigo {
+  color: #2F54EB;
+  background: rgba(47, 84, 235, 0.15);
+}
+.prism-icon-btn--indigo .fa, .prism-icon-btn--indigo .fa-brands, .prism-icon-btn--indigo .iconfont {
+  color: #2F54EB;
+}
+.prism-icon-btn--indigo:active {
+  background: rgba(47, 84, 235, 0.25);
+}
+.dark-mode .prism-icon-btn--indigo {
+  color: #818CF8;
+  background: rgba(47, 84, 235, 0.25);
+}
+.dark-mode .prism-icon-btn--indigo .fa, .dark-mode .prism-icon-btn--indigo .fa-brands, .dark-mode .prism-icon-btn--indigo .iconfont {
+  color: #818CF8;
+}
+.dark-mode .prism-icon-btn--indigo:active {
+  background: rgba(129, 140, 248, 0.35);
+}
+.prism-icon-btn--teal {
+  color: #13C2C2;
+  background: rgba(19, 194, 194, 0.15);
+}
+.prism-icon-btn--teal .fa, .prism-icon-btn--teal .fa-brands, .prism-icon-btn--teal .iconfont {
+  color: #13C2C2;
+}
+.prism-icon-btn--teal:active {
+  background: rgba(19, 194, 194, 0.25);
+}
+.dark-mode .prism-icon-btn--teal {
+  color: #2DD4BF;
+  background: rgba(19, 194, 194, 0.25);
+}
+.dark-mode .prism-icon-btn--teal .fa, .dark-mode .prism-icon-btn--teal .fa-brands, .dark-mode .prism-icon-btn--teal .iconfont {
+  color: #2DD4BF;
+}
+.dark-mode .prism-icon-btn--teal:active {
+  background: rgba(45, 212, 191, 0.35);
+}
+.prism-icon-btn--violet {
+  color: #667eea;
+  background: rgba(102, 126, 234, 0.15);
+}
+.prism-icon-btn--violet .fa, .prism-icon-btn--violet .fa-brands, .prism-icon-btn--violet .iconfont {
+  color: #667eea;
+}
+.prism-icon-btn--violet:active {
+  background: rgba(102, 126, 234, 0.25);
+}
+.dark-mode .prism-icon-btn--violet {
+  color: #8599ee;
+  background: rgba(102, 126, 234, 0.25);
+}
+.dark-mode .prism-icon-btn--violet .fa, .dark-mode .prism-icon-btn--violet .fa-brands, .dark-mode .prism-icon-btn--violet .iconfont {
+  color: #8599ee;
+}
+.dark-mode .prism-icon-btn--violet:active {
+  background: rgba(133, 153, 238, 0.35);
+}
+.prism-icon-btn--rose {
+  color: #f093fb;
+  background: rgba(240, 147, 251, 0.15);
+}
+.prism-icon-btn--rose .fa, .prism-icon-btn--rose .fa-brands, .prism-icon-btn--rose .iconfont {
+  color: #f093fb;
+}
+.prism-icon-btn--rose:active {
+  background: rgba(240, 147, 251, 0.25);
+}
+.dark-mode .prism-icon-btn--rose {
+  color: #f5576c;
+  background: rgba(240, 147, 251, 0.25);
+}
+.dark-mode .prism-icon-btn--rose .fa, .dark-mode .prism-icon-btn--rose .fa-brands, .dark-mode .prism-icon-btn--rose .iconfont {
+  color: #f5576c;
+}
+.dark-mode .prism-icon-btn--rose:active {
+  background: rgba(245, 87, 108, 0.35);
+}
+.prism-icon-btn--ai {
+  color: #c44569;
+  background: rgba(196, 69, 105, 0.15);
+}
+.prism-icon-btn--ai .fa, .prism-icon-btn--ai .fa-brands, .prism-icon-btn--ai .iconfont {
+  color: #c44569;
+}
+.prism-icon-btn--ai:active {
+  background: rgba(196, 69, 105, 0.25);
+}
+.dark-mode .prism-icon-btn--ai {
+  color: #ee5a6f;
+  background: rgba(196, 69, 105, 0.25);
+}
+.dark-mode .prism-icon-btn--ai .fa, .dark-mode .prism-icon-btn--ai .fa-brands, .dark-mode .prism-icon-btn--ai .iconfont {
+  color: #ee5a6f;
+}
+.dark-mode .prism-icon-btn--ai:active {
+  background: rgba(238, 90, 111, 0.35);
+}
+/* 形态类已由原子化修饰符替代，使用: prism-icon-btn {color} {solid|gradient|glass|outline} */
+/* 图标按钮语义化别名 */
+/* ==================== 图标文字按钮 prism-text-btn ==================== */
+.prism-text-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  border: none;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0.5rem 0.875rem;
+  font-size: 0.875rem;
+}
+.prism-text-btn:active {
+  opacity: 0.8;
+  transform: scale(0.98);
+}
+.prism-text-btn .fa, .prism-text-btn .fa-brands, .prism-text-btn .iconfont {
+  font-size: inherit;
+}
+/* 尺寸类已由原子化修饰符替代，使用: prism-text-btn {xs|sm|md|lg|xl} */
+/* 形态类已由原子化修饰符替代，使用: prism-text-btn {color} {solid|gradient|glass|outline} */
+/* ==================== 通用原子化修饰类 ==================== */
+.prism-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.4375rem;
+}
+.prism-icon .fa, .prism-icon .fa-brands, .prism-icon .iconfont {
+  font-size: 0.9375rem;
+}
+.prism-icon .prism-badge {
+  top: 0;
+  right: 0;
+}
+.prism-icon .prism-number-badge {
+  top: -0.1875rem;
+  right: -0.1875rem;
+}
+.prism-icon.light {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+.prism-icon.light .fa, .prism-icon.light .fa-brands, .prism-icon.light .iconfont {
+  color: #ffffff;
+}
+.prism-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.875rem;
+  border-radius: 0.4375rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.prism-btn:active {
+  opacity: 0.8;
+  transform: scale(0.98);
+}
+.prism-card.glass {
+  position: relative;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(0.625rem);
+  -webkit-backdrop-filter: blur(0.625rem);
+  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.08), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.6);
+  border: 0.03125rem solid rgba(255, 255, 255, 0.3);
+}
+.prism-card.glass::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0.03125rem;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
+  z-index: 1;
+}
+.dark-mode .prism-card.glass {
+  background: rgba(40, 40, 40, 0.6);
+  border: 0.03125rem solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.05);
+}
+.dark-mode .prism-card.glass::before {
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+}
+.xs.prism-icon-btn {
+  width: 1.375rem;
+  height: 1.375rem;
+  font-size: 0.625rem;
+  border-radius: 0.25rem;
+}
+.xs.prism-text-btn {
+  padding: 0.1875rem 0.375rem;
+  font-size: 0.625rem;
+  gap: 0.1875rem;
+  border-radius: 0.25rem;
+}
+.xs.prism-btn {
+  height: 1.625rem;
+  padding: 0 0.625rem;
+  font-size: 0.6875rem;
+  border-radius: 0.3125rem;
+}
+.xs.prism-icon {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 0.25rem;
+}
+.xs.prism-icon .fa, .xs.prism-icon .fa-brands, .xs.prism-icon .iconfont {
+  font-size: 0.5625rem;
+}
+.sm.prism-icon-btn {
+  width: 1.75rem;
+  height: 1.75rem;
+  font-size: 0.75rem;
+  border-radius: 0.3125rem;
+}
+.sm.prism-text-btn {
+  padding: 0.3125rem 0.5rem;
+  font-size: 0.75rem;
+  gap: 0.25rem;
+  border-radius: 0.3125rem;
+}
+.sm.prism-btn {
+  height: 2rem;
+  padding: 0 0.75rem;
+  font-size: 0.8125rem;
+  border-radius: 0.375rem;
+}
+.sm.prism-icon {
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 0.3125rem;
+}
+.sm.prism-icon .fa, .sm.prism-icon .fa-brands, .sm.prism-icon .iconfont {
+  font-size: 0.75rem;
+}
+.md.prism-icon-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  font-size: 1rem;
+  border-radius: 0.4375rem;
+}
+.md.prism-text-btn {
+  padding: 0.5rem 0.875rem;
+  font-size: 0.875rem;
+  gap: 0.375rem;
+  border-radius: 0.4375rem;
+}
+.md.prism-btn {
+  height: 2.5rem;
+  padding: 0 1rem;
+  font-size: 0.9375rem;
+  border-radius: 0.4375rem;
+}
+.md.prism-icon {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.4375rem;
+}
+.md.prism-icon .fa, .md.prism-icon .fa-brands, .md.prism-icon .iconfont {
+  font-size: 0.9375rem;
+}
+.lg.prism-icon-btn {
+  width: 2.875rem;
+  height: 2.875rem;
+  font-size: 1.25rem;
+  border-radius: 0.5625rem;
+}
+.lg.prism-text-btn {
+  padding: 0.6875rem 1.25rem;
+  font-size: 1.0625rem;
+  gap: 0.4375rem;
+  border-radius: 0.5625rem;
+}
+.lg.prism-btn {
+  height: 3rem;
+  padding: 0 1.25rem;
+  font-size: 1.0625rem;
+  border-radius: 0.5625rem;
+}
+.lg.prism-icon {
+  width: 2.875rem;
+  height: 2.875rem;
+  border-radius: 0.5625rem;
+}
+.lg.prism-icon .fa, .lg.prism-icon .fa-brands, .lg.prism-icon .iconfont {
+  font-size: 1.1875rem;
+}
+.xl.prism-icon-btn {
+  width: 3.625rem;
+  height: 3.625rem;
+  font-size: 1.625rem;
+  border-radius: 0.6875rem;
+}
+.xl.prism-text-btn {
+  padding: 0.875rem 1.625rem;
+  font-size: 1.25rem;
+  gap: 0.5rem;
+  border-radius: 0.6875rem;
+}
+.xl.prism-btn {
+  height: 3.5rem;
+  padding: 0 1.625rem;
+  font-size: 1.25rem;
+  border-radius: 0.6875rem;
+}
+.xl.prism-icon {
+  width: 3.625rem;
+  height: 3.625rem;
+  border-radius: 0.6875rem;
+}
+.xl.prism-icon .fa, .xl.prism-icon .fa-brands, .xl.prism-icon .iconfont {
+  font-size: 1.5rem;
+}
+.round.prism-icon-btn {
+  border-radius: 50%;
+}
+.highlight {
+  position: relative;
+  overflow: hidden;
+}
+.highlight::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 0.0625rem;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+  z-index: 10;
+}
+.purple.prism-icon-btn, .purple.prism-text-btn {
+  background: #722ED1;
+  color: #FFFFFF;
+}
+.purple.prism-icon-btn .fa, .purple.prism-icon-btn .fa-brands, .purple.prism-icon-btn .iconfont, .purple.prism-text-btn .fa, .purple.prism-text-btn .fa-brands, .purple.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .purple.prism-icon-btn, .dark-mode .purple.prism-text-btn {
+  background: linear-gradient(135deg, rgba(114, 46, 209, 0.08) 0%, rgba(179, 127, 235, 0.08) 100%);
+  color: #A855F7;
+  border: 0.03125rem solid rgba(114, 46, 209, 0.35);
+}
+.dark-mode .purple.prism-icon-btn .fa, .dark-mode .purple.prism-icon-btn .fa-brands, .dark-mode .purple.prism-icon-btn .iconfont, .dark-mode .purple.prism-text-btn .fa, .dark-mode .purple.prism-text-btn .fa-brands, .dark-mode .purple.prism-text-btn .iconfont {
+  color: #A855F7;
+}
+.purple.prism-icon {
+  background: rgba(114, 46, 209, 0.15);
+}
+.purple.prism-icon .fa, .purple.prism-icon .fa-brands, .purple.prism-icon .iconfont {
+  color: #722ED1;
+}
+.dark-mode .purple.prism-icon {
+  background: rgba(114, 46, 209, 0.25);
+}
+.dark-mode .purple.prism-icon .fa, .dark-mode .purple.prism-icon .fa-brands, .dark-mode .purple.prism-icon .iconfont {
+  color: #A855F7;
+}
+.purple.prism-btn {
+  background: #722ED1;
+  color: #FFFFFF;
+}
+.dark-mode .purple.prism-btn {
+  background: linear-gradient(135deg, rgba(114, 46, 209, 0.08) 0%, rgba(179, 127, 235, 0.08) 100%);
+  color: #A855F7;
+  border: 0.03125rem solid rgba(114, 46, 209, 0.35);
+}
+.purple.prism-card {
+  background: #722ED1;
+  color: #FFFFFF;
+}
+.dark-mode .purple.prism-card {
+  background: linear-gradient(135deg, rgba(114, 46, 209, 0.08) 0%, rgba(179, 127, 235, 0.08) 100%);
+  color: #A855F7;
+  border: 0.03125rem solid rgba(114, 46, 209, 0.35);
+}
+.blue.prism-icon-btn, .prism-icon-btn.primary, .blue.prism-text-btn, .prism-text-btn.primary {
+  background: #3478F6;
+  color: #FFFFFF;
+}
+.blue.prism-icon-btn .fa, .prism-icon-btn.primary .fa, .blue.prism-icon-btn .fa-brands, .prism-icon-btn.primary .fa-brands, .blue.prism-icon-btn .iconfont, .prism-icon-btn.primary .iconfont, .blue.prism-text-btn .fa, .prism-text-btn.primary .fa, .blue.prism-text-btn .fa-brands, .prism-text-btn.primary .fa-brands, .blue.prism-text-btn .iconfont, .prism-text-btn.primary .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .blue.prism-icon-btn, .dark-mode .prism-icon-btn.primary, .dark-mode .blue.prism-text-btn, .dark-mode .prism-text-btn.primary {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%);
+  color: #60A5FA;
+  border: 0.03125rem solid rgba(52, 120, 246, 0.35);
+}
+.dark-mode .blue.prism-icon-btn .fa, .dark-mode .prism-icon-btn.primary .fa, .dark-mode .blue.prism-icon-btn .fa-brands, .dark-mode .prism-icon-btn.primary .fa-brands, .dark-mode .blue.prism-icon-btn .iconfont, .dark-mode .prism-icon-btn.primary .iconfont, .dark-mode .blue.prism-text-btn .fa, .dark-mode .prism-text-btn.primary .fa, .dark-mode .blue.prism-text-btn .fa-brands, .dark-mode .prism-text-btn.primary .fa-brands, .dark-mode .blue.prism-text-btn .iconfont, .dark-mode .prism-text-btn.primary .iconfont {
+  color: #60A5FA;
+}
+.blue.prism-icon, .prism-icon.primary {
+  background: rgba(52, 120, 246, 0.15);
+}
+.blue.prism-icon .fa, .prism-icon.primary .fa, .blue.prism-icon .fa-brands, .prism-icon.primary .fa-brands, .blue.prism-icon .iconfont, .prism-icon.primary .iconfont {
+  color: #3478F6;
+}
+.dark-mode .blue.prism-icon, .dark-mode .prism-icon.primary {
+  background: rgba(52, 120, 246, 0.25);
+}
+.dark-mode .blue.prism-icon .fa, .dark-mode .prism-icon.primary .fa, .dark-mode .blue.prism-icon .fa-brands, .dark-mode .prism-icon.primary .fa-brands, .dark-mode .blue.prism-icon .iconfont, .dark-mode .prism-icon.primary .iconfont {
+  color: #60A5FA;
+}
+.blue.prism-btn, .prism-btn.primary {
+  background: #3478F6;
+  color: #FFFFFF;
+}
+.dark-mode .blue.prism-btn, .dark-mode .prism-btn.primary {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%);
+  color: #60A5FA;
+  border: 0.03125rem solid rgba(52, 120, 246, 0.35);
+}
+.blue.prism-card, .prism-card.primary {
+  background: #3478F6;
+  color: #FFFFFF;
+}
+.dark-mode .blue.prism-card, .dark-mode .prism-card.primary {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%);
+  color: #60A5FA;
+  border: 0.03125rem solid rgba(52, 120, 246, 0.35);
+}
+.green.prism-icon-btn, .prism-icon-btn.success, .green.prism-text-btn, .prism-text-btn.success {
+  background: #00B42A;
+  color: #FFFFFF;
+}
+.green.prism-icon-btn .fa, .prism-icon-btn.success .fa, .green.prism-icon-btn .fa-brands, .prism-icon-btn.success .fa-brands, .green.prism-icon-btn .iconfont, .prism-icon-btn.success .iconfont, .green.prism-text-btn .fa, .prism-text-btn.success .fa, .green.prism-text-btn .fa-brands, .prism-text-btn.success .fa-brands, .green.prism-text-btn .iconfont, .prism-text-btn.success .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .green.prism-icon-btn, .dark-mode .prism-icon-btn.success, .dark-mode .green.prism-text-btn, .dark-mode .prism-text-btn.success {
+  background: linear-gradient(135deg, rgba(0, 180, 42, 0.08) 0%, rgba(110, 231, 183, 0.08) 100%);
+  color: #34D399;
+  border: 0.03125rem solid rgba(0, 180, 42, 0.35);
+}
+.dark-mode .green.prism-icon-btn .fa, .dark-mode .prism-icon-btn.success .fa, .dark-mode .green.prism-icon-btn .fa-brands, .dark-mode .prism-icon-btn.success .fa-brands, .dark-mode .green.prism-icon-btn .iconfont, .dark-mode .prism-icon-btn.success .iconfont, .dark-mode .green.prism-text-btn .fa, .dark-mode .prism-text-btn.success .fa, .dark-mode .green.prism-text-btn .fa-brands, .dark-mode .prism-text-btn.success .fa-brands, .dark-mode .green.prism-text-btn .iconfont, .dark-mode .prism-text-btn.success .iconfont {
+  color: #34D399;
+}
+.green.prism-icon, .prism-icon.success {
+  background: rgba(0, 180, 42, 0.15);
+}
+.green.prism-icon .fa, .prism-icon.success .fa, .green.prism-icon .fa-brands, .prism-icon.success .fa-brands, .green.prism-icon .iconfont, .prism-icon.success .iconfont {
+  color: #00B42A;
+}
+.dark-mode .green.prism-icon, .dark-mode .prism-icon.success {
+  background: rgba(0, 180, 42, 0.25);
+}
+.dark-mode .green.prism-icon .fa, .dark-mode .prism-icon.success .fa, .dark-mode .green.prism-icon .fa-brands, .dark-mode .prism-icon.success .fa-brands, .dark-mode .green.prism-icon .iconfont, .dark-mode .prism-icon.success .iconfont {
+  color: #34D399;
+}
+.green.prism-btn, .prism-btn.success {
+  background: #00B42A;
+  color: #FFFFFF;
+}
+.dark-mode .green.prism-btn, .dark-mode .prism-btn.success {
+  background: linear-gradient(135deg, rgba(0, 180, 42, 0.08) 0%, rgba(110, 231, 183, 0.08) 100%);
+  color: #34D399;
+  border: 0.03125rem solid rgba(0, 180, 42, 0.35);
+}
+.green.prism-card, .prism-card.success {
+  background: #00B42A;
+  color: #FFFFFF;
+}
+.dark-mode .green.prism-card, .dark-mode .prism-card.success {
+  background: linear-gradient(135deg, rgba(0, 180, 42, 0.08) 0%, rgba(110, 231, 183, 0.08) 100%);
+  color: #34D399;
+  border: 0.03125rem solid rgba(0, 180, 42, 0.35);
+}
+.red.prism-icon-btn, .prism-icon-btn.danger, .red.prism-text-btn, .prism-text-btn.danger {
+  background: #F53F3F;
+  color: #FFFFFF;
+}
+.red.prism-icon-btn .fa, .prism-icon-btn.danger .fa, .red.prism-icon-btn .fa-brands, .prism-icon-btn.danger .fa-brands, .red.prism-icon-btn .iconfont, .prism-icon-btn.danger .iconfont, .red.prism-text-btn .fa, .prism-text-btn.danger .fa, .red.prism-text-btn .fa-brands, .prism-text-btn.danger .fa-brands, .red.prism-text-btn .iconfont, .prism-text-btn.danger .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .red.prism-icon-btn, .dark-mode .prism-icon-btn.danger, .dark-mode .red.prism-text-btn, .dark-mode .prism-text-btn.danger {
+  background: linear-gradient(135deg, rgba(245, 63, 63, 0.08) 0%, rgba(252, 165, 165, 0.08) 100%);
+  color: #F87171;
+  border: 0.03125rem solid rgba(245, 63, 63, 0.35);
+}
+.dark-mode .red.prism-icon-btn .fa, .dark-mode .prism-icon-btn.danger .fa, .dark-mode .red.prism-icon-btn .fa-brands, .dark-mode .prism-icon-btn.danger .fa-brands, .dark-mode .red.prism-icon-btn .iconfont, .dark-mode .prism-icon-btn.danger .iconfont, .dark-mode .red.prism-text-btn .fa, .dark-mode .prism-text-btn.danger .fa, .dark-mode .red.prism-text-btn .fa-brands, .dark-mode .prism-text-btn.danger .fa-brands, .dark-mode .red.prism-text-btn .iconfont, .dark-mode .prism-text-btn.danger .iconfont {
+  color: #F87171;
+}
+.red.prism-icon, .prism-icon.danger {
+  background: rgba(245, 63, 63, 0.15);
+}
+.red.prism-icon .fa, .prism-icon.danger .fa, .red.prism-icon .fa-brands, .prism-icon.danger .fa-brands, .red.prism-icon .iconfont, .prism-icon.danger .iconfont {
+  color: #F53F3F;
+}
+.dark-mode .red.prism-icon, .dark-mode .prism-icon.danger {
+  background: rgba(245, 63, 63, 0.25);
+}
+.dark-mode .red.prism-icon .fa, .dark-mode .prism-icon.danger .fa, .dark-mode .red.prism-icon .fa-brands, .dark-mode .prism-icon.danger .fa-brands, .dark-mode .red.prism-icon .iconfont, .dark-mode .prism-icon.danger .iconfont {
+  color: #F87171;
+}
+.red.prism-btn, .prism-btn.danger {
+  background: #F53F3F;
+  color: #FFFFFF;
+}
+.dark-mode .red.prism-btn, .dark-mode .prism-btn.danger {
+  background: linear-gradient(135deg, rgba(245, 63, 63, 0.08) 0%, rgba(252, 165, 165, 0.08) 100%);
+  color: #F87171;
+  border: 0.03125rem solid rgba(245, 63, 63, 0.35);
+}
+.red.prism-card, .prism-card.danger {
+  background: #F53F3F;
+  color: #FFFFFF;
+}
+.dark-mode .red.prism-card, .dark-mode .prism-card.danger {
+  background: linear-gradient(135deg, rgba(245, 63, 63, 0.08) 0%, rgba(252, 165, 165, 0.08) 100%);
+  color: #F87171;
+  border: 0.03125rem solid rgba(245, 63, 63, 0.35);
+}
+.orange.prism-icon-btn, .prism-icon-btn.warning, .orange.prism-text-btn, .prism-text-btn.warning {
+  background: #FF7D00;
+  color: #FFFFFF;
+}
+.orange.prism-icon-btn .fa, .prism-icon-btn.warning .fa, .orange.prism-icon-btn .fa-brands, .prism-icon-btn.warning .fa-brands, .orange.prism-icon-btn .iconfont, .prism-icon-btn.warning .iconfont, .orange.prism-text-btn .fa, .prism-text-btn.warning .fa, .orange.prism-text-btn .fa-brands, .prism-text-btn.warning .fa-brands, .orange.prism-text-btn .iconfont, .prism-text-btn.warning .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .orange.prism-icon-btn, .dark-mode .prism-icon-btn.warning, .dark-mode .orange.prism-text-btn, .dark-mode .prism-text-btn.warning {
+  background: linear-gradient(135deg, rgba(255, 125, 0, 0.08) 0%, rgba(253, 186, 116, 0.08) 100%);
+  color: #FB923C;
+  border: 0.03125rem solid rgba(255, 125, 0, 0.35);
+}
+.dark-mode .orange.prism-icon-btn .fa, .dark-mode .prism-icon-btn.warning .fa, .dark-mode .orange.prism-icon-btn .fa-brands, .dark-mode .prism-icon-btn.warning .fa-brands, .dark-mode .orange.prism-icon-btn .iconfont, .dark-mode .prism-icon-btn.warning .iconfont, .dark-mode .orange.prism-text-btn .fa, .dark-mode .prism-text-btn.warning .fa, .dark-mode .orange.prism-text-btn .fa-brands, .dark-mode .prism-text-btn.warning .fa-brands, .dark-mode .orange.prism-text-btn .iconfont, .dark-mode .prism-text-btn.warning .iconfont {
+  color: #FB923C;
+}
+.orange.prism-icon, .prism-icon.warning {
+  background: rgba(255, 125, 0, 0.15);
+}
+.orange.prism-icon .fa, .prism-icon.warning .fa, .orange.prism-icon .fa-brands, .prism-icon.warning .fa-brands, .orange.prism-icon .iconfont, .prism-icon.warning .iconfont {
+  color: #FF7D00;
+}
+.dark-mode .orange.prism-icon, .dark-mode .prism-icon.warning {
+  background: rgba(255, 125, 0, 0.25);
+}
+.dark-mode .orange.prism-icon .fa, .dark-mode .prism-icon.warning .fa, .dark-mode .orange.prism-icon .fa-brands, .dark-mode .prism-icon.warning .fa-brands, .dark-mode .orange.prism-icon .iconfont, .dark-mode .prism-icon.warning .iconfont {
+  color: #FB923C;
+}
+.orange.prism-btn, .prism-btn.warning {
+  background: #FF7D00;
+  color: #FFFFFF;
+}
+.dark-mode .orange.prism-btn, .dark-mode .prism-btn.warning {
+  background: linear-gradient(135deg, rgba(255, 125, 0, 0.08) 0%, rgba(253, 186, 116, 0.08) 100%);
+  color: #FB923C;
+  border: 0.03125rem solid rgba(255, 125, 0, 0.35);
+}
+.orange.prism-card, .prism-card.warning {
+  background: #FF7D00;
+  color: #FFFFFF;
+}
+.dark-mode .orange.prism-card, .dark-mode .prism-card.warning {
+  background: linear-gradient(135deg, rgba(255, 125, 0, 0.08) 0%, rgba(253, 186, 116, 0.08) 100%);
+  color: #FB923C;
+  border: 0.03125rem solid rgba(255, 125, 0, 0.35);
+}
+.cyan.prism-icon-btn, .prism-icon-btn.info, .cyan.prism-text-btn, .prism-text-btn.info {
+  background: #14C9C9;
+  color: #FFFFFF;
+}
+.cyan.prism-icon-btn .fa, .prism-icon-btn.info .fa, .cyan.prism-icon-btn .fa-brands, .prism-icon-btn.info .fa-brands, .cyan.prism-icon-btn .iconfont, .prism-icon-btn.info .iconfont, .cyan.prism-text-btn .fa, .prism-text-btn.info .fa, .cyan.prism-text-btn .fa-brands, .prism-text-btn.info .fa-brands, .cyan.prism-text-btn .iconfont, .prism-text-btn.info .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .cyan.prism-icon-btn, .dark-mode .prism-icon-btn.info, .dark-mode .cyan.prism-text-btn, .dark-mode .prism-text-btn.info {
+  background: linear-gradient(135deg, rgba(20, 201, 201, 0.08) 0%, rgba(103, 232, 249, 0.08) 100%);
+  color: #22D3EE;
+  border: 0.03125rem solid rgba(20, 201, 201, 0.35);
+}
+.dark-mode .cyan.prism-icon-btn .fa, .dark-mode .prism-icon-btn.info .fa, .dark-mode .cyan.prism-icon-btn .fa-brands, .dark-mode .prism-icon-btn.info .fa-brands, .dark-mode .cyan.prism-icon-btn .iconfont, .dark-mode .prism-icon-btn.info .iconfont, .dark-mode .cyan.prism-text-btn .fa, .dark-mode .prism-text-btn.info .fa, .dark-mode .cyan.prism-text-btn .fa-brands, .dark-mode .prism-text-btn.info .fa-brands, .dark-mode .cyan.prism-text-btn .iconfont, .dark-mode .prism-text-btn.info .iconfont {
+  color: #22D3EE;
+}
+.cyan.prism-icon, .prism-icon.info {
+  background: rgba(20, 201, 201, 0.15);
+}
+.cyan.prism-icon .fa, .prism-icon.info .fa, .cyan.prism-icon .fa-brands, .prism-icon.info .fa-brands, .cyan.prism-icon .iconfont, .prism-icon.info .iconfont {
+  color: #14C9C9;
+}
+.dark-mode .cyan.prism-icon, .dark-mode .prism-icon.info {
+  background: rgba(20, 201, 201, 0.25);
+}
+.dark-mode .cyan.prism-icon .fa, .dark-mode .prism-icon.info .fa, .dark-mode .cyan.prism-icon .fa-brands, .dark-mode .prism-icon.info .fa-brands, .dark-mode .cyan.prism-icon .iconfont, .dark-mode .prism-icon.info .iconfont {
+  color: #22D3EE;
+}
+.cyan.prism-btn, .prism-btn.info {
+  background: #14C9C9;
+  color: #FFFFFF;
+}
+.dark-mode .cyan.prism-btn, .dark-mode .prism-btn.info {
+  background: linear-gradient(135deg, rgba(20, 201, 201, 0.08) 0%, rgba(103, 232, 249, 0.08) 100%);
+  color: #22D3EE;
+  border: 0.03125rem solid rgba(20, 201, 201, 0.35);
+}
+.cyan.prism-card, .prism-card.info {
+  background: #14C9C9;
+  color: #FFFFFF;
+}
+.dark-mode .cyan.prism-card, .dark-mode .prism-card.info {
+  background: linear-gradient(135deg, rgba(20, 201, 201, 0.08) 0%, rgba(103, 232, 249, 0.08) 100%);
+  color: #22D3EE;
+  border: 0.03125rem solid rgba(20, 201, 201, 0.35);
+}
+.yellow.prism-icon-btn, .yellow.prism-text-btn {
+  background: #FFB400;
+  color: #FFFFFF;
+}
+.yellow.prism-icon-btn .fa, .yellow.prism-icon-btn .fa-brands, .yellow.prism-icon-btn .iconfont, .yellow.prism-text-btn .fa, .yellow.prism-text-btn .fa-brands, .yellow.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .yellow.prism-icon-btn, .dark-mode .yellow.prism-text-btn {
+  background: linear-gradient(135deg, rgba(255, 180, 0, 0.08) 0%, rgba(253, 230, 138, 0.08) 100%);
+  color: #FCD34D;
+  border: 0.03125rem solid rgba(255, 180, 0, 0.35);
+}
+.dark-mode .yellow.prism-icon-btn .fa, .dark-mode .yellow.prism-icon-btn .fa-brands, .dark-mode .yellow.prism-icon-btn .iconfont, .dark-mode .yellow.prism-text-btn .fa, .dark-mode .yellow.prism-text-btn .fa-brands, .dark-mode .yellow.prism-text-btn .iconfont {
+  color: #FCD34D;
+}
+.yellow.prism-icon {
+  background: rgba(255, 180, 0, 0.15);
+}
+.yellow.prism-icon .fa, .yellow.prism-icon .fa-brands, .yellow.prism-icon .iconfont {
+  color: #FFB400;
+}
+.dark-mode .yellow.prism-icon {
+  background: rgba(255, 180, 0, 0.25);
+}
+.dark-mode .yellow.prism-icon .fa, .dark-mode .yellow.prism-icon .fa-brands, .dark-mode .yellow.prism-icon .iconfont {
+  color: #FCD34D;
+}
+.yellow.prism-btn {
+  background: #FFB400;
+  color: #FFFFFF;
+}
+.dark-mode .yellow.prism-btn {
+  background: linear-gradient(135deg, rgba(255, 180, 0, 0.08) 0%, rgba(253, 230, 138, 0.08) 100%);
+  color: #FCD34D;
+  border: 0.03125rem solid rgba(255, 180, 0, 0.35);
+}
+.yellow.prism-card {
+  background: #FFB400;
+  color: #FFFFFF;
+}
+.dark-mode .yellow.prism-card {
+  background: linear-gradient(135deg, rgba(255, 180, 0, 0.08) 0%, rgba(253, 230, 138, 0.08) 100%);
+  color: #FCD34D;
+  border: 0.03125rem solid rgba(255, 180, 0, 0.35);
+}
+.pink.prism-icon-btn, .pink.prism-text-btn {
+  background: #F53F7F;
+  color: #FFFFFF;
+}
+.pink.prism-icon-btn .fa, .pink.prism-icon-btn .fa-brands, .pink.prism-icon-btn .iconfont, .pink.prism-text-btn .fa, .pink.prism-text-btn .fa-brands, .pink.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .pink.prism-icon-btn, .dark-mode .pink.prism-text-btn {
+  background: linear-gradient(135deg, rgba(245, 63, 127, 0.08) 0%, rgba(249, 168, 212, 0.08) 100%);
+  color: #F472B6;
+  border: 0.03125rem solid rgba(245, 63, 127, 0.35);
+}
+.dark-mode .pink.prism-icon-btn .fa, .dark-mode .pink.prism-icon-btn .fa-brands, .dark-mode .pink.prism-icon-btn .iconfont, .dark-mode .pink.prism-text-btn .fa, .dark-mode .pink.prism-text-btn .fa-brands, .dark-mode .pink.prism-text-btn .iconfont {
+  color: #F472B6;
+}
+.pink.prism-icon {
+  background: rgba(245, 63, 127, 0.15);
+}
+.pink.prism-icon .fa, .pink.prism-icon .fa-brands, .pink.prism-icon .iconfont {
+  color: #F53F7F;
+}
+.dark-mode .pink.prism-icon {
+  background: rgba(245, 63, 127, 0.25);
+}
+.dark-mode .pink.prism-icon .fa, .dark-mode .pink.prism-icon .fa-brands, .dark-mode .pink.prism-icon .iconfont {
+  color: #F472B6;
+}
+.pink.prism-btn {
+  background: #F53F7F;
+  color: #FFFFFF;
+}
+.dark-mode .pink.prism-btn {
+  background: linear-gradient(135deg, rgba(245, 63, 127, 0.08) 0%, rgba(249, 168, 212, 0.08) 100%);
+  color: #F472B6;
+  border: 0.03125rem solid rgba(245, 63, 127, 0.35);
+}
+.pink.prism-card {
+  background: #F53F7F;
+  color: #FFFFFF;
+}
+.dark-mode .pink.prism-card {
+  background: linear-gradient(135deg, rgba(245, 63, 127, 0.08) 0%, rgba(249, 168, 212, 0.08) 100%);
+  color: #F472B6;
+  border: 0.03125rem solid rgba(245, 63, 127, 0.35);
+}
+.magenta.prism-icon-btn, .magenta.prism-text-btn {
+  background: #EB2F96;
+  color: #FFFFFF;
+}
+.magenta.prism-icon-btn .fa, .magenta.prism-icon-btn .fa-brands, .magenta.prism-icon-btn .iconfont, .magenta.prism-text-btn .fa, .magenta.prism-text-btn .fa-brands, .magenta.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .magenta.prism-icon-btn, .dark-mode .magenta.prism-text-btn {
+  background: linear-gradient(135deg, rgba(235, 47, 150, 0.08) 0%, rgba(244, 114, 182, 0.08) 100%);
+  color: #EC4899;
+  border: 0.03125rem solid rgba(235, 47, 150, 0.35);
+}
+.dark-mode .magenta.prism-icon-btn .fa, .dark-mode .magenta.prism-icon-btn .fa-brands, .dark-mode .magenta.prism-icon-btn .iconfont, .dark-mode .magenta.prism-text-btn .fa, .dark-mode .magenta.prism-text-btn .fa-brands, .dark-mode .magenta.prism-text-btn .iconfont {
+  color: #EC4899;
+}
+.magenta.prism-icon {
+  background: rgba(235, 47, 150, 0.15);
+}
+.magenta.prism-icon .fa, .magenta.prism-icon .fa-brands, .magenta.prism-icon .iconfont {
+  color: #EB2F96;
+}
+.dark-mode .magenta.prism-icon {
+  background: rgba(235, 47, 150, 0.25);
+}
+.dark-mode .magenta.prism-icon .fa, .dark-mode .magenta.prism-icon .fa-brands, .dark-mode .magenta.prism-icon .iconfont {
+  color: #EC4899;
+}
+.magenta.prism-btn {
+  background: #EB2F96;
+  color: #FFFFFF;
+}
+.dark-mode .magenta.prism-btn {
+  background: linear-gradient(135deg, rgba(235, 47, 150, 0.08) 0%, rgba(244, 114, 182, 0.08) 100%);
+  color: #EC4899;
+  border: 0.03125rem solid rgba(235, 47, 150, 0.35);
+}
+.magenta.prism-card {
+  background: #EB2F96;
+  color: #FFFFFF;
+}
+.dark-mode .magenta.prism-card {
+  background: linear-gradient(135deg, rgba(235, 47, 150, 0.08) 0%, rgba(244, 114, 182, 0.08) 100%);
+  color: #EC4899;
+  border: 0.03125rem solid rgba(235, 47, 150, 0.35);
+}
+.indigo.prism-icon-btn, .indigo.prism-text-btn {
+  background: #2F54EB;
+  color: #FFFFFF;
+}
+.indigo.prism-icon-btn .fa, .indigo.prism-icon-btn .fa-brands, .indigo.prism-icon-btn .iconfont, .indigo.prism-text-btn .fa, .indigo.prism-text-btn .fa-brands, .indigo.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .indigo.prism-icon-btn, .dark-mode .indigo.prism-text-btn {
+  background: linear-gradient(135deg, rgba(47, 84, 235, 0.08) 0%, rgba(165, 180, 252, 0.08) 100%);
+  color: #818CF8;
+  border: 0.03125rem solid rgba(47, 84, 235, 0.35);
+}
+.dark-mode .indigo.prism-icon-btn .fa, .dark-mode .indigo.prism-icon-btn .fa-brands, .dark-mode .indigo.prism-icon-btn .iconfont, .dark-mode .indigo.prism-text-btn .fa, .dark-mode .indigo.prism-text-btn .fa-brands, .dark-mode .indigo.prism-text-btn .iconfont {
+  color: #818CF8;
+}
+.indigo.prism-icon {
+  background: rgba(47, 84, 235, 0.15);
+}
+.indigo.prism-icon .fa, .indigo.prism-icon .fa-brands, .indigo.prism-icon .iconfont {
+  color: #2F54EB;
+}
+.dark-mode .indigo.prism-icon {
+  background: rgba(47, 84, 235, 0.25);
+}
+.dark-mode .indigo.prism-icon .fa, .dark-mode .indigo.prism-icon .fa-brands, .dark-mode .indigo.prism-icon .iconfont {
+  color: #818CF8;
+}
+.indigo.prism-btn {
+  background: #2F54EB;
+  color: #FFFFFF;
+}
+.dark-mode .indigo.prism-btn {
+  background: linear-gradient(135deg, rgba(47, 84, 235, 0.08) 0%, rgba(165, 180, 252, 0.08) 100%);
+  color: #818CF8;
+  border: 0.03125rem solid rgba(47, 84, 235, 0.35);
+}
+.indigo.prism-card {
+  background: #2F54EB;
+  color: #FFFFFF;
+}
+.dark-mode .indigo.prism-card {
+  background: linear-gradient(135deg, rgba(47, 84, 235, 0.08) 0%, rgba(165, 180, 252, 0.08) 100%);
+  color: #818CF8;
+  border: 0.03125rem solid rgba(47, 84, 235, 0.35);
+}
+.teal.prism-icon-btn, .teal.prism-text-btn {
+  background: #13C2C2;
+  color: #FFFFFF;
+}
+.teal.prism-icon-btn .fa, .teal.prism-icon-btn .fa-brands, .teal.prism-icon-btn .iconfont, .teal.prism-text-btn .fa, .teal.prism-text-btn .fa-brands, .teal.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .teal.prism-icon-btn, .dark-mode .teal.prism-text-btn {
+  background: linear-gradient(135deg, rgba(19, 194, 194, 0.08) 0%, rgba(94, 234, 212, 0.08) 100%);
+  color: #2DD4BF;
+  border: 0.03125rem solid rgba(19, 194, 194, 0.35);
+}
+.dark-mode .teal.prism-icon-btn .fa, .dark-mode .teal.prism-icon-btn .fa-brands, .dark-mode .teal.prism-icon-btn .iconfont, .dark-mode .teal.prism-text-btn .fa, .dark-mode .teal.prism-text-btn .fa-brands, .dark-mode .teal.prism-text-btn .iconfont {
+  color: #2DD4BF;
+}
+.teal.prism-icon {
+  background: rgba(19, 194, 194, 0.15);
+}
+.teal.prism-icon .fa, .teal.prism-icon .fa-brands, .teal.prism-icon .iconfont {
+  color: #13C2C2;
+}
+.dark-mode .teal.prism-icon {
+  background: rgba(19, 194, 194, 0.25);
+}
+.dark-mode .teal.prism-icon .fa, .dark-mode .teal.prism-icon .fa-brands, .dark-mode .teal.prism-icon .iconfont {
+  color: #2DD4BF;
+}
+.teal.prism-btn {
+  background: #13C2C2;
+  color: #FFFFFF;
+}
+.dark-mode .teal.prism-btn {
+  background: linear-gradient(135deg, rgba(19, 194, 194, 0.08) 0%, rgba(94, 234, 212, 0.08) 100%);
+  color: #2DD4BF;
+  border: 0.03125rem solid rgba(19, 194, 194, 0.35);
+}
+.teal.prism-card {
+  background: #13C2C2;
+  color: #FFFFFF;
+}
+.dark-mode .teal.prism-card {
+  background: linear-gradient(135deg, rgba(19, 194, 194, 0.08) 0%, rgba(94, 234, 212, 0.08) 100%);
+  color: #2DD4BF;
+  border: 0.03125rem solid rgba(19, 194, 194, 0.35);
+}
+.violet.prism-icon-btn, .violet.prism-text-btn {
+  background: #667eea;
+  color: #FFFFFF;
+}
+.violet.prism-icon-btn .fa, .violet.prism-icon-btn .fa-brands, .violet.prism-icon-btn .iconfont, .violet.prism-text-btn .fa, .violet.prism-text-btn .fa-brands, .violet.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .violet.prism-icon-btn, .dark-mode .violet.prism-text-btn {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+  color: #8599ee;
+  border: 0.03125rem solid rgba(102, 126, 234, 0.35);
+}
+.dark-mode .violet.prism-icon-btn .fa, .dark-mode .violet.prism-icon-btn .fa-brands, .dark-mode .violet.prism-icon-btn .iconfont, .dark-mode .violet.prism-text-btn .fa, .dark-mode .violet.prism-text-btn .fa-brands, .dark-mode .violet.prism-text-btn .iconfont {
+  color: #8599ee;
+}
+.violet.prism-icon {
+  background: rgba(102, 126, 234, 0.15);
+}
+.violet.prism-icon .fa, .violet.prism-icon .fa-brands, .violet.prism-icon .iconfont {
+  color: #667eea;
+}
+.dark-mode .violet.prism-icon {
+  background: rgba(102, 126, 234, 0.25);
+}
+.dark-mode .violet.prism-icon .fa, .dark-mode .violet.prism-icon .fa-brands, .dark-mode .violet.prism-icon .iconfont {
+  color: #8599ee;
+}
+.violet.prism-btn {
+  background: #667eea;
+  color: #FFFFFF;
+}
+.dark-mode .violet.prism-btn {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+  color: #8599ee;
+  border: 0.03125rem solid rgba(102, 126, 234, 0.35);
+}
+.violet.prism-card {
+  background: #667eea;
+  color: #FFFFFF;
+}
+.dark-mode .violet.prism-card {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
+  color: #8599ee;
+  border: 0.03125rem solid rgba(102, 126, 234, 0.35);
+}
+.rose.prism-icon-btn, .rose.prism-text-btn {
+  background: #f093fb;
+  color: #FFFFFF;
+}
+.rose.prism-icon-btn .fa, .rose.prism-icon-btn .fa-brands, .rose.prism-icon-btn .iconfont, .rose.prism-text-btn .fa, .rose.prism-text-btn .fa-brands, .rose.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .rose.prism-icon-btn, .dark-mode .rose.prism-text-btn {
+  background: linear-gradient(135deg, rgba(240, 147, 251, 0.08) 0%, rgba(245, 87, 108, 0.08) 100%);
+  color: #f5576c;
+  border: 0.03125rem solid rgba(240, 147, 251, 0.35);
+}
+.dark-mode .rose.prism-icon-btn .fa, .dark-mode .rose.prism-icon-btn .fa-brands, .dark-mode .rose.prism-icon-btn .iconfont, .dark-mode .rose.prism-text-btn .fa, .dark-mode .rose.prism-text-btn .fa-brands, .dark-mode .rose.prism-text-btn .iconfont {
+  color: #f5576c;
+}
+.rose.prism-icon {
+  background: rgba(240, 147, 251, 0.15);
+}
+.rose.prism-icon .fa, .rose.prism-icon .fa-brands, .rose.prism-icon .iconfont {
+  color: #f093fb;
+}
+.dark-mode .rose.prism-icon {
+  background: rgba(240, 147, 251, 0.25);
+}
+.dark-mode .rose.prism-icon .fa, .dark-mode .rose.prism-icon .fa-brands, .dark-mode .rose.prism-icon .iconfont {
+  color: #f5576c;
+}
+.rose.prism-btn {
+  background: #f093fb;
+  color: #FFFFFF;
+}
+.dark-mode .rose.prism-btn {
+  background: linear-gradient(135deg, rgba(240, 147, 251, 0.08) 0%, rgba(245, 87, 108, 0.08) 100%);
+  color: #f5576c;
+  border: 0.03125rem solid rgba(240, 147, 251, 0.35);
+}
+.rose.prism-card {
+  background: #f093fb;
+  color: #FFFFFF;
+}
+.dark-mode .rose.prism-card {
+  background: linear-gradient(135deg, rgba(240, 147, 251, 0.08) 0%, rgba(245, 87, 108, 0.08) 100%);
+  color: #f5576c;
+  border: 0.03125rem solid rgba(240, 147, 251, 0.35);
+}
+.ai.prism-icon-btn, .ai.prism-text-btn {
+  background: #c44569;
+  color: #FFFFFF;
+}
+.ai.prism-icon-btn .fa, .ai.prism-icon-btn .fa-brands, .ai.prism-icon-btn .iconfont, .ai.prism-text-btn .fa, .ai.prism-text-btn .fa-brands, .ai.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .ai.prism-icon-btn, .dark-mode .ai.prism-text-btn {
+  background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(238, 90, 111, 0.08) 25%, rgba(196, 69, 105, 0.08) 50%, rgba(118, 75, 162, 0.08) 75%, rgba(102, 126, 234, 0.08) 100%);
+  color: #ee5a6f;
+  border: 0.03125rem solid rgba(196, 69, 105, 0.35);
+}
+.dark-mode .ai.prism-icon-btn .fa, .dark-mode .ai.prism-icon-btn .fa-brands, .dark-mode .ai.prism-icon-btn .iconfont, .dark-mode .ai.prism-text-btn .fa, .dark-mode .ai.prism-text-btn .fa-brands, .dark-mode .ai.prism-text-btn .iconfont {
+  color: #ee5a6f;
+}
+.ai.prism-icon {
+  background: rgba(196, 69, 105, 0.15);
+}
+.ai.prism-icon .fa, .ai.prism-icon .fa-brands, .ai.prism-icon .iconfont {
+  color: #c44569;
+}
+.dark-mode .ai.prism-icon {
+  background: rgba(196, 69, 105, 0.25);
+}
+.dark-mode .ai.prism-icon .fa, .dark-mode .ai.prism-icon .fa-brands, .dark-mode .ai.prism-icon .iconfont {
+  color: #ee5a6f;
+}
+.ai.prism-btn {
+  background: #c44569;
+  color: #FFFFFF;
+}
+.dark-mode .ai.prism-btn {
+  background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(238, 90, 111, 0.08) 25%, rgba(196, 69, 105, 0.08) 50%, rgba(118, 75, 162, 0.08) 75%, rgba(102, 126, 234, 0.08) 100%);
+  color: #ee5a6f;
+  border: 0.03125rem solid rgba(196, 69, 105, 0.35);
+}
+.ai.prism-card {
+  background: #c44569;
+  color: #FFFFFF;
+}
+.dark-mode .ai.prism-card {
+  background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(238, 90, 111, 0.08) 25%, rgba(196, 69, 105, 0.08) 50%, rgba(118, 75, 162, 0.08) 75%, rgba(102, 126, 234, 0.08) 100%);
+  color: #ee5a6f;
+  border: 0.03125rem solid rgba(196, 69, 105, 0.35);
+}
+.purple.solid.prism-icon-btn, .purple.solid.prism-text-btn, .purple.solid.prism-icon, .purple.solid.prism-btn, .purple.solid.prism-card {
+  background: #722ED1 !important;
+  color: #FFFFFF !important;
+}
+.purple.solid.prism-icon-btn .fa, .purple.solid.prism-icon-btn .fa-brands, .purple.solid.prism-icon-btn .iconfont, .purple.solid.prism-text-btn .fa, .purple.solid.prism-text-btn .fa-brands, .purple.solid.prism-text-btn .iconfont, .purple.solid.prism-icon .fa, .purple.solid.prism-icon .fa-brands, .purple.solid.prism-icon .iconfont, .purple.solid.prism-btn .fa, .purple.solid.prism-btn .fa-brands, .purple.solid.prism-btn .iconfont, .purple.solid.prism-card .fa, .purple.solid.prism-card .fa-brands, .purple.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.blue.solid.prism-icon-btn, .solid.prism-icon-btn.primary, .blue.solid.prism-text-btn, .solid.prism-text-btn.primary, .blue.solid.prism-icon, .solid.prism-icon.primary, .blue.solid.prism-btn, .solid.prism-btn.primary, .blue.solid.prism-card, .solid.prism-card.primary {
+  background: #3478F6 !important;
+  color: #FFFFFF !important;
+}
+.blue.solid.prism-icon-btn .fa, .solid.prism-icon-btn.primary .fa, .blue.solid.prism-icon-btn .fa-brands, .solid.prism-icon-btn.primary .fa-brands, .blue.solid.prism-icon-btn .iconfont, .solid.prism-icon-btn.primary .iconfont, .blue.solid.prism-text-btn .fa, .solid.prism-text-btn.primary .fa, .blue.solid.prism-text-btn .fa-brands, .solid.prism-text-btn.primary .fa-brands, .blue.solid.prism-text-btn .iconfont, .solid.prism-text-btn.primary .iconfont, .blue.solid.prism-icon .fa, .solid.prism-icon.primary .fa, .blue.solid.prism-icon .fa-brands, .solid.prism-icon.primary .fa-brands, .blue.solid.prism-icon .iconfont, .solid.prism-icon.primary .iconfont, .blue.solid.prism-btn .fa, .solid.prism-btn.primary .fa, .blue.solid.prism-btn .fa-brands, .solid.prism-btn.primary .fa-brands, .blue.solid.prism-btn .iconfont, .solid.prism-btn.primary .iconfont, .blue.solid.prism-card .fa, .solid.prism-card.primary .fa, .blue.solid.prism-card .fa-brands, .solid.prism-card.primary .fa-brands, .blue.solid.prism-card .iconfont, .solid.prism-card.primary .iconfont {
+  color: #FFFFFF !important;
+}
+.green.solid.prism-icon-btn, .solid.prism-icon-btn.success, .green.solid.prism-text-btn, .solid.prism-text-btn.success, .green.solid.prism-icon, .solid.prism-icon.success, .green.solid.prism-btn, .solid.prism-btn.success, .green.solid.prism-card, .solid.prism-card.success {
+  background: #00B42A !important;
+  color: #FFFFFF !important;
+}
+.green.solid.prism-icon-btn .fa, .solid.prism-icon-btn.success .fa, .green.solid.prism-icon-btn .fa-brands, .solid.prism-icon-btn.success .fa-brands, .green.solid.prism-icon-btn .iconfont, .solid.prism-icon-btn.success .iconfont, .green.solid.prism-text-btn .fa, .solid.prism-text-btn.success .fa, .green.solid.prism-text-btn .fa-brands, .solid.prism-text-btn.success .fa-brands, .green.solid.prism-text-btn .iconfont, .solid.prism-text-btn.success .iconfont, .green.solid.prism-icon .fa, .solid.prism-icon.success .fa, .green.solid.prism-icon .fa-brands, .solid.prism-icon.success .fa-brands, .green.solid.prism-icon .iconfont, .solid.prism-icon.success .iconfont, .green.solid.prism-btn .fa, .solid.prism-btn.success .fa, .green.solid.prism-btn .fa-brands, .solid.prism-btn.success .fa-brands, .green.solid.prism-btn .iconfont, .solid.prism-btn.success .iconfont, .green.solid.prism-card .fa, .solid.prism-card.success .fa, .green.solid.prism-card .fa-brands, .solid.prism-card.success .fa-brands, .green.solid.prism-card .iconfont, .solid.prism-card.success .iconfont {
+  color: #FFFFFF !important;
+}
+.red.solid.prism-icon-btn, .solid.prism-icon-btn.danger, .red.solid.prism-text-btn, .solid.prism-text-btn.danger, .red.solid.prism-icon, .solid.prism-icon.danger, .red.solid.prism-btn, .solid.prism-btn.danger, .red.solid.prism-card, .solid.prism-card.danger {
+  background: #F53F3F !important;
+  color: #FFFFFF !important;
+}
+.red.solid.prism-icon-btn .fa, .solid.prism-icon-btn.danger .fa, .red.solid.prism-icon-btn .fa-brands, .solid.prism-icon-btn.danger .fa-brands, .red.solid.prism-icon-btn .iconfont, .solid.prism-icon-btn.danger .iconfont, .red.solid.prism-text-btn .fa, .solid.prism-text-btn.danger .fa, .red.solid.prism-text-btn .fa-brands, .solid.prism-text-btn.danger .fa-brands, .red.solid.prism-text-btn .iconfont, .solid.prism-text-btn.danger .iconfont, .red.solid.prism-icon .fa, .solid.prism-icon.danger .fa, .red.solid.prism-icon .fa-brands, .solid.prism-icon.danger .fa-brands, .red.solid.prism-icon .iconfont, .solid.prism-icon.danger .iconfont, .red.solid.prism-btn .fa, .solid.prism-btn.danger .fa, .red.solid.prism-btn .fa-brands, .solid.prism-btn.danger .fa-brands, .red.solid.prism-btn .iconfont, .solid.prism-btn.danger .iconfont, .red.solid.prism-card .fa, .solid.prism-card.danger .fa, .red.solid.prism-card .fa-brands, .solid.prism-card.danger .fa-brands, .red.solid.prism-card .iconfont, .solid.prism-card.danger .iconfont {
+  color: #FFFFFF !important;
+}
+.orange.solid.prism-icon-btn, .solid.prism-icon-btn.warning, .orange.solid.prism-text-btn, .solid.prism-text-btn.warning, .orange.solid.prism-icon, .solid.prism-icon.warning, .orange.solid.prism-btn, .solid.prism-btn.warning, .orange.solid.prism-card, .solid.prism-card.warning {
+  background: #FF7D00 !important;
+  color: #FFFFFF !important;
+}
+.orange.solid.prism-icon-btn .fa, .solid.prism-icon-btn.warning .fa, .orange.solid.prism-icon-btn .fa-brands, .solid.prism-icon-btn.warning .fa-brands, .orange.solid.prism-icon-btn .iconfont, .solid.prism-icon-btn.warning .iconfont, .orange.solid.prism-text-btn .fa, .solid.prism-text-btn.warning .fa, .orange.solid.prism-text-btn .fa-brands, .solid.prism-text-btn.warning .fa-brands, .orange.solid.prism-text-btn .iconfont, .solid.prism-text-btn.warning .iconfont, .orange.solid.prism-icon .fa, .solid.prism-icon.warning .fa, .orange.solid.prism-icon .fa-brands, .solid.prism-icon.warning .fa-brands, .orange.solid.prism-icon .iconfont, .solid.prism-icon.warning .iconfont, .orange.solid.prism-btn .fa, .solid.prism-btn.warning .fa, .orange.solid.prism-btn .fa-brands, .solid.prism-btn.warning .fa-brands, .orange.solid.prism-btn .iconfont, .solid.prism-btn.warning .iconfont, .orange.solid.prism-card .fa, .solid.prism-card.warning .fa, .orange.solid.prism-card .fa-brands, .solid.prism-card.warning .fa-brands, .orange.solid.prism-card .iconfont, .solid.prism-card.warning .iconfont {
+  color: #FFFFFF !important;
+}
+.cyan.solid.prism-icon-btn, .solid.prism-icon-btn.info, .cyan.solid.prism-text-btn, .solid.prism-text-btn.info, .cyan.solid.prism-icon, .solid.prism-icon.info, .cyan.solid.prism-btn, .solid.prism-btn.info, .cyan.solid.prism-card, .solid.prism-card.info {
+  background: #14C9C9 !important;
+  color: #FFFFFF !important;
+}
+.cyan.solid.prism-icon-btn .fa, .solid.prism-icon-btn.info .fa, .cyan.solid.prism-icon-btn .fa-brands, .solid.prism-icon-btn.info .fa-brands, .cyan.solid.prism-icon-btn .iconfont, .solid.prism-icon-btn.info .iconfont, .cyan.solid.prism-text-btn .fa, .solid.prism-text-btn.info .fa, .cyan.solid.prism-text-btn .fa-brands, .solid.prism-text-btn.info .fa-brands, .cyan.solid.prism-text-btn .iconfont, .solid.prism-text-btn.info .iconfont, .cyan.solid.prism-icon .fa, .solid.prism-icon.info .fa, .cyan.solid.prism-icon .fa-brands, .solid.prism-icon.info .fa-brands, .cyan.solid.prism-icon .iconfont, .solid.prism-icon.info .iconfont, .cyan.solid.prism-btn .fa, .solid.prism-btn.info .fa, .cyan.solid.prism-btn .fa-brands, .solid.prism-btn.info .fa-brands, .cyan.solid.prism-btn .iconfont, .solid.prism-btn.info .iconfont, .cyan.solid.prism-card .fa, .solid.prism-card.info .fa, .cyan.solid.prism-card .fa-brands, .solid.prism-card.info .fa-brands, .cyan.solid.prism-card .iconfont, .solid.prism-card.info .iconfont {
+  color: #FFFFFF !important;
+}
+.yellow.solid.prism-icon-btn, .yellow.solid.prism-text-btn, .yellow.solid.prism-icon, .yellow.solid.prism-btn, .yellow.solid.prism-card {
+  background: #FFB400 !important;
+  color: #FFFFFF !important;
+}
+.yellow.solid.prism-icon-btn .fa, .yellow.solid.prism-icon-btn .fa-brands, .yellow.solid.prism-icon-btn .iconfont, .yellow.solid.prism-text-btn .fa, .yellow.solid.prism-text-btn .fa-brands, .yellow.solid.prism-text-btn .iconfont, .yellow.solid.prism-icon .fa, .yellow.solid.prism-icon .fa-brands, .yellow.solid.prism-icon .iconfont, .yellow.solid.prism-btn .fa, .yellow.solid.prism-btn .fa-brands, .yellow.solid.prism-btn .iconfont, .yellow.solid.prism-card .fa, .yellow.solid.prism-card .fa-brands, .yellow.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.pink.solid.prism-icon-btn, .pink.solid.prism-text-btn, .pink.solid.prism-icon, .pink.solid.prism-btn, .pink.solid.prism-card {
+  background: #F53F7F !important;
+  color: #FFFFFF !important;
+}
+.pink.solid.prism-icon-btn .fa, .pink.solid.prism-icon-btn .fa-brands, .pink.solid.prism-icon-btn .iconfont, .pink.solid.prism-text-btn .fa, .pink.solid.prism-text-btn .fa-brands, .pink.solid.prism-text-btn .iconfont, .pink.solid.prism-icon .fa, .pink.solid.prism-icon .fa-brands, .pink.solid.prism-icon .iconfont, .pink.solid.prism-btn .fa, .pink.solid.prism-btn .fa-brands, .pink.solid.prism-btn .iconfont, .pink.solid.prism-card .fa, .pink.solid.prism-card .fa-brands, .pink.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.magenta.solid.prism-icon-btn, .magenta.solid.prism-text-btn, .magenta.solid.prism-icon, .magenta.solid.prism-btn, .magenta.solid.prism-card {
+  background: #EB2F96 !important;
+  color: #FFFFFF !important;
+}
+.magenta.solid.prism-icon-btn .fa, .magenta.solid.prism-icon-btn .fa-brands, .magenta.solid.prism-icon-btn .iconfont, .magenta.solid.prism-text-btn .fa, .magenta.solid.prism-text-btn .fa-brands, .magenta.solid.prism-text-btn .iconfont, .magenta.solid.prism-icon .fa, .magenta.solid.prism-icon .fa-brands, .magenta.solid.prism-icon .iconfont, .magenta.solid.prism-btn .fa, .magenta.solid.prism-btn .fa-brands, .magenta.solid.prism-btn .iconfont, .magenta.solid.prism-card .fa, .magenta.solid.prism-card .fa-brands, .magenta.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.indigo.solid.prism-icon-btn, .indigo.solid.prism-text-btn, .indigo.solid.prism-icon, .indigo.solid.prism-btn, .indigo.solid.prism-card {
+  background: #2F54EB !important;
+  color: #FFFFFF !important;
+}
+.indigo.solid.prism-icon-btn .fa, .indigo.solid.prism-icon-btn .fa-brands, .indigo.solid.prism-icon-btn .iconfont, .indigo.solid.prism-text-btn .fa, .indigo.solid.prism-text-btn .fa-brands, .indigo.solid.prism-text-btn .iconfont, .indigo.solid.prism-icon .fa, .indigo.solid.prism-icon .fa-brands, .indigo.solid.prism-icon .iconfont, .indigo.solid.prism-btn .fa, .indigo.solid.prism-btn .fa-brands, .indigo.solid.prism-btn .iconfont, .indigo.solid.prism-card .fa, .indigo.solid.prism-card .fa-brands, .indigo.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.teal.solid.prism-icon-btn, .teal.solid.prism-text-btn, .teal.solid.prism-icon, .teal.solid.prism-btn, .teal.solid.prism-card {
+  background: #13C2C2 !important;
+  color: #FFFFFF !important;
+}
+.teal.solid.prism-icon-btn .fa, .teal.solid.prism-icon-btn .fa-brands, .teal.solid.prism-icon-btn .iconfont, .teal.solid.prism-text-btn .fa, .teal.solid.prism-text-btn .fa-brands, .teal.solid.prism-text-btn .iconfont, .teal.solid.prism-icon .fa, .teal.solid.prism-icon .fa-brands, .teal.solid.prism-icon .iconfont, .teal.solid.prism-btn .fa, .teal.solid.prism-btn .fa-brands, .teal.solid.prism-btn .iconfont, .teal.solid.prism-card .fa, .teal.solid.prism-card .fa-brands, .teal.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.violet.solid.prism-icon-btn, .violet.solid.prism-text-btn, .violet.solid.prism-icon, .violet.solid.prism-btn, .violet.solid.prism-card {
+  background: #667eea !important;
+  color: #FFFFFF !important;
+}
+.violet.solid.prism-icon-btn .fa, .violet.solid.prism-icon-btn .fa-brands, .violet.solid.prism-icon-btn .iconfont, .violet.solid.prism-text-btn .fa, .violet.solid.prism-text-btn .fa-brands, .violet.solid.prism-text-btn .iconfont, .violet.solid.prism-icon .fa, .violet.solid.prism-icon .fa-brands, .violet.solid.prism-icon .iconfont, .violet.solid.prism-btn .fa, .violet.solid.prism-btn .fa-brands, .violet.solid.prism-btn .iconfont, .violet.solid.prism-card .fa, .violet.solid.prism-card .fa-brands, .violet.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.rose.solid.prism-icon-btn, .rose.solid.prism-text-btn, .rose.solid.prism-icon, .rose.solid.prism-btn, .rose.solid.prism-card {
+  background: #f093fb !important;
+  color: #FFFFFF !important;
+}
+.rose.solid.prism-icon-btn .fa, .rose.solid.prism-icon-btn .fa-brands, .rose.solid.prism-icon-btn .iconfont, .rose.solid.prism-text-btn .fa, .rose.solid.prism-text-btn .fa-brands, .rose.solid.prism-text-btn .iconfont, .rose.solid.prism-icon .fa, .rose.solid.prism-icon .fa-brands, .rose.solid.prism-icon .iconfont, .rose.solid.prism-btn .fa, .rose.solid.prism-btn .fa-brands, .rose.solid.prism-btn .iconfont, .rose.solid.prism-card .fa, .rose.solid.prism-card .fa-brands, .rose.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.ai.solid.prism-icon-btn, .ai.solid.prism-text-btn, .ai.solid.prism-icon, .ai.solid.prism-btn, .ai.solid.prism-card {
+  background: #c44569 !important;
+  color: #FFFFFF !important;
+}
+.ai.solid.prism-icon-btn .fa, .ai.solid.prism-icon-btn .fa-brands, .ai.solid.prism-icon-btn .iconfont, .ai.solid.prism-text-btn .fa, .ai.solid.prism-text-btn .fa-brands, .ai.solid.prism-text-btn .iconfont, .ai.solid.prism-icon .fa, .ai.solid.prism-icon .fa-brands, .ai.solid.prism-icon .iconfont, .ai.solid.prism-btn .fa, .ai.solid.prism-btn .fa-brands, .ai.solid.prism-btn .iconfont, .ai.solid.prism-card .fa, .ai.solid.prism-card .fa-brands, .ai.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.primary.solid.prism-icon-btn, .primary.solid.prism-text-btn, .primary.solid.prism-icon, .primary.solid.prism-btn, .primary.solid.prism-card {
+  background: #3478F6 !important;
+  color: #FFFFFF !important;
+}
+.primary.solid.prism-icon-btn .fa, .primary.solid.prism-icon-btn .fa-brands, .primary.solid.prism-icon-btn .iconfont, .primary.solid.prism-text-btn .fa, .primary.solid.prism-text-btn .fa-brands, .primary.solid.prism-text-btn .iconfont, .primary.solid.prism-icon .fa, .primary.solid.prism-icon .fa-brands, .primary.solid.prism-icon .iconfont, .primary.solid.prism-btn .fa, .primary.solid.prism-btn .fa-brands, .primary.solid.prism-btn .iconfont, .primary.solid.prism-card .fa, .primary.solid.prism-card .fa-brands, .primary.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.success.solid.prism-icon-btn, .success.solid.prism-text-btn, .success.solid.prism-icon, .success.solid.prism-btn, .success.solid.prism-card {
+  background: #00B42A !important;
+  color: #FFFFFF !important;
+}
+.success.solid.prism-icon-btn .fa, .success.solid.prism-icon-btn .fa-brands, .success.solid.prism-icon-btn .iconfont, .success.solid.prism-text-btn .fa, .success.solid.prism-text-btn .fa-brands, .success.solid.prism-text-btn .iconfont, .success.solid.prism-icon .fa, .success.solid.prism-icon .fa-brands, .success.solid.prism-icon .iconfont, .success.solid.prism-btn .fa, .success.solid.prism-btn .fa-brands, .success.solid.prism-btn .iconfont, .success.solid.prism-card .fa, .success.solid.prism-card .fa-brands, .success.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.warning.solid.prism-icon-btn, .warning.solid.prism-text-btn, .warning.solid.prism-icon, .warning.solid.prism-btn, .warning.solid.prism-card {
+  background: #FF7D00 !important;
+  color: #FFFFFF !important;
+}
+.warning.solid.prism-icon-btn .fa, .warning.solid.prism-icon-btn .fa-brands, .warning.solid.prism-icon-btn .iconfont, .warning.solid.prism-text-btn .fa, .warning.solid.prism-text-btn .fa-brands, .warning.solid.prism-text-btn .iconfont, .warning.solid.prism-icon .fa, .warning.solid.prism-icon .fa-brands, .warning.solid.prism-icon .iconfont, .warning.solid.prism-btn .fa, .warning.solid.prism-btn .fa-brands, .warning.solid.prism-btn .iconfont, .warning.solid.prism-card .fa, .warning.solid.prism-card .fa-brands, .warning.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.danger.solid.prism-icon-btn, .danger.solid.prism-text-btn, .danger.solid.prism-icon, .danger.solid.prism-btn, .danger.solid.prism-card {
+  background: #F53F3F !important;
+  color: #FFFFFF !important;
+}
+.danger.solid.prism-icon-btn .fa, .danger.solid.prism-icon-btn .fa-brands, .danger.solid.prism-icon-btn .iconfont, .danger.solid.prism-text-btn .fa, .danger.solid.prism-text-btn .fa-brands, .danger.solid.prism-text-btn .iconfont, .danger.solid.prism-icon .fa, .danger.solid.prism-icon .fa-brands, .danger.solid.prism-icon .iconfont, .danger.solid.prism-btn .fa, .danger.solid.prism-btn .fa-brands, .danger.solid.prism-btn .iconfont, .danger.solid.prism-card .fa, .danger.solid.prism-card .fa-brands, .danger.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.info.solid.prism-icon-btn, .info.solid.prism-text-btn, .info.solid.prism-icon, .info.solid.prism-btn, .info.solid.prism-card {
+  background: #14C9C9 !important;
+  color: #FFFFFF !important;
+}
+.info.solid.prism-icon-btn .fa, .info.solid.prism-icon-btn .fa-brands, .info.solid.prism-icon-btn .iconfont, .info.solid.prism-text-btn .fa, .info.solid.prism-text-btn .fa-brands, .info.solid.prism-text-btn .iconfont, .info.solid.prism-icon .fa, .info.solid.prism-icon .fa-brands, .info.solid.prism-icon .iconfont, .info.solid.prism-btn .fa, .info.solid.prism-btn .fa-brands, .info.solid.prism-btn .iconfont, .info.solid.prism-card .fa, .info.solid.prism-card .fa-brands, .info.solid.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.purple.glass.prism-icon-btn, .purple.glass.prism-text-btn, .purple.glass.prism-icon, .purple.glass.prism-btn, .purple.glass.prism-card {
+  background: linear-gradient(135deg, rgba(114, 46, 209, 0.15) 0%, rgba(114, 46, 209, 0.08) 100%) !important;
+  color: #722ED1 !important;
+  border: 0.03125rem solid rgba(114, 46, 209, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(114, 46, 209, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.purple.glass.prism-icon-btn .fa, .purple.glass.prism-icon-btn .fa-brands, .purple.glass.prism-icon-btn .iconfont, .purple.glass.prism-text-btn .fa, .purple.glass.prism-text-btn .fa-brands, .purple.glass.prism-text-btn .iconfont, .purple.glass.prism-icon .fa, .purple.glass.prism-icon .fa-brands, .purple.glass.prism-icon .iconfont, .purple.glass.prism-btn .fa, .purple.glass.prism-btn .fa-brands, .purple.glass.prism-btn .iconfont, .purple.glass.prism-card .fa, .purple.glass.prism-card .fa-brands, .purple.glass.prism-card .iconfont {
+  color: #722ED1 !important;
+}
+.dark-mode .purple.glass.prism-icon-btn, .dark-mode .purple.glass.prism-text-btn, .dark-mode .purple.glass.prism-icon, .dark-mode .purple.glass.prism-btn, .dark-mode .purple.glass.prism-card {
+  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(168, 85, 247, 0.1) 100%) !important;
+  color: #A855F7 !important;
+  border-color: rgba(168, 85, 247, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(168, 85, 247, 0.3);
+}
+.dark-mode .purple.glass.prism-icon-btn .fa, .dark-mode .purple.glass.prism-icon-btn .fa-brands, .dark-mode .purple.glass.prism-icon-btn .iconfont, .dark-mode .purple.glass.prism-text-btn .fa, .dark-mode .purple.glass.prism-text-btn .fa-brands, .dark-mode .purple.glass.prism-text-btn .iconfont, .dark-mode .purple.glass.prism-icon .fa, .dark-mode .purple.glass.prism-icon .fa-brands, .dark-mode .purple.glass.prism-icon .iconfont, .dark-mode .purple.glass.prism-btn .fa, .dark-mode .purple.glass.prism-btn .fa-brands, .dark-mode .purple.glass.prism-btn .iconfont, .dark-mode .purple.glass.prism-card .fa, .dark-mode .purple.glass.prism-card .fa-brands, .dark-mode .purple.glass.prism-card .iconfont {
+  color: #A855F7 !important;
+}
+.blue.glass.prism-icon-btn, .glass.prism-icon-btn.primary, .blue.glass.prism-text-btn, .glass.prism-text-btn.primary, .blue.glass.prism-icon, .glass.prism-icon.primary, .blue.glass.prism-btn, .glass.prism-btn.primary, .blue.glass.prism-card, .glass.prism-card.primary {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.15) 0%, rgba(52, 120, 246, 0.08) 100%) !important;
+  color: #3478F6 !important;
+  border: 0.03125rem solid rgba(52, 120, 246, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(52, 120, 246, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.blue.glass.prism-icon-btn .fa, .glass.prism-icon-btn.primary .fa, .blue.glass.prism-icon-btn .fa-brands, .glass.prism-icon-btn.primary .fa-brands, .blue.glass.prism-icon-btn .iconfont, .glass.prism-icon-btn.primary .iconfont, .blue.glass.prism-text-btn .fa, .glass.prism-text-btn.primary .fa, .blue.glass.prism-text-btn .fa-brands, .glass.prism-text-btn.primary .fa-brands, .blue.glass.prism-text-btn .iconfont, .glass.prism-text-btn.primary .iconfont, .blue.glass.prism-icon .fa, .glass.prism-icon.primary .fa, .blue.glass.prism-icon .fa-brands, .glass.prism-icon.primary .fa-brands, .blue.glass.prism-icon .iconfont, .glass.prism-icon.primary .iconfont, .blue.glass.prism-btn .fa, .glass.prism-btn.primary .fa, .blue.glass.prism-btn .fa-brands, .glass.prism-btn.primary .fa-brands, .blue.glass.prism-btn .iconfont, .glass.prism-btn.primary .iconfont, .blue.glass.prism-card .fa, .glass.prism-card.primary .fa, .blue.glass.prism-card .fa-brands, .glass.prism-card.primary .fa-brands, .blue.glass.prism-card .iconfont, .glass.prism-card.primary .iconfont {
+  color: #3478F6 !important;
+}
+.dark-mode .blue.glass.prism-icon-btn, .dark-mode .glass.prism-icon-btn.primary, .dark-mode .blue.glass.prism-text-btn, .dark-mode .glass.prism-text-btn.primary, .dark-mode .blue.glass.prism-icon, .dark-mode .glass.prism-icon.primary, .dark-mode .blue.glass.prism-btn, .dark-mode .glass.prism-btn.primary, .dark-mode .blue.glass.prism-card, .dark-mode .glass.prism-card.primary {
+  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2) 0%, rgba(96, 165, 250, 0.1) 100%) !important;
+  color: #60A5FA !important;
+  border-color: rgba(96, 165, 250, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(96, 165, 250, 0.3);
+}
+.dark-mode .blue.glass.prism-icon-btn .fa, .dark-mode .glass.prism-icon-btn.primary .fa, .dark-mode .blue.glass.prism-icon-btn .fa-brands, .dark-mode .glass.prism-icon-btn.primary .fa-brands, .dark-mode .blue.glass.prism-icon-btn .iconfont, .dark-mode .glass.prism-icon-btn.primary .iconfont, .dark-mode .blue.glass.prism-text-btn .fa, .dark-mode .glass.prism-text-btn.primary .fa, .dark-mode .blue.glass.prism-text-btn .fa-brands, .dark-mode .glass.prism-text-btn.primary .fa-brands, .dark-mode .blue.glass.prism-text-btn .iconfont, .dark-mode .glass.prism-text-btn.primary .iconfont, .dark-mode .blue.glass.prism-icon .fa, .dark-mode .glass.prism-icon.primary .fa, .dark-mode .blue.glass.prism-icon .fa-brands, .dark-mode .glass.prism-icon.primary .fa-brands, .dark-mode .blue.glass.prism-icon .iconfont, .dark-mode .glass.prism-icon.primary .iconfont, .dark-mode .blue.glass.prism-btn .fa, .dark-mode .glass.prism-btn.primary .fa, .dark-mode .blue.glass.prism-btn .fa-brands, .dark-mode .glass.prism-btn.primary .fa-brands, .dark-mode .blue.glass.prism-btn .iconfont, .dark-mode .glass.prism-btn.primary .iconfont, .dark-mode .blue.glass.prism-card .fa, .dark-mode .glass.prism-card.primary .fa, .dark-mode .blue.glass.prism-card .fa-brands, .dark-mode .glass.prism-card.primary .fa-brands, .dark-mode .blue.glass.prism-card .iconfont, .dark-mode .glass.prism-card.primary .iconfont {
+  color: #60A5FA !important;
+}
+.green.glass.prism-icon-btn, .glass.prism-icon-btn.success, .green.glass.prism-text-btn, .glass.prism-text-btn.success, .green.glass.prism-icon, .glass.prism-icon.success, .green.glass.prism-btn, .glass.prism-btn.success, .green.glass.prism-card, .glass.prism-card.success {
+  background: linear-gradient(135deg, rgba(0, 180, 42, 0.15) 0%, rgba(0, 180, 42, 0.08) 100%) !important;
+  color: #00B42A !important;
+  border: 0.03125rem solid rgba(0, 180, 42, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 180, 42, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.green.glass.prism-icon-btn .fa, .glass.prism-icon-btn.success .fa, .green.glass.prism-icon-btn .fa-brands, .glass.prism-icon-btn.success .fa-brands, .green.glass.prism-icon-btn .iconfont, .glass.prism-icon-btn.success .iconfont, .green.glass.prism-text-btn .fa, .glass.prism-text-btn.success .fa, .green.glass.prism-text-btn .fa-brands, .glass.prism-text-btn.success .fa-brands, .green.glass.prism-text-btn .iconfont, .glass.prism-text-btn.success .iconfont, .green.glass.prism-icon .fa, .glass.prism-icon.success .fa, .green.glass.prism-icon .fa-brands, .glass.prism-icon.success .fa-brands, .green.glass.prism-icon .iconfont, .glass.prism-icon.success .iconfont, .green.glass.prism-btn .fa, .glass.prism-btn.success .fa, .green.glass.prism-btn .fa-brands, .glass.prism-btn.success .fa-brands, .green.glass.prism-btn .iconfont, .glass.prism-btn.success .iconfont, .green.glass.prism-card .fa, .glass.prism-card.success .fa, .green.glass.prism-card .fa-brands, .glass.prism-card.success .fa-brands, .green.glass.prism-card .iconfont, .glass.prism-card.success .iconfont {
+  color: #00B42A !important;
+}
+.dark-mode .green.glass.prism-icon-btn, .dark-mode .glass.prism-icon-btn.success, .dark-mode .green.glass.prism-text-btn, .dark-mode .glass.prism-text-btn.success, .dark-mode .green.glass.prism-icon, .dark-mode .glass.prism-icon.success, .dark-mode .green.glass.prism-btn, .dark-mode .glass.prism-btn.success, .dark-mode .green.glass.prism-card, .dark-mode .glass.prism-card.success {
+  background: linear-gradient(135deg, rgba(52, 211, 153, 0.2) 0%, rgba(52, 211, 153, 0.1) 100%) !important;
+  color: #34D399 !important;
+  border-color: rgba(52, 211, 153, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(52, 211, 153, 0.3);
+}
+.dark-mode .green.glass.prism-icon-btn .fa, .dark-mode .glass.prism-icon-btn.success .fa, .dark-mode .green.glass.prism-icon-btn .fa-brands, .dark-mode .glass.prism-icon-btn.success .fa-brands, .dark-mode .green.glass.prism-icon-btn .iconfont, .dark-mode .glass.prism-icon-btn.success .iconfont, .dark-mode .green.glass.prism-text-btn .fa, .dark-mode .glass.prism-text-btn.success .fa, .dark-mode .green.glass.prism-text-btn .fa-brands, .dark-mode .glass.prism-text-btn.success .fa-brands, .dark-mode .green.glass.prism-text-btn .iconfont, .dark-mode .glass.prism-text-btn.success .iconfont, .dark-mode .green.glass.prism-icon .fa, .dark-mode .glass.prism-icon.success .fa, .dark-mode .green.glass.prism-icon .fa-brands, .dark-mode .glass.prism-icon.success .fa-brands, .dark-mode .green.glass.prism-icon .iconfont, .dark-mode .glass.prism-icon.success .iconfont, .dark-mode .green.glass.prism-btn .fa, .dark-mode .glass.prism-btn.success .fa, .dark-mode .green.glass.prism-btn .fa-brands, .dark-mode .glass.prism-btn.success .fa-brands, .dark-mode .green.glass.prism-btn .iconfont, .dark-mode .glass.prism-btn.success .iconfont, .dark-mode .green.glass.prism-card .fa, .dark-mode .glass.prism-card.success .fa, .dark-mode .green.glass.prism-card .fa-brands, .dark-mode .glass.prism-card.success .fa-brands, .dark-mode .green.glass.prism-card .iconfont, .dark-mode .glass.prism-card.success .iconfont {
+  color: #34D399 !important;
+}
+.red.glass.prism-icon-btn, .glass.prism-icon-btn.danger, .red.glass.prism-text-btn, .glass.prism-text-btn.danger, .red.glass.prism-icon, .glass.prism-icon.danger, .red.glass.prism-btn, .glass.prism-btn.danger, .red.glass.prism-card, .glass.prism-card.danger {
+  background: linear-gradient(135deg, rgba(245, 63, 63, 0.15) 0%, rgba(245, 63, 63, 0.08) 100%) !important;
+  color: #F53F3F !important;
+  border: 0.03125rem solid rgba(245, 63, 63, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(245, 63, 63, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.red.glass.prism-icon-btn .fa, .glass.prism-icon-btn.danger .fa, .red.glass.prism-icon-btn .fa-brands, .glass.prism-icon-btn.danger .fa-brands, .red.glass.prism-icon-btn .iconfont, .glass.prism-icon-btn.danger .iconfont, .red.glass.prism-text-btn .fa, .glass.prism-text-btn.danger .fa, .red.glass.prism-text-btn .fa-brands, .glass.prism-text-btn.danger .fa-brands, .red.glass.prism-text-btn .iconfont, .glass.prism-text-btn.danger .iconfont, .red.glass.prism-icon .fa, .glass.prism-icon.danger .fa, .red.glass.prism-icon .fa-brands, .glass.prism-icon.danger .fa-brands, .red.glass.prism-icon .iconfont, .glass.prism-icon.danger .iconfont, .red.glass.prism-btn .fa, .glass.prism-btn.danger .fa, .red.glass.prism-btn .fa-brands, .glass.prism-btn.danger .fa-brands, .red.glass.prism-btn .iconfont, .glass.prism-btn.danger .iconfont, .red.glass.prism-card .fa, .glass.prism-card.danger .fa, .red.glass.prism-card .fa-brands, .glass.prism-card.danger .fa-brands, .red.glass.prism-card .iconfont, .glass.prism-card.danger .iconfont {
+  color: #F53F3F !important;
+}
+.dark-mode .red.glass.prism-icon-btn, .dark-mode .glass.prism-icon-btn.danger, .dark-mode .red.glass.prism-text-btn, .dark-mode .glass.prism-text-btn.danger, .dark-mode .red.glass.prism-icon, .dark-mode .glass.prism-icon.danger, .dark-mode .red.glass.prism-btn, .dark-mode .glass.prism-btn.danger, .dark-mode .red.glass.prism-card, .dark-mode .glass.prism-card.danger {
+  background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.1) 100%) !important;
+  color: #F87171 !important;
+  border-color: rgba(248, 113, 113, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(248, 113, 113, 0.3);
+}
+.dark-mode .red.glass.prism-icon-btn .fa, .dark-mode .glass.prism-icon-btn.danger .fa, .dark-mode .red.glass.prism-icon-btn .fa-brands, .dark-mode .glass.prism-icon-btn.danger .fa-brands, .dark-mode .red.glass.prism-icon-btn .iconfont, .dark-mode .glass.prism-icon-btn.danger .iconfont, .dark-mode .red.glass.prism-text-btn .fa, .dark-mode .glass.prism-text-btn.danger .fa, .dark-mode .red.glass.prism-text-btn .fa-brands, .dark-mode .glass.prism-text-btn.danger .fa-brands, .dark-mode .red.glass.prism-text-btn .iconfont, .dark-mode .glass.prism-text-btn.danger .iconfont, .dark-mode .red.glass.prism-icon .fa, .dark-mode .glass.prism-icon.danger .fa, .dark-mode .red.glass.prism-icon .fa-brands, .dark-mode .glass.prism-icon.danger .fa-brands, .dark-mode .red.glass.prism-icon .iconfont, .dark-mode .glass.prism-icon.danger .iconfont, .dark-mode .red.glass.prism-btn .fa, .dark-mode .glass.prism-btn.danger .fa, .dark-mode .red.glass.prism-btn .fa-brands, .dark-mode .glass.prism-btn.danger .fa-brands, .dark-mode .red.glass.prism-btn .iconfont, .dark-mode .glass.prism-btn.danger .iconfont, .dark-mode .red.glass.prism-card .fa, .dark-mode .glass.prism-card.danger .fa, .dark-mode .red.glass.prism-card .fa-brands, .dark-mode .glass.prism-card.danger .fa-brands, .dark-mode .red.glass.prism-card .iconfont, .dark-mode .glass.prism-card.danger .iconfont {
+  color: #F87171 !important;
+}
+.orange.glass.prism-icon-btn, .glass.prism-icon-btn.warning, .orange.glass.prism-text-btn, .glass.prism-text-btn.warning, .orange.glass.prism-icon, .glass.prism-icon.warning, .orange.glass.prism-btn, .glass.prism-btn.warning, .orange.glass.prism-card, .glass.prism-card.warning {
+  background: linear-gradient(135deg, rgba(255, 125, 0, 0.15) 0%, rgba(255, 125, 0, 0.08) 100%) !important;
+  color: #FF7D00 !important;
+  border: 0.03125rem solid rgba(255, 125, 0, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(255, 125, 0, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.orange.glass.prism-icon-btn .fa, .glass.prism-icon-btn.warning .fa, .orange.glass.prism-icon-btn .fa-brands, .glass.prism-icon-btn.warning .fa-brands, .orange.glass.prism-icon-btn .iconfont, .glass.prism-icon-btn.warning .iconfont, .orange.glass.prism-text-btn .fa, .glass.prism-text-btn.warning .fa, .orange.glass.prism-text-btn .fa-brands, .glass.prism-text-btn.warning .fa-brands, .orange.glass.prism-text-btn .iconfont, .glass.prism-text-btn.warning .iconfont, .orange.glass.prism-icon .fa, .glass.prism-icon.warning .fa, .orange.glass.prism-icon .fa-brands, .glass.prism-icon.warning .fa-brands, .orange.glass.prism-icon .iconfont, .glass.prism-icon.warning .iconfont, .orange.glass.prism-btn .fa, .glass.prism-btn.warning .fa, .orange.glass.prism-btn .fa-brands, .glass.prism-btn.warning .fa-brands, .orange.glass.prism-btn .iconfont, .glass.prism-btn.warning .iconfont, .orange.glass.prism-card .fa, .glass.prism-card.warning .fa, .orange.glass.prism-card .fa-brands, .glass.prism-card.warning .fa-brands, .orange.glass.prism-card .iconfont, .glass.prism-card.warning .iconfont {
+  color: #FF7D00 !important;
+}
+.dark-mode .orange.glass.prism-icon-btn, .dark-mode .glass.prism-icon-btn.warning, .dark-mode .orange.glass.prism-text-btn, .dark-mode .glass.prism-text-btn.warning, .dark-mode .orange.glass.prism-icon, .dark-mode .glass.prism-icon.warning, .dark-mode .orange.glass.prism-btn, .dark-mode .glass.prism-btn.warning, .dark-mode .orange.glass.prism-card, .dark-mode .glass.prism-card.warning {
+  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0.1) 100%) !important;
+  color: #FB923C !important;
+  border-color: rgba(251, 146, 60, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(251, 146, 60, 0.3);
+}
+.dark-mode .orange.glass.prism-icon-btn .fa, .dark-mode .glass.prism-icon-btn.warning .fa, .dark-mode .orange.glass.prism-icon-btn .fa-brands, .dark-mode .glass.prism-icon-btn.warning .fa-brands, .dark-mode .orange.glass.prism-icon-btn .iconfont, .dark-mode .glass.prism-icon-btn.warning .iconfont, .dark-mode .orange.glass.prism-text-btn .fa, .dark-mode .glass.prism-text-btn.warning .fa, .dark-mode .orange.glass.prism-text-btn .fa-brands, .dark-mode .glass.prism-text-btn.warning .fa-brands, .dark-mode .orange.glass.prism-text-btn .iconfont, .dark-mode .glass.prism-text-btn.warning .iconfont, .dark-mode .orange.glass.prism-icon .fa, .dark-mode .glass.prism-icon.warning .fa, .dark-mode .orange.glass.prism-icon .fa-brands, .dark-mode .glass.prism-icon.warning .fa-brands, .dark-mode .orange.glass.prism-icon .iconfont, .dark-mode .glass.prism-icon.warning .iconfont, .dark-mode .orange.glass.prism-btn .fa, .dark-mode .glass.prism-btn.warning .fa, .dark-mode .orange.glass.prism-btn .fa-brands, .dark-mode .glass.prism-btn.warning .fa-brands, .dark-mode .orange.glass.prism-btn .iconfont, .dark-mode .glass.prism-btn.warning .iconfont, .dark-mode .orange.glass.prism-card .fa, .dark-mode .glass.prism-card.warning .fa, .dark-mode .orange.glass.prism-card .fa-brands, .dark-mode .glass.prism-card.warning .fa-brands, .dark-mode .orange.glass.prism-card .iconfont, .dark-mode .glass.prism-card.warning .iconfont {
+  color: #FB923C !important;
+}
+.cyan.glass.prism-icon-btn, .glass.prism-icon-btn.info, .cyan.glass.prism-text-btn, .glass.prism-text-btn.info, .cyan.glass.prism-icon, .glass.prism-icon.info, .cyan.glass.prism-btn, .glass.prism-btn.info, .cyan.glass.prism-card, .glass.prism-card.info {
+  background: linear-gradient(135deg, rgba(20, 201, 201, 0.15) 0%, rgba(20, 201, 201, 0.08) 100%) !important;
+  color: #14C9C9 !important;
+  border: 0.03125rem solid rgba(20, 201, 201, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(20, 201, 201, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.cyan.glass.prism-icon-btn .fa, .glass.prism-icon-btn.info .fa, .cyan.glass.prism-icon-btn .fa-brands, .glass.prism-icon-btn.info .fa-brands, .cyan.glass.prism-icon-btn .iconfont, .glass.prism-icon-btn.info .iconfont, .cyan.glass.prism-text-btn .fa, .glass.prism-text-btn.info .fa, .cyan.glass.prism-text-btn .fa-brands, .glass.prism-text-btn.info .fa-brands, .cyan.glass.prism-text-btn .iconfont, .glass.prism-text-btn.info .iconfont, .cyan.glass.prism-icon .fa, .glass.prism-icon.info .fa, .cyan.glass.prism-icon .fa-brands, .glass.prism-icon.info .fa-brands, .cyan.glass.prism-icon .iconfont, .glass.prism-icon.info .iconfont, .cyan.glass.prism-btn .fa, .glass.prism-btn.info .fa, .cyan.glass.prism-btn .fa-brands, .glass.prism-btn.info .fa-brands, .cyan.glass.prism-btn .iconfont, .glass.prism-btn.info .iconfont, .cyan.glass.prism-card .fa, .glass.prism-card.info .fa, .cyan.glass.prism-card .fa-brands, .glass.prism-card.info .fa-brands, .cyan.glass.prism-card .iconfont, .glass.prism-card.info .iconfont {
+  color: #14C9C9 !important;
+}
+.dark-mode .cyan.glass.prism-icon-btn, .dark-mode .glass.prism-icon-btn.info, .dark-mode .cyan.glass.prism-text-btn, .dark-mode .glass.prism-text-btn.info, .dark-mode .cyan.glass.prism-icon, .dark-mode .glass.prism-icon.info, .dark-mode .cyan.glass.prism-btn, .dark-mode .glass.prism-btn.info, .dark-mode .cyan.glass.prism-card, .dark-mode .glass.prism-card.info {
+  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.1) 100%) !important;
+  color: #22D3EE !important;
+  border-color: rgba(34, 211, 238, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(34, 211, 238, 0.3);
+}
+.dark-mode .cyan.glass.prism-icon-btn .fa, .dark-mode .glass.prism-icon-btn.info .fa, .dark-mode .cyan.glass.prism-icon-btn .fa-brands, .dark-mode .glass.prism-icon-btn.info .fa-brands, .dark-mode .cyan.glass.prism-icon-btn .iconfont, .dark-mode .glass.prism-icon-btn.info .iconfont, .dark-mode .cyan.glass.prism-text-btn .fa, .dark-mode .glass.prism-text-btn.info .fa, .dark-mode .cyan.glass.prism-text-btn .fa-brands, .dark-mode .glass.prism-text-btn.info .fa-brands, .dark-mode .cyan.glass.prism-text-btn .iconfont, .dark-mode .glass.prism-text-btn.info .iconfont, .dark-mode .cyan.glass.prism-icon .fa, .dark-mode .glass.prism-icon.info .fa, .dark-mode .cyan.glass.prism-icon .fa-brands, .dark-mode .glass.prism-icon.info .fa-brands, .dark-mode .cyan.glass.prism-icon .iconfont, .dark-mode .glass.prism-icon.info .iconfont, .dark-mode .cyan.glass.prism-btn .fa, .dark-mode .glass.prism-btn.info .fa, .dark-mode .cyan.glass.prism-btn .fa-brands, .dark-mode .glass.prism-btn.info .fa-brands, .dark-mode .cyan.glass.prism-btn .iconfont, .dark-mode .glass.prism-btn.info .iconfont, .dark-mode .cyan.glass.prism-card .fa, .dark-mode .glass.prism-card.info .fa, .dark-mode .cyan.glass.prism-card .fa-brands, .dark-mode .glass.prism-card.info .fa-brands, .dark-mode .cyan.glass.prism-card .iconfont, .dark-mode .glass.prism-card.info .iconfont {
+  color: #22D3EE !important;
+}
+.yellow.glass.prism-icon-btn, .yellow.glass.prism-text-btn, .yellow.glass.prism-icon, .yellow.glass.prism-btn, .yellow.glass.prism-card {
+  background: linear-gradient(135deg, rgba(255, 180, 0, 0.15) 0%, rgba(255, 180, 0, 0.08) 100%) !important;
+  color: #FFB400 !important;
+  border: 0.03125rem solid rgba(255, 180, 0, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(255, 180, 0, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.yellow.glass.prism-icon-btn .fa, .yellow.glass.prism-icon-btn .fa-brands, .yellow.glass.prism-icon-btn .iconfont, .yellow.glass.prism-text-btn .fa, .yellow.glass.prism-text-btn .fa-brands, .yellow.glass.prism-text-btn .iconfont, .yellow.glass.prism-icon .fa, .yellow.glass.prism-icon .fa-brands, .yellow.glass.prism-icon .iconfont, .yellow.glass.prism-btn .fa, .yellow.glass.prism-btn .fa-brands, .yellow.glass.prism-btn .iconfont, .yellow.glass.prism-card .fa, .yellow.glass.prism-card .fa-brands, .yellow.glass.prism-card .iconfont {
+  color: #FFB400 !important;
+}
+.dark-mode .yellow.glass.prism-icon-btn, .dark-mode .yellow.glass.prism-text-btn, .dark-mode .yellow.glass.prism-icon, .dark-mode .yellow.glass.prism-btn, .dark-mode .yellow.glass.prism-card {
+  background: linear-gradient(135deg, rgba(252, 211, 77, 0.2) 0%, rgba(252, 211, 77, 0.1) 100%) !important;
+  color: #FCD34D !important;
+  border-color: rgba(252, 211, 77, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(252, 211, 77, 0.3);
+}
+.dark-mode .yellow.glass.prism-icon-btn .fa, .dark-mode .yellow.glass.prism-icon-btn .fa-brands, .dark-mode .yellow.glass.prism-icon-btn .iconfont, .dark-mode .yellow.glass.prism-text-btn .fa, .dark-mode .yellow.glass.prism-text-btn .fa-brands, .dark-mode .yellow.glass.prism-text-btn .iconfont, .dark-mode .yellow.glass.prism-icon .fa, .dark-mode .yellow.glass.prism-icon .fa-brands, .dark-mode .yellow.glass.prism-icon .iconfont, .dark-mode .yellow.glass.prism-btn .fa, .dark-mode .yellow.glass.prism-btn .fa-brands, .dark-mode .yellow.glass.prism-btn .iconfont, .dark-mode .yellow.glass.prism-card .fa, .dark-mode .yellow.glass.prism-card .fa-brands, .dark-mode .yellow.glass.prism-card .iconfont {
+  color: #FCD34D !important;
+}
+.pink.glass.prism-icon-btn, .pink.glass.prism-text-btn, .pink.glass.prism-icon, .pink.glass.prism-btn, .pink.glass.prism-card {
+  background: linear-gradient(135deg, rgba(245, 63, 127, 0.15) 0%, rgba(245, 63, 127, 0.08) 100%) !important;
+  color: #F53F7F !important;
+  border: 0.03125rem solid rgba(245, 63, 127, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(245, 63, 127, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.pink.glass.prism-icon-btn .fa, .pink.glass.prism-icon-btn .fa-brands, .pink.glass.prism-icon-btn .iconfont, .pink.glass.prism-text-btn .fa, .pink.glass.prism-text-btn .fa-brands, .pink.glass.prism-text-btn .iconfont, .pink.glass.prism-icon .fa, .pink.glass.prism-icon .fa-brands, .pink.glass.prism-icon .iconfont, .pink.glass.prism-btn .fa, .pink.glass.prism-btn .fa-brands, .pink.glass.prism-btn .iconfont, .pink.glass.prism-card .fa, .pink.glass.prism-card .fa-brands, .pink.glass.prism-card .iconfont {
+  color: #F53F7F !important;
+}
+.dark-mode .pink.glass.prism-icon-btn, .dark-mode .pink.glass.prism-text-btn, .dark-mode .pink.glass.prism-icon, .dark-mode .pink.glass.prism-btn, .dark-mode .pink.glass.prism-card {
+  background: linear-gradient(135deg, rgba(244, 114, 182, 0.2) 0%, rgba(244, 114, 182, 0.1) 100%) !important;
+  color: #F472B6 !important;
+  border-color: rgba(244, 114, 182, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(244, 114, 182, 0.3);
+}
+.dark-mode .pink.glass.prism-icon-btn .fa, .dark-mode .pink.glass.prism-icon-btn .fa-brands, .dark-mode .pink.glass.prism-icon-btn .iconfont, .dark-mode .pink.glass.prism-text-btn .fa, .dark-mode .pink.glass.prism-text-btn .fa-brands, .dark-mode .pink.glass.prism-text-btn .iconfont, .dark-mode .pink.glass.prism-icon .fa, .dark-mode .pink.glass.prism-icon .fa-brands, .dark-mode .pink.glass.prism-icon .iconfont, .dark-mode .pink.glass.prism-btn .fa, .dark-mode .pink.glass.prism-btn .fa-brands, .dark-mode .pink.glass.prism-btn .iconfont, .dark-mode .pink.glass.prism-card .fa, .dark-mode .pink.glass.prism-card .fa-brands, .dark-mode .pink.glass.prism-card .iconfont {
+  color: #F472B6 !important;
+}
+.magenta.glass.prism-icon-btn, .magenta.glass.prism-text-btn, .magenta.glass.prism-icon, .magenta.glass.prism-btn, .magenta.glass.prism-card {
+  background: linear-gradient(135deg, rgba(235, 47, 150, 0.15) 0%, rgba(235, 47, 150, 0.08) 100%) !important;
+  color: #EB2F96 !important;
+  border: 0.03125rem solid rgba(235, 47, 150, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(235, 47, 150, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.magenta.glass.prism-icon-btn .fa, .magenta.glass.prism-icon-btn .fa-brands, .magenta.glass.prism-icon-btn .iconfont, .magenta.glass.prism-text-btn .fa, .magenta.glass.prism-text-btn .fa-brands, .magenta.glass.prism-text-btn .iconfont, .magenta.glass.prism-icon .fa, .magenta.glass.prism-icon .fa-brands, .magenta.glass.prism-icon .iconfont, .magenta.glass.prism-btn .fa, .magenta.glass.prism-btn .fa-brands, .magenta.glass.prism-btn .iconfont, .magenta.glass.prism-card .fa, .magenta.glass.prism-card .fa-brands, .magenta.glass.prism-card .iconfont {
+  color: #EB2F96 !important;
+}
+.dark-mode .magenta.glass.prism-icon-btn, .dark-mode .magenta.glass.prism-text-btn, .dark-mode .magenta.glass.prism-icon, .dark-mode .magenta.glass.prism-btn, .dark-mode .magenta.glass.prism-card {
+  background: linear-gradient(135deg, rgba(236, 72, 153, 0.2) 0%, rgba(236, 72, 153, 0.1) 100%) !important;
+  color: #EC4899 !important;
+  border-color: rgba(236, 72, 153, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(236, 72, 153, 0.3);
+}
+.dark-mode .magenta.glass.prism-icon-btn .fa, .dark-mode .magenta.glass.prism-icon-btn .fa-brands, .dark-mode .magenta.glass.prism-icon-btn .iconfont, .dark-mode .magenta.glass.prism-text-btn .fa, .dark-mode .magenta.glass.prism-text-btn .fa-brands, .dark-mode .magenta.glass.prism-text-btn .iconfont, .dark-mode .magenta.glass.prism-icon .fa, .dark-mode .magenta.glass.prism-icon .fa-brands, .dark-mode .magenta.glass.prism-icon .iconfont, .dark-mode .magenta.glass.prism-btn .fa, .dark-mode .magenta.glass.prism-btn .fa-brands, .dark-mode .magenta.glass.prism-btn .iconfont, .dark-mode .magenta.glass.prism-card .fa, .dark-mode .magenta.glass.prism-card .fa-brands, .dark-mode .magenta.glass.prism-card .iconfont {
+  color: #EC4899 !important;
+}
+.indigo.glass.prism-icon-btn, .indigo.glass.prism-text-btn, .indigo.glass.prism-icon, .indigo.glass.prism-btn, .indigo.glass.prism-card {
+  background: linear-gradient(135deg, rgba(47, 84, 235, 0.15) 0%, rgba(47, 84, 235, 0.08) 100%) !important;
+  color: #2F54EB !important;
+  border: 0.03125rem solid rgba(47, 84, 235, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(47, 84, 235, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.indigo.glass.prism-icon-btn .fa, .indigo.glass.prism-icon-btn .fa-brands, .indigo.glass.prism-icon-btn .iconfont, .indigo.glass.prism-text-btn .fa, .indigo.glass.prism-text-btn .fa-brands, .indigo.glass.prism-text-btn .iconfont, .indigo.glass.prism-icon .fa, .indigo.glass.prism-icon .fa-brands, .indigo.glass.prism-icon .iconfont, .indigo.glass.prism-btn .fa, .indigo.glass.prism-btn .fa-brands, .indigo.glass.prism-btn .iconfont, .indigo.glass.prism-card .fa, .indigo.glass.prism-card .fa-brands, .indigo.glass.prism-card .iconfont {
+  color: #2F54EB !important;
+}
+.dark-mode .indigo.glass.prism-icon-btn, .dark-mode .indigo.glass.prism-text-btn, .dark-mode .indigo.glass.prism-icon, .dark-mode .indigo.glass.prism-btn, .dark-mode .indigo.glass.prism-card {
+  background: linear-gradient(135deg, rgba(129, 140, 248, 0.2) 0%, rgba(129, 140, 248, 0.1) 100%) !important;
+  color: #818CF8 !important;
+  border-color: rgba(129, 140, 248, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(129, 140, 248, 0.3);
+}
+.dark-mode .indigo.glass.prism-icon-btn .fa, .dark-mode .indigo.glass.prism-icon-btn .fa-brands, .dark-mode .indigo.glass.prism-icon-btn .iconfont, .dark-mode .indigo.glass.prism-text-btn .fa, .dark-mode .indigo.glass.prism-text-btn .fa-brands, .dark-mode .indigo.glass.prism-text-btn .iconfont, .dark-mode .indigo.glass.prism-icon .fa, .dark-mode .indigo.glass.prism-icon .fa-brands, .dark-mode .indigo.glass.prism-icon .iconfont, .dark-mode .indigo.glass.prism-btn .fa, .dark-mode .indigo.glass.prism-btn .fa-brands, .dark-mode .indigo.glass.prism-btn .iconfont, .dark-mode .indigo.glass.prism-card .fa, .dark-mode .indigo.glass.prism-card .fa-brands, .dark-mode .indigo.glass.prism-card .iconfont {
+  color: #818CF8 !important;
+}
+.teal.glass.prism-icon-btn, .teal.glass.prism-text-btn, .teal.glass.prism-icon, .teal.glass.prism-btn, .teal.glass.prism-card {
+  background: linear-gradient(135deg, rgba(19, 194, 194, 0.15) 0%, rgba(19, 194, 194, 0.08) 100%) !important;
+  color: #13C2C2 !important;
+  border: 0.03125rem solid rgba(19, 194, 194, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(19, 194, 194, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.teal.glass.prism-icon-btn .fa, .teal.glass.prism-icon-btn .fa-brands, .teal.glass.prism-icon-btn .iconfont, .teal.glass.prism-text-btn .fa, .teal.glass.prism-text-btn .fa-brands, .teal.glass.prism-text-btn .iconfont, .teal.glass.prism-icon .fa, .teal.glass.prism-icon .fa-brands, .teal.glass.prism-icon .iconfont, .teal.glass.prism-btn .fa, .teal.glass.prism-btn .fa-brands, .teal.glass.prism-btn .iconfont, .teal.glass.prism-card .fa, .teal.glass.prism-card .fa-brands, .teal.glass.prism-card .iconfont {
+  color: #13C2C2 !important;
+}
+.dark-mode .teal.glass.prism-icon-btn, .dark-mode .teal.glass.prism-text-btn, .dark-mode .teal.glass.prism-icon, .dark-mode .teal.glass.prism-btn, .dark-mode .teal.glass.prism-card {
+  background: linear-gradient(135deg, rgba(45, 212, 191, 0.2) 0%, rgba(45, 212, 191, 0.1) 100%) !important;
+  color: #2DD4BF !important;
+  border-color: rgba(45, 212, 191, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(45, 212, 191, 0.3);
+}
+.dark-mode .teal.glass.prism-icon-btn .fa, .dark-mode .teal.glass.prism-icon-btn .fa-brands, .dark-mode .teal.glass.prism-icon-btn .iconfont, .dark-mode .teal.glass.prism-text-btn .fa, .dark-mode .teal.glass.prism-text-btn .fa-brands, .dark-mode .teal.glass.prism-text-btn .iconfont, .dark-mode .teal.glass.prism-icon .fa, .dark-mode .teal.glass.prism-icon .fa-brands, .dark-mode .teal.glass.prism-icon .iconfont, .dark-mode .teal.glass.prism-btn .fa, .dark-mode .teal.glass.prism-btn .fa-brands, .dark-mode .teal.glass.prism-btn .iconfont, .dark-mode .teal.glass.prism-card .fa, .dark-mode .teal.glass.prism-card .fa-brands, .dark-mode .teal.glass.prism-card .iconfont {
+  color: #2DD4BF !important;
+}
+.violet.glass.prism-icon-btn, .violet.glass.prism-text-btn, .violet.glass.prism-icon, .violet.glass.prism-btn, .violet.glass.prism-card {
+  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(102, 126, 234, 0.08) 100%) !important;
+  color: #667eea !important;
+  border: 0.03125rem solid rgba(102, 126, 234, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(102, 126, 234, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.violet.glass.prism-icon-btn .fa, .violet.glass.prism-icon-btn .fa-brands, .violet.glass.prism-icon-btn .iconfont, .violet.glass.prism-text-btn .fa, .violet.glass.prism-text-btn .fa-brands, .violet.glass.prism-text-btn .iconfont, .violet.glass.prism-icon .fa, .violet.glass.prism-icon .fa-brands, .violet.glass.prism-icon .iconfont, .violet.glass.prism-btn .fa, .violet.glass.prism-btn .fa-brands, .violet.glass.prism-btn .iconfont, .violet.glass.prism-card .fa, .violet.glass.prism-card .fa-brands, .violet.glass.prism-card .iconfont {
+  color: #667eea !important;
+}
+.dark-mode .violet.glass.prism-icon-btn, .dark-mode .violet.glass.prism-text-btn, .dark-mode .violet.glass.prism-icon, .dark-mode .violet.glass.prism-btn, .dark-mode .violet.glass.prism-card {
+  background: linear-gradient(135deg, rgba(133, 153, 238, 0.2) 0%, rgba(133, 153, 238, 0.1) 100%) !important;
+  color: #8599ee !important;
+  border-color: rgba(133, 153, 238, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(133, 153, 238, 0.3);
+}
+.dark-mode .violet.glass.prism-icon-btn .fa, .dark-mode .violet.glass.prism-icon-btn .fa-brands, .dark-mode .violet.glass.prism-icon-btn .iconfont, .dark-mode .violet.glass.prism-text-btn .fa, .dark-mode .violet.glass.prism-text-btn .fa-brands, .dark-mode .violet.glass.prism-text-btn .iconfont, .dark-mode .violet.glass.prism-icon .fa, .dark-mode .violet.glass.prism-icon .fa-brands, .dark-mode .violet.glass.prism-icon .iconfont, .dark-mode .violet.glass.prism-btn .fa, .dark-mode .violet.glass.prism-btn .fa-brands, .dark-mode .violet.glass.prism-btn .iconfont, .dark-mode .violet.glass.prism-card .fa, .dark-mode .violet.glass.prism-card .fa-brands, .dark-mode .violet.glass.prism-card .iconfont {
+  color: #8599ee !important;
+}
+.rose.glass.prism-icon-btn, .rose.glass.prism-text-btn, .rose.glass.prism-icon, .rose.glass.prism-btn, .rose.glass.prism-card {
+  background: linear-gradient(135deg, rgba(240, 147, 251, 0.15) 0%, rgba(240, 147, 251, 0.08) 100%) !important;
+  color: #f093fb !important;
+  border: 0.03125rem solid rgba(240, 147, 251, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(240, 147, 251, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.rose.glass.prism-icon-btn .fa, .rose.glass.prism-icon-btn .fa-brands, .rose.glass.prism-icon-btn .iconfont, .rose.glass.prism-text-btn .fa, .rose.glass.prism-text-btn .fa-brands, .rose.glass.prism-text-btn .iconfont, .rose.glass.prism-icon .fa, .rose.glass.prism-icon .fa-brands, .rose.glass.prism-icon .iconfont, .rose.glass.prism-btn .fa, .rose.glass.prism-btn .fa-brands, .rose.glass.prism-btn .iconfont, .rose.glass.prism-card .fa, .rose.glass.prism-card .fa-brands, .rose.glass.prism-card .iconfont {
+  color: #f093fb !important;
+}
+.dark-mode .rose.glass.prism-icon-btn, .dark-mode .rose.glass.prism-text-btn, .dark-mode .rose.glass.prism-icon, .dark-mode .rose.glass.prism-btn, .dark-mode .rose.glass.prism-card {
+  background: linear-gradient(135deg, rgba(245, 87, 108, 0.2) 0%, rgba(245, 87, 108, 0.1) 100%) !important;
+  color: #f5576c !important;
+  border-color: rgba(245, 87, 108, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(245, 87, 108, 0.3);
+}
+.dark-mode .rose.glass.prism-icon-btn .fa, .dark-mode .rose.glass.prism-icon-btn .fa-brands, .dark-mode .rose.glass.prism-icon-btn .iconfont, .dark-mode .rose.glass.prism-text-btn .fa, .dark-mode .rose.glass.prism-text-btn .fa-brands, .dark-mode .rose.glass.prism-text-btn .iconfont, .dark-mode .rose.glass.prism-icon .fa, .dark-mode .rose.glass.prism-icon .fa-brands, .dark-mode .rose.glass.prism-icon .iconfont, .dark-mode .rose.glass.prism-btn .fa, .dark-mode .rose.glass.prism-btn .fa-brands, .dark-mode .rose.glass.prism-btn .iconfont, .dark-mode .rose.glass.prism-card .fa, .dark-mode .rose.glass.prism-card .fa-brands, .dark-mode .rose.glass.prism-card .iconfont {
+  color: #f5576c !important;
+}
+.ai.glass.prism-icon-btn, .ai.glass.prism-text-btn, .ai.glass.prism-icon, .ai.glass.prism-btn, .ai.glass.prism-card {
+  background: linear-gradient(135deg, rgba(196, 69, 105, 0.15) 0%, rgba(196, 69, 105, 0.08) 100%) !important;
+  color: #c44569 !important;
+  border: 0.03125rem solid rgba(196, 69, 105, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(196, 69, 105, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.ai.glass.prism-icon-btn .fa, .ai.glass.prism-icon-btn .fa-brands, .ai.glass.prism-icon-btn .iconfont, .ai.glass.prism-text-btn .fa, .ai.glass.prism-text-btn .fa-brands, .ai.glass.prism-text-btn .iconfont, .ai.glass.prism-icon .fa, .ai.glass.prism-icon .fa-brands, .ai.glass.prism-icon .iconfont, .ai.glass.prism-btn .fa, .ai.glass.prism-btn .fa-brands, .ai.glass.prism-btn .iconfont, .ai.glass.prism-card .fa, .ai.glass.prism-card .fa-brands, .ai.glass.prism-card .iconfont {
+  color: #c44569 !important;
+}
+.dark-mode .ai.glass.prism-icon-btn, .dark-mode .ai.glass.prism-text-btn, .dark-mode .ai.glass.prism-icon, .dark-mode .ai.glass.prism-btn, .dark-mode .ai.glass.prism-card {
+  background: linear-gradient(135deg, rgba(238, 90, 111, 0.2) 0%, rgba(238, 90, 111, 0.1) 100%) !important;
+  color: #ee5a6f !important;
+  border-color: rgba(238, 90, 111, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(238, 90, 111, 0.3);
+}
+.dark-mode .ai.glass.prism-icon-btn .fa, .dark-mode .ai.glass.prism-icon-btn .fa-brands, .dark-mode .ai.glass.prism-icon-btn .iconfont, .dark-mode .ai.glass.prism-text-btn .fa, .dark-mode .ai.glass.prism-text-btn .fa-brands, .dark-mode .ai.glass.prism-text-btn .iconfont, .dark-mode .ai.glass.prism-icon .fa, .dark-mode .ai.glass.prism-icon .fa-brands, .dark-mode .ai.glass.prism-icon .iconfont, .dark-mode .ai.glass.prism-btn .fa, .dark-mode .ai.glass.prism-btn .fa-brands, .dark-mode .ai.glass.prism-btn .iconfont, .dark-mode .ai.glass.prism-card .fa, .dark-mode .ai.glass.prism-card .fa-brands, .dark-mode .ai.glass.prism-card .iconfont {
+  color: #ee5a6f !important;
+}
+.primary.glass.prism-icon-btn, .primary.glass.prism-text-btn, .primary.glass.prism-icon, .primary.glass.prism-btn, .primary.glass.prism-card {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.15) 0%, rgba(52, 120, 246, 0.08) 100%) !important;
+  color: #3478F6 !important;
+  border: 0.03125rem solid rgba(52, 120, 246, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(52, 120, 246, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.primary.glass.prism-icon-btn .fa, .primary.glass.prism-icon-btn .fa-brands, .primary.glass.prism-icon-btn .iconfont, .primary.glass.prism-text-btn .fa, .primary.glass.prism-text-btn .fa-brands, .primary.glass.prism-text-btn .iconfont, .primary.glass.prism-icon .fa, .primary.glass.prism-icon .fa-brands, .primary.glass.prism-icon .iconfont, .primary.glass.prism-btn .fa, .primary.glass.prism-btn .fa-brands, .primary.glass.prism-btn .iconfont, .primary.glass.prism-card .fa, .primary.glass.prism-card .fa-brands, .primary.glass.prism-card .iconfont {
+  color: #3478F6 !important;
+}
+.dark-mode .primary.glass.prism-icon-btn, .dark-mode .primary.glass.prism-text-btn, .dark-mode .primary.glass.prism-icon, .dark-mode .primary.glass.prism-btn, .dark-mode .primary.glass.prism-card {
+  background: linear-gradient(135deg, rgba(96, 165, 250, 0.2) 0%, rgba(96, 165, 250, 0.1) 100%) !important;
+  color: #60A5FA !important;
+  border-color: rgba(96, 165, 250, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(96, 165, 250, 0.3);
+}
+.dark-mode .primary.glass.prism-icon-btn .fa, .dark-mode .primary.glass.prism-icon-btn .fa-brands, .dark-mode .primary.glass.prism-icon-btn .iconfont, .dark-mode .primary.glass.prism-text-btn .fa, .dark-mode .primary.glass.prism-text-btn .fa-brands, .dark-mode .primary.glass.prism-text-btn .iconfont, .dark-mode .primary.glass.prism-icon .fa, .dark-mode .primary.glass.prism-icon .fa-brands, .dark-mode .primary.glass.prism-icon .iconfont, .dark-mode .primary.glass.prism-btn .fa, .dark-mode .primary.glass.prism-btn .fa-brands, .dark-mode .primary.glass.prism-btn .iconfont, .dark-mode .primary.glass.prism-card .fa, .dark-mode .primary.glass.prism-card .fa-brands, .dark-mode .primary.glass.prism-card .iconfont {
+  color: #60A5FA !important;
+}
+.success.glass.prism-icon-btn, .success.glass.prism-text-btn, .success.glass.prism-icon, .success.glass.prism-btn, .success.glass.prism-card {
+  background: linear-gradient(135deg, rgba(0, 180, 42, 0.15) 0%, rgba(0, 180, 42, 0.08) 100%) !important;
+  color: #00B42A !important;
+  border: 0.03125rem solid rgba(0, 180, 42, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 180, 42, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.success.glass.prism-icon-btn .fa, .success.glass.prism-icon-btn .fa-brands, .success.glass.prism-icon-btn .iconfont, .success.glass.prism-text-btn .fa, .success.glass.prism-text-btn .fa-brands, .success.glass.prism-text-btn .iconfont, .success.glass.prism-icon .fa, .success.glass.prism-icon .fa-brands, .success.glass.prism-icon .iconfont, .success.glass.prism-btn .fa, .success.glass.prism-btn .fa-brands, .success.glass.prism-btn .iconfont, .success.glass.prism-card .fa, .success.glass.prism-card .fa-brands, .success.glass.prism-card .iconfont {
+  color: #00B42A !important;
+}
+.dark-mode .success.glass.prism-icon-btn, .dark-mode .success.glass.prism-text-btn, .dark-mode .success.glass.prism-icon, .dark-mode .success.glass.prism-btn, .dark-mode .success.glass.prism-card {
+  background: linear-gradient(135deg, rgba(52, 211, 153, 0.2) 0%, rgba(52, 211, 153, 0.1) 100%) !important;
+  color: #34D399 !important;
+  border-color: rgba(52, 211, 153, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(52, 211, 153, 0.3);
+}
+.dark-mode .success.glass.prism-icon-btn .fa, .dark-mode .success.glass.prism-icon-btn .fa-brands, .dark-mode .success.glass.prism-icon-btn .iconfont, .dark-mode .success.glass.prism-text-btn .fa, .dark-mode .success.glass.prism-text-btn .fa-brands, .dark-mode .success.glass.prism-text-btn .iconfont, .dark-mode .success.glass.prism-icon .fa, .dark-mode .success.glass.prism-icon .fa-brands, .dark-mode .success.glass.prism-icon .iconfont, .dark-mode .success.glass.prism-btn .fa, .dark-mode .success.glass.prism-btn .fa-brands, .dark-mode .success.glass.prism-btn .iconfont, .dark-mode .success.glass.prism-card .fa, .dark-mode .success.glass.prism-card .fa-brands, .dark-mode .success.glass.prism-card .iconfont {
+  color: #34D399 !important;
+}
+.warning.glass.prism-icon-btn, .warning.glass.prism-text-btn, .warning.glass.prism-icon, .warning.glass.prism-btn, .warning.glass.prism-card {
+  background: linear-gradient(135deg, rgba(255, 125, 0, 0.15) 0%, rgba(255, 125, 0, 0.08) 100%) !important;
+  color: #FF7D00 !important;
+  border: 0.03125rem solid rgba(255, 125, 0, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(255, 125, 0, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.warning.glass.prism-icon-btn .fa, .warning.glass.prism-icon-btn .fa-brands, .warning.glass.prism-icon-btn .iconfont, .warning.glass.prism-text-btn .fa, .warning.glass.prism-text-btn .fa-brands, .warning.glass.prism-text-btn .iconfont, .warning.glass.prism-icon .fa, .warning.glass.prism-icon .fa-brands, .warning.glass.prism-icon .iconfont, .warning.glass.prism-btn .fa, .warning.glass.prism-btn .fa-brands, .warning.glass.prism-btn .iconfont, .warning.glass.prism-card .fa, .warning.glass.prism-card .fa-brands, .warning.glass.prism-card .iconfont {
+  color: #FF7D00 !important;
+}
+.dark-mode .warning.glass.prism-icon-btn, .dark-mode .warning.glass.prism-text-btn, .dark-mode .warning.glass.prism-icon, .dark-mode .warning.glass.prism-btn, .dark-mode .warning.glass.prism-card {
+  background: linear-gradient(135deg, rgba(251, 146, 60, 0.2) 0%, rgba(251, 146, 60, 0.1) 100%) !important;
+  color: #FB923C !important;
+  border-color: rgba(251, 146, 60, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(251, 146, 60, 0.3);
+}
+.dark-mode .warning.glass.prism-icon-btn .fa, .dark-mode .warning.glass.prism-icon-btn .fa-brands, .dark-mode .warning.glass.prism-icon-btn .iconfont, .dark-mode .warning.glass.prism-text-btn .fa, .dark-mode .warning.glass.prism-text-btn .fa-brands, .dark-mode .warning.glass.prism-text-btn .iconfont, .dark-mode .warning.glass.prism-icon .fa, .dark-mode .warning.glass.prism-icon .fa-brands, .dark-mode .warning.glass.prism-icon .iconfont, .dark-mode .warning.glass.prism-btn .fa, .dark-mode .warning.glass.prism-btn .fa-brands, .dark-mode .warning.glass.prism-btn .iconfont, .dark-mode .warning.glass.prism-card .fa, .dark-mode .warning.glass.prism-card .fa-brands, .dark-mode .warning.glass.prism-card .iconfont {
+  color: #FB923C !important;
+}
+.danger.glass.prism-icon-btn, .danger.glass.prism-text-btn, .danger.glass.prism-icon, .danger.glass.prism-btn, .danger.glass.prism-card {
+  background: linear-gradient(135deg, rgba(245, 63, 63, 0.15) 0%, rgba(245, 63, 63, 0.08) 100%) !important;
+  color: #F53F3F !important;
+  border: 0.03125rem solid rgba(245, 63, 63, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(245, 63, 63, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.danger.glass.prism-icon-btn .fa, .danger.glass.prism-icon-btn .fa-brands, .danger.glass.prism-icon-btn .iconfont, .danger.glass.prism-text-btn .fa, .danger.glass.prism-text-btn .fa-brands, .danger.glass.prism-text-btn .iconfont, .danger.glass.prism-icon .fa, .danger.glass.prism-icon .fa-brands, .danger.glass.prism-icon .iconfont, .danger.glass.prism-btn .fa, .danger.glass.prism-btn .fa-brands, .danger.glass.prism-btn .iconfont, .danger.glass.prism-card .fa, .danger.glass.prism-card .fa-brands, .danger.glass.prism-card .iconfont {
+  color: #F53F3F !important;
+}
+.dark-mode .danger.glass.prism-icon-btn, .dark-mode .danger.glass.prism-text-btn, .dark-mode .danger.glass.prism-icon, .dark-mode .danger.glass.prism-btn, .dark-mode .danger.glass.prism-card {
+  background: linear-gradient(135deg, rgba(248, 113, 113, 0.2) 0%, rgba(248, 113, 113, 0.1) 100%) !important;
+  color: #F87171 !important;
+  border-color: rgba(248, 113, 113, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(248, 113, 113, 0.3);
+}
+.dark-mode .danger.glass.prism-icon-btn .fa, .dark-mode .danger.glass.prism-icon-btn .fa-brands, .dark-mode .danger.glass.prism-icon-btn .iconfont, .dark-mode .danger.glass.prism-text-btn .fa, .dark-mode .danger.glass.prism-text-btn .fa-brands, .dark-mode .danger.glass.prism-text-btn .iconfont, .dark-mode .danger.glass.prism-icon .fa, .dark-mode .danger.glass.prism-icon .fa-brands, .dark-mode .danger.glass.prism-icon .iconfont, .dark-mode .danger.glass.prism-btn .fa, .dark-mode .danger.glass.prism-btn .fa-brands, .dark-mode .danger.glass.prism-btn .iconfont, .dark-mode .danger.glass.prism-card .fa, .dark-mode .danger.glass.prism-card .fa-brands, .dark-mode .danger.glass.prism-card .iconfont {
+  color: #F87171 !important;
+}
+.info.glass.prism-icon-btn, .info.glass.prism-text-btn, .info.glass.prism-icon, .info.glass.prism-btn, .info.glass.prism-card {
+  background: linear-gradient(135deg, rgba(20, 201, 201, 0.15) 0%, rgba(20, 201, 201, 0.08) 100%) !important;
+  color: #14C9C9 !important;
+  border: 0.03125rem solid rgba(20, 201, 201, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 0.125rem 0.5rem rgba(20, 201, 201, 0.15), inset 0 0.03125rem 0 rgba(255, 255, 255, 0.5);
+}
+.info.glass.prism-icon-btn .fa, .info.glass.prism-icon-btn .fa-brands, .info.glass.prism-icon-btn .iconfont, .info.glass.prism-text-btn .fa, .info.glass.prism-text-btn .fa-brands, .info.glass.prism-text-btn .iconfont, .info.glass.prism-icon .fa, .info.glass.prism-icon .fa-brands, .info.glass.prism-icon .iconfont, .info.glass.prism-btn .fa, .info.glass.prism-btn .fa-brands, .info.glass.prism-btn .iconfont, .info.glass.prism-card .fa, .info.glass.prism-card .fa-brands, .info.glass.prism-card .iconfont {
+  color: #14C9C9 !important;
+}
+.dark-mode .info.glass.prism-icon-btn, .dark-mode .info.glass.prism-text-btn, .dark-mode .info.glass.prism-icon, .dark-mode .info.glass.prism-btn, .dark-mode .info.glass.prism-card {
+  background: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.1) 100%) !important;
+  color: #22D3EE !important;
+  border-color: rgba(34, 211, 238, 0.3);
+  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), inset 0 0.03125rem 0 rgba(34, 211, 238, 0.3);
+}
+.dark-mode .info.glass.prism-icon-btn .fa, .dark-mode .info.glass.prism-icon-btn .fa-brands, .dark-mode .info.glass.prism-icon-btn .iconfont, .dark-mode .info.glass.prism-text-btn .fa, .dark-mode .info.glass.prism-text-btn .fa-brands, .dark-mode .info.glass.prism-text-btn .iconfont, .dark-mode .info.glass.prism-icon .fa, .dark-mode .info.glass.prism-icon .fa-brands, .dark-mode .info.glass.prism-icon .iconfont, .dark-mode .info.glass.prism-btn .fa, .dark-mode .info.glass.prism-btn .fa-brands, .dark-mode .info.glass.prism-btn .iconfont, .dark-mode .info.glass.prism-card .fa, .dark-mode .info.glass.prism-card .fa-brands, .dark-mode .info.glass.prism-card .iconfont {
+  color: #22D3EE !important;
+}
+.purple.gradient.prism-icon-btn, .purple.gradient.prism-text-btn, .purple.gradient.prism-icon, .purple.gradient.prism-btn, .purple.gradient.prism-card {
+  background: linear-gradient(135deg, #722ED1 0%, #B37FEB 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(114, 46, 209, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.purple.gradient.prism-icon-btn .fa, .purple.gradient.prism-icon-btn .fa-brands, .purple.gradient.prism-icon-btn .iconfont, .purple.gradient.prism-text-btn .fa, .purple.gradient.prism-text-btn .fa-brands, .purple.gradient.prism-text-btn .iconfont, .purple.gradient.prism-icon .fa, .purple.gradient.prism-icon .fa-brands, .purple.gradient.prism-icon .iconfont, .purple.gradient.prism-btn .fa, .purple.gradient.prism-btn .fa-brands, .purple.gradient.prism-btn .iconfont, .purple.gradient.prism-card .fa, .purple.gradient.prism-card .fa-brands, .purple.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.blue.gradient.prism-icon-btn, .gradient.prism-icon-btn.primary, .blue.gradient.prism-text-btn, .gradient.prism-text-btn.primary, .blue.gradient.prism-icon, .gradient.prism-icon.primary, .blue.gradient.prism-btn, .gradient.prism-btn.primary, .blue.gradient.prism-card, .gradient.prism-card.primary {
+  background: linear-gradient(135deg, #3478F6 0%, #86B8FA 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(52, 120, 246, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.blue.gradient.prism-icon-btn .fa, .gradient.prism-icon-btn.primary .fa, .blue.gradient.prism-icon-btn .fa-brands, .gradient.prism-icon-btn.primary .fa-brands, .blue.gradient.prism-icon-btn .iconfont, .gradient.prism-icon-btn.primary .iconfont, .blue.gradient.prism-text-btn .fa, .gradient.prism-text-btn.primary .fa, .blue.gradient.prism-text-btn .fa-brands, .gradient.prism-text-btn.primary .fa-brands, .blue.gradient.prism-text-btn .iconfont, .gradient.prism-text-btn.primary .iconfont, .blue.gradient.prism-icon .fa, .gradient.prism-icon.primary .fa, .blue.gradient.prism-icon .fa-brands, .gradient.prism-icon.primary .fa-brands, .blue.gradient.prism-icon .iconfont, .gradient.prism-icon.primary .iconfont, .blue.gradient.prism-btn .fa, .gradient.prism-btn.primary .fa, .blue.gradient.prism-btn .fa-brands, .gradient.prism-btn.primary .fa-brands, .blue.gradient.prism-btn .iconfont, .gradient.prism-btn.primary .iconfont, .blue.gradient.prism-card .fa, .gradient.prism-card.primary .fa, .blue.gradient.prism-card .fa-brands, .gradient.prism-card.primary .fa-brands, .blue.gradient.prism-card .iconfont, .gradient.prism-card.primary .iconfont {
+  color: #FFFFFF !important;
+}
+.green.gradient.prism-icon-btn, .gradient.prism-icon-btn.success, .green.gradient.prism-text-btn, .gradient.prism-text-btn.success, .green.gradient.prism-icon, .gradient.prism-icon.success, .green.gradient.prism-btn, .gradient.prism-btn.success, .green.gradient.prism-card, .gradient.prism-card.success {
+  background: linear-gradient(135deg, #00B42A 0%, #6EE7B7 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 180, 42, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.green.gradient.prism-icon-btn .fa, .gradient.prism-icon-btn.success .fa, .green.gradient.prism-icon-btn .fa-brands, .gradient.prism-icon-btn.success .fa-brands, .green.gradient.prism-icon-btn .iconfont, .gradient.prism-icon-btn.success .iconfont, .green.gradient.prism-text-btn .fa, .gradient.prism-text-btn.success .fa, .green.gradient.prism-text-btn .fa-brands, .gradient.prism-text-btn.success .fa-brands, .green.gradient.prism-text-btn .iconfont, .gradient.prism-text-btn.success .iconfont, .green.gradient.prism-icon .fa, .gradient.prism-icon.success .fa, .green.gradient.prism-icon .fa-brands, .gradient.prism-icon.success .fa-brands, .green.gradient.prism-icon .iconfont, .gradient.prism-icon.success .iconfont, .green.gradient.prism-btn .fa, .gradient.prism-btn.success .fa, .green.gradient.prism-btn .fa-brands, .gradient.prism-btn.success .fa-brands, .green.gradient.prism-btn .iconfont, .gradient.prism-btn.success .iconfont, .green.gradient.prism-card .fa, .gradient.prism-card.success .fa, .green.gradient.prism-card .fa-brands, .gradient.prism-card.success .fa-brands, .green.gradient.prism-card .iconfont, .gradient.prism-card.success .iconfont {
+  color: #FFFFFF !important;
+}
+.red.gradient.prism-icon-btn, .gradient.prism-icon-btn.danger, .red.gradient.prism-text-btn, .gradient.prism-text-btn.danger, .red.gradient.prism-icon, .gradient.prism-icon.danger, .red.gradient.prism-btn, .gradient.prism-btn.danger, .red.gradient.prism-card, .gradient.prism-card.danger {
+  background: linear-gradient(135deg, #F53F3F 0%, #FCA5A5 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(245, 63, 63, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.red.gradient.prism-icon-btn .fa, .gradient.prism-icon-btn.danger .fa, .red.gradient.prism-icon-btn .fa-brands, .gradient.prism-icon-btn.danger .fa-brands, .red.gradient.prism-icon-btn .iconfont, .gradient.prism-icon-btn.danger .iconfont, .red.gradient.prism-text-btn .fa, .gradient.prism-text-btn.danger .fa, .red.gradient.prism-text-btn .fa-brands, .gradient.prism-text-btn.danger .fa-brands, .red.gradient.prism-text-btn .iconfont, .gradient.prism-text-btn.danger .iconfont, .red.gradient.prism-icon .fa, .gradient.prism-icon.danger .fa, .red.gradient.prism-icon .fa-brands, .gradient.prism-icon.danger .fa-brands, .red.gradient.prism-icon .iconfont, .gradient.prism-icon.danger .iconfont, .red.gradient.prism-btn .fa, .gradient.prism-btn.danger .fa, .red.gradient.prism-btn .fa-brands, .gradient.prism-btn.danger .fa-brands, .red.gradient.prism-btn .iconfont, .gradient.prism-btn.danger .iconfont, .red.gradient.prism-card .fa, .gradient.prism-card.danger .fa, .red.gradient.prism-card .fa-brands, .gradient.prism-card.danger .fa-brands, .red.gradient.prism-card .iconfont, .gradient.prism-card.danger .iconfont {
+  color: #FFFFFF !important;
+}
+.orange.gradient.prism-icon-btn, .gradient.prism-icon-btn.warning, .orange.gradient.prism-text-btn, .gradient.prism-text-btn.warning, .orange.gradient.prism-icon, .gradient.prism-icon.warning, .orange.gradient.prism-btn, .gradient.prism-btn.warning, .orange.gradient.prism-card, .gradient.prism-card.warning {
+  background: linear-gradient(135deg, #FF7D00 0%, #FDBA74 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(255, 125, 0, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.orange.gradient.prism-icon-btn .fa, .gradient.prism-icon-btn.warning .fa, .orange.gradient.prism-icon-btn .fa-brands, .gradient.prism-icon-btn.warning .fa-brands, .orange.gradient.prism-icon-btn .iconfont, .gradient.prism-icon-btn.warning .iconfont, .orange.gradient.prism-text-btn .fa, .gradient.prism-text-btn.warning .fa, .orange.gradient.prism-text-btn .fa-brands, .gradient.prism-text-btn.warning .fa-brands, .orange.gradient.prism-text-btn .iconfont, .gradient.prism-text-btn.warning .iconfont, .orange.gradient.prism-icon .fa, .gradient.prism-icon.warning .fa, .orange.gradient.prism-icon .fa-brands, .gradient.prism-icon.warning .fa-brands, .orange.gradient.prism-icon .iconfont, .gradient.prism-icon.warning .iconfont, .orange.gradient.prism-btn .fa, .gradient.prism-btn.warning .fa, .orange.gradient.prism-btn .fa-brands, .gradient.prism-btn.warning .fa-brands, .orange.gradient.prism-btn .iconfont, .gradient.prism-btn.warning .iconfont, .orange.gradient.prism-card .fa, .gradient.prism-card.warning .fa, .orange.gradient.prism-card .fa-brands, .gradient.prism-card.warning .fa-brands, .orange.gradient.prism-card .iconfont, .gradient.prism-card.warning .iconfont {
+  color: #FFFFFF !important;
+}
+.cyan.gradient.prism-icon-btn, .gradient.prism-icon-btn.info, .cyan.gradient.prism-text-btn, .gradient.prism-text-btn.info, .cyan.gradient.prism-icon, .gradient.prism-icon.info, .cyan.gradient.prism-btn, .gradient.prism-btn.info, .cyan.gradient.prism-card, .gradient.prism-card.info {
+  background: linear-gradient(135deg, #14C9C9 0%, #67E8F9 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(20, 201, 201, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.cyan.gradient.prism-icon-btn .fa, .gradient.prism-icon-btn.info .fa, .cyan.gradient.prism-icon-btn .fa-brands, .gradient.prism-icon-btn.info .fa-brands, .cyan.gradient.prism-icon-btn .iconfont, .gradient.prism-icon-btn.info .iconfont, .cyan.gradient.prism-text-btn .fa, .gradient.prism-text-btn.info .fa, .cyan.gradient.prism-text-btn .fa-brands, .gradient.prism-text-btn.info .fa-brands, .cyan.gradient.prism-text-btn .iconfont, .gradient.prism-text-btn.info .iconfont, .cyan.gradient.prism-icon .fa, .gradient.prism-icon.info .fa, .cyan.gradient.prism-icon .fa-brands, .gradient.prism-icon.info .fa-brands, .cyan.gradient.prism-icon .iconfont, .gradient.prism-icon.info .iconfont, .cyan.gradient.prism-btn .fa, .gradient.prism-btn.info .fa, .cyan.gradient.prism-btn .fa-brands, .gradient.prism-btn.info .fa-brands, .cyan.gradient.prism-btn .iconfont, .gradient.prism-btn.info .iconfont, .cyan.gradient.prism-card .fa, .gradient.prism-card.info .fa, .cyan.gradient.prism-card .fa-brands, .gradient.prism-card.info .fa-brands, .cyan.gradient.prism-card .iconfont, .gradient.prism-card.info .iconfont {
+  color: #FFFFFF !important;
+}
+.yellow.gradient.prism-icon-btn, .yellow.gradient.prism-text-btn, .yellow.gradient.prism-icon, .yellow.gradient.prism-btn, .yellow.gradient.prism-card {
+  background: linear-gradient(135deg, #FFB400 0%, #FDE68A 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(255, 180, 0, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.yellow.gradient.prism-icon-btn .fa, .yellow.gradient.prism-icon-btn .fa-brands, .yellow.gradient.prism-icon-btn .iconfont, .yellow.gradient.prism-text-btn .fa, .yellow.gradient.prism-text-btn .fa-brands, .yellow.gradient.prism-text-btn .iconfont, .yellow.gradient.prism-icon .fa, .yellow.gradient.prism-icon .fa-brands, .yellow.gradient.prism-icon .iconfont, .yellow.gradient.prism-btn .fa, .yellow.gradient.prism-btn .fa-brands, .yellow.gradient.prism-btn .iconfont, .yellow.gradient.prism-card .fa, .yellow.gradient.prism-card .fa-brands, .yellow.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.pink.gradient.prism-icon-btn, .pink.gradient.prism-text-btn, .pink.gradient.prism-icon, .pink.gradient.prism-btn, .pink.gradient.prism-card {
+  background: linear-gradient(135deg, #F53F7F 0%, #F9A8D4 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(245, 63, 127, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.pink.gradient.prism-icon-btn .fa, .pink.gradient.prism-icon-btn .fa-brands, .pink.gradient.prism-icon-btn .iconfont, .pink.gradient.prism-text-btn .fa, .pink.gradient.prism-text-btn .fa-brands, .pink.gradient.prism-text-btn .iconfont, .pink.gradient.prism-icon .fa, .pink.gradient.prism-icon .fa-brands, .pink.gradient.prism-icon .iconfont, .pink.gradient.prism-btn .fa, .pink.gradient.prism-btn .fa-brands, .pink.gradient.prism-btn .iconfont, .pink.gradient.prism-card .fa, .pink.gradient.prism-card .fa-brands, .pink.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.magenta.gradient.prism-icon-btn, .magenta.gradient.prism-text-btn, .magenta.gradient.prism-icon, .magenta.gradient.prism-btn, .magenta.gradient.prism-card {
+  background: linear-gradient(135deg, #EB2F96 0%, #F472B6 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(235, 47, 150, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.magenta.gradient.prism-icon-btn .fa, .magenta.gradient.prism-icon-btn .fa-brands, .magenta.gradient.prism-icon-btn .iconfont, .magenta.gradient.prism-text-btn .fa, .magenta.gradient.prism-text-btn .fa-brands, .magenta.gradient.prism-text-btn .iconfont, .magenta.gradient.prism-icon .fa, .magenta.gradient.prism-icon .fa-brands, .magenta.gradient.prism-icon .iconfont, .magenta.gradient.prism-btn .fa, .magenta.gradient.prism-btn .fa-brands, .magenta.gradient.prism-btn .iconfont, .magenta.gradient.prism-card .fa, .magenta.gradient.prism-card .fa-brands, .magenta.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.indigo.gradient.prism-icon-btn, .indigo.gradient.prism-text-btn, .indigo.gradient.prism-icon, .indigo.gradient.prism-btn, .indigo.gradient.prism-card {
+  background: linear-gradient(135deg, #2F54EB 0%, #A5B4FC 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(47, 84, 235, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.indigo.gradient.prism-icon-btn .fa, .indigo.gradient.prism-icon-btn .fa-brands, .indigo.gradient.prism-icon-btn .iconfont, .indigo.gradient.prism-text-btn .fa, .indigo.gradient.prism-text-btn .fa-brands, .indigo.gradient.prism-text-btn .iconfont, .indigo.gradient.prism-icon .fa, .indigo.gradient.prism-icon .fa-brands, .indigo.gradient.prism-icon .iconfont, .indigo.gradient.prism-btn .fa, .indigo.gradient.prism-btn .fa-brands, .indigo.gradient.prism-btn .iconfont, .indigo.gradient.prism-card .fa, .indigo.gradient.prism-card .fa-brands, .indigo.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.teal.gradient.prism-icon-btn, .teal.gradient.prism-text-btn, .teal.gradient.prism-icon, .teal.gradient.prism-btn, .teal.gradient.prism-card {
+  background: linear-gradient(135deg, #13C2C2 0%, #5EEAD4 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(19, 194, 194, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.teal.gradient.prism-icon-btn .fa, .teal.gradient.prism-icon-btn .fa-brands, .teal.gradient.prism-icon-btn .iconfont, .teal.gradient.prism-text-btn .fa, .teal.gradient.prism-text-btn .fa-brands, .teal.gradient.prism-text-btn .iconfont, .teal.gradient.prism-icon .fa, .teal.gradient.prism-icon .fa-brands, .teal.gradient.prism-icon .iconfont, .teal.gradient.prism-btn .fa, .teal.gradient.prism-btn .fa-brands, .teal.gradient.prism-btn .iconfont, .teal.gradient.prism-card .fa, .teal.gradient.prism-card .fa-brands, .teal.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.violet.gradient.prism-icon-btn, .violet.gradient.prism-text-btn, .violet.gradient.prism-icon, .violet.gradient.prism-btn, .violet.gradient.prism-card {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+  box-shadow: 0 0.25rem 1rem rgba(102, 126, 234, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.violet.gradient.prism-icon-btn .fa, .violet.gradient.prism-icon-btn .fa-brands, .violet.gradient.prism-icon-btn .iconfont, .violet.gradient.prism-text-btn .fa, .violet.gradient.prism-text-btn .fa-brands, .violet.gradient.prism-text-btn .iconfont, .violet.gradient.prism-icon .fa, .violet.gradient.prism-icon .fa-brands, .violet.gradient.prism-icon .iconfont, .violet.gradient.prism-btn .fa, .violet.gradient.prism-btn .fa-brands, .violet.gradient.prism-btn .iconfont, .violet.gradient.prism-card .fa, .violet.gradient.prism-card .fa-brands, .violet.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.rose.gradient.prism-icon-btn, .rose.gradient.prism-text-btn, .rose.gradient.prism-icon, .rose.gradient.prism-btn, .rose.gradient.prism-card {
+  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important;
+  box-shadow: 0 0.25rem 1rem rgba(240, 147, 251, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.rose.gradient.prism-icon-btn .fa, .rose.gradient.prism-icon-btn .fa-brands, .rose.gradient.prism-icon-btn .iconfont, .rose.gradient.prism-text-btn .fa, .rose.gradient.prism-text-btn .fa-brands, .rose.gradient.prism-text-btn .iconfont, .rose.gradient.prism-icon .fa, .rose.gradient.prism-icon .fa-brands, .rose.gradient.prism-icon .iconfont, .rose.gradient.prism-btn .fa, .rose.gradient.prism-btn .fa-brands, .rose.gradient.prism-btn .iconfont, .rose.gradient.prism-card .fa, .rose.gradient.prism-card .fa-brands, .rose.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.ai.gradient.prism-icon-btn, .ai.gradient.prism-text-btn, .ai.gradient.prism-icon, .ai.gradient.prism-btn, .ai.gradient.prism-card {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 25%, #c44569 50%, #764ba2 75%, #667eea 100%) !important;
+  box-shadow: 0 0.25rem 1rem rgba(196, 69, 105, 0.35) !important;
+  color: #FFFFFF !important;
+}
+.ai.gradient.prism-icon-btn .fa, .ai.gradient.prism-icon-btn .fa-brands, .ai.gradient.prism-icon-btn .iconfont, .ai.gradient.prism-text-btn .fa, .ai.gradient.prism-text-btn .fa-brands, .ai.gradient.prism-text-btn .iconfont, .ai.gradient.prism-icon .fa, .ai.gradient.prism-icon .fa-brands, .ai.gradient.prism-icon .iconfont, .ai.gradient.prism-btn .fa, .ai.gradient.prism-btn .fa-brands, .ai.gradient.prism-btn .iconfont, .ai.gradient.prism-card .fa, .ai.gradient.prism-card .fa-brands, .ai.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.primary.gradient.prism-icon-btn, .primary.gradient.prism-text-btn, .primary.gradient.prism-icon, .primary.gradient.prism-btn, .primary.gradient.prism-card {
+  background: linear-gradient(135deg, #3478F6 0%, #86B8FA 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(52, 120, 246, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.primary.gradient.prism-icon-btn .fa, .primary.gradient.prism-icon-btn .fa-brands, .primary.gradient.prism-icon-btn .iconfont, .primary.gradient.prism-text-btn .fa, .primary.gradient.prism-text-btn .fa-brands, .primary.gradient.prism-text-btn .iconfont, .primary.gradient.prism-icon .fa, .primary.gradient.prism-icon .fa-brands, .primary.gradient.prism-icon .iconfont, .primary.gradient.prism-btn .fa, .primary.gradient.prism-btn .fa-brands, .primary.gradient.prism-btn .iconfont, .primary.gradient.prism-card .fa, .primary.gradient.prism-card .fa-brands, .primary.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.success.gradient.prism-icon-btn, .success.gradient.prism-text-btn, .success.gradient.prism-icon, .success.gradient.prism-btn, .success.gradient.prism-card {
+  background: linear-gradient(135deg, #00B42A 0%, #6EE7B7 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 180, 42, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.success.gradient.prism-icon-btn .fa, .success.gradient.prism-icon-btn .fa-brands, .success.gradient.prism-icon-btn .iconfont, .success.gradient.prism-text-btn .fa, .success.gradient.prism-text-btn .fa-brands, .success.gradient.prism-text-btn .iconfont, .success.gradient.prism-icon .fa, .success.gradient.prism-icon .fa-brands, .success.gradient.prism-icon .iconfont, .success.gradient.prism-btn .fa, .success.gradient.prism-btn .fa-brands, .success.gradient.prism-btn .iconfont, .success.gradient.prism-card .fa, .success.gradient.prism-card .fa-brands, .success.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.warning.gradient.prism-icon-btn, .warning.gradient.prism-text-btn, .warning.gradient.prism-icon, .warning.gradient.prism-btn, .warning.gradient.prism-card {
+  background: linear-gradient(135deg, #FF7D00 0%, #FDBA74 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(255, 125, 0, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.warning.gradient.prism-icon-btn .fa, .warning.gradient.prism-icon-btn .fa-brands, .warning.gradient.prism-icon-btn .iconfont, .warning.gradient.prism-text-btn .fa, .warning.gradient.prism-text-btn .fa-brands, .warning.gradient.prism-text-btn .iconfont, .warning.gradient.prism-icon .fa, .warning.gradient.prism-icon .fa-brands, .warning.gradient.prism-icon .iconfont, .warning.gradient.prism-btn .fa, .warning.gradient.prism-btn .fa-brands, .warning.gradient.prism-btn .iconfont, .warning.gradient.prism-card .fa, .warning.gradient.prism-card .fa-brands, .warning.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.danger.gradient.prism-icon-btn, .danger.gradient.prism-text-btn, .danger.gradient.prism-icon, .danger.gradient.prism-btn, .danger.gradient.prism-card {
+  background: linear-gradient(135deg, #F53F3F 0%, #FCA5A5 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(245, 63, 63, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.danger.gradient.prism-icon-btn .fa, .danger.gradient.prism-icon-btn .fa-brands, .danger.gradient.prism-icon-btn .iconfont, .danger.gradient.prism-text-btn .fa, .danger.gradient.prism-text-btn .fa-brands, .danger.gradient.prism-text-btn .iconfont, .danger.gradient.prism-icon .fa, .danger.gradient.prism-icon .fa-brands, .danger.gradient.prism-icon .iconfont, .danger.gradient.prism-btn .fa, .danger.gradient.prism-btn .fa-brands, .danger.gradient.prism-btn .iconfont, .danger.gradient.prism-card .fa, .danger.gradient.prism-card .fa-brands, .danger.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.info.gradient.prism-icon-btn, .info.gradient.prism-text-btn, .info.gradient.prism-icon, .info.gradient.prism-btn, .info.gradient.prism-card {
+  background: linear-gradient(135deg, #14C9C9 0%, #67E8F9 100%) !important;
+  box-shadow: 0 0.25rem 0.75rem rgba(20, 201, 201, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.info.gradient.prism-icon-btn .fa, .info.gradient.prism-icon-btn .fa-brands, .info.gradient.prism-icon-btn .iconfont, .info.gradient.prism-text-btn .fa, .info.gradient.prism-text-btn .fa-brands, .info.gradient.prism-text-btn .iconfont, .info.gradient.prism-icon .fa, .info.gradient.prism-icon .fa-brands, .info.gradient.prism-icon .iconfont, .info.gradient.prism-btn .fa, .info.gradient.prism-btn .fa-brands, .info.gradient.prism-btn .iconfont, .info.gradient.prism-card .fa, .info.gradient.prism-card .fa-brands, .info.gradient.prism-card .iconfont {
+  color: #FFFFFF !important;
+}
+.purple.outline.prism-icon-btn, .purple.outline.prism-text-btn, .purple.outline.prism-icon, .purple.outline.prism-btn, .purple.outline.prism-card {
+  background: transparent !important;
+  color: #722ED1 !important;
+  border: 0.0625rem solid #722ED1;
+}
+.purple.outline.prism-icon-btn .fa, .purple.outline.prism-icon-btn .fa-brands, .purple.outline.prism-icon-btn .iconfont, .purple.outline.prism-text-btn .fa, .purple.outline.prism-text-btn .fa-brands, .purple.outline.prism-text-btn .iconfont, .purple.outline.prism-icon .fa, .purple.outline.prism-icon .fa-brands, .purple.outline.prism-icon .iconfont, .purple.outline.prism-btn .fa, .purple.outline.prism-btn .fa-brands, .purple.outline.prism-btn .iconfont, .purple.outline.prism-card .fa, .purple.outline.prism-card .fa-brands, .purple.outline.prism-card .iconfont {
+  color: #722ED1 !important;
+}
+.dark-mode .purple.outline.prism-icon-btn, .dark-mode .purple.outline.prism-text-btn, .dark-mode .purple.outline.prism-icon, .dark-mode .purple.outline.prism-btn, .dark-mode .purple.outline.prism-card {
+  color: #A855F7 !important;
+  border-color: #A855F7;
+}
+.dark-mode .purple.outline.prism-icon-btn .fa, .dark-mode .purple.outline.prism-icon-btn .fa-brands, .dark-mode .purple.outline.prism-icon-btn .iconfont, .dark-mode .purple.outline.prism-text-btn .fa, .dark-mode .purple.outline.prism-text-btn .fa-brands, .dark-mode .purple.outline.prism-text-btn .iconfont, .dark-mode .purple.outline.prism-icon .fa, .dark-mode .purple.outline.prism-icon .fa-brands, .dark-mode .purple.outline.prism-icon .iconfont, .dark-mode .purple.outline.prism-btn .fa, .dark-mode .purple.outline.prism-btn .fa-brands, .dark-mode .purple.outline.prism-btn .iconfont, .dark-mode .purple.outline.prism-card .fa, .dark-mode .purple.outline.prism-card .fa-brands, .dark-mode .purple.outline.prism-card .iconfont {
+  color: #A855F7 !important;
+}
+.blue.outline.prism-icon-btn, .outline.prism-icon-btn.primary, .blue.outline.prism-text-btn, .outline.prism-text-btn.primary, .blue.outline.prism-icon, .outline.prism-icon.primary, .blue.outline.prism-btn, .outline.prism-btn.primary, .blue.outline.prism-card, .outline.prism-card.primary {
+  background: transparent !important;
+  color: #3478F6 !important;
+  border: 0.0625rem solid #3478F6;
+}
+.blue.outline.prism-icon-btn .fa, .outline.prism-icon-btn.primary .fa, .blue.outline.prism-icon-btn .fa-brands, .outline.prism-icon-btn.primary .fa-brands, .blue.outline.prism-icon-btn .iconfont, .outline.prism-icon-btn.primary .iconfont, .blue.outline.prism-text-btn .fa, .outline.prism-text-btn.primary .fa, .blue.outline.prism-text-btn .fa-brands, .outline.prism-text-btn.primary .fa-brands, .blue.outline.prism-text-btn .iconfont, .outline.prism-text-btn.primary .iconfont, .blue.outline.prism-icon .fa, .outline.prism-icon.primary .fa, .blue.outline.prism-icon .fa-brands, .outline.prism-icon.primary .fa-brands, .blue.outline.prism-icon .iconfont, .outline.prism-icon.primary .iconfont, .blue.outline.prism-btn .fa, .outline.prism-btn.primary .fa, .blue.outline.prism-btn .fa-brands, .outline.prism-btn.primary .fa-brands, .blue.outline.prism-btn .iconfont, .outline.prism-btn.primary .iconfont, .blue.outline.prism-card .fa, .outline.prism-card.primary .fa, .blue.outline.prism-card .fa-brands, .outline.prism-card.primary .fa-brands, .blue.outline.prism-card .iconfont, .outline.prism-card.primary .iconfont {
+  color: #3478F6 !important;
+}
+.dark-mode .blue.outline.prism-icon-btn, .dark-mode .outline.prism-icon-btn.primary, .dark-mode .blue.outline.prism-text-btn, .dark-mode .outline.prism-text-btn.primary, .dark-mode .blue.outline.prism-icon, .dark-mode .outline.prism-icon.primary, .dark-mode .blue.outline.prism-btn, .dark-mode .outline.prism-btn.primary, .dark-mode .blue.outline.prism-card, .dark-mode .outline.prism-card.primary {
+  color: #60A5FA !important;
+  border-color: #60A5FA;
+}
+.dark-mode .blue.outline.prism-icon-btn .fa, .dark-mode .outline.prism-icon-btn.primary .fa, .dark-mode .blue.outline.prism-icon-btn .fa-brands, .dark-mode .outline.prism-icon-btn.primary .fa-brands, .dark-mode .blue.outline.prism-icon-btn .iconfont, .dark-mode .outline.prism-icon-btn.primary .iconfont, .dark-mode .blue.outline.prism-text-btn .fa, .dark-mode .outline.prism-text-btn.primary .fa, .dark-mode .blue.outline.prism-text-btn .fa-brands, .dark-mode .outline.prism-text-btn.primary .fa-brands, .dark-mode .blue.outline.prism-text-btn .iconfont, .dark-mode .outline.prism-text-btn.primary .iconfont, .dark-mode .blue.outline.prism-icon .fa, .dark-mode .outline.prism-icon.primary .fa, .dark-mode .blue.outline.prism-icon .fa-brands, .dark-mode .outline.prism-icon.primary .fa-brands, .dark-mode .blue.outline.prism-icon .iconfont, .dark-mode .outline.prism-icon.primary .iconfont, .dark-mode .blue.outline.prism-btn .fa, .dark-mode .outline.prism-btn.primary .fa, .dark-mode .blue.outline.prism-btn .fa-brands, .dark-mode .outline.prism-btn.primary .fa-brands, .dark-mode .blue.outline.prism-btn .iconfont, .dark-mode .outline.prism-btn.primary .iconfont, .dark-mode .blue.outline.prism-card .fa, .dark-mode .outline.prism-card.primary .fa, .dark-mode .blue.outline.prism-card .fa-brands, .dark-mode .outline.prism-card.primary .fa-brands, .dark-mode .blue.outline.prism-card .iconfont, .dark-mode .outline.prism-card.primary .iconfont {
+  color: #60A5FA !important;
+}
+.green.outline.prism-icon-btn, .outline.prism-icon-btn.success, .green.outline.prism-text-btn, .outline.prism-text-btn.success, .green.outline.prism-icon, .outline.prism-icon.success, .green.outline.prism-btn, .outline.prism-btn.success, .green.outline.prism-card, .outline.prism-card.success {
+  background: transparent !important;
+  color: #00B42A !important;
+  border: 0.0625rem solid #00B42A;
+}
+.green.outline.prism-icon-btn .fa, .outline.prism-icon-btn.success .fa, .green.outline.prism-icon-btn .fa-brands, .outline.prism-icon-btn.success .fa-brands, .green.outline.prism-icon-btn .iconfont, .outline.prism-icon-btn.success .iconfont, .green.outline.prism-text-btn .fa, .outline.prism-text-btn.success .fa, .green.outline.prism-text-btn .fa-brands, .outline.prism-text-btn.success .fa-brands, .green.outline.prism-text-btn .iconfont, .outline.prism-text-btn.success .iconfont, .green.outline.prism-icon .fa, .outline.prism-icon.success .fa, .green.outline.prism-icon .fa-brands, .outline.prism-icon.success .fa-brands, .green.outline.prism-icon .iconfont, .outline.prism-icon.success .iconfont, .green.outline.prism-btn .fa, .outline.prism-btn.success .fa, .green.outline.prism-btn .fa-brands, .outline.prism-btn.success .fa-brands, .green.outline.prism-btn .iconfont, .outline.prism-btn.success .iconfont, .green.outline.prism-card .fa, .outline.prism-card.success .fa, .green.outline.prism-card .fa-brands, .outline.prism-card.success .fa-brands, .green.outline.prism-card .iconfont, .outline.prism-card.success .iconfont {
+  color: #00B42A !important;
+}
+.dark-mode .green.outline.prism-icon-btn, .dark-mode .outline.prism-icon-btn.success, .dark-mode .green.outline.prism-text-btn, .dark-mode .outline.prism-text-btn.success, .dark-mode .green.outline.prism-icon, .dark-mode .outline.prism-icon.success, .dark-mode .green.outline.prism-btn, .dark-mode .outline.prism-btn.success, .dark-mode .green.outline.prism-card, .dark-mode .outline.prism-card.success {
+  color: #34D399 !important;
+  border-color: #34D399;
+}
+.dark-mode .green.outline.prism-icon-btn .fa, .dark-mode .outline.prism-icon-btn.success .fa, .dark-mode .green.outline.prism-icon-btn .fa-brands, .dark-mode .outline.prism-icon-btn.success .fa-brands, .dark-mode .green.outline.prism-icon-btn .iconfont, .dark-mode .outline.prism-icon-btn.success .iconfont, .dark-mode .green.outline.prism-text-btn .fa, .dark-mode .outline.prism-text-btn.success .fa, .dark-mode .green.outline.prism-text-btn .fa-brands, .dark-mode .outline.prism-text-btn.success .fa-brands, .dark-mode .green.outline.prism-text-btn .iconfont, .dark-mode .outline.prism-text-btn.success .iconfont, .dark-mode .green.outline.prism-icon .fa, .dark-mode .outline.prism-icon.success .fa, .dark-mode .green.outline.prism-icon .fa-brands, .dark-mode .outline.prism-icon.success .fa-brands, .dark-mode .green.outline.prism-icon .iconfont, .dark-mode .outline.prism-icon.success .iconfont, .dark-mode .green.outline.prism-btn .fa, .dark-mode .outline.prism-btn.success .fa, .dark-mode .green.outline.prism-btn .fa-brands, .dark-mode .outline.prism-btn.success .fa-brands, .dark-mode .green.outline.prism-btn .iconfont, .dark-mode .outline.prism-btn.success .iconfont, .dark-mode .green.outline.prism-card .fa, .dark-mode .outline.prism-card.success .fa, .dark-mode .green.outline.prism-card .fa-brands, .dark-mode .outline.prism-card.success .fa-brands, .dark-mode .green.outline.prism-card .iconfont, .dark-mode .outline.prism-card.success .iconfont {
+  color: #34D399 !important;
+}
+.red.outline.prism-icon-btn, .outline.prism-icon-btn.danger, .red.outline.prism-text-btn, .outline.prism-text-btn.danger, .red.outline.prism-icon, .outline.prism-icon.danger, .red.outline.prism-btn, .outline.prism-btn.danger, .red.outline.prism-card, .outline.prism-card.danger {
+  background: transparent !important;
+  color: #F53F3F !important;
+  border: 0.0625rem solid #F53F3F;
+}
+.red.outline.prism-icon-btn .fa, .outline.prism-icon-btn.danger .fa, .red.outline.prism-icon-btn .fa-brands, .outline.prism-icon-btn.danger .fa-brands, .red.outline.prism-icon-btn .iconfont, .outline.prism-icon-btn.danger .iconfont, .red.outline.prism-text-btn .fa, .outline.prism-text-btn.danger .fa, .red.outline.prism-text-btn .fa-brands, .outline.prism-text-btn.danger .fa-brands, .red.outline.prism-text-btn .iconfont, .outline.prism-text-btn.danger .iconfont, .red.outline.prism-icon .fa, .outline.prism-icon.danger .fa, .red.outline.prism-icon .fa-brands, .outline.prism-icon.danger .fa-brands, .red.outline.prism-icon .iconfont, .outline.prism-icon.danger .iconfont, .red.outline.prism-btn .fa, .outline.prism-btn.danger .fa, .red.outline.prism-btn .fa-brands, .outline.prism-btn.danger .fa-brands, .red.outline.prism-btn .iconfont, .outline.prism-btn.danger .iconfont, .red.outline.prism-card .fa, .outline.prism-card.danger .fa, .red.outline.prism-card .fa-brands, .outline.prism-card.danger .fa-brands, .red.outline.prism-card .iconfont, .outline.prism-card.danger .iconfont {
+  color: #F53F3F !important;
+}
+.dark-mode .red.outline.prism-icon-btn, .dark-mode .outline.prism-icon-btn.danger, .dark-mode .red.outline.prism-text-btn, .dark-mode .outline.prism-text-btn.danger, .dark-mode .red.outline.prism-icon, .dark-mode .outline.prism-icon.danger, .dark-mode .red.outline.prism-btn, .dark-mode .outline.prism-btn.danger, .dark-mode .red.outline.prism-card, .dark-mode .outline.prism-card.danger {
+  color: #F87171 !important;
+  border-color: #F87171;
+}
+.dark-mode .red.outline.prism-icon-btn .fa, .dark-mode .outline.prism-icon-btn.danger .fa, .dark-mode .red.outline.prism-icon-btn .fa-brands, .dark-mode .outline.prism-icon-btn.danger .fa-brands, .dark-mode .red.outline.prism-icon-btn .iconfont, .dark-mode .outline.prism-icon-btn.danger .iconfont, .dark-mode .red.outline.prism-text-btn .fa, .dark-mode .outline.prism-text-btn.danger .fa, .dark-mode .red.outline.prism-text-btn .fa-brands, .dark-mode .outline.prism-text-btn.danger .fa-brands, .dark-mode .red.outline.prism-text-btn .iconfont, .dark-mode .outline.prism-text-btn.danger .iconfont, .dark-mode .red.outline.prism-icon .fa, .dark-mode .outline.prism-icon.danger .fa, .dark-mode .red.outline.prism-icon .fa-brands, .dark-mode .outline.prism-icon.danger .fa-brands, .dark-mode .red.outline.prism-icon .iconfont, .dark-mode .outline.prism-icon.danger .iconfont, .dark-mode .red.outline.prism-btn .fa, .dark-mode .outline.prism-btn.danger .fa, .dark-mode .red.outline.prism-btn .fa-brands, .dark-mode .outline.prism-btn.danger .fa-brands, .dark-mode .red.outline.prism-btn .iconfont, .dark-mode .outline.prism-btn.danger .iconfont, .dark-mode .red.outline.prism-card .fa, .dark-mode .outline.prism-card.danger .fa, .dark-mode .red.outline.prism-card .fa-brands, .dark-mode .outline.prism-card.danger .fa-brands, .dark-mode .red.outline.prism-card .iconfont, .dark-mode .outline.prism-card.danger .iconfont {
+  color: #F87171 !important;
+}
+.orange.outline.prism-icon-btn, .outline.prism-icon-btn.warning, .orange.outline.prism-text-btn, .outline.prism-text-btn.warning, .orange.outline.prism-icon, .outline.prism-icon.warning, .orange.outline.prism-btn, .outline.prism-btn.warning, .orange.outline.prism-card, .outline.prism-card.warning {
+  background: transparent !important;
+  color: #FF7D00 !important;
+  border: 0.0625rem solid #FF7D00;
+}
+.orange.outline.prism-icon-btn .fa, .outline.prism-icon-btn.warning .fa, .orange.outline.prism-icon-btn .fa-brands, .outline.prism-icon-btn.warning .fa-brands, .orange.outline.prism-icon-btn .iconfont, .outline.prism-icon-btn.warning .iconfont, .orange.outline.prism-text-btn .fa, .outline.prism-text-btn.warning .fa, .orange.outline.prism-text-btn .fa-brands, .outline.prism-text-btn.warning .fa-brands, .orange.outline.prism-text-btn .iconfont, .outline.prism-text-btn.warning .iconfont, .orange.outline.prism-icon .fa, .outline.prism-icon.warning .fa, .orange.outline.prism-icon .fa-brands, .outline.prism-icon.warning .fa-brands, .orange.outline.prism-icon .iconfont, .outline.prism-icon.warning .iconfont, .orange.outline.prism-btn .fa, .outline.prism-btn.warning .fa, .orange.outline.prism-btn .fa-brands, .outline.prism-btn.warning .fa-brands, .orange.outline.prism-btn .iconfont, .outline.prism-btn.warning .iconfont, .orange.outline.prism-card .fa, .outline.prism-card.warning .fa, .orange.outline.prism-card .fa-brands, .outline.prism-card.warning .fa-brands, .orange.outline.prism-card .iconfont, .outline.prism-card.warning .iconfont {
+  color: #FF7D00 !important;
+}
+.dark-mode .orange.outline.prism-icon-btn, .dark-mode .outline.prism-icon-btn.warning, .dark-mode .orange.outline.prism-text-btn, .dark-mode .outline.prism-text-btn.warning, .dark-mode .orange.outline.prism-icon, .dark-mode .outline.prism-icon.warning, .dark-mode .orange.outline.prism-btn, .dark-mode .outline.prism-btn.warning, .dark-mode .orange.outline.prism-card, .dark-mode .outline.prism-card.warning {
+  color: #FB923C !important;
+  border-color: #FB923C;
+}
+.dark-mode .orange.outline.prism-icon-btn .fa, .dark-mode .outline.prism-icon-btn.warning .fa, .dark-mode .orange.outline.prism-icon-btn .fa-brands, .dark-mode .outline.prism-icon-btn.warning .fa-brands, .dark-mode .orange.outline.prism-icon-btn .iconfont, .dark-mode .outline.prism-icon-btn.warning .iconfont, .dark-mode .orange.outline.prism-text-btn .fa, .dark-mode .outline.prism-text-btn.warning .fa, .dark-mode .orange.outline.prism-text-btn .fa-brands, .dark-mode .outline.prism-text-btn.warning .fa-brands, .dark-mode .orange.outline.prism-text-btn .iconfont, .dark-mode .outline.prism-text-btn.warning .iconfont, .dark-mode .orange.outline.prism-icon .fa, .dark-mode .outline.prism-icon.warning .fa, .dark-mode .orange.outline.prism-icon .fa-brands, .dark-mode .outline.prism-icon.warning .fa-brands, .dark-mode .orange.outline.prism-icon .iconfont, .dark-mode .outline.prism-icon.warning .iconfont, .dark-mode .orange.outline.prism-btn .fa, .dark-mode .outline.prism-btn.warning .fa, .dark-mode .orange.outline.prism-btn .fa-brands, .dark-mode .outline.prism-btn.warning .fa-brands, .dark-mode .orange.outline.prism-btn .iconfont, .dark-mode .outline.prism-btn.warning .iconfont, .dark-mode .orange.outline.prism-card .fa, .dark-mode .outline.prism-card.warning .fa, .dark-mode .orange.outline.prism-card .fa-brands, .dark-mode .outline.prism-card.warning .fa-brands, .dark-mode .orange.outline.prism-card .iconfont, .dark-mode .outline.prism-card.warning .iconfont {
+  color: #FB923C !important;
+}
+.cyan.outline.prism-icon-btn, .outline.prism-icon-btn.info, .cyan.outline.prism-text-btn, .outline.prism-text-btn.info, .cyan.outline.prism-icon, .outline.prism-icon.info, .cyan.outline.prism-btn, .outline.prism-btn.info, .cyan.outline.prism-card, .outline.prism-card.info {
+  background: transparent !important;
+  color: #14C9C9 !important;
+  border: 0.0625rem solid #14C9C9;
+}
+.cyan.outline.prism-icon-btn .fa, .outline.prism-icon-btn.info .fa, .cyan.outline.prism-icon-btn .fa-brands, .outline.prism-icon-btn.info .fa-brands, .cyan.outline.prism-icon-btn .iconfont, .outline.prism-icon-btn.info .iconfont, .cyan.outline.prism-text-btn .fa, .outline.prism-text-btn.info .fa, .cyan.outline.prism-text-btn .fa-brands, .outline.prism-text-btn.info .fa-brands, .cyan.outline.prism-text-btn .iconfont, .outline.prism-text-btn.info .iconfont, .cyan.outline.prism-icon .fa, .outline.prism-icon.info .fa, .cyan.outline.prism-icon .fa-brands, .outline.prism-icon.info .fa-brands, .cyan.outline.prism-icon .iconfont, .outline.prism-icon.info .iconfont, .cyan.outline.prism-btn .fa, .outline.prism-btn.info .fa, .cyan.outline.prism-btn .fa-brands, .outline.prism-btn.info .fa-brands, .cyan.outline.prism-btn .iconfont, .outline.prism-btn.info .iconfont, .cyan.outline.prism-card .fa, .outline.prism-card.info .fa, .cyan.outline.prism-card .fa-brands, .outline.prism-card.info .fa-brands, .cyan.outline.prism-card .iconfont, .outline.prism-card.info .iconfont {
+  color: #14C9C9 !important;
+}
+.dark-mode .cyan.outline.prism-icon-btn, .dark-mode .outline.prism-icon-btn.info, .dark-mode .cyan.outline.prism-text-btn, .dark-mode .outline.prism-text-btn.info, .dark-mode .cyan.outline.prism-icon, .dark-mode .outline.prism-icon.info, .dark-mode .cyan.outline.prism-btn, .dark-mode .outline.prism-btn.info, .dark-mode .cyan.outline.prism-card, .dark-mode .outline.prism-card.info {
+  color: #22D3EE !important;
+  border-color: #22D3EE;
+}
+.dark-mode .cyan.outline.prism-icon-btn .fa, .dark-mode .outline.prism-icon-btn.info .fa, .dark-mode .cyan.outline.prism-icon-btn .fa-brands, .dark-mode .outline.prism-icon-btn.info .fa-brands, .dark-mode .cyan.outline.prism-icon-btn .iconfont, .dark-mode .outline.prism-icon-btn.info .iconfont, .dark-mode .cyan.outline.prism-text-btn .fa, .dark-mode .outline.prism-text-btn.info .fa, .dark-mode .cyan.outline.prism-text-btn .fa-brands, .dark-mode .outline.prism-text-btn.info .fa-brands, .dark-mode .cyan.outline.prism-text-btn .iconfont, .dark-mode .outline.prism-text-btn.info .iconfont, .dark-mode .cyan.outline.prism-icon .fa, .dark-mode .outline.prism-icon.info .fa, .dark-mode .cyan.outline.prism-icon .fa-brands, .dark-mode .outline.prism-icon.info .fa-brands, .dark-mode .cyan.outline.prism-icon .iconfont, .dark-mode .outline.prism-icon.info .iconfont, .dark-mode .cyan.outline.prism-btn .fa, .dark-mode .outline.prism-btn.info .fa, .dark-mode .cyan.outline.prism-btn .fa-brands, .dark-mode .outline.prism-btn.info .fa-brands, .dark-mode .cyan.outline.prism-btn .iconfont, .dark-mode .outline.prism-btn.info .iconfont, .dark-mode .cyan.outline.prism-card .fa, .dark-mode .outline.prism-card.info .fa, .dark-mode .cyan.outline.prism-card .fa-brands, .dark-mode .outline.prism-card.info .fa-brands, .dark-mode .cyan.outline.prism-card .iconfont, .dark-mode .outline.prism-card.info .iconfont {
+  color: #22D3EE !important;
+}
+.yellow.outline.prism-icon-btn, .yellow.outline.prism-text-btn, .yellow.outline.prism-icon, .yellow.outline.prism-btn, .yellow.outline.prism-card {
+  background: transparent !important;
+  color: #FFB400 !important;
+  border: 0.0625rem solid #FFB400;
+}
+.yellow.outline.prism-icon-btn .fa, .yellow.outline.prism-icon-btn .fa-brands, .yellow.outline.prism-icon-btn .iconfont, .yellow.outline.prism-text-btn .fa, .yellow.outline.prism-text-btn .fa-brands, .yellow.outline.prism-text-btn .iconfont, .yellow.outline.prism-icon .fa, .yellow.outline.prism-icon .fa-brands, .yellow.outline.prism-icon .iconfont, .yellow.outline.prism-btn .fa, .yellow.outline.prism-btn .fa-brands, .yellow.outline.prism-btn .iconfont, .yellow.outline.prism-card .fa, .yellow.outline.prism-card .fa-brands, .yellow.outline.prism-card .iconfont {
+  color: #FFB400 !important;
+}
+.dark-mode .yellow.outline.prism-icon-btn, .dark-mode .yellow.outline.prism-text-btn, .dark-mode .yellow.outline.prism-icon, .dark-mode .yellow.outline.prism-btn, .dark-mode .yellow.outline.prism-card {
+  color: #FCD34D !important;
+  border-color: #FCD34D;
+}
+.dark-mode .yellow.outline.prism-icon-btn .fa, .dark-mode .yellow.outline.prism-icon-btn .fa-brands, .dark-mode .yellow.outline.prism-icon-btn .iconfont, .dark-mode .yellow.outline.prism-text-btn .fa, .dark-mode .yellow.outline.prism-text-btn .fa-brands, .dark-mode .yellow.outline.prism-text-btn .iconfont, .dark-mode .yellow.outline.prism-icon .fa, .dark-mode .yellow.outline.prism-icon .fa-brands, .dark-mode .yellow.outline.prism-icon .iconfont, .dark-mode .yellow.outline.prism-btn .fa, .dark-mode .yellow.outline.prism-btn .fa-brands, .dark-mode .yellow.outline.prism-btn .iconfont, .dark-mode .yellow.outline.prism-card .fa, .dark-mode .yellow.outline.prism-card .fa-brands, .dark-mode .yellow.outline.prism-card .iconfont {
+  color: #FCD34D !important;
+}
+.pink.outline.prism-icon-btn, .pink.outline.prism-text-btn, .pink.outline.prism-icon, .pink.outline.prism-btn, .pink.outline.prism-card {
+  background: transparent !important;
+  color: #F53F7F !important;
+  border: 0.0625rem solid #F53F7F;
+}
+.pink.outline.prism-icon-btn .fa, .pink.outline.prism-icon-btn .fa-brands, .pink.outline.prism-icon-btn .iconfont, .pink.outline.prism-text-btn .fa, .pink.outline.prism-text-btn .fa-brands, .pink.outline.prism-text-btn .iconfont, .pink.outline.prism-icon .fa, .pink.outline.prism-icon .fa-brands, .pink.outline.prism-icon .iconfont, .pink.outline.prism-btn .fa, .pink.outline.prism-btn .fa-brands, .pink.outline.prism-btn .iconfont, .pink.outline.prism-card .fa, .pink.outline.prism-card .fa-brands, .pink.outline.prism-card .iconfont {
+  color: #F53F7F !important;
+}
+.dark-mode .pink.outline.prism-icon-btn, .dark-mode .pink.outline.prism-text-btn, .dark-mode .pink.outline.prism-icon, .dark-mode .pink.outline.prism-btn, .dark-mode .pink.outline.prism-card {
+  color: #F472B6 !important;
+  border-color: #F472B6;
+}
+.dark-mode .pink.outline.prism-icon-btn .fa, .dark-mode .pink.outline.prism-icon-btn .fa-brands, .dark-mode .pink.outline.prism-icon-btn .iconfont, .dark-mode .pink.outline.prism-text-btn .fa, .dark-mode .pink.outline.prism-text-btn .fa-brands, .dark-mode .pink.outline.prism-text-btn .iconfont, .dark-mode .pink.outline.prism-icon .fa, .dark-mode .pink.outline.prism-icon .fa-brands, .dark-mode .pink.outline.prism-icon .iconfont, .dark-mode .pink.outline.prism-btn .fa, .dark-mode .pink.outline.prism-btn .fa-brands, .dark-mode .pink.outline.prism-btn .iconfont, .dark-mode .pink.outline.prism-card .fa, .dark-mode .pink.outline.prism-card .fa-brands, .dark-mode .pink.outline.prism-card .iconfont {
+  color: #F472B6 !important;
+}
+.magenta.outline.prism-icon-btn, .magenta.outline.prism-text-btn, .magenta.outline.prism-icon, .magenta.outline.prism-btn, .magenta.outline.prism-card {
+  background: transparent !important;
+  color: #EB2F96 !important;
+  border: 0.0625rem solid #EB2F96;
+}
+.magenta.outline.prism-icon-btn .fa, .magenta.outline.prism-icon-btn .fa-brands, .magenta.outline.prism-icon-btn .iconfont, .magenta.outline.prism-text-btn .fa, .magenta.outline.prism-text-btn .fa-brands, .magenta.outline.prism-text-btn .iconfont, .magenta.outline.prism-icon .fa, .magenta.outline.prism-icon .fa-brands, .magenta.outline.prism-icon .iconfont, .magenta.outline.prism-btn .fa, .magenta.outline.prism-btn .fa-brands, .magenta.outline.prism-btn .iconfont, .magenta.outline.prism-card .fa, .magenta.outline.prism-card .fa-brands, .magenta.outline.prism-card .iconfont {
+  color: #EB2F96 !important;
+}
+.dark-mode .magenta.outline.prism-icon-btn, .dark-mode .magenta.outline.prism-text-btn, .dark-mode .magenta.outline.prism-icon, .dark-mode .magenta.outline.prism-btn, .dark-mode .magenta.outline.prism-card {
+  color: #EC4899 !important;
+  border-color: #EC4899;
+}
+.dark-mode .magenta.outline.prism-icon-btn .fa, .dark-mode .magenta.outline.prism-icon-btn .fa-brands, .dark-mode .magenta.outline.prism-icon-btn .iconfont, .dark-mode .magenta.outline.prism-text-btn .fa, .dark-mode .magenta.outline.prism-text-btn .fa-brands, .dark-mode .magenta.outline.prism-text-btn .iconfont, .dark-mode .magenta.outline.prism-icon .fa, .dark-mode .magenta.outline.prism-icon .fa-brands, .dark-mode .magenta.outline.prism-icon .iconfont, .dark-mode .magenta.outline.prism-btn .fa, .dark-mode .magenta.outline.prism-btn .fa-brands, .dark-mode .magenta.outline.prism-btn .iconfont, .dark-mode .magenta.outline.prism-card .fa, .dark-mode .magenta.outline.prism-card .fa-brands, .dark-mode .magenta.outline.prism-card .iconfont {
+  color: #EC4899 !important;
+}
+.indigo.outline.prism-icon-btn, .indigo.outline.prism-text-btn, .indigo.outline.prism-icon, .indigo.outline.prism-btn, .indigo.outline.prism-card {
+  background: transparent !important;
+  color: #2F54EB !important;
+  border: 0.0625rem solid #2F54EB;
+}
+.indigo.outline.prism-icon-btn .fa, .indigo.outline.prism-icon-btn .fa-brands, .indigo.outline.prism-icon-btn .iconfont, .indigo.outline.prism-text-btn .fa, .indigo.outline.prism-text-btn .fa-brands, .indigo.outline.prism-text-btn .iconfont, .indigo.outline.prism-icon .fa, .indigo.outline.prism-icon .fa-brands, .indigo.outline.prism-icon .iconfont, .indigo.outline.prism-btn .fa, .indigo.outline.prism-btn .fa-brands, .indigo.outline.prism-btn .iconfont, .indigo.outline.prism-card .fa, .indigo.outline.prism-card .fa-brands, .indigo.outline.prism-card .iconfont {
+  color: #2F54EB !important;
+}
+.dark-mode .indigo.outline.prism-icon-btn, .dark-mode .indigo.outline.prism-text-btn, .dark-mode .indigo.outline.prism-icon, .dark-mode .indigo.outline.prism-btn, .dark-mode .indigo.outline.prism-card {
+  color: #818CF8 !important;
+  border-color: #818CF8;
+}
+.dark-mode .indigo.outline.prism-icon-btn .fa, .dark-mode .indigo.outline.prism-icon-btn .fa-brands, .dark-mode .indigo.outline.prism-icon-btn .iconfont, .dark-mode .indigo.outline.prism-text-btn .fa, .dark-mode .indigo.outline.prism-text-btn .fa-brands, .dark-mode .indigo.outline.prism-text-btn .iconfont, .dark-mode .indigo.outline.prism-icon .fa, .dark-mode .indigo.outline.prism-icon .fa-brands, .dark-mode .indigo.outline.prism-icon .iconfont, .dark-mode .indigo.outline.prism-btn .fa, .dark-mode .indigo.outline.prism-btn .fa-brands, .dark-mode .indigo.outline.prism-btn .iconfont, .dark-mode .indigo.outline.prism-card .fa, .dark-mode .indigo.outline.prism-card .fa-brands, .dark-mode .indigo.outline.prism-card .iconfont {
+  color: #818CF8 !important;
+}
+.teal.outline.prism-icon-btn, .teal.outline.prism-text-btn, .teal.outline.prism-icon, .teal.outline.prism-btn, .teal.outline.prism-card {
+  background: transparent !important;
+  color: #13C2C2 !important;
+  border: 0.0625rem solid #13C2C2;
+}
+.teal.outline.prism-icon-btn .fa, .teal.outline.prism-icon-btn .fa-brands, .teal.outline.prism-icon-btn .iconfont, .teal.outline.prism-text-btn .fa, .teal.outline.prism-text-btn .fa-brands, .teal.outline.prism-text-btn .iconfont, .teal.outline.prism-icon .fa, .teal.outline.prism-icon .fa-brands, .teal.outline.prism-icon .iconfont, .teal.outline.prism-btn .fa, .teal.outline.prism-btn .fa-brands, .teal.outline.prism-btn .iconfont, .teal.outline.prism-card .fa, .teal.outline.prism-card .fa-brands, .teal.outline.prism-card .iconfont {
+  color: #13C2C2 !important;
+}
+.dark-mode .teal.outline.prism-icon-btn, .dark-mode .teal.outline.prism-text-btn, .dark-mode .teal.outline.prism-icon, .dark-mode .teal.outline.prism-btn, .dark-mode .teal.outline.prism-card {
+  color: #2DD4BF !important;
+  border-color: #2DD4BF;
+}
+.dark-mode .teal.outline.prism-icon-btn .fa, .dark-mode .teal.outline.prism-icon-btn .fa-brands, .dark-mode .teal.outline.prism-icon-btn .iconfont, .dark-mode .teal.outline.prism-text-btn .fa, .dark-mode .teal.outline.prism-text-btn .fa-brands, .dark-mode .teal.outline.prism-text-btn .iconfont, .dark-mode .teal.outline.prism-icon .fa, .dark-mode .teal.outline.prism-icon .fa-brands, .dark-mode .teal.outline.prism-icon .iconfont, .dark-mode .teal.outline.prism-btn .fa, .dark-mode .teal.outline.prism-btn .fa-brands, .dark-mode .teal.outline.prism-btn .iconfont, .dark-mode .teal.outline.prism-card .fa, .dark-mode .teal.outline.prism-card .fa-brands, .dark-mode .teal.outline.prism-card .iconfont {
+  color: #2DD4BF !important;
+}
+.violet.outline.prism-icon-btn, .violet.outline.prism-text-btn, .violet.outline.prism-icon, .violet.outline.prism-btn, .violet.outline.prism-card {
+  background: transparent !important;
+  color: #667eea !important;
+  border: 0.0625rem solid #667eea;
+}
+.violet.outline.prism-icon-btn .fa, .violet.outline.prism-icon-btn .fa-brands, .violet.outline.prism-icon-btn .iconfont, .violet.outline.prism-text-btn .fa, .violet.outline.prism-text-btn .fa-brands, .violet.outline.prism-text-btn .iconfont, .violet.outline.prism-icon .fa, .violet.outline.prism-icon .fa-brands, .violet.outline.prism-icon .iconfont, .violet.outline.prism-btn .fa, .violet.outline.prism-btn .fa-brands, .violet.outline.prism-btn .iconfont, .violet.outline.prism-card .fa, .violet.outline.prism-card .fa-brands, .violet.outline.prism-card .iconfont {
+  color: #667eea !important;
+}
+.dark-mode .violet.outline.prism-icon-btn, .dark-mode .violet.outline.prism-text-btn, .dark-mode .violet.outline.prism-icon, .dark-mode .violet.outline.prism-btn, .dark-mode .violet.outline.prism-card {
+  color: #8599ee !important;
+  border-color: #8599ee;
+}
+.dark-mode .violet.outline.prism-icon-btn .fa, .dark-mode .violet.outline.prism-icon-btn .fa-brands, .dark-mode .violet.outline.prism-icon-btn .iconfont, .dark-mode .violet.outline.prism-text-btn .fa, .dark-mode .violet.outline.prism-text-btn .fa-brands, .dark-mode .violet.outline.prism-text-btn .iconfont, .dark-mode .violet.outline.prism-icon .fa, .dark-mode .violet.outline.prism-icon .fa-brands, .dark-mode .violet.outline.prism-icon .iconfont, .dark-mode .violet.outline.prism-btn .fa, .dark-mode .violet.outline.prism-btn .fa-brands, .dark-mode .violet.outline.prism-btn .iconfont, .dark-mode .violet.outline.prism-card .fa, .dark-mode .violet.outline.prism-card .fa-brands, .dark-mode .violet.outline.prism-card .iconfont {
+  color: #8599ee !important;
+}
+.rose.outline.prism-icon-btn, .rose.outline.prism-text-btn, .rose.outline.prism-icon, .rose.outline.prism-btn, .rose.outline.prism-card {
+  background: transparent !important;
+  color: #f093fb !important;
+  border: 0.0625rem solid #f093fb;
+}
+.rose.outline.prism-icon-btn .fa, .rose.outline.prism-icon-btn .fa-brands, .rose.outline.prism-icon-btn .iconfont, .rose.outline.prism-text-btn .fa, .rose.outline.prism-text-btn .fa-brands, .rose.outline.prism-text-btn .iconfont, .rose.outline.prism-icon .fa, .rose.outline.prism-icon .fa-brands, .rose.outline.prism-icon .iconfont, .rose.outline.prism-btn .fa, .rose.outline.prism-btn .fa-brands, .rose.outline.prism-btn .iconfont, .rose.outline.prism-card .fa, .rose.outline.prism-card .fa-brands, .rose.outline.prism-card .iconfont {
+  color: #f093fb !important;
+}
+.dark-mode .rose.outline.prism-icon-btn, .dark-mode .rose.outline.prism-text-btn, .dark-mode .rose.outline.prism-icon, .dark-mode .rose.outline.prism-btn, .dark-mode .rose.outline.prism-card {
+  color: #f5576c !important;
+  border-color: #f5576c;
+}
+.dark-mode .rose.outline.prism-icon-btn .fa, .dark-mode .rose.outline.prism-icon-btn .fa-brands, .dark-mode .rose.outline.prism-icon-btn .iconfont, .dark-mode .rose.outline.prism-text-btn .fa, .dark-mode .rose.outline.prism-text-btn .fa-brands, .dark-mode .rose.outline.prism-text-btn .iconfont, .dark-mode .rose.outline.prism-icon .fa, .dark-mode .rose.outline.prism-icon .fa-brands, .dark-mode .rose.outline.prism-icon .iconfont, .dark-mode .rose.outline.prism-btn .fa, .dark-mode .rose.outline.prism-btn .fa-brands, .dark-mode .rose.outline.prism-btn .iconfont, .dark-mode .rose.outline.prism-card .fa, .dark-mode .rose.outline.prism-card .fa-brands, .dark-mode .rose.outline.prism-card .iconfont {
+  color: #f5576c !important;
+}
+.ai.outline.prism-icon-btn, .ai.outline.prism-text-btn, .ai.outline.prism-icon, .ai.outline.prism-btn, .ai.outline.prism-card {
+  background: transparent !important;
+  color: #c44569 !important;
+  border: 0.0625rem solid #c44569;
+}
+.ai.outline.prism-icon-btn .fa, .ai.outline.prism-icon-btn .fa-brands, .ai.outline.prism-icon-btn .iconfont, .ai.outline.prism-text-btn .fa, .ai.outline.prism-text-btn .fa-brands, .ai.outline.prism-text-btn .iconfont, .ai.outline.prism-icon .fa, .ai.outline.prism-icon .fa-brands, .ai.outline.prism-icon .iconfont, .ai.outline.prism-btn .fa, .ai.outline.prism-btn .fa-brands, .ai.outline.prism-btn .iconfont, .ai.outline.prism-card .fa, .ai.outline.prism-card .fa-brands, .ai.outline.prism-card .iconfont {
+  color: #c44569 !important;
+}
+.dark-mode .ai.outline.prism-icon-btn, .dark-mode .ai.outline.prism-text-btn, .dark-mode .ai.outline.prism-icon, .dark-mode .ai.outline.prism-btn, .dark-mode .ai.outline.prism-card {
+  color: #ee5a6f !important;
+  border-color: #ee5a6f;
+}
+.dark-mode .ai.outline.prism-icon-btn .fa, .dark-mode .ai.outline.prism-icon-btn .fa-brands, .dark-mode .ai.outline.prism-icon-btn .iconfont, .dark-mode .ai.outline.prism-text-btn .fa, .dark-mode .ai.outline.prism-text-btn .fa-brands, .dark-mode .ai.outline.prism-text-btn .iconfont, .dark-mode .ai.outline.prism-icon .fa, .dark-mode .ai.outline.prism-icon .fa-brands, .dark-mode .ai.outline.prism-icon .iconfont, .dark-mode .ai.outline.prism-btn .fa, .dark-mode .ai.outline.prism-btn .fa-brands, .dark-mode .ai.outline.prism-btn .iconfont, .dark-mode .ai.outline.prism-card .fa, .dark-mode .ai.outline.prism-card .fa-brands, .dark-mode .ai.outline.prism-card .iconfont {
+  color: #ee5a6f !important;
+}
+.primary.outline.prism-icon-btn, .primary.outline.prism-text-btn, .primary.outline.prism-icon, .primary.outline.prism-btn, .primary.outline.prism-card {
+  background: transparent !important;
+  color: #3478F6 !important;
+  border: 0.0625rem solid #3478F6;
+}
+.primary.outline.prism-icon-btn .fa, .primary.outline.prism-icon-btn .fa-brands, .primary.outline.prism-icon-btn .iconfont, .primary.outline.prism-text-btn .fa, .primary.outline.prism-text-btn .fa-brands, .primary.outline.prism-text-btn .iconfont, .primary.outline.prism-icon .fa, .primary.outline.prism-icon .fa-brands, .primary.outline.prism-icon .iconfont, .primary.outline.prism-btn .fa, .primary.outline.prism-btn .fa-brands, .primary.outline.prism-btn .iconfont, .primary.outline.prism-card .fa, .primary.outline.prism-card .fa-brands, .primary.outline.prism-card .iconfont {
+  color: #3478F6 !important;
+}
+.dark-mode .primary.outline.prism-icon-btn, .dark-mode .primary.outline.prism-text-btn, .dark-mode .primary.outline.prism-icon, .dark-mode .primary.outline.prism-btn, .dark-mode .primary.outline.prism-card {
+  color: #60A5FA !important;
+  border-color: #60A5FA;
+}
+.dark-mode .primary.outline.prism-icon-btn .fa, .dark-mode .primary.outline.prism-icon-btn .fa-brands, .dark-mode .primary.outline.prism-icon-btn .iconfont, .dark-mode .primary.outline.prism-text-btn .fa, .dark-mode .primary.outline.prism-text-btn .fa-brands, .dark-mode .primary.outline.prism-text-btn .iconfont, .dark-mode .primary.outline.prism-icon .fa, .dark-mode .primary.outline.prism-icon .fa-brands, .dark-mode .primary.outline.prism-icon .iconfont, .dark-mode .primary.outline.prism-btn .fa, .dark-mode .primary.outline.prism-btn .fa-brands, .dark-mode .primary.outline.prism-btn .iconfont, .dark-mode .primary.outline.prism-card .fa, .dark-mode .primary.outline.prism-card .fa-brands, .dark-mode .primary.outline.prism-card .iconfont {
+  color: #60A5FA !important;
+}
+.success.outline.prism-icon-btn, .success.outline.prism-text-btn, .success.outline.prism-icon, .success.outline.prism-btn, .success.outline.prism-card {
+  background: transparent !important;
+  color: #00B42A !important;
+  border: 0.0625rem solid #00B42A;
+}
+.success.outline.prism-icon-btn .fa, .success.outline.prism-icon-btn .fa-brands, .success.outline.prism-icon-btn .iconfont, .success.outline.prism-text-btn .fa, .success.outline.prism-text-btn .fa-brands, .success.outline.prism-text-btn .iconfont, .success.outline.prism-icon .fa, .success.outline.prism-icon .fa-brands, .success.outline.prism-icon .iconfont, .success.outline.prism-btn .fa, .success.outline.prism-btn .fa-brands, .success.outline.prism-btn .iconfont, .success.outline.prism-card .fa, .success.outline.prism-card .fa-brands, .success.outline.prism-card .iconfont {
+  color: #00B42A !important;
+}
+.dark-mode .success.outline.prism-icon-btn, .dark-mode .success.outline.prism-text-btn, .dark-mode .success.outline.prism-icon, .dark-mode .success.outline.prism-btn, .dark-mode .success.outline.prism-card {
+  color: #34D399 !important;
+  border-color: #34D399;
+}
+.dark-mode .success.outline.prism-icon-btn .fa, .dark-mode .success.outline.prism-icon-btn .fa-brands, .dark-mode .success.outline.prism-icon-btn .iconfont, .dark-mode .success.outline.prism-text-btn .fa, .dark-mode .success.outline.prism-text-btn .fa-brands, .dark-mode .success.outline.prism-text-btn .iconfont, .dark-mode .success.outline.prism-icon .fa, .dark-mode .success.outline.prism-icon .fa-brands, .dark-mode .success.outline.prism-icon .iconfont, .dark-mode .success.outline.prism-btn .fa, .dark-mode .success.outline.prism-btn .fa-brands, .dark-mode .success.outline.prism-btn .iconfont, .dark-mode .success.outline.prism-card .fa, .dark-mode .success.outline.prism-card .fa-brands, .dark-mode .success.outline.prism-card .iconfont {
+  color: #34D399 !important;
+}
+.warning.outline.prism-icon-btn, .warning.outline.prism-text-btn, .warning.outline.prism-icon, .warning.outline.prism-btn, .warning.outline.prism-card {
+  background: transparent !important;
+  color: #FF7D00 !important;
+  border: 0.0625rem solid #FF7D00;
+}
+.warning.outline.prism-icon-btn .fa, .warning.outline.prism-icon-btn .fa-brands, .warning.outline.prism-icon-btn .iconfont, .warning.outline.prism-text-btn .fa, .warning.outline.prism-text-btn .fa-brands, .warning.outline.prism-text-btn .iconfont, .warning.outline.prism-icon .fa, .warning.outline.prism-icon .fa-brands, .warning.outline.prism-icon .iconfont, .warning.outline.prism-btn .fa, .warning.outline.prism-btn .fa-brands, .warning.outline.prism-btn .iconfont, .warning.outline.prism-card .fa, .warning.outline.prism-card .fa-brands, .warning.outline.prism-card .iconfont {
+  color: #FF7D00 !important;
+}
+.dark-mode .warning.outline.prism-icon-btn, .dark-mode .warning.outline.prism-text-btn, .dark-mode .warning.outline.prism-icon, .dark-mode .warning.outline.prism-btn, .dark-mode .warning.outline.prism-card {
+  color: #FB923C !important;
+  border-color: #FB923C;
+}
+.dark-mode .warning.outline.prism-icon-btn .fa, .dark-mode .warning.outline.prism-icon-btn .fa-brands, .dark-mode .warning.outline.prism-icon-btn .iconfont, .dark-mode .warning.outline.prism-text-btn .fa, .dark-mode .warning.outline.prism-text-btn .fa-brands, .dark-mode .warning.outline.prism-text-btn .iconfont, .dark-mode .warning.outline.prism-icon .fa, .dark-mode .warning.outline.prism-icon .fa-brands, .dark-mode .warning.outline.prism-icon .iconfont, .dark-mode .warning.outline.prism-btn .fa, .dark-mode .warning.outline.prism-btn .fa-brands, .dark-mode .warning.outline.prism-btn .iconfont, .dark-mode .warning.outline.prism-card .fa, .dark-mode .warning.outline.prism-card .fa-brands, .dark-mode .warning.outline.prism-card .iconfont {
+  color: #FB923C !important;
+}
+.danger.outline.prism-icon-btn, .danger.outline.prism-text-btn, .danger.outline.prism-icon, .danger.outline.prism-btn, .danger.outline.prism-card {
+  background: transparent !important;
+  color: #F53F3F !important;
+  border: 0.0625rem solid #F53F3F;
+}
+.danger.outline.prism-icon-btn .fa, .danger.outline.prism-icon-btn .fa-brands, .danger.outline.prism-icon-btn .iconfont, .danger.outline.prism-text-btn .fa, .danger.outline.prism-text-btn .fa-brands, .danger.outline.prism-text-btn .iconfont, .danger.outline.prism-icon .fa, .danger.outline.prism-icon .fa-brands, .danger.outline.prism-icon .iconfont, .danger.outline.prism-btn .fa, .danger.outline.prism-btn .fa-brands, .danger.outline.prism-btn .iconfont, .danger.outline.prism-card .fa, .danger.outline.prism-card .fa-brands, .danger.outline.prism-card .iconfont {
+  color: #F53F3F !important;
+}
+.dark-mode .danger.outline.prism-icon-btn, .dark-mode .danger.outline.prism-text-btn, .dark-mode .danger.outline.prism-icon, .dark-mode .danger.outline.prism-btn, .dark-mode .danger.outline.prism-card {
+  color: #F87171 !important;
+  border-color: #F87171;
+}
+.dark-mode .danger.outline.prism-icon-btn .fa, .dark-mode .danger.outline.prism-icon-btn .fa-brands, .dark-mode .danger.outline.prism-icon-btn .iconfont, .dark-mode .danger.outline.prism-text-btn .fa, .dark-mode .danger.outline.prism-text-btn .fa-brands, .dark-mode .danger.outline.prism-text-btn .iconfont, .dark-mode .danger.outline.prism-icon .fa, .dark-mode .danger.outline.prism-icon .fa-brands, .dark-mode .danger.outline.prism-icon .iconfont, .dark-mode .danger.outline.prism-btn .fa, .dark-mode .danger.outline.prism-btn .fa-brands, .dark-mode .danger.outline.prism-btn .iconfont, .dark-mode .danger.outline.prism-card .fa, .dark-mode .danger.outline.prism-card .fa-brands, .dark-mode .danger.outline.prism-card .iconfont {
+  color: #F87171 !important;
+}
+.info.outline.prism-icon-btn, .info.outline.prism-text-btn, .info.outline.prism-icon, .info.outline.prism-btn, .info.outline.prism-card {
+  background: transparent !important;
+  color: #14C9C9 !important;
+  border: 0.0625rem solid #14C9C9;
+}
+.info.outline.prism-icon-btn .fa, .info.outline.prism-icon-btn .fa-brands, .info.outline.prism-icon-btn .iconfont, .info.outline.prism-text-btn .fa, .info.outline.prism-text-btn .fa-brands, .info.outline.prism-text-btn .iconfont, .info.outline.prism-icon .fa, .info.outline.prism-icon .fa-brands, .info.outline.prism-icon .iconfont, .info.outline.prism-btn .fa, .info.outline.prism-btn .fa-brands, .info.outline.prism-btn .iconfont, .info.outline.prism-card .fa, .info.outline.prism-card .fa-brands, .info.outline.prism-card .iconfont {
+  color: #14C9C9 !important;
+}
+.dark-mode .info.outline.prism-icon-btn, .dark-mode .info.outline.prism-text-btn, .dark-mode .info.outline.prism-icon, .dark-mode .info.outline.prism-btn, .dark-mode .info.outline.prism-card {
+  color: #22D3EE !important;
+  border-color: #22D3EE;
+}
+.dark-mode .info.outline.prism-icon-btn .fa, .dark-mode .info.outline.prism-icon-btn .fa-brands, .dark-mode .info.outline.prism-icon-btn .iconfont, .dark-mode .info.outline.prism-text-btn .fa, .dark-mode .info.outline.prism-text-btn .fa-brands, .dark-mode .info.outline.prism-text-btn .iconfont, .dark-mode .info.outline.prism-icon .fa, .dark-mode .info.outline.prism-icon .fa-brands, .dark-mode .info.outline.prism-icon .iconfont, .dark-mode .info.outline.prism-btn .fa, .dark-mode .info.outline.prism-btn .fa-brands, .dark-mode .info.outline.prism-btn .iconfont, .dark-mode .info.outline.prism-card .fa, .dark-mode .info.outline.prism-card .fa-brands, .dark-mode .info.outline.prism-card .iconfont {
+  color: #22D3EE !important;
+}
+/* ==================== 基础颜色工具类 ==================== */
+.prism-color-purple {
+  color: #722ED1;
+}
+.dark-mode .prism-color-purple {
+  color: #A855F7;
+}
+.prism-bg-purple {
+  background-color: #722ED1;
+}
+.prism-bg-purple-light {
+  background-color: rgba(114, 46, 209, 0.15);
+}
+.dark-mode .prism-bg-purple-light {
+  background-color: rgba(114, 46, 209, 0.25);
+}
+.prism-border-purple {
+  border-color: #722ED1;
+}
+.dark-mode .prism-border-purple {
+  border-color: #A855F7;
+}
+.prism-color-blue {
+  color: #3478F6;
+}
+.dark-mode .prism-color-blue {
+  color: #60A5FA;
+}
+.prism-bg-blue {
+  background-color: #3478F6;
+}
+.prism-bg-blue-light {
+  background-color: rgba(52, 120, 246, 0.15);
+}
+.dark-mode .prism-bg-blue-light {
+  background-color: rgba(52, 120, 246, 0.25);
+}
+.prism-border-blue {
+  border-color: #3478F6;
+}
+.dark-mode .prism-border-blue {
+  border-color: #60A5FA;
+}
+.prism-color-green {
+  color: #00B42A;
+}
+.dark-mode .prism-color-green {
+  color: #34D399;
+}
+.prism-bg-green {
+  background-color: #00B42A;
+}
+.prism-bg-green-light {
+  background-color: rgba(0, 180, 42, 0.15);
+}
+.dark-mode .prism-bg-green-light {
+  background-color: rgba(0, 180, 42, 0.25);
+}
+.prism-border-green {
+  border-color: #00B42A;
+}
+.dark-mode .prism-border-green {
+  border-color: #34D399;
+}
+.prism-color-red {
+  color: #F53F3F;
+}
+.dark-mode .prism-color-red {
+  color: #F87171;
+}
+.prism-bg-red {
+  background-color: #F53F3F;
+}
+.prism-bg-red-light {
+  background-color: rgba(245, 63, 63, 0.15);
+}
+.dark-mode .prism-bg-red-light {
+  background-color: rgba(245, 63, 63, 0.25);
+}
+.prism-border-red {
+  border-color: #F53F3F;
+}
+.dark-mode .prism-border-red {
+  border-color: #F87171;
+}
+.prism-color-orange {
+  color: #FF7D00;
+}
+.dark-mode .prism-color-orange {
+  color: #FB923C;
+}
+.prism-bg-orange {
+  background-color: #FF7D00;
+}
+.prism-bg-orange-light {
+  background-color: rgba(255, 125, 0, 0.15);
+}
+.dark-mode .prism-bg-orange-light {
+  background-color: rgba(255, 125, 0, 0.25);
+}
+.prism-border-orange {
+  border-color: #FF7D00;
+}
+.dark-mode .prism-border-orange {
+  border-color: #FB923C;
+}
+.prism-color-cyan {
+  color: #14C9C9;
+}
+.dark-mode .prism-color-cyan {
+  color: #22D3EE;
+}
+.prism-bg-cyan {
+  background-color: #14C9C9;
+}
+.prism-bg-cyan-light {
+  background-color: rgba(20, 201, 201, 0.15);
+}
+.dark-mode .prism-bg-cyan-light {
+  background-color: rgba(20, 201, 201, 0.25);
+}
+.prism-border-cyan {
+  border-color: #14C9C9;
+}
+.dark-mode .prism-border-cyan {
+  border-color: #22D3EE;
+}
+.prism-color-yellow {
+  color: #FFB400;
+}
+.dark-mode .prism-color-yellow {
+  color: #FCD34D;
+}
+.prism-bg-yellow {
+  background-color: #FFB400;
+}
+.prism-bg-yellow-light {
+  background-color: rgba(255, 180, 0, 0.15);
+}
+.dark-mode .prism-bg-yellow-light {
+  background-color: rgba(255, 180, 0, 0.25);
+}
+.prism-border-yellow {
+  border-color: #FFB400;
+}
+.dark-mode .prism-border-yellow {
+  border-color: #FCD34D;
+}
+.prism-color-pink {
+  color: #F53F7F;
+}
+.dark-mode .prism-color-pink {
+  color: #F472B6;
+}
+.prism-bg-pink {
+  background-color: #F53F7F;
+}
+.prism-bg-pink-light {
+  background-color: rgba(245, 63, 127, 0.15);
+}
+.dark-mode .prism-bg-pink-light {
+  background-color: rgba(245, 63, 127, 0.25);
+}
+.prism-border-pink {
+  border-color: #F53F7F;
+}
+.dark-mode .prism-border-pink {
+  border-color: #F472B6;
+}
+.prism-color-magenta {
+  color: #EB2F96;
+}
+.dark-mode .prism-color-magenta {
+  color: #EC4899;
+}
+.prism-bg-magenta {
+  background-color: #EB2F96;
+}
+.prism-bg-magenta-light {
+  background-color: rgba(235, 47, 150, 0.15);
+}
+.dark-mode .prism-bg-magenta-light {
+  background-color: rgba(235, 47, 150, 0.25);
+}
+.prism-border-magenta {
+  border-color: #EB2F96;
+}
+.dark-mode .prism-border-magenta {
+  border-color: #EC4899;
+}
+.prism-color-indigo {
+  color: #2F54EB;
+}
+.dark-mode .prism-color-indigo {
+  color: #818CF8;
+}
+.prism-bg-indigo {
+  background-color: #2F54EB;
+}
+.prism-bg-indigo-light {
+  background-color: rgba(47, 84, 235, 0.15);
+}
+.dark-mode .prism-bg-indigo-light {
+  background-color: rgba(47, 84, 235, 0.25);
+}
+.prism-border-indigo {
+  border-color: #2F54EB;
+}
+.dark-mode .prism-border-indigo {
+  border-color: #818CF8;
+}
+.prism-color-teal {
+  color: #13C2C2;
+}
+.dark-mode .prism-color-teal {
+  color: #2DD4BF;
+}
+.prism-bg-teal {
+  background-color: #13C2C2;
+}
+.prism-bg-teal-light {
+  background-color: rgba(19, 194, 194, 0.15);
+}
+.dark-mode .prism-bg-teal-light {
+  background-color: rgba(19, 194, 194, 0.25);
+}
+.prism-border-teal {
+  border-color: #13C2C2;
+}
+.dark-mode .prism-border-teal {
+  border-color: #2DD4BF;
+}
+.prism-color-violet {
+  color: #667eea;
+}
+.dark-mode .prism-color-violet {
+  color: #8599ee;
+}
+.prism-bg-violet {
+  background-color: #667eea;
+}
+.prism-bg-violet-light {
+  background-color: rgba(102, 126, 234, 0.15);
+}
+.dark-mode .prism-bg-violet-light {
+  background-color: rgba(102, 126, 234, 0.25);
+}
+.prism-border-violet {
+  border-color: #667eea;
+}
+.dark-mode .prism-border-violet {
+  border-color: #8599ee;
+}
+.prism-color-rose {
+  color: #f093fb;
+}
+.dark-mode .prism-color-rose {
+  color: #f5576c;
+}
+.prism-bg-rose {
+  background-color: #f093fb;
+}
+.prism-bg-rose-light {
+  background-color: rgba(240, 147, 251, 0.15);
+}
+.dark-mode .prism-bg-rose-light {
+  background-color: rgba(240, 147, 251, 0.25);
+}
+.prism-border-rose {
+  border-color: #f093fb;
+}
+.dark-mode .prism-border-rose {
+  border-color: #f5576c;
+}
+.prism-color-ai {
+  color: #c44569;
+}
+.dark-mode .prism-color-ai {
+  color: #ee5a6f;
+}
+.prism-bg-ai {
+  background-color: #c44569;
+}
+.prism-bg-ai-light {
+  background-color: rgba(196, 69, 105, 0.15);
+}
+.dark-mode .prism-bg-ai-light {
+  background-color: rgba(196, 69, 105, 0.25);
+}
+.prism-border-ai {
+  border-color: #c44569;
+}
+.dark-mode .prism-border-ai {
+  border-color: #ee5a6f;
+}
+.prism-color-primary {
+  color: #3478F6;
+}
+.dark-mode .prism-color-primary {
+  color: #60A5FA;
+}
+.prism-bg-primary {
+  background-color: #3478F6;
+}
+.prism-bg-primary-light {
+  background-color: rgba(52, 120, 246, 0.15);
+}
+.dark-mode .prism-bg-primary-light {
+  background-color: rgba(52, 120, 246, 0.25);
+}
+.prism-border-primary {
+  border-color: #3478F6;
+}
+.dark-mode .prism-border-primary {
+  border-color: #60A5FA;
+}
+.prism-color-success {
+  color: #00B42A;
+}
+.dark-mode .prism-color-success {
+  color: #34D399;
+}
+.prism-bg-success {
+  background-color: #00B42A;
+}
+.prism-bg-success-light {
+  background-color: rgba(0, 180, 42, 0.15);
+}
+.dark-mode .prism-bg-success-light {
+  background-color: rgba(0, 180, 42, 0.25);
+}
+.prism-border-success {
+  border-color: #00B42A;
+}
+.dark-mode .prism-border-success {
+  border-color: #34D399;
+}
+.prism-color-warning {
+  color: #FF7D00;
+}
+.dark-mode .prism-color-warning {
+  color: #FB923C;
+}
+.prism-bg-warning {
+  background-color: #FF7D00;
+}
+.prism-bg-warning-light {
+  background-color: rgba(255, 125, 0, 0.15);
+}
+.dark-mode .prism-bg-warning-light {
+  background-color: rgba(255, 125, 0, 0.25);
+}
+.prism-border-warning {
+  border-color: #FF7D00;
+}
+.dark-mode .prism-border-warning {
+  border-color: #FB923C;
+}
+.prism-color-danger {
+  color: #F53F3F;
+}
+.dark-mode .prism-color-danger {
+  color: #F87171;
+}
+.prism-bg-danger {
+  background-color: #F53F3F;
+}
+.prism-bg-danger-light {
+  background-color: rgba(245, 63, 63, 0.15);
+}
+.dark-mode .prism-bg-danger-light {
+  background-color: rgba(245, 63, 63, 0.25);
+}
+.prism-border-danger {
+  border-color: #F53F3F;
+}
+.dark-mode .prism-border-danger {
+  border-color: #F87171;
+}
+.prism-color-info {
+  color: #14C9C9;
+}
+.dark-mode .prism-color-info {
+  color: #22D3EE;
+}
+.prism-bg-info {
+  background-color: #14C9C9;
+}
+.prism-bg-info-light {
+  background-color: rgba(20, 201, 201, 0.15);
+}
+.dark-mode .prism-bg-info-light {
+  background-color: rgba(20, 201, 201, 0.25);
+}
+.prism-border-info {
+  border-color: #14C9C9;
+}
+.dark-mode .prism-border-info {
+  border-color: #22D3EE;
+}
+/* 覆盖 demo-common 的 main-content 样式，让滚动条在右边缘 */
+.color-content-wrapper {
+  position: relative;
+  height: 100vh;
+}
+.main-content {
+  padding: 0;
+  height: 100%;
+}
+/* 颜色演示框 */
+.color-demo-box {
+  padding: 1rem;
+  border-radius: 0.375rem;
+  margin-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.color-demo-text {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+  font-family: monospace;
+}
+.color-demo-desc {
+  font-size: 0.75rem;
+  color: var(--prism-text-secondary);
+}
+/* 总览网格 */
+.overview-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 0.375rem;
+  margin-bottom: 0.75rem;
+}
+.overview-item {
+  padding: 0.625rem 0.375rem;
+  background: var(--prism-bg-color);
+  border-radius: 0.375rem;
+  text-align: center;
+  border: 0.03125rem solid var(--prism-border-color-light);
+}
+.overview-value {
+  display: block;
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--prism-primary-color);
+  line-height: 1.2;
+}
+.overview-label {
+  font-size: 0.6875rem;
+  color: var(--prism-text-secondary);
+}
+/* 命名规范 */
+.naming-rule {
+  padding: 0.75rem;
+  background: var(--prism-bg-color);
+  border-radius: 0.5rem;
+  margin-bottom: 0.75rem;
+  border: 0.03125rem solid var(--prism-border-color-light);
+}
+.rule-title {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+  margin-bottom: 0.5rem;
+}
+.rule-formula {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+.rule-part {
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+.rule-part.prefix {
+  background: rgba(134, 144, 156, 0.15);
+  color: #86909C;
+}
+.rule-part.component {
+  background: rgba(52, 120, 246, 0.15);
+  color: #3478F6;
+}
+.rule-part.style {
+  background: rgba(114, 46, 209, 0.15);
+  color: #722ED1;
+}
+.rule-part.color {
+  background: rgba(0, 180, 42, 0.15);
+  color: #00B42A;
+}
+.rule-separator {
+  font-size: 0.875rem;
+  color: var(--prism-text-placeholder);
+}
+.rule-examples {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  justify-content: flex-start;
+}
+.rule-group {
+  margin-bottom: 0.625rem;
+}
+.rule-group-title {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--prism-primary-color);
+  margin-bottom: 0.375rem;
+}
+.rule-code-block {
+  background: #2d3748;
+  border-radius: 0.375rem;
+  padding: 0.625rem 0.75rem;
+  margin-top: 0.375rem;
+}
+.rule-code {
+  display: block;
+  font-size: 0.75rem;
+  font-family: "Consolas", "Monaco", monospace;
+  color: #e2e8f0;
+  line-height: 2;
+}
+.rule-code::before {
+  content: "";
+  color: #6a9955;
+  margin-right: 0.25rem;
+}
+.rule-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 0.03125rem solid var(--prism-border-color-light);
+}
+.rule-option-item {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+.rule-option-label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--prism-text-secondary);
+  min-width: 2.5rem;
+}
+.rule-option-value {
+  font-size: 0.6875rem;
+  font-family: monospace;
+  color: var(--prism-text-primary);
+}
+.rule-example {
+  font-size: 0.6875rem;
+  font-family: monospace;
+  color: var(--prism-text-secondary);
+  background: var(--prism-bg-color-container);
+  padding: 0.1875rem 0.375rem;
+  border-radius: 0.1875rem;
+}
+/* 用法示例卡片 */
+.usage-card {
+  background: var(--prism-bg-color);
+  border-radius: 0.375rem;
+  border: 0.03125rem solid var(--prism-border-color-light);
+  overflow: hidden;
+}
+.usage-row {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.625rem;
+  border-bottom: 0.03125rem solid var(--prism-border-color-light);
+}
+.usage-row:last-child {
+  border-bottom: none;
+}
+.usage-label {
+  width: 4.375rem;
+  font-size: 0.75rem;
+  color: var(--prism-text-secondary);
+}
+.usage-class {
+  flex: 1;
+  font-size: 0.6875rem;
+  font-family: monospace;
+  color: var(--prism-text-primary);
+}
+.usage-demo {
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+.usage-demo-box {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 0.25rem;
+}
+.usage-icon-demo {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+.usage-icon-demo .fa {
+  font-size: 0.625rem;
+}
+.usage-btn-demo {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.625rem;
+  border-radius: 0.25rem;
+}
+.usage-card-demo {
+  width: 1.875rem;
+  height: 1.25rem;
+  border-radius: 0.1875rem;
+}
+/* 基本颜色演示 */
+.style-demo-text {
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.125rem;
+  font-weight: 700;
+  flex-shrink: 0;
+}
+.style-demo-box {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  flex-shrink: 0;
+}
+.style-demo-border {
+  background: var(--prism-bg-color-card);
+  border-width: 0.125rem;
+  border-style: solid;
+}
+.style-demo-btn {
+  min-width: 2.5rem;
+  height: 1.875rem;
+  padding: 0 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  border-radius: 0.375rem;
+  flex-shrink: 0;
+}
+.style-demo-card {
+  width: 3.75rem;
+  padding: 0.375rem;
+  border-radius: 0.375rem;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.card-inner-title {
+  font-size: 0.625rem;
+  font-weight: 600;
+}
+.card-inner-desc {
+  font-size: 0.5rem;
+  opacity: 0.8;
+}
+/* 快速色板 */
+.color-palette {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.375rem;
+}
+.palette-item {
+  aspect-ratio: 1;
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: transform 0.2s;
+}
+.palette-item:active {
+  transform: scale(0.95);
+}
+.palette-name {
+  font-size: 0.5625rem;
+  color: #FFFFFF;
+  font-weight: 600;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+/* 形态说明 */
+.style-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.style-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.625rem;
+  background: var(--prism-bg-color);
+  border-radius: 0.375rem;
+  border: 0.03125rem solid var(--prism-border-color-light);
+}
+.style-demo {
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+}
+.style-demo .fa {
+  font-size: 1rem;
+}
+.style-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.style-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+}
+.style-desc {
+  font-size: 0.6875rem;
+  color: var(--prism-text-secondary);
+}
+.style-class {
+  font-size: 0.625rem;
+  font-family: monospace;
+  color: var(--prism-primary-color);
+}
+/* 颜色详情区块 */
+.color-section {
+  border: 0.03125rem solid var(--prism-border-color-light);
+  border-radius: 0.625rem;
+  overflow: hidden;
+}
+/* 颜色区块头部 */
+.color-header {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.75rem;
+  background: var(--prism-bg-color);
+  border-radius: 0.625rem 0.625rem 0 0;
+}
+.color-swatch {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  flex-shrink: 0;
+}
+.color-title-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+}
+.color-name {
+  display: block;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--prism-text-primary);
+}
+.color-var-line {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+.color-var {
+  font-size: 0.8125rem;
+  font-family: monospace;
+  font-weight: 600;
+  color: var(--prism-primary-color);
+}
+.color-hex {
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: var(--prism-text-secondary);
+}
+/* 颜色卡片 */
+.color-card {
+  border-radius: 0.5rem;
+  overflow: hidden;
+  margin: 0 0.75rem 0.625rem;
+  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.08);
+}
+.color-card-main {
+  padding: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+}
+.color-card-name {
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #fff;
+  text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
+}
+.color-card-var {
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: rgba(255, 255, 255, 0.9);
+}
+.color-card-hex {
+  font-size: 0.6875rem;
+  font-family: monospace;
+  color: rgba(255, 255, 255, 0.7);
+}
+.color-card-variants {
+  display: flex;
+  height: 1.875rem;
+}
+.color-variant {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.variant-label {
+  font-size: 0.625rem;
+  font-family: monospace;
+  color: #fff;
+  text-shadow: 0 0.03125rem 0.0625rem rgba(0, 0, 0, 0.3);
+}
+.color-title-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.1875rem;
+}
+.color-name {
+  display: block;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--prism-text-primary);
+}
+.color-var-line {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  flex-wrap: wrap;
+}
+.color-var {
+  font-size: 0.8125rem;
+  font-family: monospace;
+  font-weight: 600;
+  color: var(--prism-primary-color);
+}
+.color-hex {
+  font-size: 0.75rem;
+  font-family: monospace;
+  color: var(--prism-text-secondary);
+}
+/* 颜色变量 - 瓷块网格 */
+.color-vars {
+  padding: 0.5rem;
+  background: var(--prism-bg-color-container);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.375rem;
+  border-radius: 0 0 0.625rem 0.625rem;
+}
+.var-tile {
+  background: var(--prism-bg-color-card);
+  border-radius: 0.375rem;
+  overflow: hidden;
+  border: 0.03125rem solid var(--prism-border-color-light);
+  transition: all 0.2s ease;
+  height: 3.75rem;
+  flex-shrink: 0;
+}
+.var-tile:active {
+  transform: scale(0.98);
+  opacity: 0.9;
+}
+.var-tile-preview {
+  width: 100%;
+  height: 3.75rem;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem 0.1875rem;
+  gap: 0.125rem;
+  overflow: hidden;
+}
+.var-tile-preview--alpha::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(45deg, #e0e0e0 25%, transparent 25%), linear-gradient(-45deg, #e0e0e0 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e0e0e0 75%), linear-gradient(-45deg, transparent 75%, #e0e0e0 75%);
+  background-size: 0.5rem 0.5rem;
+  background-position: 0 0, 0 0.25rem, 0.25rem -0.25rem, -0.25rem 0;
+  z-index: 0;
+}
+.var-tile-preview--shadow {
+  background: var(--prism-bg-color);
+  position: relative;
+}
+.var-tile-shadow-demo {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1.875rem;
+  height: 1.875rem;
+  border-radius: 0.375rem;
+  z-index: 0;
+}
+.var-tile-label {
+  position: relative;
+  z-index: 1;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: #FFFFFF;
+  text-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.5);
+  text-align: center;
+  word-break: break-all;
+  max-width: 100%;
+  line-height: 1.3;
+}
+.var-tile-preview--shadow .var-tile-label {
+  color: var(--prism-text-primary);
+  text-shadow: none;
+}
+.var-tile-value {
+  position: relative;
+  z-index: 1;
+  font-size: 0.5625rem;
+  font-family: monospace;
+  color: rgba(255, 255, 255, 0.95);
+  text-shadow: 0 0.03125rem 0.125rem rgba(0, 0, 0, 0.6);
+  text-align: center;
+  word-break: break-all;
+  max-width: 100%;
+  line-height: 1.4;
+}
+.var-tile-preview--shadow .var-tile-value {
+  color: var(--prism-text-secondary);
+  text-shadow: none;
+  background: var(--prism-bg-color-container);
+}
+/* 组件区块 */
+.component-section {
+  padding: 0.75rem;
+  border-top: 0.03125rem solid var(--prism-border-color-light);
+}
+.color-vars + .component-section {
+  border-top: none;
+}
+.component-title {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+  margin-bottom: 0.5rem;
+}
+.dark-mode .component-title {
+  color: var(--prism-text-primary);
+}
+/* 图标容器演示 */
+.component-demos {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 0.375rem;
+}
+.demo-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.25rem;
+  overflow: hidden;
+}
+.demo-box {
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+}
+.demo-box .fa {
+  font-size: 1rem;
+}
+.demo-label {
+  font-size: 0.625rem;
+  color: var(--prism-text-secondary);
+  flex-shrink: 0;
+}
+.dark-mode .demo-label {
+  color: var(--prism-text-secondary);
+}
+.demo-class {
+  font-size: 0.5rem;
+  font-family: monospace;
+  color: var(--prism-text-placeholder);
+  text-align: center;
+  word-break: break-all;
+  line-height: 1.4;
+  max-height: 1.875rem;
+  overflow: hidden;
+}
+/* 按钮演示 */
+.btn-demos {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.btn-demo-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.btn-demo-row > uni-view:first-child {
+  flex: 1;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+}
+.btn-class {
+  font-size: 0.625rem;
+  font-family: monospace;
+  color: var(--prism-text-placeholder);
+  width: 8.75rem;
+  flex-shrink: 0;
+}
+/* 卡片演示 */
+.card-demos {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 0.375rem;
+}
+.card-demo-item {
+  padding: 0.625rem;
+  height: 3.75rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 0.25rem;
+  overflow: hidden;
+}
+.card-demo-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.usage-hint {
+  margin-top: 0.5rem;
+  font-size: 0.6875rem;
+  font-family: monospace;
+  color: var(--prism-text-placeholder);
+  text-align: center;
+}
+.card-demo-class {
+  font-size: 0.5625rem;
+  font-family: monospace;
+  opacity: 0.8;
+  text-align: center;
+  word-break: break-all;
+  line-height: 1.3;
+  max-height: 1.5625rem;
+  overflow: hidden;
+}
+/* 语义化别名 */
+.alias-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+}
+.alias-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--prism-bg-color);
+  border-radius: 0.375rem;
+  border: 0.03125rem solid var(--prism-border-color-light);
+}
+.alias-name {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--prism-primary-color);
+  font-family: monospace;
+}
+.alias-arrow {
+  font-size: 0.75rem;
+  color: var(--prism-text-placeholder);
+}
+.alias-color {
+  font-size: 0.8125rem;
+  color: var(--prism-text-primary);
+  font-family: monospace;
+}
+.alias-example {
+  padding: 0.5rem;
+  background: var(--prism-bg-color-container);
+  border-radius: 0.25rem;
+}
+.example-text {
+  font-size: 0.6875rem;
+  font-family: monospace;
+  color: var(--prism-text-secondary);
+}
+/* CSS 变量展示 */
+.css-vars-intro {
+  margin-bottom: 0.625rem;
+}
+.intro-text {
+  font-size: 0.75rem;
+  color: var(--prism-text-secondary);
+}
+.css-var-group {
+  margin-bottom: 0.75rem;
+}
+.css-var-category {
+  display: block;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--prism-primary-color);
+  margin-bottom: 0.375rem;
+  padding-left: 0.375rem;
+  border-left: 0.125rem solid var(--prism-primary-color);
+}
+.css-var-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+.css-var-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--prism-bg-color);
+  border-radius: 0.375rem;
+  border: 0.03125rem solid var(--prism-border-color-light);
+}
+.css-var-swatch {
+  width: 2.75rem;
+  height: 2.75rem;
+  border-radius: 0.4375rem;
+  flex-shrink: 0;
+  border: 0.03125rem solid var(--prism-border-color-light);
+}
+.css-var-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 0;
+}
+.css-var-name {
+  font-size: 0.75rem;
+  font-family: monospace;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+  word-break: break-all;
+}
+.css-var-desc {
+  font-size: 0.6875rem;
+  color: var(--prism-text-secondary);
+}
+.css-var-purpose {
+  font-size: 0.6875rem;
+  color: var(--prism-text-secondary);
+}
+/* 通用颜色工具类展示 */
+.util-subsection {
+  margin-bottom: 0.75rem;
+}
+.util-subtitle {
+  display: block;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--prism-text-primary);
+  margin-bottom: 0.375rem;
+  font-family: monospace;
+}
+.util-color-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0.375rem;
+}
+.util-color-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.1875rem;
+}
+.util-color-text {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.util-color-label {
+  font-size: 0.5625rem;
+  color: var(--prism-text-secondary);
+}
+.util-bg-item {
+  aspect-ratio: 1;
+  border-radius: 0.375rem;
+  border: 0.03125rem solid var(--prism-border-color-light);
+}
+.util-border-item {
+  aspect-ratio: 1;
+  border-radius: 0.375rem;
+  border-width: 0.125rem;
+  border-style: solid;
+  background: var(--prism-bg-color-card);
+}
+/* 深色模式 */
+.dark-mode .overview-item,
+.dark-mode .naming-rule,
+.dark-mode .style-item,
+.dark-mode .alias-item,
+.dark-mode .css-var-item {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.dark-mode .color-header {
+  background: rgba(255, 255, 255, 0.06);
+}
+.dark-mode .color-vars {
+  background: rgba(255, 255, 255, 0.03);
+}
+.dark-mode .color-section {
+  border-color: rgba(255, 255, 255, 0.1);
+}
+.dark-mode .component-section {
+  border-top-color: rgba(255, 255, 255, 0.1);
+}
+.dark-mode .rule-example,
+.dark-mode .alias-example {
+  background: rgba(255, 255, 255, 0.06);
+}
+.dark-mode .btn-class {
+  color: var(--prism-text-secondary);
+}