@ruixinkeji/prism-ui 1.0.14 → 1.0.16

package/dist/dev/mp-weixin/pages/icons/icons.wxss

@@ -0,0 +1,3079 @@
+/**
+ * Prism UI - SCSS 变量定义
+ * 此文件包含所有设计令牌和变量
+ * 所有变量使用 $prism- 前缀，避免与用户项目冲突
+ *
+ * 主题切换：修改下面的引入文件即可切换主题
+ * 可选主题：blue(默认) / green / purple / orange / red / cyan
+ */
+/**
+ * Prism UI - 蓝色主题（默认）
+ *
+ * 使用方式：在 variables.scss 中修改引入
+ * @import '../theme/blue.scss';
+ *
+ * 颜色值来自 colors.scss 中的 $prism-blue-* 变量
+ */
+/* ============================================================
+   一、浅色模式变量（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* -------------------- 主题色 -------------------- */
+/* -------------------- 状态色 -------------------- */
+/* -------------------- 文字颜色 -------------------- */
+/* -------------------- 边框颜色 -------------------- */
+/* -------------------- 背景颜色 -------------------- */
+/* ============================================================
+   二、深色模式变量
+   ============================================================ */
+/* -------------------- 主题色（深色） -------------------- */
+/* -------------------- 状态色（深色） -------------------- */
+/* -------------------- 文字颜色（深色） -------------------- */
+/* -------------------- 边框颜色（深色） -------------------- */
+/* -------------------- 背景颜色（深色） -------------------- */
+/* ============================================================
+   三、主题色透明度（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   主题色渐变（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   四、白色透明度
+   ============================================================ */
+/* ============================================================
+   六、第三方品牌色
+   ============================================================ */
+/* ============================================================
+   八、常用阴影（使用 !default，允许主题文件覆盖）
+   ============================================================ */
+/* ============================================================
+   九、统一间距
+   ============================================================ */
+/**
+ * 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 '@/styles/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: 12rpx;
+  background: transparent;
+  color: var(--prism-text-secondary, #666);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+  width: 72rpx;
+  height: 72rpx;
+  font-size: 36rpx;
+}
+.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: -6rpx;
+  right: -6rpx;
+}
+.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: 12rpx;
+  border: none;
+  border-radius: 16rpx;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 16rpx 28rpx;
+  font-size: 28rpx;
+}
+.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: 72rpx;
+  height: 72rpx;
+  border-radius: 14rpx;
+}
+.prism-icon .fa, .prism-icon .fa-brands, .prism-icon .iconfont {
+  font-size: 30rpx;
+}
+.prism-icon .prism-badge {
+  top: 0;
+  right: 0;
+}
+.prism-icon .prism-number-badge {
+  top: -6rpx;
+  right: -6rpx;
+}
+.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: 16rpx 28rpx;
+  border-radius: 14rpx;
+  font-size: 28rpx;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  line-height: 1;
+  margin: 0;
+  -webkit-appearance: none;
+  background: var(--prism-primary-color);
+  color: var(--prism-btn-text-color);
+}
+.prism-btn:active {
+  opacity: 0.8;
+  transform: scale(0.98);
+}
+.dark-mode .prism-btn {
+  background: var(--prism-primary-gradient-alpha);
+  color: var(--prism-primary-color);
+  border: 1rpx solid var(--prism-primary-alpha-35);
+}
+.prism-card.glass {
+  position: relative;
+  background: rgba(255, 255, 255, 0.7);
+  backdrop-filter: blur(20rpx);
+  -webkit-backdrop-filter: blur(20rpx);
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08), inset 0 1rpx 0 rgba(255, 255, 255, 0.6);
+  border: 1rpx solid rgba(255, 255, 255, 0.3);
+}
+.prism-card.glass::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 1rpx;
+  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: 1rpx solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 44rpx;
+  height: 44rpx;
+  font-size: 20rpx;
+  border-radius: 8rpx;
+}
+.xs.prism-text-btn {
+  padding: 6rpx 12rpx;
+  font-size: 20rpx;
+  gap: 6rpx;
+  border-radius: 8rpx;
+}
+.xs.prism-btn {
+  height: 52rpx;
+  line-height: 52rpx;
+  padding: 0 20rpx;
+  font-size: 22rpx;
+  border-radius: 10rpx;
+}
+.xs.prism-icon {
+  width: 44rpx;
+  height: 44rpx;
+  border-radius: 8rpx;
+}
+.xs.prism-icon .fa, .xs.prism-icon .fa-brands, .xs.prism-icon .iconfont {
+  font-size: 18rpx;
+}
+.sm.prism-icon-btn {
+  width: 56rpx;
+  height: 56rpx;
+  font-size: 24rpx;
+  border-radius: 10rpx;
+}
+.sm.prism-text-btn {
+  padding: 10rpx 16rpx;
+  font-size: 24rpx;
+  gap: 8rpx;
+  border-radius: 10rpx;
+}
+.sm.prism-btn {
+  height: 64rpx;
+  line-height: 64rpx;
+  padding: 0 24rpx;
+  font-size: 26rpx;
+  border-radius: 12rpx;
+}
+.sm.prism-icon {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 10rpx;
+}
+.sm.prism-icon .fa, .sm.prism-icon .fa-brands, .sm.prism-icon .iconfont {
+  font-size: 24rpx;
+}
+.md.prism-icon-btn {
+  width: 72rpx;
+  height: 72rpx;
+  font-size: 32rpx;
+  border-radius: 14rpx;
+}
+.md.prism-text-btn {
+  padding: 16rpx 28rpx;
+  font-size: 28rpx;
+  gap: 12rpx;
+  border-radius: 14rpx;
+}
+.md.prism-btn {
+  height: 80rpx;
+  line-height: 80rpx;
+  padding: 0 32rpx;
+  font-size: 30rpx;
+  border-radius: 14rpx;
+}
+.md.prism-icon {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 14rpx;
+}
+.md.prism-icon .fa, .md.prism-icon .fa-brands, .md.prism-icon .iconfont {
+  font-size: 30rpx;
+}
+.lg.prism-icon-btn {
+  width: 92rpx;
+  height: 92rpx;
+  font-size: 40rpx;
+  border-radius: 18rpx;
+}
+.lg.prism-text-btn {
+  padding: 22rpx 40rpx;
+  font-size: 34rpx;
+  gap: 14rpx;
+  border-radius: 18rpx;
+}
+.lg.prism-btn {
+  height: 96rpx;
+  line-height: 96rpx;
+  padding: 0 40rpx;
+  font-size: 34rpx;
+  border-radius: 18rpx;
+}
+.lg.prism-icon {
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 18rpx;
+}
+.lg.prism-icon .fa, .lg.prism-icon .fa-brands, .lg.prism-icon .iconfont {
+  font-size: 38rpx;
+}
+.xl.prism-icon-btn {
+  width: 116rpx;
+  height: 116rpx;
+  font-size: 52rpx;
+  border-radius: 22rpx;
+}
+.xl.prism-text-btn {
+  padding: 28rpx 52rpx;
+  font-size: 40rpx;
+  gap: 16rpx;
+  border-radius: 22rpx;
+}
+.xl.prism-btn {
+  height: 112rpx;
+  line-height: 112rpx;
+  padding: 0 52rpx;
+  font-size: 40rpx;
+  border-radius: 22rpx;
+}
+.xl.prism-icon {
+  width: 116rpx;
+  height: 116rpx;
+  border-radius: 22rpx;
+}
+.xl.prism-icon .fa, .xl.prism-icon .fa-brands, .xl.prism-icon .iconfont {
+  font-size: 48rpx;
+}
+.round.prism-icon-btn {
+  border-radius: 50%;
+}
+.highlight {
+  position: relative;
+  overflow: hidden;
+}
+.highlight::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2rpx;
+  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: 1rpx 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: 1rpx 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: 1rpx solid rgba(114, 46, 209, 0.35);
+}
+.blue.prism-icon-btn, .blue.prism-text-btn {
+  background: #3478F6;
+  color: #FFFFFF;
+}
+.blue.prism-icon-btn .fa, .blue.prism-icon-btn .fa-brands, .blue.prism-icon-btn .iconfont, .blue.prism-text-btn .fa, .blue.prism-text-btn .fa-brands, .blue.prism-text-btn .iconfont {
+  color: #FFFFFF;
+}
+.dark-mode .blue.prism-icon-btn, .dark-mode .blue.prism-text-btn {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%);
+  color: #60A5FA;
+  border: 1rpx solid rgba(52, 120, 246, 0.35);
+}
+.dark-mode .blue.prism-icon-btn .fa, .dark-mode .blue.prism-icon-btn .fa-brands, .dark-mode .blue.prism-icon-btn .iconfont, .dark-mode .blue.prism-text-btn .fa, .dark-mode .blue.prism-text-btn .fa-brands, .dark-mode .blue.prism-text-btn .iconfont {
+  color: #60A5FA;
+}
+.blue.prism-icon {
+  background: rgba(52, 120, 246, 0.15);
+}
+.blue.prism-icon .fa, .blue.prism-icon .fa-brands, .blue.prism-icon .iconfont {
+  color: #3478F6;
+}
+.dark-mode .blue.prism-icon {
+  background: rgba(52, 120, 246, 0.25);
+}
+.dark-mode .blue.prism-icon .fa, .dark-mode .blue.prism-icon .fa-brands, .dark-mode .blue.prism-icon .iconfont {
+  color: #60A5FA;
+}
+.blue.prism-btn {
+  background: #3478F6;
+  color: #FFFFFF;
+}
+.dark-mode .blue.prism-btn {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%);
+  color: #60A5FA;
+  border: 1rpx solid rgba(52, 120, 246, 0.35);
+}
+.blue.prism-card {
+  background: #3478F6;
+  color: #FFFFFF;
+}
+.dark-mode .blue.prism-card {
+  background: linear-gradient(135deg, rgba(52, 120, 246, 0.08) 0%, rgba(134, 184, 250, 0.08) 100%);
+  color: #60A5FA;
+  border: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx 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: 1rpx solid rgba(196, 69, 105, 0.35);
+}
+.primary.prism-icon-btn, .primary.prism-text-btn {
+  background: var(--prism-primary-color);
+  color: var(--prism-btn-text-color);
+}
+.primary.prism-icon-btn .fa, .primary.prism-icon-btn .fa-brands, .primary.prism-icon-btn .iconfont, .primary.prism-text-btn .fa, .primary.prism-text-btn .fa-brands, .primary.prism-text-btn .iconfont {
+  color: var(--prism-btn-text-color);
+}
+.dark-mode .primary.prism-icon-btn, .dark-mode .primary.prism-text-btn {
+  background: var(--prism-primary-gradient-alpha);
+  color: var(--prism-primary-color);
+  border: 1rpx solid var(--prism-primary-alpha-35);
+}
+.dark-mode .primary.prism-icon-btn .fa, .dark-mode .primary.prism-icon-btn .fa-brands, .dark-mode .primary.prism-icon-btn .iconfont, .dark-mode .primary.prism-text-btn .fa, .dark-mode .primary.prism-text-btn .fa-brands, .dark-mode .primary.prism-text-btn .iconfont {
+  color: var(--prism-primary-color);
+}
+.primary.prism-icon {
+  background: var(--prism-primary-alpha-15);
+}
+.primary.prism-icon .fa, .primary.prism-icon .fa-brands, .primary.prism-icon .iconfont {
+  color: var(--prism-primary-color);
+}
+.dark-mode .primary.prism-icon {
+  background: var(--prism-primary-alpha-25);
+}
+.primary.prism-btn, .primary.prism-card {
+  background: var(--prism-primary-color);
+  color: var(--prism-btn-text-color);
+}
+.dark-mode .primary.prism-btn, .dark-mode .primary.prism-card {
+  background: var(--prism-primary-gradient-alpha);
+  color: var(--prism-primary-color);
+  border: 1rpx solid var(--prism-primary-alpha-35);
+}
+.primary.solid.prism-icon-btn, .primary.solid.prism-text-btn, .primary.solid.prism-icon, .primary.solid.prism-btn, .primary.solid.prism-card {
+  background: var(--prism-primary-color) !important;
+  color: var(--prism-btn-text-color) !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: var(--prism-btn-text-color) !important;
+}
+.primary.gradient.prism-icon-btn, .primary.gradient.prism-text-btn, .primary.gradient.prism-icon, .primary.gradient.prism-btn, .primary.gradient.prism-card {
+  background: var(--prism-primary-gradient) !important;
+  box-shadow: var(--prism-primary-gradient-shadow) !important;
+  color: var(--prism-btn-text-color) !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: var(--prism-btn-text-color) !important;
+}
+.primary.glass.prism-icon-btn, .primary.glass.prism-text-btn, .primary.glass.prism-icon, .primary.glass.prism-btn, .primary.glass.prism-card {
+  background: var(--prism-primary-gradient-alpha) !important;
+  color: var(--prism-primary-color) !important;
+  border: 1rpx solid var(--prism-primary-alpha-25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+}
+.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: var(--prism-primary-color) !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: var(--prism-primary-color) !important;
+  border: 2rpx solid var(--prism-primary-color);
+}
+.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: var(--prism-primary-color) !important;
+}
+.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, .blue.solid.prism-text-btn, .blue.solid.prism-icon, .blue.solid.prism-btn, .blue.solid.prism-card {
+  background: #3478F6 !important;
+  color: #FFFFFF !important;
+}
+.blue.solid.prism-icon-btn .fa, .blue.solid.prism-icon-btn .fa-brands, .blue.solid.prism-icon-btn .iconfont, .blue.solid.prism-text-btn .fa, .blue.solid.prism-text-btn .fa-brands, .blue.solid.prism-text-btn .iconfont, .blue.solid.prism-icon .fa, .blue.solid.prism-icon .fa-brands, .blue.solid.prism-icon .iconfont, .blue.solid.prism-btn .fa, .blue.solid.prism-btn .fa-brands, .blue.solid.prism-btn .iconfont, .blue.solid.prism-card .fa, .blue.solid.prism-card .fa-brands, .blue.solid.prism-card .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;
+}
+.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: 1rpx solid rgba(114, 46, 209, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(114, 46, 209, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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, .blue.glass.prism-text-btn, .blue.glass.prism-icon, .blue.glass.prism-btn, .blue.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: 1rpx solid rgba(52, 120, 246, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(52, 120, 246, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5);
+}
+.blue.glass.prism-icon-btn .fa, .blue.glass.prism-icon-btn .fa-brands, .blue.glass.prism-icon-btn .iconfont, .blue.glass.prism-text-btn .fa, .blue.glass.prism-text-btn .fa-brands, .blue.glass.prism-text-btn .iconfont, .blue.glass.prism-icon .fa, .blue.glass.prism-icon .fa-brands, .blue.glass.prism-icon .iconfont, .blue.glass.prism-btn .fa, .blue.glass.prism-btn .fa-brands, .blue.glass.prism-btn .iconfont, .blue.glass.prism-card .fa, .blue.glass.prism-card .fa-brands, .blue.glass.prism-card .iconfont {
+  color: #3478F6 !important;
+}
+.dark-mode .blue.glass.prism-icon-btn, .dark-mode .blue.glass.prism-text-btn, .dark-mode .blue.glass.prism-icon, .dark-mode .blue.glass.prism-btn, .dark-mode .blue.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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 0 rgba(96, 165, 250, 0.3);
+}
+.dark-mode .blue.glass.prism-icon-btn .fa, .dark-mode .blue.glass.prism-icon-btn .fa-brands, .dark-mode .blue.glass.prism-icon-btn .iconfont, .dark-mode .blue.glass.prism-text-btn .fa, .dark-mode .blue.glass.prism-text-btn .fa-brands, .dark-mode .blue.glass.prism-text-btn .iconfont, .dark-mode .blue.glass.prism-icon .fa, .dark-mode .blue.glass.prism-icon .fa-brands, .dark-mode .blue.glass.prism-icon .iconfont, .dark-mode .blue.glass.prism-btn .fa, .dark-mode .blue.glass.prism-btn .fa-brands, .dark-mode .blue.glass.prism-btn .iconfont, .dark-mode .blue.glass.prism-card .fa, .dark-mode .blue.glass.prism-card .fa-brands, .dark-mode .blue.glass.prism-card .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: 1rpx solid rgba(0, 180, 42, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(0, 180, 42, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(245, 63, 63, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(245, 63, 63, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(255, 125, 0, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(255, 125, 0, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(20, 201, 201, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(20, 201, 201, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(255, 180, 0, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(255, 180, 0, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(245, 63, 127, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(245, 63, 127, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(235, 47, 150, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(235, 47, 150, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(47, 84, 235, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(47, 84, 235, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(19, 194, 194, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(19, 194, 194, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(102, 126, 234, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(102, 126, 234, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(240, 147, 251, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(240, 147, 251, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(196, 69, 105, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(196, 69, 105, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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;
+}
+.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: 1rpx solid rgba(0, 180, 42, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(0, 180, 42, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(255, 125, 0, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(255, 125, 0, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(245, 63, 63, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(245, 63, 63, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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: 1rpx solid rgba(20, 201, 201, 0.25);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  box-shadow: 0 4rpx 16rpx rgba(20, 201, 201, 0.15), inset 0 1rpx 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 4rpx 16rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 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 8rpx 24rpx 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, .blue.gradient.prism-text-btn, .blue.gradient.prism-icon, .blue.gradient.prism-btn, .blue.gradient.prism-card {
+  background: linear-gradient(135deg, #3478F6 0%, #86B8FA 100%) !important;
+  box-shadow: 0 8rpx 24rpx rgba(52, 120, 246, 0.3) !important;
+  color: #FFFFFF !important;
+}
+.blue.gradient.prism-icon-btn .fa, .blue.gradient.prism-icon-btn .fa-brands, .blue.gradient.prism-icon-btn .iconfont, .blue.gradient.prism-text-btn .fa, .blue.gradient.prism-text-btn .fa-brands, .blue.gradient.prism-text-btn .iconfont, .blue.gradient.prism-icon .fa, .blue.gradient.prism-icon .fa-brands, .blue.gradient.prism-icon .iconfont, .blue.gradient.prism-btn .fa, .blue.gradient.prism-btn .fa-brands, .blue.gradient.prism-btn .iconfont, .blue.gradient.prism-card .fa, .blue.gradient.prism-card .fa-brands, .blue.gradient.prism-card .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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 32rpx 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 8rpx 32rpx 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 8rpx 32rpx 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;
+}
+.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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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 8rpx 24rpx 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: 2rpx 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, .blue.outline.prism-text-btn, .blue.outline.prism-icon, .blue.outline.prism-btn, .blue.outline.prism-card {
+  background: transparent !important;
+  color: #3478F6 !important;
+  border: 2rpx solid #3478F6;
+}
+.blue.outline.prism-icon-btn .fa, .blue.outline.prism-icon-btn .fa-brands, .blue.outline.prism-icon-btn .iconfont, .blue.outline.prism-text-btn .fa, .blue.outline.prism-text-btn .fa-brands, .blue.outline.prism-text-btn .iconfont, .blue.outline.prism-icon .fa, .blue.outline.prism-icon .fa-brands, .blue.outline.prism-icon .iconfont, .blue.outline.prism-btn .fa, .blue.outline.prism-btn .fa-brands, .blue.outline.prism-btn .iconfont, .blue.outline.prism-card .fa, .blue.outline.prism-card .fa-brands, .blue.outline.prism-card .iconfont {
+  color: #3478F6 !important;
+}
+.dark-mode .blue.outline.prism-icon-btn, .dark-mode .blue.outline.prism-text-btn, .dark-mode .blue.outline.prism-icon, .dark-mode .blue.outline.prism-btn, .dark-mode .blue.outline.prism-card {
+  color: #60A5FA !important;
+  border-color: #60A5FA;
+}
+.dark-mode .blue.outline.prism-icon-btn .fa, .dark-mode .blue.outline.prism-icon-btn .fa-brands, .dark-mode .blue.outline.prism-icon-btn .iconfont, .dark-mode .blue.outline.prism-text-btn .fa, .dark-mode .blue.outline.prism-text-btn .fa-brands, .dark-mode .blue.outline.prism-text-btn .iconfont, .dark-mode .blue.outline.prism-icon .fa, .dark-mode .blue.outline.prism-icon .fa-brands, .dark-mode .blue.outline.prism-icon .iconfont, .dark-mode .blue.outline.prism-btn .fa, .dark-mode .blue.outline.prism-btn .fa-brands, .dark-mode .blue.outline.prism-btn .iconfont, .dark-mode .blue.outline.prism-card .fa, .dark-mode .blue.outline.prism-card .fa-brands, .dark-mode .blue.outline.prism-card .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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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;
+}
+.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: 2rpx 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: 2rpx 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: 2rpx 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: 2rpx 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-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;
+}
+.prism-color-primary {
+  color: var(--prism-primary-color);
+}
+.prism-bg-primary {
+  background-color: var(--prism-primary-color);
+}
+.prism-bg-primary-light {
+  background-color: var(--prism-primary-alpha-15);
+}
+.dark-mode .prism-bg-primary-light {
+  background-color: var(--prism-primary-alpha-25);
+}
+.prism-border-primary {
+  border-color: var(--prism-primary-color);
+}
+/* ==================== 默认主题色工具类 ==================== */
+.prism-color {
+  color: var(--prism-primary-color);
+}
+.prism-bg {
+  background-color: var(--prism-primary-color);
+}
+.prism-bg-light {
+  background-color: var(--prism-primary-alpha-15);
+}
+.dark-mode .prism-bg-light {
+  background-color: var(--prism-primary-alpha-25);
+}
+.prism-border {
+  border-color: var(--prism-primary-color);
+}
+.prism-bg-gradient {
+  background: var(--prism-primary-gradient);
+}
+.prism-page {
+  width: 100%;
+  min-height: 100vh;
+  background: var(--prism-bg-color-page, #F7F8FA);
+}
+/* 搜索框区域 */
+.search-header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 99;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+}
+.prism-main {
+  height: 100vh;
+  padding-bottom: 120rpx;
+}
+.search-box {
+  padding: 16rpx 24rpx;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+}
+.search-box .prism-input-box {
+  flex: 1;
+  min-height: 72rpx;
+}
+.search-box .prism-icon-btn {
+  border: 1rpx solid var(--prism-border-color-light);
+}
+.search-box .search-icon {
+  color: var(--prism-text-placeholder);
+  margin-right: 16rpx;
+}
+/* 底部弹出样式面板 */
+.style-sheet-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 1000;
+  display: flex;
+  align-items: flex-end;
+}
+.style-sheet {
+  width: 100%;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 32rpx 32rpx 0 0;
+  overflow: hidden;
+}
+.sheet-handle {
+  width: 64rpx;
+  height: 8rpx;
+  background: var(--prism-border-color-light, #E5E6EB);
+  border-radius: 4rpx;
+  margin: 16rpx auto;
+}
+.sheet-header {
+  padding: 8rpx 32rpx 24rpx;
+  text-align: center;
+}
+.sheet-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+}
+.sheet-body {
+  padding: 0 32rpx 24rpx;
+}
+.sheet-section {
+  margin-bottom: 32rpx;
+}
+.sheet-section:last-child {
+  margin-bottom: 0;
+}
+.sheet-label {
+  display: block;
+  font-size: 26rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-bottom: 20rpx;
+}
+.color-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 24rpx;
+}
+.color-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8rpx;
+  padding: 16rpx;
+  border-radius: 16rpx;
+  transition: all 0.2s;
+}
+.color-item.active {
+  background: var(--prism-primary-alpha-10, rgba(52, 120, 246, 0.1));
+}
+.color-circle {
+  width: 56rpx;
+  height: 56rpx;
+  border-radius: 50%;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+}
+.color-item.active .color-circle {
+  box-shadow: 0 0 0 4rpx #fff, 0 0 0 7rpx var(--prism-primary-color, #3478F6);
+}
+.color-label {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.color-item.active .color-label {
+  color: var(--prism-primary-color, #3478F6);
+  font-weight: 500;
+}
+.style-grid {
+  display: flex;
+  gap: 16rpx;
+  flex-wrap: wrap;
+}
+.style-item {
+  padding: 16rpx 32rpx;
+  background: var(--prism-bg-color, #F7F8FA);
+  border-radius: 32rpx;
+  font-size: 26rpx;
+  color: var(--prism-text-secondary, #86909C);
+  transition: all 0.2s;
+}
+.style-item.active {
+  background: var(--prism-primary-color, #3478F6);
+  color: #fff;
+}
+.sheet-safe-area {
+  height: calc(20rpx + env(safe-area-inset-bottom, 20rpx));
+}
+/* 颜色和形态选择 */
+.color-options {
+  display: flex;
+  gap: 16rpx;
+  flex-wrap: wrap;
+}
+.color-dot {
+  width: 48rpx;
+  height: 48rpx;
+  border-radius: 50%;
+  transition: all 0.2s;
+  border: 3rpx solid transparent;
+}
+.color-dot.active {
+  border-color: #fff;
+  box-shadow: 0 0 0 3rpx currentColor, 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
+  transform: scale(1.1);
+}
+.style-options {
+  display: flex;
+  gap: 12rpx;
+  flex-wrap: wrap;
+}
+.style-tag {
+  padding: 8rpx 20rpx;
+  background: var(--prism-bg-color-card, #fff);
+  border-radius: 8rpx;
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+  border: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+  transition: all 0.2s;
+}
+.style-tag.active {
+  background: var(--prism-primary-color, #3478F6);
+  color: #fff;
+  border-color: var(--prism-primary-color, #3478F6);
+}
+.icon-section {
+  padding: 0 24rpx 24rpx;
+}
+.section-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+  margin-bottom: 16rpx;
+}
+.icon-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16rpx;
+}
+.icon-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 20rpx 8rpx;
+  height: 160rpx;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 16rpx;
+  overflow: hidden;
+  min-width: 0;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+}
+.icon-item:active {
+  opacity: 0.7;
+  transform: scale(0.96);
+}
+.icon-item .icon-box {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 12rpx;
+  flex-shrink: 0;
+}
+.icon-item .icon-box .fa, .icon-item .icon-box .fa-brands, .icon-item .icon-box .iconfont {
+  font-size: 36rpx;
+}
+.icon-item .icon-box:not(.prism-icon) .fa, .icon-item .icon-box:not(.prism-icon) .fa-brands, .icon-item .icon-box:not(.prism-icon) .iconfont {
+  font-size: 44rpx;
+  color: var(--prism-text-primary, #1D2129);
+}
+.icon-item .icon-name {
+  font-size: 20rpx;
+  color: var(--prism-text-secondary, #86909C);
+  text-align: center;
+  width: 100%;
+  line-height: 1.2;
+  padding: 0 4rpx;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+/* 分类抽屉 */
+.category-nav-wrapper {
+  position: relative;
+}
+.category-nav-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 100;
+}
+.category-nav-drawer {
+  position: fixed;
+  right: 0;
+  width: 400rpx;
+  max-height: 70vh;
+  background: var(--prism-bg-color-card, #FFFFFF);
+  border-radius: 24rpx 0 0 24rpx;
+  box-shadow: -8rpx 0 32rpx rgba(0, 0, 0, 0.15);
+  z-index: 102;
+  overflow: hidden;
+}
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 32rpx;
+  border-bottom: 1rpx solid var(--prism-border-color-light, #F2F3F5);
+  font-size: 30rpx;
+  font-weight: 600;
+  color: var(--prism-text-primary, #1D2129);
+}
+.drawer-close {
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.05);
+}
+.drawer-close .fa {
+  font-size: 24rpx;
+  color: var(--prism-text-secondary, #86909C);
+}
+.drawer-content {
+  max-height: calc(70vh - 100rpx);
+}
+.drawer-item {
+  display: flex;
+  align-items: center;
+  padding: 24rpx 32rpx;
+  transition: all 0.2s;
+}
+.drawer-item:active {
+  background: rgba(52, 120, 246, 0.08);
+}
+.drawer-item.active {
+  background: rgba(52, 120, 246, 0.1);
+}
+.drawer-item.active .drawer-item-index {
+  background: linear-gradient(135deg, #3478F6 0%, #5B9BF8 100%);
+  color: #FFFFFF;
+}
+.drawer-item.active .drawer-item-name {
+  color: #3478F6;
+  font-weight: 600;
+}
+.drawer-item-index {
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.05);
+  border-radius: 8rpx;
+  font-size: 22rpx;
+  color: var(--prism-text-secondary, #86909C);
+  margin-right: 20rpx;
+}
+.drawer-item-name {
+  flex: 1;
+  font-size: 28rpx;
+  color: var(--prism-text-primary, #1D2129);
+}
+.drawer-item-count {
+  font-size: 24rpx;
+  color: var(--prism-text-placeholder, #C9CDD4);
+}
+/* 深色模式 */
+.dark-mode .search-header {
+  background: var(--prism-bg-color-card, #1A1A1A);
+  border-bottom-color: var(--prism-border-color-light, #2D2D2D);
+}
+.dark-mode .section-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .style-sheet {
+  background: var(--prism-bg-color-card, #242424);
+}
+.dark-mode .sheet-handle {
+  background: rgba(255, 255, 255, 0.2);
+}
+.dark-mode .sheet-title {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .color-item.active {
+  background: rgba(52, 120, 246, 0.2);
+}
+.dark-mode .style-item {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.dark-mode .tab-item {
+  background: var(--prism-bg-color-card, #1A1A1A);
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.dark-mode .tab-item.active {
+  background: linear-gradient(135deg, #3478F6 0%, #5B9BF8 100%);
+  color: #FFFFFF;
+}
+.dark-mode .icon-item {
+  background: var(--prism-bg-color-card, #1A1A1A);
+}
+.dark-mode .icon-item .icon-box:not(.prism-icon) .fa, .dark-mode .icon-item .icon-box:not(.prism-icon) .fa-brands, .dark-mode .icon-item .icon-box:not(.prism-icon) .iconfont {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .category-nav-drawer {
+  background: var(--prism-bg-color-card, #1A1A1A);
+  box-shadow: -8rpx 0 32rpx rgba(0, 0, 0, 0.4);
+}
+.dark-mode .drawer-header {
+  border-bottom-color: var(--prism-border-color-light, #2D2D2D);
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .drawer-close {
+  background: rgba(255, 255, 255, 0.1);
+}
+.dark-mode .drawer-close .fa {
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.dark-mode .drawer-item-index {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--prism-text-secondary, #A9AEB8);
+}
+.dark-mode .drawer-item-name {
+  color: var(--prism-text-primary, #E5E6EB);
+}
+.dark-mode .drawer-item.active {
+  background: rgba(52, 120, 246, 0.15);
+}