/**
 * Ting UI - 硅胶质感 CSS 框架
 * 版本: 1.1.0
 * 作者: TingTing
 * 说明: 一套通用的硅胶质感(tingui)设计系统
 * 
 * 自定义主题方法：
 * 在引入本 CSS 后，重新定义 :root 变量即可覆盖默认样式
 * 
 * 示例：
 * <style>
 *   :root {
 *     --t-bg: #f0f0f3;           // 自定义背景色
 *     --t-primary: #ff6b6b;       // 自定义主题色
 *     --t-radius: 16px;           // 自定义圆角
 *   }
 * </style>
 */

/* 导入模块化CSS文件 */
@import './css/tingui.css';

/* 以下是旧的CSS内容，将逐步迁移到模块化文件中 */

/* ==================== 基础变量 ==================== */
/* :root {
    /* 基础颜色 - 可通过覆盖这些变量来自定义主题 */
/*     --t-bg: #e3e5e7;
    --t-shadow-dark: #b6b9ba;
    --t-shadow-light: #fafafd;
    
    /* 背景色变体 */
/*     --t-bg-light: #e3e5e7;
    --t-bg-dark: #2d2d2d;
    --t-bg-warm: #f5f0e8;
    --t-bg-cool: #e8f0f5;
    
    /* 自动计算阴影颜色（基于背景色） */
/*     /* 如果手动设置 --t-bg，建议同时设置 --t-shadow-dark 和 --t-shadow-light */
/*     /* --t-shadow-dark: 比背景色暗 20-25% */
/*     /* --t-shadow-light: 比背景色亮 10-15% */
    
    /* 文字颜色 */
/*     --t-text-primary: #303133;
    --t-text-regular: #606266;
    --t-text-secondary: #909399;
    --t-text-placeholder: #a8abb2;
    
    /* 主题色 */
/*     --t-primary: #409eff;
    --t-primary-light: #66b1ff;
    --t-primary-dark: #3a8ee6;
    --t-success: #67c23a;
    --t-success-light: #85ce61;
    --t-warning: #e6a23c;
    --t-warning-light: #ebb563;
    --t-warning-active: #f7ba2a;
    --t-danger: #f56c6c;
    --t-danger-light: #f78989;
    --t-info: #909399;
    --t-info-light: #a6a9ad;
    
    /* 圆角 */
/*     --t-radius-sm: 8px;
    --t-radius: 12px;
    --t-radius-lg: 16px;
    --t-radius-xl: 20px;
    
    /* 阴影强度 */
/*     --t-shadow-sm: 2px 2px 4px var(--t-shadow-dark), -2px -2px 4px var(--t-shadow-light);
    --t-shadow: 4px 4px 8px var(--t-shadow-dark), -4px -4px 8px var(--t-shadow-light);
    --t-shadow-lg: 6px 6px 12px var(--t-shadow-dark), -6px -6px 12px var(--t-shadow-light);
    --t-shadow-xl: 8px 8px 16px var(--t-shadow-dark), -8px -8px 16px var(--t-shadow-light);
    
    /* 内阴影 */
/*     --t-inset-sm: inset 2px 2px 4px var(--t-shadow-dark), inset -2px -2px 4px var(--t-shadow-light);
    --t-inset: inset 3px 3px 6px var(--t-shadow-dark), inset -3px -3px 6px var(--t-shadow-light);
    --t-inset-lg: inset 4px 4px 8px var(--t-shadow-dark), inset -4px -4px 8px var(--t-shadow-light);
    
    /* 边框和分隔线阴影 */
/*     --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05);
    --t-primary-glow-shadow: 5px 5px 10px rgba(64, 158, 255, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    --t-danger-glow-shadow: 5px 5px 10px rgba(245, 108, 108, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    
    /* 对话框相关 */
/*     --t-dialog-mask-bg: rgba(0, 0, 0, 0.5);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* 其他颜色变量 */
/*     --t-primary-hex: #409EFF;
    --t-disabled-color: #C0C4CC;
    --t-bg-disabled: #F5F7FA;
    --t-border-color-light: rgba(0, 0, 0, 0.05);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(64, 158, 255, 0.05);
    --t-primary-rgba-8: rgba(64, 158, 255, 0.08);
    --t-primary-rgba-10: rgba(64, 158, 255, 0.1);
    --t-primary-rgba-20: rgba(64, 158, 255, 0.2);
    --t-success-rgba-10: rgba(103, 194, 58, 0.1);
    --t-success-rgba-20: rgba(103, 194, 58, 0.2);
    --t-warning-rgba-10: rgba(230, 162, 60, 0.1);
    --t-warning-rgba-20: rgba(230, 162, 60, 0.2);
    --t-danger-rgba-10: rgba(245, 108, 108, 0.1);
    --t-danger-rgba-20: rgba(245, 108, 108, 0.2);
    --t-info-rgba-10: rgba(144, 147, 153, 0.1);
    --t-info-rgba-20: rgba(144, 147, 153, 0.2);
    
    /* 内阴影变体 */
/*     --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.15), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
    
    /* 过渡 */
/*     --t-transition: all 0.3s ease;
    
    /* 响应式断点变量 - 与 Bootstrap 5 对齐 */
/*     --t-breakpoint-xs: 0;
    --t-breakpoint-sm: 576px;
    --t-breakpoint-md: 768px;
    --t-breakpoint-lg: 992px;
    --t-breakpoint-xl: 1200px;
    --t-breakpoint-xxl: 1400px;
} */

/* ==================== 深色模式 ==================== */
/* .dark{
    /* 基础颜色 */
/*     --t-bg: #2d2d2d;
    --t-shadow-dark: #1a1a1a;
    --t-shadow-light: #404040;
    
    /* 背景色变体 */
/*     --t-bg-light: #2d2d2d;
    --t-bg-dark: #1a1a1a;
    --t-bg-warm: #3a3530;
    --t-bg-cool: #303a40;
    
    /* 文字颜色 */
/*     --t-text-primary: #e0e0e0;
    --t-text-regular: #b0b0b0;
    --t-text-secondary: #808080;
    --t-text-placeholder: #606060;
    
    /* 主题色 - 在深色模式下稍微调亮 */
/*     --t-primary: #5cadff;
    --t-primary-light: #7bbdff;
    --t-primary-dark: #409eff;
    --t-success: #85ce61;
    --t-success-light: #a3d97f;
    --t-warning: #ebb563;
    --t-warning-light: #f0c78a;
    --t-warning-active: #f7ba2a;
    --t-danger: #f78989;
    --t-danger-light: #f9a6a6;
    --t-info: #a6a9ad;
    --t-info-light: #bcbec1;
    
    /* 边框和分隔线阴影 - 深色模式 */
/*     --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
    --t-primary-glow-shadow: 5px 5px 10px rgba(64, 158, 255, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
    --t-danger-glow-shadow: 5px 5px 10px rgba(245, 108, 108, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
    
    /* 对话框相关 - 深色模式 */
/*     --t-dialog-mask-bg: rgba(0, 0, 0, 0.7);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* 其他颜色变量 - 深色模式 */
/*     --t-primary-hex: #5cadff;
    --t-disabled-color: #606266;
    --t-bg-disabled: #1a1a1a;
    --t-border-color-light: rgba(255, 255, 255, 0.05);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(92, 173, 255, 0.05);
    --t-primary-rgba-8: rgba(92, 173, 255, 0.08);
    --t-primary-rgba-10: rgba(92, 173, 255, 0.1);
    --t-primary-rgba-20: rgba(92, 173, 255, 0.2);
    --t-success-rgba-10: rgba(133, 206, 97, 0.1);
    --t-success-rgba-20: rgba(133, 206, 97, 0.2);
    --t-warning-rgba-10: rgba(235, 181, 99, 0.1);
    --t-warning-rgba-20: rgba(235, 181, 99, 0.2);
    --t-danger-rgba-10: rgba(247, 137, 137, 0.1);
    --t-danger-rgba-20: rgba(247, 137, 137, 0.2);
    --t-info-rgba-10: rgba(166, 169, 173, 0.1);
    --t-info-rgba-20: rgba(166, 169, 173, 0.2);
    
    /* 内阴影变体 - 深色模式 */
/*     --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.35), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
} */

/* ==================== 高对比度主题 ==================== */
/* .high-contrast{
    /* 基础颜色 */
/*     --t-bg: #ffffff;
    --t-shadow-dark: #000000;
    --t-shadow-light: #ffffff;
    
    /* 背景色变体 */
/*     --t-bg-light: #ffffff;
    --t-bg-dark: #000000;
    --t-bg-warm: #fff8e1;
    --t-bg-cool: #e3f2fd;
    
    /* 文字颜色 */
/*     --t-text-primary: #000000;
    --t-text-regular: #000000;
    --t-text-secondary: #666666;
    --t-text-placeholder: #999999;
    
    /* 主题色 - 高对比度 */
/*     --t-primary: #0066cc;
    --t-primary-light: #3399ff;
    --t-primary-dark: #004c99;
    --t-success: #006600;
    --t-success-light: #339933;
    --t-warning: #cc6600;
    --t-warning-light: #ff9933;
    --t-warning-active: #ff6600;
    --t-danger: #cc0000;
    --t-danger-light: #ff3333;
    --t-info: #666666;
    --t-info-light: #999999;
    
    /* 边框和分隔线阴影 - 高对比度 */
/*     --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 1);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.3);
    --t-primary-glow-shadow: 5px 5px 10px rgba(0, 102, 204, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.9);
    --t-danger-glow-shadow: 5px 5px 10px rgba(204, 0, 0, 0.4), -5px -5px 10px rgba(255, 255, 255, 0.9);
    
    /* 对话框相关 - 高对比度 */
/*     --t-dialog-mask-bg: rgba(0, 0, 0, 0.8);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* 其他颜色变量 - 高对比度 */
/*     --t-primary-hex: #0066cc;
    --t-disabled-color: #cccccc;
    --t-bg-disabled: #f5f5f5;
    --t-border-color-light: rgba(0, 0, 0, 0.2);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(0, 102, 204, 0.05);
    --t-primary-rgba-8: rgba(0, 102, 204, 0.08);
    --t-primary-rgba-10: rgba(0, 102, 204, 0.1);
    --t-primary-rgba-20: rgba(0, 102, 204, 0.2);
    --t-success-rgba-10: rgba(0, 102, 0, 0.1);
    --t-success-rgba-20: rgba(0, 102, 0, 0.2);
    --t-warning-rgba-10: rgba(204, 102, 0, 0.1);
    --t-warning-rgba-20: rgba(204, 102, 0, 0.2);
    --t-danger-rgba-10: rgba(204, 0, 0, 0.1);
    --t-danger-rgba-20: rgba(204, 0, 0, 0.2);
    --t-info-rgba-10: rgba(102, 102, 102, 0.1);
    --t-info-rgba-20: rgba(102, 102, 102, 0.2);
    
    /* 内阴影变体 - 高对比度 */
/*     --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.25), inset -4px -4px 8px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.3), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
} */

/* ==================== 暖色调主题 ==================== */
/* .warm-theme{
    /* 基础颜色 */
/*     --t-bg: #f5f0e8;
    --t-shadow-dark: #d4c8b8;
    --t-shadow-light: #fffaf0;
    
    /* 背景色变体 */
/*     --t-bg-light: #f5f0e8;
    --t-bg-dark: #e8d8c8;
    --t-bg-warm: #f5f0e8;
    --t-bg-cool: #f0e8e0;
    
    /* 文字颜色 */
/*     --t-text-primary: #8b4513;
    --t-text-regular: #a0522d;
    --t-text-secondary: #cd853f;
    --t-text-placeholder: #d2b48c;
    
    /* 主题色 - 暖色调 */
/*     --t-primary: #ff8c00;
    --t-primary-light: #ffa500;
    --t-primary-dark: #ff7f50;
    --t-success: #228b22;
    --t-success-light: #32cd32;
    --t-warning: #ff4500;
    --t-warning-light: #ff6347;
    --t-warning-active: #ff8c00;
    --t-danger: #dc143c;
    --t-danger-light: #ff69b4;
    --t-info: #cd853f;
    --t-info-light: #daa520;
    
    /* 边框和分隔线阴影 - 暖色调 */
/*     --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
    --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05);
    --t-primary-glow-shadow: 5px 5px 10px rgba(255, 140, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    --t-danger-glow-shadow: 5px 5px 10px rgba(220, 20, 60, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
    
    /* 对话框相关 - 暖色调 */
/*     --t-dialog-mask-bg: rgba(0, 0, 0, 0.5);
    --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    
    /* 其他颜色变量 - 暖色调 */
/*     --t-primary-hex: #ff8c00;
    --t-disabled-color: #d2b48c;
    --t-bg-disabled: #faf0e6;
    --t-border-color-light: rgba(0, 0, 0, 0.05);
    --t-white: #fff;
    --t-white-rgba-10: rgba(255, 255, 255, 0.1);
    --t-white-rgba-20: rgba(255, 255, 255, 0.2);
    --t-white-rgba-30: rgba(255, 255, 255, 0.3);
    --t-white-rgba-50: rgba(255, 255, 255, 0.5);
    --t-white-rgba-70: rgba(255, 255, 255, 0.7);
    --t-white-rgba-80: rgba(255, 255, 255, 0.8);
    --t-white-rgba-90: rgba(255, 255, 255, 0.9);
    --t-white-rgba-95: rgba(255, 255, 255, 0.95);
    --t-black-rgba-2: rgba(0, 0, 0, 0.02);
    --t-black-rgba-5: rgba(0, 0, 0, 0.05);
    --t-black-rgba-10: rgba(0, 0, 0, 0.1);
    --t-black-rgba-12: rgba(0, 0, 0, 0.12);
    --t-black-rgba-15: rgba(0, 0, 0, 0.15);
    --t-black-rgba-20: rgba(0, 0, 0, 0.2);
    --t-black-rgba-30: rgba(0, 0, 0, 0.3);
    --t-black-rgba-40: rgba(0, 0, 0, 0.4);
    --t-black-rgba-50: rgba(0, 0, 0, 0.5);
    --t-black-rgba-60: rgba(0, 0, 0, 0.6);
    --t-black-rgba-85: rgba(0, 0, 0, 0.85);
    --t-black-rgba-90: rgba(0, 0, 0, 0.9);
    --t-primary-rgba-5: rgba(255, 140, 0, 0.05);
    --t-primary-rgba-8: rgba(255, 140, 0, 0.08);
    --t-primary-rgba-10: rgba(255, 140, 0, 0.1);
    --t-primary-rgba-20: rgba(255, 140, 0, 0.2);
    --t-success-rgba-10: rgba(34, 139, 34, 0.1);
    --t-success-rgba-20: rgba(34, 139, 34, 0.2);
    --t-warning-rgba-10: rgba(255, 69, 0, 0.1);
    --t-warning-rgba-20: rgba(255, 69, 0, 0.2);
    --t-danger-rgba-10: rgba(220, 20, 60, 0.1);
    --t-danger-rgba-20: rgba(220, 20, 60, 0.2);
    --t-info-rgba-10: rgba(205, 133, 63, 0.1);
    --t-info-rgba-20: rgba(205, 133, 63, 0.2);
    
    /* 内阴影变体 - 暖色调 */
/*     --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
    --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.15), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
    --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
} */

/* ==================== 冷色调主题 ==================== */
/* .cool-theme{
    /* 基础颜色 */
/*     --t-bg: #e8f0f5;
/*     --t-shadow-dark: #b8c4d4;
/*     --t-shadow-light: #f8fafc;
/*     
/*     /* 背景色变体 */
/*     --t-bg-light: #e8f0f5;
/*     --t-bg-dark: #d8e4f0;
/*     --t-bg-warm: #f0e8f5;
/*     --t-bg-cool: #e8f0f5;
/*     
/*     /* 文字颜色 */
/*     --t-text-primary: #1a365d;
/*     --t-text-regular: #2d3748;
/*     --t-text-secondary: #4a5568;
/*     --t-text-placeholder: #718096;
/*     
/*     /* 主题色 - 冷色调 */
/*     --t-primary: #4299e1;
/*     --t-primary-light: #63b3ed;
/*     --t-primary-dark: #3182ce;
/*     --t-success: #38b2ac;
/*     --t-success-light: #4fd1c7;
/*     --t-warning: #ed8936;
/*     --t-warning-light: #f6ad55;
/*     --t-warning-active: #ed8936;
/*     --t-danger: #f56565;
/*     --t-danger-light: #fc8181;
/*     --t-info: #4a5568;
/*     --t-info-light: #718096;
/*     
/*     /* 边框和分隔线阴影 - 冷色调 */
/*     --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
/*     --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.05);
/*     --t-primary-glow-shadow: 5px 5px 10px rgba(66, 153, 225, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
/*     --t-danger-glow-shadow: 5px 5px 10px rgba(245, 101, 101, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
/*     
/*     /* 对话框相关 - 冷色调 */
/*     --t-dialog-mask-bg: rgba(0, 0, 0, 0.5);
/*     --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
/*     
/*     /* 其他颜色变量 - 冷色调 */
/*     --t-primary-hex: #4299e1;
/*     --t-disabled-color: #cbd5e0;
/*     --t-bg-disabled: #f7fafc;
/*     --t-border-color-light: rgba(0, 0, 0, 0.05);
/*     --t-white: #fff;
/*     --t-white-rgba-10: rgba(255, 255, 255, 0.1);
/*     --t-white-rgba-20: rgba(255, 255, 255, 0.2);
/*     --t-white-rgba-30: rgba(255, 255, 255, 0.3);
/*     --t-white-rgba-50: rgba(255, 255, 255, 0.5);
/*     --t-white-rgba-70: rgba(255, 255, 255, 0.7);
/*     --t-white-rgba-80: rgba(255, 255, 255, 0.8);
/*     --t-white-rgba-90: rgba(255, 255, 255, 0.9);
/*     --t-white-rgba-95: rgba(255, 255, 255, 0.95);
/*     --t-black-rgba-2: rgba(0, 0, 0, 0.02);
/*     --t-black-rgba-5: rgba(0, 0, 0, 0.05);
/*     --t-black-rgba-10: rgba(0, 0, 0, 0.1);
/*     --t-black-rgba-12: rgba(0, 0, 0, 0.12);
/*     --t-black-rgba-15: rgba(0, 0, 0, 0.15);
/*     --t-black-rgba-20: rgba(0, 0, 0, 0.2);
/*     --t-black-rgba-30: rgba(0, 0, 0, 0.3);
/*     --t-black-rgba-40: rgba(0, 0, 0, 0.4);
/*     --t-black-rgba-50: rgba(0, 0, 0, 0.5);
/*     --t-black-rgba-60: rgba(0, 0, 0, 0.6);
/*     --t-black-rgba-85: rgba(0, 0, 0, 0.85);
/*     --t-black-rgba-90: rgba(0, 0, 0, 0.9);
/*     --t-primary-rgba-5: rgba(66, 153, 225, 0.05);
/*     --t-primary-rgba-8: rgba(66, 153, 225, 0.08);
/*     --t-primary-rgba-10: rgba(66, 153, 225, 0.1);
/*     --t-primary-rgba-20: rgba(66, 153, 225, 0.2);
/*     --t-success-rgba-10: rgba(56, 178, 172, 0.1);
/*     --t-success-rgba-20: rgba(56, 178, 172, 0.2);
/*     --t-warning-rgba-10: rgba(237, 137, 54, 0.1);
/*     --t-warning-rgba-20: rgba(237, 137, 54, 0.2);
/*     --t-danger-rgba-10: rgba(245, 101, 101, 0.1);
/*     --t-danger-rgba-20: rgba(245, 101, 101, 0.2);
/*     --t-info-rgba-10: rgba(74, 85, 104, 0.1);
/*     --t-info-rgba-20: rgba(74, 85, 104, 0.2);
/*     
/*     /* 内阴影变体 - 冷色调 */
/*     --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.15), inset -2px -2px 4px rgba(255, 255, 255, 0.8);
/*     --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
/*     --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -4px -4px 8px rgba(255, 255, 255, 0.9);
/*     --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.15), inset -5px -5px 10px rgba(255, 255, 255, 0.95);
/*     --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
/* } */

/* 自动适应系统深色模式偏好 */
/* @media (prefers-color-scheme: dark) {
/*     :root:not([data-theme="light"]) {
/*         /* 基础颜色 */
/*         --t-bg: #2d2d2d;
/*         --t-shadow-dark: #1a1a1a;
/*         --t-shadow-light: #404040;
/*         
/*         /* 背景色变体 */
/*         --t-bg-light: #2d2d2d;
/*         --t-bg-dark: #1a1a1a;
/*         --t-bg-warm: #3a3530;
/*         --t-bg-cool: #303a40;
/*         
/*         /* 文字颜色 */
/*         --t-text-primary: #e0e0e0;
/*         --t-text-regular: #b0b0b0;
/*         --t-text-secondary: #808080;
/*         --t-text-placeholder: #606060;
/*         
/*         /* 主题色 */
/*         --t-primary: #5cadff;
/*         --t-primary-light: #7bbdff;
/*         --t-primary-dark: #409eff;
/*         --t-success: #85ce61;
/*         --t-success-light: #a3d97f;
/*         --t-warning: #ebb563;
/*         --t-warning-light: #f0c78a;
/*         --t-warning-active: #f7ba2a;
/*         --t-danger: #f78989;
/*         --t-danger-light: #f9a6a6;
/*         --t-info: #a6a9ad;
/*         --t-info-light: #bcbec1;
/*         
/*         /* 边框和分隔线阴影 - 深色模式 */
/*         --t-border-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
/*         --t-inset-border-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
/*         --t-primary-glow-shadow: 5px 5px 10px rgba(64, 158, 255, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
/*         --t-danger-glow-shadow: 5px 5px 10px rgba(245, 108, 108, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.1);
/*         
/*         /* 对话框相关 - 深色模式 */
/*         --t-dialog-mask-bg: rgba(0, 0, 0, 0.7);
/*         --t-dialog-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
/*         
/*         /* 其他颜色变量 - 深色模式 */
/*         --t-primary-hex: #5cadff;
/*         --t-disabled-color: #606266;
/*         --t-bg-disabled: #1a1a1a;
/*         --t-border-color-light: rgba(255, 255, 255, 0.05);
/*         --t-white: #fff;
/*         --t-white-rgba-10: rgba(255, 255, 255, 0.1);
/*         --t-white-rgba-20: rgba(255, 255, 255, 0.2);
/*         --t-white-rgba-30: rgba(255, 255, 255, 0.3);
/*         --t-white-rgba-50: rgba(255, 255, 255, 0.5);
/*         --t-white-rgba-70: rgba(255, 255, 255, 0.7);
/*         --t-white-rgba-80: rgba(255, 255, 255, 0.8);
/*         --t-white-rgba-90: rgba(255, 255, 255, 0.9);
/*         --t-white-rgba-95: rgba(255, 255, 255, 0.95);
/*         --t-black-rgba-2: rgba(0, 0, 0, 0.02);
/*         --t-black-rgba-5: rgba(0, 0, 0, 0.05);
/*         --t-black-rgba-10: rgba(0, 0, 0, 0.1);
/*         --t-black-rgba-12: rgba(0, 0, 0, 0.12);
/*         --t-black-rgba-15: rgba(0, 0, 0, 0.15);
/*         --t-black-rgba-20: rgba(0, 0, 0, 0.2);
/*         --t-black-rgba-30: rgba(0, 0, 0, 0.3);
/*         --t-black-rgba-40: rgba(0, 0, 0, 0.4);
/*         --t-black-rgba-50: rgba(0, 0, 0, 0.5);
/*         --t-black-rgba-60: rgba(0, 0, 0, 0.6);
/*         --t-black-rgba-85: rgba(0, 0, 0, 0.85);
/*         --t-black-rgba-90: rgba(0, 0, 0, 0.9);
/*         --t-primary-rgba-5: rgba(92, 173, 255, 0.05);
/*         --t-primary-rgba-8: rgba(92, 173, 255, 0.08);
/*         --t-primary-rgba-10: rgba(92, 173, 255, 0.1);
/*         --t-primary-rgba-20: rgba(92, 173, 255, 0.2);
/*         --t-success-rgba-10: rgba(133, 206, 97, 0.1);
/*         --t-success-rgba-20: rgba(133, 206, 97, 0.2);
/*         --t-warning-rgba-10: rgba(235, 181, 99, 0.1);
/*         --t-warning-rgba-20: rgba(235, 181, 99, 0.2);
/*         --t-danger-rgba-10: rgba(247, 137, 137, 0.1);
/*         --t-danger-rgba-20: rgba(247, 137, 137, 0.2);
/*         --t-info-rgba-10: rgba(166, 169, 173, 0.1);
/*         --t-info-rgba-20: rgba(166, 169, 173, 0.2);
/*         
/*         /* 内阴影变体 - 深色模式 */
/*         --t-inset-shadow-sm: inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.1);
/*         --t-inset-shadow-md: inset 3px 3px 6px rgba(0, 0, 0, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.1);
/*         --t-inset-shadow-lg: inset 4px 4px 8px rgba(0, 0, 0, 0.3), inset -4px -4px 8px rgba(255, 255, 255, 0.1);
/*         --t-inset-shadow-xl: inset 5px 5px 10px rgba(0, 0, 0, 0.35), inset -5px -5px 10px rgba(255, 255, 255, 0.1);
/*         --t-inset-shadow-button: inset 2px 2px 5px rgba(0, 0, 0, 0.3), inset -2px -2px 5px rgba(255, 255, 255, 0.05);
/*     }
/* }

/* 减少动画偏好 */
/* @media (prefers-reduced-motion: reduce) {
/*     *,
/*     *::before,
/*     *::after {
/*         animation-duration: 0.01ms !important;
/*         animation-iteration-count: 1 !important;
/*         transition-duration: 0.01ms !important;
/*     }
/* } */

/* ==================== 基础样式重置 ==================== */

/**
 * 页面整体背景设置
 * 使用: 给 body 添加 class="t-body"
 * 作用: 设置整个页面的背景色、文字颜色和字体
 */
.t-body {
    background-color: var(--t-bg);
    color: var(--t-text-regular);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Te', Arial, sans-serif;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

/**
 * 页面背景色覆盖类
 * 如果不想用 t-body，可以直接用这些类设置背景色
 */
.t-page-bg {
    background-color: var(--t-bg);
    min-height: 100vh;
}

.t-page-bg-light { background-color: var(--t-bg-light); }
.t-page-bg-dark { background-color: var(--t-bg-dark); }
.t-page-bg-warm { background-color: var(--t-bg-warm); }
.t-page-bg-cool { background-color: var(--t-bg-cool); }

/* ==================== 核心硅胶质感类 ==================== */

/**
 * 基础凸起效果
 * 使用: class="t-raised"
 */
.t-raised {
    background: var(--t-bg);
    box-shadow: var(--t-shadow);
    border-radius: var(--t-radius);
    transition: var(--t-transition);
}

/**
 * 基础凹陷效果
 * 使用: class="t-inset"
 */
.t-inset {
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    border-radius: var(--t-radius);
    transition: var(--t-transition);
}

/**
 * 凸起 - 小
 * 使用: class="t-raised-sm"
 */
.t-raised-sm {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    border-radius: var(--t-radius-sm);
    transition: var(--t-transition);
}

/**
 * 凸起 - 大
 * 使用: class="t-raised-lg"
 */
.t-raised-lg {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-lg);
    border-radius: var(--t-radius-lg);
    transition: var(--t-transition);
}

/**
 * 凹陷 - 小
 * 使用: class="t-inset-sm"
 */
.t-inset-sm {
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    border-radius: var(--t-radius-sm);
    transition: var(--t-transition);
}

/**
 * 凹陷 - 大
 * 使用: class="t-inset-lg"
 */
.t-inset-lg {
    background: var(--t-bg);
    box-shadow: var(--t-inset-lg);
    border-radius: var(--t-radius-lg);
    transition: var(--t-transition);
}

/* ==================== 无凸起（纯背景） ==================== */

/**
 * 无凸起效果 - 纯背景色
 * 使用: class="t-flat"
 * 说明: 只设置背景色和圆角，不添加阴影
 */
.t-flat {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    transition: var(--t-transition);
}

.t-flat-sm {
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    transition: var(--t-transition);
}

.t-flat-lg {
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    transition: var(--t-transition);
}

/* ==================== 交互效果 ==================== */

/**
 * 鼠标移入凸起
 * 使用: class="t-raised t-hover-raised" 或 "t-flat t-hover-raised"
 */
.t-hover-raised:hover {
    box-shadow: var(--t-shadow-lg);
}

/**
 * 鼠标移入凹陷
 * 使用: class="t-raised t-hover-inset"
 */
.t-hover-inset:hover {
    box-shadow: var(--t-inset);
}

/**
 * 点击凸起（按下效果）
 * 使用: class="t-raised t-active-raised"
 */
.t-active-raised:active {
    box-shadow: var(--t-shadow-sm);
}

/**
 * 点击凹陷
 * 使用: class="t-raised t-active-inset"
 */
.t-active-inset:active,
.t-active-inset.active {
    box-shadow: var(--t-inset);
}

/**
 * 点击切换凹陷（常用于按钮）
 * 使用: class="t-btn"
 */
.t-btn {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    border-radius: var(--t-radius);
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: var(--t-transition);
}

.t-btn:hover {
    box-shadow: var(--t-shadow-lg);
}

.t-btn:active {
    box-shadow: var(--t-inset);
}

.t-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== 尺寸变体 ==================== */

.t-btn-sm {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: var(--t-radius-sm);
}

.t-btn-lg {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: var(--t-radius-lg);
}

/* ==================== 主题色按钮 ==================== */

.t-btn-primary {
    color: var(--t-primary);
}

.t-btn-success {
    color: var(--t-success);
}

.t-btn-warning {
    color: var(--t-warning);
}

.t-btn-danger {
    color: var(--t-danger);
}

/* ==================== t-button 别名 (用于表单组件) ==================== */

.t-button {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    border-radius: var(--t-radius);
    border: none;
    padding: 12px 24px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: var(--t-transition);
}

.t-button:hover {
    box-shadow: var(--t-shadow-lg);
}

.t-button:active {
    box-shadow: var(--t-inset);
}

.t-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.t-button--primary {
    color: var(--t-primary);
}

.t-button--success {
    color: var(--t-success);
}

.t-button--warning {
    color: var(--t-warning);
}

.t-button--danger {
    color: var(--t-danger);
}

.t-button--small {
    padding: 8px 16px;
    font-size: 12px;
    border-radius: var(--t-radius-sm);
}

/* 朴素按钮 */
.t-btn-plain {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--t-border);
}

.t-btn-plain:hover {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
}

.t-btn-plain.t-btn-primary {
    color: var(--t-primary);
    border-color: var(--t-primary);
}

.t-btn-plain.t-btn-success {
    color: var(--t-success);
    border-color: var(--t-success);
}

.t-btn-plain.t-btn-warning {
    color: var(--t-warning);
    border-color: var(--t-warning);
}

.t-btn-plain.t-btn-danger {
    color: var(--t-danger);
    border-color: var(--t-danger);
}

/* 圆角按钮 */
.t-btn-round {
    border-radius: 50px;
    padding: 12px 24px;
}

/* 圆形按钮 */
.t-btn-circle {
    border-radius: 50%;
    padding: 0;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.t-btn-circle.t-btn-lg {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.t-btn-circle.t-btn-sm {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.t-btn-circle.t-btn-mini {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

/* 超小按钮 */
.t-btn-mini {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: var(--t-radius-sm);
}

/* 加载中按钮 */
.t-btn-loading {
    cursor: not-allowed;
    opacity: 0.8;
}

.t-btn-loading-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: t-btn-spin 1s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

@keyframes t-btn-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 图标按钮 */
.t-btn-icon {
    margin-right: 6px;
    font-size: 14px;
}

/* 按钮组 */
.t-btn-group {
    display: inline-flex;
    vertical-align: middle;
}

.t-btn-group .t-btn {
    border-radius: 0;
    margin: 0;
}

.t-btn-group .t-btn:first-child {
    border-top-left-radius: var(--t-radius);
    border-bottom-left-radius: var(--t-radius);
}

.t-btn-group .t-btn:last-child {
    border-top-right-radius: var(--t-radius);
    border-bottom-right-radius: var(--t-radius);
}

.t-btn-group .t-btn:not(:last-child) {
    margin-right: -1px;
}

/* ==================== 输入框 ==================== */

.t-input {
    color: var(--t-text-regular);
    outline: none;
    transition: var(--t-transition);
    width: 100%;
    box-sizing: border-box;
}

.t-input::placeholder {
    color: var(--t-text-placeholder);
}

.t-input:focus {
    box-shadow: var(--t-inset-lg);
}

/* ==================== 卡片 ==================== */

.t-card {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    border-radius: var(--t-radius-sm);
    padding: 24px;
    transition: var(--t-transition);
}

.t-card:hover {
    box-shadow: var(--t-shadow-lg);
}

/* ==================== Card 卡片 ==================== */

.t-card-item {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
    overflow: hidden;
}

.t-card-item:hover {
    box-shadow: var(--t-shadow);
}

/* 卡片头部 */
.t-card-item__header {
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.t-card-item__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
}

/* 卡片内容 */
.t-card-item__body {
    padding: 20px;
    color: var(--t-text-regular);
    font-size: 14px;
    line-height: 1.6;
}

/* 卡片底部 */
.t-card-item__footer {
    padding: 12px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 阴影变体 */
.t-card-item--never {
    box-shadow: none;
}

.t-card-item--never:hover {
    box-shadow: none;
}

.t-card-item--hover {
    box-shadow: none;
}

.t-card-item--hover:hover {
    box-shadow: var(--t-shadow-lg);
}

.t-card-item--always {
    box-shadow: var(--t-shadow-lg);
}

.t-card-item--always:hover {
    box-shadow: var(--t-shadow-xl);
}

/* 简洁卡片 */
.t-card-item--plain {
    box-shadow: var(--t-shadow-sm);
}

.t-card-item--plain:hover {
    box-shadow: var(--t-shadow);
}

.t-card-item--plain .t-card-item__body {
    padding: 24px;
}

/* ==================== 圆形按钮/图标 ==================== */

.t-circle {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-icon-btn {
    width: 50px;
    height: 50px;
    background: var(--t-bg);
    box-shadow: var(--t-shadow);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.t-icon-btn:hover {
    box-shadow: var(--t-shadow-lg);
}

.t-icon-btn:active {
    box-shadow: var(--t-inset);
}

/* ==================== Icon 图标 ==================== */

.t-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 24px;
    height: 24px;
    line-height: 1;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 图标尺寸 */
.t-icon--mini {
    font-size: 12px;
    width: 14px;
    height: 14px;
}

.t-icon--small {
    font-size: 16px;
    width: 18px;
    height: 18px;
}

.t-icon--large {
    font-size: 28px;
    width: 32px;
    height: 32px;
}

.t-icon--xlarge {
    font-size: 36px;
    width: 40px;
    height: 40px;
}

/* 图标颜色 */
.t-icon--primary {
    color: var(--t-primary);
}

.t-icon--success {
    color: var(--t-success);
}

.t-icon--warning {
    color: var(--t-warning);
}

.t-icon--danger {
    color: var(--t-danger);
}

.t-icon--info {
    color: var(--t-info);
}

/* 图标网格 */
.t-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.t-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
    cursor: pointer;
}

.t-icon-item:hover {
    box-shadow: var(--t-shadow);
    transform: translateY(-2px);
}

.t-icon-item .t-icon {
    margin-bottom: 8px;
    font-size: 24px;
}

.t-icon-item span {
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* ==================== Link 文字链接 ==================== */

.t-link {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--t-text-regular);
    text-decoration: none;
    cursor: pointer;
    transition: var(--t-transition);
}

.t-link:hover {
    color: var(--t-primary);
}

.t-link:active {
    color: var(--t-primary-dark);
}

.t-link.is-disabled {
    color: var(--t-text-placeholder);
    cursor: not-allowed;
}

/* 链接颜色 */
.t-link--primary {
    color: var(--t-primary);
}

.t-link--primary:hover {
    color: var(--t-primary-light);
}

.t-link--success {
    color: var(--t-success);
}

.t-link--success:hover {
    color: var(--t-success-light);
}

.t-link--warning {
    color: var(--t-warning);
}

.t-link--warning:hover {
    color: var(--t-warning-light);
}

.t-link--danger {
    color: var(--t-danger);
}

.t-link--danger:hover {
    color: var(--t-danger-light);
}

/* 下划线 */
.t-link--underline {
    text-decoration: underline;
}

.t-link--underline:hover {
    text-decoration: none;
}

/* 图标链接 */
.t-link .t-icon {
    margin: 0 4px;
    font-size: 14px;
}

/* ==================== Timeline 时间线 ==================== */

/* ===== 竖向时间线 - 基础样式 ===== */
.t-timeline {
    position: relative;
    padding-left: 50px;
}

/* 时间线轨道 - 精致的硅胶质感 */
.t-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: linear-gradient(
        180deg,
        var(--t-shadow-dark) 0%,
        var(--t-bg) 50%,
        var(--t-shadow-light) 100%
    );
    border-radius: 2px;
    box-shadow: 
        inset 2px 2px 4px var(--t-shadow-dark),
        inset -2px -2px 4px var(--t-shadow-light);
}

/* 时间线项 */
.t-timeline-item {
    position: relative;
    padding-bottom: 32px;
}

.t-timeline-item:last-child {
    padding-bottom: 0;
}

/* 时间节点 - 3D硅胶质感 */
.t-timeline__node {
    position: absolute;
    left: -44px;
    top: 0;
    width: 36px;
    height: 36px;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: 
        4px 4px 8px var(--t-shadow-dark),
        -4px -4px 8px var(--t-shadow-light),
        inset 1px 1px 2px rgba(255, 255, 255, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--t-text-secondary);
    z-index: 2;
    transition: all 0.3s ease;
}

.t-timeline-item:hover .t-timeline__node {
    transform: scale(1.1);
    box-shadow: 
        6px 6px 12px var(--t-shadow-dark),
        -6px -6px 12px var(--t-shadow-light);
}

.t-timeline__icon {
    font-size: 16px;
    line-height: 1;
}

/* 主题色节点 - 发光效果 */
.t-timeline__node--primary {
    background: linear-gradient(145deg, var(--t-primary), var(--t-primary-light));
    color: var(--t-white);
    box-shadow: 
        4px 4px 12px rgba(64, 158, 255, 0.4),
        -4px -4px 12px var(--t-white-rgba-80),
        inset 1px 1px 2px var(--t-white-rgba-30);
}

.t-timeline__node--success {
    background: linear-gradient(145deg, var(--t-success), var(--t-success-light));
    color: var(--t-white);
    box-shadow: 
        4px 4px 12px rgba(103, 194, 58, 0.4),
        -4px -4px 12px var(--t-white-rgba-80),
        inset 1px 1px 2px var(--t-white-rgba-30);
}

.t-timeline__node--warning {
    background: linear-gradient(145deg, var(--t-warning), var(--t-warning-light));
    color: var(--t-white);
    box-shadow: 
        4px 4px 12px rgba(230, 162, 60, 0.4),
        -4px -4px 12px var(--t-white-rgba-80),
        inset 1px 1px 2px var(--t-white-rgba-30);
}

.t-timeline__node--danger {
    background: linear-gradient(145deg, var(--t-danger), var(--t-danger-light));
    color: var(--t-white);
    box-shadow: 
        4px 4px 12px rgba(245, 108, 108, 0.4),
        -4px -4px 12px var(--t-white-rgba-80),
        inset 1px 1px 2px var(--t-white-rgba-30);
}

/* 内容包装器 */
.t-timeline__content-wrapper {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    padding: 16px 20px;
    box-shadow: 
        6px 6px 12px var(--t-shadow-dark),
        -6px -6px 12px var(--t-shadow-light);
    transition: all 0.3s ease;
}

.t-timeline-item:hover .t-timeline__content-wrapper {
    box-shadow: 
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light);
    transform: translateX(4px);
}

/* 头部信息 */
.t-timeline__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.t-timeline__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
}

.t-timeline__time {
    font-size: 12px;
    color: var(--t-text-secondary);
    padding: 4px 10px;
    background: var(--t-bg);
    border-radius: 12px;
    box-shadow: 
        inset 2px 2px 4px var(--t-shadow-dark),
        inset -2px -2px 4px var(--t-shadow-light);
}

.t-timeline__desc {
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.6;
}

/* 卡片样式 */
.t-timeline__card {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    padding: 20px;
    box-shadow: 
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light);
    transition: all 0.3s ease;
}

.t-timeline__card:hover {
    box-shadow: 
        12px 12px 24px var(--t-shadow-dark),
        -12px -12px 24px var(--t-shadow-light);
}

.t-timeline__card--pending {
    opacity: 0.7;
}

.t-timeline__card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 8px;
}

.t-timeline__card-desc {
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.6;
    margin-bottom: 16px;
}

.t-timeline__card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.t-timeline__card-time {
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* ===== 交替布局 ===== */
.t-timeline--alternate {
    padding-left: 0;
}

.t-timeline--alternate::before {
    left: 50%;
    transform: translateX(-50%);
}

.t-timeline--alternate .t-timeline-item {
    display: flex;
    justify-content: flex-end;
    padding-right: calc(50% + 40px);
    padding-left: 0;
}

.t-timeline--alternate .t-timeline-item:nth-child(even) {
    justify-content: flex-start;
    padding-left: calc(50% + 40px);
    padding-right: 0;
}

.t-timeline--alternate .t-timeline__node {
    left: auto;
    right: calc(50% - 18px);
    transform: translateX(50%);
}

.t-timeline--alternate .t-timeline-item:nth-child(even) .t-timeline__node {
    right: auto;
    left: calc(50% - 18px);
    transform: translateX(-50%);
}

/* ===== 横向时间线 ===== */
.t-timeline-horizontal {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 40px 20px 20px;
}

.t-timeline-horizontal::before {
    content: '';
    position: absolute;
    top: 58px;
    left: 60px;
    right: 60px;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--t-shadow-dark) 0%,
        var(--t-bg) 50%,
        var(--t-shadow-light) 100%
    );
    border-radius: 2px;
    box-shadow: 
        inset 2px 2px 4px var(--t-shadow-dark),
        inset -2px -2px 4px var(--t-shadow-light);
}

.t-timeline-horizontal__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 150px;
}

.t-timeline-horizontal__node {
    width: 40px;
    height: 40px;
    background: var(--t-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--t-text-secondary);
    box-shadow: 
        4px 4px 8px var(--t-shadow-dark),
        -4px -4px 8px var(--t-shadow-light);
    margin-bottom: 16px;
    z-index: 2;
    transition: all 0.3s ease;
}

.t-timeline-horizontal__item:hover .t-timeline-horizontal__node {
    transform: scale(1.15);
    box-shadow: 
        6px 6px 12px var(--t-shadow-dark),
        -6px -6px 12px var(--t-shadow-light);
}

.t-timeline-horizontal__item--completed .t-timeline-horizontal__node {
    background: linear-gradient(145deg, var(--t-success), var(--t-success-light));
    color: var(--t-white);
    box-shadow: 
        4px 4px 12px rgba(103, 194, 58, 0.4),
        -4px -4px 12px var(--t-white-rgba-80);
}

.t-timeline-horizontal__item--active .t-timeline-horizontal__node {
    background: linear-gradient(145deg, var(--t-primary), var(--t-primary-light));
    color: var(--t-white);
    box-shadow: 
        4px 4px 12px rgba(64, 158, 255, 0.4),
        -4px -4px 12px var(--t-white-rgba-80);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(64, 158, 255, 0.4); }
    50% { box-shadow: 0 0 0 10px rgba(64, 158, 255, 0); }
}

.t-timeline-horizontal__content {
    text-align: center;
}

.t-timeline-horizontal__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 4px;
}

.t-timeline-horizontal__desc {
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* ===== 波浪形时间线 ===== */
.t-timeline-wave {
    position: relative;
    padding: 60px 20px;
    overflow: hidden;
}

.t-timeline-wave__track {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 60px;
    transform: translateY(-50%);
    background: 
        radial-gradient(ellipse at 20% 50%, var(--t-shadow-dark) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, var(--t-shadow-light) 0%, transparent 50%);
    opacity: 0.3;
}

.t-timeline-wave__items {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    z-index: 2;
}

.t-timeline-wave__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transform: translateY(calc(var(--index) * 20px - 30px));
}

.t-timeline-wave__node {
    width: 50px;
    height: 50px;
    background: var(--t-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 
        6px 6px 12px var(--t-shadow-dark),
        -6px -6px 12px var(--t-shadow-light);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.t-timeline-wave__item:hover .t-timeline-wave__node {
    transform: translateY(-8px) scale(1.1);
    box-shadow: 
        10px 10px 20px var(--t-shadow-dark),
        -10px -10px 20px var(--t-shadow-light);
}

.t-timeline-wave__node--primary {
    background: linear-gradient(145deg, var(--t-primary), var(--t-primary-light));
    color: var(--t-white);
}

.t-timeline-wave__node--success {
    background: linear-gradient(145deg, var(--t-success), var(--t-success-light));
    color: var(--t-white);
}

.t-timeline-wave__node--warning {
    background: linear-gradient(145deg, var(--t-warning), var(--t-warning-light));
    color: var(--t-white);
}

.t-timeline-wave__card {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    padding: 16px;
    box-shadow: 
        6px 6px 12px var(--t-shadow-dark),
        -6px -6px 12px var(--t-shadow-light);
    text-align: center;
    min-width: 140px;
    transition: all 0.3s ease;
}

.t-timeline-wave__item:hover .t-timeline-wave__card {
    transform: translateY(-4px);
    box-shadow: 
        10px 10px 20px var(--t-shadow-dark),
        -10px -10px 20px var(--t-shadow-light);
}

.t-timeline-wave__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 4px;
}

.t-timeline-wave__desc {
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-bottom: 8px;
}

.t-timeline-wave__time {
    font-size: 11px;
    color: var(--t-text-placeholder);
    padding: 2px 8px;
    background: var(--t-bg);
    border-radius: 10px;
    box-shadow: 
        inset 2px 2px 4px var(--t-shadow-dark),
        inset -2px -2px 4px var(--t-shadow-light);
}

/* ===== 蛇形时间线 ===== */
.t-timeline-snake {
    position: relative;
    padding: 40px 20px;
    min-height: 200px;
}

.t-timeline-snake__path {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.t-timeline-snake__path svg {
    width: 100%;
    height: 100%;
}

.t-timeline-snake__items {
    position: relative;
    z-index: 2;
    height: 100%;
}

.t-timeline-snake__item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: translateX(-50%);
}

.t-timeline-snake__item--top {
    top: 20px;
}

.t-timeline-snake__item--bottom {
    bottom: 20px;
}

.t-timeline-snake__node {
    width: 44px;
    height: 44px;
    background: var(--t-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-secondary);
    box-shadow: 
        5px 5px 10px var(--t-shadow-dark),
        -5px -5px 10px var(--t-shadow-light);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.t-timeline-snake__item:hover .t-timeline-snake__node {
    transform: scale(1.15);
}

.t-timeline-snake__node--primary {
    background: linear-gradient(145deg, var(--t-primary), var(--t-primary-light));
    color: var(--t-white);
}

.t-timeline-snake__node--success {
    background: linear-gradient(145deg, var(--t-success), var(--t-success-light));
    color: var(--t-white);
}

.t-timeline-snake__node--warning {
    background: linear-gradient(145deg, var(--t-warning), var(--t-warning-light));
    color: var(--t-white);
}

.t-timeline-snake__content {
    text-align: center;
    background: var(--t-bg);
    padding: 8px 16px;
    border-radius: var(--t-radius);
    box-shadow: 
        4px 4px 8px var(--t-shadow-dark),
        -4px -4px 8px var(--t-shadow-light);
}

.t-timeline-snake__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text-primary);
}

.t-timeline-snake__time {
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-top: 4px;
}

/* ===== 圆形时间线 ===== */
.t-timeline-circle {
    position: relative;
    width: 320px;
    height: 320px;
    margin: 40px auto;
}

.t-timeline-circle__ring {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: 
        15px 15px 30px var(--t-shadow-dark),
        -15px -15px 30px var(--t-shadow-light);
}

.t-timeline-circle__ring::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: 
        inset 8px 8px 16px var(--t-shadow-dark),
        inset -8px -8px 16px var(--t-shadow-light);
}

.t-timeline-circle__item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: 
        rotate(var(--angle))
        translateX(120px)
        rotate(calc(var(--angle) * -1));
    transform-origin: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.t-timeline-circle__node {
    width: 48px;
    height: 48px;
    background: var(--t-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 
        5px 5px 10px var(--t-shadow-dark),
        -5px -5px 10px var(--t-shadow-light);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.t-timeline-circle__item:hover .t-timeline-circle__node {
    transform: scale(1.2);
    box-shadow: 
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light);
}

.t-timeline-circle__node--primary {
    background: linear-gradient(145deg, var(--t-primary), var(--t-primary-light));
    color: var(--t-white);
}

.t-timeline-circle__node--success {
    background: linear-gradient(145deg, var(--t-success), var(--t-success-light));
    color: var(--t-white);
}

.t-timeline-circle__node--warning {
    background: linear-gradient(145deg, var(--t-warning), var(--t-warning-light));
    color: var(--t-white);
}

.t-timeline-circle__label {
    font-size: 12px;
    color: var(--t-text-secondary);
    font-weight: 500;
    background: var(--t-bg);
    padding: 4px 12px;
    border-radius: 12px;
    box-shadow: 
        3px 3px 6px var(--t-shadow-dark),
        -3px -3px 6px var(--t-shadow-light);
}

.t-timeline-circle__center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.t-timeline-circle__center-content {
    width: 140px;
    height: 140px;
    background: var(--t-bg);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 
        inset 6px 6px 12px var(--t-shadow-dark),
        inset -6px -6px 12px var(--t-shadow-light);
}

.t-timeline-circle__center-year {
    font-size: 28px;
    font-weight: 700;
    color: var(--t-text-primary);
    margin-bottom: 4px;
}

.t-timeline-circle__center-status {
    font-size: 12px;
    color: var(--t-primary);
    padding: 4px 12px;
    border-radius: 12px;
    background: var(--t-bg);
    box-shadow: 
        3px 3px 6px var(--t-shadow-dark),
        -3px -3px 6px var(--t-shadow-light);
}

/* ==================== 开关 ==================== */

.t-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.t-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.t-switch-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--t-bg);
    border-radius: 26px;
    box-shadow: var(--t-inset);
    cursor: pointer;
    transition: var(--t-transition);
}

.t-switch-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
}

.t-switch input:checked + .t-switch-slider::before {
    transform: translateX(24px);
    background: var(--t-primary);
}

/* ==================== 单选框 ==================== */

.t-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--t-text-regular);
}

.t-radio input {
    appearance: none;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    cursor: pointer;
    position: relative;
    transition: var(--t-transition);
}

.t-radio input:checked {
    box-shadow: var(--t-shadow-sm);
}

.t-radio input:checked::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    background: var(--t-primary);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==================== 多选框 ==================== */

.t-checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--t-text-regular);
    vertical-align: middle;
    line-height: 1;
}

.t-checkbox input {
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    cursor: pointer;
    position: relative;
    transition: var(--t-transition);
    margin: 0;
    padding: 0;
    vertical-align: middle;
}

.t-checkbox input:checked {
    box-shadow: var(--t-shadow-sm);
}

.t-checkbox input:checked::after {
    content: '✓';
    position: absolute;
    color: var(--t-primary);
    font-size: 12px;
    font-weight: bold;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==================== 标签 ==================== */

.t-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--t-bg);
    color: var(--t-primary);
    font-size: 12px;
    border-radius: 4px;
    box-shadow: var(--t-shadow-sm);
}

/* ==================== 进度条 ==================== */

.t-progress {
    width: 100%;
    height: 12px;
    background: var(--t-bg);
    border-radius: 6px;
    box-shadow: var(--t-inset-sm);
    overflow: hidden;
}

.t-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--t-primary), var(--t-primary-light));
    border-radius: 6px;
    box-shadow: 2px 0 4px rgba(64, 158, 255, 0.3);
    transition: width 0.3s ease;
}

/* ==================== 滑块 ==================== */

.t-slider {
    width: 100%;
    height: 8px;
    background: var(--t-bg);
    border-radius: 4px;
    box-shadow: var(--t-inset-sm);
    position: relative;
    cursor: pointer;
}

.t-slider-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--t-primary);
    border-radius: 4px;
    box-shadow: 2px 0 4px rgba(64, 158, 255, 0.3);
}

.t-slider-thumb {
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: var(--t-shadow);
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
}

.t-slider-thumb:active {
    cursor: grabbing;
    box-shadow: var(--t-inset-sm);
}

/* ==================== 加载动画 ==================== */

.t-loading {
    width: 40px;
    height: 40px;
    border: 3px solid transparent;
    border-top-color: var(--t-primary);
    border-right-color: var(--t-primary);
    border-radius: 50%;
    animation: t-spin 1s linear infinite;
    box-shadow: 0 0 0 3px var(--t-bg), 0 0 0 5px rgba(64, 158, 255, 0.3);
}

@keyframes t-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== 警告/消息 ==================== */

.t-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow);
}

/* 带遮罩层的警告 - 无阴影 */
.t-alert--with-overlay {
    box-shadow: none;
}

.t-alert-success {
    border-left: 4px solid var(--t-success);
}

.t-alert-warning {
    border-left: 4px solid var(--t-warning);
}

.t-alert-info {
    border-left: 4px solid var(--t-primary);
}

.t-alert-danger {
    border-left: 4px solid var(--t-danger);
}

/* ==================== 分页 ==================== */

.t-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
}

.t-page-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    background: var(--t-bg);
    color: var(--t-text-regular);
    font-size: 14px;
    border-radius: var(--t-radius-sm);
    cursor: pointer;
    transition: var(--t-transition);
    box-shadow: var(--t-shadow-sm);
}

.t-page-btn:hover:not(:disabled) {
    box-shadow: var(--t-shadow);
    color: var(--t-primary);
}

.t-page-btn:active:not(:disabled),
.t-page-btn.active {
    box-shadow: var(--t-inset-sm);
    color: var(--t-primary);
}

.t-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== 表格 ==================== */

.t-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    margin: 0 !important;;
    overflow: hidden;
    table-layout: fixed;
    display: table !important;
}

.t-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 500;
    color: var(--t-text-secondary);
    border-bottom: 1px solid rgba(182, 185, 186, 0.3);
}

.t-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(182, 185, 186, 0.2);
}

.t-table tbody tr:last-child td {
    border-bottom: none;
}

.t-table tbody tr:hover {
    background: rgba(64, 158, 255, 0.05);
}

/* ==================== NavMenu 导航菜单 ==================== */

/**
 * NavMenu 导航菜单容器
 * 使用: class="t-nav-menu"
 * 说明: 为网站提供导航功能的菜单系统
 */
.t-nav-menu {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    padding: 8px;
    position: relative;
}

/**
 * 垂直导航菜单
 * 使用: class="t-nav-menu t-nav-menu--vertical"
 */
.t-nav-menu--vertical {
    width: 220px;
    display: flex;
    flex-direction: column;
}

/**
 * 水平导航菜单
 * 使用: class="t-nav-menu t-nav-menu--horizontal"
 */
.t-nav-menu--horizontal {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 16px;
}

/**
 * 导航菜单项
 * 使用: class="t-nav-menu-item"
 */
.t-nav-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    border-radius: var(--t-radius-sm);
    transition: var(--t-transition);
    margin-bottom: 4px;
    position: relative;
    user-select: none;
}

.t-nav-menu--horizontal .t-nav-menu-item {
    margin-bottom: 0;
    margin-right: 4px;
    height: 56px;
}

.t-nav-menu-item:last-child {
    margin-bottom: 0;
}

.t-nav-menu--horizontal .t-nav-menu-item:last-child {
    margin-right: 0;
}

.t-nav-menu-item:hover {
    color: var(--t-primary);
    box-shadow: var(--t-shadow-sm);
}

.t-nav-menu-item.is-active,
.t-nav-menu-item.active {
    color: var(--t-primary);
    box-shadow: var(--t-inset-sm);
    font-weight: 500;
}

.t-nav-menu-item.is-disabled,
.t-nav-menu-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/**
 * 菜单项图标
 * 使用: class="t-nav-menu-item__icon"
 */
.t-nav-menu-item__icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

/**
 * 菜单项标题
 * 使用: class="t-nav-menu-item__title"
 */
.t-nav-menu-item__title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/**
 * 菜单项箭头（用于子菜单）
 * 使用: class="t-nav-menu-item__arrow"
 */
.t-nav-menu-item__arrow {
    font-size: 12px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    margin-left: auto;
}

.t-nav-menu-item.is-opened .t-nav-menu-item__arrow {
    transform: rotate(90deg);
}

/**
 * 子菜单
 * 使用: class="t-nav-submenu"
 */
.t-nav-submenu {
    position: relative;
}

/**
 * 子菜单内容（垂直模式）
 * 使用: class="t-nav-submenu__content"
 */
.t-nav-submenu__content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    padding-left: 24px;
}

.t-nav-submenu.is-opened .t-nav-submenu__content {
    max-height: 500px;
}

/**
 * 子菜单内容（水平模式 - 下拉）
 */
.t-nav-menu--horizontal .t-nav-submenu__content {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    padding: 8px;
    max-height: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.t-nav-menu--horizontal .t-nav-submenu:hover .t-nav-submenu__content,
.t-nav-menu--horizontal .t-nav-submenu.is-opened .t-nav-submenu__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/**
 * 菜单组
 * 使用: class="t-nav-menu-group"
 */
.t-nav-menu-group {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.t-nav-menu-group:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/**
 * 菜单组标题
 * 使用: class="t-nav-menu-group__title"
 */
.t-nav-menu-group__title {
    padding: 8px 16px;
    font-size: 12px;
    color: var(--t-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/**
 * 折叠菜单
 * 使用: class="t-nav-menu t-nav-menu--collapsed"
 */
.t-nav-menu--collapsed {
    width: 64px;
    padding: 8px;
}

.t-nav-menu--collapsed .t-nav-menu-item {
    justify-content: center;
    padding: 12px;
}

.t-nav-menu--collapsed .t-nav-menu-item__title,
.t-nav-menu--collapsed .t-nav-menu-item__arrow {
    display: none;
}

.t-nav-menu--collapsed .t-nav-submenu__content {
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 180px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    padding: 8px;
    max-height: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.t-nav-menu--collapsed .t-nav-submenu:hover .t-nav-submenu__content {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/**
 * 深色主题菜单
 * 使用: class="t-nav-menu t-nav-menu--dark"
 */
.t-nav-menu--dark {
    background: var(--t-bg-dark);
    --t-bg: var(--t-bg-dark);
    --t-shadow-dark: #1a1a1a;
    --t-shadow-light: #404040;
    --t-text-regular: #e0e0e0;
    --t-text-secondary: #a0a0a0;
}

.t-nav-menu--dark .t-nav-menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/**
 * 简洁菜单（无阴影）
 * 使用: class="t-nav-menu t-nav-menu--simple"
 */
.t-nav-menu--simple {
    box-shadow: none;
    background: transparent;
}

.t-nav-menu--simple .t-nav-menu-item:hover {
    background: rgba(64, 158, 255, 0.1);
}

.t-nav-menu--simple .t-nav-menu-item.is-active,
.t-nav-menu--simple .t-nav-menu-item.active {
    background: rgba(64, 158, 255, 0.15);
    box-shadow: none;
}

/**
 * 菜单项徽章
 * 使用: class="t-nav-menu-item__badge"
 */
.t-nav-menu-item__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--t-white);
    background: var(--t-danger);
    border-radius: 9px;
    margin-left: auto;
}

.t-nav-menu--collapsed .t-nav-menu-item__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    margin-left: 0;
}

/**
 * 旧版菜单（向后兼容）
 * 使用: class="t-menu"
 */
.t-menu {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    padding: 10px;
}

.t-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    border-radius: var(--t-radius-sm);
    transition: var(--t-transition);
    margin-bottom: 4px;
}

.t-menu-item:hover {
    color: var(--t-primary);
    box-shadow: var(--t-shadow-sm);
}

.t-menu-item.active {
    color: var(--t-primary);
    box-shadow: var(--t-inset-sm);
}

/* ==================== 面包屑 ==================== */

.t-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow);
    font-size: 14px;
}

.t-breadcrumb-item {
    color: var(--t-text-regular);
    cursor: pointer;
}

.t-breadcrumb-item:hover {
    color: var(--t-primary);
}

.t-breadcrumb-item.current {
    color: var(--t-text-secondary);
    cursor: default;
}

.t-breadcrumb-separator {
    color: var(--t-text-placeholder);
}

/* 面包屑链接样式 */
.t-breadcrumb-item.is-link {
    color: var(--t-primary);
    transition: var(--t-transition);
}

.t-breadcrumb-item.is-link:hover {
    color: var(--t-primary-light);
    text-decoration: underline;
}

/* 面包屑图标 */
.t-breadcrumb-icon {
    margin-right: 4px;
    font-style: normal;
}

.t-breadcrumb-arrow {
    font-style: normal;
    font-size: 10px;
}

.t-breadcrumb-svg {
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 面包屑尺寸 */
.t-breadcrumb--large {
    padding: 16px 24px;
    font-size: 16px;
}

.t-breadcrumb--large .t-breadcrumb-svg {
    width: 16px;
    height: 16px;
}

.t-breadcrumb--small {
    padding: 8px 16px;
    font-size: 12px;
}

.t-breadcrumb--small .t-breadcrumb-svg {
    width: 12px;
    height: 12px;
}

/* ==================== PageHeader 页头 ==================== */

.t-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    margin-bottom: 20px;
}

.t-page-header__left {
    flex: 1;
    min-width: 0;
}

.t-page-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-left: 24px;
}

.t-page-header__back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    color: var(--t-primary);
    cursor: pointer;
    transition: var(--t-transition);
    font-size: 14px;
}

.t-page-header__back:hover {
    color: var(--t-primary-light);
}

.t-page-header__back-icon {
    font-style: normal;
    font-size: 18px;
    line-height: 1;
}

.t-page-header__back-text {
    font-size: 14px;
}

.t-page-header__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.t-page-header__content {
    font-size: 14px;
    color: var(--t-text-secondary);
    line-height: 1.6;
}

/* 简洁模式 */
.t-page-header--simple {
    padding: 16px 20px;
}

.t-page-header--simple .t-page-header__title {
    font-size: 18px;
    margin-bottom: 0;
}

.t-page-header--simple .t-page-header__back {
    margin-bottom: 0;
    margin-right: 12px;
}

.t-page-header--simple .t-page-header__left {
    display: flex;
    align-items: center;
}

/* 响应式 */
@media (max-width: 768px) {
    .t-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .t-page-header__right {
        margin-left: 0;
        margin-top: 16px;
        width: 100%;
        justify-content: flex-start;
    }
}

/* ==================== Dropdown 下拉菜单 ==================== */

.t-dropdown {
    position: relative;
    display: inline-block;
}

.t-dropdown__icon {
    margin-left: 6px;
    font-style: normal;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.t-dropdown.is-active .t-dropdown__icon {
    transform: rotate(180deg);
}

.t-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 160px;
    padding: 6px 0;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.t-dropdown.is-active .t-dropdown__menu,
.t-dropdown--hover:hover .t-dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.t-dropdown__menu--bottom-start {
    left: 0;
    right: auto;
}

.t-dropdown__menu--bottom-end {
    left: auto;
    right: 0;
}

.t-dropdown__item {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.t-dropdown__item:hover {
    background: var(--t-bg-light);
    color: var(--t-primary);
}

.t-dropdown__item.is-disabled {
    color: var(--t-text-placeholder);
    cursor: not-allowed;
    pointer-events: none;
}

.t-dropdown__item-icon {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
}

.t-dropdown__divider {
    height: 1px;
    margin: 6px 0;
    background: var(--t-border-color);
    box-shadow: var(--t-border-shadow);
}

.t-dropdown.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.t-dropdown.is-disabled .t-btn {
    cursor: not-allowed;
    pointer-events: none;
}

/* ==================== Steps 步骤条 ==================== */

.t-steps {
    display: flex;
    width: 100%;
}

.t-step {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.t-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: 50%;
    width: calc(100% - 40px);
    height: 2px;
    background: var(--t-border-color);
    box-shadow: var(--t-inset-border-shadow);
}

.t-step.is-finish:not(:last-child)::after {
    background: var(--t-primary);
}

.t-step__head {
    position: relative;
    z-index: 1;
}

.t-step__icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: var(--t-shadow);
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text-placeholder);
    transition: var(--t-transition);
}

.t-step__icon svg {
    width: 16px;
    height: 16px;
}

.t-step.is-finish .t-step__icon {
    background: var(--t-primary);
    color: var(--t-white);
    box-shadow: var(--t-primary-glow-shadow);
}

.t-step.is-process .t-step__icon {
    background: var(--t-bg);
    color: var(--t-primary);
    box-shadow: var(--t-inset);
    border: 2px solid var(--t-primary);
}

.t-step.is-error .t-step__icon {
    background: var(--t-danger);
    color: var(--t-white);
    box-shadow: var(--t-danger-glow-shadow);
}

.t-step__main {
    margin-top: 12px;
    text-align: center;
}

.t-step__title {
    font-size: 14px;
    font-weight: 500;
    color: var(--t-text-regular);
    transition: var(--t-transition);
}

.t-step.is-finish .t-step__title {
    color: var(--t-primary);
}

.t-step.is-process .t-step__title {
    color: var(--t-text-primary);
    font-weight: 600;
}

.t-step.is-error .t-step__title {
    color: var(--t-danger);
}

.t-step__description {
    font-size: 12px;
    color: var(--t-text-placeholder);
    margin-top: 4px;
    max-width: 140px;
    line-height: 1.4;
}

.t-step.is-finish .t-step__description {
    color: var(--t-text-secondary);
}

/* 垂直步骤条 */
.t-steps--vertical {
    flex-direction: column;
    height: auto;
}

.t-steps--vertical .t-step {
    flex: none;
    flex-direction: row;
    align-items: flex-start;
    padding-bottom: 24px;
}

.t-steps--vertical .t-step:not(:last-child)::after {
    top: 32px;
    left: 16px;
    width: 2px;
    height: calc(100% - 24px);
}

.t-steps--vertical .t-step__main {
    margin-top: 0;
    margin-left: 16px;
    text-align: left;
    flex: 1;
}

.t-steps--vertical .t-step__description {
    max-width: none;
}

/* 简洁风格 */
.t-steps--simple .t-step__icon {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.t-steps--simple .t-step:not(:last-child)::after {
    top: 14px;
    height: 1px;
}

.t-steps--simple .t-step__title {
    font-size: 13px;
}

/* 可点击 */
.t-step.is-clickable {
    cursor: pointer;
}

.t-step.is-clickable:hover .t-step__title {
    color: var(--t-primary);
}

/* ==================== Dialog 对话框 ==================== */

.t-dialog__wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-dialog__wrapper--center {
    align-items: center;
    justify-content: center;
}

.t-dialog__mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--t-dialog-mask-bg);
    backdrop-filter: blur(4px);
}

.t-dialog {
    position: relative;
    width: 420px;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-dialog-shadow);
    display: flex;
    flex-direction: column;
    animation: dialog-fade-in 0.3s ease;
    z-index: 1;
}

@keyframes dialog-fade-in {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.t-dialog--small {
    width: 360px;
}

.t-dialog--large {
    width: 600px;
}

.t-dialog--full {
    width: 90vw;
    height: 90vh;
}

.t-dialog--draggable {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
}

.t-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--t-border-color);
}

.t-dialog__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--t-text-primary);
}

.t-dialog__close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow-sm);
    font-size: 20px;
    color: var(--t-text-secondary);
    cursor: pointer;
    transition: var(--t-transition);
}

.t-dialog__close:hover {
    color: var(--t-danger);
    box-shadow: var(--t-inset);
}

.t-dialog__body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    color: var(--t-text-regular);
    line-height: 1.6;
}

.t-dialog__footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--t-border-color);
}

/* ==================== Tooltip 文字提示 ==================== */

.t-tooltip {
    position: relative;
    display: inline-block;
}

.t-tooltip__popper {
    position: absolute;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

.t-tooltip:hover:not(.is-disabled):not(.t-tooltip--click) .t-tooltip__popper,
.t-tooltip.is-active .t-tooltip__popper {
    opacity: 1;
    visibility: visible;
}

/* 延迟显示 */
.t-tooltip--delayed:hover .t-tooltip__popper {
    transition-delay: 1s;
}

/* 上方位置 */
.t-tooltip__popper--top {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
}

.t-tooltip:hover .t-tooltip__popper--top,
.t-tooltip.is-active .t-tooltip__popper--top {
    transform: translateX(-50%) translateY(0);
}

.t-tooltip__popper--top-start {
    bottom: calc(100% + 10px);
    left: 0;
    transform: translateY(-10px);
}

.t-tooltip:hover .t-tooltip__popper--top-start,
.t-tooltip.is-active .t-tooltip__popper--top-start {
    transform: translateY(0);
}

.t-tooltip__popper--top-end {
    bottom: calc(100% + 10px);
    right: 0;
    transform: translateY(-10px);
}

.t-tooltip:hover .t-tooltip__popper--top-end,
.t-tooltip.is-active .t-tooltip__popper--top-end {
    transform: translateY(0);
}

/* 下方位置 */
.t-tooltip__popper--bottom {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
}

.t-tooltip:hover .t-tooltip__popper--bottom,
.t-tooltip.is-active .t-tooltip__popper--bottom {
    transform: translateX(-50%) translateY(0);
}

.t-tooltip__popper--bottom-start {
    top: calc(100% + 10px);
    left: 0;
    transform: translateY(10px);
}

.t-tooltip:hover .t-tooltip__popper--bottom-start,
.t-tooltip.is-active .t-tooltip__popper--bottom-start {
    transform: translateY(0);
}

.t-tooltip__popper--bottom-end {
    top: calc(100% + 10px);
    right: 0;
    transform: translateY(10px);
}

.t-tooltip:hover .t-tooltip__popper--bottom-end,
.t-tooltip.is-active .t-tooltip__popper--bottom-end {
    transform: translateY(0);
}

/* 左方位置 */
.t-tooltip__popper--left {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-10px);
}

.t-tooltip:hover .t-tooltip__popper--left,
.t-tooltip.is-active .t-tooltip__popper--left {
    transform: translateY(-50%) translateX(0);
}

.t-tooltip__popper--left-start {
    right: calc(100% + 10px);
    top: 0;
    transform: translateX(-10px);
}

.t-tooltip:hover .t-tooltip__popper--left-start,
.t-tooltip.is-active .t-tooltip__popper--left-start {
    transform: translateX(0);
}

.t-tooltip__popper--left-end {
    right: calc(100% + 10px);
    bottom: 0;
    transform: translateX(-10px);
}

.t-tooltip:hover .t-tooltip__popper--left-end,
.t-tooltip.is-active .t-tooltip__popper--left-end {
    transform: translateX(0);
}

/* 右方位置 */
.t-tooltip__popper--right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(10px);
}

.t-tooltip:hover .t-tooltip__popper--right,
.t-tooltip.is-active .t-tooltip__popper--right {
    transform: translateY(-50%) translateX(0);
}

.t-tooltip__popper--right-start {
    left: calc(100% + 10px);
    top: 0;
    transform: translateX(10px);
}

.t-tooltip:hover .t-tooltip__popper--right-start,
.t-tooltip.is-active .t-tooltip__popper--right-start {
    transform: translateX(0);
}

.t-tooltip__popper--right-end {
    left: calc(100% + 10px);
    bottom: 0;
    transform: translateX(10px);
}

.t-tooltip:hover .t-tooltip__popper--right-end,
.t-tooltip.is-active .t-tooltip__popper--right-end {
    transform: translateX(0);
}

.t-tooltip__content {
    padding: 10px 16px;
    background: var(--t-text-primary);
    color: var(--t-white);
    font-size: 13px;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    white-space: nowrap;
    line-height: 1.4;
    max-width: 250px;
}

/* 多行文本 */
.t-tooltip__content--multiline {
    white-space: normal;
    word-wrap: break-word;
    max-width: 280px;
    min-width: 180px;
}

/* 主题色 */
.t-tooltip__popper--primary .t-tooltip__content {
    background: var(--t-primary);
}

.t-tooltip__popper--success .t-tooltip__content {
    background: var(--t-success);
}

.t-tooltip__popper--warning .t-tooltip__content {
    background: var(--t-warning);
}

.t-tooltip__popper--danger .t-tooltip__content {
    background: var(--t-danger);
}

/* 箭头 */
.t-tooltip__arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* 上方箭头 */
.t-tooltip__popper--top .t-tooltip__arrow,
.t-tooltip__popper--top-start .t-tooltip__arrow,
.t-tooltip__popper--top-end .t-tooltip__arrow {
    top: 100%;
    border-top-color: var(--t-text-primary);
}

.t-tooltip__popper--top .t-tooltip__arrow {
    left: 50%;
    transform: translateX(-50%);
}

.t-tooltip__popper--top-start .t-tooltip__arrow {
    left: 16px;
}

.t-tooltip__popper--top-end .t-tooltip__arrow {
    right: 16px;
}

/* 下方箭头 */
.t-tooltip__popper--bottom .t-tooltip__arrow,
.t-tooltip__popper--bottom-start .t-tooltip__arrow,
.t-tooltip__popper--bottom-end .t-tooltip__arrow {
    bottom: 100%;
    border-bottom-color: var(--t-text-primary);
}

.t-tooltip__popper--bottom .t-tooltip__arrow {
    left: 50%;
    transform: translateX(-50%);
}

.t-tooltip__popper--bottom-start .t-tooltip__arrow {
    left: 16px;
}

.t-tooltip__popper--bottom-end .t-tooltip__arrow {
    right: 16px;
}

/* 左方箭头 */
.t-tooltip__popper--left .t-tooltip__arrow,
.t-tooltip__popper--left-start .t-tooltip__arrow,
.t-tooltip__popper--left-end .t-tooltip__arrow {
    left: 100%;
    border-left-color: var(--t-text-primary);
}

.t-tooltip__popper--left .t-tooltip__arrow {
    top: 50%;
    transform: translateY(-50%);
}

.t-tooltip__popper--left-start .t-tooltip__arrow {
    top: 10px;
}

.t-tooltip__popper--left-end .t-tooltip__arrow {
    bottom: 10px;
}

/* 右方箭头 */
.t-tooltip__popper--right .t-tooltip__arrow,
.t-tooltip__popper--right-start .t-tooltip__arrow,
.t-tooltip__popper--right-end .t-tooltip__arrow {
    right: 100%;
    border-right-color: var(--t-text-primary);
}

.t-tooltip__popper--right .t-tooltip__arrow {
    top: 50%;
    transform: translateY(-50%);
}

.t-tooltip__popper--right-start .t-tooltip__arrow {
    top: 10px;
}

.t-tooltip__popper--right-end .t-tooltip__arrow {
    bottom: 10px;
}

/* 主题色箭头 - 上方 */
.t-tooltip__popper--primary.t-tooltip__popper--top .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--top-start .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--top-end .t-tooltip__arrow {
    border-top-color: var(--t-primary);
}

.t-tooltip__popper--success.t-tooltip__popper--top .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--top-start .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--top-end .t-tooltip__arrow {
    border-top-color: var(--t-success);
}

.t-tooltip__popper--warning.t-tooltip__popper--top .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--top-start .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--top-end .t-tooltip__arrow {
    border-top-color: var(--t-warning);
}

.t-tooltip__popper--danger.t-tooltip__popper--top .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--top-start .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--top-end .t-tooltip__arrow {
    border-top-color: var(--t-danger);
}

/* 主题色箭头 - 下方 */
.t-tooltip__popper--primary.t-tooltip__popper--bottom .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--bottom-start .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--bottom-end .t-tooltip__arrow {
    border-bottom-color: var(--t-primary);
}

.t-tooltip__popper--success.t-tooltip__popper--bottom .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--bottom-start .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--bottom-end .t-tooltip__arrow {
    border-bottom-color: var(--t-success);
}

.t-tooltip__popper--warning.t-tooltip__popper--bottom .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--bottom-start .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--bottom-end .t-tooltip__arrow {
    border-bottom-color: var(--t-warning);
}

.t-tooltip__popper--danger.t-tooltip__popper--bottom .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--bottom-start .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--bottom-end .t-tooltip__arrow {
    border-bottom-color: var(--t-danger);
}

/* 主题色箭头 - 左方 */
.t-tooltip__popper--primary.t-tooltip__popper--left .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--left-start .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--left-end .t-tooltip__arrow {
    border-left-color: var(--t-primary);
}

.t-tooltip__popper--success.t-tooltip__popper--left .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--left-start .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--left-end .t-tooltip__arrow {
    border-left-color: var(--t-success);
}

.t-tooltip__popper--warning.t-tooltip__popper--left .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--left-start .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--left-end .t-tooltip__arrow {
    border-left-color: var(--t-warning);
}

.t-tooltip__popper--danger.t-tooltip__popper--left .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--left-start .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--left-end .t-tooltip__arrow {
    border-left-color: var(--t-danger);
}

/* 主题色箭头 - 右方 */
.t-tooltip__popper--primary.t-tooltip__popper--right .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--right-start .t-tooltip__arrow,
.t-tooltip__popper--primary.t-tooltip__popper--right-end .t-tooltip__arrow {
    border-right-color: var(--t-primary);
}

.t-tooltip__popper--success.t-tooltip__popper--right .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--right-start .t-tooltip__arrow,
.t-tooltip__popper--success.t-tooltip__popper--right-end .t-tooltip__arrow {
    border-right-color: var(--t-success);
}

.t-tooltip__popper--warning.t-tooltip__popper--right .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--right-start .t-tooltip__arrow,
.t-tooltip__popper--warning.t-tooltip__popper--right-end .t-tooltip__arrow {
    border-right-color: var(--t-warning);
}

.t-tooltip__popper--danger.t-tooltip__popper--right .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--right-start .t-tooltip__arrow,
.t-tooltip__popper--danger.t-tooltip__popper--right-end .t-tooltip__arrow {
    border-right-color: var(--t-danger);
}

/* 禁用状态 */
.t-tooltip.is-disabled {
    cursor: not-allowed;
}

/* 演示网格 */
.tooltip-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 40px;
    justify-items: center;
    align-items: center;
}

/* 硅胶质感 Tooltip */
.t-tooltip__popper--tingui .t-tooltip__content {
    background: var(--t-bg);
    color: var(--t-text-primary);
    box-shadow:
        4px 4px 8px var(--t-shadow-dark),
        -4px -4px 8px var(--t-shadow-light);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 硅胶质感箭头 */
.t-tooltip__popper--tingui.t-tooltip__popper--top .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--top-start .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--top-end .t-tooltip__arrow {
    border-top-color: var(--t-bg);
    filter: drop-shadow(0 2px 2px var(--t-shadow-dark));
}

.t-tooltip__popper--tingui.t-tooltip__popper--bottom .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--bottom-start .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--bottom-end .t-tooltip__arrow {
    border-bottom-color: var(--t-bg);
    filter: drop-shadow(0 -2px 2px var(--t-shadow-dark));
}

.t-tooltip__popper--tingui.t-tooltip__popper--left .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--left-start .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--left-end .t-tooltip__arrow {
    border-left-color: var(--t-bg);
    filter: drop-shadow(2px 0 2px var(--t-shadow-dark));
}

.t-tooltip__popper--tingui.t-tooltip__popper--right .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--right-start .t-tooltip__arrow,
.t-tooltip__popper--tingui.t-tooltip__popper--right-end .t-tooltip__arrow {
    border-right-color: var(--t-bg);
    filter: drop-shadow(-2px 0 2px var(--t-shadow-dark));
}

/* 不同尺寸 */
.t-tooltip__popper--small .t-tooltip__content {
    padding: 4px 8px;
    font-size: 12px;
}

.t-tooltip__popper--large .t-tooltip__content {
    padding: 12px 20px;
    font-size: 14px;
    max-width: 300px;
}

/* Focus 触发 */
.t-tooltip--focus.is-active .t-tooltip__popper {
    opacity: 1;
    visibility: visible;
}

/* ==================== 评分 ==================== */

.t-rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.t-rate-star {
    font-size: 28px;
    color: var(--t-text-placeholder);
    cursor: pointer;
    transition: var(--t-transition);
    text-shadow: var(--t-shadow-sm);
}

.t-rate-star:hover,
.t-rate-star.active {
    color: var(--t-warning-active);
}

/* ==================== 上传 ==================== */

.t-upload {
    width: 360px;
    height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    /* box-shadow: var(--t-shadow-lg); */
    cursor: pointer;
    transition: var(--t-transition);
    border: 2px dashed transparent;
}

.t-upload:hover {
    /* box-shadow: var(--t-shadow-xl); */
}

.t-upload.dragover {
    /* border-color: var(--t-primary); */
    /* box-shadow: var(--t-inset); */
}

.t-upload__file-list{
    height: 65px;
    overflow-y: auto;
}
/* ==================== Layout 布局系统 ==================== */

/**
 * Row 行容器
 * 使用: class="t-row"
 * 说明: 栅格系统的行容器，使用 flex 布局
 */
.t-row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
    position: relative;
    box-sizing: border-box;
}

/**
 * Row 间距变体
 * 使用: class="t-row t-row--gap-sm|md|lg|xl"
 */
.t-row--gap-sm { margin: 0 -4px; }
.t-row--gap-sm > .t-col,
.t-row--gap-sm > [class*="t-col-"] { padding: 0 4px; }

.t-row--gap-md { margin: 0 -10px; }
.t-row--gap-md > .t-col,
.t-row--gap-md > [class*="t-col-"] { padding: 0 10px; }

.t-row--gap-lg { margin: 0 -16px; }
.t-row--gap-lg > .t-col,
.t-row--gap-lg > [class*="t-col-"] { padding: 0 16px; }

.t-row--gap-xl { margin: 0 -24px; }
.t-row--gap-xl > .t-col,
.t-row--gap-xl > [class*="t-col-"] { padding: 0 24px; }

/**
 * Row 对齐方式
 * 使用: class="t-row t-row--justify-center|end|space-between|space-around"
 */
.t-row--justify-center { justify-content: center; }
.t-row--justify-end { justify-content: flex-end; }
.t-row--justify-space-between { justify-content: space-between; }
.t-row--justify-space-around { justify-content: space-around; }
.t-row--justify-space-evenly { justify-content: space-evenly; }

/**
 * Row 垂直对齐
 * 使用: class="t-row t-row--align-top|middle|bottom"
 */
.t-row--align-top { align-items: flex-start; }
.t-row--align-middle { align-items: center; }
.t-row--align-bottom { align-items: flex-end; }

/**
 * Col 列
 * 使用: class="t-col" 或 class="t-col-6" 等
 * 说明: 栅格系统的列容器
 */
.t-col {
    flex: 1;
    max-width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/**
 * 24栅格列宽定义
 * 使用: class="t-col-1" 到 class="t-col-24"
 */
.t-col-0 { display: none; }
.t-col-1 { flex: 0 0 4.166667%; max-width: 4.166667%; }
.t-col-2 { flex: 0 0 8.333333%; max-width: 8.333333%; }
.t-col-3 { flex: 0 0 12.5%; max-width: 12.5%; }
.t-col-4 { flex: 0 0 16.666667%; max-width: 16.666667%; }
.t-col-5 { flex: 0 0 20.833333%; max-width: 20.833333%; }
.t-col-6 { flex: 0 0 25%; max-width: 25%; }
.t-col-7 { flex: 0 0 29.166667%; max-width: 29.166667%; }
.t-col-8 { flex: 0 0 33.333333%; max-width: 33.333333%; }
.t-col-9 { flex: 0 0 37.5%; max-width: 37.5%; }
.t-col-10 { flex: 0 0 41.666667%; max-width: 41.666667%; }
.t-col-11 { flex: 0 0 45.833333%; max-width: 45.833333%; }
.t-col-12 { flex: 0 0 50%; max-width: 50%; }
.t-col-13 { flex: 0 0 54.166667%; max-width: 54.166667%; }
.t-col-14 { flex: 0 0 58.333333%; max-width: 58.333333%; }
.t-col-15 { flex: 0 0 62.5%; max-width: 62.5%; }
.t-col-16 { flex: 0 0 66.666667%; max-width: 66.666667%; }
.t-col-17 { flex: 0 0 70.833333%; max-width: 70.833333%; }
.t-col-18 { flex: 0 0 75%; max-width: 75%; }
.t-col-19 { flex: 0 0 79.166667%; max-width: 79.166667%; }
.t-col-20 { flex: 0 0 83.333333%; max-width: 83.333333%; }
.t-col-21 { flex: 0 0 87.5%; max-width: 87.5%; }
.t-col-22 { flex: 0 0 91.666667%; max-width: 91.666667%; }
.t-col-23 { flex: 0 0 95.833333%; max-width: 95.833333%; }
.t-col-24 { flex: 0 0 100%; max-width: 100%; }

/**
 * 列偏移
 * 使用: class="t-col-offset-6" 等
 */
.t-col-offset-0 { margin-left: 0; }
.t-col-offset-1 { margin-left: 4.166667%; }
.t-col-offset-2 { margin-left: 8.333333%; }
.t-col-offset-3 { margin-left: 12.5%; }
.t-col-offset-4 { margin-left: 16.666667%; }
.t-col-offset-5 { margin-left: 20.833333%; }
.t-col-offset-6 { margin-left: 25%; }
.t-col-offset-7 { margin-left: 29.166667%; }
.t-col-offset-8 { margin-left: 33.333333%; }
.t-col-offset-9 { margin-left: 37.5%; }
.t-col-offset-10 { margin-left: 41.666667%; }
.t-col-offset-11 { margin-left: 45.833333%; }
.t-col-offset-12 { margin-left: 50%; }
.t-col-offset-13 { margin-left: 54.166667%; }
.t-col-offset-14 { margin-left: 58.333333%; }
.t-col-offset-15 { margin-left: 62.5%; }
.t-col-offset-16 { margin-left: 66.666667%; }
.t-col-offset-17 { margin-left: 70.833333%; }
.t-col-offset-18 { margin-left: 75%; }
.t-col-offset-19 { margin-left: 79.166667%; }
.t-col-offset-20 { margin-left: 83.333333%; }
.t-col-offset-21 { margin-left: 87.5%; }
.t-col-offset-22 { margin-left: 91.666667%; }
.t-col-offset-23 { margin-left: 95.833333%; }

/**
 * 列排序（推拉）
 * 使用: class="t-col-push-6" / class="t-col-pull-6"
 */
.t-col-push-0 { left: auto; }
.t-col-push-1 { left: 4.166667%; }
.t-col-push-2 { left: 8.333333%; }
.t-col-push-3 { left: 12.5%; }
.t-col-push-4 { left: 16.666667%; }
.t-col-push-5 { left: 20.833333%; }
.t-col-push-6 { left: 25%; }
.t-col-push-7 { left: 29.166667%; }
.t-col-push-8 { left: 33.333333%; }
.t-col-push-9 { left: 37.5%; }
.t-col-push-10 { left: 41.666667%; }
.t-col-push-11 { left: 45.833333%; }
.t-col-push-12 { left: 50%; }
.t-col-push-13 { left: 54.166667%; }
.t-col-push-14 { left: 58.333333%; }
.t-col-push-15 { left: 62.5%; }
.t-col-push-16 { left: 66.666667%; }
.t-col-push-17 { left: 70.833333%; }
.t-col-push-18 { left: 75%; }
.t-col-push-19 { left: 79.166667%; }
.t-col-push-20 { left: 83.333333%; }
.t-col-push-21 { left: 87.5%; }
.t-col-push-22 { left: 91.666667%; }
.t-col-push-23 { left: 95.833333%; }
.t-col-push-24 { left: 100%; }

.t-col-pull-0 { right: auto; }
.t-col-pull-1 { right: 4.166667%; }
.t-col-pull-2 { right: 8.333333%; }
.t-col-pull-3 { right: 12.5%; }
.t-col-pull-4 { right: 16.666667%; }
.t-col-pull-5 { right: 20.833333%; }
.t-col-pull-6 { right: 25%; }
.t-col-pull-7 { right: 29.166667%; }
.t-col-pull-8 { right: 33.333333%; }
.t-col-pull-9 { right: 37.5%; }
.t-col-pull-10 { right: 41.666667%; }
.t-col-pull-11 { right: 45.833333%; }
.t-col-pull-12 { right: 50%; }
.t-col-pull-13 { right: 54.166667%; }
.t-col-pull-14 { right: 58.333333%; }
.t-col-pull-15 { right: 62.5%; }
.t-col-pull-16 { right: 66.666667%; }
.t-col-pull-17 { right: 70.833333%; }
.t-col-pull-18 { right: 75%; }
.t-col-pull-19 { right: 79.166667%; }
.t-col-pull-20 { right: 83.333333%; }
.t-col-pull-21 { right: 87.5%; }
.t-col-pull-22 { right: 91.666667%; }
.t-col-pull-23 { right: 95.833333%; }
.t-col-pull-24 { right: 100%; }

/**
 * 响应式栅格 - xs (<576px)
 */
@media (max-width: 575px) {
    .t-col-xs-0 { display: none; }
    .t-col-xs-1 { flex: 0 0 4.166667%; max-width: 4.166667%; }
    .t-col-xs-2 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .t-col-xs-3 { flex: 0 0 12.5%; max-width: 12.5%; }
    .t-col-xs-4 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .t-col-xs-5 { flex: 0 0 20.833333%; max-width: 20.833333%; }
    .t-col-xs-6 { flex: 0 0 25%; max-width: 25%; }
    .t-col-xs-7 { flex: 0 0 29.166667%; max-width: 29.166667%; }
    .t-col-xs-8 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .t-col-xs-9 { flex: 0 0 37.5%; max-width: 37.5%; }
    .t-col-xs-10 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .t-col-xs-11 { flex: 0 0 45.833333%; max-width: 45.833333%; }
    .t-col-xs-12 { flex: 0 0 50%; max-width: 50%; }
    .t-col-xs-13 { flex: 0 0 54.166667%; max-width: 54.166667%; }
    .t-col-xs-14 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .t-col-xs-15 { flex: 0 0 62.5%; max-width: 62.5%; }
    .t-col-xs-16 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .t-col-xs-17 { flex: 0 0 70.833333%; max-width: 70.833333%; }
    .t-col-xs-18 { flex: 0 0 75%; max-width: 75%; }
    .t-col-xs-19 { flex: 0 0 79.166667%; max-width: 79.166667%; }
    .t-col-xs-20 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .t-col-xs-21 { flex: 0 0 87.5%; max-width: 87.5%; }
    .t-col-xs-22 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .t-col-xs-23 { flex: 0 0 95.833333%; max-width: 95.833333%; }
    .t-col-xs-24 { flex: 0 0 100%; max-width: 100%; }
}

/**
 * 响应式栅格 - sm (≥576px)
 */
@media (min-width: 576px) {
    .t-col-sm-0 { display: none; }
    .t-col-sm-1 { flex: 0 0 4.166667%; max-width: 4.166667%; }
    .t-col-sm-2 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .t-col-sm-3 { flex: 0 0 12.5%; max-width: 12.5%; }
    .t-col-sm-4 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .t-col-sm-5 { flex: 0 0 20.833333%; max-width: 20.833333%; }
    .t-col-sm-6 { flex: 0 0 25%; max-width: 25%; }
    .t-col-sm-7 { flex: 0 0 29.166667%; max-width: 29.166667%; }
    .t-col-sm-8 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .t-col-sm-9 { flex: 0 0 37.5%; max-width: 37.5%; }
    .t-col-sm-10 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .t-col-sm-11 { flex: 0 0 45.833333%; max-width: 45.833333%; }
    .t-col-sm-12 { flex: 0 0 50%; max-width: 50%; }
    .t-col-sm-13 { flex: 0 0 54.166667%; max-width: 54.166667%; }
    .t-col-sm-14 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .t-col-sm-15 { flex: 0 0 62.5%; max-width: 62.5%; }
    .t-col-sm-16 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .t-col-sm-17 { flex: 0 0 70.833333%; max-width: 70.833333%; }
    .t-col-sm-18 { flex: 0 0 75%; max-width: 75%; }
    .t-col-sm-19 { flex: 0 0 79.166667%; max-width: 79.166667%; }
    .t-col-sm-20 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .t-col-sm-21 { flex: 0 0 87.5%; max-width: 87.5%; }
    .t-col-sm-22 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .t-col-sm-23 { flex: 0 0 95.833333%; max-width: 95.833333%; }
    .t-col-sm-24 { flex: 0 0 100%; max-width: 100%; }
}

/**
 * 响应式栅格 - md (≥768px)
 */
@media (min-width: 768px) {
    .t-col-md-0 { display: none; }
    .t-col-md-1 { flex: 0 0 4.166667%; max-width: 4.166667%; }
    .t-col-md-2 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .t-col-md-3 { flex: 0 0 12.5%; max-width: 12.5%; }
    .t-col-md-4 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .t-col-md-5 { flex: 0 0 20.833333%; max-width: 20.833333%; }
    .t-col-md-6 { flex: 0 0 25%; max-width: 25%; }
    .t-col-md-7 { flex: 0 0 29.166667%; max-width: 29.166667%; }
    .t-col-md-8 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .t-col-md-9 { flex: 0 0 37.5%; max-width: 37.5%; }
    .t-col-md-10 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .t-col-md-11 { flex: 0 0 45.833333%; max-width: 45.833333%; }
    .t-col-md-12 { flex: 0 0 50%; max-width: 50%; }
    .t-col-md-13 { flex: 0 0 54.166667%; max-width: 54.166667%; }
    .t-col-md-14 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .t-col-md-15 { flex: 0 0 62.5%; max-width: 62.5%; }
    .t-col-md-16 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .t-col-md-17 { flex: 0 0 70.833333%; max-width: 70.833333%; }
    .t-col-md-18 { flex: 0 0 75%; max-width: 75%; }
    .t-col-md-19 { flex: 0 0 79.166667%; max-width: 79.166667%; }
    .t-col-md-20 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .t-col-md-21 { flex: 0 0 87.5%; max-width: 87.5%; }
    .t-col-md-22 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .t-col-md-23 { flex: 0 0 95.833333%; max-width: 95.833333%; }
    .t-col-md-24 { flex: 0 0 100%; max-width: 100%; }
}

/**
 * 响应式栅格 - lg (≥992px)
 */
@media (min-width: 992px) {
    .t-col-lg-0 { display: none; }
    .t-col-lg-1 { flex: 0 0 4.166667%; max-width: 4.166667%; }
    .t-col-lg-2 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .t-col-lg-3 { flex: 0 0 12.5%; max-width: 12.5%; }
    .t-col-lg-4 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .t-col-lg-5 { flex: 0 0 20.833333%; max-width: 20.833333%; }
    .t-col-lg-6 { flex: 0 0 25%; max-width: 25%; }
    .t-col-lg-7 { flex: 0 0 29.166667%; max-width: 29.166667%; }
    .t-col-lg-8 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .t-col-lg-9 { flex: 0 0 37.5%; max-width: 37.5%; }
    .t-col-lg-10 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .t-col-lg-11 { flex: 0 0 45.833333%; max-width: 45.833333%; }
    .t-col-lg-12 { flex: 0 0 50%; max-width: 50%; }
    .t-col-lg-13 { flex: 0 0 54.166667%; max-width: 54.166667%; }
    .t-col-lg-14 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .t-col-lg-15 { flex: 0 0 62.5%; max-width: 62.5%; }
    .t-col-lg-16 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .t-col-lg-17 { flex: 0 0 70.833333%; max-width: 70.833333%; }
    .t-col-lg-18 { flex: 0 0 75%; max-width: 75%; }
    .t-col-lg-19 { flex: 0 0 79.166667%; max-width: 79.166667%; }
    .t-col-lg-20 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .t-col-lg-21 { flex: 0 0 87.5%; max-width: 87.5%; }
    .t-col-lg-22 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .t-col-lg-23 { flex: 0 0 95.833333%; max-width: 95.833333%; }
    .t-col-lg-24 { flex: 0 0 100%; max-width: 100%; }
}

/**
 * 响应式栅格 - xl (≥1200px)
 */
@media (min-width: 1200px) {
    .t-col-xl-0 { display: none; }
    .t-col-xl-1 { flex: 0 0 4.166667%; max-width: 4.166667%; }
    .t-col-xl-2 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    .t-col-xl-3 { flex: 0 0 12.5%; max-width: 12.5%; }
    .t-col-xl-4 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    .t-col-xl-5 { flex: 0 0 20.833333%; max-width: 20.833333%; }
    .t-col-xl-6 { flex: 0 0 25%; max-width: 25%; }
    .t-col-xl-7 { flex: 0 0 29.166667%; max-width: 29.166667%; }
    .t-col-xl-8 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    .t-col-xl-9 { flex: 0 0 37.5%; max-width: 37.5%; }
    .t-col-xl-10 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    .t-col-xl-11 { flex: 0 0 45.833333%; max-width: 45.833333%; }
    .t-col-xl-12 { flex: 0 0 50%; max-width: 50%; }
    .t-col-xl-13 { flex: 0 0 54.166667%; max-width: 54.166667%; }
    .t-col-xl-14 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    .t-col-xl-15 { flex: 0 0 62.5%; max-width: 62.5%; }
    .t-col-xl-16 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    .t-col-xl-17 { flex: 0 0 70.833333%; max-width: 70.833333%; }
    .t-col-xl-18 { flex: 0 0 75%; max-width: 75%; }
    .t-col-xl-19 { flex: 0 0 79.166667%; max-width: 79.166667%; }
    .t-col-xl-20 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    .t-col-xl-21 { flex: 0 0 87.5%; max-width: 87.5%; }
    .t-col-xl-22 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    .t-col-xl-23 { flex: 0 0 95.833333%; max-width: 95.833333%; }
    .t-col-xl-24 { flex: 0 0 100%; max-width: 100%; }
}

/* ==================== Container 布局容器 ==================== */

/**
 * Container 容器
 * 使用: class="t-container"
 * 说明: 用于布局的容器组件，可包含 Header、Aside、Main、Footer
 */
.t-container {
    display: flex;
    flex-direction: row;
    flex: 1;
    flex-basis: auto;
    box-sizing: border-box;
    min-width: 0;
    background: var(--t-bg);
}

/**
 * 垂直布局容器
 * 使用: class="t-container t-container--vertical"
 * 说明: 子元素垂直排列（Header/Footer 在上/下，Main 在中间）
 */
.t-container--vertical {
    flex-direction: column;
}

/**
 * Header 顶栏
 * 使用: class="t-header"
 * 说明: 顶部导航栏或页头
 */
.t-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    z-index: 10;
}

/**
 * Header 高度变体
 * 使用: class="t-header t-header--sm|lg"
 */
.t-header--sm { height: 48px; }
.t-header--lg { height: 80px; }

/**
 * Aside 侧边栏
 * 使用: class="t-aside"
 * 说明: 侧边导航栏
 */
.t-aside {
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    z-index: 5;
}

/**
 * Aside 宽度变体
 * 使用: class="t-aside t-aside--sm|md|lg"
 */
.t-aside--sm { width: 160px; }
.t-aside--md { width: 200px; }
.t-aside--lg { width: 280px; }
.t-aside--xl { width: 320px; }

/**
 * Main 内容区
 * 使用: class="t-main"
 * 说明: 主要内容展示区域
 */
.t-main {
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;
    background: var(--t-bg);
    min-height: 200px;
}

/**
 * Footer 底栏
 * 使用: class="t-footer"
 * 说明: 底部版权信息或操作栏
 */
.t-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 60px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    z-index: 10;
}

/**
 * Footer 高度变体
 * 使用: class="t-footer t-footer--sm|lg"
 */
.t-footer--sm { height: 40px; }
.t-footer--lg { height: 80px; }

/**
 * 容器组合布局示例
 * 
 * 常见布局1: 上中下布局
 * <div class="t-container t-container--vertical" style="height: 100vh;">
 *   <header class="t-header">Header</header>
 *   <main class="t-main">Main Content</main>
 *   <footer class="t-footer">Footer</footer>
 * </div>
 * 
 * 常见布局2: 左右布局
 * <div class="t-container" style="height: 100vh;">
 *   <aside class="t-aside t-aside--md">Aside</aside>
 *   <main class="t-main">Main Content</main>
 * </div>
 * 
 * 常见布局3: 经典后台布局
 * <div class="t-container t-container--vertical" style="height: 100vh;">
 *   <header class="t-header">Header</header>
 *   <div class="t-container">
 *     <aside class="t-aside t-aside--md">Aside</aside>
 *     <main class="t-main">Main Content</main>
 *   </div>
 * </div>
 */

/* ==================== Color 色彩系统 ==================== */

/**
 * Color 色彩展示
 * 使用: class="t-color-block"
 * 说明: 用于展示设计系统中的颜色变量
 */
.t-color-block {
    display: flex;
    flex-direction: column;
    border-radius: var(--t-radius);
    overflow: hidden;
    box-shadow: var(--t-shadow);
    transition: var(--t-transition);
    min-width: 140px;
}

.t-color-block:hover {
    transform: translateY(-4px);
    box-shadow: var(--t-shadow-lg);
}

.t-color-block__preview {
    height: 30px;
    display: flex;
    align-items: flex-end;
    padding: 12px;
    color: var(--t-white);
    font-weight: 600;
    font-size: 14px;
}

.t-color-block__info {
    padding: 16px 12px;
    background: var(--t-bg);
    min-height: 70px;
}

.t-color-block__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-color-block__value {
    font-size: 12px;
    color: var(--t-text-secondary);
    font-family: 'Courier New', monospace;
}

/**
 * 主题色块
 */
.t-color-block--primary .t-color-block__preview { background: var(--t-primary); }
.t-color-block--success .t-color-block__preview { background: var(--t-success); }
.t-color-block--warning .t-color-block__preview { background: var(--t-warning); }
.t-color-block--danger .t-color-block__preview { background: var(--t-danger); }
.t-color-block--info .t-color-block__preview { background: var(--t-info); }

/**
 * 文字色块
 */
.t-color-block--text-primary .t-color-block__preview { 
    background: var(--t-text-primary); 
    color: var(--t-bg);
}
.t-color-block--text-regular .t-color-block__preview { 
    background: var(--t-text-regular); 
}
.t-color-block--text-secondary .t-color-block__preview { 
    background: var(--t-text-secondary); 
}
.t-color-block--text-placeholder .t-color-block__preview { 
    background: var(--t-text-placeholder); 
}

/**
 * 背景色块
 */
.t-color-block--bg .t-color-block__preview { 
    background: var(--t-bg); 
    color: var(--t-text-primary);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1);
}

/**
 * 色彩展示网格
 * 使用: class="t-color-grid"
 */
.t-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
}

/* 色彩网格 - 固定5列布局（用于主题色展示） */
.t-color-grid--5 {
    grid-template-columns: repeat(5, 1fr);
}

/* 色彩网格 - 固定4列布局（用于文字色展示） */
.t-color-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

/* 响应式：小屏幕时改为2列 */
@media (max-width: 768px) {
    .t-color-grid--5,
    .t-color-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/**
 * 色彩渐变展示
 * 使用: class="t-color-gradient"
 */
.t-color-gradient {
    height: 60px;
    border-radius: var(--t-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-white);
    font-weight: 600;
    box-shadow: var(--t-shadow);
}

.t-color-gradient--primary {
    background: linear-gradient(135deg, var(--t-primary), var(--t-primary-light));
}

.t-color-gradient--success {
    background: linear-gradient(135deg, var(--t-success), var(--t-success-light));
}

.t-color-gradient--warning {
    background: linear-gradient(135deg, var(--t-warning), var(--t-warning-light));
}

.t-color-gradient--danger {
    background: linear-gradient(135deg, var(--t-danger), var(--t-danger-light));
}

.t-color-gradient--info {
    background: linear-gradient(135deg, var(--t-info), var(--t-info-light));
}

/**
 * 色彩阶梯展示
 * 使用: class="t-color-steps"
 */
.t-color-steps {
    display: flex;
    border-radius: var(--t-radius);
    overflow: hidden;
    box-shadow: var(--t-shadow);
}

.t-color-step {
    flex: 1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-white);
    font-size: 12px;
    font-weight: 500;
}

/* Primary 色彩阶梯 */
.t-color-step--primary-1 { background: #ecf5ff; color: var(--t-primary); }
.t-color-step--primary-2 { background: #d9ecff; color: var(--t-primary); }
.t-color-step--primary-3 { background: #b3d8ff; color: var(--t-primary); }
.t-color-step--primary-4 { background: #8cc5ff; color: var(--t-white); }
.t-color-step--primary-5 { background: #66b1ff; }
.t-color-step--primary-6 { background: var(--t-primary); }
.t-color-step--primary-7 { background: #3a8ee6; }
.t-color-step--primary-8 { background: #337ecc; }
.t-color-step--primary-9 { background: #2b6db3; }

/* Success 色彩阶梯 */
.t-color-step--success-1 { background: #f0f9eb; color: var(--t-success); }
.t-color-step--success-2 { background: #e1f3d8; color: var(--t-success); }
.t-color-step--success-3 { background: #c2e7b0; color: var(--t-success); }
.t-color-step--success-4 { background: #a3da88; color: var(--t-white); }
.t-color-step--success-5 { background: #85ce61; }
.t-color-step--success-6 { background: var(--t-success); }
.t-color-step--success-7 { background: #5daf34; }
.t-color-step--success-8 { background: #529b2d; }
.t-color-step--success-9 { background: #488626; }

/* Warning 色彩阶梯 */
.t-color-step--warning-1 { background: #fdf6ec; color: var(--t-warning); }
.t-color-step--warning-2 { background: #faecd8; color: var(--t-warning); }
.t-color-step--warning-3 { background: #f5dab1; color: var(--t-warning); }
.t-color-step--warning-4 { background: #f0c78a; color: var(--t-white); }
.t-color-step--warning-5 { background: #ebb563; }
.t-color-step--warning-6 { background: var(--t-warning); }
.t-color-step--warning-7 { background: #cf9236; }
.t-color-step--warning-8 { background: #b88230; }
.t-color-step--warning-9 { background: #a1712a; }

/* Danger 色彩阶梯 */
.t-color-step--danger-1 { background: #fef0f0; color: var(--t-danger); }
.t-color-step--danger-2 { background: #fde2e2; color: var(--t-danger); }
.t-color-step--danger-3 { background: #fbc4c4; color: var(--t-danger); }
.t-color-step--danger-4 { background: #f9a7a7; color: var(--t-white); }
.t-color-step--danger-5 { background: #f78989; }
.t-color-step--danger-6 { background: var(--t-danger); }
.t-color-step--danger-7 { background: #dd6161; }
.t-color-step--danger-8 { background: #c45656; }
.t-color-step--danger-9 { background: #ac4c4c; }

/* ==================== Typography 字体排版 ==================== */

/**
 * Typography 字体排版系统
 * 使用: class="t-typography"
 * 说明: 用于展示设计系统中的字体规范
 */
.t-typography {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Te', Arial, sans-serif;
}

/**
 * 标题样式
 */
.t-typography h1,
.t-typography h2,
.t-typography h3,
.t-typography h4,
.t-typography h5,
.t-typography h6,
.t-title-1,
.t-title-2,
.t-title-3,
.t-title-4,
.t-title-5,
.t-title-6 {
    margin: 0;
    font-weight: 600;
    color: var(--t-text-primary);
    line-height: 1.4;
}

.t-typography h1,
.t-title-1 {
    font-size: 38px;
    line-height: 1.2;
}

.t-typography h2,
.t-title-2 {
    font-size: 30px;
    line-height: 1.3;
}

.t-typography h3,
.t-title-3 {
    font-size: 24px;
}

.t-typography h4,
.t-title-4 {
    font-size: 20px;
}

.t-typography h5,
.t-title-5 {
    font-size: 16px;
}

.t-typography h6,
.t-title-6 {
    font-size: 14px;
}

/**
 * 正文样式
 */
.t-typography p,
.t-text-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--t-text-regular);
}

.t-text-body-large {
    font-size: 16px;
    line-height: 1.7;
}

.t-text-body-small {
    font-size: 13px;
    line-height: 1.5;
}

/**
 * 辅助文字
 */
.t-text-secondary {
    font-size: 14px;
    color: var(--t-text-secondary);
}

.t-text-caption {
    font-size: 12px;
    color: var(--t-text-secondary);
    line-height: 1.4;
}

/**
 * 字体粗细
 */
.t-font-light { font-weight: 300; }
.t-font-normal { font-weight: 400; }
.t-font-medium { font-weight: 500; }
.t-font-semibold { font-weight: 600; }
.t-font-bold { font-weight: 700; }

/**
 * 文字对齐
 */
.t-text-left { text-align: left; }
.t-text-center { text-align: center; }
.t-text-right { text-align: right; }
.t-text-justify { text-align: justify; }

/**
 * 文字装饰
 */
.t-text-underline { text-decoration: underline; }
.t-text-line-through { text-decoration: line-through; }
.t-text-no-decoration { text-decoration: none; }

/**
 * 文字转换
 */
.t-text-uppercase { text-transform: uppercase; }
.t-text-lowercase { text-transform: lowercase; }
.t-text-capitalize { text-transform: capitalize; }

/**
 * 字体排版展示卡片
 */
.t-typography-card {
    padding: 24px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    margin-bottom: 16px;
}

.t-typography-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--t-shadow-light);
}

.t-typography-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text-primary);
}

.t-typography-card__meta {
    font-size: 12px;
    color: var(--t-text-secondary);
    font-family: 'Courier New', monospace;
}

.t-typography-card__content {
    color: var(--t-text-regular);
}

/**
 * 字体排版展示列表
 */
.t-typography-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.t-typography-item {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--t-shadow-light);
}

.t-typography-item:last-child {
    border-bottom: none;
}

.t-typography-item__label {
    width: 100px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--t-text-secondary);
    font-family: 'Courier New', monospace;
}

.t-typography-item__example {
    flex: 1;
    color: var(--t-text-primary);
}

/**
 * 代码样式
 */
.t-code {
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 13px;
    padding: 2px 6px;
    background: var(--t-shadow-light);
    border-radius: 4px;
    color: var(--t-text-primary);
}

.t-code-block {
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 13px;
    line-height: 1.6;
    padding: 16px;
    background: var(--t-shadow-light);
    border-radius: var(--t-radius);
    color: var(--t-text-regular);
    overflow-x: auto;
}

/**
 * 引用样式
 */
.t-blockquote {
    margin: 0;
    padding: 16px 20px;
    border-left: 4px solid var(--t-primary);
    background: var(--t-shadow-light);
    border-radius: 0 var(--t-radius) var(--t-radius) 0;
}

.t-blockquote p {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--t-text-regular);
    font-style: italic;
}

.t-blockquote cite {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--t-text-secondary);
    font-style: normal;
}

/**
 * 列表样式
 */
.t-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.t-list--ordered {
    list-style: decimal;
    padding-left: 20px;
}

.t-list--unordered {
    list-style: disc;
    padding-left: 20px;
}

.t-list__item {
    padding: 8px 0;
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.6;
}

.t-list__item + .t-list__item {
    border-top: 1px solid var(--t-shadow-light);
}

/* ==================== Border 边框样式 ==================== */

/**
 * Border 边框展示
 * 使用: class="t-border-box"
 * 说明: 用于展示设计系统中的边框、圆角、阴影样式
 */
.t-border-box {
    padding: 20px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    font-size: 14px;
    color: var(--t-text-regular);
}

/**
 * 圆角展示
 */
.t-border-box--radius-sm {
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow-sm);
}

.t-border-box--radius {
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
}

.t-border-box--radius-lg {
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-lg);
}

.t-border-box--radius-xl {
    border-radius: var(--t-radius-xl);
    box-shadow: var(--t-shadow-xl);
}

.t-border-box--radius-full {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    box-shadow: var(--t-shadow);
}

/**
 * 阴影展示
 */
.t-border-box--shadow-sm {
    box-shadow: var(--t-shadow-sm);
}

.t-border-box--shadow {
    box-shadow: var(--t-shadow);
}

.t-border-box--shadow-lg {
    box-shadow: var(--t-shadow-lg);
}

.t-border-box--shadow-xl {
    box-shadow: var(--t-shadow-xl);
}

.t-border-box--inset-sm {
    box-shadow: var(--t-inset-sm);
}

.t-border-box--inset {
    box-shadow: var(--t-inset);
}

.t-border-box--inset-lg {
    box-shadow: var(--t-inset-lg);
}

/**
 * 边框样式展示
 */
.t-border-box--solid {
    border: 2px solid var(--t-shadow-dark);
}

.t-border-box--dashed {
    border: 2px dashed var(--t-shadow-dark);
}

.t-border-box--dotted {
    border: 2px dotted var(--t-shadow-dark);
}

.t-border-box--double {
    border: 4px double var(--t-shadow-dark);
}

/**
 * 边框宽度展示
 */
.t-border-box--width-1 { border: 1px solid var(--t-shadow-dark); }
.t-border-box--width-2 { border: 2px solid var(--t-shadow-dark); }
.t-border-box--width-3 { border: 3px solid var(--t-shadow-dark); }
.t-border-box--width-4 { border: 4px solid var(--t-shadow-dark); }

/**
 * 边框颜色展示
 */
.t-border-box--color-primary { border: 2px solid var(--t-primary); }
.t-border-box--color-success { border: 2px solid var(--t-success); }
.t-border-box--color-warning { border: 2px solid var(--t-warning); }
.t-border-box--color-danger { border: 2px solid var(--t-danger); }
.t-border-box--color-info { border: 2px solid var(--t-info); }

/**
 * 边框位置展示
 */
.t-border-box--top { border-top: 3px solid var(--t-primary); }
.t-border-box--right { border-right: 3px solid var(--t-success); }
.t-border-box--bottom { border-bottom: 3px solid var(--t-warning); }
.t-border-box--left { border-left: 3px solid var(--t-danger); }

/**
 * 边框展示网格
 */
.t-border-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
}

/**
 * 边框展示卡片
 */
.t-border-card {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}

.t-border-card__preview {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
}

.t-border-card__info {
    padding: 12px 16px;
    background: var(--t-shadow-light);
    border-top: 1px solid var(--t-shadow-dark);
}

.t-border-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 4px;
}

.t-border-card__value {
    font-size: 11px;
    color: var(--t-text-secondary);
    font-family: 'Courier New', monospace;
}

/**
 * 阴影强度展示
 */
.t-shadow-demo {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.t-shadow-demo__item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.t-shadow-demo__box {
    width: 100px;
    height: 60px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    flex-shrink: 0;
}

.t-shadow-demo__label {
    font-size: 14px;
    color: var(--t-text-primary);
    font-weight: 500;
}

.t-shadow-demo__desc {
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-top: 4px;
}

/* ==================== 工具类 ==================== */

/**
 * 工具类使用说明：
 * 所有工具类都使用 !important 声明，确保可以覆盖组件默认样式
 * 命名规则：t-{属性}-{方向}-{数值}
 * 示例：t-p-10 (padding: 10px), t-mx-auto (margin: 0 auto)
 */

/* ----- 间距 Spacing ----- */

/* Padding - 统一 */
.t-p-0 { padding: 0 !important; }
.t-p-2 { padding: 2px !important; }
.t-p-4 { padding: 4px !important; }
.t-p-5 { padding: 5px !important; }
.t-p-8 { padding: 8px !important; }
.t-p-10 { padding: 10px !important; }
.t-p-12 { padding: 12px !important; }
.t-p-15 { padding: 15px !important; }
.t-p-16 { padding: 16px !important; }
.t-p-20 { padding: 20px !important; }
.t-p-24 { padding: 24px !important; }
.t-p-25 { padding: 25px !important; }
.t-p-30 { padding: 30px !important; }
.t-p-32 { padding: 32px !important; }
.t-p-40 { padding: 40px !important; }
.t-p-48 { padding: 48px !important; }
.t-p-50 { padding: 50px !important; }
.t-p-60 { padding: 60px !important; }
.t-p-64 { padding: 64px !important; }
.t-p-80 { padding: 80px !important; }
.t-p-100 { padding: 100px !important; }

/* Padding - 水平方向 (x) */
.t-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.t-px-2 { padding-left: 2px !important; padding-right: 2px !important; }
.t-px-4 { padding-left: 4px !important; padding-right: 4px !important; }
.t-px-5 { padding-left: 5px !important; padding-right: 5px !important; }
.t-px-8 { padding-left: 8px !important; padding-right: 8px !important; }
.t-px-10 { padding-left: 10px !important; padding-right: 10px !important; }
.t-px-12 { padding-left: 12px !important; padding-right: 12px !important; }
.t-px-15 { padding-left: 15px !important; padding-right: 15px !important; }
.t-px-16 { padding-left: 16px !important; padding-right: 16px !important; }
.t-px-20 { padding-left: 20px !important; padding-right: 20px !important; }
.t-px-24 { padding-left: 24px !important; padding-right: 24px !important; }
.t-px-25 { padding-left: 25px !important; padding-right: 25px !important; }
.t-px-30 { padding-left: 30px !important; padding-right: 30px !important; }
.t-px-32 { padding-left: 32px !important; padding-right: 32px !important; }
.t-px-40 { padding-left: 40px !important; padding-right: 40px !important; }
.t-px-50 { padding-left: 50px !important; padding-right: 50px !important; }

/* Padding - 垂直方向 (y) */
.t-py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.t-py-2 { padding-top: 2px !important; padding-bottom: 2px !important; }
.t-py-4 { padding-top: 4px !important; padding-bottom: 4px !important; }
.t-py-5 { padding-top: 5px !important; padding-bottom: 5px !important; }
.t-py-8 { padding-top: 8px !important; padding-bottom: 8px !important; }
.t-py-10 { padding-top: 10px !important; padding-bottom: 10px !important; }
.t-py-12 { padding-top: 12px !important; padding-bottom: 12px !important; }
.t-py-15 { padding-top: 15px !important; padding-bottom: 15px !important; }
.t-py-16 { padding-top: 16px !important; padding-bottom: 16px !important; }
.t-py-20 { padding-top: 20px !important; padding-bottom: 20px !important; }
.t-py-24 { padding-top: 24px !important; padding-bottom: 24px !important; }
.t-py-25 { padding-top: 25px !important; padding-bottom: 25px !important; }
.t-py-30 { padding-top: 30px !important; padding-bottom: 30px !important; }
.t-py-32 { padding-top: 32px !important; padding-bottom: 32px !important; }
.t-py-40 { padding-top: 40px !important; padding-bottom: 40px !important; }
.t-py-50 { padding-top: 50px !important; padding-bottom: 50px !important; }

/* Padding - 单方向 */
.t-pt-0 { padding-top: 0 !important; }
.t-pt-2 { padding-top: 2px !important; }
.t-pt-4 { padding-top: 4px !important; }
.t-pt-5 { padding-top: 5px !important; }
.t-pt-8 { padding-top: 8px !important; }
.t-pt-10 { padding-top: 10px !important; }
.t-pt-12 { padding-top: 12px !important; }
.t-pt-15 { padding-top: 15px !important; }
.t-pt-16 { padding-top: 16px !important; }
.t-pt-20 { padding-top: 20px !important; }
.t-pt-24 { padding-top: 24px !important; }
.t-pt-25 { padding-top: 25px !important; }
.t-pt-30 { padding-top: 30px !important; }
.t-pt-32 { padding-top: 32px !important; }
.t-pt-40 { padding-top: 40px !important; }
.t-pt-50 { padding-top: 50px !important; }

.t-pr-0 { padding-right: 0 !important; }
.t-pr-2 { padding-right: 2px !important; }
.t-pr-4 { padding-right: 4px !important; }
.t-pr-5 { padding-right: 5px !important; }
.t-pr-8 { padding-right: 8px !important; }
.t-pr-10 { padding-right: 10px !important; }
.t-pr-12 { padding-right: 12px !important; }
.t-pr-15 { padding-right: 15px !important; }
.t-pr-16 { padding-right: 16px !important; }
.t-pr-20 { padding-right: 20px !important; }
.t-pr-24 { padding-right: 24px !important; }
.t-pr-25 { padding-right: 25px !important; }
.t-pr-30 { padding-right: 30px !important; }
.t-pr-32 { padding-right: 32px !important; }
.t-pr-40 { padding-right: 40px !important; }
.t-pr-50 { padding-right: 50px !important; }

.t-pb-0 { padding-bottom: 0 !important; }
.t-pb-2 { padding-bottom: 2px !important; }
.t-pb-4 { padding-bottom: 4px !important; }
.t-pb-5 { padding-bottom: 5px !important; }
.t-pb-8 { padding-bottom: 8px !important; }
.t-pb-10 { padding-bottom: 10px !important; }
.t-pb-12 { padding-bottom: 12px !important; }
.t-pb-15 { padding-bottom: 15px !important; }
.t-pb-16 { padding-bottom: 16px !important; }
.t-pb-20 { padding-bottom: 20px !important; }
.t-pb-24 { padding-bottom: 24px !important; }
.t-pb-25 { padding-bottom: 25px !important; }
.t-pb-30 { padding-bottom: 30px !important; }
.t-pb-32 { padding-bottom: 32px !important; }
.t-pb-40 { padding-bottom: 40px !important; }
.t-pb-50 { padding-bottom: 50px !important; }

.t-pl-0 { padding-left: 0 !important; }
.t-pl-2 { padding-left: 2px !important; }
.t-pl-4 { padding-left: 4px !important; }
.t-pl-5 { padding-left: 5px !important; }
.t-pl-8 { padding-left: 8px !important; }
.t-pl-10 { padding-left: 10px !important; }
.t-pl-12 { padding-left: 12px !important; }
.t-pl-15 { padding-left: 15px !important; }
.t-pl-16 { padding-left: 16px !important; }
.t-pl-20 { padding-left: 20px !important; }
.t-pl-24 { padding-left: 24px !important; }
.t-pl-25 { padding-left: 25px !important; }
.t-pl-30 { padding-left: 30px !important; }
.t-pl-32 { padding-left: 32px !important; }
.t-pl-40 { padding-left: 40px !important; }
.t-pl-50 { padding-left: 50px !important; }

/* Margin - 统一 */
.t-m-0 { margin: 0 !important; }
.t-m-2 { margin: 2px !important; }
.t-m-4 { margin: 4px !important; }
.t-m-5 { margin: 5px !important; }
.t-m-8 { margin: 8px !important; }
.t-m-10 { margin: 10px !important; }
.t-m-12 { margin: 12px !important; }
.t-m-15 { margin: 15px !important; }
.t-m-16 { margin: 16px !important; }
.t-m-20 { margin: 20px !important; }
.t-m-24 { margin: 24px !important; }
.t-m-25 { margin: 25px !important; }
.t-m-30 { margin: 30px !important; }
.t-m-32 { margin: 32px !important; }
.t-m-40 { margin: 40px !important; }
.t-m-48 { margin: 48px !important; }
.t-m-50 { margin: 50px !important; }

/* Margin - 水平方向 (x) */
.t-mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.t-mx-2 { margin-left: 2px !important; margin-right: 2px !important; }
.t-mx-4 { margin-left: 4px !important; margin-right: 4px !important; }
.t-mx-5 { margin-left: 5px !important; margin-right: 5px !important; }
.t-mx-8 { margin-left: 8px !important; margin-right: 8px !important; }
.t-mx-10 { margin-left: 10px !important; margin-right: 10px !important; }
.t-mx-12 { margin-left: 12px !important; margin-right: 12px !important; }
.t-mx-15 { margin-left: 15px !important; margin-right: 15px !important; }
.t-mx-16 { margin-left: 16px !important; margin-right: 16px !important; }
.t-mx-20 { margin-left: 20px !important; margin-right: 20px !important; }
.t-mx-24 { margin-left: 24px !important; margin-right: 24px !important; }
.t-mx-25 { margin-left: 25px !important; margin-right: 25px !important; }
.t-mx-30 { margin-left: 30px !important; margin-right: 30px !important; }
.t-mx-32 { margin-left: 32px !important; margin-right: 32px !important; }
.t-mx-40 { margin-left: 40px !important; margin-right: 40px !important; }
.t-mx-50 { margin-left: 50px !important; margin-right: 50px !important; }
.t-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin - 垂直方向 (y) */
.t-my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.t-my-2 { margin-top: 2px !important; margin-bottom: 2px !important; }
.t-my-4 { margin-top: 4px !important; margin-bottom: 4px !important; }
.t-my-5 { margin-top: 5px !important; margin-bottom: 5px !important; }
.t-my-8 { margin-top: 8px !important; margin-bottom: 8px !important; }
.t-my-10 { margin-top: 10px !important; margin-bottom: 10px !important; }
.t-my-12 { margin-top: 12px !important; margin-bottom: 12px !important; }
.t-my-15 { margin-top: 15px !important; margin-bottom: 15px !important; }
.t-my-16 { margin-top: 16px !important; margin-bottom: 16px !important; }
.t-my-20 { margin-top: 20px !important; margin-bottom: 20px !important; }
.t-my-24 { margin-top: 24px !important; margin-bottom: 24px !important; }
.t-my-25 { margin-top: 25px !important; margin-bottom: 25px !important; }
.t-my-30 { margin-top: 30px !important; margin-bottom: 30px !important; }
.t-my-32 { margin-top: 32px !important; margin-bottom: 32px !important; }
.t-my-40 { margin-top: 40px !important; margin-bottom: 40px !important; }
.t-my-50 { margin-top: 50px !important; margin-bottom: 50px !important; }

/* Margin - 单方向 */
.t-mt-0 { margin-top: 0 !important; }
.t-mt-2 { margin-top: 2px !important; }
.t-mt-4 { margin-top: 4px !important; }
.t-mt-5 { margin-top: 5px !important; }
.t-mt-8 { margin-top: 8px !important; }
.t-mt-10 { margin-top: 10px !important; }
.t-mt-12 { margin-top: 12px !important; }
.t-mt-15 { margin-top: 15px !important; }
.t-mt-16 { margin-top: 16px !important; }
.t-mt-20 { margin-top: 20px !important; }
.t-mt-24 { margin-top: 24px !important; }
.t-mt-25 { margin-top: 25px !important; }
.t-mt-30 { margin-top: 30px !important; }
.t-mt-32 { margin-top: 32px !important; }
.t-mt-40 { margin-top: 40px !important; }
.t-mt-50 { margin-top: 50px !important; }

.t-mr-0 { margin-right: 0 !important; }
.t-mr-2 { margin-right: 2px !important; }
.t-mr-4 { margin-right: 4px !important; }
.t-mr-5 { margin-right: 5px !important; }
.t-mr-8 { margin-right: 8px !important; }
.t-mr-10 { margin-right: 10px !important; }
.t-mr-12 { margin-right: 12px !important; }
.t-mr-15 { margin-right: 15px !important; }
.t-mr-16 { margin-right: 16px !important; }
.t-mr-20 { margin-right: 20px !important; }
.t-mr-24 { margin-right: 24px !important; }
.t-mr-25 { margin-right: 25px !important; }
.t-mr-30 { margin-right: 30px !important; }
.t-mr-32 { margin-right: 32px !important; }
.t-mr-40 { margin-right: 40px !important; }
.t-mr-50 { margin-right: 50px !important; }

.t-mb-0 { margin-bottom: 0 !important; }
.t-mb-2 { margin-bottom: 2px !important; }
.t-mb-4 { margin-bottom: 4px !important; }
.t-mb-5 { margin-bottom: 5px !important; }
.t-mb-8 { margin-bottom: 8px !important; }
.t-mb-10 { margin-bottom: 10px !important; }
.t-mb-12 { margin-bottom: 12px !important; }
.t-mb-15 { margin-bottom: 15px !important; }
.t-mb-16 { margin-bottom: 16px !important; }
.t-mb-20 { margin-bottom: 20px !important; }
.t-mb-24 { margin-bottom: 24px !important; }
.t-mb-25 { margin-bottom: 25px !important; }
.t-mb-30 { margin-bottom: 30px !important; }
.t-mb-32 { margin-bottom: 32px !important; }
.t-mb-40 { margin-bottom: 40px !important; }
.t-mb-50 { margin-bottom: 50px !important; }

.t-ml-0 { margin-left: 0 !important; }
.t-ml-2 { margin-left: 2px !important; }
.t-ml-4 { margin-left: 4px !important; }
.t-ml-5 { margin-left: 5px !important; }
.t-ml-8 { margin-left: 8px !important; }
.t-ml-10 { margin-left: 10px !important; }
.t-ml-12 { margin-left: 12px !important; }
.t-ml-15 { margin-left: 15px !important; }
.t-ml-16 { margin-left: 16px !important; }
.t-ml-20 { margin-left: 20px !important; }
.t-ml-24 { margin-left: 24px !important; }
.t-ml-25 { margin-left: 25px !important; }
.t-ml-30 { margin-left: 30px !important; }
.t-ml-32 { margin-left: 32px !important; }
.t-ml-40 { margin-left: 40px !important; }
.t-ml-50 { margin-left: 50px !important; }

/* Margin - 负值 */
.t-mt--5 { margin-top: -5px !important; }
.t-mt--10 { margin-top: -10px !important; }
.t-mt--15 { margin-top: -15px !important; }
.t-mt--20 { margin-top: -20px !important; }
.t-mr--5 { margin-right: -5px !important; }
.t-mr--10 { margin-right: -10px !important; }
.t-mr--15 { margin-right: -15px !important; }
.t-mr--20 { margin-right: -20px !important; }
.t-mb--5 { margin-bottom: -5px !important; }
.t-mb--10 { margin-bottom: -10px !important; }
.t-mb--15 { margin-bottom: -15px !important; }
.t-mb--20 { margin-bottom: -20px !important; }
.t-ml--5 { margin-left: -5px !important; }
.t-ml--10 { margin-left: -10px !important; }
.t-ml--15 { margin-left: -15px !important; }
.t-ml--20 { margin-left: -20px !important; }

/* ----- Flexbox ----- */
.t-flex { display: flex !important; }
.t-iflex { display: inline-flex !important; }
.t-flex-col { flex-direction: column !important; }
.t-flex-row { flex-direction: row !important; }
.t-flex-wrap { flex-wrap: wrap !important; }
.t-flex-nowrap { flex-wrap: nowrap !important; }

/* Justify Content */
.t-jc-fs { justify-content: flex-start !important; }
.t-jc-fe { justify-content: flex-end !important; }
.t-jc-c { justify-content: center !important; }
.t-jc-sb { justify-content: space-between !important; }
.t-jc-sa { justify-content: space-around !important; }
.t-jc-se { justify-content: space-evenly !important; }

/* Align Items */
.t-ai-fs { align-items: flex-start !important; }
.t-ai-fe { align-items: flex-end !important; }
.t-ai-c { align-items: center !important; }
.t-ai-s { align-items: stretch !important; }
.t-ai-b { align-items: baseline !important; }

/* Align Self */
.t-as-auto { align-self: auto !important; }
.t-as-fs { align-self: flex-start !important; }
.t-as-fe { align-self: flex-end !important; }
.t-as-c { align-self: center !important; }
.t-as-s { align-self: stretch !important; }

/* Flex Grow / Shrink */
.t-flex-1 { flex: 1 1 0% !important; }
.t-flex-auto { flex: 1 1 auto !important; }
.t-flex-none { flex: none !important; }
.t-flex-initial { flex: 0 1 auto !important; }
.t-grow { flex-grow: 1 !important; }
.t-grow-0 { flex-grow: 0 !important; }
.t-shrink { flex-shrink: 1 !important; }
.t-shrink-0 { flex-shrink: 0 !important; }

/* Gap */
.t-gap-0 { gap: 0 !important; }
.t-gap-2 { gap: 2px !important; }
.t-gap-4 { gap: 4px !important; }
.t-gap-5 { gap: 5px !important; }
.t-gap-8 { gap: 8px !important; }
.t-gap-10 { gap: 10px !important; }
.t-gap-12 { gap: 12px !important; }
.t-gap-15 { gap: 15px !important; }
.t-gap-16 { gap: 16px !important; }
.t-gap-20 { gap: 20px !important; }
.t-gap-24 { gap: 24px !important; }
.t-gap-25 { gap: 25px !important; }
.t-gap-30 { gap: 30px !important; }
.t-gap-32 { gap: 32px !important; }
.t-gap-40 { gap: 40px !important; }
.t-gap-50 { gap: 50px !important; }

.t-gap-x-0 { column-gap: 0 !important; }
.t-gap-x-2 { column-gap: 2px !important; }
.t-gap-x-4 { column-gap: 4px !important; }
.t-gap-x-5 { column-gap: 5px !important; }
.t-gap-x-8 { column-gap: 8px !important; }
.t-gap-x-10 { column-gap: 10px !important; }
.t-gap-x-12 { column-gap: 12px !important; }
.t-gap-x-15 { column-gap: 15px !important; }
.t-gap-x-16 { column-gap: 16px !important; }
.t-gap-x-20 { column-gap: 20px !important; }
.t-gap-x-24 { column-gap: 24px !important; }
.t-gap-x-30 { column-gap: 30px !important; }
.t-gap-x-40 { column-gap: 40px !important; }

.t-gap-y-0 { row-gap: 0 !important; }
.t-gap-y-2 { row-gap: 2px !important; }
.t-gap-y-4 { row-gap: 4px !important; }
.t-gap-y-5 { row-gap: 5px !important; }
.t-gap-y-8 { row-gap: 8px !important; }
.t-gap-y-10 { row-gap: 10px !important; }
.t-gap-y-12 { row-gap: 12px !important; }
.t-gap-y-15 { row-gap: 15px !important; }
.t-gap-y-16 { row-gap: 16px !important; }
.t-gap-y-20 { row-gap: 20px !important; }
.t-gap-y-24 { row-gap: 24px !important; }
.t-gap-y-30 { row-gap: 30px !important; }
.t-gap-y-40 { row-gap: 40px !important; }

/* ----- 定位 Position ----- */
.t-static { position: static !important; }
.t-relative { position: relative !important; }
.t-absolute { position: absolute !important; }
.t-fixed { position: fixed !important; }
.t-sticky { position: sticky !important; }

/* ----- 浮动 Float ----- */
.t-fl { float: left !important; }
.t-fr { float: right !important; }
.t-fn { float: none !important; }
.t-clear { clear: both !important; }
.t-clearfix::after { content: ''; display: table; clear: both; }

/* ----- 显示 Display ----- */
.t-block { display: block !important; }
.t-iblock { display: inline-block !important; }
.t-inline { display: inline !important; }
.t-hidden { display: none !important; }
.t-visible { visibility: visible !important; }
.t-invisible { visibility: hidden !important; }

/* ----- 溢出 Overflow ----- */
.t-overflow-h { overflow: hidden !important; }
.t-overflow-a { overflow: auto !important; }
.t-overflow-s { overflow: scroll !important; }
.t-overflow-v { overflow: visible !important; }
.t-overflow-x { overflow-x: hidden !important; }
.t-overflow-y { overflow-y: auto !important; }

/* ----- 尺寸 Width / Height ----- */
.t-w-0 { width: 0 !important; }
.t-w-25 { width: 25px !important; }
.t-w-50 { width: 50px !important; }
.t-w-75 { width: 75px !important; }
.t-w-100 { width: 100px !important; }
.t-w-125 { width: 125px !important; }
.t-w-150 { width: 150px !important; }
.t-w-200 { width: 200px !important; }
.t-w-250 { width: 250px !important; }
.t-w-300 { width: 300px !important; }
.t-w-400 { width: 400px !important; }
.t-w-500 { width: 500px !important; }
.t-w-full { width: 100% !important; }
.t-w-auto { width: auto !important; }
.t-w-screen { width: 100vw !important; }
.t-w-fit { width: fit-content !important; }
.t-w-max { width: max-content !important; }
.t-w-min { width: min-content !important; }

.t-h-0 { height: 0 !important; }
.t-h-25 { height: 25px !important; }
.t-h-50 { height: 50px !important; }
.t-h-75 { height: 75px !important; }
.t-h-80 { height: 80px !important; }
.t-h-100 { height: 100px !important; }
.t-h-125 { height: 125px !important; }
.t-h-150 { height: 150px !important; }
.t-h-200 { height: 200px !important; }
.t-h-250 { height: 250px !important; }
.t-h-300 { height: 300px !important; }
.t-h-400 { height: 400px !important; }
.t-h-500 { height: 500px !important; }
.t-h-full { height: 100% !important; }
.t-h-auto { height: auto !important; }
.t-h-screen { height: 100vh !important; }
.t-h-fit { height: fit-content !important; }

/* Min / Max */
.t-min-w-0 { min-width: 0 !important; }
.t-min-w-100 { min-width: 100px !important; }
.t-min-w-200 { min-width: 200px !important; }
.t-min-w-full { min-width: 100% !important; }
.t-min-w-screen { min-width: 100vw !important; }

.t-min-h-0 { min-height: 0 !important; }
.t-min-h-100 { min-height: 100px !important; }
.t-min-h-200 { min-height: 200px !important; }
.t-min-h-full { min-height: 100% !important; }
.t-min-h-screen { min-height: 100vh !important; }

.t-max-w-0 { max-width: 0 !important; }
.t-max-w-100 { max-width: 100px !important; }
.t-max-w-200 { max-width: 200px !important; }
.t-max-w-300 { max-width: 300px !important; }
.t-max-w-400 { max-width: 400px !important; }
.t-max-w-500 { max-width: 500px !important; }
.t-max-w-full { max-width: 100% !important; }
.t-max-w-screen { max-width: 100vw !important; }
.t-max-w-none { max-width: none !important; }

.t-max-h-0 { max-height: 0 !important; }
.t-max-h-100 { max-height: 100px !important; }
.t-max-h-200 { max-height: 200px !important; }
.t-max-h-300 { max-height: 300px !important; }
.t-max-h-400 { max-height: 400px !important; }
.t-max-h-500 { max-height: 500px !important; }
.t-max-h-full { max-height: 100% !important; }
.t-max-h-screen { max-height: 100vh !important; }
.t-max-h-none { max-height: none !important; }

/* ----- 文本 Text ----- */
/* 对齐 */
.t-ta-l { text-align: left !important; }
.t-ta-c { text-align: center !important; }
.t-ta-r { text-align: right !important; }
.t-ta-j { text-align: justify !important; }

/* 转换 */
.t-tt-n { text-transform: none !important; }
.t-tt-u { text-transform: uppercase !important; }
.t-tt-l { text-transform: lowercase !important; }
.t-tt-c { text-transform: capitalize !important; }

/* 粗细 */
.t-fw-n { font-weight: 400 !important; }
.t-fw-m { font-weight: 500 !important; }
.t-fw-sb { font-weight: 600 !important; }
.t-fw-b { font-weight: 700 !important; }
.t-fw-l { font-weight: 300 !important; }

/* 字体大小 */
.t-fs-12 { font-size: 12px !important; }
.t-fs-13 { font-size: 13px !important; }
.t-fs-14 { font-size: 14px !important; }
.t-fs-15 { font-size: 15px !important; }
.t-fs-16 { font-size: 16px !important; }
.t-fs-18 { font-size: 18px !important; }
.t-fs-20 { font-size: 20px !important; }
.t-fs-24 { font-size: 24px !important; }
.t-fs-30 { font-size: 30px !important; }
.t-fs-36 { font-size: 36px !important; }
.t-fs-48 { font-size: 48px !important; }

/* 行高 */
.t-lh-1 { line-height: 1 !important; }
.t-lh-tight { line-height: 1.25 !important; }
.t-lh-normal { line-height: 1.5 !important; }
.t-lh-loose { line-height: 2 !important; }
.t-lh-3 { line-height: 3 !important; }

/* 颜色 - 主题色 */
.t-c-p { color: var(--t-primary) !important; }
.t-c-s { color: var(--t-success) !important; }
.t-c-w { color: var(--t-warning) !important; }
.t-c-d { color: var(--t-danger) !important; }
.t-c-i { color: var(--t-info) !important; }

/* 颜色 - 文字色 */
.t-c-t1 { color: var(--t-text-primary) !important; }
.t-c-t2 { color: var(--t-text-regular) !important; }
.t-c-t3 { color: var(--t-text-secondary) !important; }
.t-c-ph { color: var(--t-text-placeholder) !important; }

/* 装饰 */
.t-td-n { text-decoration: none !important; }
.t-td-u { text-decoration: underline !important; }
.t-td-l { text-decoration: line-through !important; }

/* 溢出处理 */
.t-to-e { text-overflow: ellipsis !important; }
.t-to-clip { text-overflow: clip !important; }
.t-wh-n { white-space: nowrap !important; }
.t-wh-nw { white-space: normal !important; }
.t-wh-p { white-space: pre !important; }
.t-wo-bw { word-break: break-word !important; }
.t-wo-ba { word-break: break-all !important; }
.t-wo-n { word-break: normal !important; }

/* ----- 背景 Background ----- */
.t-bg { background-color: var(--t-bg) !important; }
.t-bg-p { background-color: var(--t-primary) !important; }
.t-bg-s { background-color: var(--t-success) !important; }
.t-bg-w { background-color: var(--t-warning) !important; }
.t-bg-d { background-color: var(--t-danger) !important; }
.t-bg-i { background-color: var(--t-info) !important; }
.t-bg-transparent { background-color: transparent !important; }

/* ----- 边框 Border ----- */
.t-bw-0 { border-width: 0 !important; }
.t-bw-1 { border-width: 1px !important; }
.t-bw-2 { border-width: 2px !important; }
.t-bw-4 { border-width: 4px !important; }

.t-bs-s { border-style: solid !important; }
.t-bs-d { border-style: dashed !important; }
.t-bs-n { border-style: none !important; }

.t-bt-0 { border-top-width: 0 !important; }
.t-bt-1 { border-top-width: 1px !important; }
.t-bt-2 { border-top-width: 2px !important; }
.t-br-0 { border-right-width: 0 !important; }
.t-br-1 { border-right-width: 1px !important; }
.t-br-2 { border-right-width: 2px !important; }
.t-bb-0 { border-bottom-width: 0 !important; }
.t-bb-1 { border-bottom-width: 1px !important; }
.t-bb-2 { border-bottom-width: 2px !important; }
.t-bl-0 { border-left-width: 0 !important; }
.t-bl-1 { border-left-width: 1px !important; }
.t-bl-2 { border-left-width: 2px !important; }

.t-bc-p { border-color: var(--t-primary) !important; }
.t-bc-s { border-color: var(--t-success) !important; }
.t-bc-w { border-color: var(--t-warning) !important; }
.t-bc-d { border-color: var(--t-danger) !important; }
.t-bc-i { border-color: var(--t-info) !important; }

/* ----- 圆角 Border Radius ----- */
.t-rounded-0 { border-radius: 0 !important; }
.t-rounded-sm { border-radius: var(--t-radius-sm) !important; }
.t-rounded { border-radius: var(--t-radius) !important; }
.t-rounded-lg { border-radius: var(--t-radius-lg) !important; }
.t-rounded-xl { border-radius: var(--t-radius-xl) !important; }
.t-rounded-50 { border-radius: 50% !important; }
.t-rounded-full { border-radius: 9999px !important; }

/* ----- 阴影 Box Shadow ----- */
.t-shadow-n { box-shadow: none !important; }
.t-shadow-sm { box-shadow: var(--t-shadow-sm) !important; }
.t-shadow { box-shadow: var(--t-shadow) !important; }
.t-shadow-lg { box-shadow: var(--t-shadow-lg) !important; }
.t-shadow-xl { box-shadow: var(--t-shadow-xl) !important; }

/* ----- 透明度 Opacity ----- */
.t-opacity-0 { opacity: 0 !important; }
.t-opacity-25 { opacity: 0.25 !important; }
.t-opacity-50 { opacity: 0.5 !important; }
.t-opacity-75 { opacity: 0.75 !important; }
.t-opacity-100 { opacity: 1 !important; }

/* ----- 列表 List ----- */
.t-list-none { list-style: none !important; }
.t-list-disc { list-style: disc !important; }
.t-list-dec { list-style: decimal !important; }

/* ----- 光标 Cursor ----- */
.t-c-pointer { cursor: pointer !important; }
.t-c-default { cursor: default !important; }
.t-c-not-allowed { cursor: not-allowed !important; }
.t-c-grab { cursor: grab !important; }
.t-c-grabbing { cursor: grabbing !important; }
.t-c-move { cursor: move !important; }
.t-c-text { cursor: text !important; }
.t-c-wait { cursor: wait !important; }
.t-c-help { cursor: help !important; }

/* ----- 指针事件 Pointer Events ----- */
.t-pe-n { pointer-events: none !important; }
.t-pe-a { pointer-events: auto !important; }

/* ----- 用户选择 User Select ----- */
.t-select-n { user-select: none !important; }
.t-select-a { user-select: all !important; }
.t-select-text { user-select: text !important; }

/* ----- 垂直对齐 Vertical Align ----- */
.t-va-t { vertical-align: top !important; }
.t-va-m { vertical-align: middle !important; }
.t-va-b { vertical-align: bottom !important; }
.t-va-bl { vertical-align: baseline !important; }
.t-va-tt { vertical-align: text-top !important; }
.t-va-tb { vertical-align: text-bottom !important; }

/* ----- Z-Index ----- */
.t-z-0 { z-index: 0 !important; }
.t-z-1 { z-index: 1 !important; }
.t-z-10 { z-index: 10 !important; }
.t-z-50 { z-index: 50 !important; }
.t-z-100 { z-index: 100 !important; }
.t-z-auto { z-index: auto !important; }
.t-z-dropdown { z-index: 1000 !important; }
.t-z-sticky { z-index: 1024 !important; }
.t-z-modal { z-index: 2000 !important; }
.t-z-tooltip { z-index: 3000 !important; }

/* ----- 旧版兼容类 ----- */
.t-text-primary { color: var(--t-primary) !important; }
.t-text-success { color: var(--t-success) !important; }
.t-text-warning { color: var(--t-warning) !important; }
.t-text-danger { color: var(--t-danger) !important; }
.t-mb-sm { margin-bottom: 8px !important; }
.t-mb { margin-bottom: 16px !important; }
.t-mb-lg { margin-bottom: 24px !important; }
.t-p-sm { padding: 8px !important; }
.t-p { padding: 16px !important; }
.t-p-lg { padding: 24px !important; }

/* ==================== Calendar 日历组件 ==================== */

/**
 * Calendar 日历
 * 使用: class="t-calendar"
 * 说明: 用于展示月历视图，支持日期选择、范围选择等
 */
.t-calendar {
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow);
    padding: 20px;
    width: 100%;
    max-width: 400px;
}

/**
 * 日历头部
 */
.t-calendar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--t-shadow-light);
}

.t-calendar__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--t-text-primary);
}

.t-calendar__nav {
    display: flex;
    gap: 8px;
}

.t-calendar__btn {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: var(--t-shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--t-text-regular);
    transition: all 0.2s ease;
}

.t-calendar__btn:hover {
    box-shadow: var(--t-shadow);
    color: var(--t-primary);
}

.t-calendar__btn:active {
    box-shadow: var(--t-inset-sm);
}

.t-calendar__btn-today {
    padding: 0 16px;
    width: auto;
    border-radius: var(--t-radius-sm);
    font-size: 13px;
}

/**
 * 星期标题行
 */
.t-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 12px;
}

.t-calendar__weekday {
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: var(--t-text-secondary);
    padding: 8px 0;
}

.t-calendar__weekday.is-weekend {
    color: var(--t-danger);
}

/**
 * 日期网格
 */
.t-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/**
 * 日期单元格
 */
.t-calendar__day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--t-text-regular);
    border-radius: var(--t-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    min-height: 44px;
}

.t-calendar__day:hover:not(.is-disabled):not(.is-selected) {
    box-shadow: var(--t-shadow);
    color: var(--t-primary);
}

.t-calendar__day-number {
    font-weight: 500;
}

.t-calendar__day-lunar {
    font-size: 10px;
    color: var(--t-text-secondary);
    margin-top: 2px;
}

/**
 * 日期状态
 */
.t-calendar__day.is-today {
    color: var(--t-primary);
    font-weight: 700;
}

.t-calendar__day.is-today::after {
    content: '';
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    background: var(--t-primary);
    border-radius: 50%;
}

.t-calendar__day.is-selected {
    background: var(--t-primary);
    color: var(--t-white);
    box-shadow: var(--t-shadow-sm);
}

.t-calendar__day.is-selected .t-calendar__day-lunar {
    color: rgba(255, 255, 255, 0.8);
}

.t-calendar__day.is-other-month {
    color: var(--t-text-placeholder);
}

.t-calendar__day.is-other-month .t-calendar__day-lunar {
    color: var(--t-text-placeholder);
}

.t-calendar__day.is-disabled {
    color: var(--t-text-placeholder);
    cursor: not-allowed;
}

.t-calendar__day.is-weekend {
    color: var(--t-danger);
}

.t-calendar__day.is-weekend.is-selected {
    color: var(--t-white);
}

/**
 * 日期标记
 */
.t-calendar__day-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-danger);
}

.t-calendar__day.is-selected .t-calendar__day-dot {
    background: var(--t-white);
}

/**
 * 日期范围选择
 */
.t-calendar__day.is-range-start,
.t-calendar__day.is-range-end {
    background: var(--t-primary);
    color: var(--t-white);
    box-shadow: var(--t-shadow-sm);
}

.t-calendar__day.is-range-start::before,
.t-calendar__day.is-range-end::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background: rgba(64, 158, 255, 0.1);
    z-index: -1;
}

.t-calendar__day.is-range-start::before {
    right: 0;
}

.t-calendar__day.is-range-end::before {
    left: 0;
}

.t-calendar__day.is-in-range {
    background: rgba(64, 158, 255, 0.1);
    border-radius: 0;
}

/**
 * 日历页脚
 */
.t-calendar__footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--t-shadow-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--t-text-secondary);
}

/**
 * 大日历模式
 */
.t-calendar--large {
    max-width: 600px;
    padding: 30px;
}

.t-calendar--large .t-calendar__title {
    font-size: 22px;
}

.t-calendar--large .t-calendar__day {
    min-height: 60px;
    font-size: 16px;
}

.t-calendar--large .t-calendar__day-lunar {
    font-size: 12px;
}

/**
 * 小日历模式
 */
.t-calendar--small {
    max-width: 280px;
    padding: 12px;
}

.t-calendar--small .t-calendar__title {
    font-size: 14px;
}

.t-calendar--small .t-calendar__day {
    min-height: 32px;
    font-size: 12px;
}

.t-calendar--small .t-calendar__weekday {
    font-size: 11px;
    padding: 4px 0;
}

/**
 * 卡片式日历
 */
.t-calendar-card {
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}

.t-calendar-card__header {
    padding: 20px;
    background: var(--t-primary);
    color: var(--t-white);
    text-align: center;
}

.t-calendar-card__year {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 4px;
}

.t-calendar-card__date {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
}

.t-calendar-card__weekday {
    font-size: 16px;
    margin-top: 8px;
    opacity: 0.9;
}

.t-calendar-card__body {
    padding: 20px;
}

/* ==================== Backtop 回到顶部 ==================== */

/**
 * Backtop 回到顶部
 * 使用: class="t-backtop"
 * 说明: 返回页面顶部的按钮，固定在页面右下角
 */
.t-backtop {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 48px;
    height: 48px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: var(--t-shadow);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--t-text-regular);
    transition: all 0.3s ease;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.t-backtop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.t-backtop:hover {
    box-shadow: var(--t-shadow-lg);
    color: var(--t-primary);
    transform: translateY(-4px);
}

.t-backtop:active {
    box-shadow: var(--t-inset);
    transform: translateY(0);
}

/**
 * Backtop 尺寸变体
 */
.t-backtop--small {
    width: 40px;
    height: 40px;
    font-size: 16px;
    right: 30px;
    bottom: 30px;
}

.t-backtop--large {
    width: 56px;
    height: 56px;
    font-size: 24px;
    right: 50px;
    bottom: 50px;
}

/**
 * Backtop 位置变体
 */
.t-backtop--left {
    right: auto;
    left: 40px;
}

.t-backtop--left.t-backtop--small {
    left: 30px;
}

.t-backtop--left.t-backtop--large {
    left: 50px;
}

/**
 * Backtop 主题色
 */
.t-backtop--primary {
    background: var(--t-primary);
    color: var(--t-white);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.t-backtop--primary:hover {
    background: var(--t-primary-light);
    box-shadow: 0 6px 16px rgba(64, 158, 255, 0.5);
}

.t-backtop--success {
    background: var(--t-success);
    color: var(--t-white);
    box-shadow: 0 4px 12px rgba(103, 194, 58, 0.4);
}

.t-backtop--success:hover {
    background: var(--t-success-light);
    box-shadow: 0 6px 16px rgba(103, 194, 58, 0.5);
}

.t-backtop--warning {
    background: var(--t-warning);
    color: var(--t-white);
    box-shadow: 0 4px 12px rgba(230, 162, 60, 0.4);
}

.t-backtop--warning:hover {
    background: var(--t-warning-light);
    box-shadow: 0 6px 16px rgba(230, 162, 60, 0.5);
}

.t-backtop--danger {
    background: var(--t-danger);
    color: var(--t-white);
    box-shadow: 0 4px 12px rgba(245, 108, 108, 0.4);
}

.t-backtop--danger:hover {
    background: var(--t-danger-light);
    box-shadow: 0 6px 16px rgba(245, 108, 108, 0.5);
}

/**
 * Backtop 带文字
 */
.t-backtop--text {
    width: auto;
    padding: 0 20px;
    border-radius: 24px;
    font-size: 14px;
    gap: 6px;
}

.t-backtop--text .t-backtop__icon {
    font-size: 16px;
}

/**
 * Backtop 容器（用于演示）
 */
.t-backtop-demo {
    position: relative;
    height: 200px;
    overflow: auto;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-inset);
    padding: 20px;
}

.t-backtop-demo__content {
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/**
 * 容器内 Backtop - 使用 sticky 定位保持在视口内
 */
.t-backtop-demo .t-backtop {
    position: sticky;
    float: right;
    right: 20px;
    bottom: 20px;
    margin-top: -48px;
    margin-right: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* ==================== InfiniteScroll 无限滚动 ==================== */

/**
 * InfiniteScroll 无限滚动
 * 使用: class="t-infinite-scroll" 包裹可滚动容器
 * 说明: 滚动到底部时自动加载更多内容
 */
.t-infinite-scroll {
    position: relative;
    overflow: auto;
    height: 100%;
}

.t-infinite-scroll__content {
    min-height: 100%;
}

/**
 * 加载状态提示
 */
.t-infinite-scroll__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 10px;
    color: var(--t-text-secondary);
    font-size: 14px;
}

.t-infinite-scroll__loading-icon {
    width: 20px;
    height: 20px;
    border: 2px solid var(--t-shadow-light);
    border-top-color: var(--t-primary);
    border-radius: 50%;
    animation: t-infinite-spin 1s linear infinite;
}

@keyframes t-infinite-spin {
    to {
        transform: rotate(360deg);
    }
}

/**
 * 加载完成提示
 */
.t-infinite-scroll__finished {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: var(--t-text-placeholder);
    font-size: 14px;
    text-align: center;
}

.t-infinite-scroll__finished::before,
.t-infinite-scroll__finished::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--t-shadow-light);
    margin: 0 16px;
    max-width: 80px;
}

/**
 * 加载失败提示
 */
.t-infinite-scroll__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    gap: 10px;
    color: var(--t-danger);
    font-size: 14px;
    text-align: center;
}

.t-infinite-scroll__error-text {
    color: var(--t-text-secondary);
}

.t-infinite-scroll__retry-btn {
    padding: 6px 16px;
    border: none;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    color: var(--t-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.t-infinite-scroll__retry-btn:hover {
    box-shadow: var(--t-shadow);
    color: var(--t-primary-light);
}

.t-infinite-scroll__retry-btn:active {
    box-shadow: var(--t-inset-sm);
}

/**
 * 无数据提示
 */
.t-infinite-scroll__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 12px;
    color: var(--t-text-placeholder);
    text-align: center;
}

.t-infinite-scroll__empty-icon {
    font-size: 48px;
    opacity: 0.5;
}

.t-infinite-scroll__empty-text {
    font-size: 14px;
}

/**
 * 触发加载的阈值提示（可选）
 */
.t-infinite-scroll__threshold {
    position: absolute;
    bottom: 100px;
    left: 0;
    right: 0;
    height: 1px;
    pointer-events: none;
    opacity: 0;
}

/**
 * 禁用状态
 */
.t-infinite-scroll.is-disabled {
    overflow: hidden;
}

.t-infinite-scroll.is-disabled .t-infinite-scroll__loading,
.t-infinite-scroll.is-disabled .t-infinite-scroll__finished,
.t-infinite-scroll.is-disabled .t-infinite-scroll__error {
    display: none;
}

/**
 * 方向：向上滚动加载（反向无限滚动）
 */
.t-infinite-scroll--reverse {
    display: flex;
    flex-direction: column-reverse;
}

.t-infinite-scroll--reverse .t-infinite-scroll__loading,
.t-infinite-scroll--reverse .t-infinite-scroll__finished,
.t-infinite-scroll--reverse .t-infinite-scroll__error {
    order: -1;
}

/**
 * 水平滚动模式
 */
.t-infinite-scroll--horizontal {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.t-infinite-scroll--horizontal .t-infinite-scroll__content {
    display: inline-flex;
    min-width: 100%;
    min-height: auto;
}

.t-infinite-scroll--horizontal .t-infinite-scroll__loading,
.t-infinite-scroll--horizontal .t-infinite-scroll__finished,
.t-infinite-scroll--horizontal .t-infinite-scroll__error {
    display: inline-flex;
    padding: 0 20px;
    white-space: nowrap;
}

/**
 * 列表项样式（配合无限滚动使用）
 */
.t-infinite-scroll__item {
    padding: 16px 20px;
    border-bottom: 1px solid var(--t-shadow-light);
    transition: background-color 0.2s ease;
}

.t-infinite-scroll__item:last-child {
    border-bottom: none;
}

.t-infinite-scroll__item:hover {
    background: rgba(0, 0, 0, 0.02);
}

.t-infinite-scroll__item-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--t-text-primary);
    margin-bottom: 6px;
}

.t-infinite-scroll__item-desc {
    font-size: 13px;
    color: var(--t-text-secondary);
    line-height: 1.5;
}

.t-infinite-scroll__item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--t-text-placeholder);
}

/**
 * 卡片式列表项
 */
.t-infinite-scroll__item--card {
    margin: 12px;
    padding: 16px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    border-bottom: none;
}

.t-infinite-scroll__item--card:hover {
    box-shadow: var(--t-shadow);
    background: var(--t-bg);
}

/**
 * 演示容器
 */
.t-infinite-scroll-demo {
    height: 300px;
    overflow: auto;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-inset);
}

/* ==================== 主题覆盖工具类 ==================== */

/**
 * 背景色覆盖类
 * 使用这些类可以快速覆盖元素的背景色，同时保持硅胶质感效果
 */

/* 深色主题 */
.t-theme-dark {
    --t-bg: #2d2d2d;
    --t-shadow-dark: #1a1a1a;
    --t-shadow-light: #404040;
    --t-text-primary: #ffffff;
    --t-text-regular: #e0e0e0;
    --t-text-secondary: #a0a0a0;
    --t-text-placeholder: #707070;
}

/* 暖色主题 */
.t-theme-warm {
    --t-bg: #f5f0e8;
    --t-shadow-dark: #d4cfc7;
    --t-shadow-light: #ffffff;
}

/* 冷色主题 */
.t-theme-cool {
    --t-bg: #e8f0f5;
    --t-shadow-dark: #c7d4dc;
    --t-shadow-light: #ffffff;
}

/* 粉色主题 */
.t-theme-pink {
    --t-bg: #f5e8f0;
    --t-shadow-dark: #dcc7d4;
    --t-shadow-light: #ffffff;
    --t-primary: #ff69b4;
}

/* 绿色主题 */
.t-theme-green {
    --t-bg: #e8f5e8;
    --t-shadow-dark: #c7dcc7;
    --t-shadow-light: #ffffff;
    --t-primary: #52c41a;
}

/* 紫色主题 */
.t-theme-purple {
    --t-bg: #f0e8f5;
    --t-shadow-dark: #d4c7dc;
    --t-shadow-light: #ffffff;
    --t-primary: #722ed1;
}

/* 强制背景色类 - 用于单个元素 */
.t-bg-light { background-color: var(--t-bg-light) !important; }
.t-bg-dark { background-color: var(--t-bg-dark) !important; }
.t-bg-warm { background-color: var(--t-bg-warm) !important; }
.t-bg-cool { background-color: var(--t-bg-cool) !important; }
/* .t-bg-pink { background-color: #f5e8f0 !important; } */
/* .t-bg-green { background-color: #e8f5e8 !important; } */
/* .t-bg-purple { background-color: #f0e8f5 !important; } */

/* ==================== 使用说明 ==================== */

/*
 * 方法1: 通过覆盖 :root 变量自定义整个页面主题
 * 
 * 在你的 CSS 中（必须在引入 tingui.css 之后）：
 * 
 * :root {
 *   --t-bg: #f0f0f3;
 *   --t-shadow-dark: #c0c0c3;
 *   --t-shadow-light: #ffffff;
 *   --t-primary: #ff6b6b;
 *   --t-success: #51cf66;
 *   --t-warning: #ffd43b;
 *   --t-danger: #ff6b6b;
 *   --t-radius: 16px;
 * }
 */

/*
 * 方法2: 使用预设主题类
 * 
 * 给 body 或容器添加主题类：
 * <body class="t-body t-theme-dark">
 * 或
 * <div class="t-theme-pink">
 *   <!-- 这个容器内的所有组件都会使用粉色主题 -->
 * </div>
 */

/*
 * 方法3: 单个元素覆盖背景色
 * 
 * <div class="t-card t-bg-dark">
 *   <!-- 这个卡片使用深色背景 -->
 * </div>
 */

/*
 * 阴影颜色计算公式：
 * --t-shadow-dark = 背景色亮度降低 20-25%
 * --t-shadow-light = 背景色亮度提高 10-15%
 * 
 */

/* ==================== 响应式断点变量 ==================== */
/* 注意：断点变量已在文件开头定义，此处保留注释作为参考 */
/*
 * 断点定义（与 Bootstrap 5 对齐）：
 * --t-breakpoint-xs: 0
 * --t-breakpoint-sm: 576px
 * --t-breakpoint-md: 768px
 * --t-breakpoint-lg: 992px
 * --t-breakpoint-xl: 1200px
 * --t-breakpoint-xxl: 1400px
 * 
 * 如需增强响应式功能，请引入 tingui-responsive.css
 */

/* ==================== Dialog 对话框 ==================== */

.t-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-dialog-overlay.active {
    opacity: 1;
    visibility: visible;
}

.t-dialog {
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    min-width: 420px;
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.9) translateY(-20px);
    transition: all 0.3s ease;
}

.t-dialog-overlay.active .t-dialog {
    transform: scale(1) translateY(0);
}

.t-dialog-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.t-dialog-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--t-text-primary);
    margin: 0;
}

.t-dialog-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--t-text-secondary);
    box-shadow: var(--t-inset-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-dialog-close:hover {
    box-shadow: var(--t-inset);
    color: var(--t-danger);
}

.t-dialog-close:active {
    box-shadow: var(--t-inset-lg);
}

.t-dialog-body {
    padding: 24px;
    color: var(--t-text-regular);
    font-size: 14px;
    line-height: 1.6;
}

.t-dialog-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ==================== Tooltip 文字提示 ==================== */

.t-tooltip {
    position: relative;
    display: inline-block;
}

.t-tooltip-content {
    position: absolute;
    background: var(--t-bg);
    padding: 8px 12px;
    border-radius: var(--t-radius-sm);
    font-size: 12px;
    color: var(--t-text-regular);
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: var(--t-shadow-lg);
}

.t-tooltip:hover .t-tooltip-content {
    opacity: 1;
    visibility: visible;
}

.t-tooltip-top .t-tooltip-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
}

.t-tooltip-top:hover .t-tooltip-content {
    transform: translateX(-50%) translateY(-4px);
}

.t-tooltip-bottom .t-tooltip-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
}

.t-tooltip-bottom:hover .t-tooltip-content {
    transform: translateX(-50%) translateY(4px);
}

.t-tooltip-left .t-tooltip-content {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-8px);
}

.t-tooltip-left:hover .t-tooltip-content {
    transform: translateY(-50%) translateX(-4px);
}

.t-tooltip-right .t-tooltip-content {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
}

.t-tooltip-right:hover .t-tooltip-content {
    transform: translateY(-50%) translateX(4px);
}

/* Tooltip 箭头 */
.t-tooltip-content::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

.t-tooltip-top .t-tooltip-content::before {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--t-bg);
}

.t-tooltip-bottom .t-tooltip-content::before {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--t-bg);
}

.t-tooltip-left .t-tooltip-content::before {
    right: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--t-bg);
}

.t-tooltip-right .t-tooltip-content::before {
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--t-bg);
}

/* ==================== Tabs 标签页 ==================== */

.t-tabs {
    display: flex;
    flex-direction: column;
}

/* 标签头部 */
.t-tabs__header {
    margin-bottom: 15px;
}

.t-tabs__nav-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.t-tabs__nav {
    display: flex;
    gap: 5px;
    position: relative;
    flex: 1;
}

/* 标签项 */
.t-tabs__item {
    padding: 10px 20px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: var(--t-radius);
    position: relative;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.t-tabs__item:hover {
    color: var(--t-primary);
    box-shadow: var(--t-shadow-sm);
}

.t-tabs__item.is-active {
    color: var(--t-primary);
    box-shadow: var(--t-inset);
    background: rgba(64, 158, 255, 0.05);
}

.t-tabs__item.is-disabled {
    color: var(--t-disabled-color);
    cursor: not-allowed;
    pointer-events: none;
}

/* 关闭按钮 */
.t-tabs__close {
    margin-left: 8px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 14px;
    transition: all 0.3s ease;
}

.t-tabs__close:hover {
    background: rgba(245, 108, 108, 0.1);
    color: var(--t-danger);
}

/* 添加按钮 */
.t-tabs__add {
    padding: 8px 16px;
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    color: var(--t-text-regular);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.t-tabs__add:hover {
    box-shadow: var(--t-shadow);
    color: var(--t-primary);
}

.t-tabs__add:active {
    box-shadow: var(--t-inset);
}

/* 图标 */
.t-tabs__icon {
    font-size: 14px;
}

/* 内容区域 */
.t-tabs__content {
    flex: 1;
    padding: 20px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-inset-sm);
}

.t-tabs__pane {
    display: none;
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.6;
}

.t-tabs__pane.is-active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 卡片样式 */
.t-tabs--card .t-tabs__nav {
    gap: 0;
}

.t-tabs--card .t-tabs__item {
    border-radius: var(--t-radius) var(--t-radius) 0 0;
    /* box-shadow: var(--t-shadow-sm); */
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

.t-tabs--card .t-tabs__item.is-active {
    box-shadow: var(--t-inset);
    background: var(--t-bg);
    z-index: 2;
}

.t-tabs--card .t-tabs__content {
    border-radius: 0 var(--t-radius) var(--t-radius) var(--t-radius);
    box-shadow: var(--t-inset-sm);
}
.t-tabs--card .t-tabs__header{
margin-bottom: 0px;
}

/* 边框卡片样式 */
.t-tabs--border-card {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    padding: 15px;
}

.t-tabs--border-card .t-tabs__header {
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--t-radius-sm);
    padding: 10px;
    margin-bottom: 15px;
}

.t-tabs--border-card .t-tabs__item {
    box-shadow: none;
}

.t-tabs--border-card .t-tabs__item.is-active {
    box-shadow: var(--t-inset);
    background: var(--t-bg);
}

.t-tabs--border-card .t-tabs__content {
    box-shadow: none;
    background: transparent;
    padding: 10px;
}

/* 图像标签页 */
.t-tabs--image .t-tabs__item {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
}

.t-tabs--image .t-tabs__image {
    width: 60px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: var(--t-shadow-sm);
    transition: all 0.3s ease;
}

.t-tabs--image .t-tabs__item:hover .t-tabs__image {
    box-shadow: var(--t-shadow);
    transform: scale(1.05);
}

.t-tabs--image .t-tabs__item.is-active .t-tabs__image {
    box-shadow: var(--t-inset);
    transform: scale(1);
}

/* 卡片式标签页 */
.t-tabs--card-grid .t-tabs__nav--grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    padding: 10px;
}

.t-tabs--card-grid .t-tabs__item--card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 12px 10px;
    gap: 6px;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    border-radius: var(--t-radius);
    transition: all 0.3s ease;
    min-width: 0;
}

.t-tabs--card-grid .t-tabs__item--card:hover {
    box-shadow: var(--t-shadow);
    transform: translateY(-2px);
}

.t-tabs--card-grid .t-tabs__item--card.is-active {
    box-shadow: var(--t-inset);
    background: rgba(64, 158, 255, 0.05);
    transform: translateY(0);
}

.t-tabs--card-grid .t-tabs__card-icon {
    font-size: 24px;
    line-height: 1;
}

.t-tabs--card-grid .t-tabs__card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.t-tabs--card-grid .t-tabs__card-desc {
    font-size: 11px;
    color: var(--t-text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* 可关闭标签页 */
.t-tabs--closable .t-tabs__item {
    justify-content: space-between;
}

.t-tabs--closable .t-tabs__close {
    margin-left: auto;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-tabs--closable .t-tabs__item:hover .t-tabs__close {
    opacity: 1;
}

/* 左侧位置 */
.t-tabs--left {
    flex-direction: row;
}

.t-tabs--left .t-tabs__header {
    width: 120px;
    margin-bottom: 0;
    margin-right: 15px;
}

.t-tabs--left .t-tabs__nav {
    flex-direction: column;
    gap: 5px;
}

.t-tabs--left .t-tabs__item {
    text-align: center;
    justify-content: center;
}

.t-tabs--left .t-tabs__content {
    flex: 1;
}

/* 右侧位置 */
.t-tabs--right {
    flex-direction: row-reverse;
}

.t-tabs--right .t-tabs__header {
    width: 120px;
    margin-bottom: 0;
    margin-left: 15px;
}

.t-tabs--right .t-tabs__nav {
    flex-direction: column;
    gap: 5px;
}

.t-tabs--right .t-tabs__item {
    text-align: center;
    justify-content: center;
}

.t-tabs--right .t-tabs__content {
    flex: 1;
}

/* 底部位置 */
.t-tabs--bottom {
    flex-direction: column-reverse;
}

.t-tabs--bottom .t-tabs__header {
    margin-bottom: 0;
    margin-top: 15px;
}

/* ==================== Popover 弹出框 ==================== */

.t-popover {
    position: relative;
    display: inline-block;
}

.t-popover-content {
    position: absolute;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 16px;
    min-width: 200px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-popover.active .t-popover-content {
    opacity: 1;
    visibility: visible;
}

.t-popover-top .t-popover-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
}

.t-popover-top.active .t-popover-content {
    transform: translateX(-50%) translateY(-8px);
}

.t-popover-bottom .t-popover-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
}

.t-popover-bottom.active .t-popover-content {
    transform: translateX(-50%) translateY(8px);
}

.t-popover-left .t-popover-content {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-12px);
}

.t-popover-left.active .t-popover-content {
    transform: translateY(-50%) translateX(-8px);
}

.t-popover-right .t-popover-content {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(12px);
}

.t-popover-right.active .t-popover-content {
    transform: translateY(-50%) translateX(8px);
}

.t-popover-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--t-text-primary);
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.t-popover-body {
    font-size: 14px;
    color: var(--t-text-regular);
}

/* Popover 箭头 */
.t-popover-content::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

.t-popover-top .t-popover-content::before {
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--t-bg);
}

.t-popover-bottom .t-popover-content::before {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--t-bg);
}

.t-popover-left .t-popover-content::before {
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--t-bg);
}

.t-popover-right .t-popover-content::before {
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--t-bg);
}

/* Popover Hover 触发 */
.t-popover--hover .t-popover-content {
    pointer-events: none;
}

.t-popover--hover.active .t-popover-content {
    pointer-events: auto;
}

/* Popover 禁用状态 */
.t-popover.is-disabled {
    pointer-events: none;
    opacity: 0.6;
}

.t-popover.is-disabled .t-btn {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Popover 小按钮 */
.t-popover .t-btn--small {
    padding: 6px 12px;
    font-size: 12px;
}

/* Popconfirm 样式 */
.t-popover--confirm .t-popover-content {
    min-width: 200px;
}

.t-popover--confirm .t-popover-body {
    font-size: 14px;
}

/* 硅胶质感弹出框 */
.t-popover--tingui .t-popover-content {
    box-shadow:
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light),
        0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* 不同尺寸 */
.t-popover-content.t-popover--small {
    min-width: 120px;
    padding: 12px;
}

.t-popover-content.t-popover--small .t-popover-body {
    font-size: 12px;
}

.t-popover-content.t-popover--large {
    min-width: 320px;
    padding: 20px;
}

.t-popover-content.t-popover--large .t-popover-title {
    font-size: 18px;
}

.t-popover-content.t-popover--large .t-popover-body {
    font-size: 14px;
    line-height: 1.8;
}

/* Focus 触发 */
.t-popover--focus .t-popover-content {
    transition: all 0.2s ease;
}

/* 延迟关闭 */
.t-popover--delay .t-popover-content {
    transition-delay: 0.3s;
}

.t-popover--delay.active .t-popover-content {
    transition-delay: 0s;
}

/* 动画效果增强 */
.t-popover-content {
    transform-origin: center bottom;
}

.t-popover-top .t-popover-content {
    transform-origin: center bottom;
}

.t-popover-bottom .t-popover-content {
    transform-origin: center top;
}

.t-popover-left .t-popover-content {
    transform-origin: right center;
}

.t-popover-right .t-popover-content {
    transform-origin: left center;
}

/* 缩放动画 */
.t-popover-top .t-popover-content {
    transform: translateX(-50%) translateY(-12px) scale(0.9);
}

.t-popover-top.active .t-popover-content {
    transform: translateX(-50%) translateY(-8px) scale(1);
}

.t-popover-bottom .t-popover-content {
    transform: translateX(-50%) translateY(12px) scale(0.9);
}

.t-popover-bottom.active .t-popover-content {
    transform: translateX(-50%) translateY(8px) scale(1);
}

.t-popover-left .t-popover-content {
    transform: translateY(-50%) translateX(-12px) scale(0.9);
}

.t-popover-left.active .t-popover-content {
    transform: translateY(-50%) translateX(-8px) scale(1);
}

.t-popover-right .t-popover-content {
    transform: translateY(-50%) translateX(12px) scale(0.9);
}

.t-popover-right.active .t-popover-content {
    transform: translateY(-50%) translateX(8px) scale(1);
}

/* ==================== Popconfirm 气泡确认框 ==================== */

.t-popconfirm {
    position: relative;
    display: inline-block;
}

.t-popconfirm-content {
    position: absolute;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-xl);
    padding: 16px;
    min-width: 240px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-popconfirm.active .t-popconfirm-content {
    opacity: 1;
    visibility: visible;
}

.t-popconfirm-top .t-popconfirm-content {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
}

.t-popconfirm-top.active .t-popconfirm-content {
    transform: translateX(-50%) translateY(-8px);
}

.t-popconfirm-bottom .t-popconfirm-content {
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
}

.t-popconfirm-bottom.active .t-popconfirm-content {
    transform: translateX(-50%) translateY(8px);
}

.t-popconfirm-left .t-popconfirm-content {
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-12px);
}

.t-popconfirm-left.active .t-popconfirm-content {
    transform: translateY(-50%) translateX(-8px);
}

.t-popconfirm-right .t-popconfirm-content {
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(12px);
}

.t-popconfirm-right.active .t-popconfirm-content {
    transform: translateY(-50%) translateX(8px);
}

.t-popconfirm-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--t-text-regular);
}

.t-popconfirm-icon {
    font-size: 20px;
    color: var(--t-warning);
    flex-shrink: 0;
}

.t-popconfirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* Popconfirm 箭头 */
.t-popconfirm-content::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 8px solid transparent;
}

.t-popconfirm-top .t-popconfirm-content::before {
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--t-bg);
}

.t-popconfirm-bottom .t-popconfirm-content::before {
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--t-bg);
}

.t-popconfirm-left .t-popconfirm-content::before {
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--t-bg);
}

.t-popconfirm-right .t-popconfirm-content::before {
    left: -16px;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--t-bg);
}

/* ==================== Collapse 手风琴 ==================== */

.t-collapse {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: 
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light);
    overflow: hidden;
}

.t-collapse-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.t-collapse-item:last-child {
    border-bottom: none;
}

.t-collapse-item:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 禁用状态 */
.t-collapse-item--disabled {
    opacity: 0.5;
    pointer-events: none;
}

.t-collapse-item--disabled .t-collapse-header {
    cursor: not-allowed;
}

/* 头部样式 */
.t-collapse-header {
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    background: var(--t-bg);
}

.t-collapse-header:hover {
    box-shadow: 
        inset 3px 3px 6px var(--t-shadow-dark),
        inset -3px -3px 6px var(--t-shadow-light);
}

.t-collapse-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.t-collapse-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    border-radius: 8px;
    box-shadow: 
        3px 3px 6px var(--t-shadow-dark),
        -3px -3px 6px var(--t-shadow-light);
}

.t-collapse-header-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.t-collapse-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--t-text-primary);
}

.t-collapse-subtitle {
    font-size: 12px;
    color: var(--t-text-secondary);
}

.t-collapse-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--t-text-secondary);
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: 
        3px 3px 6px var(--t-shadow-dark),
        -3px -3px 6px var(--t-shadow-light);
    transition: all 0.3s ease;
}

.t-collapse-item.active .t-collapse-arrow {
    transform: rotate(90deg);
    background: linear-gradient(145deg, var(--t-primary), var(--t-primary-light));
    color: var(--t-white);
    box-shadow: 
        3px 3px 8px rgba(64, 158, 255, 0.4),
        -3px -3px 8px var(--t-white-rgba-80);
}

/* 内容区域 */
.t-collapse-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(0, 0, 0, 0.02);
}

.t-collapse-item.active .t-collapse-content {
    max-height: 600px;
}

.t-collapse-body {
    padding: 20px 24px;
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.7;
}

/* 内部容器 */
.t-collapse-inner {
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    padding: 16px;
    box-shadow: 
        inset 4px 4px 8px var(--t-shadow-dark),
        inset -4px -4px 8px var(--t-shadow-light);
}

/* 卡片样式 */
.t-collapse--card {
    background: transparent;
    box-shadow: none;
}

.t-collapse--card .t-collapse-item {
    margin-bottom: 16px;
    border-bottom: none;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: 
        6px 6px 12px var(--t-shadow-dark),
        -6px -6px 12px var(--t-shadow-light);
    overflow: hidden;
}

.t-collapse--card .t-collapse-item:hover {
    box-shadow: 
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light);
}

.t-collapse--card .t-collapse-item.active {
    box-shadow: 
        10px 10px 20px var(--t-shadow-dark),
        -10px -10px 20px var(--t-shadow-light);
}

.t-collapse--card .t-collapse-body {
    background: rgba(0, 0, 0, 0.02);
}

/* 简洁模式 */
.t-collapse--simple {
    background: transparent;
    box-shadow: none;
}

.t-collapse--simple .t-collapse-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.t-collapse--simple .t-collapse-header {
    padding: 14px 0;
    background: transparent;
}

.t-collapse--simple .t-collapse-header:hover {
    box-shadow: none;
    background: rgba(0, 0, 0, 0.02);
}

.t-collapse--simple .t-collapse-body {
    padding: 0 0 16px 0;
}

.t-collapse--simple .t-collapse-arrow {
    box-shadow: none;
    background: transparent;
    width: auto;
    height: auto;
}

.t-collapse--simple .t-collapse-item.active .t-collapse-arrow {
    background: transparent;
    color: var(--t-primary);
    box-shadow: none;
}

/* 嵌套样式 */
.t-collapse--nested {
    box-shadow: none;
    background: transparent;
}

.t-collapse--nested .t-collapse-item {
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.t-collapse--nested .t-collapse-header {
    padding: 12px 16px;
}

.t-collapse--nested .t-collapse-body {
    padding: 12px 16px 16px;
}

/* 列表样式（用于卡片内） */
.t-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.t-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    box-shadow: 
        3px 3px 6px var(--t-shadow-dark),
        -3px -3px 6px var(--t-shadow-light);
    transition: all 0.3s ease;
    cursor: pointer;
}

.t-list-item:hover {
    box-shadow: 
        5px 5px 10px var(--t-shadow-dark),
        -5px -5px 10px var(--t-shadow-light);
    transform: translateX(4px);
}

.t-list-icon {
    font-size: 18px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: 
        3px 3px 6px var(--t-shadow-dark),
        -3px -3px 6px var(--t-shadow-light);
}

.t-list-text {
    flex: 1;
    font-size: 14px;
    color: var(--t-text-regular);
}

/* ==================== Divider 分割线 ==================== */

/* ==================== Divider 分割线 ==================== */

.t-divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
    position: relative;
}

.t-divider::before,
.t-divider::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent 0%,
        var(--t-shadow-dark) 15%,
        var(--t-shadow-dark) 50%,
        var(--t-shadow-light) 85%,
        transparent 100%
    );
    border-radius: 1px;
}

/* 硅胶质感分割线 */
.t-divider--tingui {
    height: 4px;
    background: var(--t-bg);
    border-radius: 2px;
    box-shadow: 
        inset 2px 2px 4px var(--t-shadow-dark),
        inset -2px -2px 4px var(--t-shadow-light);
}

.t-divider--tingui::before,
.t-divider--tingui::after {
    display: none;
}

/* 文案内容 */
.t-divider-content {
    padding: 0 20px;
    font-size: 14px;
    color: var(--t-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

/* 标签样式文案 */
.t-divider-content--tag {
    padding: 6px 16px;
    background: var(--t-bg);
    border-radius: 20px;
    font-size: 12px;
    box-shadow: 
        3px 3px 6px var(--t-shadow-dark),
        -3px -3px 6px var(--t-shadow-light);
    color: var(--t-text-regular);
}

/* 带图标文案 */
.t-divider-content--icon {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    box-shadow: 
        4px 4px 8px var(--t-shadow-dark),
        -4px -4px 8px var(--t-shadow-light);
}

/* 文案位置对齐 */
.t-divider--left::before {
    flex: 0;
}

.t-divider--left::after {
    flex: 1;
}

.t-divider--right::before {
    flex: 1;
}

.t-divider--right::after {
    flex: 0;
}

/* 虚线分割线 */
.t-divider--dashed::before,
.t-divider--dashed::after {
    background: repeating-linear-gradient(
        to right,
        var(--t-shadow-dark) 0,
        var(--t-shadow-dark) 8px,
        transparent 8px,
        transparent 16px
    );
    height: 1px;
}

/* 点状分割线 */
.t-divider--dotted::before,
.t-divider--dotted::after {
    background: repeating-linear-gradient(
        to right,
        var(--t-shadow-dark) 0,
        var(--t-shadow-dark) 3px,
        transparent 3px,
        transparent 10px
    );
    height: 2px;
}

/* 双线分割线 */
.t-divider--double::before,
.t-divider--double::after {
    height: 4px;
    background: transparent;
    border-top: 1px solid var(--t-shadow-dark);
    border-bottom: 1px solid var(--t-shadow-light);
}

/* 不同粗细 */
.t-divider--thin::before,
.t-divider--thin::after {
    height: 1px;
}

.t-divider--thick::before,
.t-divider--thick::after {
    height: 4px;
    border-radius: 2px;
}

/* 垂直分割线 */
.t-divider-vertical {
    display: inline-flex;
    flex-direction: column;
    margin: 0 16px;
    height: 2em;
    vertical-align: middle;
}

.t-divider-vertical::before,
.t-divider-vertical::after {
    content: '';
    flex: 1;
    width: 2px;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        var(--t-shadow-dark) 15%,
        var(--t-shadow-dark) 50%,
        var(--t-shadow-light) 85%,
        transparent 100%
    );
    border-radius: 1px;
}

.t-divider-vertical .t-divider-content {
    padding: 12px 0;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.t-divider-vertical--thick::before,
.t-divider-vertical--thick::after {
    width: 4px;
}

/* 渐变分割线 - 主题色 */
.t-divider--gradient-primary::before,
.t-divider--gradient-primary::after {
    background: linear-gradient(
        to right,
        transparent,
        var(--t-primary) 20%,
        var(--t-primary) 80%,
        transparent
    );
    height: 3px;
    border-radius: 2px;
}

/* 彩虹渐变 */
.t-divider--gradient-rainbow::before,
.t-divider--gradient-rainbow::after {
    background: linear-gradient(
        to right,
        transparent,
        #ff6b6b 15%,
        #feca57 30%,
        #48dbfb 45%,
        #1dd1a1 60%,
        #5f27cd 75%,
        transparent
    );
    height: 3px;
    border-radius: 2px;
}

/* 金色渐变 */
.t-divider--gradient-gold::before,
.t-divider--gradient-gold::after {
    background: linear-gradient(
        to right,
        transparent,
        #ffd700 20%,
        #ffed4e 50%,
        #ffd700 80%,
        transparent
    );
    height: 3px;
    border-radius: 2px;
}

/* 装饰性分割线 - 星形 */
.t-divider--star .t-divider-content {
    font-size: 20px;
    color: var(--t-warning);
    text-shadow: 2px 2px 4px var(--t-shadow-dark);
}

/* 装饰性分割线 - 圆点 */
.t-divider--dot .t-divider-content {
    font-size: 12px;
    color: var(--t-primary);
    background: var(--t-bg);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 
        4px 4px 8px var(--t-shadow-dark),
        -4px -4px 8px var(--t-shadow-light);
    padding: 0;
}

/* 装饰性分割线 - 线条 */
.t-divider--line .t-divider-content {
    font-size: 24px;
    color: var(--t-text-placeholder);
    letter-spacing: 8px;
}

/* ==================== Image 图片 ==================== */

/* ==================== Image 图片 ==================== */

.t-image {
    display: inline-block;
    position: relative;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
    transition: var(--t-transition);
    cursor: pointer;
}

.t-image:hover {
    box-shadow: var(--t-shadow-lg);
}

.t-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.t-image:hover img {
    transform: scale(1.05);
}

/* 悬停遮罩层 */
.t-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-image:hover .t-image-overlay {
    opacity: 1;
}

.t-image-view-icon {
    font-size: 24px;
    color: white;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 不同形状 */
.t-image--circle {
    border-radius: 50%;
}

.t-image--circle img {
    border-radius: 50%;
}

.t-image--rounded {
    border-radius: 24px;
}

.t-image--rounded img {
    border-radius: 24px;
}

/* 加载骨架屏 */
.t-image--loading {
    background: var(--t-bg);
    box-shadow: var(--t-inset);
}

.t-image-skeleton {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.t-image-skeleton-animation {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    animation: skeleton-loading 1.5s infinite;
}

@keyframes skeleton-loading {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ==================== Skeleton 骨架屏 ==================== */

/**
 * Skeleton 骨架屏
 * 使用: class="t-skeleton"
 * 说明: 在需要等待加载内容的位置提供一个占位图形组合
 */
.t-skeleton {
    display: block;
    overflow: hidden;
    position: relative;
}

/**
 * Skeleton 段落/行
 * 使用: class="t-skeleton__paragraph" 或 class="t-skeleton__row"
 */
.t-skeleton__paragraph,
.t-skeleton__row {
    height: 16px;
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    border-radius: 4px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.t-skeleton__paragraph::after,
.t-skeleton__row::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

.t-skeleton__paragraph:last-child,
.t-skeleton__row:last-child {
    margin-bottom: 0;
    width: 60%;
}

/**
 * Skeleton 标题
 * 使用: class="t-skeleton__title"
 */
.t-skeleton__title {
    height: 20px;
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    border-radius: 4px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}

.t-skeleton__title::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

/**
 * Skeleton 圆形（头像）
 * 使用: class="t-skeleton__circle"
 */
.t-skeleton__circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
}

.t-skeleton__circle::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

/**
 * Skeleton 图片/矩形
 * 使用: class="t-skeleton__image" 或 class="t-skeleton__rect"
 */
.t-skeleton__image,
.t-skeleton__rect {
    display: block;
    width: 100%;
    height: 200px;
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    border-radius: var(--t-radius);
    position: relative;
    overflow: hidden;
}

.t-skeleton__image::after,
.t-skeleton__rect::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

/**
 * Skeleton 按钮
 * 使用: class="t-skeleton__button"
 */
.t-skeleton__button {
    display: inline-block;
    width: 80px;
    height: 36px;
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    border-radius: var(--t-radius);
    position: relative;
    overflow: hidden;
}

.t-skeleton__button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    animation: skeleton-loading 1.5s infinite;
}

/**
 * Skeleton 组合布局
 * 使用: class="t-skeleton__item"
 */
.t-skeleton__item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.t-skeleton__item:last-child {
    margin-bottom: 0;
}

.t-skeleton__item-content {
    flex: 1;
}

/**
 * Skeleton 尺寸变体
 * 使用: class="t-skeleton--sm|lg"
 */
.t-skeleton--sm .t-skeleton__paragraph,
.t-skeleton--sm .t-skeleton__row {
    height: 12px;
    margin-bottom: 8px;
}

.t-skeleton--sm .t-skeleton__title {
    height: 16px;
    margin-bottom: 12px;
}

.t-skeleton--sm .t-skeleton__circle {
    width: 32px;
    height: 32px;
}

.t-skeleton--lg .t-skeleton__paragraph,
.t-skeleton--lg .t-skeleton__row {
    height: 20px;
    margin-bottom: 16px;
}

.t-skeleton--lg .t-skeleton__title {
    height: 24px;
    margin-bottom: 20px;
}

.t-skeleton--lg .t-skeleton__circle {
    width: 56px;
    height: 56px;
}

/**
 * Skeleton 动画控制
 * 使用: class="t-skeleton--animated" 或 class="t-skeleton--static"
 */
.t-skeleton--animated .t-skeleton__paragraph::after,
.t-skeleton--animated .t-skeleton__row::after,
.t-skeleton--animated .t-skeleton__title::after,
.t-skeleton--animated .t-skeleton__circle::after,
.t-skeleton--animated .t-skeleton__image::after,
.t-skeleton--animated .t-skeleton__rect::after,
.t-skeleton--animated .t-skeleton__button::after {
    animation: skeleton-loading 1.5s infinite;
}

.t-skeleton--static .t-skeleton__paragraph::after,
.t-skeleton--static .t-skeleton__row::after,
.t-skeleton--static .t-skeleton__title::after,
.t-skeleton--static .t-skeleton__circle::after,
.t-skeleton--static .t-skeleton__image::after,
.t-skeleton--static .t-skeleton__rect::after,
.t-skeleton--static .t-skeleton__button::after {
    animation: none;
}

/**
 * Skeleton 卡片模板
 * 使用: class="t-skeleton__card"
 */
.t-skeleton__card {
    background: var(--t-bg);
    box-shadow: var(--t-shadow);
    border-radius: var(--t-radius);
    padding: 20px;
}

.t-skeleton__card .t-skeleton__image {
    margin: -20px -20px 16px -20px;
    width: calc(100% + 40px);
    border-radius: var(--t-radius) var(--t-radius) 0 0;
}

/**
 * Skeleton 列表模板
 * 使用: class="t-skeleton__list"
 */
.t-skeleton__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/**
 * Skeleton 图文模板
 * 使用: class="t-skeleton__media"
 */
.t-skeleton__media {
    display: flex;
    gap: 16px;
}

.t-skeleton__media-left {
    flex-shrink: 0;
}

.t-skeleton__media-right {
    flex: 1;
}

/* 占位状态 */
.t-image-placeholder {
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--t-text-placeholder);
    font-size: 14px;
    min-height: 200px;
    border-radius: var(--t-radius);
    gap: 12px;
}

.t-image-placeholder-icon {
    font-size: 32px;
    opacity: 0.5;
}

/* 错误状态 */
.t-image-error {
    background: var(--t-bg);
    box-shadow: var(--t-inset);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--t-text-placeholder);
    font-size: 14px;
    min-height: 200px;
    border-radius: var(--t-radius);
    gap: 8px;
}

.t-image-error-icon {
    font-size: 32px;
    color: var(--t-danger);
}

/* 图片演示标签 */
.t-image-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.t-image-demo-label {
    font-size: 12px;
    color: var(--t-text-secondary);
    text-align: center;
}

/* 图片墙 */
.t-image-wall {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.t-image-wall-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--t-radius);
    overflow: hidden;
    box-shadow: var(--t-shadow);
    cursor: pointer;
    transition: var(--t-transition);
}

.t-image-wall-item:hover {
    box-shadow: var(--t-shadow-lg);
    transform: translateY(-4px);
}

.t-image-wall-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.t-image-wall-item:hover img {
    transform: scale(1.1);
}

/* 更多图片遮罩 */
.t-image-wall-item--more::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
}

.t-image-wall-more {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: bold;
    color: white;
    z-index: 1;
}

/* 图片卡片 */
.t-image-card {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
    transition: var(--t-transition);
    width: 200px;
}

.t-image-card:hover {
    box-shadow: var(--t-shadow-lg);
    transform: translateY(-4px);
}

.t-image-card-image {
    position: relative;
    aspect-ratio: 3/2;
    overflow: hidden;
    cursor: pointer;
}

.t-image-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.t-image-card:hover .t-image-card-image img {
    transform: scale(1.05);
}

.t-image-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-image-card-image:hover .t-image-card-overlay {
    opacity: 1;
}

.t-image-card-view {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    font-size: 12px;
    color: var(--t-text-regular);
    font-weight: 500;
}

.t-image-card-info {
    padding: 16px;
}

.t-image-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 4px;
}

.t-image-card-desc {
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* 图片预览 */
.t-image-preview {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-image-preview.active {
    opacity: 1;
    visibility: visible;
}

.t-image-preview img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: var(--t-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.t-image-preview-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    color: var(--t-text-regular);
    /* box-shadow: var(--t-shadow); */
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-image-preview-close:hover {
    box-shadow: var(--t-shadow-sm);
    transform: rotate(90deg);
}

/* 预览操作按钮 */
.t-image-preview-actions {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 16px;
}

.t-image-preview-btn {
    width: 50px;
    height: 50px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    color: var(--t-text-regular);
    box-shadow: var(--t-shadow);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-image-preview-btn:hover {
    box-shadow: var(--t-shadow-lg);
    transform: scale(1.1);
}

/* 图片预览遮罩 - 文档用 */
.t-image-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-image-preview-overlay.active {
    opacity: 1;
    visibility: visible;
}

.t-image-preview-wrapper {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.t-image-preview-img {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--t-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.t-image-preview-prev,
.t-image-preview-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    color: var(--t-text-regular);
    /* box-shadow: var(--t-shadow); */
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-image-preview-prev {
    left: -70px;
}

.t-image-preview-next {
    right: -70px;
}

.t-image-preview-prev:hover,
.t-image-preview-next:hover {
    box-shadow: var(--t-shadow-sm);
}

/* 图片预览遮罩层 */
.t-image--preview {
    position: relative;
    overflow: hidden;
}

.t-image__preview-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-image--preview:hover .t-image__preview-mask {
    opacity: 1;
}

.t-image__preview-mask i {
    font-size: 24px;
    color: white;
}

/* 图片占位符 */
.t-image__placeholder {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    color: var(--t-text-secondary);
    gap: 8px;
}

/* 图片错误提示 */
.t-image__error {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    color: var(--t-text-secondary);
    gap: 8px;
}

/* ==================== Drawer 抽屉 ==================== */

.t-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

.t-drawer {
    position: fixed;
    background: var(--t-bg);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.t-drawer-left {
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    transform: translateX(-100%);
}

.t-drawer-right {
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    transform: translateX(100%);
}

.t-drawer-top {
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    transform: translateY(-100%);
}

.t-drawer-bottom {
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    transform: translateY(100%);
}

.t-drawer-overlay.active .t-drawer {
    transform: translateX(0) translateY(0);
}

.t-drawer-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.t-drawer-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--t-text-primary);
    margin: 0;
}

.t-drawer-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--t-text-secondary);
    box-shadow: var(--t-inset-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-drawer-close:hover {
    box-shadow: var(--t-inset);
    color: var(--t-danger);
}

.t-drawer-close:active {
    box-shadow: var(--t-inset-lg);
}

.t-drawer-body {
    flex: 1;
    padding: 24px;
    overflow-y: auto;
    color: var(--t-text-regular);
    font-size: 14px;
    line-height: 1.6;
}

/* 抽屉页脚 */
.t-drawer-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    background: var(--t-bg);
}

/* 硅胶质感抽屉 */
.t-drawer--tingui {
    box-shadow:
        -8px 0 24px var(--t-shadow-dark),
        8px 0 24px var(--t-shadow-light) !important;
}

.t-drawer--tingui.t-drawer-left {
    box-shadow:
        8px 0 24px var(--t-shadow-dark),
        -8px 0 24px var(--t-shadow-light) !important;
}

.t-drawer--tingui.t-drawer-top {
    box-shadow:
        0 8px 24px var(--t-shadow-dark),
        0 -8px 24px var(--t-shadow-light) !important;
}

.t-drawer--tingui.t-drawer-bottom {
    box-shadow:
        0 -8px 24px var(--t-shadow-dark),
        0 8px 24px var(--t-shadow-light) !important;
}

/* 无遮罩抽屉 */
.t-drawer-overlay.no-mask {
    background: transparent;
    pointer-events: none;
}

.t-drawer-overlay.no-mask .t-drawer {
    pointer-events: auto;
}

/* 多层抽屉 */
.t-drawer-overlay.multi-drawer {
    z-index: 1001;
}

/* 抽屉表单样式 */
.t-drawer-form-item {
    margin-bottom: 16px;
}

.t-drawer-form-label {
    display: block;
    font-size: 14px;
    color: var(--t-text-regular);
    margin-bottom: 8px;
}

.t-drawer-form-input {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    font-size: 14px;
    color: var(--t-text-primary);
    box-shadow: var(--t-inset);
    outline: none;
    transition: var(--t-transition);
}

.t-drawer-form-input:focus {
    box-shadow: var(--t-inset), 0 0 0 2px var(--t-primary);
}

/* ==================== Carousel 走马灯 ==================== */

.t-carousel {
    position: relative;
    overflow: hidden;
    border-radius: var(--t-radius);
    background: var(--t-bg);
}

.t-carousel-container {
    display: flex;
    transition: transform 0.5s ease;
    height: 100%;
}

.t-carousel-item {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
}

.t-carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 箭头按钮 - 默认隐藏，hover时显示 */
.t-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--t-text-regular);
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
}

.t-carousel:hover .t-carousel-arrow {
    opacity: 1;
    visibility: visible;
}

.t-carousel-arrow:hover {
    box-shadow: var(--t-shadow);
}

.t-carousel-arrow:active {
    box-shadow: var(--t-inset-sm);
}

.t-carousel-arrow-left {
    left: 16px;
}

.t-carousel-arrow-right {
    right: 16px;
}

/* 指示器 */
.t-carousel-indicators {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.t-carousel-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    cursor: pointer;
    transition: var(--t-transition);
    border: none;
    padding: 0;
}

.t-carousel-indicator.active {
    box-shadow: var(--t-shadow-sm);
    background: var(--t-primary);
}

.t-carousel-indicator:hover {
    box-shadow: var(--t-shadow);
}

/* 卡片化样式 */
.t-carousel-card .t-carousel-container {
    padding: 20px 0;
    align-items: center;
}

.t-carousel-card .t-carousel-item {
    flex: 0 0 50%;
    padding: 0 10px;
    opacity: 0.6;
    transition: all 0.5s ease;
}

.t-carousel-card .t-carousel-item.active {
    opacity: 1;
}

.t-carousel-card .t-carousel-item-inner {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
    height: 100%;
    transition: all 0.5s ease;
    transform: scale(0.9);
}

.t-carousel-card .t-carousel-item.active .t-carousel-item-inner {
    transform: scale(1);
    box-shadow: var(--t-shadow-lg);
}

/* 垂直方向 */
.t-carousel-vertical .t-carousel-container {
    flex-direction: column;
}

.t-carousel-vertical .t-carousel-item {
    flex: 0 0 100%;
}

.t-carousel-vertical .t-carousel-arrow-left {
    top: 16px;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
}

.t-carousel-vertical .t-carousel-arrow-right {
    top: auto;
    bottom: 16px;
    right: 50%;
    transform: translateX(50%) rotate(90deg);
}

.t-carousel-vertical .t-carousel-indicators {
    right: 16px;
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    flex-direction: column;
}

/* 垂直轮播内容 */
.t-carousel-vertical-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    width: 90%;
    max-width: 280px;
    height: 100%;
}

.t-carousel-vertical-content img {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: cover;
    border-radius: var(--t-radius-sm);
}

.t-carousel-vertical-text {
    text-align: center;
}

.t-carousel-vertical-text h4 {
    margin: 0 0 6px 0;
    color: var(--t-text-primary);
    font-size: 14px;
}

.t-carousel-vertical-text p {
    margin: 0;
    color: var(--t-text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

/* 图片标题 */
.t-carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px 20px 50px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    color: white;
}

.t-carousel-caption h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.t-carousel-caption p {
    margin: 0;
    font-size: 14px;
    opacity: 0.9;
}

/* 播放/暂停按钮 */
.t-carousel-play-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    color: var(--t-text-regular);
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.t-carousel-play-btn:hover {
    box-shadow: var(--t-shadow);
}

/* 淡入淡出效果 */
.t-carousel--fade .t-carousel-container {
    position: relative;
}

.t-carousel--fade .t-carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.t-carousel--fade .t-carousel-item.active {
    opacity: 1;
    z-index: 1;
}

/* 多图展示 */
.t-carousel-multi .t-carousel-item {
    flex: 0 0 25%;
    padding: 0 8px;
}

.t-carousel-multi .t-carousel-item img {
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
}

.t-carousel-multi .t-carousel-item:hover img {
    box-shadow: var(--t-shadow);
    transform: translateY(-4px);
}

/* 卡片信息 */
.t-carousel-card-info {
    padding: 12px 16px;
    background: var(--t-bg);
}

.t-carousel-card-info h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: var(--t-text-primary);
}

.t-carousel-card-info p {
    margin: 0;
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* 3D 轮播效果 */
.t-carousel-3d {
    perspective: 1000px;
}

.t-carousel-3d .t-carousel-container {
    transform-style: preserve-3d;
}

.t-carousel-3d .t-carousel-item {
    flex: 0 0 40%;
    padding: 0 10px;
    opacity: 0.5;
    transform: scale(0.8) rotateY(25deg);
    transition: all 0.5s ease;
}

.t-carousel-3d .t-carousel-item.active {
    opacity: 1;
    transform: scale(1) rotateY(0deg);
    z-index: 10;
}

.t-carousel-3d .t-carousel-item.active + .t-carousel-item {
    transform: scale(0.8) rotateY(-25deg);
}

.t-carousel-3d .t-carousel-item:has(+ .t-carousel-item.active) {
    transform: scale(0.8) rotateY(25deg);
}

/* ==================== Notification 通知 ==================== */

.t-notification-container {
    position: fixed;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 16px;
    pointer-events: none;
}

.t-notification-container-top-right {
    top: 20px;
    right: 20px;
}

.t-notification-container-top-left {
    top: 20px;
    left: 20px;
}

.t-notification-container-bottom-right {
    bottom: 20px;
    right: 20px;
    flex-direction: column-reverse;
}

.t-notification-container-bottom-left {
    bottom: 20px;
    left: 20px;
    flex-direction: column-reverse;
}

.t-notification {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 16px 20px;
    min-width: 320px;
    max-width: 400px;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transform: translateX(100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.t-notification-container-top-left .t-notification,
.t-notification-container-bottom-left .t-notification {
    transform: translateX(-100%);
}

.t-notification.show {
    transform: translateX(0);
    opacity: 1;
}

.t-notification-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.t-notification-content {
    flex: 1;
    min-width: 0;
}

.t-notification-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--t-text-primary);
    margin-bottom: 6px;
    line-height: 1.4;
}

.t-notification-message {
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.5;
    word-break: break-word;
}

.t-notification-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--t-text-secondary);
    box-shadow: var(--t-inset-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.t-notification-close:hover {
    box-shadow: var(--t-inset);
    color: var(--t-text-primary);
}

/* 不同类型 */
.t-notification-success .t-notification-icon {
    color: var(--t-success);
}

.t-notification-warning .t-notification-icon {
    color: var(--t-warning);
}

.t-notification-error .t-notification-icon {
    color: var(--t-danger);
}

.t-notification-info .t-notification-icon {
    color: var(--t-primary);
}

/* 硅胶质感通知 */
.t-notification--tingui {
    box-shadow:
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 进度条 */
.t-notification-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--t-primary), var(--t-success));
    border-radius: 0 0 0 var(--t-radius);
    transition: width 0.1s linear;
}

.t-notification {
    position: relative;
    overflow: hidden;
}

/* 操作按钮 */
.t-notification-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.t-notification-action-btn {
    padding: 6px 12px;
    border: none;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    font-size: 12px;
    color: var(--t-primary);
    cursor: pointer;
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
}

.t-notification-action-btn:hover {
    box-shadow: var(--t-shadow);
}

.t-notification-action-btn.primary {
    background: var(--t-primary);
    color: white;
}

/* 分组通知 */
.t-notification-group {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 320px;
    max-width: 400px;
    pointer-events: auto;
    overflow: hidden;
}

.t-notification-group-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--t-primary) 0%, var(--t-success) 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.t-notification-group-title {
    font-weight: 500;
    font-size: 14px;
}

.t-notification-group-count {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
}

.t-notification-group-list {
    padding: 8px;
}

.t-notification-group-item {
    padding: 10px 12px;
    border-radius: var(--t-radius-sm);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: var(--t-transition);
}

.t-notification-group-item:hover {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
}

.t-notification-group-item:last-child {
    margin-bottom: 0;
}

.t-notification-group-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}

.t-notification-group-icon.success {
    background: rgba(16, 185, 129, 0.1);
    color: var(--t-success);
}

.t-notification-group-icon.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--t-warning);
}

.t-notification-group-icon.error {
    background: rgba(239, 68, 68, 0.1);
    color: var(--t-danger);
}

.t-notification-group-icon.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--t-primary);
}

.t-notification-group-content {
    flex: 1;
    min-width: 0;
}

.t-notification-group-text {
    font-size: 13px;
    color: var(--t-text-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-notification-group-time {
    font-size: 11px;
    color: var(--t-text-secondary);
    margin-top: 2px;
}

/* ==================== Alert 警告 ==================== */

.t-alert-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 90%;
    max-width: 600px;
    pointer-events: none;
}

.t-alert {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    /* box-shadow: var(--t-shadow-lg); */
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.3s ease;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-20px);
}

.t-alert.show {
    opacity: 1;
    transform: translateY(0);
}

.t-alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.t-alert-content {
    flex: 1;
    min-width: 0;
}

.t-alert-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--t-text-primary);
    margin-bottom: 4px;
    line-height: 1.4;
}

.t-alert-description {
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.5;
}

.t-alert-close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    color: var(--t-text-secondary);
    box-shadow: var(--t-inset-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.t-alert-close:hover {
    box-shadow: var(--t-inset);
    color: var(--t-text-primary);
}

/* Alert 遮罩层 */
.t-alert-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 98;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-alert-overlay.show {
    opacity: 1;
}

/* Alert 进度条 */
.t-alert__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 0 0 var(--t-radius) var(--t-radius);
}

.t-alert__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--t-primary), var(--t-primary-light));
    transform-origin: left;
    transition: transform linear;
}

.t-alert-success .t-alert__progress-bar {
    background: linear-gradient(90deg, var(--t-success), var(--t-success-light));
}

.t-alert-warning .t-alert__progress-bar {
    background: linear-gradient(90deg, var(--t-warning), var(--t-warning-light));
}

.t-alert-error .t-alert__progress-bar {
    background: linear-gradient(90deg, var(--t-danger), var(--t-danger-light));
}

.t-alert-info .t-alert__progress-bar {
    background: linear-gradient(90deg, var(--t-primary), var(--t-primary-light));
}

/* Alert 不同类型 */
.t-alert-success .t-alert-icon {
    color: var(--t-success);
}

.t-alert-warning .t-alert-icon {
    color: var(--t-warning);
}

.t-alert-error .t-alert-icon {
    color: var(--t-danger);
}

.t-alert-info .t-alert-icon {
    color: var(--t-primary);
}

/* Alert 主题 - dark */
.t-alert-dark {
    background: var(--t-text-primary);
    color: var(--t-white);
}

.t-alert-dark .t-alert-title {
    color: var(--t-white);
}

.t-alert-dark .t-alert-description {
    color: var(--t-white-rgba-80);
}

.t-alert-dark .t-alert-close {
    background: var(--t-text-primary);
    color: var(--t-white-rgba-70);
    box-shadow: inset 3px 3px 6px rgba(0,0,0,0.3), inset -3px -3px 6px rgba(255,255,255,0.1);
}

.t-alert-dark .t-alert-close:hover {
    color: var(--t-white);
}

/* 文字居中 */
.t-alert-center {
    justify-content: center;
    text-align: center;
}

.t-alert-center .t-alert-content {
    flex: 0 1 auto;
}

/* 硅胶质感警告 */
.t-alert--tingui {
    box-shadow:
        8px 8px 16px var(--t-shadow-dark),
        -8px -8px 16px var(--t-shadow-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 左边框样式 */
.t-alert--border-left {
    border-left: 4px solid var(--t-primary);
}

.t-alert--border-left.t-alert-success {
    border-left-color: var(--t-success);
}

.t-alert--border-left.t-alert-warning {
    border-left-color: var(--t-warning);
}

.t-alert--border-left.t-alert-error {
    border-left-color: var(--t-danger);
}

.t-alert--border-left.t-alert-info {
    border-left-color: var(--t-primary);
}

/* 顶部边框样式 */
.t-alert--border-top {
    border-top: 4px solid var(--t-primary);
}

.t-alert--border-top.t-alert-success {
    border-top-color: var(--t-success);
}

.t-alert--border-top.t-alert-warning {
    border-top-color: var(--t-warning);
}

.t-alert--border-top.t-alert-error {
    border-top-color: var(--t-danger);
}

.t-alert--border-top.t-alert-info {
    border-top-color: var(--t-primary);
}

/* 填充样式 */
.t-alert--filled {
    background: rgba(59, 130, 246, 0.1);
}

.t-alert--filled.t-alert-success {
    background: rgba(16, 185, 129, 0.1);
}

.t-alert--filled.t-alert-warning {
    background: rgba(245, 158, 11, 0.1);
}

.t-alert--filled.t-alert-error {
    background: rgba(239, 68, 68, 0.1);
}

.t-alert--filled.t-alert-info {
    background: rgba(59, 130, 246, 0.1);
}

/* 操作按钮 */
.t-alert-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.t-alert-action-btn {
    padding: 8px 16px;
    border: none;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    font-size: 13px;
    color: var(--t-text-regular);
    cursor: pointer;
    box-shadow: var(--t-shadow-sm);
    transition: var(--t-transition);
}

.t-alert-action-btn:hover {
    box-shadow: var(--t-shadow);
}

.t-alert-action-btn.primary {
    background: var(--t-primary);
    color: white;
}

.t-alert-action-btn.success {
    background: var(--t-success);
    color: white;
}

.t-alert-action-btn.danger {
    background: var(--t-danger);
    color: white;
}

/* 可折叠警告 */
.t-alert--collapsible .t-alert-description {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

.t-alert--collapsible .t-alert-description.collapsed {
    max-height: 0;
    opacity: 0;
}

.t-alert--collapsible .t-alert-description.expanded {
    max-height: 200px;
    opacity: 1;
}

.t-alert-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--t-primary);
    cursor: pointer;
    user-select: none;
}

.t-alert-toggle:hover {
    opacity: 0.8;
}

.t-alert-toggle-icon {
    transition: transform 0.3s ease;
}

.t-alert-toggle-icon.expanded {
    transform: rotate(180deg);
}

/* ==================== Message 消息提示 ==================== */

.t-message-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9997;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}

.t-message {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 12px 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
    min-width: 200px;
    justify-content: center;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.t-message.show {
    opacity: 1;
    transform: translateY(0);
}

.t-message.hide {
    opacity: 0;
    transform: translateY(-20px);
}

/* 文字居中 */
.t-message.is-center {
    justify-content: center;
    text-align: center;
}

.t-message-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.t-message-content {
    font-size: 14px;
    color: var(--t-text-primary);
    line-height: 1.5;
}

.t-message-close {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    color: var(--t-text-secondary);
    box-shadow: var(--t-inset-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}

.t-message-close:hover {
    box-shadow: var(--t-inset);
    color: var(--t-text-primary);
}

/* Message 不同类型 */
.t-message-success .t-message-icon {
    color: var(--t-success);
}

.t-message-warning .t-message-icon {
    color: var(--t-warning);
}

.t-message-error .t-message-icon {
    color: var(--t-danger);
}

.t-message-info .t-message-icon {
    color: var(--t-primary);
}

.t-message-loading .t-message-icon {
    color: var(--t-primary);
    animation: t-spin 1s linear infinite;
}

@keyframes t-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 硅胶质感消息 */
.t-message--tingui {
    box-shadow:
        6px 6px 12px var(--t-shadow-dark),
        -6px -6px 12px var(--t-shadow-light);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 进度条 */
.t-message-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--t-primary), var(--t-success));
    border-radius: 0 0 var(--t-radius) var(--t-radius);
}

/* 不同类型的进度条颜色 */
.t-message-success .t-message-progress {
    background: linear-gradient(90deg, var(--t-success), var(--t-success-light));
}

.t-message-warning .t-message-progress {
    background: linear-gradient(90deg, var(--t-warning), var(--t-warning-light));
}

.t-message-error .t-message-progress {
    background: linear-gradient(90deg, var(--t-danger), var(--t-danger-light));
}

.t-message-info .t-message-progress {
    background: linear-gradient(90deg, var(--t-primary), var(--t-primary-light));
}

/* 加载动画 */
.t-message-loading-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--t-shadow-light);
    border-top-color: var(--t-primary);
    border-radius: 50%;
    animation: t-spin 0.8s linear infinite;
}

/* ==================== MessageBox 弹框 ==================== */

.t-message-box-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-message-box-overlay.active {
    opacity: 1;
    visibility: visible;
}

.t-message-box {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    /* 去掉外发光效果 */
    box-shadow: none;
    width: 90%;
    max-width: 420px;
    padding: 24px;
    transform: scale(0.9);
    transition: all 0.3s ease;
}

.t-message-box-overlay.active .t-message-box {
    transform: scale(1);
}

.t-message-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.t-message-box-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--t-text-primary);
    line-height: 1.4;
}

.t-message-box-close {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: var(--t-text-secondary);
    box-shadow: var(--t-inset-sm);
    transition: var(--t-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-message-box-close:hover {
    box-shadow: var(--t-inset);
    color: var(--t-text-primary);
}

.t-message-box-content {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
}

.t-message-box-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.t-message-box-message {
    flex: 1;
    font-size: 14px;
    color: var(--t-text-regular);
    line-height: 1.6;
}

.t-message-box-input {
    margin-top: 12px;
}

.t-message-box-input input {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    font-size: 14px;
    color: var(--t-text-primary);
    box-shadow: var(--t-inset);
    outline: none;
    transition: var(--t-transition);
}

.t-message-box-input input:focus {
    box-shadow: var(--t-inset), 0 0 0 2px var(--t-primary);
}

.t-message-box-input-error {
    margin-top: 8px;
    font-size: 12px;
    color: var(--t-danger);
}

.t-message-box-btns {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.t-message-box-btns-center {
    justify-content: center;
}

/* MessageBox 不同类型图标颜色 */
.t-message-box-success .t-message-box-icon {
    color: var(--t-success);
}

.t-message-box-warning .t-message-box-icon {
    color: var(--t-warning);
}

.t-message-box-error .t-message-box-icon {
    color: var(--t-danger);
}

.t-message-box-info .t-message-box-icon {
    color: var(--t-primary);
}

/* 硅胶质感弹框 */
.t-message-box--tingui {
    box-shadow:
        12px 12px 24px var(--t-shadow-dark),
        -12px -12px 24px var(--t-shadow-light) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 多按钮弹框 */
.t-message-box-btns--multi {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.t-message-box-btns--multi button {
    flex: 1;
    min-width: 80px;
}

/* 异步关闭加载状态 */
.t-message-box-btn--loading {
    position: relative;
    pointer-events: none;
    opacity: 0.7;
}

.t-message-box-btn--loading::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: t-spin 0.8s linear infinite;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* 弹框按钮样式增强 */
.t-message-box-btns .t-btn {
    min-width: 80px;
}

.t-message-box-btns .t-btn-primary {
    background: var(--t-primary);
    color: white;
}

.t-message-box-btns .t-btn-success {
    background: var(--t-success);
    color: white;
}

.t-message-box-btns .t-btn-warning {
    background: var(--t-warning);
    color: white;
}

.t-message-box-btns .t-btn-danger {
    background: var(--t-danger);
    color: white;
}

/* 弹框动画增强 */
@keyframes t-message-box-in {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes t-message-box-out {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
}

.t-message-box-overlay.active .t-message-box {
    animation: t-message-box-in 0.3s ease forwards;
}

.t-message-box-overlay.closing .t-message-box {
    animation: t-message-box-out 0.2s ease forwards;
}

/* ==================== Loading 加载 ==================== */

/* 基础 Loading 遮罩 */
.t-loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(227, 229, 231, 0.9);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-loading-mask.active {
    opacity: 1;
    visibility: visible;
}

/* 全屏 Loading */
.t-loading-mask.fullscreen {
    position: fixed;
    background: rgba(227, 229, 231, 0.95);
}

.t-loading-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(227, 229, 231, 0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 16px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.t-loading-fullscreen.active {
    opacity: 1;
    visibility: visible;
}

.t-loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* 硅胶质感旋转加载器 */
.t-loading-spinner {
    position: relative;
    width: 50px;
    height: 50px;
}

.t-loading-spinner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow);
    animation: t-loading-pulse 1.5s ease-in-out infinite;
}

.t-loading-spinner::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--t-primary);
    box-shadow: var(--t-inset-sm);
    animation: t-loading-dot 1.5s ease-in-out infinite;
}

@keyframes t-loading-pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--t-shadow);
    }
    50% {
        transform: scale(1.1);
        box-shadow: var(--t-shadow-lg);
    }
}

@keyframes t-loading-dot {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(0.8);
    }
}

/* 圆环加载器 */
.t-loading-ring {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-loading-ring::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--t-primary), transparent, var(--t-primary));
    animation: t-loading-rotate 1s linear infinite;
    z-index: -1;
}

.t-loading-ring::after {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
}

@keyframes t-loading-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 波浪加载器 */
.t-loading-wave {
    display: flex;
    gap: 6px;
    align-items: center;
    height: 40px;
}

.t-loading-wave span {
    width: 8px;
    height: 100%;
    background: var(--t-bg);
    border-radius: 4px;
    box-shadow: var(--t-shadow);
    animation: t-loading-wave 1.2s ease-in-out infinite;
}

.t-loading-wave span:nth-child(1) { animation-delay: 0s; }
.t-loading-wave span:nth-child(2) { animation-delay: 0.1s; }
.t-loading-wave span:nth-child(3) { animation-delay: 0.2s; }
.t-loading-wave span:nth-child(4) { animation-delay: 0.3s; }
.t-loading-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes t-loading-wave {
    0%, 100% {
        transform: scaleY(0.5);
        box-shadow: var(--t-inset-sm);
    }
    50% {
        transform: scaleY(1);
        box-shadow: var(--t-shadow);
    }
}

/* 点状加载器 */
.t-loading-dots {
    display: flex;
    gap: 8px;
}

.t-loading-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow);
    animation: t-loading-dots 1.4s ease-in-out infinite;
}

.t-loading-dots span:nth-child(1) { animation-delay: 0s; }
.t-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.t-loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes t-loading-dots {
    0%, 100% {
        transform: scale(1);
        box-shadow: var(--t-shadow);
    }
    50% {
        transform: scale(1.5);
        box-shadow: var(--t-shadow-lg);
    }
}

/* 方形旋转加载器 */
.t-loading-square {
    width: 40px;
    height: 40px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    animation: t-loading-square 1.5s ease-in-out infinite;
}

@keyframes t-loading-square {
    0% {
        transform: rotate(0deg);
        box-shadow: var(--t-shadow);
    }
    50% {
        transform: rotate(180deg);
        box-shadow: var(--t-inset);
    }
    100% {
        transform: rotate(360deg);
        box-shadow: var(--t-shadow);
    }
}

/* Loading 文字 */
.t-loading-text {
    font-size: 14px;
    color: var(--t-text-regular);
    text-align: center;
}

/* 自定义图标 */
.t-loading-custom {
    font-size: 40px;
    color: var(--t-primary);
    animation: t-loading-custom 2s ease-in-out infinite;
}

.t-loading-custom svg {
    animation: t-loading-rotate 2s linear infinite;
}

@keyframes t-loading-custom {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes t-loading-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 渐变圆环加载器 */
.t-loading-gradient {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--t-primary), var(--t-success), var(--t-warning), var(--t-primary));
    animation: t-loading-gradient-rotate 1.5s linear infinite;
    position: relative;
    box-shadow: var(--t-shadow);
}

.t-loading-gradient::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: var(--t-inset);
}

@keyframes t-loading-gradient-rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 进度条加载 */
.t-loading-progress {
    width: 200px;
    height: 6px;
    background: var(--t-bg);
    border-radius: 3px;
    box-shadow: var(--t-inset);
    overflow: hidden;
    margin-top: 8px;
}

.t-loading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--t-primary), var(--t-success));
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* 百分比文字 */
.t-loading-percent {
    font-size: 24px;
    font-weight: 600;
    color: var(--t-primary);
    margin-bottom: 8px;
}

/* 加载器容器 */
.t-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* ==================== Table 表格 ==================== */

/* 基础表格容器 */
.t-table-wrapper {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}

/* 基础表格 */
.t-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--t-text-regular);
}

.t-table th,
.t-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    vertical-align: middle;
}

.t-table th {
    font-weight: 600;
    color: var(--t-text-primary);
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    white-space: nowrap;
}

.t-table tbody tr {
    transition: all 0.2s ease;
}

.t-table tbody tr:hover {
    background: rgba(64, 158, 255, 0.05);
}

.t-table tbody tr:last-child td {
    border-bottom: none;
}

/* 斑马纹表格 */
.t-table.t-table--striped tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.t-table.t-table--striped tbody tr:nth-child(even):hover {
    background: rgba(64, 158, 255, 0.08);
}

/* 带边框表格 */
.t-table.t-table--border {
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.t-table.t-table--border th,
.t-table.t-table--border td {
    border-right: 1px solid rgba(0, 0, 0, 0.05);
}

.t-table.t-table--border th:last-child,
.t-table.t-table--border td:last-child {
    border-right: none;
}

/* 表格状态 */
.t-table tbody tr.t-table--success {
    background: rgba(103, 194, 58, 0.1) !important;
}

.t-table tbody tr.t-table--warning {
    background: rgba(230, 162, 60, 0.1) !important;
}

.t-table tbody tr.t-table--danger {
    background: rgba(245, 108, 108, 0.1) !important;
}

.t-table tbody tr.t-table--info {
    background: rgba(144, 147, 153, 0.1) !important;
}

/* 固定表头 */
.t-table-wrapper.t-table--fixed-header {
    max-height: 400px;
    overflow-y: auto;
}

.t-table-wrapper.t-table--fixed-header .t-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.t-table-wrapper.t-table--fixed-header .t-table th {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 固定列 */
.t-table-wrapper.t-table--fixed-columns {
    overflow-x: auto;
}

.t-table.t-table--fixed-left th:first-child,
.t-table.t-table--fixed-left td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--t-bg);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
}

.t-table.t-table--fixed-right th:last-child,
.t-table.t-table--fixed-right td:last-child {
    position: sticky;
    right: 0;
    z-index: 5;
    background: var(--t-bg);
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.05);
}

/* 流体高度 */
.t-table-wrapper.t-table--fluid-height {
    max-height: 60vh;
    overflow-y: auto;
}

/* 空数据状态 */
.t-table__empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--t-text-secondary);
}

.t-table__empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* 表格操作列 */
.t-table__actions {
    display: flex;
    gap: 8px;
}

.t-table__actions .t-btn {
    padding: 4px 12px;
    font-size: 12px;
}

/* 表格中的复选框居中 */
.t-table .t-checkbox {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.t-table .t-checkbox input {
    flex-shrink: 0;
}

/* 表格标签 */
.t-table .t-tag {
    margin: 0;
}

/* 表格分页 */
.t-table__pagination {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 表格加载状态 */
.t-table-wrapper.t-table--loading {
    position: relative;
}

.t-table-wrapper.t-table--loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(227, 229, 231, 0.7);
    z-index: 100;
}

/* 可展开行 */
.t-table__expand-icon {
    cursor: pointer;
    transition: transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
}

.t-table__expand-icon:hover {
    box-shadow: var(--t-inset-sm);
}

.t-table__expand-icon.expanded {
    transform: rotate(90deg);
}

.t-table__expanded-cell {
    padding: 20px 50px !important;
    background: rgba(0, 0, 0, 0.02);
}

/* 树形数据 */
.t-table__indent {
    display: inline-block;
    width: 16px;
}

.t-table__tree-icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 4px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    font-size: 12px;
    transition: all 0.2s ease;
}

.t-table__tree-icon:hover {
    box-shadow: var(--t-inset-sm);
}

/* 表格排序 */
.t-table__sort {
    display: inline-flex;
    flex-direction: column;
    margin-left: 4px;
    vertical-align: middle;
}

.t-table__sort-icon {
    font-size: 10px;
    color: var(--t-text-placeholder);
    cursor: pointer;
    line-height: 1;
    padding: 1px;
}

.t-table__sort-icon:hover,
.t-table__sort-icon.active {
    color: var(--t-primary);
}

/* 表格筛选 */
.t-table__filter {
    display: inline-flex;
    margin-left: 4px;
    cursor: pointer;
    color: var(--t-text-placeholder);
}

.t-table__filter:hover,
.t-table__filter.active {
    color: var(--t-primary);
}

/* 多选表格 */
.t-table .t-checkbox {
    margin: 0;
}

/* ==================== Tag 标签 ==================== */

/* 基础标签 */
.t-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    color: var(--t-primary);
    background: var(--t-bg);
    border-radius: 4px;
    box-shadow: var(--t-shadow-sm);
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: default;
    user-select: none;
    margin: 0 8px 8px 0;
}

.t-tag:hover {
    box-shadow: var(--t-shadow);
    transform: translateY(-1px);
}

/* 可关闭标签 */
.t-tag .t-tag__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    color: var(--t-primary);
    transition: all 0.2s ease;
}

.t-tag .t-tag__close:hover {
    background: rgba(64, 158, 255, 0.2);
    box-shadow: var(--t-inset-sm);
}

/* 不同尺寸 */
.t-tag--medium {
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
}

.t-tag--small {
    height: 24px;
    padding: 0 8px;
    font-size: 12px;
}

.t-tag--mini {
    height: 20px;
    padding: 0 6px;
    font-size: 11px;
}

/* 不同类型 */
.t-tag--success {
    color: var(--t-success);
}

.t-tag--success .t-tag__close:hover {
    background: rgba(103, 194, 58, 0.2);
}

.t-tag--warning {
    color: var(--t-warning);
}

.t-tag--warning .t-tag__close:hover {
    background: rgba(230, 162, 60, 0.2);
}

.t-tag--danger {
    color: var(--t-danger);
}

.t-tag--danger .t-tag__close:hover {
    background: rgba(245, 108, 108, 0.2);
}

.t-tag--info {
    color: var(--t-text-secondary);
}

.t-tag--info .t-tag__close:hover {
    background: rgba(144, 147, 153, 0.2);
}

/* 不同主题 - Dark */
.t-tag--dark {
    /* color: #fff; */
    color: var(--t-white);
    background: var(--t-primary);
    box-shadow: var(--t-shadow);
}

.t-tag--dark.t-tag--success {
    background: var(--t-success);
}

.t-tag--dark.t-tag--warning {
    background: var(--t-warning);
}

.t-tag--dark.t-tag--danger {
    background: var(--t-danger);
}

.t-tag--dark.t-tag--info {
    background: var(--t-text-secondary);
}

.t-tag--dark .t-tag__close {
    color: rgba(255, 255, 255, 0.8);
}

.t-tag--dark .t-tag__close:hover {
    /* background: rgba(255, 255, 255, 0.2); */
    /* color: #fff; */
    background: var(--t-white-rgba-20);
    color: var(--t-white);
}

/* 不同主题 - Plain */
.t-tag--plain {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--t-primary);
}

.t-tag--plain.t-tag--success {
    border-color: var(--t-success);
}

.t-tag--plain.t-tag--warning {
    border-color: var(--t-warning);
}

.t-tag--plain.t-tag--danger {
    border-color: var(--t-danger);
}

.t-tag--plain.t-tag--info {
    border-color: var(--t-text-secondary);
}

.t-tag--plain:hover {
    box-shadow: var(--t-shadow-sm);
}

/* 标签组 */
.t-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.t-tag-group .t-tag {
    margin: 0;
}

/* 动态编辑标签 */
.t-tag-input {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 8px;
    background: var(--t-bg);
    border-radius: 4px;
    box-shadow: var(--t-inset-sm);
}

.t-tag-input input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 12px;
    color: var(--t-text-regular);
    width: 80px;
}

.t-tag-input input::placeholder {
    color: var(--t-text-placeholder);
}

.t-tag--editable {
    cursor: pointer;
    border: 1px dashed var(--t-text-placeholder);
    box-shadow: none;
    color: var(--t-text-secondary);
}

.t-tag--editable:hover {
    border-color: var(--t-primary);
    color: var(--t-primary);
    box-shadow: var(--t-shadow-sm);
}

/* 标签动画 */
.t-tag-enter {
    animation: t-tag-enter 0.3s ease;
}

.t-tag-leave {
    animation: t-tag-leave 0.3s ease forwards;
}

@keyframes t-tag-enter {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes t-tag-leave {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

/* ==================== Progress 进度条 ==================== */

/* 线形进度条容器 */
.t-progress {
    position: relative;
    width: 100%;
    height: 6px;
    margin-bottom: 20px;
}

.t-progress__bar {
    width: 100%;
    height: 100%;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-inset-sm);
    overflow: hidden;
}

.t-progress__bar-inner {
    height: 100%;
    background: var(--t-primary);
    border-radius: 0;
    transition: width 0.6s ease;
    position: relative;
}

/* 进度条状态色 */
.t-progress--success .t-progress__bar-inner {
    background: var(--t-success);
}

.t-progress--warning .t-progress__bar-inner {
    background: var(--t-warning);
}

.t-progress--exception .t-progress__bar-inner {
    background: var(--t-danger);
}

/* ==================== 圆角样式 - 可复用 ==================== */
/* 小圆角 */
.t-radius-sm {
    border-radius: 4px;
}

/* 中圆角（默认） */
.t-radius-md {
    border-radius: 8px;
}

/* 大圆角 */
.t-radius-lg {
    border-radius: 16px;
}

/* 全圆角（pill形状） */
.t-radius-full {
    border-radius: 9999px;
}

/* ==================== Progress 进度条 ==================== */
/* 百分比内显 */
.t-progress--text-inside {
    height: 20px;
}

.t-progress--text-inside .t-progress__bar-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    min-width: 40px;
}

.t-progress--text-inside .t-progress__text {
    /* color: #ffffff !important; */
    color: var(--t-white) !important;
    font-size: 12px;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 不同高度的进度条 - 简化为低中高三个 */
/* 高 */
.t-progress--large {
    height: 16px;
}

.t-progress--large.t-progress--text-inside {
    height: 32px;
}

.t-progress--large.t-progress--text-inside .t-progress__text {
    font-size: 14px;
}

/* 中（默认） */
.t-progress--medium {
    height: 10px;
}

.t-progress--medium.t-progress--text-inside {
    height: 20px;
}

.t-progress--medium.t-progress--text-inside .t-progress__text {
    font-size: 11px;
}

/* 低 */
.t-progress--small {
    height: 6px;
}

.t-progress--small.t-progress--text-inside {
    height: 14px;
}

.t-progress--small.t-progress--text-inside .t-progress__text {
    font-size: 9px;
}

/* 百分比外显 */
.t-progress__text {
    display: inline-block;
    margin-left: 10px;
    font-size: 14px;
    color: var(--t-text-regular);
    min-width: 40px;
}

.t-progress--success .t-progress__text {
    color: var(--t-success);
}

.t-progress--warning .t-progress__text {
    color: var(--t-warning);
}

.t-progress--exception .t-progress__text {
    color: var(--t-danger);
}

/* 自定义颜色 */
.t-progress__bar-inner[style*="background"] {
    /* 允许内联样式覆盖 */
}

/* 环形进度条 */
.t-progress-circle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.t-progress-circle__svg {
    transform: rotate(-90deg);
}

.t-progress-circle__track {
    fill: none;
    stroke: var(--t-bg);
    stroke-width: 6;
    filter: drop-shadow(inset 2px 2px 4px rgba(163, 177, 198, 0.6)) 
            drop-shadow(inset -2px -2px 4px rgba(255, 255, 255, 0.8));
}

.t-progress-circle__path {
    fill: none;
    stroke: var(--t-primary);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
    filter: drop-shadow(2px 2px 4px rgba(163, 177, 198, 0.6)) 
            drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.8));
}

.t-progress-circle--success .t-progress-circle__path {
    stroke: var(--t-success);
}

.t-progress-circle--warning .t-progress-circle__path {
    stroke: var(--t-warning);
}

.t-progress-circle--exception .t-progress-circle__path {
    stroke: var(--t-danger);
}

.t-progress-circle__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
}

/* 仪表盘形进度条 */
.t-progress-dashboard {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.t-progress-dashboard__svg {
    transform: rotate(135deg);
}

.t-progress-dashboard__track {
    fill: none;
    stroke: var(--t-bg);
    stroke-width: 6;
    filter: drop-shadow(inset 2px 2px 4px rgba(163, 177, 198, 0.6)) 
            drop-shadow(inset -2px -2px 4px rgba(255, 255, 255, 0.8));
}

.t-progress-dashboard__path {
    fill: none;
    stroke: var(--t-primary);
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
    filter: drop-shadow(2px 2px 4px rgba(163, 177, 198, 0.6)) 
            drop-shadow(-2px -2px 4px rgba(255, 255, 255, 0.8));
}

.t-progress-dashboard--success .t-progress-dashboard__path {
    stroke: var(--t-success);
}

.t-progress-dashboard--warning .t-progress-dashboard__path {
    stroke: var(--t-warning);
}

.t-progress-dashboard--exception .t-progress-dashboard__path {
    stroke: var(--t-danger);
}

.t-progress-dashboard__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
}

/* 不同尺寸的环形进度条 */
.t-progress-circle--small,
.t-progress-dashboard--small {
    width: 80px;
    height: 80px;
}

.t-progress-circle--small .t-progress-circle__text,
.t-progress-dashboard--small .t-progress-dashboard__text {
    font-size: 12px;
}

.t-progress-circle--large,
.t-progress-dashboard--large {
    width: 150px;
    height: 150px;
}

.t-progress-circle--large .t-progress-circle__text,
.t-progress-dashboard--large .t-progress-dashboard__text {
    font-size: 20px;
}

/* 动画效果 */
@keyframes t-progress-indeterminate {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

.t-progress--indeterminate .t-progress__bar-inner {
    width: 50% !important;
    animation: t-progress-indeterminate 1.5s linear infinite;
    position: relative;
}

/* 条纹动画 */
.t-progress__bar-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 20px 20px;
    animation: t-progress-stripes 1s linear infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-progress--striped .t-progress__bar-inner::after {
    opacity: 1;
}

@keyframes t-progress-stripes {
    from {
        background-position: 20px 0;
    }
    to {
        background-position: 0 0;
    }
}

/* ==================== Tree 树形控件 ==================== */

/* Tree 网格布局容器 */
.tree-grid-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    padding: 20px;
}

/* Tree 网格项 */
.tree-grid-item {
    margin: 0 !important;
    min-height: 200px;
}

.tree-grid-item h3 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--t-text-primary);
}

.tree-grid-item .t-tree {
    padding: 8px;
    font-size: 12px;
}

.tree-grid-item .t-tree-node__content {
    height: 28px;
    padding: 0 4px;
}

.tree-grid-item .t-tree-node__expand-icon {
    width: 16px;
    height: 16px;
    margin-right: 4px;
}

.tree-grid-item .t-tree-node__expand-icon svg {
    width: 12px;
    height: 12px;
}

.tree-grid-item .t-tree-node__label {
    font-size: 12px;
}

/* 响应式：平板设备一行3个 */
@media (max-width: 1400px) {
    .tree-grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 响应式：小屏幕一行2个 */
@media (max-width: 1024px) {
    .tree-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 响应式：手机一行1个 */
@media (max-width: 768px) {
    .tree-grid-container {
        grid-template-columns: 1fr;
    }
}

/* 树形控件容器 */
.t-tree {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    padding: 16px;
    font-size: 14px;
    color: var(--t-text-regular);
}

/* 树节点 */
.t-tree-node {
    position: relative;
    white-space: nowrap;
    outline: none;
}

.t-tree-node__content {
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 8px;
    cursor: pointer;
    border-radius: var(--t-radius-sm);
    transition: var(--t-transition);
}

.t-tree-node__content:hover {
    background: rgba(64, 158, 255, 0.05);
}

.t-tree-node__content.is-current {
    background: rgba(64, 158, 255, 0.1);
}

.t-tree-node__content.is-current .t-tree-node__label {
    color: var(--t-primary);
    font-weight: 500;
}

/* 展开/折叠图标 */
.t-tree-node__expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    cursor: pointer;
    color: var(--t-text-secondary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 4px;
    flex-shrink: 0;
}

.t-tree-node__expand-icon svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.t-tree-node__expand-icon:hover {
    color: var(--t-primary);
    background: rgba(64, 158, 255, 0.1);
}

.t-tree-node__expand-icon.expanded svg {
    transform: rotate(90deg);
}

.t-tree-node__expand-icon.is-leaf {
    visibility: hidden;
    cursor: default;
}

/* 禁用状态的展开图标 */
.t-tree-node__expand-icon.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.t-tree-node.is-disabled .t-tree-node__expand-icon {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

/* 复选框 */
.t-tree-node__checkbox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 3px;
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    cursor: pointer;
    transition: var(--t-transition);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.t-tree-node__checkbox:hover {
    box-shadow: var(--t-inset);
}

.t-tree-node__checkbox.is-checked {
    background: var(--t-primary);
    box-shadow: var(--t-shadow-sm);
}

.t-tree-node__checkbox.is-checked::after {
    content: '✓';
    /* color: #fff; */
    color: var(--t-white);
    font-size: 11px;
    font-weight: bold;
}

.t-tree-node__checkbox.is-indeterminate {
    background: var(--t-primary);
    box-shadow: var(--t-shadow-sm);
}

.t-tree-node__checkbox.is-indeterminate::after {
    content: '';
    width: 8px;
    height: 2px;
    /* background: #fff; */
    background: var(--t-white);
}

.t-tree-node__checkbox.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* 节点标签 */
.t-tree-node__label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 子节点容器 */
.t-tree-node__children {
    overflow: hidden;
    transition: height 0.3s ease;
}

.t-tree-node__children.collapsed {
    height: 0;
}

/* 缩进 */
.t-tree-node__indent {
    display: inline-block;
    width: 24px;
}

/* 禁用状态 */
.t-tree-node.is-disabled > .t-tree-node__content {
    cursor: not-allowed;
    opacity: 0.5;
}

.t-tree-node.is-disabled > .t-tree-node__content:hover {
    background: transparent;
}

/* 高亮当前选中节点 */
.t-tree--highlight-current .t-tree-node.is-current > .t-tree-node__content {
    background: rgba(64, 158, 255, 0.1);
}

.t-tree--highlight-current .t-tree-node.is-current > .t-tree-node__content .t-tree-node__label {
    color: var(--t-primary);
    font-weight: 500;
}

/* 过滤高亮 */
.t-tree-node__label .highlight {
    color: var(--t-primary);
    font-weight: bold;
}

/* 拖拽样式 */
.t-tree-node.is-dragging > .t-tree-node__content {
    opacity: 0.5;
}

.t-tree-node__content.is-drag-over {
    background: rgba(64, 158, 255, 0.1);
    box-shadow: var(--t-inset-sm);
}

.t-tree-node.is-drop-inner > .t-tree-node__content {
    background: rgba(64, 158, 255, 0.2);
    box-shadow: var(--t-inset-sm);
}

.t-tree-node.is-drop-before > .t-tree-node__content::before,
.t-tree-node.is-drop-after > .t-tree-node__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--t-primary);
}

.t-tree-node.is-drop-before > .t-tree-node__content::before {
    top: 0;
}

.t-tree-node.is-drop-after > .t-tree-node__content::after {
    bottom: 0;
}

/* 空数据提示 */
.t-tree__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--t-text-secondary);
    font-size: 14px;
}

/* 过滤输入框 */
.t-tree-filter {
    margin-bottom: 16px;
}

.t-tree-filter input {
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    font-size: 14px;
    color: var(--t-text-regular);
    box-shadow: var(--t-inset);
    outline: none;
    transition: var(--t-transition);
}

.t-tree-filter input:focus {
    box-shadow: var(--t-inset), 0 0 0 2px var(--t-primary);
}

.t-tree-filter input::placeholder {
    color: var(--t-text-placeholder);
}

/* 手风琴模式 - 同级节点互斥展开 */
.t-tree--accordion .t-tree-node__content {
    position: relative;
}

/* 懒加载状态 */
.t-tree-node__loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    animation: t-tree-loading 1s linear infinite;
}

.t-tree-node__loading::after {
    content: '';
    width: 12px;
    height: 12px;
    border: 2px solid var(--t-bg);
    border-top-color: var(--t-primary);
    border-radius: 50%;
    box-shadow: var(--t-shadow-sm);
}

@keyframes t-tree-loading {
    to {
        transform: rotate(360deg);
    }
}

/* 自定义节点内容 */
.t-tree-node__custom-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.t-tree-node__custom-content .t-btn {
    padding: 2px 8px;
    font-size: 12px;
}

/* 树形控件尺寸 - 小型 */
.t-tree--small {
    font-size: 13px;
    padding: 12px;
}

.t-tree--small .t-tree-node__content {
    height: 28px;
}

/* 树形控件尺寸 - 大型 */
.t-tree--large {
    font-size: 15px;
    padding: 20px;
}

.t-tree--large .t-tree-node__content {
    height: 40px;
}

/* ==================== Pagination 分页 ==================== */

/* 分页容器 */
.t-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--t-text-regular);
    user-select: none;
}

/* 分页按钮基础样式 */
.t-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: var(--t-radius-sm);
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    color: var(--t-text-regular);
    font-size: 14px;
    cursor: pointer;
    transition: var(--t-transition);
    outline: none;
}

.t-pagination__btn:hover:not(:disabled) {
    color: var(--t-primary);
    box-shadow: var(--t-shadow);
}

.t-pagination__btn:active:not(:disabled) {
    box-shadow: var(--t-inset-sm);
}

.t-pagination__btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--t-text-placeholder);
}

/* 上一页/下一页按钮 */
.t-pagination__prev,
.t-pagination__next {
    padding: 0 12px;
    gap: 4px;
}

.t-pagination__prev svg,
.t-pagination__next svg {
    width: 16px;
    height: 16px;
}

/* 页码按钮 */
.t-pagination__pager {
    display: flex;
    align-items: center;
    gap: 6px;
}

.t-pagination__number {
    min-width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--t-radius-sm);
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    color: var(--t-text-regular);
    font-size: 14px;
    cursor: pointer;
    transition: var(--t-transition);
    border: none;
    outline: none;
}

.t-pagination__number:hover:not(:disabled) {
    color: var(--t-primary);
    box-shadow: var(--t-shadow);
}

.t-pagination__number.active {
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
    box-shadow: var(--t-shadow);
}

.t-pagination__number.active:hover:not(:disabled) {
    background: var(--t-primary-light);
}

/* 分页按钮选中状态 */
.t-pagination__item.is-active {
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
    box-shadow: var(--t-shadow);
}

.t-pagination__item.is-active:hover:not(:disabled) {
    background: var(--t-primary-light);
}

.t-pagination__number:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: var(--t-text-placeholder);
}

/* 省略号 */
.t-pagination__ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    color: var(--t-text-secondary);
    font-size: 14px;
    cursor: default;
}

/* 带有背景色的分页 */
.t-pagination--background .t-pagination__btn,
.t-pagination--background .t-pagination__number {
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
}

.t-pagination--background .t-pagination__number.active {
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
}

/* 带背景色的分页按钮选中状态 */
.t-pagination--background .t-pagination__item.is-active {
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
}

/* 小型分页 */
.t-pagination--small {
    gap: 6px;
    font-size: 13px;
}

.t-pagination--small .t-pagination__btn,
.t-pagination--small .t-pagination__number,
.t-pagination--small .t-pagination__ellipsis {
    min-width: 28px;
    height: 28px;
    font-size: 13px;
}

.t-pagination--small .t-pagination__prev,
.t-pagination--small .t-pagination__next {
    padding: 0 8px;
}

.t-pagination--small .t-pagination__prev svg,
.t-pagination--small .t-pagination__next svg {
    width: 14px;
    height: 14px;
}

/* 简洁版分页 */
.t-pagination--simple {
    gap: 4px;
}

.t-pagination--simple .t-pagination__btn {
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
}

.t-pagination--simple .t-pagination__simple-pager {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--t-text-regular);
}

.t-pagination--simple .t-pagination__simple-pager-input {
    width: 40px;
    height: 28px;
    border: none;
    border-radius: var(--t-radius-sm);
    background: var(--t-bg);
    text-align: center;
    font-size: 14px;
    color: var(--t-text-regular);
    outline: none;
}


.t-pagination--simple .t-pagination__simple-pager-text {
    color: var(--t-text-secondary);
}

/* 分页尺寸选择器 */
.t-pagination__sizes {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.t-pagination__sizes-select {
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: var(--t-radius-sm);
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    color: var(--t-text-regular);
    font-size: 14px;
    cursor: pointer;
    outline: none;
}

.t-pagination--small .t-pagination__sizes-select {
    height: 28px;
    font-size: 13px;
}

/* 跳转输入框 */
.t-pagination__jumper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.t-pagination__jumper-input {
    width: 50px;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: var(--t-radius-sm);
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    color: var(--t-text-regular);
    font-size: 14px;
    text-align: center;
    outline: none;
}

.t-pagination__jumper-input:focus {
    box-shadow: var(--t-inset), 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.t-pagination--small .t-pagination__jumper-input {
    width: 42px;
    height: 28px;
    font-size: 13px;
}

/* 总条数显示 */
.t-pagination__total {
    color: var(--t-text-secondary);
    font-size: 14px;
    margin-right: 8px;
}

.t-pagination--small .t-pagination__total {
    font-size: 13px;
}

/* 布局分隔符 */
.t-pagination__separator {
    color: var(--t-text-placeholder);
    margin: 0 4px;
}

/* ==================== Badge 标记 ==================== */

/* Badge 容器 */
.t-badge {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

/* Badge 内容 */
.t-badge__content {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--t-danger);
    /* color: #fff; */
    color: var(--t-white);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: center;
    white-space: nowrap;
    border-radius: 10px;
    box-shadow: var(--t-shadow-sm);
    z-index: 10;
    transition: var(--t-transition);
}

/* 不同类型 */
.t-badge__content--primary {
    background: var(--t-primary);
}

.t-badge__content--success {
    background: var(--t-success);
}

.t-badge__content--warning {
    background: var(--t-warning);
}

.t-badge__content--danger {
    background: var(--t-danger);
}

.t-badge__content--info {
    background: var(--t-info);
}

/* 小红点 */
.t-badge__content--dot {
    min-width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
}

/* 隐藏状态 */
.t-badge__content.is-hidden {
    display: none;
}

/* Badge 包装器（用于按钮等） */
.t-badge__wrapper {
    display: inline-block;
    position: relative;
}

/* Badge 在菜单项中的样式 */
.t-badge--menu .t-badge__content {
    position: static;
    transform: none;
    margin-left: 8px;
}

/* ==================== Avatar 头像 ==================== */

/* 头像基础样式 */
.t-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    color: var(--t-text-regular);
    font-size: 14px;
    overflow: hidden;
    vertical-align: middle;
    transition: var(--t-transition);
}

/* 圆形头像 */
.t-avatar--circle {
    border-radius: 50%;
}

/* 方形头像 */
.t-avatar--square {
    border-radius: var(--t-radius-sm);
}

/* 头像尺寸 - 大型 */
.t-avatar--large {
    width: 56px;
    height: 56px;
    font-size: 20px;
}

.t-avatar--large .t-avatar__icon {
    width: 28px;
    height: 28px;
}

/* 头像尺寸 - 中型（默认） */
.t-avatar--medium {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.t-avatar--medium .t-avatar__icon {
    width: 20px;
    height: 20px;
}

/* 头像尺寸 - 小型 */
.t-avatar--small {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.t-avatar--small .t-avatar__icon {
    width: 16px;
    height: 16px;
}

/* 头像图标 */
.t-avatar__icon {
    width: 20px;
    height: 20px;
    color: var(--t-text-secondary);
}

/* 头像图片 */
.t-avatar__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 图片适应方式 */
.t-avatar__image--fill {
    object-fit: fill;
}

.t-avatar__image--contain {
    object-fit: contain;
}

.t-avatar__image--cover {
    object-fit: cover;
}

.t-avatar__image--none {
    object-fit: none;
}

.t-avatar__image--scale-down {
    object-fit: scale-down;
}

/* 头像文字 */
.t-avatar__text {
    font-weight: 500;
    color: var(--t-text-regular);
}

/* 头像组 */
.t-avatar-group {
    display: inline-flex;
    align-items: center;
}

.t-avatar-group .t-avatar {
    margin-left: -8px;
    border: 2px solid var(--t-bg);
    box-shadow: var(--t-shadow-sm);
}

.t-avatar-group .t-avatar:first-child {
    margin-left: 0;
}

/* 头像组更多 */
.t-avatar-group__more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-left: -8px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    color: var(--t-text-secondary);
    font-size: 12px;
    border: 2px solid var(--t-bg);
    cursor: pointer;
}

/* ==================== Empty 空状态 ==================== */

/* 空状态容器 */
.t-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

/* 空状态图片 */
.t-empty__image {
    width: 160px;
    height: auto;
    margin-bottom: 20px;
    opacity: 0.8;
}

.t-empty__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* 空状态默认 SVG 图标 */
.t-empty__image--default {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    border-radius: var(--t-radius);
    margin-bottom: 20px;
}

.t-empty__image--default svg {
    width: 80px;
    height: 80px;
    color: var(--t-text-placeholder);
}

/* 空状态描述 */
.t-empty__description {
    color: var(--t-text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0;
}

/* 空状态底部内容 */
.t-empty__bottom {
    margin-top: 24px;
}

/* ==================== Descriptions 描述列表 ==================== */

/* 描述列表容器 */
.t-descriptions {
    background: var(--t-bg);
    border-radius: var(--t-radius);
}

/* 描述列表头部 */
.t-descriptions__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.t-descriptions__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
}

.t-descriptions__extra {
    font-size: 14px;
    color: var(--t-text-secondary);
}

/* 描述列表主体 */
.t-descriptions__body {
    width: 100%;
}

.t-descriptions__table {
    width: 100%;
    border-collapse: collapse;
}

/* 描述项 */
.t-descriptions__item {
    display: table-cell;
    padding: 12px 16px;
    vertical-align: top;
}

/* 无边框样式 */
.t-descriptions--default .t-descriptions__item {
    padding: 8px 16px 8px 0;
}

/* 带边框样式 */
.t-descriptions--bordered .t-descriptions__item {
    border: 1px solid rgba(0, 0, 0, 0.05);
    background: var(--t-bg);
}

.t-descriptions--bordered .t-descriptions__label {
    background: rgba(0, 0, 0, 0.02);
}

/* 标签 */
.t-descriptions__label {
    font-size: 14px;
    color: var(--t-text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.t-descriptions__label::after {
    content: ':';
    margin-left: 2px;
}

.t-descriptions--no-colon .t-descriptions__label::after {
    content: none;
}

/* 内容 */
.t-descriptions__content {
    font-size: 14px;
    color: var(--t-text-regular);
    word-break: break-all;
}

/* 尺寸 - 中等（默认） */
.t-descriptions--medium .t-descriptions__item {
    padding: 12px 16px;
}

.t-descriptions--medium .t-descriptions__label,
.t-descriptions--medium .t-descriptions__content {
    font-size: 14px;
}

/* 尺寸 - 小型 */
.t-descriptions--small .t-descriptions__item {
    padding: 8px 12px;
}

.t-descriptions--small .t-descriptions__label,
.t-descriptions--small .t-descriptions__content {
    font-size: 13px;
}

/* 尺寸 - 超小 */
.t-descriptions--mini .t-descriptions__item {
    padding: 4px 8px;
}

.t-descriptions--mini .t-descriptions__label,
.t-descriptions--mini .t-descriptions__content {
    font-size: 12px;
}

/* 垂直排列 */
.t-descriptions--vertical .t-descriptions__row {
    display: flex;
    flex-wrap: wrap;
}

.t-descriptions--vertical .t-descriptions__item {
    display: flex;
    flex-direction: column;
}

.t-descriptions--vertical .t-descriptions__label {
    margin-bottom: 4px;
}

/* 水平排列（默认） */
.t-descriptions--horizontal .t-descriptions__item {
    display: table-cell;
}

/* 行 */
.t-descriptions__row {
    display: table-row;
}

/* ==================== Result 结果 ==================== */

/* 结果容器 */
.t-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    text-align: center;
    background: var(--t-bg);
    border-radius: var(--t-radius);
}

/* 结果图标 */
.t-result__icon {
    width: 64px;
    height: 64px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.t-result__icon svg {
    width: 100%;
    height: 100%;
}

/* 成功状态 */
.t-result__icon--success {
    /* color: #67C23A; */
    color: var(--t-success);
}

.t-result__icon--success svg {
    filter: drop-shadow(0 2px 4px rgba(103, 194, 58, 0.3));
}

/* 警告状态 */
.t-result__icon--warning {
    /* color: #E6A23C; */
    color: var(--t-warning);
}

.t-result__icon--warning svg {
    filter: drop-shadow(0 2px 4px rgba(230, 162, 60, 0.3));
}

/* 错误状态 */
.t-result__icon--error {
    /* color: #F56C6C; */
    color: var(--t-danger);
}

.t-result__icon--error svg {
    filter: drop-shadow(0 2px 4px rgba(245, 108, 108, 0.3));
}

/* 信息状态 */
.t-result__icon--info {
    /* color: #909399; */
    color: var(--t-info);
}

.t-result__icon--info svg {
    filter: drop-shadow(0 2px 4px rgba(144, 147, 153, 0.3));
}

/* 结果标题 */
.t-result__title {
    font-size: 20px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

/* 结果副标题 */
.t-result__subtitle {
    font-size: 14px;
    color: var(--t-text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
    max-width: 400px;
}

/* 结果额外内容区 */
.t-result__extra {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 结果网格布局 */
.t-result-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    width: 100%;
}

.t-result-grid .t-result {
    box-shadow: var(--t-shadow);
}

/* 自定义图标样式 */
.t-result__icon--custom {
    width: 120px;
    height: 120px;
    border-radius: var(--t-radius);
    overflow: hidden;
    box-shadow: var(--t-shadow);
}

.t-result__icon--custom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ==================== Statistic 统计数值 ==================== */

/* 统计数值容器 */
.t-statistic {
    display: inline-block;
    text-align: left;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    padding: 20px;
    box-shadow: var(--t-shadow);
}

/* 统计数值标题 */
.t-statistic__title {
    font-size: 14px;
    color: var(--t-text-secondary);
    margin-bottom: 8px;
    line-height: 1.5;
}

/* 统计数值内容区 */
.t-statistic__content {
    display: flex;
    align-items: baseline;
    font-size: 24px;
    font-weight: 600;
    color: var(--t-text-primary);
    line-height: 1.4;
}

/* 前缀 */
.t-statistic__prefix {
    font-size: 18px;
    margin-right: 4px;
    color: var(--t-text-primary);
}

/* 数值 */
.t-statistic__value {
    font-variant-numeric: tabular-nums;
}

/* 后缀 */
.t-statistic__suffix {
    font-size: 14px;
    margin-left: 4px;
    color: var(--t-text-secondary);
}

/* 统计数值网格布局 */
.t-statistic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
    width: 100%;
}

/* 倒计时样式 */
.t-statistic--countdown .t-statistic__content {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

/* 统计数值卡片样式 */
.t-statistic-card {
    background: var(--t-bg);
    border-radius: var(--t-radius);
    padding: 24px;
    box-shadow: var(--t-shadow);
    transition: transform 0.3s ease;
}

.t-statistic-card:hover {
    transform: translateY(-2px);
}

.t-statistic-card .t-statistic {
    box-shadow: none;
    padding: 0;
}

/* 大数值样式 */
.t-statistic--large .t-statistic__content {
    font-size: 32px;
}

.t-statistic--large .t-statistic__prefix,
.t-statistic--large .t-statistic__suffix {
    font-size: 24px;
}

/* 小数值样式 */
.t-statistic--small .t-statistic__content {
    font-size: 18px;
}

.t-statistic--small .t-statistic__prefix,
.t-statistic--small .t-statistic__suffix {
    font-size: 14px;
}

/* 迷你数值样式 */
.t-statistic--mini .t-statistic__content {
    font-size: 14px;
}

.t-statistic--mini .t-statistic__prefix,
.t-statistic--mini .t-statistic__suffix {
    font-size: 12px;
}

/* 强调数值 */
.t-statistic--primary .t-statistic__value {
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-statistic--success .t-statistic__value {
    /* color: #67C23A; */
    color: var(--t-success);
}

.t-statistic--warning .t-statistic__value {
    /* color: #E6A23C; */
    color: var(--t-warning);
}

.t-statistic--danger .t-statistic__value {
    /* color: #F56C6C; */
    color: var(--t-danger);
}

/* ==================== Radio 单选框 ==================== */

/* 单选框容器 */
.t-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    /* margin-right: 20px; */
    user-select: none;
    position: relative;
    /* padding: 6px 12px; */
    border-radius: var(--t-radius);
    transition: all 0.3s ease;
}

.t-radio:last-child {
    margin-right: 0;
}

/* 单选框默认状态 - 简洁无阴影 */
.t-radio {
    background: transparent;
    box-shadow: none;
}

/* 单选框选中状态 - 整体凹陷 */
.t-radio.is-checked {
    /* box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8); */
    /* background: rgba(64, 158, 255, 0.08); */
}

/* 隐藏原生单选框 */
.t-radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 单选框样式 */
.t-radio__inner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    margin-right: 6px;
}

/* 选中状态 - 凹陷效果 */
.t-radio__input:checked + .t-radio__inner {
    box-shadow: var(--t-inset-shadow-sm);
}

.t-radio__input:checked + .t-radio__inner::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--t-primary-hex);
    display: block;
    /* box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2); */
}

/* 标签文字 */
.t-radio__label {
    font-size: 14px;
    color: var(--t-text-regular);
    transition: color 0.3s ease;
}

.t-radio__input:checked ~ .t-radio__label {
    color: var(--t-primary-hex);
}

/* 禁用状态 */
.t-radio.is-disabled {
    cursor: not-allowed;
}

.t-radio.is-disabled .t-radio__inner {
    /* box-shadow: var(--t-inset); */
    opacity: 0.6;
}

.t-radio.is-disabled .t-radio__input:checked + .t-radio__inner::after {
    background: var(--t-disabled-color);
}

.t-radio.is-disabled .t-radio__label {
    color: var(--t-disabled-color);
}

/* 带边框的单选框 */
.t-radio.is-bordered {
    padding: 8px 16px;
    border-radius: var(--t-radius);
    background: var(--t-bg);
    /* box-shadow: var(--t-shadow); */
    transition: all 0.3s ease;
}

.t-radio.is-bordered:hover {
    box-shadow: var(--t-shadow-hover);
}

.t-radio.is-bordered.is-checked {
    box-shadow: var(--t-inset-shadow-md);
    border: 1px solid var(--t-primary-hex);
}

/* 单选框组 */
.t-radio-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 按钮样式单选框组 */
.t-radio-group.is-button {
    gap: 0;
    display: inline-flex;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}

.t-radio-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--t-bg);
    cursor: pointer;
    font-size: 14px;
    color: var(--t-text-regular);
    transition: all 0.3s ease;
    position: relative;
    user-select: none;
    box-shadow: none;
    border: none;
}

.t-radio-button:hover {
    color: var(--t-primary-hex);
}

.t-radio-button.is-active {
    background: var(--t-primary-hex);
    /* color: #fff; */
    color: var(--t-white);
    box-shadow: var(--t-inset-shadow-button);
}

/* 按钮尺寸 */
.t-radio-group.is-button.is-medium .t-radio-button {
    padding: 8px 16px;
    font-size: 14px;
}

.t-radio-group.is-button.is-small .t-radio-button {
    padding: 6px 12px;
    font-size: 13px;
}

.t-radio-group.is-button.is-mini .t-radio-button {
    padding: 4px 8px;
    font-size: 12px;
}

/* 禁用状态按钮 */
.t-radio-button.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
    color: var(--t-disabled-color);
}

.t-radio-button.is-disabled:hover {
    color: var(--t-disabled-color);
}

/* 单选框尺寸 */
.t-radio.is-medium .t-radio__inner {
    width: 18px;
    height: 18px;
}

.t-radio.is-medium .t-radio__inner::after {
    width: 9px;
    height: 9px;
}

.t-radio.is-small .t-radio__inner {
    width: 14px;
    height: 14px;
}

.t-radio.is-small .t-radio__inner::after {
    width: 7px;
    height: 7px;
}

.t-radio.is-mini .t-radio__inner {
    width: 12px;
    height: 12px;
}

.t-radio.is-mini .t-radio__inner::after {
    width: 6px;
    height: 6px;
}

/* ==================== Checkbox 多选框 ==================== */

/* 多选框容器 - 参考单选框样式 */
.t-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 20px;
    user-select: none;
    position: relative;
    padding: 6px 12px;
    border-radius: var(--t-radius);
    transition: all 0.3s ease;
}

.t-checkbox:last-child {
    margin-right: 0;
}

/* 多选框默认状态 - 简洁无阴影 */
.t-checkbox {
    background: transparent;
    box-shadow: none;
}

/* 多选框选中状态 - 整体凹陷 */
.t-checkbox.is-checked {
    /* box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    background: rgba(64, 158, 255, 0.08); */
}

/* 隐藏原生多选框 */
.t-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* 多选框样式 - 参考单选框，方形改为圆角方形 */
.t-checkbox__inner {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--t-bg);
    box-shadow: var(--t-shadow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    margin-right: 6px;
}

/* 选中状态 - 凹陷效果 */
.t-checkbox__input:checked + .t-checkbox__inner {
    box-shadow: var(--t-inset-shadow-sm);
    background: var(--t-bg);
}

/* 选中时的勾选图标 - 蓝色对勾 */
.t-checkbox__input:checked + .t-checkbox__inner::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid var(--t-primary-hex);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    display: block;
    margin-top: -2px;
    margin-left: 2px;
    box-shadow: none;
}

/* 半选状态 */
.t-checkbox.is-indeterminate .t-checkbox__inner {
    box-shadow: var(--t-inset-shadow-sm);
    background: var(--t-bg);
}

.t-checkbox.is-indeterminate .t-checkbox__inner::after {
    content: '';
    width: 8px;
    height: 2px;
    background: var(--t-primary-hex);
    display: block;
    border: none;
    transform: none;
    margin-top: 0;
}

/* 标签文字 */
.t-checkbox__label {
    font-size: 14px;
    color: var(--t-text-regular);
    transition: color 0.3s ease;
}

.t-checkbox__input:checked ~ .t-checkbox__label {
    color: var(--t-primary-hex);
}

/* 禁用状态 */
.t-checkbox.is-disabled {
    cursor: not-allowed;
}

.t-checkbox.is-disabled .t-checkbox__inner {
    box-shadow: var(--t-inset);
    opacity: 0.6;
}

.t-checkbox.is-disabled .t-checkbox__input:checked + .t-checkbox__inner::after {
    border-color: var(--t-disabled-color);
}

.t-checkbox.is-disabled .t-checkbox__label {
    color: var(--t-disabled-color);
}

/* 带边框的多选框 */
.t-checkbox.is-bordered {
    padding: 8px 16px;
    border-radius: var(--t-radius);
    background: var(--t-bg);
    /* box-shadow: var(--t-shadow); */
    transition: all 0.3s ease;
}

.t-checkbox.is-bordered:hover {
    box-shadow: var(--t-shadow-hover);
}

.t-checkbox.is-bordered.is-checked {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
    /* border: 1px solid #409EFF; */
    border: 1px solid var(--t-primary);
}

/* 多选框组 */
.t-checkbox-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 按钮样式多选框组 */
.t-checkbox-group.is-button {
    gap: 0;
    display: inline-flex;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}

.t-checkbox-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background: var(--t-bg);
    cursor: pointer;
    font-size: 14px;
    color: var(--t-text-regular);
    transition: all 0.3s ease;
    position: relative;
    user-select: none;
    box-shadow: none;
    border: none;
}

.t-checkbox-button:hover {
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-checkbox-button.is-active {
    /* background: #409EFF; */
    /* color: #fff; */
    background: var(--t-primary);
    color: var(--t-white);
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.2), inset -2px -2px 5px rgba(255, 255, 255, 0.1);
}

/* 按钮尺寸 */
.t-checkbox-group.is-button.is-medium .t-checkbox-button {
    padding: 8px 16px;
    font-size: 14px;
}

.t-checkbox-group.is-button.is-small .t-checkbox-button {
    padding: 6px 12px;
    font-size: 13px;
}

.t-checkbox-group.is-button.is-mini .t-checkbox-button {
    padding: 4px 8px;
    font-size: 12px;
}

/* 禁用状态按钮 */
.t-checkbox-button.is-disabled {
    cursor: not-allowed;
    opacity: 0.6;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

.t-checkbox-button.is-disabled:hover {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

/* 多选框尺寸 */
.t-checkbox.is-medium .t-checkbox__inner {
    width: 18px;
    height: 18px;
}

.t-checkbox.is-medium .t-checkbox__input:checked + .t-checkbox__inner::after {
    width: 6px;
    height: 10px;
}

.t-checkbox.is-small .t-checkbox__inner {
    width: 14px;
    height: 14px;
}

.t-checkbox.is-small .t-checkbox__input:checked + .t-checkbox__inner::after {
    width: 4px;
    height: 8px;
}

.t-checkbox.is-mini .t-checkbox__inner {
    width: 12px;
    height: 12px;
}

.t-checkbox.is-mini .t-checkbox__input:checked + .t-checkbox__inner::after {
    width: 4px;
    height: 7px;
}

/* ==================== Input 输入框 ==================== */

/* 输入框容器 */
.t-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 100%;
}

/* 输入框主体 */
.t-input__inner {
    width: 100%;
    height: 40px;
    padding: 0 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    box-shadow: var(--t-inset-sm);
    border: none;
    border-radius: var(--t-radius);
    /* box-shadow: var(--t-inset); */
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
}

.t-input__inner::placeholder {
    /* color: #C0C4CC; */
    color: var(--t-text-placeholder);
}

.t-input__inner:hover {
    /* box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.12), inset -4px -4px 8px rgba(255, 255, 255, 0.9); */
    box-shadow: var(--t-inset-lg);
}

.t-input__inner:focus {
    /* box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.15), inset -5px -5px 10px rgba(255, 255, 255, 0.95); */
    box-shadow: var(--t-inset-lg);
}

/* 禁用状态 */
.t-input.is-disabled .t-input__inner {
    /* background: #F5F7FA; */
    /* color: #bbbbbb; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    background: var(--t-bg-disabled);
    box-shadow: var(--t-inset-sm);
}

/* 带图标的输入框 */
.t-input--prefix .t-input__inner {
    padding-left: 40px;
}

.t-input--suffix .t-input__inner {
    padding-right: 40px;
}

.t-input__prefix,
.t-input__suffix {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* color: #909399; */
    color: var(--t-text-secondary);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 100%;
    pointer-events: none;
}

.t-input__prefix {
    left: 5px;
}

.t-input__suffix {
    right: 5px;
    pointer-events: auto;
}

.t-input__suffix-icon {
    cursor: pointer;
    transition: color 0.3s ease;
}

.t-input__suffix-icon:hover {
    /* color: #409EFF; */
    color: var(--t-primary);
}

/* 可清空按钮 */
.t-input__clear {
    cursor: pointer;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    transition: color 0.3s ease;
    font-size: 14px;
}

.t-input__clear:hover {
    /* color: #909399; */
    color: var(--t-text-secondary);
}

/* 密码显示切换 */
.t-input__password {
    cursor: pointer;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    transition: color 0.3s ease;
    font-size: 14px;
}

.t-input__password:hover {
    /* color: #409EFF; */
    color: var(--t-primary);
}

/* 文本域 */
.t-textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    
}

.t-textarea__inner {
    width: 100%;
    min-height: 80px;
    padding: 12px 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    /* box-shadow: var(--t-inset); */
    box-shadow: var(--t-inset-sm);
    outline: none;
    transition: all 0.3s ease;
    font-family: inherit;
    resize: vertical;
    line-height: 1.5;
}

.t-textarea__inner::placeholder {
    color: var(--t-disabled-color);
}

.t-textarea__inner:hover {
    box-shadow: var(--t-inset-shadow-lg);
}

.t-textarea__inner:focus {
    box-shadow: var(--t-inset-shadow-xl);
}

.t-textarea.is-disabled .t-textarea__inner {
    background: var(--t-bg-disabled);
    color: var(--t-disabled-color);
    cursor: not-allowed;
    resize: none;
}

/* 字数统计 */
.t-input__count {
    position: absolute;
    right: 12px;
    bottom: 8px;
    font-size: 12px;
    /* color: #909399; */
    color: var(--t-text-secondary);
    background: var(--t-bg);
    padding: 2px 6px;
    border-radius: 4px;
    box-shadow: var(--t-shadow-sm);
}

.t-textarea .t-input__count {
    bottom: 8px;
}

/* 复合输入框 */
.t-input-group {
    display: inline-flex;
    align-items: center;
    width: 100%;
}

.t-input-group__prepend,
.t-input-group__append {
    display: inline-flex;
    align-items: center;
    padding: 0 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    white-space: nowrap;
    height: 40px;
}

.t-input-group__prepend {
    border-radius: var(--t-radius) 0 0 var(--t-radius);
    margin-right: -5px;
    z-index: 1;
}

.t-input-group__append {
    border-radius: 0 var(--t-radius) var(--t-radius) 0;
    margin-left: -5px;
    z-index: 1;
}

.t-input-group .t-input {
    box-shadow:none !important;
    flex: 1;
}

.t-input-group .t-input__inner {
    border-radius: 0;
    position: relative;
    z-index: 2;
}

.t-input-group .t-input:first-child .t-input__inner {
    border-radius: var(--t-radius) 0 0 var(--t-radius);
}

.t-input-group .t-input:last-child .t-input__inner {
    border-radius: 0 var(--t-radius) var(--t-radius) 0;
}

/* 复合输入框尺寸 */
.t-input-group.is-medium .t-input-group__prepend,
.t-input-group.is-medium .t-input-group__append {
    height: 36px;
    font-size: 14px;
}

.t-input-group.is-small .t-input-group__prepend,
.t-input-group.is-small .t-input-group__append {
    height: 32px;
    font-size: 13px;
    padding: 0 12px;
}

.t-input-group.is-mini .t-input-group__prepend,
.t-input-group.is-mini .t-input-group__append {
    height: 28px;
    font-size: 12px;
    padding: 0 10px;
}

/* 输入框尺寸 */
.t-input--medium .t-input__inner {
    height: 36px;
    font-size: 14px;
}

.t-input--small .t-input__inner {
    height: 32px;
    font-size: 13px;
    padding: 0 12px;
}

.t-input--mini .t-input__inner {
    height: 28px;
    font-size: 12px;
    padding: 0 10px;
}

/* 尺寸对应的前缀/后缀 */
.t-input--medium .t-input__prefix,
.t-input--medium .t-input__suffix {
    font-size: 15px;
}

.t-input--small .t-input__prefix,
.t-input--small .t-input__suffix {
    font-size: 14px;
}

.t-input--mini .t-input__prefix,
.t-input--mini .t-input__suffix {
    font-size: 13px;
}

/* ==================== InputNumber 计数器 ==================== */

/* 计数器容器 */
.t-input-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 180px;
}

/* 计数器输入框容器 */
.t-input-number .t-input {
    width: 100%;
    position: relative;
    z-index: 1;
}

/* 计数器输入框 */
.t-input-number .t-input__inner {
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    position: relative;
}

/* 隐藏 number 输入框的默认箭头 */
.t-input-number .t-input__inner::-webkit-outer-spin-button,
.t-input-number .t-input__inner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.t-input-number .t-input__inner[type="number"] {
    -moz-appearance: textfield;
}

/* 控制按钮容器 */
.t-input-number__controls {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
}

.t-input-number__controls--left {
    left: 5px;
    z-index: 10;
}

.t-input-number__controls--right {
    right: 5px;
    z-index: 10;
}

/* 控制按钮 */
.t-input-number__decrease,
.t-input-number__increase {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    cursor: pointer;
    font-size: 14px;
    color: var(--t-text-regular);
    transition: all 0.2s ease;
    user-select: none;
    position: relative;
}

.t-input-number__decrease:hover,
.t-input-number__increase:hover {
    box-shadow: var(--t-shadow);
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-input-number__decrease:active,
.t-input-number__increase:active {
    box-shadow: var(--t-inset);
}

.t-input-number__decrease.is-disabled,
.t-input-number__increase.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: var(--t-inset);
}

/* 按钮在右侧的布局 */
.t-input-number.is-controls-right {
    width: 150px;
}

.t-input-number.is-controls-right .t-input__inner {
    padding: 0 45px 0 15px;
    text-align: left;
}

.t-input-number.is-controls-right .t-input-number__controls--right {
    right: 5px;
    flex-direction: column;
    gap: 2px;
}

.t-input-number.is-controls-right .t-input-number__decrease,
.t-input-number.is-controls-right .t-input-number__increase {
    width: 28px;
    height: 18px;
    font-size: 12px;
}

/* 禁用状态 */
.t-input-number.is-disabled .t-input__inner {
    background: var(--t-bg-disabled);
    color: var(--t-disabled-color);
    cursor: not-allowed;
}

.t-input-number.is-disabled .t-input-number__decrease,
.t-input-number.is-disabled .t-input-number__increase {
    cursor: not-allowed;
    opacity: 0.5;
    box-shadow: var(--t-inset);
}

/* 计数器尺寸 */
.t-input-number.is-medium {
    width: 170px;
}

.t-input-number.is-medium .t-input__inner {
    height: 36px;
    padding: 0 45px;
}

.t-input-number.is-medium .t-input-number__decrease,
.t-input-number.is-medium .t-input-number__increase {
    width: 30px;
    height: 30px;
}

.t-input-number.is-small {
    width: 160px;
}

.t-input-number.is-small .t-input__inner {
    height: 32px;
    padding: 0 40px;
    font-size: 13px;
}

.t-input-number.is-small .t-input-number__decrease,
.t-input-number.is-small .t-input-number__increase {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

.t-input-number.is-mini {
    width: 140px;
}

.t-input-number.is-mini .t-input__inner {
    height: 28px;
    padding: 0 35px;
    font-size: 12px;
}

.t-input-number.is-mini .t-input-number__decrease,
.t-input-number.is-mini .t-input-number__increase {
    width: 24px;
    height: 24px;
    font-size: 12px;
}

/* 右侧按钮尺寸 */
.t-input-number.is-controls-right.is-medium {
    width: 140px;
}

.t-input-number.is-controls-right.is-small {
    width: 130px;
}

.t-input-number.is-controls-right.is-mini {
    width: 120px;
}

/* ==================== 打印样式 ==================== */

@media print {
    .t-raised,
    .t-raised-sm,
    .t-raised-lg,
    .t-btn,
    .t-icon-btn,
    .t-card,
    .t-tag,
    .t-alert,
    .t-pagination,
    .t-table,
    .t-menu,
    .t-breadcrumb {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
    
    .t-inset,
    .t-inset-sm,
    .t-inset-lg,
    .t-input {
        box-shadow: none !important;
        border: 1px solid #ddd !important;
    }
}

/* ==================== Select 选择器 ==================== */

/* 选择器容器 */
.t-select {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

/* 选择器输入框 */
.t-select__input {
    width: 100%;
    height: 40px;
    padding: 0 35px 0 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
}

.t-select__input::placeholder {
    /* color: #C0C4CC; */
    color: var(--t-text-placeholder);
}

.t-select__input:hover {
    box-shadow: var(--t-inset-sm);
}

.t-select.is-open .t-select__input {
    box-shadow: var(--t-inset-sm);
}

/* 下拉箭头 */
.t-select__arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    pointer-events: none;
    transition: transform 0.3s ease;
}

.t-select.is-open .t-select__arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* 可清空按钮 */
.t-select__clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

.t-select:hover .t-select__clear {
    opacity: 1;
}

.t-select__clear:hover {
    /* color: #909399; */
    color: var(--t-text-secondary);
}

/* 下拉菜单 */
.t-select__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    max-height: 274px;
    overflow-y: auto;
    padding: 6px 0;
}

.t-select.is-open .t-select__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 下拉选项 */
.t-select__option {
    padding: 10px 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.t-select__option:hover {
    box-shadow: var(--t-inset-sm);
    /* background: rgba(64, 158, 255, 0.1); */
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-select__option.is-selected {
    /* color: #409EFF; */
    color: var(--t-primary);
    font-weight: 500;
}

.t-select__option.is-disabled {
    /* color: #abaeb4; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    background: transparent;
}

/* 选项分组 */
.t-select__group-label {
    padding: 8px 15px;
    font-size: 12px;
    /* color: #bebfc2; */
    color: var(--t-text-placeholder);
    font-weight: 500;
    text-transform: uppercase;
}

/* 多选标签 */
.t-select__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 30px 4px 8px;
    min-height: 32px;
    align-items: center;
}

.t-select__tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--t-bg);
    border-radius: 4px;
    box-shadow: var(--t-shadow-sm);
    font-size: 12px;
    color: var(--t-text-regular);
}

.t-select__tag-close {
    margin-left: 6px;
    font-size: 10px;
    cursor: pointer;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    transition: color 0.2s ease;
}

.t-select__tag-close:hover {
    /* color: #F56C6C; */
    color: var(--t-danger);
}

/* 禁用状态 */
.t-select.is-disabled .t-select__input {
    /* background: #F5F7FA; */
    /* color: #C0C4CC; */
    background: var(--t-bg-disabled);
    color: var(--t-disabled-color);
    cursor: not-allowed;
    box-shadow: var(--t-inset);
}

.t-select.is-disabled .t-select__arrow {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

/* 选择器尺寸 */
.t-select.is-medium .t-select__input {
    height: 36px;
    font-size: 14px;
}

.t-select.is-small .t-select__input {
    height: 32px;
    font-size: 13px;
    padding: 0 30px 0 12px;
}

.t-select.is-mini .t-select__input {
    height: 28px;
    font-size: 12px;
    padding: 0 28px 0 10px;
}

/* 空状态 */
.t-select__empty {
    padding: 20px 15px;
    text-align: center;
    color: var(--t-text-secondary);
    font-size: 14px;
}

/* ==================== Cascader 级联选择器 ==================== */

/* 级联选择器容器 */
.t-cascader {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 300px;
}

/* 级联选择器输入框 */
.t-cascader__input {
    width: 100%;
    height: 40px;
    padding: 0 35px 0 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.t-cascader__input::placeholder {
    /* color: #C0C4CC; */
    color: var(--t-text-placeholder);
}

.t-cascader__input:hover {
    box-shadow: var(--t-inset-sm);
}

.t-cascader.is-open .t-cascader__input {
    box-shadow: var(--t-inset-sm);
}

/* 下拉箭头 */
.t-cascader__arrow {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    pointer-events: none;
    transition: transform 0.3s ease;
}

.t-cascader.is-open .t-cascader__arrow {
    transform: translateY(-50%) rotate(180deg);
}

/* 可清空按钮 */
.t-cascader__clear {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: pointer;
    opacity: 0;
    transition: all 0.3s ease;
}

.t-cascader:hover .t-cascader__clear {
    opacity: 1;
}

.t-cascader__clear:hover {
    /* color: #909399; */
    color: var(--t-text-secondary);
}

/* 级联菜单容器 */
.t-cascader__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    display: flex;
    padding: 6px 0;
}

.t-cascader.is-open .t-cascader__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 级联菜单面板 */
.t-cascader__menu {
    min-width: 160px;
    max-height: 300px;
    overflow-y: auto;
    border-right: 1px solid var(--t-border-color-light);
}

.t-cascader__menu:last-child {
    border-right: none;
}

/* 级联选项 */
.t-cascader__option {
    padding: 10px 20px 10px 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}

.t-cascader__option:hover {
    box-shadow: var(--t-inset-sm);
    /* background: rgba(64, 158, 255, 0.1); */
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-cascader__option.is-selected {
    /* color: #409EFF; */
    color: var(--t-primary);
    font-weight: 500;
}

.t-cascader__option.is-active {
    box-shadow: var(--t-inset-sm);
    /* background: rgba(64, 158, 255, 0.15); */
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-cascader__option.is-disabled {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    background: transparent;
}

/* 选项展开箭头 */
.t-cascader__option-arrow {
    font-size: 10px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    margin-left: 10px;
}

/* 禁用状态 */
.t-cascader.is-disabled .t-cascader__input {
    /* background: #F5F7FA; */
    /* color: #C0C4CC; */
    background: var(--t-bg-disabled);
    color: var(--t-disabled-color);
    cursor: not-allowed;
    box-shadow: var(--t-inset);
}

.t-cascader.is-disabled .t-cascader__arrow {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

/* 级联选择器尺寸 */
.t-cascader.is-medium .t-cascader__input {
    height: 36px;
    font-size: 14px;
}

.t-cascader.is-small .t-cascader__input {
    height: 32px;
    font-size: 13px;
    padding: 0 30px 0 12px;
}

.t-cascader.is-mini .t-cascader__input {
    height: 28px;
    font-size: 12px;
    padding: 0 28px 0 10px;
}

/* ==================== Switch 开关 ==================== */

/* 开关容器 */
.t-switch {
    display: inline-flex;
    align-items: center;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    height: 20px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
}

.t-switch.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* 开关输入框（隐藏） */
.t-switch__input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
}

/* 开关核心 */
.t-switch__core {
    display: inline-block;
    position: relative;
    width: 44px;
    height: 24px;
    border-radius: 12px;
    background: var(--t-bg);
    box-shadow: var(--t-inset), inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    flex-shrink: 0;
}

.t-switch.is-checked .t-switch__core {
    /* background: #409EFF; */
    background: var(--t-primary);
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.3);
}

/* 开关按钮 */
.t-switch__button {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* background: linear-gradient(145deg, #ffffff 0%, #e8e8e8 100%); */
    background: linear-gradient(145deg, var(--t-white) 0%, #e8e8e8 100%);
    box-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.2), 
        -1px -1px 3px rgba(255, 255, 255, 0.9),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.t-switch.is-checked .t-switch__button {
    left: calc(100% - 22px);
    /* background: linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%); */
    /* background: linear-gradient(145deg, var(--t-white) 0%, #f5f5f5 100%); */
    background: linear-gradient(145deg, var(--t-white) 0%, var(--t-bg) 100%);
    box-shadow: 
        2px 2px 6px rgba(0, 0, 0, 0.25), 
        /* -1px -1px 3px rgba(255, 255, 255, 1), */
        -1px -1px 3px var(--t-white),
        /* inset 0 1px 2px rgba(255, 255, 255, 0.9); */
        inset 0 1px 2px var(--t-white-rgba-90);
}

/* 开关按钮内部高光 */
.t-switch__button::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 5px;
    width: 6px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.8);
    filter: blur(1px);
}

/* 开关文字 */
.t-switch__label {
    margin-left: 10px;
    font-size: 14px;
    color: var(--t-text-regular);
    transition: all 0.3s ease;
    white-space: nowrap;
    font-weight: 500;
}

.t-switch__label--left {
    margin-left: 0;
    margin-right: 10px;
}

.t-switch.is-checked .t-switch__label {
    color: var(--t-primary);
}

/* 开关悬停效果 */
.t-switch:hover .t-switch__core {
    box-shadow: var(--t-inset), inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.t-switch:hover .t-switch__button {
    box-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.25), 
        -1px -1px 3px rgba(255, 255, 255, 0.9),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.t-switch.is-checked:hover .t-switch__core {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.25), inset -2px -2px 4px rgba(255, 255, 255, 0.3);
}

.t-switch.is-checked .t-switch__label {
    color: var(--t-primary);
}

/* 开关尺寸 - Large */
.t-switch.is-large {
    height: 32px;
    line-height: 32px;
}

.t-switch.is-large .t-switch__core {
    width: 56px;
    height: 30px;
    border-radius: 15px;
}

.t-switch.is-large .t-switch__button {
    width: 26px;
    height: 26px;
    top: 2px;
    left: 2px;
}

.t-switch.is-large .t-switch__button::after {
    width: 8px;
    height: 5px;
    top: 4px;
    left: 6px;
}

.t-switch.is-large.is-checked .t-switch__button {
    left: calc(100% - 28px);
}

/* 开关尺寸 - Small */
.t-switch.is-small {
    height: 18px;
    line-height: 18px;
}

.t-switch.is-small .t-switch__core {
    width: 36px;
    height: 18px;
    border-radius: 9px;
}

.t-switch.is-small .t-switch__button {
    width: 14px;
    height: 14px;
    top: 2px;
    left: 2px;
}

.t-switch.is-small .t-switch__button::after {
    width: 4px;
    height: 3px;
    top: 2px;
    left: 4px;
}

.t-switch.is-small.is-checked .t-switch__button {
    left: calc(100% - 16px);
}

/* ==================== Slider 滑块 ==================== */

/* 滑块容器 */
.t-slider {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
}

.t-slider.is-vertical {
    height: 200px;
    width: 38px;
    flex-direction: column;
}

/* 滑块运行轨道 */
.t-slider__runway {
    flex: 1;
    height: 6px;
    background: var(--t-bg);
    border-radius: 3px;
    box-shadow: var(--t-inset-sm);
    position: relative;
    cursor: pointer;
}

.t-slider.is-vertical .t-slider__runway {
    width: 6px;
    height: 100%;
}

/* 滑块已填充部分 */
.t-slider__bar {
    height: 6px;
    background: linear-gradient(90deg, var(--t-primary) 0%, #66b1ff 100%);
    border-radius: 3px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
}

.t-slider.is-vertical .t-slider__bar {
    width: 6px;
    height: auto;
    bottom: 0;
}

/* 滑块按钮 */
.t-slider__button-wrapper {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    z-index: 10;
}

.t-slider__button-wrapper:hover {
    cursor: grab;
}

.t-slider__button-wrapper:active {
    cursor: grabbing;
}

.t-slider.is-vertical .t-slider__button-wrapper {
    left: 50%;
    transform: translate(-50%, 50%);
}

/* 滑块按钮 */
.t-slider__button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    /* background: linear-gradient(145deg, #ffffff 0%, #e8e8e8 100%); */
    background: linear-gradient(145deg, var(--t-white) 0%, var(--t-bg) 100%);
    box-shadow: 
        2px 2px 5px rgba(0, 0, 0, 0.2), 
        /* -1px -1px 3px rgba(255, 255, 255, 0.9), */
        -1px -1px 3px var(--t-white-rgba-90),
        /* inset 0 1px 1px rgba(255, 255, 255, 0.8); */
        inset 0 1px 1px var(--t-white-rgba-80);
    transition: all 0.2s ease;
}

.t-slider__button-wrapper:hover .t-slider__button {
    transform: scale(1.2);
    box-shadow: 
        3px 3px 7px rgba(0, 0, 0, 0.25), 
        -1px -1px 4px rgba(255, 255, 255, 0.9),
        inset 0 1px 1px rgba(255, 255, 255, 0.8);
}

.t-slider__button-wrapper:active .t-slider__button {
    box-shadow: var(--t-inset-sm);
    transform: scale(0.95);
}

/* 滑块提示 */
.t-slider__tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--t-bg);
    padding: 6px 10px;
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-shadow);
    font-size: 12px;
    color: var(--t-text-regular);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.t-slider__tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0;
    border-style: solid;
    border-color: var(--t-bg) transparent transparent transparent;
}

.t-slider__button-wrapper:hover .t-slider__tooltip,
.t-slider__button-wrapper:active .t-slider__tooltip {
    opacity: 1;
    visibility: visible;
}

/* 间断点 */
.t-slider__stop {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--t-bg);
    box-shadow: var(--t-shadow-sm);
}

/* 标记 */
.t-slider__marks {
    position: absolute;
    top: 18px;
    left: 0;
    right: 0;
    height: 20px;
}

.t-slider__marks-text {
    position: absolute;
    transform: translateX(-50%);
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* 数值显示 */
.t-slider__value {
    margin-left: 12px;
    font-size: 14px;
    color: var(--t-text-regular);
    min-width: 30px;
    text-align: right;
}

/* 滑块尺寸 */
.t-slider.t-slider--large {
    height: 48px;
}

.t-slider.t-slider--large .t-slider__runway {
    height: 8px;
}

.t-slider.t-slider--large .t-slider__bar {
    height: 8px;
}

.t-slider.t-slider--large .t-slider__button {
    width: 26px;
    height: 26px;
}

.t-slider.t-slider--large .t-slider__button-wrapper {
    width: 42px;
    height: 42px;
}

.t-slider.t-slider--large .t-slider__tooltip {
    font-size: 14px;
    padding: 8px 12px;
}

.t-slider.t-slider--large .t-slider__value {
    font-size: 16px;
}

.t-slider.t-slider--small {
    height: 28px;
}

.t-slider.t-slider--small .t-slider__runway {
    height: 4px;
}

.t-slider.t-slider--small .t-slider__bar {
    height: 4px;
}

.t-slider.t-slider--small .t-slider__button {
    width: 16px;
    height: 16px;
}

.t-slider.t-slider--small .t-slider__button-wrapper {
    width: 28px;
    height: 28px;
}

.t-slider.t-slider--small .t-slider__tooltip {
    font-size: 11px;
    padding: 4px 8px;
}

.t-slider.t-slider--small .t-slider__value {
    font-size: 12px;
}

/* 禁用状态 */
.t-slider.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.t-slider.is-disabled .t-slider__runway {
    cursor: not-allowed;
}

.t-slider.is-disabled .t-slider__button-wrapper {
    cursor: not-allowed;
}

.t-slider.is-disabled .t-slider__bar {
    /* background: #C0C4CC; */
    background: var(--t-disabled-color);
}

/* 输入框组合 */
.t-slider__input {
    width: 70px;
    margin-left: 15px;
}

.t-slider__input .t-input__inner {
    text-align: center;
    padding: 0 10px;
}

/* ==================== TimePicker 时间选择器 ==================== */

/* 时间选择器容器 */
.t-time-picker {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 220px;
}

.t-time-picker.is-range {
    max-width: 360px;
}

/* 时间输入框 */
.t-time-picker__input {
    width: 100%;
    height: 40px;
    padding: 0 35px 0 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.t-time-picker__input:hover {
    box-shadow: var(--t-inset-sm);
}

.t-time-picker.is-open .t-time-picker__input {
    box-shadow: var(--t-inset-sm);
}

/* 时间图标 */
.t-time-picker__icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    pointer-events: none;
}

/* 范围选择器分隔符 */
.t-time-picker__separator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: var(--t-text-secondary);
    font-size: 14px;
}

/* 时间选择面板 */
.t-time-picker__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    padding: 10px;
    /* min-width: 180px; */
}

.t-time-picker.is-open .t-time-picker__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 时间选择列容器 */
.t-time-picker__content {
    display: flex;
    justify-content: center;
    gap: 2px;
}

/* 时间选择列 */
.t-time-picker__column {
    width: 50px;
    height: 200px;
    overflow-y: auto;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-inset-sm);
    padding: 5px 0;
}

/* 时间选项 */
.t-time-picker__item {
    height: 32px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: all 0.2s ease;
}

.t-time-picker__item:hover {
    box-shadow: var(--t-shadow-sm);
    /* background: rgba(64, 158, 255, 0.1); */
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-time-picker__item.is-selected {
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
    box-shadow: var(--t-shadow-sm);
}

.t-time-picker__item.is-disabled {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    background: transparent;
}

/* 分隔符 */
.t-time-picker__colon {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: var(--t-text-secondary);
}

/* 底部按钮 */
.t-time-picker__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 禁用状态 */
.t-time-picker.is-disabled .t-time-picker__input {
    /* background: #F5F7FA; */
    background: var(--t-bg-disabled);
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    box-shadow: var(--t-inset);
}

.t-time-picker.is-disabled .t-time-picker__icon {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

/* ==================== DatePicker 日期选择器 ==================== */

/* 日期选择器容器 */
.t-date-picker {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 220px;
}

.t-date-picker.is-range {
    max-width: 360px;
}

/* 日期输入框 */
.t-date-picker__input {
    width: 100%;
    height: 40px;
    padding: 0 35px 0 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.t-date-picker__input:hover {
    box-shadow: var(--t-inset-sm);
    /* box-shadow: var(--t-shadow-hover); */
}

.t-date-picker.is-open .t-date-picker__input {
    box-shadow: var(--t-inset-sm);
}

/* 日期图标 */
.t-date-picker__icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    pointer-events: none;
}

/* 日期选择面板 */
.t-date-picker__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    padding: 15px;
    min-width: 280px;
}

.t-date-picker.is-open .t-date-picker__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 面板头部 */
.t-date-picker__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.t-date-picker__header-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: var(--t-bg);
    border-radius: 50%;
    box-shadow: var(--t-shadow-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--t-text-regular);
    transition: all 0.2s ease;
}

.t-date-picker__header-btn:hover {
    box-shadow: var(--t-shadow);
    color: var(--t-primary);
}

.t-date-picker__header-btn:active {
    box-shadow: var(--t-inset-sm);
}

.t-date-picker__header-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
    cursor: pointer;
}

/* 星期标题 */
.t-date-picker__week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 8px;
}

.t-date-picker__week-day {
    text-align: center;
    font-size: 12px;
    color: var(--t-text-secondary);
    padding: 5px 0;
}

/* 日期表格 */
.t-date-picker__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.t-date-picker__day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--t-text-regular);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.t-date-picker__day:hover:not(.is-disabled):not(.is-selected) {
    /* background: rgba(64, 158, 255, 0.1); */
    box-shadow: var(--t-shadow);
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-date-picker__day.is-today {
    color: var(--t-primary);
    font-weight: 600;
}

.t-date-picker__day.is-selected {
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
    box-shadow: var(--t-shadow-sm);
}

.t-date-picker__day.is-other-month {
    /* color: #C0C4CC; */
    color: var(--t-text-placeholder);
}

.t-date-picker__day.is-disabled {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    background: transparent;
}

/* 快捷选项 */
.t-date-picker__sidebar {
    padding-right: 15px;
    border-right: 1px solid rgba(0, 0, 0, 0.05);
    margin-right: 15px;
}

.t-date-picker__shortcut {
    padding: 8px 12px;
    font-size: 13px;
    color: var(--t-text-regular);
    cursor: pointer;
    border-radius: var(--t-radius-sm);
    transition: all 0.2s ease;
    margin-bottom: 5px;
}

.t-date-picker__shortcut:hover {
    box-shadow: var(--t-shadow);
    /* color: #409EFF; */
    color: var(--t-primary);
}

/* 底部按钮 */
.t-date-picker__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 禁用状态 */
.t-date-picker.is-disabled .t-date-picker__input {
    /* background: #F5F7FA; */
    background: var(--t-bg-disabled);
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    box-shadow: var(--t-inset);
}

.t-date-picker.is-disabled .t-date-picker__icon {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

/* 日期范围禁用 - 因开始时间限制 */
.t-date-picker__day.is-range-disabled {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    /* background: rgba(245, 247, 250, 0.5); */
    background: var(--t-bg-disabled-rgba-50);
    position: relative;
}

.t-date-picker__day.is-range-disabled::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 15%;
    right: 15%;
    height: 1px;
    /* background: linear-gradient(90deg, transparent, #C0C4CC, transparent); */
    background: linear-gradient(90deg, transparent, var(--t-disabled-color), transparent);
    transform: rotate(-45deg);
}

.t-date-picker__day.is-range-disabled:hover {
    /* background: rgba(245, 247, 250, 0.5); */
    background: var(--t-bg-disabled-rgba-50);
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

/* 禁用提示 */
.t-date-picker__disabled-hint {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    /* background: #F56C6C; */
    background: var(--t-danger);
    /* color: #fff; */
    color: var(--t-white);
    padding: 4px 10px;
    border-radius: var(--t-radius-sm);
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: var(--t-shadow-sm);
    z-index: 10;
}

.t-date-picker__disabled-hint::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0;
    border-style: solid;
    /* border-color: #F56C6C transparent transparent transparent; */
    border-color: var(--t-danger) transparent transparent transparent;
}

.t-date-picker__day.is-range-disabled:hover .t-date-picker__disabled-hint {
    opacity: 1;
    visibility: visible;
}

/* ==================== DateTimePicker 日期时间选择器 ==================== */

/* 日期时间选择器容器 */
.t-datetime-picker {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 240px;
}

.t-datetime-picker.is-range {
    max-width: 400px;
}

/* 日期时间输入框 */
.t-datetime-picker__input {
    width: 100%;
    height: 40px;
    padding: 0 35px 0 15px;
    font-size: 14px;
    color: var(--t-text-regular);
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.t-datetime-picker__input:hover {
    box-shadow: var(--t-shadow-hover);
}

.t-datetime-picker.is-open .t-datetime-picker__input {
    box-shadow: var(--t-inset);
}

/* 日期时间图标 */
.t-datetime-picker__icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    pointer-events: none;
}

/* 日期时间选择面板 */
.t-datetime-picker__panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    padding: 15px;
    min-width: 320px;
}

.t-datetime-picker.is-open .t-datetime-picker__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 面板内容布局 */
.t-datetime-picker__content {
    display: flex;
    gap: 15px;
}

/* 日期部分 */
.t-datetime-picker__date-section {
    flex: 1;
}

/* 时间部分 */
.t-datetime-picker__time-section {
    width: 80px;
    border-left: 1px solid rgba(0, 0, 0, 0.05);
    padding-left: 15px;
}

.t-datetime-picker__time-title {
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-bottom: 10px;
    text-align: center;
}

/* 时间选择列 */
.t-datetime-picker__time-columns {
    display: flex;
    gap: 5px;
    justify-content: center;
}

.t-datetime-picker__time-column {
    width: 36px;
    height: 160px;
    overflow-y: auto;
    background: var(--t-bg);
    border-radius: var(--t-radius-sm);
    box-shadow: var(--t-inset-sm);
    padding: 3px 0;
}

.t-datetime-picker__time-item {
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: all 0.2s ease;
}

.t-datetime-picker__time-item:hover {
    /* background: rgba(64, 158, 255, 0.1); */
    background: var(--t-primary-rgba-10);
    /* color: #409EFF; */
    color: var(--t-primary);
}

.t-datetime-picker__time-item.is-selected {
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
    box-shadow: var(--t-shadow-sm);
}

/* 底部按钮 */
.t-datetime-picker__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 禁用状态 */
.t-datetime-picker.is-disabled .t-datetime-picker__input {
    /* background: #F5F7FA; */
    background: var(--t-bg-disabled);
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: not-allowed;
    box-shadow: var(--t-inset);
}

.t-datetime-picker.is-disabled .t-datetime-picker__icon {
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
}

/* ==================== Upload 上传 ==================== */

/* 上传容器 */
.t-upload {
    display: inline-block;
    width: 100%;
}

/* 上传按钮 */
.t-upload__input {
    display: none;
}

.t-upload__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--t-bg);
    border: none;
    border-radius: var(--t-radius);
    /* box-shadow: var(--t-shadow); */
    color: var(--t-text-regular);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.t-upload__trigger:hover {
    /* box-shadow: var(--t-shadow-hover); */
    /* color: var(--t-primary); */
}

.t-upload__trigger:active {
    /* box-shadow: var(--t-inset); */
}

/* 拖拽上传区域 */
.t-upload__drag {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--t-bg);
    border: 2px dashed #DCDFE6;
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}

.t-upload__drag:hover,
.t-upload__drag.is-dragover {
    border-color: var(--t-primary);
    /* background: rgba(64, 158, 255, 0.05); */
    background: var(--t-primary-rgba-5);
}

.t-upload__drag-icon {
    font-size: 48px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    margin-bottom: 15px;
}

.t-upload__drag-text {
    font-size: 14px;
    color: var(--t-text-regular);
    text-align: center;
}

.t-upload__drag-text em {
    color: var(--t-primary);
    font-style: normal;
}

.t-upload__drag-tip {
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-top: 10px;
}

/* 文件列表 */
.t-upload__list {
    margin-top: 15px;
}

.t-upload__list-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    margin-bottom: 8px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    transition: all 0.3s ease;
}

.t-upload__list-item:hover {
    box-shadow: var(--t-shadow);
}

.t-upload__list-item.is-success {
    border-left: 3px solid var(--t-success);
}

.t-upload__list-item.is-error {
    border-left: 3px solid var(--t-danger);
}

.t-upload__list-item.is-uploading {
    border-left: 3px solid var(--t-primary);
}

/* 文件图标 */
.t-upload__file-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(64, 158, 255, 0.1);
    border-radius: var(--t-radius-sm);
    margin-right: 12px;
    font-size: 16px;
}

/* 文件信息 */
.t-upload__file-info {
    flex: 1;
    min-width: 0;
}

.t-upload__file-name {
    font-size: 14px;
    color: var(--t-text-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.t-upload__file-size {
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-top: 2px;
}

/* 文件状态 */
.t-upload__file-status {
    margin-left: 10px;
    font-size: 12px;
}

.t-upload__file-status.is-success {
    color: var(--t-success);
}

.t-upload__file-status.is-error {
    color: var(--t-danger);
}

/* 进度条 */
.t-upload__progress {
    width: 100px;
    height: 6px;
    /* background: #EBEEF5; */
    background: var(--t-bg);
    border-radius: 3px;
    overflow: hidden;
    margin-left: 10px;
}

.t-upload__progress-bar {
    height: 100%;
    /* background: linear-gradient(90deg, var(--t-primary), #66b1ff); */
    background: linear-gradient(90deg, var(--t-primary), var(--t-primary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* 删除按钮 */
.t-upload__file-delete {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;
    background: none;
    border: none;
    border-radius: 50%;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.t-upload__file-delete:hover {
    background: rgba(245, 108, 108, 0.1);
    color: var(--t-danger);
}

/* 图片卡片列表 */
.t-upload__picture-card {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.t-upload__picture-item {
    position: relative;
    width: 148px;
    height: 148px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
}

.t-upload__picture-item:hover {
    box-shadow: var(--t-shadow);
}

.t-upload__picture-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t-upload__picture-actions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-upload__picture-item:hover .t-upload__picture-actions {
    opacity: 1;
}

.t-upload__picture-action {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    color: var(--t-text-regular);
    cursor: pointer;
    transition: all 0.3s ease;
}

.t-upload__picture-action:hover {
    /* background: #fff; */
    background: var(--t-white);
    color: var(--t-primary);
    transform: scale(1.1);
}

/* 添加卡片 */
.t-upload__picture-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 148px;
    height: 148px;
    background: var(--t-bg);
    border: 2px dashed #DCDFE6;
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all 0.3s ease;
}

.t-upload__picture-add:hover {
    border-color: var(--t-primary);
    color: var(--t-primary);
}

.t-upload__picture-add-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.t-upload__picture-add-text {
    font-size: 12px;
}

/* 头像上传 */
.t-upload__avatar {
    position: relative;
    width: 178px;
    height: 178px;
    background: var(--t-bg);
    border: 2px dashed #DCDFE6;
    border-radius: var(--t-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s ease;
}

.t-upload__avatar:hover {
    border-color: var(--t-primary);
}

.t-upload__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.t-upload__avatar-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* color: #8C939D; */
    color: var(--t-text-secondary);
}

.t-upload__avatar-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.t-upload__avatar-text {
    font-size: 12px;
}

/* 禁用状态 */
.t-upload.is-disabled .t-upload__trigger,
.t-upload.is-disabled .t-upload__drag,
.t-upload.is-disabled .t-upload__picture-add,
.t-upload.is-disabled .t-upload__avatar {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 提示文字 */
.t-upload__tip {
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-top: 8px;
}

/* ==================== Upload BEM 命名别名 (用于表单) ==================== */

.t-upload__dragger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: var(--t-bg);
    border: 2px dashed #DCDFE6;
    border-radius: var(--t-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 360px;
    min-height: 180px;
}

.t-upload__dragger:hover {
    border-color: var(--t-primary);
    /* background: rgba(64, 158, 255, 0.05); */
    background: var(--t-primary-rgba-5);
}

.t-upload__dragger.is-dragover {
    border-color: var(--t-primary);
    /* background: rgba(64, 158, 255, 0.1); */
    background: var(--t-primary-rgba-10);
}

.t-upload__icon {
    font-size: 48px;
    /* color: #C0C4CC; */
    color: var(--t-disabled-color);
    margin-bottom: 15px;
}

.t-upload__text {
    font-size: 14px;
    color: var(--t-text-regular);
    text-align: center;
}

.t-upload__text em {
    color: var(--t-primary);
    font-style: normal;
}

/* ==================== Upload 上传 - 增强效果 ==================== */

/* 上传按钮 - 渐变背景 */
.t-upload__trigger--gradient {
    background: linear-gradient(145deg, #f0f0f3, #e6e6e9);
    position: relative;
    overflow: hidden;
}

.t-upload__trigger--gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s ease;
}

.t-upload__trigger--gradient:hover::before {
    left: 100%;
}

/* 上传按钮 - 脉冲动画 */
.t-upload__trigger--pulse {
    animation: uploadPulse 2s ease-in-out infinite;
}

@keyframes uploadPulse {
    0%, 100% {
        box-shadow: var(--t-shadow);
    }
    50% {
        box-shadow: var(--t-shadow-hover), 0 0 20px rgba(64, 158, 255, 0.2);
    }
}

/* 拖拽上传 - 波浪效果 */
.t-upload__drag--wave {
    position: relative;
    overflow: hidden;
}

.t-upload__drag--wave::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(64, 158, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.t-upload__drag--wave:hover::before,
.t-upload__drag--wave.is-dragover::before {
    width: 300px;
    height: 300px;
}

/* 拖拽上传 - 悬浮动画 */
.t-upload__drag-icon--float {
    animation: uploadFloat 3s ease-in-out infinite;
}

@keyframes uploadFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* 文件列表项 - 滑入动画 */
.t-upload__list-item {
    animation: slideInUp 0.4s ease;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 文件列表项 - 悬停光效 */
.t-upload__list-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: var(--t-radius);
}

.t-upload__list-item:hover::after {
    opacity: 1;
}

/* 进度条 - 闪光效果 */
.t-upload__progress-bar--shiny {
    background: linear-gradient(90deg, var(--t-primary), #66b1ff, var(--t-primary));
    background-size: 200% 100%;
    animation: progressShine 1.5s linear infinite;
}

@keyframes progressShine {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 图片卡片 - 3D翻转效果 */
.t-upload__picture-item--flip {
    perspective: 1000px;
}

.t-upload__picture-item--flip .t-upload__picture-inner {
    transition: transform 0.6s ease;
    transform-style: preserve-3d;
}

.t-upload__picture-item--flip:hover .t-upload__picture-inner {
    transform: rotateY(10deg);
}

/* 图片卡片 - 悬停缩放 */
.t-upload__picture-item img {
    transition: transform 0.4s ease;
}

.t-upload__picture-item:hover img {
    transform: scale(1.05);
}

/* 图片添加按钮 - 旋转效果 */
.t-upload__picture-add:hover .t-upload__picture-add-icon {
    animation: rotateIcon 0.5s ease;
}

@keyframes rotateIcon {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 头像上传 - 边框流动效果 */
.t-upload__avatar--flow {
    position: relative;
}

.t-upload__avatar--flow::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    /* background: linear-gradient(45deg, #409EFF, #67C23A, #E6A23C, #F56C6C, #409EFF); */
    background: linear-gradient(45deg, var(--t-primary), var(--t-success), var(--t-warning), var(--t-danger), var(--t-primary));
    background-size: 400% 400%;
    border-radius: calc(var(--t-radius) + 2px);
    z-index: -1;
    animation: borderFlow 3s ease infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-upload__avatar--flow:hover::before {
    opacity: 1;
}

@keyframes borderFlow {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

/* 头像上传 - 脉冲光环 */
.t-upload__avatar--glow {
    animation: avatarGlow 2s ease-in-out infinite;
}

@keyframes avatarGlow {
    0%, 100% {
        box-shadow: var(--t-shadow-sm);
    }
    50% {
        box-shadow: var(--t-shadow-sm), 0 0 30px rgba(64, 158, 255, 0.3);
    }
}

/* 成功状态 - 庆祝动画 */
.t-upload__list-item.is-success .t-upload__file-status {
    animation: successPop 0.5s ease;
}

@keyframes successPop {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* 删除按钮 - 旋转效果 */
.t-upload__file-delete:hover {
    transform: rotate(90deg);
}

/* 上传区域 - 网格背景 */
.t-upload__drag--grid {
    background-image: 
        linear-gradient(rgba(64, 158, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64, 158, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* 文件图标 - 动态背景 */
.t-upload__file-icon {
    position: relative;
    overflow: hidden;
}

.t-upload__file-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%
    );
    transform: rotate(45deg) translateY(-100%);
    transition: transform 0.6s ease;
}

.t-upload__list-item:hover .t-upload__file-icon::before {
    transform: rotate(45deg) translateY(100%);
}

/* 多文件上传计数器 */
.t-upload__counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--t-primary);
    /* color: #fff; */
    color: var(--t-white);
    font-size: 12px;
    border-radius: 10px;
    margin-left: 8px;
    animation: counterBounce 0.3s ease;
}

@keyframes counterBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* 上传完成 - 列表项消失动画 */
.t-upload__list-item.is-removing {
    animation: slideOutRight 0.4s ease forwards;
}

@keyframes slideOutRight {
    to {
        opacity: 0;
        transform: translateX(100%);
        height: 0;
        margin: 0;
        padding: 0;
    }
}

/* ==================== Rate 评分 ==================== */

/* 评分容器 */
.t-rate {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 星星基础样式 - 拟态硅胶效果 */
.t-rate-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 24px;
    /* color: #d6d6d6; */
    color: var(--t-disabled-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: var(--t-inset-lg);
}

/* 星星悬停效果 */
.t-rate-star:hover {
    transform: translateY(-1px) scale(1.1);
    text-shadow: var(--t-shadow);
}

/* 星星激活状态 - 选中效果 */
.t-rate-star.active {
    /* color: #F7BA2A; */
    color: var(--t-warning);
    text-shadow: var(--t-shadow-sm);
}

/* 1星 - 所有已选星星灰色 */
.t-rate:has(.t-rate-star.active[data-index="1"]) .t-rate-star.active {
    /* color: #e6bc7d; */
    color: var(--t-text-secondary);
    text-shadow: var(--t-shadow-sm);
}

/* 2星 - 所有已选星星浅橙 */
.t-rate:has(.t-rate-star.active[data-index="2"]) .t-rate-star.active {
    /* color: #E6A23C; */
    color: var(--t-warning);
    text-shadow: var(--t-shadow-sm);
}

/* 3星 - 所有已选星星金黄 */
.t-rate:has(.t-rate-star.active[data-index="3"]) .t-rate-star.active {
    /* color: #F7BA2A; */
    color: var(--t-warning);
    text-shadow: var(--t-shadow-sm);
}

/* 4星 - 所有已选星星橙黄 */
.t-rate:has(.t-rate-star.active[data-index="4"]) .t-rate-star.active {
    /* color: #FF9F43; */
    color: var(--t-warning);
    text-shadow: var(--t-shadow-sm);
}

/* 5星 - 所有已选星星橙红 */
.t-rate:has(.t-rate-star.active[data-index="5"]) .t-rate-star.active {
    /* color: #f87a04; */
    color: var(--t-danger);
    text-shadow: var(--t-shadow-sm);
}

/* 星星半选状态 */
.t-rate-star.half {
    position: relative;
    /* color: #C6D1DE; */
    color: var(--t-disabled-color);
}

.t-rate-star.half::before {
    content: '★';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    overflow: hidden;
    /* color: #F7BA2A; */
    /* background: linear-gradient(145deg, #ffd666, #e6a23c); */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 辅助文字 */
.t-rate-text {
    font-size: 14px;
    color: var(--t-text-regular);
    margin-left: 10px;
    font-weight: 500;
}

/* 分数显示 */
.t-rate-score {
    font-size: 16px;
    font-weight: 600;
    /* color: #F7BA2A; */
    color: var(--t-warning);
    margin-left: 10px;
}

/* 只读状态 */
.t-rate.is-readonly .t-rate-star {
    cursor: default;
    pointer-events: none;
    opacity: 0.8;
}

.t-rate.is-readonly .t-rate-star:hover {
    transform: none;
}

/* 禁用状态 */
.t-rate.is-disabled .t-rate-star {
    cursor: not-allowed;
    opacity: 0.6;
}

/* 大尺寸 */
.t-rate--large .t-rate-star {
    width: 48px;
    height: 48px;
    font-size: 32px;
}

/* 小尺寸 */
.t-rate--small .t-rate-star {
    width: 28px;
    height: 28px;
    font-size: 18px;
}

/* 星星点击动画 */
.t-rate-star.clicking {
    animation: starClick 0.3s ease;
}

@keyframes starClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.85);
    }
    100% {
        transform: scale(1);
    }
}

/* 星星闪烁动画 */
.t-rate-star.active {
    animation: starGlow 2s ease-in-out infinite;
}

@keyframes starGlow {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.1);
    }
}

/* 评分组 */
.t-rate-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.t-rate-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.t-rate-label {
    font-size: 14px;
    color: var(--t-text-secondary);
    min-width: 80px;
}

/* ==================== Rate BEM 命名别名 ==================== */

.t-rate__star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 24px;
    /* color: #d6d6d6; */
    color: var(--t-disabled-color);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-shadow: var(--t-inset-lg);
}

.t-rate__star:hover {
    transform: translateY(-1px) scale(1.1);
    text-shadow: var(--t-shadow);
}

.t-rate__star.active {
    color: #F7BA2A;
    text-shadow: var(--t-shadow-sm);
    animation: starGlow 2s ease-in-out infinite;
}

/* 1星 - 所有已选星星灰色 */
.t-rate:has(.t-rate__star.active[data-index="1"]) .t-rate__star.active {
    /* color: #e6bc7d; */
    color: var(--t-text-secondary);
    text-shadow: var(--t-shadow-sm);
}

/* 2星 - 所有已选星星浅橙 */
.t-rate:has(.t-rate__star.active[data-index="2"]) .t-rate__star.active {
    /* color: #E6A23C; */
    color: var(--t-warning);
    text-shadow: var(--t-shadow-sm);
}

/* 3星 - 所有已选星星金黄 */
.t-rate:has(.t-rate__star.active[data-index="3"]) .t-rate__star.active {
    /* color: #F7BA2A; */
    color: var(--t-warning);
    text-shadow: var(--t-shadow-sm);
}

/* 4星 - 所有已选星星橙黄 */
.t-rate:has(.t-rate__star.active[data-index="4"]) .t-rate__star.active {
    /* color: #FF9F43; */
    color: var(--t-warning);
    text-shadow: var(--t-shadow-sm);
}

/* 5星 - 所有已选星星橙红 */
.t-rate:has(.t-rate__star.active[data-index="5"]) .t-rate__star.active {
    /* color: #f87a04; */
    color: var(--t-danger);
    text-shadow: var(--t-shadow-sm);
}

/* ==================== ColorPicker 颜色选择器 ==================== */

/* 颜色选择器容器 */
.t-color-picker {
    position: relative;
    display: inline-block;
}

/* 颜色预览区域 */
.t-color-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.t-color-preview:hover {
    box-shadow: var(--t-shadow-hover);
}

.t-color-preview:active {
    box-shadow: var(--t-shadow-inset);
}

/* 颜色块 */
.t-color-picker .t-color-block {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    display: block;
    min-width: auto;
}

/* 颜色值文本 */
.t-color-value {
    flex: 1;
    font-size: 14px;
    color: var(--t-text-primary);
    font-family: monospace;
}

/* 下拉箭头 */
.t-color-arrow {
    font-size: 10px;
    color: var(--t-text-secondary);
    transition: transform 0.3s ease;
}

.t-color-picker.active .t-color-arrow {
    transform: rotate(180deg);
}

/* 颜色下拉面板 */
.t-color-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    padding: 15px;
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 280px;
}

.t-color-picker.active .t-color-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* 颜色面板 */
.t-color-panel {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.t-color-panel:has(.t-color-main) {
    flex-direction: column;
}

.t-color-main {
    display: flex;
    gap: 12px;
}

/* 饱和度选择区域 */
.t-color-saturation {
    position: relative;
    width: 200px;
    height: 150px;
    border-radius: var(--t-radius);
    overflow: hidden;
    cursor: crosshair;
    background: linear-gradient(to right, #fff, #f00);
    box-shadow: var(--t-shadow-inset);
}

.t-color-white {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.t-color-black {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #000, transparent);
}

.t-color-cursor {
    position: absolute;
    width: 10px;
    height: 10px;
    /* border: 2px solid #fff; */
    border: 2px solid var(--t-white);
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* 色相滑块 */
.t-color-hue-slider {
    position: relative;
    width: 20px;
    height: 150px;
    border-radius: var(--t-radius);
    background: linear-gradient(to bottom, 
        #f00 0%, #ff0 17%, #0f0 33%, 
        #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
    box-shadow: var(--t-shadow-inset);
    cursor: pointer;
}

.t-color-hue-thumb {
    position: absolute;
    left: -3px;
    width: 26px;
    height: 6px;
    /* background: #fff; */
    background: var(--t-white);
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    top: 50%;
}

/* 滑块组 */
.t-color-sliders {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 透明度滑块容器 */
.t-color-alpha-container {
    width: 100%;
    margin-top: 10px;
}

/* 透明度滑块 */
.t-color-alpha-slider {
    position: relative;
    width: 100%;
    height: 20px;
    border-radius: var(--t-radius);
    overflow: hidden;
    cursor: pointer;
    box-shadow: var(--t-shadow-inset);
}

.t-color-alpha-bg {
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(45deg, #ccc 25%, transparent 25%),
        linear-gradient(-45deg, #ccc 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #ccc 75%),
        linear-gradient(-45deg, transparent 75%, #ccc 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
}

.t-color-alpha-bar {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to right, rgba(64, 158, 255, 0), rgba(64, 158, 255, 1)); */
    background: linear-gradient(to right, var(--t-primary-rgba-0), var(--t-primary));
}

.t-color-alpha-thumb {
    position: absolute;
    top: -3px;
    width: 6px;
    height: 26px;
    /* background: #fff; */
    background: var(--t-white);
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    left: 50%;
}

/* 输入区域 */
.t-color-inputs {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-bottom: 15px;
}

.t-color-input-group {
    flex: 1;
}

.t-color-input-group label {
    display: block;
    font-size: 12px;
    color: var(--t-text-secondary);
    margin-bottom: 5px;
}

.t-color-input-group .t-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
    font-family: monospace;
}

.t-color-actions {
    display: flex;
    gap: 8px;
}

/* 预定义颜色 */
.t-color-predefine {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.t-color-predefine-item {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: var(--t-shadow-sm);
    transition: all 0.2s ease;
}

.t-color-predefine-item:hover {
    transform: scale(1.1);
    box-shadow: var(--t-shadow);
}

/* 大尺寸 */
.t-color-picker--large .t-color-preview {
    padding: 10px 15px;
    min-width: 160px;
}

.t-color-picker--large .t-color-block {
    width: 28px;
    height: 28px;
}

.t-color-picker--large .t-color-value {
    font-size: 15px;
}

/* 小尺寸 */
.t-color-picker--small .t-color-preview {
    padding: 6px 10px;
    min-width: 120px;
}

.t-color-picker--small .t-color-block {
    width: 20px;
    height: 20px;
}

.t-color-picker--small .t-color-value {
    font-size: 13px;
}

/* 禁用状态 */
.t-color-picker.is-disabled .t-color-preview {
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: var(--t-shadow-inset);
}

.t-color-picker.is-disabled .t-color-block {
    /* background-color: #C0C4CC !important; */
    background-color: var(--t-disabled-color) !important;
}

/* ==================== ColorPicker BEM 命名别名 ==================== */

.t-color-picker__trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--t-bg);
    border-radius: var(--t-radius);
    box-shadow: var(--t-shadow);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 140px;
}

.t-color-picker__trigger:hover {
    box-shadow: var(--t-shadow-hover);
}

.t-color-picker__trigger:active {
    box-shadow: var(--t-inset);
}

.t-color-picker__color {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.t-color-picker__color-inner {
    width: 100%;
    height: 100%;
}

.t-color-picker__value {
    flex: 1;
    font-size: 14px;
    color: var(--t-text-primary);
    font-family: monospace;
}

.t-color-picker__icon {
    font-size: 10px;
    color: var(--t-text-secondary);
    transition: transform 0.3s ease;
    font-style: normal;
}

.t-color-picker.active .t-color-picker__icon {
    transform: rotate(180deg);
}

.t-color-picker__dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    padding: 15px;
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    min-width: 280px;
}

.t-color-picker.active .t-color-picker__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.t-color-picker__panel {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.t-color-picker__saturation {
    position: relative;
    width: 200px;
    height: 150px;
    background: linear-gradient(to right, #fff, #f00);
    border-radius: var(--t-radius);
    overflow: hidden;
    cursor: crosshair;
}

.t-color-picker__saturation-white {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent, #000);
}

.t-color-picker__saturation-black {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.t-color-picker__saturation-cursor {
    position: absolute;
    width: 10px;
    height: 10px;
    /* border: 2px solid #fff; */
    border: 2px solid var(--t-white);
    border-radius: 50%;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.t-color-picker__hue {
    position: relative;
    width: 20px;
    height: 150px;
    background: linear-gradient(to bottom, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    border-radius: var(--t-radius);
    cursor: pointer;
}

.t-color-picker__hue-bar {
    width: 100%;
    height: 100%;
    border-radius: var(--t-radius);
}

.t-color-picker__hue-thumb {
    position: absolute;
    left: -2px;
    width: 24px;
    height: 6px;
    /* background: #fff; */
    background: var(--t-white);
    border-radius: 3px;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.t-color-picker__predefine {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.t-color-picker__predefine-item {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.t-color-picker__predefine-item:hover {
    transform: scale(1.1);
}

/* ==================== Transfer 穿梭框 ==================== */

/* 穿梭框容器 */
.t-transfer {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 面板 */
.t-transfer-panel {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
    background: var(--t-bg);
    border-radius: var(--t-radius-lg);
    box-shadow: var(--t-shadow);
    overflow: hidden;
}

/* 面板头部 */
.t-transfer-header {
    padding: 12px 15px;
    background: rgba(0, 0, 0, 0.02);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.t-transfer-header .t-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.t-transfer-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--t-text-primary);
}

.t-transfer-count {
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* 搜索过滤 */
.t-transfer-filter {
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.t-transfer-filter .t-input {
    width: 100%;
}

/* 面板内容区 */
.t-transfer-body {
    height: 200px;
    overflow-y: auto;
    padding: 8px 0;
}

/* 列表 */
.t-transfer-list {
    display: flex;
    flex-direction: column;
}

/* 列表项 */
.t-transfer-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.t-transfer-item:hover {
    background: rgba(64, 158, 255, 0.05);
}

.t-transfer-item input[type="checkbox"] {
    display: none;
}

.t-transfer-item-label {
    flex: 1;
    font-size: 14px;
    color: var(--t-text-primary);
}

/* 选中状态 */
.t-transfer-item input[type="checkbox"]:checked + .t-transfer-item-label {
    /* color: #409EFF; */
    color: var(--t-primary);
    font-weight: 500;
}

.t-transfer-item input[type="checkbox"]:checked ~ .t-checkbox-box::after {
    opacity: 1;
}

/* 穿梭按钮组 */
.t-transfer-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.t-transfer-buttons .t-btn {
    min-width: 50px;
    padding: 10px 15px;
}

.t-transfer-buttons .t-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: var(--t-shadow-inset);
}

.t-transfer-buttons .t-btn--icon {
    font-size: 18px;
    font-weight: bold;
}

/* 空状态 */
.t-transfer-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--t-text-secondary);
    font-size: 14px;
}

/* ==================== Form 表单 ==================== */

/* 表单容器 */
.t-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* 表单项 */
.t-form-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

/* 表单标签 */
.t-form-label {
    min-width: 100px;
    padding-top: 8px;
    font-size: 14px;
    color: var(--t-text-primary);
    font-weight: 500;
}

/* 必填标记 */
.t-form-item.is-required .t-form-label::before {
    content: '*';
    /* color: #F56C6C; */
    color: var(--t-danger);
    margin-right: 4px;
}

/* 表单内容区 */
.t-form-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* 行内表单 */
.t-form--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}

.t-form--inline .t-form-item {
    flex-direction: row;
    align-items: center;
    gap: 10px;
}

.t-form--inline .t-form-label {
    min-width: auto;
    padding-top: 0;
}

.t-form--inline .t-form-content {
    flex-direction: row;
    align-items: center;
}

/* 标签对齐方式 */
.t-form--label-left .t-form-label {
    text-align: left;
}

.t-form--label-right .t-form-label {
    text-align: right;
}

.t-form--label-top .t-form-item {
    flex-direction: column;
    gap: 8px;
}

.t-form--label-top .t-form-label {
    min-width: auto;
    padding-top: 0;
}

/* 表单错误提示 */
.t-form-error {
    font-size: 12px;
    /* color: #F56C6C; */
    color: var(--t-danger);
    display: none;
}

.t-form-item.is-error .t-form-error {
    display: block;
}

.t-form-item.is-error .t-input__inner,
.t-form-item.is-error .t-textarea__inner {
    box-shadow: inset 3px 3px 6px rgba(245, 108, 108, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.8), var(--t-inset-sm) !important;
}

/* 表单成功状态 */
.t-form-item.is-success .t-input__inner,
.t-form-item.is-success .t-textarea__inner {
    box-shadow: inset 3px 3px 6px rgba(103, 194, 58, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.8), var(--t-inset-sm) !important;
}

/* 表单帮助文本 */
.t-form-help {
    font-size: 12px;
    color: var(--t-text-secondary);
}

/* 表单分组 */
.t-form-group {
    padding: 20px;
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--t-radius);
    margin-bottom: 20px;
}

.t-form-group-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-text-primary);
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

/* ==================== API 表格样式 - 硅胶质感美化 ==================== */
.api-table-wrapper {
  background: var(--vp-c-bg);
  /* border-radius: 20px; */
  box-shadow: var(--t-inset-sm);
  padding: 2px 5px;
}

.api-table-wrapper table {
  width: 100%;
  margin: 0 auto !important;
  display:inline-table !important;
  /* margin: 0 !important; */
  /* border-collapse: separate;
  border-spacing: 0;
  background: transparent !important;
  box-shadow: none !important; */
  border-radius: 0 !important;
  word-wrap: break-word;
  word-break: break-all;
}

.api-table-wrapper thead {
  background: linear-gradient(145deg, var(--vp-c-bg), var(--vp-c-bg-alt));
}

.api-table-wrapper th {
  padding: 16px 20px;
  font-weight: 600;
  color: var(--vp-c-text-1);
  text-align: left;
  border-bottom: 2px solid var(--vp-c-brand-1);
  box-shadow: 0 2px 4px var(--t-shadow-dark);
  white-space: nowrap;
}

.api-table-wrapper td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--vp-c-divider);
  color: var(--vp-c-text-2);
  line-height: 1.6;
}

.api-table-wrapper tbody tr:last-child td {
  border-bottom: none;
}

.api-table-wrapper tbody tr:hover {
  background: rgba(64, 158, 255, 0.05);
}

/* 属性名列 */
.api-table-wrapper td:first-child {
  font-weight: 600;
  color: var(--vp-c-brand-1);
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 13px;
}

/* 类型列 */
.api-table-wrapper td:nth-child(2) {
  color: var(--vp-c-text-3);
  font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
  font-size: 12px;
}

/* 默认值列 */
.api-table-wrapper td:nth-child(3) {
  color: var(--vp-c-text-3);
  font-style: italic;
}

/* 代码样式 */
.api-table-wrapper code {
  background: var(--vp-c-bg) !important;
  box-shadow: var(--t-inset-sm);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--vp-c-brand-1);
}

/* 响应式：API 表格横向滚动 */
@media (max-width: 768px) {
  .api-table-wrapper {
    overflow-x: auto;
  }
  
  .api-table-wrapper table {
    min-width: 600px;
  }
}

/* 响应式布局 */
@media (max-width: 768px) {
  #global-backtop {
    right: 20px;
    bottom: 20px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}