/* 文本省略 */
.text-ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.text-ellipsis-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.text-ellipsis-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Flexbox工具类 */
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}

/* 间距工具类 */
.mt-sm{margin-top:var(--spacing-sm)}
.mt-md{margin-top:var(--spacing-md)}
.mt-lg{margin-top:var(--spacing-lg)}
.mb-sm{margin-bottom:var(--spacing-sm)}
.mb-md{margin-bottom:var(--spacing-md)}
.mb-lg{margin-bottom:var(--spacing-lg)}
.p-md{padding:var(--spacing-md)}
.p-lg{padding:var(--spacing-lg)}

/* 文字工具类 */
.text-center{text-align:center}
.text-right{text-align:right}
.text-primary{color:var(--color-primary)}
.text-accent{color:var(--color-accent)}
.text-muted{color:var(--color-text-light)}
.font-bold{font-weight:700}
.font-sm{font-size:var(--font-size-sm)}
.font-lg{font-size:var(--font-size-lg)}

/* 卡片 */
.card{background:var(--color-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:hidden}
.card-hover{transition:all var(--transition-base)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}

/* 按钮基础类 */
.btn{display:inline-block;padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--font-size-base);font-weight:500;text-decoration:none;text-align:center;cursor:pointer;transition:all var(--transition-base);border:none}
.btn-primary{background:var(--color-primary);color:#fff}
.btn-primary:hover{background:var(--color-primary-dark);color:#fff}
.btn-accent{background:var(--color-accent);color:#fff}
.btn-accent:hover{background:var(--color-accent-dark);color:#fff}
.btn-outline{background:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}
.btn-outline:hover{background:var(--color-primary);color:#fff}

/* 页头渐变背景（提取重复的内联样式） */
.page-header-gradient{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff;padding:30px 20px;text-align:center}
.page-header-gradient h1{color:#fff;margin:0 0 8px;font-size:var(--font-size-xl)}
.page-header-gradient p{color:rgba(255,255,255,.9);margin:0}

/* 空状态 */
.empty-state{text-align:center;padding:60px 20px;color:var(--color-text-light)}
.empty-state h3{font-size:var(--font-size-lg);margin:0 0 12px;color:var(--color-text-secondary)}
.empty-state p{font-size:var(--font-size-base);margin:0 0 20px}
.empty-state a{display:inline-block;padding:10px 30px;background:var(--color-primary);color:#fff;border-radius:var(--radius-sm);text-decoration:none}

/* 成功状态 */
.success-state{text-align:center;padding:60px 20px}
.success-state .success-icon{width:80px;height:80px;background:#52c41a;border-radius:50%;margin:0 auto 20px;display:flex;align-items:center;justify-content:center;font-size:40px;color:#fff}
.success-state h2{font-size:var(--font-size-xl);color:var(--color-text-heading);margin:0 0 12px}
.success-state p{color:var(--color-text-secondary);margin:0 0 24px}
.success-state .btn{padding:12px 40px}

/* 清除浮动 */
.clearfix::after{content:"";display:table;clear:both}