/**
 * 联创圈 - 统一组件库 (Unified Component Library)
 * 版本: 2.1.0 | 2026-09-11
 * =========================================
 * 基于 Design Token 构建的标准组件库。
 * 所有新页面必须使用这些组件类，禁止重复定义按钮/卡片/表单等样式。
 *
 * 依赖: design-tokens.css (必须在本文件之前加载)
 *
 * 组件清单:
 *   1. 按钮   (.ds-btn-*)      - 6种变体 × 3种尺寸
 *   2. 卡片   (.ds-card-*)     - 4种类型
 *   3. 弹窗   (.ds-modal-*)    - 标准弹窗
 *   4. 表单   (.ds-form-*)     - 输入框/选择器/复选框/开关
 *   5. 表格   (.ds-table-*)    - 数据表格
 *   6. 标签   (.ds-badge-*, .ds-tag-*, .ds-chip-*) - 徽章/标签/芯片
 *   7. 工具类 (.ds-text-*, .ds-gap-*, .ds-p-*) - 排版与布局
 *
 * 命名规范:
 *   .ds-{component}-{variant}
 *   前台和后台统一使用 .ds- 前缀
 *   旧 .lc- 前缀自动兼容映射
 *
 * v2.1.0 更新 (字号治理第一阶段):
 *   - 核心组件统一使用 6 级语义字号变量 (display/title/heading/base/sm/xs)
 *   - 新增排版工具类: 字号+行高+字重组合 / 行高 / 字间距
 *   - 行高变量统一为 --ds-line-height-* 命名
 *   - 字重变量新增 --ds-font-regular (原 normal 兼容保留)
 * ========================================= */

/* ============================================================
 * 0. 可访问性基础样式 (Accessibility Base)
 *    全局焦点样式、Skip Link、减少动画等
 * ============================================================ */

/* ---- 全局焦点可见性 (Focus Visible) ----
 * 统一焦点环：2px 实线主色边框 + 4px 主色半透明光环
 * 使用 :focus-visible 确保仅键盘导航时显示，不影响鼠标点击体验
 * ------------------------------------------------------------ */
:focus-visible {
    outline: 2px solid var(--ds-primary-500, var(--ds-primary-500));
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
    border-radius: 2px;
}

/* 暗色主题下焦点样式适配 */
[data-theme="dark"] :focus-visible {
    outline-color: var(--ds-primary-400, var(--ds-primary-400));
    box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.3);
}

/* 禁用 outline: none 的反模式——确保移除默认 outline 时总有替代方案 */
/* 注意：所有使用 outline: none 的元素必须配套 :focus-visible 样式 */

/* ---- 跳过导航链接 (Skip Link) ---- */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ds-primary-500, var(--ds-primary-500));
    color: var(--ds-neutral-0);
    padding: 12px 24px;
    z-index: 9999;
    transition: top 0.2s ease;
    text-decoration: none;
    border-radius: 0 0 var(--ds-radius-md, 8px) var(--ds-radius-md, 8px);
    font-size: var(--ds-text-base, 14px);
    font-weight: var(--ds-font-semibold, 600);
    box-shadow: var(--ds-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: none;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.4), var(--ds-shadow-md);
}

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

/* ============================================================
 * 1. 按钮组件
 *    变体: primary / secondary / ghost / danger / success / warning
 *    尺寸: sm / md / lg
 *    状态: hover / active / disabled
 * ============================================================ */

.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-xs);
    padding: var(--ds-space-sm) var(--ds-space-md);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-family);
    font-size: var(--ds-text-base);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-line-height-tight);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ds-transition-fast);
}
.ds-btn:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
}
.ds-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 变体 */
.ds-btn-primary {
    background: var(--ds-primary-500);
    color: var(--ds-neutral-0);
}
.ds-btn-primary:hover {
    background: var(--ds-primary-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}
.ds-btn-primary:active {
    background: var(--ds-primary-700);
}

.ds-btn-secondary {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
}
.ds-btn-secondary:hover {
    background: var(--ds-neutral-200);
    color: var(--ds-neutral-900);
}

.ds-btn-ghost {
    background: transparent;
    color: var(--ds-neutral-500);
    border-color: var(--ds-neutral-200);
}
.ds-btn-ghost:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
    border-color: var(--ds-neutral-300);
}

.ds-btn-danger {
    background: var(--ds-danger-500);
    color: var(--ds-neutral-0);
}
.ds-btn-danger:hover {
    background: var(--ds-danger-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

.ds-btn-success {
    background: var(--ds-success-500);
    color: var(--ds-neutral-0);
}
.ds-btn-success:hover {
    background: var(--ds-success-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

.ds-btn-warning {
    background: var(--ds-warning-500);
    color: var(--ds-neutral-0);
}
.ds-btn-warning:hover {
    background: var(--ds-warning-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

/* 尺寸 */
.ds-btn-sm {
    padding: var(--ds-space-xs) var(--ds-space-sm);
    font-size: var(--ds-text-sm);
    border-radius: var(--ds-radius-md);
}
.ds-btn-lg {
    padding: var(--ds-space-md) var(--ds-space-lg);
    font-size: var(--ds-text-heading);
    border-radius: var(--ds-radius-lg);
}

/* 全宽按钮 */
.ds-btn-block {
    width: 100%;
    display: flex;
}

/* 链接式按钮 */
.ds-btn-link {
    background: transparent;
    color: var(--ds-primary-500);
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
}
.ds-btn-link:hover {
    background: transparent;
    color: var(--ds-primary-600);
    text-decoration: underline;
}
.ds-btn-link:active {
    color: var(--ds-primary-700);
}

/* Info 变体 */
.ds-btn-info {
    background: var(--ds-info-500);
    color: var(--ds-neutral-0);
}
.ds-btn-info:hover {
    background: var(--ds-info-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

/* 禁用状态类名（与 :disabled 等价） */
.ds-btn--disabled,
.ds-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 渐变按钮变体 */
.ds-btn-gradient-primary {
    background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-accent-500));
    color: var(--ds-neutral-0);
    border: none;
}
.ds-btn-gradient-primary:hover {
    background: linear-gradient(135deg, var(--ds-primary-600), var(--ds-accent-600));
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-1px);
}

.ds-btn-gradient-purple {
    background: linear-gradient(135deg, var(--ds-accent-500), var(--ds-primary-500));
    color: var(--ds-neutral-0);
    border: none;
}
.ds-btn-gradient-purple:hover {
    background: linear-gradient(135deg, var(--ds-accent-600), var(--ds-primary-600));
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-1px);
}

.ds-btn-gradient-orange {
    background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-danger-500));
    color: var(--ds-neutral-0);
    border: none;
}
.ds-btn-gradient-orange:hover {
    background: linear-gradient(135deg, var(--ds-warning-600), var(--ds-danger-600));
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-1px);
}

.ds-btn-gradient-pink {
    background: linear-gradient(135deg, var(--ds-highlight-500), var(--ds-warning-500));
    color: var(--ds-neutral-0);
    border: none;
}
.ds-btn-gradient-pink:hover {
    background: linear-gradient(135deg, var(--ds-highlight-600), var(--ds-warning-600));
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-1px);
}

.ds-btn-gradient-green {
    background: linear-gradient(135deg, var(--ds-success-500), var(--ds-info-500));
    color: var(--ds-neutral-0);
    border: none;
}
.ds-btn-gradient-green:hover {
    background: linear-gradient(135deg, var(--ds-success-600), var(--ds-info-600));
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-md);
    transform: translateY(-1px);
}

/* 图标按钮 */
.ds-btn-icon {
    padding: var(--ds-space-sm);
    width: 36px;
    height: 36px;
    border-radius: var(--ds-radius-md);
}
.ds-btn-icon.ds-btn-sm {
    width: 28px;
    height: 28px;
    padding: var(--ds-space-xs);
}
.ds-btn-icon.ds-btn-lg {
    width: 44px;
    height: 44px;
    padding: var(--ds-space-md);
}

/* 按钮组 */
.ds-btn-group {
    display: inline-flex;
    border-radius: var(--ds-radius-md);
    overflow: hidden;
}
.ds-btn-group .ds-btn {
    border-radius: 0;
    border-right-width: 0;
}
.ds-btn-group .ds-btn:first-child {
    border-top-left-radius: var(--ds-radius-md);
    border-bottom-left-radius: var(--ds-radius-md);
}
.ds-btn-group .ds-btn:last-child {
    border-top-right-radius: var(--ds-radius-md);
    border-bottom-right-radius: var(--ds-radius-md);
    border-right-width: 1px;
}

/* ============================================================
 * 2. 卡片组件
 *    类型: base / hover / section / stats
 * ============================================================ */

.ds-card {
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-md);
    box-shadow: var(--ds-shadow-xs);
}
.ds-card-hover {
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-md);
    box-shadow: var(--ds-shadow-xs);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ds-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-md);
    border-color: var(--ds-neutral-300);
}
.ds-card-section {
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-lg);
    margin-bottom: var(--ds-space-md);
    box-shadow: var(--ds-shadow-xs);
}
.ds-card-body {
    padding: var(--ds-space-md);
}
.ds-card-header {
    padding: var(--ds-space-md);
    border-bottom: 1px solid var(--ds-neutral-200);
}
.ds-card-footer {
    padding: var(--ds-space-md);
    border-top: 1px solid var(--ds-neutral-200);
}
.ds-card-title {
    font-size: var(--ds-text-heading);
    font-weight: var(--ds-font-bold);
    color: var(--ds-neutral-900);
    margin: 0;
}
.ds-card-subtitle {
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-500);
    margin-top: var(--ds-space-xs);
}

/* ============================================================
 * 统计卡片组件 (.ds-card-stat) - BEM 风格
 * 变体: 基础版 / 带图标版 / 带趋势版 / 带进度条版 / 顶部色条版 / 图标背景版
 * 颜色: primary / success / warning / danger / info / accent / neutral
 * ============================================================ */

/* ---- 基础结构 ---- */
.ds-card-stat {
    background: var(--ds-neutral-0, var(--ds-neutral-0));
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-md);
    box-shadow: var(--ds-shadow-xs);
    transition: var(--ds-transition-fast);
    position: relative;
    overflow: hidden;
}
.ds-card-stat:hover {
    box-shadow: var(--ds-shadow-sm);
    border-color: var(--ds-neutral-300);
}

/* ---- 元素：值、标签 ---- */
.ds-card-stat__value {
    font-size: var(--ds-text-display);
    font-weight: var(--ds-font-bold);
    color: var(--ds-neutral-900);
    line-height: var(--ds-line-height-tight);
}
.ds-card-stat__value .ds-card-stat__unit {
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-500);
    margin-left: var(--ds-space-xs);
}
.ds-card-stat__label {
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-500);
    margin-top: var(--ds-space-xs);
}

/* ---- 元素：图标容器 ---- */
.ds-card-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ds-primary-500);
    font-size: var(--ds-text-xl);
}

/* ---- 变体 1：带图标版（左右布局） ---- */
.ds-card-stat--with-icon {
    display: flex;
    align-items: center;
    gap: var(--ds-space-md);
    text-align: left;
}
.ds-card-stat--with-icon .ds-card-stat__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-md);
    background: var(--ds-primary-50);
    color: var(--ds-primary-500);
}
.ds-card-stat--with-icon .ds-card-stat__body {
    flex: 1;
    min-width: 0;
}

/* ---- 变体 2：带趋势版 ---- */
.ds-card-stat__trend {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    margin-top: var(--ds-space-xs);
    padding: 2px 6px;
    border-radius: var(--ds-radius-sm);
}
.ds-card-stat__trend--up {
    color: var(--ds-success-600);
    background: var(--ds-success-50);
}
.ds-card-stat__trend--down {
    color: var(--ds-danger-600);
    background: var(--ds-danger-50);
}
.ds-card-stat__trend--up::before {
    content: '\f0d8';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
}
.ds-card-stat__trend--down::before {
    content: '\f0d7';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
}
.ds-card-stat__sub {
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    margin-top: var(--ds-space-xs);
    display: flex;
    align-items: center;
    gap: var(--ds-space-xs);
    flex-wrap: wrap;
}

/* ---- 变体 3：带进度条版 ---- */
.ds-card-stat__progress {
    margin-top: var(--ds-space-sm);
}
.ds-card-stat__progress-track {
    height: 6px;
    background: var(--ds-neutral-100);
    border-radius: var(--ds-radius-full);
    overflow: hidden;
}
.ds-card-stat__progress-bar {
    height: 100%;
    background: var(--ds-primary-500);
    border-radius: var(--ds-radius-full);
    transition: width 0.6s ease;
}
.ds-card-stat__progress-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    margin-top: var(--ds-space-xs);
}
.ds-card-stat__progress-target {
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-700);
}

/* ---- 变体 4：顶部色条版 ---- */
.ds-card-stat--border-top {
    border-top: 4px solid var(--ds-primary-500);
    padding-top: calc(var(--ds-space-md) - 4px + var(--ds-space-xs));
}

/* ---- 变体 5：图标背景版（圆形彩色背景图标） ---- */
.ds-card-stat--icon-bg .ds-card-stat__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--ds-radius-full);
    background: var(--ds-primary-100);
    color: var(--ds-primary-600);
    font-size: var(--ds-text-lg);
}

/* ---- 变体 6：渐变卡片版（深色背景白字） ---- */
.ds-card-stat--gradient {
    color: var(--ds-neutral-0);
    border: none;
    background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-600));
}
.ds-card-stat--gradient .ds-card-stat__value { color: var(--ds-neutral-0); }
.ds-card-stat--gradient .ds-card-stat__label { color: rgba(255, 255, 255, 0.85); }
.ds-card-stat--gradient .ds-card-stat__icon { color: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.15); }
.ds-card-stat--gradient .ds-card-stat__sub { color: rgba(255, 255, 255, 0.75); }
.ds-card-stat--gradient .ds-card-stat__progress-track { background: rgba(255, 255, 255, 0.2); }
.ds-card-stat--gradient .ds-card-stat__progress-info { color: rgba(255, 255, 255, 0.75); }
.ds-card-stat--gradient .ds-card-stat__progress-target { color: rgba(255, 255, 255, 0.9); }

/* ---- 颜色变体：primary ---- */
.ds-card-stat--primary .ds-card-stat__value { color: var(--ds-primary-500); }
.ds-card-stat--primary .ds-card-stat__icon { color: var(--ds-primary-500); background: var(--ds-primary-50); }
.ds-card-stat--primary.ds-card-stat--border-top { border-top-color: var(--ds-primary-500); }
.ds-card-stat--primary.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-primary-100); color: var(--ds-primary-600); }
.ds-card-stat--primary .ds-card-stat__progress-bar { background: var(--ds-primary-500); }
.ds-card-stat--primary.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-600));
}

/* ---- 颜色变体：success ---- */
.ds-card-stat--success .ds-card-stat__value { color: var(--ds-success-500); }
.ds-card-stat--success .ds-card-stat__icon { color: var(--ds-success-500); background: var(--ds-success-50); }
.ds-card-stat--success.ds-card-stat--border-top { border-top-color: var(--ds-success-500); }
.ds-card-stat--success.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-success-100); color: var(--ds-success-600); }
.ds-card-stat--success .ds-card-stat__progress-bar { background: var(--ds-success-500); }
.ds-card-stat--success.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-success-500), var(--ds-success-600));
}

/* ---- 颜色变体：warning ---- */
.ds-card-stat--warning .ds-card-stat__value { color: var(--ds-warning-500); }
.ds-card-stat--warning .ds-card-stat__icon { color: var(--ds-warning-500); background: var(--ds-warning-50); }
.ds-card-stat--warning.ds-card-stat--border-top { border-top-color: var(--ds-warning-500); }
.ds-card-stat--warning.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-warning-100); color: var(--ds-warning-600); }
.ds-card-stat--warning .ds-card-stat__progress-bar { background: var(--ds-warning-500); }
.ds-card-stat--warning.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-warning-600));
}

/* ---- 颜色变体：danger ---- */
.ds-card-stat--danger .ds-card-stat__value { color: var(--ds-danger-500); }
.ds-card-stat--danger .ds-card-stat__icon { color: var(--ds-danger-500); background: var(--ds-danger-50); }
.ds-card-stat--danger.ds-card-stat--border-top { border-top-color: var(--ds-danger-500); }
.ds-card-stat--danger.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-danger-100); color: var(--ds-danger-600); }
.ds-card-stat--danger .ds-card-stat__progress-bar { background: var(--ds-danger-500); }
.ds-card-stat--danger.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-danger-500), var(--ds-danger-600));
}

/* ---- 颜色变体：info ---- */
.ds-card-stat--info .ds-card-stat__value { color: var(--ds-info-500); }
.ds-card-stat--info .ds-card-stat__icon { color: var(--ds-info-500); background: var(--ds-info-50); }
.ds-card-stat--info.ds-card-stat--border-top { border-top-color: var(--ds-info-500); }
.ds-card-stat--info.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-info-100); color: var(--ds-info-600); }
.ds-card-stat--info .ds-card-stat__progress-bar { background: var(--ds-info-500); }
.ds-card-stat--info.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-info-500), var(--ds-info-600));
}

/* ---- 颜色变体：accent ---- */
.ds-card-stat--accent .ds-card-stat__value { color: var(--ds-accent-500); }
.ds-card-stat--accent .ds-card-stat__icon { color: var(--ds-accent-500); background: var(--ds-accent-50); }
.ds-card-stat--accent.ds-card-stat--border-top { border-top-color: var(--ds-accent-500); }
.ds-card-stat--accent.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-accent-100); color: var(--ds-accent-600); }
.ds-card-stat--accent .ds-card-stat__progress-bar { background: var(--ds-accent-500); }
.ds-card-stat--accent.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-accent-500), var(--ds-accent-600));
}

/* ---- 颜色变体：highlight ---- */
.ds-card-stat--highlight .ds-card-stat__value { color: var(--ds-highlight-500); }
.ds-card-stat--highlight .ds-card-stat__icon { color: var(--ds-highlight-500); background: var(--ds-highlight-50); }
.ds-card-stat--highlight.ds-card-stat--border-top { border-top-color: var(--ds-highlight-500); }
.ds-card-stat--highlight.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-highlight-100); color: var(--ds-highlight-600); }
.ds-card-stat--highlight .ds-card-stat__progress-bar { background: var(--ds-highlight-500); }
.ds-card-stat--highlight.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-highlight-500), var(--ds-highlight-600));
}

/* ---- 颜色变体：neutral ---- */
.ds-card-stat--neutral .ds-card-stat__value { color: var(--ds-neutral-700); }
.ds-card-stat--neutral .ds-card-stat__icon { color: var(--ds-neutral-500); background: var(--ds-neutral-100); }
.ds-card-stat--neutral.ds-card-stat--border-top { border-top-color: var(--ds-neutral-400, var(--ds-neutral-300)); }
.ds-card-stat--neutral.ds-card-stat--icon-bg .ds-card-stat__icon { background: var(--ds-neutral-100); color: var(--ds-neutral-600); }
.ds-card-stat--neutral .ds-card-stat__progress-bar { background: var(--ds-neutral-500); }
.ds-card-stat--neutral.ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-neutral-600), var(--ds-neutral-700));
}

/* ---- 尺寸变体 ---- */
.ds-card-stat--sm { padding: var(--ds-space-sm); }
.ds-card-stat--sm .ds-card-stat__value { font-size: var(--ds-text-heading); }
.ds-card-stat--sm .ds-card-stat__icon { width: 36px; height: 36px; font-size: var(--ds-text-base); }
.ds-card-stat--sm.ds-card-stat--icon-bg .ds-card-stat__icon { width: 36px; height: 36px; font-size: var(--ds-text-sm); }

.ds-card-stat--lg { padding: var(--ds-space-lg); }
.ds-card-stat--lg .ds-card-stat__value { font-size: var(--ds-text-display); }
.ds-card-stat--lg .ds-card-stat__label { font-size: var(--ds-text-base); }

/* ---- 右上角徽章定位 ---- */
.ds-card-stat__badge {
    position: absolute;
    top: var(--ds-space-md);
    right: var(--ds-space-md);
}

/* ============================================================
 * 暗色模式适配 - 统计卡片
 * ============================================================ */
[data-theme="dark"] .ds-card-stat {
    background: var(--ds-neutral-100);
    border-color: var(--ds-neutral-200);
}
[data-theme="dark"] .ds-card-stat__value {
    color: var(--ds-neutral-900);
}
[data-theme="dark"] .ds-card-stat:hover {
    border-color: var(--ds-neutral-300);
}

[data-theme="dark"] .ds-card-stat--primary .ds-card-stat__icon { background: var(--ds-primary-50); }
[data-theme="dark"] .ds-card-stat--success .ds-card-stat__icon { background: var(--ds-success-50); }
[data-theme="dark"] .ds-card-stat--warning .ds-card-stat__icon { background: var(--ds-warning-50); }
[data-theme="dark"] .ds-card-stat--danger .ds-card-stat__icon { background: var(--ds-danger-50); }
[data-theme="dark"] .ds-card-stat--info .ds-card-stat__icon { background: var(--ds-info-50); }
[data-theme="dark"] .ds-card-stat--accent .ds-card-stat__icon { background: var(--ds-accent-50); }
[data-theme="dark"] .ds-card-stat--highlight .ds-card-stat__icon { background: var(--ds-highlight-50); }
[data-theme="dark"] .ds-card-stat--neutral .ds-card-stat__icon { background: var(--ds-neutral-200); }

[data-theme="dark"] .ds-card-stat__progress-track {
    background: var(--ds-neutral-200);
}

[data-theme="dark"] .ds-card-stat--gradient {
    background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-600));
    border: none;
}

/* ---- 旧类名兼容映射 ---- */
.ds-stat-value { font-size: var(--ds-text-2xl); font-weight: var(--ds-font-bold); color: var(--ds-primary-500); line-height: var(--ds-line-height-tight); }
.ds-stat-label { font-size: var(--ds-text-sm); color: var(--ds-neutral-500); margin-top: var(--ds-space-xs); }
.ds-card-stat.ds-stat-success .ds-stat-value { color: var(--ds-success-500); }
.ds-card-stat.ds-stat-warning .ds-stat-value { color: var(--ds-warning-500); }
.ds-card-stat.ds-stat-danger  .ds-stat-value { color: var(--ds-danger-500); }
.ds-card-stat.ds-stat-info    .ds-stat-value { color: var(--ds-info-500); }

/* ============================================================
 * 3. 弹窗组件
 * ============================================================ */

.ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--ds-z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: var(--ds-transition);
}
.ds-modal-overlay.ds-modal-open {
    opacity: 1;
    visibility: visible;
}

.ds-modal {
    background: var(--ds-neutral-0);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    z-index: var(--ds-z-modal);
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: translateY(20px);
    transition: var(--ds-transition);
}
.ds-modal-overlay.ds-modal-open .ds-modal {
    transform: translateY(0);
}

.ds-modal-sm { width: 400px; }
.ds-modal-md { width: 560px; }
.ds-modal-lg { width: 760px; }
.ds-modal-xl { width: 960px; }

.ds-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--ds-space-md) var(--ds-space-lg);
    border-bottom: 1px solid var(--ds-neutral-200);
}
.ds-modal-title {
    font-size: var(--ds-text-title);
    font-weight: var(--ds-font-bold);
    color: var(--ds-neutral-900);
    margin: 0;
}
.ds-modal-close {
    background: transparent;
    border: none;
    font-size: var(--ds-text-xl);
    color: var(--ds-neutral-500);
    cursor: pointer;
    padding: var(--ds-space-xs);
    border-radius: var(--ds-radius-md);
    transition: var(--ds-transition-fast);
}
.ds-modal-close:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-900);
}

.ds-modal-body {
    padding: var(--ds-space-lg);
    overflow-y: auto;
    flex: 1;
}

.ds-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--ds-space-sm);
    padding: var(--ds-space-md) var(--ds-space-lg);
    border-top: 1px solid var(--ds-neutral-200);
}

/* ============================================================
 * 4. 表单组件
 * ============================================================ */

.ds-form-group {
    margin-bottom: var(--ds-space-md);
}
.ds-form-label {
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-700);
    margin-bottom: var(--ds-space-xs);
}
.ds-form-label .ds-form-required {
    color: var(--ds-danger-500);
    margin-left: 2px;
}
.ds-form-hint {
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    margin-top: var(--ds-space-xs);
}
.ds-form-error {
    font-size: var(--ds-text-xs);
    color: var(--ds-danger-500);
    margin-top: var(--ds-space-xs);
}

/* 输入框 */
.ds-input {
    width: 100%;
    padding: var(--ds-space-sm) var(--ds-space-md);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    background: var(--ds-neutral-0);
    color: var(--ds-neutral-900);
    font-family: var(--ds-font-family);
    font-size: var(--ds-text-base);
    line-height: var(--ds-line-height-tight);
    transition: var(--ds-transition-fast);
}
.ds-input::placeholder {
    color: var(--ds-neutral-300);
}
.ds-input:focus {
    outline: none;
    border-color: var(--ds-primary-500);
    box-shadow: 0 0 0 3px var(--ds-primary-50);
}
.ds-input:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}
.ds-input:disabled {
    background: var(--ds-neutral-50);
    color: var(--ds-neutral-500);
    cursor: not-allowed;
}
.ds-input.ds-input-error {
    border-color: var(--ds-danger-500);
}
.ds-input.ds-input-error:focus {
    box-shadow: 0 0 0 3px var(--ds-danger-50);
}

/* 输入框尺寸 */
.ds-input-sm {
    padding: var(--ds-space-xs) var(--ds-space-sm);
    font-size: var(--ds-text-sm);
}
.ds-input-lg {
    padding: var(--ds-space-md) var(--ds-space-lg);
    font-size: var(--ds-text-heading);
}

/* Textarea */
.ds-textarea {
    min-height: 96px;
    resize: vertical;
}

/* Select */
.ds-select {
    width: 100%;
    padding: var(--ds-space-sm) var(--ds-space-md);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    background: var(--ds-neutral-0);
    color: var(--ds-neutral-900);
    font-family: var(--ds-font-family);
    font-size: var(--ds-text-base);
    line-height: var(--ds-line-height-tight);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ds-space-md) center;
    padding-right: calc(var(--ds-space-md) * 2 + 12px);
    transition: var(--ds-transition-fast);
}
.ds-select:focus {
    outline: none;
    border-color: var(--ds-primary-500);
    box-shadow: 0 0 0 3px var(--ds-primary-50);
}
.ds-select:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}

/* Checkbox */
.ds-checkbox {
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--ds-neutral-300);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
    appearance: none;
    background: var(--ds-neutral-0);
    transition: var(--ds-transition-fast);
    position: relative;
}
.ds-checkbox:checked {
    background: var(--ds-primary-500);
    border-color: var(--ds-primary-500);
}
.ds-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--ds-neutral-0);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ds-checkbox:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
}

/* Switch 开关 */
.ds-switch {
    position: relative;
    width: 40px;
    height: 22px;
    background: var(--ds-neutral-200);
    border-radius: var(--ds-radius-full);
    cursor: pointer;
    transition: var(--ds-transition-fast);
    appearance: none;
    border: none;
}
.ds-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--ds-neutral-0);
    border-radius: 50%;
    box-shadow: var(--ds-shadow-xs);
    transition: var(--ds-transition-fast);
}
.ds-switch:checked {
    background: var(--ds-primary-500);
}
.ds-switch:checked::after {
    transform: translateX(18px);
}

/* Form row */
.ds-form-row {
    display: flex;
    gap: var(--ds-space-md);
}
.ds-form-row .ds-form-group {
    flex: 1;
}

/* Input with icon */
.ds-input-wrapper {
    position: relative;
}
.ds-input-wrapper .ds-input {
    padding-left: calc(var(--ds-space-md) + 20px);
}
.ds-input-wrapper .ds-input-icon {
    position: absolute;
    left: var(--ds-space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--ds-neutral-500);
    pointer-events: none;
}

/* ============================================================
 * 5. 表格组件
 * ============================================================ */

.ds-table-wrapper {
    overflow-x: auto;
    border-radius: var(--ds-radius-lg);
    border: 1px solid var(--ds-neutral-200);
}
.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ds-text-sm);
}
.ds-table thead th {
    padding: var(--ds-space-sm) var(--ds-space-md);
    text-align: left;
    font-weight: var(--ds-font-semibold);
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    background: var(--ds-neutral-50);
    border-bottom: 1px solid var(--ds-neutral-200);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.ds-table tbody td {
    padding: var(--ds-space-sm) var(--ds-space-md);
    color: var(--ds-neutral-700);
    border-bottom: 1px solid var(--ds-neutral-100);
}
.ds-table tbody tr:last-child td {
    border-bottom: none;
}
.ds-table tbody tr {
    transition: var(--ds-transition-fast);
}
.ds-table tbody tr:hover {
    background: var(--ds-neutral-50);
}

/* 可点击行 */
.ds-table-row-clickable {
    cursor: pointer;
}

/* 表格紧凑模式 */
.ds-table-compact thead th,
.ds-table-compact tbody td {
    padding: var(--ds-space-xs) var(--ds-space-sm);
}

/* ============================================================
 * 6. 标签组件
 *    Badge: 实心背景徽章
 *    Tag:   轻量文字标签
 *    Chip:  可关闭芯片
 * ============================================================ */

/* Badge */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--ds-space-sm);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    line-height: var(--ds-line-height-tight);
    background: var(--ds-primary-100);
    color: var(--ds-primary-700);
}
.ds-badge-primary   { background: var(--ds-primary-100);   color: var(--ds-primary-700); }
.ds-badge-success   { background: var(--ds-success-100);  color: var(--ds-success-700); }
.ds-badge-warning   { background: var(--ds-warning-100);  color: var(--ds-warning-700); }
.ds-badge-danger    { background: var(--ds-danger-100);   color: var(--ds-danger-700); }
.ds-badge-info      { background: var(--ds-info-100);     color: var(--ds-info-700); }
.ds-badge-accent    { background: var(--ds-accent-100);   color: var(--ds-accent-700); }
.ds-badge-highlight { background: var(--ds-highlight-100); color: var(--ds-highlight-700); }
.ds-badge-neutral   { background: var(--ds-neutral-100);  color: var(--ds-neutral-700); }

/* 点状徽章 */
.ds-badge-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-xs);
    padding: 2px var(--ds-space-sm);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-700);
}
.ds-badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ds-neutral-300);
}
.ds-badge-dot.ds-badge-dot-primary::before  { background: var(--ds-primary-500); }
.ds-badge-dot.ds-badge-dot-success::before { background: var(--ds-success-500); }
.ds-badge-dot.ds-badge-dot-warning::before { background: var(--ds-warning-500); }
.ds-badge-dot.ds-badge-dot-danger::before  { background: var(--ds-danger-500); }
.ds-badge-dot.ds-badge-dot-info::before    { background: var(--ds-info-500); }

/* Tag */
.ds-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--ds-space-xs) var(--ds-space-sm);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-line-height-tight);
}
.ds-tag-primary   { background: var(--ds-primary-50);   color: var(--ds-primary-600); }
.ds-tag-success   { background: var(--ds-success-50);   color: var(--ds-success-600); }
.ds-tag-warning   { background: var(--ds-warning-50);   color: var(--ds-warning-600); }
.ds-tag-danger    { background: var(--ds-danger-50);     color: var(--ds-danger-600); }
.ds-tag-info      { background: var(--ds-info-50);      color: var(--ds-info-600); }
.ds-tag-accent    { background: var(--ds-accent-50);    color: var(--ds-accent-600); }

/* Chip (可关闭) */
.ds-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-xs);
    padding: var(--ds-space-xs) var(--ds-space-sm);
    border-radius: var(--ds-radius-full);
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-line-height-tight);
}
.ds-chip .ds-chip-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--ds-neutral-500);
    cursor: pointer;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    transition: var(--ds-transition-fast);
}
.ds-chip .ds-chip-close:hover {
    background: var(--ds-neutral-200);
    color: var(--ds-neutral-900);
}
.ds-chip-primary { background: var(--ds-primary-50);   color: var(--ds-primary-600); }
.ds-chip-success { background: var(--ds-success-50);   color: var(--ds-success-600); }
.ds-chip-danger  { background: var(--ds-danger-50);     color: var(--ds-danger-600); }

/* ============================================================
 * 7. 布局与排版工具类 (仅使用 Token 值)
 * ============================================================ */

/* 文字色 */
.ds-text-primary   { color: var(--ds-primary-500); }
.ds-text-success   { color: var(--ds-success-500); }
.ds-text-warning   { color: var(--ds-warning-500); }
.ds-text-danger    { color: var(--ds-danger-500); }
.ds-text-info      { color: var(--ds-info-500); }
.ds-text-accent    { color: var(--ds-accent-500); }
.ds-text-neutral   { color: var(--ds-neutral-500); }
.ds-text-heading   { color: var(--ds-neutral-900); }
.ds-text-body      { color: var(--ds-neutral-700); }
.ds-text-secondary { color: var(--ds-text-secondary); }  /* 次要文字 - AA 级 */
.ds-text-muted     { color: var(--ds-text-muted); }      /* 弱化文字 - 装饰性/占位 */
.ds-text-contrast  { color: var(--ds-text-contrast); }   /* 高对比度次要文字 - AAA 级 */

/* 背景色 */
.ds-bg-primary-50   { background: var(--ds-primary-50); }
.ds-bg-success-50   { background: var(--ds-success-50); }
.ds-bg-warning-50   { background: var(--ds-warning-50); }
.ds-bg-danger-50    { background: var(--ds-danger-50); }
.ds-bg-info-50      { background: var(--ds-info-50); }
.ds-bg-neutral-50   { background: var(--ds-neutral-50); }
.ds-bg-white        { background: var(--ds-neutral-0); }

/* ============================================================
 * 排版工具类 (Typography Utilities)
 *    基于 6 级语义字号体系，一键设置字号 + 行高 + 字重
 *    使用方式: <h1 class="ds-text-display">大标题</h1>
 * ============================================================ */

/* ---- 语义字号 (6 级，含行高和推荐字重) ---- */
.ds-text-display {
    font-size: var(--ds-text-display);
    line-height: var(--ds-line-height-tight);
    font-weight: var(--ds-font-bold);
    letter-spacing: var(--ds-letter-spacing-tight);
}
.ds-text-title {
    font-size: var(--ds-text-title);
    line-height: var(--ds-line-height-snug);
    font-weight: var(--ds-font-bold);
}
.ds-text-heading {
    font-size: var(--ds-text-heading);
    line-height: var(--ds-line-height-snug);
    font-weight: var(--ds-font-semibold);
}
.ds-text-base {
    font-size: var(--ds-text-base);
    line-height: var(--ds-line-height-normal);
}
.ds-text-sm {
    font-size: var(--ds-text-sm);
    line-height: var(--ds-line-height-normal);
}
.ds-text-xs {
    font-size: var(--ds-text-xs);
    line-height: var(--ds-line-height-normal);
}

/* ---- 字重工具类 ---- */
.ds-font-regular  { font-weight: var(--ds-font-regular); }
.ds-font-medium   { font-weight: var(--ds-font-medium); }
.ds-font-semibold { font-weight: var(--ds-font-semibold); }
.ds-font-bold     { font-weight: var(--ds-font-bold); }

/* ---- 行高工具类 ---- */
.ds-leading-tight   { line-height: var(--ds-line-height-tight); }
.ds-leading-snug    { line-height: var(--ds-line-height-snug); }
.ds-leading-normal  { line-height: var(--ds-line-height-normal); }
.ds-leading-relaxed { line-height: var(--ds-line-height-relaxed); }
.ds-leading-loose   { line-height: var(--ds-line-height-loose); }

/* ---- 字间距工具类 ---- */
.ds-tracking-tight  { letter-spacing: var(--ds-letter-spacing-tight); }
.ds-tracking-normal { letter-spacing: var(--ds-letter-spacing-normal); }
.ds-tracking-wide   { letter-spacing: var(--ds-letter-spacing-wide); }

/* ---- 旧字号工具类兼容 (已废弃，仅用于平滑迁移) ---- */
.ds-text-lg  { font-size: var(--ds-text-lg); line-height: var(--ds-line-height-normal); }
.ds-text-xl  { font-size: var(--ds-text-xl); line-height: var(--ds-line-height-tight); font-weight: var(--ds-font-bold); }
.ds-text-2xl { font-size: var(--ds-text-2xl); line-height: var(--ds-line-height-tight); font-weight: var(--ds-font-bold); }
.ds-font-normal { font-weight: var(--ds-font-regular); }

/* 间距 (margin/padding) */
.ds-mt-xs { margin-top: var(--ds-space-xs); }
.ds-mt-sm { margin-top: var(--ds-space-sm); }
.ds-mt-md { margin-top: var(--ds-space-md); }
.ds-mt-lg { margin-top: var(--ds-space-lg); }
.ds-mb-xs { margin-bottom: var(--ds-space-xs); }
.ds-mb-sm { margin-bottom: var(--ds-space-sm); }
.ds-mb-md { margin-bottom: var(--ds-space-md); }
.ds-mb-lg { margin-bottom: var(--ds-space-lg); }
.ds-p-xs  { padding: var(--ds-space-xs); }
.ds-p-sm  { padding: var(--ds-space-sm); }
.ds-p-md  { padding: var(--ds-space-md); }
.ds-p-lg  { padding: var(--ds-space-lg); }

/* Gap */
.ds-gap-xs { gap: var(--ds-space-xs); }
.ds-gap-sm { gap: var(--ds-space-sm); }
.ds-gap-md { gap: var(--ds-space-md); }
.ds-gap-lg { gap: var(--ds-space-lg); }

/* 圆角 */
.ds-rounded-sm   { border-radius: var(--ds-radius-sm); }
.ds-rounded-md   { border-radius: var(--ds-radius-md); }
.ds-rounded-lg   { border-radius: var(--ds-radius-lg); }
.ds-rounded-full { border-radius: var(--ds-radius-full); }

/* 阴影 */
.ds-shadow-xs { box-shadow: var(--ds-shadow-xs); }
.ds-shadow-sm { box-shadow: var(--ds-shadow-sm); }
.ds-shadow-md { box-shadow: var(--ds-shadow-md); }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg); }

/* 边框 */
.ds-border { border: 1px solid var(--ds-neutral-200); }
.ds-border-b { border-bottom: 1px solid var(--ds-neutral-200); }
.ds-border-t { border-top: 1px solid var(--ds-neutral-200); }

/* Flex 布局 */
.ds-flex { display: flex; }
.ds-flex-col { display: flex; flex-direction: column; }
.ds-flex-center { display: flex; align-items: center; justify-content: center; }
.ds-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ds-flex-start { display: flex; align-items: center; justify-content: flex-start; }
.ds-flex-end { display: flex; align-items: center; justify-content: flex-end; }
.ds-flex-wrap { flex-wrap: wrap; }
.ds-flex-1 { flex: 1; }
.ds-flex-shrink-0 { flex-shrink: 0; }
.ds-items-center { align-items: center; }
.ds-items-start { align-items: flex-start; }

/* Grid */
.ds-grid { display: grid; gap: var(--ds-space-md); }
.ds-grid-2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid-4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* 文字溢出省略 */
.ds-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ds-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 页面容器 */
.ds-page {
    padding: var(--ds-space-lg);
    background: var(--ds-neutral-50);
    min-height: calc(100vh - 60px);
}
.ds-page-header {
    margin-bottom: var(--ds-space-lg);
}
.ds-page-title {
    font-size: var(--ds-text-title);
    font-weight: var(--ds-font-bold);
    color: var(--ds-neutral-900);
    margin: 0;
}
.ds-page-subtitle {
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-500);
    margin-top: var(--ds-space-xs);
}

/* 返回按钮 */
.ds-back {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-xs);
    padding: var(--ds-space-xs) var(--ds-space-sm);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-500);
    text-decoration: none;
    transition: var(--ds-transition-fast);
}
.ds-back:hover {
    background: var(--ds-neutral-50);
    border-color: var(--ds-neutral-300);
    color: var(--ds-neutral-900);
}

/* 空状态 */
.ds-empty {
    text-align: center;
    padding: var(--ds-space-lg) var(--ds-space-md);
    color: var(--ds-neutral-300);
}
.ds-empty i {
    font-size: 48px;
    margin-bottom: var(--ds-space-md);
    display: block;
}
.ds-empty-text {
    font-size: var(--ds-text-sm);
}

/* 分割线 */
.ds-divider {
    height: 1px;
    background: var(--ds-neutral-200);
    border: none;
    margin: var(--ds-space-md) 0;
}

/* ============================================================
 * 8. 响应式 (统一断点: 768px)
 * ============================================================ */
@media (max-width: 768px) {
    .ds-grid-2,
    .ds-grid-3,
    .ds-grid-4 {
        grid-template-columns: 1fr;
    }
    .ds-grid-auto {
        grid-template-columns: 1fr;
    }
    .ds-page {
        padding: var(--ds-space-sm);
    }
    .ds-card,
    .ds-card-hover,
    .ds-card-section {
        padding: var(--ds-space-sm);
    }
    .ds-modal-sm,
    .ds-modal-md,
    .ds-modal-lg,
    .ds-modal-xl {
        width: 95vw;
    }
    .ds-form-row {
        flex-direction: column;
    }
}

/* ============================================================
 * 9. 旧类名兼容映射
 *    .lc-btn → .ds-btn, .btn → .ds-btn 等
 *    确保现有 700+ 处旧代码自动获得统一样式
 * ============================================================ */

/* ============================================================
 * 9.1 按钮兼容层 — Bootstrap 风格 (.btn / .btn-*)
 *    映射到 .ds-btn / .ds-btn-* 设计系统样式
 * ============================================================ */

/* 基础样式 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-xs);
    padding: var(--ds-space-sm) var(--ds-space-md);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-family);
    font-size: var(--ds-text-base);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-line-height-tight);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ds-transition-fast);
}
.btn:focus { outline: none; }
.btn:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
}
.btn:disabled,
.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 变体 — Primary */
.btn-primary {
    background: var(--ds-primary-500);
    color: var(--ds-neutral-0);
}
.btn-primary:hover {
    background: var(--ds-primary-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}
.btn-primary:active {
    background: var(--ds-primary-700);
}

/* 变体 — Secondary */
.btn-secondary {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
}
.btn-secondary:hover {
    background: var(--ds-neutral-200);
    color: var(--ds-neutral-900);
}

/* 变体 — Outline / Ghost (描边按钮) */
.btn-outline,
.btn-outline-primary,
.btn-ghost {
    background: transparent;
    color: var(--ds-neutral-500);
    border-color: var(--ds-neutral-200);
}
.btn-outline:hover,
.btn-outline-primary:hover,
.btn-ghost:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
    border-color: var(--ds-neutral-300);
}

/* 变体 — Success */
.btn-success {
    background: var(--ds-success-500);
    color: var(--ds-neutral-0);
}
.btn-success:hover {
    background: var(--ds-success-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

/* 变体 — Warning */
.btn-warning {
    background: var(--ds-warning-500);
    color: var(--ds-neutral-0);
}
.btn-warning:hover {
    background: var(--ds-warning-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

/* 变体 — Danger */
.btn-danger {
    background: var(--ds-danger-500);
    color: var(--ds-neutral-0);
}
.btn-danger:hover {
    background: var(--ds-danger-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

/* 变体 — Info */
.btn-info {
    background: var(--ds-info-500);
    color: var(--ds-neutral-0);
}
.btn-info:hover {
    background: var(--ds-info-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

/* 尺寸 */
.btn-sm,
.btn-xs {
    padding: var(--ds-space-xs) var(--ds-space-sm);
    font-size: var(--ds-text-sm);
    border-radius: var(--ds-radius-md);
}
.btn-lg {
    padding: var(--ds-space-md) var(--ds-space-lg);
    font-size: var(--ds-text-lg);
    border-radius: var(--ds-radius-lg);
}

/* 全宽按钮 */
.btn-block {
    width: 100%;
    display: flex;
}

/* ============================================================
 * 9.2 按钮兼容层 — 旧联创圈风格 (.lc-btn / .lc-btn-*)
 *    映射到 .ds-btn / .ds-btn-* 设计系统样式
 * ============================================================ */

.lc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-xs);
    padding: var(--ds-space-sm) var(--ds-space-md);
    border: 1px solid transparent;
    border-radius: var(--ds-radius-md);
    font-family: var(--ds-font-family);
    font-size: var(--ds-text-base);
    font-weight: var(--ds-font-medium);
    line-height: var(--ds-line-height-tight);
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--ds-transition-fast);
}
.lc-btn:focus { outline: none; }
.lc-btn:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
}
.lc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* 变体 — Primary */
.lc-btn-primary {
    background: var(--ds-primary-500);
    color: var(--ds-neutral-0);
}
.lc-btn-primary:hover {
    background: var(--ds-primary-600);
    color: var(--ds-neutral-0);
    box-shadow: var(--ds-shadow-sm);
}

/* 变体 — Secondary */
.lc-btn-secondary {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
}
.lc-btn-secondary:hover {
    background: var(--ds-neutral-200);
    color: var(--ds-neutral-900);
}

/* 变体 — Outline / Ghost */
.lc-btn-outline,
.lc-btn-ghost {
    background: transparent;
    color: var(--ds-neutral-500);
    border-color: var(--ds-neutral-200);
}
.lc-btn-outline:hover,
.lc-btn-ghost:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
    border-color: var(--ds-neutral-300);
}

/* 尺寸 */
.lc-btn-sm {
    padding: var(--ds-space-xs) var(--ds-space-sm);
    font-size: var(--ds-text-sm);
}
.lc-btn-lg {
    padding: var(--ds-space-md) var(--ds-space-lg);
    font-size: var(--ds-text-lg);
}

/* ============================================================
 * 9.3 按钮兼容层 — 渐变按钮 (.btn-gradient-*)
 *    映射到 .ds-btn-gradient-* 设计系统样式
 * ============================================================ */

.btn-gradient-purple {
    background: linear-gradient(135deg, var(--ds-accent-500), var(--ds-primary-500));
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-gradient-purple:hover {
    background: linear-gradient(135deg, var(--ds-accent-600), var(--ds-primary-600));
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

.btn-gradient-orange {
    background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-danger-500));
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}
.btn-gradient-orange:hover {
    background: linear-gradient(135deg, var(--ds-warning-600), var(--ds-danger-600));
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4);
    transform: translateY(-1px);
}

.btn-gradient-pink {
    background: linear-gradient(135deg, var(--ds-highlight-500), var(--ds-warning-500));
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);
}
.btn-gradient-pink:hover {
    background: linear-gradient(135deg, var(--ds-highlight-600), var(--ds-warning-600));
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4);
    transform: translateY(-1px);
}

.btn-gradient-green {
    background: linear-gradient(135deg, var(--ds-success-500), var(--ds-info-500));
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.btn-gradient-green:hover {
    background: linear-gradient(135deg, var(--ds-success-600), var(--ds-info-600));
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
    transform: translateY(-1px);
}

/* ============================================================
 * 9.4 按钮加载状态兼容 (data-loading 机制)
 *    与 ds-btn-loading 保持一致
 * ============================================================ */

.btn[data-loading="true"],
.lc-btn[data-loading="true"] {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

/* ============================================================
 * 9.5 按钮微交互兼容 (hover 轻微上浮)
 *    与 ds-btn 微交互保持一致
 * ============================================================ */

.btn:not([disabled]):not(.btn--disabled):not([data-loading="true"]):hover,
.lc-btn:not([disabled]):not([data-loading="true"]):hover {
    transform: translateY(-1px);
}
.btn:not([disabled]):not(.btn--disabled):not([data-loading="true"]):active,
.lc-btn:not([disabled]):not([data-loading="true"]):active {
    transform: translateY(0);
}

/* 卡片兼容 */
.lc-card, .ds-card {
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-md);
    box-shadow: var(--ds-shadow-xs);
}
.lc-card-hover, .ds-card-hover {
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-md);
    box-shadow: var(--ds-shadow-xs);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lc-card-hover:hover, .ds-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-md);
}

/* 徽章兼容 */
.lc-badge, .ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--ds-space-sm);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-semibold);
    line-height: var(--ds-line-height-tight);
    background: var(--ds-primary-100);
    color: var(--ds-primary-700);
}
.lc-badge-purple, .ds-badge-purple  { background: var(--ds-accent-100);    color: var(--ds-accent-700); }
.lc-badge-amber,  .ds-badge-amber   { background: var(--ds-warning-100);   color: var(--ds-warning-700); }
.lc-badge-green,  .ds-badge-green   { background: var(--ds-success-100);   color: var(--ds-success-700); }
.lc-badge-pink,   .ds-badge-pink    { background: var(--ds-highlight-100); color: var(--ds-highlight-700); }
.lc-badge-gray,   .ds-badge-gray    { background: var(--ds-neutral-100);   color: var(--ds-neutral-700); }
.lc-badge-red,    .ds-badge-red     { background: var(--ds-danger-100);    color: var(--ds-danger-700); }

/* 输入框兼容 */
.lc-input, .ds-input {
    width: 100%;
    padding: var(--ds-space-sm) var(--ds-space-md);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    background: var(--ds-neutral-0);
    color: var(--ds-neutral-900);
    font-family: var(--ds-font-family);
    font-size: var(--ds-text-base);
    line-height: var(--ds-line-height-tight);
    transition: var(--ds-transition-fast);
}
.lc-input:focus, .ds-input:focus {
    outline: none;
    border-color: var(--ds-primary-500);
    box-shadow: 0 0 0 3px var(--ds-primary-50);
}

/* 页面容器兼容 */
.lc-page, .ds-page {
    padding: var(--ds-space-lg);
    background: var(--ds-neutral-50);
    min-height: calc(100vh - 60px);
}
.lc-back, .ds-back {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-xs);
    padding: var(--ds-space-xs) var(--ds-space-sm);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-500);
    text-decoration: none;
    transition: var(--ds-transition-fast);
}
.lc-back:hover, .ds-back:hover {
    background: var(--ds-neutral-50);
    color: var(--ds-neutral-900);
}

/* 文字色兼容 */
.text-primary   { color: var(--ds-primary-500) !important; }
.text-success   { color: var(--ds-success-500) !important; }
.text-warning   { color: var(--ds-warning-500) !important; }
.text-danger    { color: var(--ds-danger-500) !important; }
.text-info      { color: var(--ds-info-500) !important; }
.text-secondary { color: var(--ds-neutral-500) !important; }
.text-muted     { color: var(--ds-neutral-500) !important; }

/* 网格兼容 */
.lc-grid, .ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ds-space-md);
}

/* 渐变兼容 */
.lc-gradient-primary { background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-600)); color: var(--ds-neutral-0); }
.lc-gradient-purple  { background: linear-gradient(135deg, var(--ds-accent-500), var(--ds-accent-600)); color: var(--ds-neutral-0); }
.lc-gradient-amber   { background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-warning-600)); color: var(--ds-neutral-0); }
.lc-gradient-green   { background: linear-gradient(135deg, var(--ds-success-500), var(--ds-success-600)); color: var(--ds-neutral-0); }
.lc-gradient-pink    { background: linear-gradient(135deg, var(--ds-highlight-500), var(--ds-highlight-600)); color: var(--ds-neutral-0); }
.lc-gradient-dark    { background: linear-gradient(135deg, var(--ds-neutral-900), var(--ds-neutral-700)); color: var(--ds-neutral-0); }

/* ============================================================
 * 8. 空状态组件 (.ds-empty-*)
 *    统一空状态：图标 + 标题 + 描述 + 操作按钮
 *    尺寸: sm / md / lg
 *    变体: default / info / success / warning / danger
 * ============================================================ */

.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--ds-space-lg) var(--ds-space-md);
}
.ds-empty-icon {
    font-size: 48px;
    color: var(--ds-neutral-300);
    margin-bottom: var(--ds-space-md);
    line-height: 1;
}
.ds-empty-title {
    font-size: var(--ds-text-heading);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-neutral-700);
    margin-bottom: var(--ds-space-xs);
}
.ds-empty-desc {
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-500);
    margin-bottom: var(--ds-space-md);
    max-width: 360px;
    line-height: var(--ds-line-height-normal);
}
.ds-empty-action {
    display: flex;
    gap: var(--ds-space-sm);
    flex-wrap: wrap;
    justify-content: center;
}

/* 尺寸 */
.ds-empty-sm { padding: var(--ds-space-md) var(--ds-space-sm); }
.ds-empty-sm .ds-empty-icon { font-size: 32px; margin-bottom: var(--ds-space-sm); }
.ds-empty-sm .ds-empty-title { font-size: var(--ds-text-base); }

.ds-empty-lg { padding: 64px var(--ds-space-md); }
.ds-empty-lg .ds-empty-icon { font-size: 64px; margin-bottom: var(--ds-space-lg); }
.ds-empty-lg .ds-empty-title { font-size: var(--ds-text-title); }

/* 变体 */
.ds-empty-info    .ds-empty-icon { color: var(--ds-info-500); }
.ds-empty-success .ds-empty-icon { color: var(--ds-success-500); }
.ds-empty-warning .ds-empty-icon { color: var(--ds-warning-500); }
.ds-empty-danger  .ds-empty-icon { color: var(--ds-danger-500); }

/* 表格内空状态 */
.ds-empty-in-table {
    padding: 48px var(--ds-space-md);
}
.ds-empty-in-table .ds-empty-icon { font-size: 36px; }

/* 兼容旧 lc-empty 类名 */
.lc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--ds-space-lg) var(--ds-space-md); }
.lc-empty-icon { font-size: 48px; color: var(--ds-neutral-300); margin-bottom: var(--ds-space-md); line-height: 1; }
.lc-empty-title { font-size: var(--ds-text-lg); font-weight: var(--ds-font-semibold); color: var(--ds-neutral-700); margin-bottom: var(--ds-space-xs); }
.lc-empty-desc { font-size: var(--ds-text-sm); color: var(--ds-neutral-500); margin-bottom: var(--ds-space-md); max-width: 360px; line-height: var(--ds-line-height-normal); }
.lc-empty-action { display: flex; gap: var(--ds-space-sm); flex-wrap: wrap; justify-content: center; }
.lc-empty-sm { padding: var(--ds-space-md) var(--ds-space-sm); }
.lc-empty-sm .lc-empty-icon { font-size: 32px; margin-bottom: var(--ds-space-sm); }
.lc-empty-sm .lc-empty-title { font-size: var(--ds-text-base); }
.lc-empty-lg { padding: 64px var(--ds-space-md); }
.lc-empty-lg .lc-empty-icon { font-size: 64px; margin-bottom: var(--ds-space-lg); }
.lc-empty-lg .lc-empty-title { font-size: var(--ds-text-xl); }
.lc-empty-info .lc-empty-icon { color: var(--ds-info-500); }

/* ============================================================
 * 9. 加载状态组件 (.ds-loading-*)
 *    统一 Loading：Spinner / Overlay / Skeleton / Button Loading
 * ============================================================ */

/* Spinner 基础 */
.ds-loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ds-neutral-200);
    border-top-color: var(--ds-primary-500);
    border-radius: 50%;
    animation: ds-spin 0.6s linear infinite;
}
.ds-loading-spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.ds-loading-spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.ds-loading-spinner-light {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: var(--ds-neutral-0);
}

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

/* 按钮加载状态 */
.ds-btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}
.ds-btn-loading .ds-btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--ds-neutral-0);
    border-radius: 50%;
    animation: ds-spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}

/* 全屏遮罩 */
.ds-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--ds-z-overlay);
    backdrop-filter: blur(2px);
}
.ds-loading-overlay-content {
    background: var(--ds-neutral-0);
    border-radius: var(--ds-radius-lg);
    padding: var(--ds-space-lg);
    box-shadow: var(--ds-shadow-lg);
    text-align: center;
    min-width: 200px;
    max-width: 400px;
}
.ds-loading-overlay-content .ds-loading-spinner {
    margin-bottom: var(--ds-space-md);
}
.ds-loading-overlay-title {
    font-size: var(--ds-text-heading);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-neutral-700);
    margin-bottom: var(--ds-space-xs);
}
.ds-loading-overlay-desc {
    font-size: var(--ds-text-sm);
    color: var(--ds-neutral-500);
}

/* 区域加载（Card 内） */
.ds-loading-block {
    position: relative;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ds-loading-block::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1;
}
.ds-loading-block .ds-loading-spinner {
    position: relative;
    z-index: 2;
}

/* 骨架屏 */
.ds-skeleton {
    background: linear-gradient(90deg,
        var(--ds-neutral-100) 25%,
        var(--ds-neutral-200) 50%,
        var(--ds-neutral-100) 75%
    );
    background-size: 200% 100%;
    animation: ds-shimmer 1.5s infinite;
    border-radius: var(--ds-radius-sm);
}
.ds-skeleton-text {
    height: 12px;
    margin-bottom: 8px;
}
.ds-skeleton-text.w-80 { width: 80%; }
.ds-skeleton-text.w-60 { width: 60%; }
.ds-skeleton-text.w-40 { width: 40%; }
.ds-skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--ds-radius-full);
}
.ds-skeleton-card {
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-md);
    box-shadow: var(--ds-shadow-sm);
}

@keyframes ds-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================================
 * 10. 表单验证组件 (.ds-form-validation)
 *     统一表单验证：错误状态 + 错误提示 + 成功状态
 * ============================================================ */

/* 输入框验证状态 */
.ds-form-group {
    margin-bottom: var(--ds-space-md);
    position: relative;
}
.ds-form-label {
    display: block;
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-medium);
    color: var(--ds-neutral-700);
    margin-bottom: var(--ds-space-xs);
}
.ds-form-label .ds-form-required {
    color: var(--ds-danger-500);
    margin-left: 2px;
}
.ds-form-control {
    display: block;
    width: 100%;
    padding: var(--ds-space-sm) var(--ds-space-md);
    font-size: var(--ds-text-base);
    font-family: var(--ds-font-family);
    color: var(--ds-neutral-700);
    background: var(--ds-neutral-0);
    border: 1px solid var(--ds-neutral-200);
    border-radius: var(--ds-radius-md);
    transition: var(--ds-transition-fast);
    outline: none;
}
.ds-form-control:focus {
    border-color: var(--ds-primary-500);
    box-shadow: 0 0 0 3px var(--ds-primary-50);
    outline: none;
}
.ds-form-control:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
}
.ds-form-control::placeholder {
    color: var(--ds-neutral-300);
}

/* 错误状态 */
.ds-form-control.ds-form-error,
.ds-form-control[aria-invalid="true"] {
    border-color: var(--ds-danger-500);
    background: var(--ds-danger-50);
}
.ds-form-control.ds-form-error:focus {
    box-shadow: 0 0 0 3px var(--ds-danger-50);
}

/* 成功状态 */
.ds-form-control.ds-form-valid {
    border-color: var(--ds-success-500);
}
.ds-form-control.ds-form-valid:focus {
    box-shadow: 0 0 0 3px var(--ds-success-50);
}

/* 错误提示文字 */
.ds-form-error-msg {
    display: flex;
    align-items: center;
    gap: var(--ds-space-xs);
    font-size: var(--ds-text-sm);
    color: var(--ds-danger-600);
    margin-top: var(--ds-space-xs);
    min-height: 20px;
    animation: ds-fade-in 0.2s ease;
}
.ds-form-error-msg::before {
    content: '\f06a';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
}

/* 成功提示文字 */
.ds-form-success-msg {
    display: flex;
    align-items: center;
    gap: var(--ds-space-xs);
    font-size: var(--ds-text-sm);
    color: var(--ds-success-600);
    margin-top: var(--ds-space-xs);
    min-height: 20px;
}
.ds-form-success-msg::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 14px;
}

/* 帮助文字 */
.ds-form-help {
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    margin-top: var(--ds-space-xs);
}

/* Flash 消息统一样式 */
.ds-flash {
    border-radius: var(--ds-radius-md);
    padding: var(--ds-space-sm) var(--ds-space-md);
    margin-bottom: var(--ds-space-md);
    display: flex;
    align-items: center;
    gap: var(--ds-space-sm);
    font-size: var(--ds-text-sm);
    animation: ds-fade-in 0.3s ease;
}
.ds-flash-success { background: var(--ds-success-50); color: var(--ds-success-700); border: 1px solid var(--ds-success-100); }
.ds-flash-error   { background: var(--ds-danger-50); color: var(--ds-danger-700); border: 1px solid var(--ds-danger-100); }
.ds-flash-warning { background: var(--ds-warning-50); color: var(--ds-warning-700); border: 1px solid var(--ds-warning-100); }
.ds-flash-info    { background: var(--ds-info-50); color: var(--ds-info-700); border: 1px solid var(--ds-info-100); }

@keyframes ds-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * 11. 微交互统一动画 (Micro-Interactions)
 *    统一过渡效果，消除生硬的界面切换
 *    仅作用于 ds- 前缀组件 + 前台页面，不影响后台已有样式
 *    按钮 0.2s ease / 卡片 0.3s ease / 弹窗淡入淡出
 * ============================================================ */

/* ---- ds- 组件 transition 兜底 ---- */
.ds-btn, .ds-card, .ds-badge, .ds-tag, .ds-chip, .ds-avatar {
    transition-property: color, background-color, border-color, box-shadow, transform, opacity;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

/* ---- 按钮 hover 微交互 (0.2s ease) — 仅 ds-btn ---- */
.ds-btn:not(.ds-btn-loading):not([disabled]) {
    transition: all 0.2s ease;
}
.ds-btn:not(.ds-btn-loading):not([disabled]):hover {
    transform: translateY(-1px);
}
.ds-btn:not(.ds-btn-loading):not([disabled]):active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

/* ---- 图标按钮 hover 缩放 ---- */
.ds-btn-icon .fas,
.ds-btn-icon .far {
    transition: transform 0.2s ease;
}
.ds-btn-icon:hover .fas,
.ds-btn-icon:hover .far {
    transform: scale(1.15);
}

/* ---- 卡片 hover 微交互 (0.3s ease) — 仅 ds-card-hover ---- */
.ds-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.ds-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--ds-shadow-lg);
}

/* ---- 表格行 hover — 仅 ds-table ---- */
.ds-table tbody tr {
    transition: background-color 0.2s ease;
}

/* ---- 弹窗淡入淡出 — 仅 ds-modal ---- */
.ds-modal-overlay {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.ds-modal-overlay:not(.ds-modal-open) {
    opacity: 0;
    visibility: hidden;
}
.ds-modal {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.ds-modal-overlay:not(.ds-modal-open) .ds-modal {
    transform: translateY(30px) scale(0.95);
    opacity: 0;
}
.ds-modal-overlay.ds-modal-open .ds-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ---- 下拉菜单展开动画 — 仅 ds-dropdown ---- */
.ds-dropdown {
    animation: ds-slide-down 0.2s ease;
    transform-origin: top;
}

/* ---- Toast/Flash 消息滑入 — 仅 ds-flash ---- */
.ds-flash {
    animation: ds-slide-in-right 0.3s ease;
}

@keyframes ds-slide-down {
    from { opacity: 0; transform: translateY(-8px) scaleY(0.95); }
    to { opacity: 1; transform: translateY(0) scaleY(1); }
}

@keyframes ds-slide-in-right {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ---- 前台页面切换淡入 — 仅 ds-page，不绑定 admin ---- */
.ds-page {
    animation: ds-page-enter 0.25s ease;
}

@keyframes ds-page-enter {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- 标签页切换 — 仅 ds-tab-content ---- */
.ds-tab-content {
    animation: ds-tab-enter 0.2s ease;
}

@keyframes ds-tab-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- ds-form-control 聚焦过渡 ---- */
.ds-form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* ---- 头像 hover 缩放 — 仅 ds-avatar ---- */
.ds-avatar {
    transition: transform 0.3s ease;
}
.ds-avatar:hover {
    transform: scale(1.05);
}

/* ---- 标签/Badge hover — 仅 ds-badge/ds-tag/ds-chip ---- */
.ds-badge, .ds-tag, .ds-chip {
    transition: transform 0.15s ease, background-color 0.15s ease;
}
.ds-badge:hover, .ds-tag:hover, .ds-chip:hover {
    transform: scale(1.05);
}

/* ---- 开关组件动画 — 仅 ds-toggle ---- */
.ds-toggle {
    transition: background-color 0.2s ease;
}
.ds-toggle .toggle-knob {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- 滚动条美化 ---- */
.ds-scrollable::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.ds-scrollable::-webkit-scrollbar-track {
    background: transparent;
}
.ds-scrollable::-webkit-scrollbar-thumb {
    background: var(--ds-neutral-300);
    border-radius: var(--ds-radius-full);
}
.ds-scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--ds-neutral-500);
}

/* ============================================================
 * 12. 标准弹窗组件 (.ds-modal v2 - BEM 风格)
 *     新一代统一弹窗，解决全站弹窗不统一问题
 *     BEM 命名: .ds-modal__element--modifier
 *     与旧版 .ds-modal-overlay / .ds-modal 共存，互不影响
 * ============================================================ */

/* ---- 容器 ---- */
.ds-modal {
    position: fixed;
    inset: 0;
    z-index: var(--ds-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* 打开状态 */
.ds-modal--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ---- 遮罩层 ---- */
.ds-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ---- 弹窗主体 ---- */
.ds-modal__dialog {
    position: relative;
    background: var(--ds-neutral-0, var(--ds-neutral-0));
    background: var(--ds-neutral-0);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    max-width: 90vw;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(10px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.ds-modal--open .ds-modal__dialog {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* ---- 尺寸变体 ---- */
.ds-modal--sm  .ds-modal__dialog { width: 400px; }
.ds-modal--md  .ds-modal__dialog { width: 560px; }
.ds-modal--lg  .ds-modal__dialog { width: 720px; }
.ds-modal--xl  .ds-modal__dialog { width: 960px; }

.ds-modal--fullscreen {
    padding: 0;
}
.ds-modal--fullscreen .ds-modal__dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
}

/* ---- 头部 ---- */
.ds-modal__header {
    display: flex;
    align-items: center;
    padding: var(--ds-space-md) var(--ds-space-lg);
    border-bottom: 1px solid var(--ds-neutral-200);
    flex-shrink: 0;
}

.ds-modal__title {
    font-size: var(--ds-text-title);
    font-weight: var(--ds-font-bold);
    color: var(--ds-neutral-900);
    margin: 0;
    line-height: var(--ds-line-height-tight);
}

/* ---- 关闭按钮 ---- */
.ds-modal__close {
    position: absolute;
    top: var(--ds-space-sm);
    right: var(--ds-space-sm);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--ds-radius-full);
    color: var(--ds-neutral-500);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    z-index: 1;
}
.ds-modal__close:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-900);
}
.ds-modal__close:active {
    background: var(--ds-neutral-200);
}
.ds-modal__close:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
}

/* ---- 内容区 ---- */
.ds-modal__body {
    padding: var(--ds-space-lg);
    overflow-y: auto;
    flex: 1;
    color: var(--ds-neutral-700);
    font-size: var(--ds-text-base);
    line-height: var(--ds-line-height-normal);
}

/* 内容区滚动条美化 */
.ds-modal__body::-webkit-scrollbar {
    width: 6px;
}
.ds-modal__body::-webkit-scrollbar-track {
    background: transparent;
}
.ds-modal__body::-webkit-scrollbar-thumb {
    background: var(--ds-neutral-300);
    border-radius: var(--ds-radius-full);
}
.ds-modal__body::-webkit-scrollbar-thumb:hover {
    background: var(--ds-neutral-500);
}

/* ---- 底部按钮区 ---- */
.ds-modal__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--ds-space-sm);
    padding: var(--ds-space-md) var(--ds-space-lg);
    border-top: 1px solid var(--ds-neutral-200);
    flex-shrink: 0;
    background: var(--ds-neutral-50);
}

/* ---- 暗色模式适配 ---- */
[data-theme="dark"] .ds-modal__dialog {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
}

[data-theme="dark"] .ds-modal__header {
    border-bottom-color: var(--ds-neutral-200);
}

[data-theme="dark"] .ds-modal__title {
    color: var(--ds-neutral-900);
}

[data-theme="dark"] .ds-modal__close {
    color: var(--ds-neutral-500);
}
[data-theme="dark"] .ds-modal__close:hover {
    background: var(--ds-neutral-200);
    color: var(--ds-neutral-900);
}

[data-theme="dark"] .ds-modal__body {
    color: var(--ds-neutral-700);
}

[data-theme="dark"] .ds-modal__footer {
    border-top-color: var(--ds-neutral-200);
    background: var(--ds-neutral-50);
}

[data-theme="dark"] .ds-modal__overlay {
    background: rgba(0, 0, 0, 0.65);
}

/* ---- 响应式适配 ---- */
@media (max-width: 768px) {
    .ds-modal--sm .ds-modal__dialog,
    .ds-modal--md .ds-modal__dialog,
    .ds-modal--lg .ds-modal__dialog,
    .ds-modal--xl .ds-modal__dialog {
        width: 95vw;
        max-height: 90vh;
    }

    .ds-modal__header {
        padding: var(--ds-space-sm) var(--ds-space-md);
    }

    .ds-modal__body {
        padding: var(--ds-space-md);
    }

    .ds-modal__footer {
        padding: var(--ds-space-sm) var(--ds-space-md);
    }
}

/* ---- body 滚动锁定 ---- */
.ds-modal-lock {
    overflow: hidden;
}

/* ---- 尊重减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .ds-modal,
    .ds-modal__dialog,
    .ds-modal__overlay {
        transition: none;
        animation: none;
    }
    .ds-modal__dialog {
        transform: none;
    }
}

/* ============================================================
 * 13. 减少动画偏好支持
 * ============================================================ */

/* ============================================================
 * 12. 表单验证增强样式 (.ds-form-control--error / shake / password-strength)
 *     配合 DSFormValidator 使用的错误态、抖动动画和密码强度指示器
 * ============================================================ */

/* ---- 输入框错误态 (BEM 风格，与 .ds-form-error 等价) ---- */
.ds-form-control--error {
    border-color: var(--ds-danger-500) !important;
    background: var(--ds-danger-50) !important;
}
.ds-form-control--error:focus {
    box-shadow: 0 0 0 3px var(--ds-danger-50) !important;
    border-color: var(--ds-danger-500) !important;
}

/* ---- 输入框抖动动画 ---- */
@keyframes ds-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

.ds-form-control--shake {
    animation: ds-shake 0.4s ease-in-out;
}

/* ---- 错误提示文字增强 (与已有 .ds-form-error-msg 兼容) ---- */
.ds-form-error-msg {
    font-size: var(--ds-text-xs);
    color: var(--ds-danger-500);
    margin-top: var(--ds-space-xs);
    line-height: var(--ds-line-height-tight);
    min-height: 16px;
}

/* ---- 密码强度指示器 ---- */
.ds-password-strength {
    margin-top: var(--ds-space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-xs);
}

.ds-password-strength__bar {
    display: flex;
    gap: var(--ds-space-xs);
    height: 4px;
}

.ds-password-strength__bar span {
    flex: 1;
    background: var(--ds-neutral-200);
    border-radius: var(--ds-radius-full);
    transition: background-color 0.3s ease;
}

/* 4 级强度颜色 */
.ds-password-strength__bar span.ds-password-strength--weak {
    background: var(--ds-danger-500);
}
.ds-password-strength__bar span.ds-password-strength--medium {
    background: var(--ds-warning-500);
}
.ds-password-strength__bar span.ds-password-strength--strong {
    background: var(--ds-success-500);
}
.ds-password-strength__bar span.ds-password-strength--very-strong {
    background: var(--ds-success-600);
}

.ds-password-strength__text {
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    line-height: 1;
}

.ds-password-strength__text.ds-password-strength--weak {
    color: var(--ds-danger-500);
}
.ds-password-strength__text.ds-password-strength--medium {
    color: var(--ds-warning-500);
}
.ds-password-strength__text.ds-password-strength--strong {
    color: var(--ds-success-500);
}
.ds-password-strength__text.ds-password-strength--very-strong {
    color: var(--ds-success-600);
    font-weight: var(--ds-font-medium);
}

/* ============================================================
 * 13. 暗色模式适配 - 表单验证相关
 *     [data-theme="dark"] 下错误/密码强度样式适配
 * ============================================================ */

[data-theme="dark"] .ds-form-control--error {
    background: var(--ds-danger-50) !important;
    border-color: var(--ds-danger-500) !important;
}

[data-theme="dark"] .ds-form-control--error:focus {
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15) !important;
}

[data-theme="dark"] .ds-form-error-msg {
    color: var(--ds-danger-400, var(--ds-danger-500));
}

[data-theme="dark"] .ds-password-strength__bar span {
    background: var(--ds-neutral-700);
}

[data-theme="dark"] .ds-password-strength__text {
    color: var(--ds-neutral-500);
}

/* ---- 暗色下密码强度颜色微调 ---- */
[data-theme="dark"] .ds-password-strength__bar span.ds-password-strength--weak {
    background: var(--ds-danger-400, var(--ds-danger-500));
}
[data-theme="dark"] .ds-password-strength__bar span.ds-password-strength--medium {
    background: var(--ds-warning-400, var(--ds-warning-500));
}
[data-theme="dark"] .ds-password-strength__bar span.ds-password-strength--strong {
    background: var(--ds-success-400, var(--ds-success-500));
}
[data-theme="dark"] .ds-password-strength__bar span.ds-password-strength--very-strong {
    background: var(--ds-success-500);
}

/* ---- respect prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
 * 14. Toast 消息组件 (.ds-toast)
 *     统一操作反馈：替代 alert / flash / 旧 toast
 *     BEM 命名: .ds-toast__element--modifier
 *     支持: success / error / warning / info 四种类型
 * ============================================================ */

/* ---- 容器 ---- */
.ds-toast-container {
    position: fixed;
    top: var(--ds-space-lg);
    right: var(--ds-space-lg);
    z-index: var(--ds-z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-sm);
    pointer-events: none;
    max-width: calc(100vw - var(--ds-space-lg) * 2);
}

/* ---- 单条 Toast ---- */
.ds-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-sm);
    min-width: 280px;
    max-width: 400px;
    padding: var(--ds-space-md) var(--ds-space-md) var(--ds-space-md) var(--ds-space-md);
    background: var(--ds-neutral-0);
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
    border-left: 4px solid var(--ds-info-500);
    font-size: var(--ds-text-sm);
    line-height: var(--ds-line-height-normal);
    color: var(--ds-neutral-700);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

/* 入场动画 */
.ds-toast--enter {
    opacity: 1;
    transform: translateX(0);
}

/* 出场动画 */
.ds-toast--leave {
    opacity: 0;
    transform: translateX(100%);
}

/* ---- 类型变体 ---- */
.ds-toast--success {
    border-left-color: var(--ds-success-500);
}
.ds-toast--success .ds-toast__icon {
    color: var(--ds-success-500);
    background: var(--ds-success-50);
}

.ds-toast--error {
    border-left-color: var(--ds-danger-500);
}
.ds-toast--error .ds-toast__icon {
    color: var(--ds-danger-500);
    background: var(--ds-danger-50);
}

.ds-toast--warning {
    border-left-color: var(--ds-warning-500);
}
.ds-toast--warning .ds-toast__icon {
    color: var(--ds-warning-500);
    background: var(--ds-warning-50);
}

.ds-toast--info {
    border-left-color: var(--ds-info-500);
}
.ds-toast--info .ds-toast__icon {
    color: var(--ds-info-500);
    background: var(--ds-info-50);
}

/* ---- 图标区 ---- */
.ds-toast__icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--ds-radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 1px;
}

/* ---- 内容区 ---- */
.ds-toast__content {
    flex: 1;
    min-width: 0;
}

.ds-toast__title {
    font-size: var(--ds-text-sm);
    font-weight: var(--ds-font-semibold);
    color: var(--ds-neutral-900);
    margin-bottom: 2px;
    line-height: var(--ds-line-height-tight);
}

.ds-toast__desc {
    font-size: var(--ds-text-xs);
    color: var(--ds-neutral-500);
    line-height: var(--ds-line-height-normal);
    word-break: break-word;
}

/* 只有标题没有描述时的样式调整 */
.ds-toast__content:only-child .ds-toast__title {
    margin-bottom: 0;
}

/* ---- 关闭按钮 ---- */
.ds-toast__close {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ds-neutral-400);
    cursor: pointer;
    border-radius: var(--ds-radius-sm);
    font-size:14px;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin-left: var(--ds-space-xs);
}
.ds-toast__close:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-700);
}
.ds-toast__close:active {
    background: var(--ds-neutral-200);
}

/* ---- 进度条（自动关闭倒计时指示） ---- */
.ds-toast__progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: currentColor;
    opacity: 0.3;
    width: 100%;
    transform-origin: left;
    animation: ds-toast-progress linear forwards;
}

@keyframes ds-toast-progress {
    from { transform: scaleX(1); }
    to { transform: scaleX(0); }
}

/* ---- 暗色模式适配 ---- */
[data-theme="dark"] .ds-toast {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-600);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .ds-toast__title {
    color: var(--ds-neutral-900);
}

[data-theme="dark"] .ds-toast__desc {
    color: var(--ds-neutral-500);
}

[data-theme="dark"] .ds-toast__close {
    color: var(--ds-neutral-500);
}
[data-theme="dark"] .ds-toast__close:hover {
    background: var(--ds-neutral-200);
    color: var(--ds-neutral-800);
}

[data-theme="dark"] .ds-toast--success .ds-toast__icon {
    background: rgba(34, 197, 94, 0.15);
}
[data-theme="dark"] .ds-toast--error .ds-toast__icon {
    background: rgba(239, 68, 68, 0.15);
}
[data-theme="dark"] .ds-toast--warning .ds-toast__icon {
    background: rgba(245, 158, 11, 0.15);
}
[data-theme="dark"] .ds-toast--info .ds-toast__icon {
    background: rgba(59, 130, 246, 0.15);
}

/* ---- 响应式：移动端顶部居中 ---- */
@media (max-width: 768px) {
    .ds-toast-container {
        top: var(--ds-space-md);
        right: 50%;
        transform: translateX(50%);
        align-items: center;
        max-width: calc(100vw - var(--ds-space-md) * 2);
    }

    .ds-toast {
        min-width: auto;
        max-width: calc(100vw - var(--ds-space-md) * 2);
        width: 100%;
        animation: ds-toast-slide-down 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        transform: translateY(-20px);
    }

    .ds-toast--enter {
        transform: translateY(0);
    }

    .ds-toast--leave {
        transform: translateY(-20px);
        opacity: 0;
    }
}

@keyframes ds-toast-slide-down {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .ds-toast,
    .ds-toast__progress {
        transition: none !important;
        animation: none !important;
    }
}

/* === Merged from design-system.css === */
/* !DEPRECATED - This file is superseded by design-tokens.css
   All variables have been consolidated into design-tokens.css
   This file is kept for backward compatibility only.
   Do not add new styles here. Use design-tokens.css instead.
   Created: 2026-09-12 */

/**
 * 联创圈 - 统一设计系统 (Unified Design System)
 * 版本: 1.0.0 | 2026-09-04
 * 适用范围: PC端 + 手机端 + 后台管理
 * 
 * 使用方式:
 *   前台: <link rel="stylesheet" href="/static/css/design-system.css">
 *   后台: 已在 admin/base.html 中引入
 * 
 * 命名规范:
 *   前台组件: .lc-前缀 (如 .lc-btn, .lc-card)
 *   后台组件: .ds-前缀 (如 .ds-btn, .ds-card) [保持兼容]
 *   CSS变量:  --lc-前缀 (如 --lc-primary, --lc-radius-md)
 * ========================================= */

/* =========================================
 * 1. 全局 CSS 变量 (统一色彩/字体/间距/圆角/阴影)
 * ========================================= */
:root {
    /* === 主色调 (统一: 蓝色 var(--ds-primary-500)) === */
    --lc-primary: var(--ds-primary-500);
    --lc-primary-light: var(--ds-primary-50);
    --lc-primary-lighter: var(--ds-primary-100);
    --lc-primary-dark: var(--ds-primary-600);
    --lc-primary-darker: var(--ds-primary-700);

    /* === 辅助色 === */
    --lc-purple: var(--ds-accent-500);
    --lc-purple-light: #f3f0ff;
    --lc-amber: var(--ds-warning-500);
    --lc-amber-light: var(--ds-warning-50);
    --lc-green: var(--ds-success-500);
    --lc-green-light: var(--ds-success-50);
    --lc-pink: var(--ds-highlight-500);
    --lc-pink-light: var(--ds-highlight-50);
    --lc-cyan: var(--ds-info-500);
    --lc-red: var(--ds-danger-500);
    --lc-red-light: var(--ds-danger-50);

    /* === 中性色 === */
    --lc-text-primary: var(--ds-neutral-900);
    --lc-text-secondary: var(--ds-neutral-500);
    --lc-text-muted: var(--ds-neutral-400);
    --lc-bg-page: var(--ds-neutral-50);
    --lc-bg-card: var(--ds-neutral-0);
    --lc-bg-hover: var(--ds-neutral-100);
    --lc-border: var(--ds-neutral-200);
    --lc-border-light: var(--ds-neutral-100);

    /* === 阴影 === */
    --lc-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --lc-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --lc-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --lc-shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
    --lc-shadow-xl: 0 16px 48px rgba(0,0,0,0.12);

    /* === 圆角 === */
    --lc-radius-xs: 4px;
    --lc-radius-sm: 6px;
    --lc-radius-md: 10px;
    --lc-radius-lg: 14px;
    --lc-radius-xl: 20px;
    --lc-radius-full: 9999px;

    /* === 间距 (4px 基准) === */
    --lc-space-xs: 4px;
    --lc-space-sm: 8px;
    --lc-space-md: 16px;
    --lc-space-lg: 24px;
    --lc-space-xl: 32px;
    --lc-space-2xl: 48px;

    /* === 字体 === */
    --lc-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    --lc-font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    
    /* 字号 */
    --lc-text-xs: 11px;
    --lc-text-sm: 13px;
    --lc-text-base: 14px;
    --lc-text-md: 15px;
    --lc-text-lg: 18px;
    --lc-text-xl: 22px;
    --lc-text-2xl: 28px;
    --lc-text-3xl: 36px;
    
    /* 字重 */
    --lc-font-normal: 400;
    --lc-font-medium: 500;
    --lc-font-semibold: 600;
    --lc-font-bold: 700;
    --lc-font-extrabold: 800;
    
    /* 行高 */
    --lc-leading-tight: 1.3;
    --lc-leading-normal: 1.5;
    --lc-leading-relaxed: 1.7;
    --lc-leading-loose: 1.9;

    /* === 响应式断点 (统一) === */
    --lc-bp-mobile: 768px;
    --lc-bp-tablet: 1024px;
    --lc-bp-desktop: 1280px;

    /* === 过渡动画 === */
    --lc-transition-fast: all 0.15s ease;
    --lc-transition: all 0.25s ease;
    --lc-transition-slow: all 0.4s ease;

    /* === z-index 层级 === */
    --lc-z-dropdown: 100;
    --lc-z-sticky: 200;
    --lc-z-overlay: 1000;
    --lc-z-modal: 1100;
    --lc-z-toast: 1200;
}

/* =========================================
 * 2. 全局基础样式
 * ========================================= */
/* 全局 reset 和元素基础样式已移除，避免覆盖后台已有样式。
 * 后台样式由 admin/base.html 内联 <style> 定义。
 * 前台样式由 site.min.css 定义。
 * 此文件仅提供 .lc- / .ds- 组件类。 */

/* =========================================
 * 3. 统一组件类 (.lc- 前缀 = 前台, .ds- 前缀 = 后台)
 * ========================================= */

/* === 按钮 === */
.lc-btn, .ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--lc-space-xs);
    padding: 8px var(--lc-space-md);
    border: 1px solid transparent;
    border-radius: var(--lc-radius-sm);
    font-size: var(--lc-text-base);
    font-weight: var(--lc-font-medium);
    line-height: var(--lc-leading-normal);
    cursor: pointer;
    user-select: none;
    transition: var(--lc-transition-fast);
}
.lc-btn:focus, .ds-btn:focus { outline: none; }

.lc-btn-primary, .ds-btn-primary {
    background: linear-gradient(135deg, var(--lc-primary) 0%, var(--lc-primary-dark) 100%);
    color: var(--ds-neutral-0);
    box-shadow: 0 2px 6px rgba(59,130,246,0.25);
}
.lc-btn-primary:hover, .ds-btn-primary:hover {
    background: linear-gradient(135deg, var(--lc-primary-dark) 0%, var(--lc-primary-darker) 100%);
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
    transform: translateY(-1px);
}

.lc-btn-ghost, .ds-btn-ghost {
    background-color: transparent;
    color: var(--lc-text-secondary);
    border-color: var(--lc-border);
}
.lc-btn-ghost:hover, .ds-btn-ghost:hover {
    background-color: var(--lc-bg-hover);
    color: var(--lc-text-primary);
    border-color: var(--lc-text-muted);
}

.lc-btn-danger, .ds-btn-danger {
    background-color: var(--lc-red);
    color: var(--ds-neutral-0);
}
.lc-btn-danger:hover, .ds-btn-danger:hover {
    background-color: var(--ds-danger-600);
    color: var(--ds-neutral-0);
}

.lc-btn-sm, .ds-btn-sm {
    padding: var(--lc-space-xs) var(--lc-space-sm);
    font-size: var(--lc-text-sm);
}

.lc-btn-lg, .ds-btn-lg {
    padding: 12px var(--lc-space-lg);
    font-size: var(--lc-text-md);
}

/* === 卡片 === */
.lc-card, .ds-card {
    background-color: var(--lc-bg-card);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-sm);
    padding: var(--lc-space-lg);
}

.lc-card-hover, .ds-card-hover {
    background-color: var(--lc-bg-card);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-md);
    box-shadow: var(--lc-shadow-sm);
    padding: var(--lc-space-lg);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lc-card-hover:hover, .ds-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--lc-shadow-lg);
}

.ds-card-section {
    background: var(--lc-bg-card);
    border-radius: var(--lc-radius-lg);
    padding: var(--lc-space-lg);
    margin-bottom: var(--lc-space-md);
    box-shadow: var(--lc-shadow-xs);
    border: 1px solid var(--lc-border-light);
}

/* === 徽章/标签 === */
.lc-badge, .ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--lc-space-sm);
    border-radius: var(--lc-radius-xs);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-font-semibold);
    line-height: var(--lc-leading-normal);
    background-color: var(--lc-primary-light);
    color: var(--lc-primary-dark);
}
.lc-badge-purple, .ds-badge-purple { background-color: var(--lc-purple-light); color: var(--lc-purple); }
.lc-badge-amber,  .ds-badge-amber  { background-color: var(--lc-amber-light); color: var(--lc-amber); }
.lc-badge-green,  .ds-badge-green  { background-color: var(--lc-green-light); color: var(--lc-green); }
.lc-badge-pink,   .ds-badge-pink   { background-color: var(--lc-pink-light); color: var(--lc-pink); }
.lc-badge-gray,   .ds-badge-gray   { background-color: var(--lc-bg-hover); color: var(--lc-text-secondary); }
.lc-badge-red,    .ds-badge-red    { background-color: var(--lc-red-light); color: var(--lc-red); }

/* === 输入框 === */
.lc-input, .ds-input {
    width: 100%;
    padding: 8px var(--lc-space-md);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-sm);
    background-color: var(--lc-bg-card);
    color: var(--lc-text-primary);
    font-size: var(--lc-text-base);
    line-height: var(--lc-leading-normal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lc-input::placeholder, .ds-input::placeholder { color: var(--lc-text-muted); }
.lc-input:focus, .ds-input:focus {
    outline: none;
    border-color: var(--lc-primary);
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* === 标签 chip === */
.lc-tag, .ds-tag {
    display: inline-flex;
    align-items: center;
    padding: var(--lc-space-xs) var(--lc-space-sm);
    border-radius: var(--lc-radius-xs);
    background-color: var(--lc-primary-light);
    color: var(--lc-primary-dark);
    font-size: var(--lc-text-xs);
    font-weight: var(--lc-font-medium);
    line-height: var(--lc-leading-normal);
}

/* === 区块/标题 === */
.lc-section, .ds-section {
    margin-bottom: var(--lc-space-lg);
}
.lc-section-title, .ds-section-title {
    font-size: var(--lc-text-lg);
    font-weight: var(--lc-font-bold);
    color: var(--lc-text-primary);
    margin: 0 0 var(--lc-space-md) 0;
    line-height: var(--lc-leading-tight);
}

/* === 网格 === */
.lc-grid, .ds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--lc-space-md);
}

/* === 返回按钮 === */
.lc-back, .ds-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: var(--lc-bg-card);
    border: 1px solid var(--lc-border);
    border-radius: var(--lc-radius-sm);
    font-size: var(--lc-text-sm);
    font-weight: var(--lc-font-semibold);
    color: var(--lc-text-secondary);
    text-decoration: none;
    transition: var(--lc-transition-fast);
}
.lc-back:hover, .ds-back:hover {
    background: var(--lc-bg-hover);
    border-color: var(--ds-neutral-300);
    color: var(--lc-text-primary);
    transform: translateX(-2px);
}

/* === 页面容器 === */
.lc-page, .ds-page {
    padding: var(--lc-space-lg);
    background: var(--lc-bg-page);
    min-height: calc(100vh - 60px);
}
.lc-page-header, .ds-page-header {
    margin-bottom: var(--lc-space-lg);
}

/* === 渐变背景工具类 === */
.lc-gradient-primary { background: linear-gradient(135deg, var(--lc-primary), var(--lc-primary-dark)); color: var(--ds-neutral-0); }
.lc-gradient-purple  { background: linear-gradient(135deg, var(--lc-purple), var(--ds-accent-600)); color: var(--ds-neutral-0); }
.lc-gradient-amber   { background: linear-gradient(135deg, var(--lc-amber), var(--ds-warning-600)); color: var(--ds-neutral-0); }
.lc-gradient-green   { background: linear-gradient(135deg, var(--lc-green), var(--ds-success-600)); color: var(--ds-neutral-0); }
.lc-gradient-pink    { background: linear-gradient(135deg, var(--lc-pink), var(--ds-highlight-600)); color: var(--ds-neutral-0); }
.lc-gradient-dark    { background: linear-gradient(135deg, #0f0c29, #302b63); color: var(--ds-neutral-0); }

/* === 文字工具类 === */
.lc-text-xs   { font-size: var(--lc-text-xs); }
.lc-text-sm   { font-size: var(--lc-text-sm); }
.lc-text-base { font-size: var(--lc-text-base); }
.lc-text-md   { font-size: var(--lc-text-md); }
.lc-text-lg   { font-size: var(--lc-text-lg); }
.lc-text-xl   { font-size: var(--lc-text-xl); }
.lc-text-2xl  { font-size: var(--lc-text-2xl); }
.lc-text-bold { font-weight: var(--lc-font-bold); }
.lc-text-semibold { font-weight: var(--lc-font-semibold); }
.lc-text-primary { color: var(--lc-text-primary); }
.lc-text-secondary { color: var(--lc-text-secondary); }
.lc-text-muted { color: var(--lc-text-muted); }

/* === 间距工具类 === */
.lc-mt-xs { margin-top: var(--lc-space-xs); }
.lc-mt-sm { margin-top: var(--lc-space-sm); }
.lc-mt-md { margin-top: var(--lc-space-md); }
.lc-mt-lg { margin-top: var(--lc-space-lg); }
.lc-mb-xs { margin-bottom: var(--lc-space-xs); }
.lc-mb-sm { margin-bottom: var(--lc-space-sm); }
.lc-mb-md { margin-bottom: var(--lc-space-md); }
.lc-mb-lg { margin-bottom: var(--lc-space-lg); }

/* =========================================
 * 4. 响应式 (统一断点: 768px)
 * ========================================= */
@media (max-width: 768px) {
    .lc-grid, .ds-grid {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
        gap: var(--lc-space-sm);
    }
    
    .lc-page, .ds-page {
        padding: var(--lc-space-sm);
    }
    
    .lc-card, .ds-card,
    .lc-card-hover, .ds-card-hover,
    .ds-card-section {
        padding: var(--lc-space-md);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .lc-grid, .ds-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    }
}

/* =========================================
 * 5. 兼容性层 - 统一旧变量和按钮类名
 *    目标: 让旧代码无缝使用设计系统
 * ========================================= */

/* --- 5.1 CSS变量别名 (旧变量 → 新变量) --- */
:root {
    /* 前台 style.css 变量 → 设计系统变量 */
    --primary-color: var(--lc-primary);
    --primary-dark: var(--lc-primary-dark);
    --primary-light: var(--lc-primary-light);
    
    /* 后台内联变量 → 设计系统变量 */
    --color-primary: var(--lc-primary);
    --color-primary-dark: var(--lc-primary-dark);
    
    /* 移动端变量 → 设计系统变量 */
    --m-primary: var(--lc-primary);
    --m-primary-light: var(--lc-primary-light);
    
    /* 后台移动端变量 → 设计系统变量 */
    --am-primary: var(--lc-primary);
}

/* --- 5.2 旧按钮类兼容 (.btn → .lc-btn) --- */
/* 
 * 说明：为 .btn 系列添加设计系统样式，
 * 保证现有 700+ 处 .btn 使用自动获得统一外观
 * 优先级：design-system.css 在 site.min.css 之后加载，
 * 因此这里的定义会覆盖旧的 .btn 样式
 */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: var(--lc-radius-sm);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    cursor: pointer;
    user-select: none;
    transition: all 0.15s ease;
    text-decoration: none;
}
.btn:focus { outline: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--lc-primary) 0%, var(--lc-primary-dark) 100%);
    color: var(--ds-neutral-0);
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(59,130,246,0.25);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--lc-primary-dark) 0%, var(--lc-primary-darker) 100%);
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 12px rgba(59,130,246,0.35);
    transform: translateY(-1px);
}

.btn-outline {
    background-color: transparent;
    color: var(--lc-primary);
    border-color: var(--lc-primary);
}
.btn-outline:hover {
    background-color: var(--lc-primary);
    color: var(--ds-neutral-0);
}

.btn-ghost {
    background-color: transparent;
    color: var(--lc-text-secondary);
    border-color: var(--lc-border);
}
.btn-ghost:hover {
    background-color: var(--lc-bg-hover);
    color: var(--lc-text-primary);
    border-color: var(--lc-text-muted);
}

.btn-secondary {
    background-color: var(--lc-bg-hover);
    color: var(--lc-text-secondary);
    border-color: transparent;
}
.btn-secondary:hover {
    background-color: var(--lc-border);
    color: var(--lc-text-primary);
}

.btn-danger {
    background-color: var(--lc-red);
    color: var(--ds-neutral-0);
    border-color: transparent;
}
.btn-danger:hover {
    background-color: var(--ds-danger-600);
    color: var(--ds-neutral-0);
}

.btn-success {
    background-color: var(--lc-green);
    color: var(--ds-neutral-0);
    border-color: transparent;
}
.btn-success:hover {
    background-color: var(--ds-success-600);
    color: var(--ds-neutral-0);
}

.btn-warning {
    background-color: var(--lc-amber);
    color: var(--ds-neutral-0);
    border-color: transparent;
}
.btn-warning:hover {
    background-color: var(--ds-warning-600);
    color: var(--ds-neutral-0);
}

.btn-info {
    background-color: var(--lc-cyan);
    color: var(--ds-neutral-0);
    border-color: transparent;
}
.btn-info:hover {
    background-color: var(--ds-info-600);
    color: var(--ds-neutral-0);
}

/* 尺寸变体 */
.btn-sm {
    padding: 4px 10px;
    font-size:14px;
}

.btn-xs {
    padding: 2px 8px;
    font-size:14px;
}

.btn-lg {
    padding: 12px 24px;
    font-size: 16px;
}

.btn-block {
    display: flex;
    width: 100%;
}

/* --- 5.3 补充按钮变体 (常用渐变/特殊样式) --- */
.btn-gradient-purple {
    background: linear-gradient(135deg, var(--ds-accent-500) 0%, var(--ds-primary-500) 100%);
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(139,92,246,0.3);
}
.btn-gradient-purple:hover {
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(139,92,246,0.4);
    transform: translateY(-1px);
}

.btn-gradient-orange {
    background: linear-gradient(135deg, var(--ds-warning-500) 0%, var(--ds-danger-500) 100%);
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.btn-gradient-orange:hover {
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(249,115,22,0.4);
    transform: translateY(-1px);
}

.btn-gradient-pink {
    background: linear-gradient(135deg, var(--ds-highlight-500) 0%, var(--ds-warning-500) 100%);
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(236,72,153,0.3);
}
.btn-gradient-pink:hover {
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(236,72,153,0.4);
    transform: translateY(-1px);
}

.btn-gradient-green {
    background: linear-gradient(135deg, var(--ds-success-500) 0%, var(--ds-info-500) 100%);
    color: var(--ds-neutral-0);
    border: none;
    box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}
.btn-gradient-green:hover {
    color: var(--ds-neutral-0);
    box-shadow: 0 4px 16px rgba(16,185,129,0.4);
    transform: translateY(-1px);
}

/* --- 5.4 统一空状态组件 --- */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--lc-text-muted);
}
.empty-state .empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}
.empty-state .empty-text {
    font-size: 14px;
    color: var(--lc-text-secondary);
    margin-bottom: 16px;
}

/* --- 5.5 统一 Loading 组件 --- */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--lc-border);
    border-top-color: var(--lc-primary);
    border-radius: 50%;
    animation: lc-spin 0.8s linear infinite;
}

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

.loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--lc-z-overlay);
}
.loading-overlay .loading-spinner {
    width: 36px;
    height: 36px;
    border-width: 3px;
}

/* --- 5.6 Toast 提示 --- */
.lc-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    padding: 12px 24px;
    border-radius: var(--lc-radius-md);
    color: var(--ds-neutral-0);
    font-size: 14px;
    z-index: var(--lc-z-toast);
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
    box-shadow: var(--lc-shadow-lg);
}
.lc-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.lc-toast-success { background-color: var(--lc-green); }
.lc-toast-error   { background-color: var(--lc-red); }
.lc-toast-warning { background-color: var(--lc-amber); }
.lc-toast-info    { background-color: var(--lc-primary); }

/* --- 5.7 通用工具类 (Utility Classes) ---
 * 用于快速替换内联style，遵循设计系统变量
 * 命名参考 Tailwind 风格，便于记忆和使用
 */

/* === 文字工具类 === */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-gradient {
    background: linear-gradient(135deg, var(--lc-primary), var(--lc-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.font-bold   { font-weight: var(--lc-font-bold); }
.font-extrabold { font-weight: var(--lc-font-extrabold); }
.font-semibold { font-weight: var(--lc-font-semibold); }
.font-medium { font-weight: var(--lc-font-medium); }
.font-normal { font-weight: var(--lc-font-normal); }
.text-secondary { color: var(--lc-text-secondary); }
.text-muted { color: var(--lc-text-muted); }
.text-primary { color: var(--lc-text-primary); }

/* 字号工具类 */
.text-xs   { font-size: var(--lc-text-xs); }
.text-sm   { font-size: var(--lc-text-sm); }
.text-base { font-size: var(--lc-text-base); }
.text-md   { font-size: var(--lc-text-md); }
.text-lg   { font-size: var(--lc-text-lg); }
.text-xl   { font-size: var(--lc-text-xl); }
.text-2xl  { font-size: var(--lc-text-2xl); }

/* 行高工具类 */
.leading-none   { line-height: 1; }
.leading-tight  { line-height: var(--lc-leading-tight); }
.leading-normal { line-height: var(--lc-leading-normal); }

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

/* === 背景工具类 === */
.bg-white  { background-color: var(--ds-neutral-0); }
.bg-gray-50  { background-color: var(--ds-neutral-50); }
.bg-gray-100 { background-color: var(--ds-neutral-100); }
.bg-gray-200 { background-color: var(--ds-neutral-200); }

.bg-gradient-primary {
    background: linear-gradient(135deg, var(--lc-primary) 0%, var(--lc-primary-dark) 100%);
    color: var(--ds-neutral-0);
}
.bg-gradient-purple {
    background: linear-gradient(135deg, var(--ds-accent-500) 0%, var(--ds-primary-500) 100%);
    color: var(--ds-neutral-0);
}
.bg-gradient-orange {
    background: linear-gradient(135deg, var(--ds-warning-500) 0%, var(--ds-danger-500) 100%);
    color: var(--ds-neutral-0);
}
.bg-gradient-pink {
    background: linear-gradient(135deg, var(--ds-highlight-500) 0%, var(--ds-warning-500) 100%);
    color: var(--ds-neutral-0);
}
.bg-gradient-green {
    background: linear-gradient(135deg, var(--ds-success-500) 0%, var(--ds-info-500) 100%);
    color: var(--ds-neutral-0);
}

/* === 边框工具类 === */
.border        { border: 1px solid var(--lc-border); }
.border-top    { border-top: 1px solid var(--lc-border); }
.border-bottom { border-bottom: 1px solid var(--lc-border); }
.border-gray-200 { border-color: var(--ds-neutral-200); }
.border-gray-300 { border-color: var(--ds-neutral-300); }
.border-gray-100 { border-color: var(--ds-neutral-100); }

.rounded-sm   { border-radius: 4px; }
.rounded      { border-radius: var(--lc-radius-sm); }
.rounded-md   { border-radius: 8px; }
.rounded-lg   { border-radius: var(--lc-radius-md); }
.rounded-xl   { border-radius: 12px; }
.rounded-full { border-radius: var(--lc-radius-full); }

/* === 弹性布局工具类 === */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.justify-center   { justify-content: center; }
.justify-between  { justify-content: space-between; }
.justify-start    { justify-content: flex-start; }
.justify-end      { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* === 尺寸工具类 === */
.w-full { width: 100%; }
.w-auto { width: auto; }
.h-full { height: 100%; }
.h-auto { height: auto; }
.min-h-100 { min-height: 100px; }
.min-h-200 { min-height: 200px; }
.min-h-300 { min-height: 300px; }
.min-h-400 { min-height: 400px; }
.min-h-500 { min-height: 500px; }

/* === 间距工具类 === */
.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }
.p-6 { padding: 24px; }
.p-8 { padding: 32px; }

.px-1 { padding-left: 4px; padding-right: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.px-3 { padding-left: 12px; padding-right: 12px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.px-5 { padding-left: 20px; padding-right: 20px; }
.px-6 { padding-left: 24px; padding-right: 24px; }

.py-1 { padding-top: 4px; padding-bottom: 4px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.py-3 { padding-top: 12px; padding-bottom: 12px; }
.py-4 { padding-top: 16px; padding-bottom: 16px; }
.py-5 { padding-top: 20px; padding-bottom: 20px; }
.py-6 { padding-top: 24px; padding-bottom: 24px; }

.pt-1 { padding-top: 4px; }
.pt-2 { padding-top: 8px; }
.pt-3 { padding-top: 12px; }
.pt-4 { padding-top: 16px; }
.pt-5 { padding-top: 20px; }

.pb-1 { padding-bottom: 4px; }
.pb-2 { padding-bottom: 8px; }
.pb-3 { padding-bottom: 12px; }
.pb-4 { padding-bottom: 16px; }
.pb-5 { padding-bottom: 20px; }

.m-0 { margin: 0; }
.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }

.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }
.mb-8 { margin-bottom: 32px; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* === 阴影工具类 === */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.shadow-md { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.shadow-lg { box-shadow: 0 8px 24px rgba(0,0,0,0.10); }

/* === 鼠标/交互 === */
.cursor-pointer { cursor: pointer; }
.cursor-default { cursor: default; }

/* === 溢出 === */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* === 透明度 === */
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }

/* === 过渡动画 === */
.transition      { transition: all 0.25s ease; }
.transition-fast { transition: all 0.15s ease; }

/* === 显示 === */
.hidden { display: none; }
.block  { display: block; }
.inline-flex { display: inline-flex; }

/* =========================================
 * 扩展工具类 (v2 - 补充常用类)
 * ========================================= */

/* === 间距补充（0.5 / 1.5 / 2.5 级别） === */
.p-0 { padding: 0; }
.p-0\.5 { padding: 2px; }
.p-1\.5 { padding: 6px; }
.p-2\.5 { padding: 10px; }
.p-7 { padding: 28px; }
.p-10 { padding: 40px; }
.p-15 { padding: 60px; }

.px-0\.5 { padding-left: 2px; padding-right: 2px; }
.px-1\.5 { padding-left: 6px; padding-right: 6px; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.px-7 { padding-left: 28px; padding-right: 28px; }
.px-8 { padding-left: 32px; padding-right: 32px; }

.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.py-1\.5 { padding-top: 6px; padding-bottom: 6px; }
.py-2\.5 { padding-top: 10px; padding-bottom: 10px; }
.py-7 { padding-top: 28px; padding-bottom: 28px; }
.py-8 { padding-top: 32px; padding-bottom: 32px; }

.pt-0 { padding-top: 0; }
.pt-0\.5 { padding-top: 2px; }
.pt-1\.5 { padding-top: 6px; }
.pt-2\.5 { padding-top: 10px; }
.pt-7 { padding-top: 28px; }
.pt-10 { padding-top: 40px; }

.pb-0 { padding-bottom: 0; }
.pb-0\.5 { padding-bottom: 2px; }
.pb-1\.5 { padding-bottom: 6px; }
.pb-2\.5 { padding-bottom: 10px; }
.pb-7 { padding-bottom: 28px; }
.pb-10 { padding-bottom: 40px; }

.pl-1 { padding-left: 4px; }
.pl-2 { padding-left: 8px; }
.pl-3 { padding-left: 12px; }
.pl-4 { padding-left: 16px; }
.pl-5 { padding-left: 20px; }

.pr-1 { padding-right: 4px; }
.pr-2 { padding-right: 8px; }
.pr-3 { padding-right: 12px; }
.pr-4 { padding-right: 16px; }
.pr-5 { padding-right: 20px; }

.m-0\.5 { margin: 2px; }
.m-1\.5 { margin: 6px; }
.m-2\.5 { margin: 10px; }
.m-6 { margin: 24px; }

.mt-0 { margin-top: 0; }
.mt-0\.5 { margin-top: 2px; }
.mt-1\.5 { margin-top: 6px; }
.mt-2\.5 { margin-top: 10px; }
.mt-7 { margin-top: 28px; }
.mt-10 { margin-top: 40px; }

.mb-0 { margin-bottom: 0; }
.mb-0\.5 { margin-bottom: 2px; }
.mb-1\.5 { margin-bottom: 6px; }
.mb-2\.5 { margin-bottom: 10px; }
.mb-7 { margin-bottom: 28px; }
.mb-10 { margin-bottom: 40px; }

.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-3 { margin-left: 12px; }
.ml-4 { margin-left: 16px; }
.ml-5 { margin-left: 20px; }

.mr-1 { margin-right: 4px; }
.mr-2 { margin-right: 8px; }
.mr-3 { margin-right: 12px; }
.mr-4 { margin-right: 16px; }
.mr-5 { margin-right: 20px; }

.my-1 { margin-top: 4px; margin-bottom: 4px; }
.my-2 { margin-top: 8px; margin-bottom: 8px; }
.my-3 { margin-top: 12px; margin-bottom: 12px; }
.my-4 { margin-top: 16px; margin-bottom: 16px; }
.my-5 { margin-top: 20px; margin-bottom: 20px; }
.my-6 { margin-top: 24px; margin-bottom: 24px; }

.mx-1 { margin-left: 4px; margin-right: 4px; }
.mx-2 { margin-left: 8px; margin-right: 8px; }
.mx-3 { margin-left: 12px; margin-right: 12px; }
.mx-4 { margin-left: 16px; margin-right: 16px; }
.mx-5 { margin-left: 20px; margin-right: 20px; }

/* === gap 补充 === */
.gap-0\.5 { gap: 2px; }
.gap-1\.5 { gap: 6px; }
.gap-2\.5 { gap: 10px; }
.gap-5 { gap: 20px; }
.gap-7 { gap: 28px; }
.gap-8 { gap: 32px; }
.gap-10 { gap: 40px; }

/* === 宽度/高度像素值 === */
.w-4 { width: 16px; }
.w-5 { width: 20px; }
.w-6 { width: 24px; }
.w-7 { width: 28px; }
.w-8 { width: 32px; }
.w-9 { width: 36px; }
.w-10 { width: 40px; }
.w-12 { width: 48px; }
.w-14 { width: 56px; }
.w-16 { width: 64px; }
.w-20 { width: 80px; }
.w-24 { width: 96px; }
.w-30 { width: 120px; }
.w-40 { width: 160px; }
.w-48 { width: 192px; }
.w-60 { width: 240px; }
.w-72 { width: 288px; }
.min-w-0 { min-width: 0; }
.max-w-full { max-width: 100%; }

.h-4 { height: 16px; }
.h-5 { height: 20px; }
.h-6 { height: 24px; }
.h-7 { height: 28px; }
.h-8 { height: 32px; }
.h-9 { height: 36px; }
.h-10 { height: 40px; }
.h-12 { height: 48px; }
.h-14 { height: 56px; }
.h-16 { height: 64px; }
.h-20 { height: 80px; }
.h-22\.5 { height: 90px; }
.h-24 { height: 96px; }
.h-30 { height: 120px; }
.min-h-0 { min-height: 0; }

/* === 定位 === */
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1 { top: 4px; }
.right-1 { right: 4px; }
.bottom-1 { bottom: 4px; }
.left-1 { left: 4px; }
.top-2 { top: 8px; }
.right-2 { right: 8px; }
.bottom-2 { bottom: 8px; }
.left-2 { left: 8px; }
.-top-1 { top: -4px; }
.-right-1 { right: -4px; }
.-bottom-1 { bottom: -4px; }
.-left-1 { left: -4px; }
.-top-2 { top: -8px; }
.-right-2 { right: -8px; }
.-bottom-2 { bottom: -8px; }
.-left-2 { left: -8px; }

/* === 文字颜色补充 === */
.text-inherit { color: inherit; }
.text-current { color: currentColor; }
.text-purple { color: var(--ds-accent-500); }
.text-indigo { color: var(--ds-primary-500); }
.text-orange { color: var(--ds-warning-500); }
.text-pink { color: var(--ds-highlight-500); }
.text-cyan { color: var(--ds-info-500); }
.text-emerald-500 { color: var(--ds-success-500); }
.text-amber-600 { color: var(--ds-warning-600); }
.text-rose-500 { color: #f43f5e; }

/* === 背景色补充 === */
.bg-transparent { background: transparent; }
.bg-purple { background: var(--ds-accent-500); }
.bg-indigo { background: var(--ds-primary-500); }
.bg-orange { background: var(--ds-warning-500); }
.bg-pink { background: var(--ds-highlight-500); }
.bg-cyan { background: var(--ds-info-500); }
.bg-gray-200 { background: #e5e7eb; }
.bg-gray-100 { background: #f3f4f6; }

/* === 渐变背景补充 === */
.bg-gradient-purple { background: linear-gradient(135deg, var(--ds-primary-500), #764ba2); }
.bg-gradient-green { background: linear-gradient(135deg, #2ed573, #1abc9c); }
.bg-gradient-blue { background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-600)); }
.bg-gradient-orange { background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-warning-600)); }
.bg-gradient-red { background: linear-gradient(135deg, var(--ds-danger-500), var(--ds-danger-600)); }
.bg-gradient-pink { background: linear-gradient(135deg, var(--ds-highlight-500), var(--ds-highlight-600)); }

/* === 网格 === */
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-auto-fill-220 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid-cols-auto-fill-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.grid-cols-auto-fill-250 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

/* === 字体 === */
.font-mono { font-family: monospace; }

/* === 透明度补充 === */
.opacity-0 { opacity: 0; }
.opacity-25 { opacity: 0.25; }
.opacity-60 { opacity: 0.6; }
.opacity-80 { opacity: 0.8; }
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.9; }
.opacity-100 { opacity: 1; }

/* === 行高补充 === */
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* === 文字溢出 === */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* === 边框补充 === */
.border-b { border-bottom: 1px solid var(--border-color, #e5e7eb); }
.border-t { border-top: 1px solid var(--border-color, #e5e7eb); }
.border-l { border-left: 1px solid var(--border-color, #e5e7eb); }
.border-r { border-right: 1px solid var(--border-color, #e5e7eb); }
.border-0 { border: 0; }

/* === 盒子模型 === */
.box-border { box-sizing: border-box; }
.box-content { box-sizing: content-box; }

/* =========================================
 * 扩展工具类 v3 - 更多补充
 * ========================================= */

/* === 间距补充（3.5 / 4.5 / 7.5 级别） === */
.p-3\.5 { padding: 14px; }
.p-4\.5 { padding: 18px; }
.p-7\.5 { padding: 30px; }
.py-3\.5 { padding-top: 14px; padding-bottom: 14px; }
.py-4\.5 { padding-top: 18px; padding-bottom: 18px; }
.px-3\.5 { padding-left: 14px; padding-right: 14px; }
.pt-3\.5 { padding-top: 14px; }
.pb-3\.5 { padding-bottom: 14px; }
.mb-3\.5 { margin-bottom: 14px; }
.mt-3\.5 { margin-top: 14px; }
.ml-1\.5 { margin-left: 6px; }
.mr-1\.5 { margin-right: 6px; }
.ml-0 { margin-left: 0; }
.mr-0 { margin-right: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.p-0 { padding: 0; }

/* === z-index 补充 === */
.z-50 { z-index: 50; }
.z-9999 { z-index: 9999; }

/* === resize === */
.resize-y { resize: vertical; }
.resize-x { resize: horizontal; }
.resize-none { resize: none; }

/* === 字体大小补充 === */
.text-xxs { font-size: 9px; }

/* === 文字颜色补充（深色/浅色变体） === */
.text-emerald-700 { color: var(--ds-success-100); }
.text-amber-800 { color: var(--ds-warning-700); }
.text-blue-800 { color: var(--ds-primary-700); }
.text-purple-700 { color: var(--ds-accent-600); }

/* === 背景色补充（浅色/深色变体） === */
.bg-amber-50 { background: var(--ds-warning-50); }
.bg-green-50 { background: var(--ds-success-50); }
.bg-blue-100 { background: var(--ds-primary-100); }
.bg-emerald-100 { background: var(--ds-success-100); }
.bg-red-50 { background: var(--ds-danger-50); }
.bg-black-50 { background: rgba(0,0,0,0.5); }

/* === 边框补充 === */
.border-transparent { border-color: transparent; }
.border-2 { border-width: 2px; border-style: solid; }
.border-gray-100 { border-color: var(--ds-neutral-100); }

/* === flex 补充 === */
.flex-nowrap { flex-wrap: nowrap; }
.justify-evenly { justify-content: space-evenly; }
.items-baseline { align-items: baseline; }
.flex-col-reverse { flex-direction: column-reverse; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-shrink { flex-shrink: 1; }

/* =========================================
 * 扩展工具类 v4 - v6 补充
 * ========================================= */

/* === 宽度/高度补充 === */
.w-15 { width: 60px; }
.w-22\.5 { width: 90px; }
.w-25 { width: 100px; }
.w-35 { width: 140px; }
.h-15 { height: 60px; }
.h-25 { height: 100px; }

/* === opacity 补充 === */
.opacity-30 { opacity: 0.3; }

/* === outline === */
.outline-none { outline: none; }

/* === 颜色补充 === */
.text-wechat { color: #07c160; }
.text-indigo { color: var(--ds-primary-500); }
.text-white-80 { color: rgba(255,255,255,0.8); }
.text-white-60 { color: rgba(255,255,255,0.6); }
.text-white-50 { color: rgba(255,255,255,0.5); }

/* === 背景色补充 === */
.bg-indigo { background: var(--ds-primary-500); }
.bg-purple-100 { background: var(--ds-accent-100); }
.bg-green-200 { background: #bbf7d0; }
.bg-amber-200 { background: var(--ds-warning-100); }
.bg-white-15 { background: rgba(255,255,255,0.15); }
.bg-white-10 { background: rgba(255,255,255,0.1); }
.bg-white-5 { background: rgba(255,255,255,0.05); }

/* === 边框颜色补充 === */
.border-gray-200 { border-color: var(--ds-neutral-200); }
.border-green-200 { border-color: #bbf7d0; }
.border-amber-200 { border-color: var(--ds-warning-100); }
.border-indigo-100 { border-color: #e0e7ff; }

/* === 渐变背景工具类 (高频) === */
.bg-gradient-primary { background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-accent-500)); }
.bg-gradient-primary-2 { background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-accent-500)); }
.bg-gradient-amber { background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-warning-500)); }
.bg-gradient-amber-2 { background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-warning-500)); }
.bg-gradient-green { background: linear-gradient(135deg, var(--ds-success-500), var(--ds-success-400)); }
.bg-gradient-green-2 { background: linear-gradient(135deg, var(--ds-success-500), var(--ds-success-600)); }
.bg-gradient-pink { background: linear-gradient(135deg, var(--ds-highlight-500), var(--ds-highlight-400)); }
.bg-gradient-orange-pink { background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-highlight-500)); }
.bg-gradient-purple-deep { background: linear-gradient(135deg, var(--ds-accent-500), var(--ds-accent-600)); }
.bg-gradient-blue { background: linear-gradient(135deg, var(--ds-primary-500), var(--ds-primary-600)); }
.bg-gradient-purple { background: linear-gradient(135deg, var(--ds-primary-500), #764ba2); }

/* 浅色渐变背景 */
.bg-gradient-blue-light { background: linear-gradient(135deg, var(--ds-primary-50), var(--ds-primary-100)); }
.bg-gradient-amber-light { background: linear-gradient(135deg, var(--ds-warning-50), var(--ds-warning-100)); }
.bg-gradient-green-light { background: linear-gradient(135deg, var(--ds-success-50), var(--ds-success-100)); }
.bg-gradient-purple-light { background: linear-gradient(135deg, var(--ds-accent-50), var(--ds-accent-100)); }
.bg-gradient-pink-light { background: linear-gradient(135deg, var(--ds-highlight-50), var(--ds-highlight-100)); }
.bg-gradient-orange-light { background: linear-gradient(135deg, var(--ds-neutral-0)7ed, #ffedd5); }

/* === 阴影工具类 (高频) === */
.shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.shadow-sm-2 { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.shadow-md { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.shadow-md-2 { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.shadow-none { box-shadow: none; }

/* === 文字颜色 (高频) === */
.text-primary { color: var(--ds-primary-500); }
.text-primary-2 { color: var(--ds-primary-500); }
.text-indigo { color: var(--ds-primary-500); }
.text-purple { color: var(--ds-accent-500); }
.text-green { color: var(--ds-success-500); }
.text-green-2 { color: var(--ds-success-700); }
.text-green-3 { color: #22c55e; }
.text-amber { color: var(--ds-warning-500); }
.text-orange { color: var(--ds-warning-500); }
.text-red { color: var(--ds-danger-500); }
.text-pink { color: var(--ds-highlight-500); }
.text-cyan { color: var(--ds-info-500); }
.text-gray-500 { color: var(--ds-neutral-500); }
.text-gray-600 { color: var(--ds-neutral-600); }
.text-gray-400 { color: var(--ds-neutral-400); }
.text-gray-300 { color: var(--ds-neutral-300); }
.text-gray-700 { color: var(--ds-neutral-700); }
.text-gray-800 { color: var(--ds-neutral-900); }
.text-slate-800 { color: var(--ds-neutral-900); }

/* === 背景色 (高频) === */
.bg-blue-50 { background: var(--ds-primary-50); }
.bg-blue-100 { background: var(--ds-primary-100); }
.bg-amber-50 { background: var(--ds-warning-50); }
.bg-amber-100 { background: var(--ds-warning-100); }
.bg-green-50 { background: var(--ds-success-50); }
.bg-green-100 { background: var(--ds-success-100); }
.bg-purple-50 { background: var(--ds-accent-50); }
.bg-purple-100 { background: var(--ds-accent-100); }
.bg-pink-50 { background: var(--ds-highlight-50); }
.bg-pink-100 { background: var(--ds-highlight-100); }
.bg-orange-50 { background: var(--ds-neutral-0)7ed; }
.bg-orange-100 { background: #ffedd5; }
.bg-red-50 { background: var(--ds-danger-50); }
.bg-red-100 { background: var(--ds-danger-100); }
.bg-slate-50 { background: var(--ds-neutral-50); }
.bg-slate-100 { background: var(--ds-neutral-100); }
.bg-gray-50 { background: var(--ds-neutral-50); }
.bg-gray-100 { background: var(--ds-neutral-100); }
.bg-gray-200 { background: var(--ds-neutral-200); }

/* === 玻璃态效果 === */
.glass { backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.2); }
.glass-light { backdrop-filter: blur(10px); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); }

/* === 常用尺寸 === */
.w-200 { min-width: 200px; width: 200px; }
.w-300 { max-width: 300px; }
.min-w-200 { min-width: 200px; }
.min-w-150 { min-width: 150px; }
.max-w-200 { max-width: 200px; }
.max-w-300 { max-width: 300px; }
.max-w-400 { max-width: 400px; }

/* === 间距补充 (常用非标准值) === */
.py-4\.5 { padding-top: 18px; padding-bottom: 18px; }
.mb-4\.5 { margin-bottom: 18px; }
.px-2\.5 { padding-left: 10px; padding-right: 10px; }
.py-0\.5 { padding-top: 2px; padding-bottom: 2px; }
.px-1\.5 { padding-left: 6px; padding-right: 6px; }
.gap-4\.5 { gap: 18px; }

/* === 行高 === */
.leading-relaxed { line-height: 1.625; }
.leading-7 { line-height: 1.75rem; }
.leading-loose { line-height: 2; }

/* === 边框底部 === */
.border-b-2 { border-bottom-width: 2px; border-bottom-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-l-4 { border-left-width: 4px; border-left-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }

/* === 圆角 === */
.rounded-xl { border-radius: 12px; }
.rounded-2xl { border-radius: 16px; }
.rounded-3xl { border-radius: 24px; }
.rounded-full { border-radius: 9999px; }
.rounded-none { border-radius: 0; }

/* === 字体大小补充 === */
.text-xs { font-size:0.875rem; }
.text-sm { font-size: 0.875rem; }
.text-base { font-size: 1rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }

/* =========================================
 * 统一弹窗体系 (.lc-modal-*)
 * 替代原有 modal-overlay / gz-modal / mx-modal / kw-modal 等10+套
 * ========================================= */

.lc-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.lc-modal-overlay.active,
.lc-modal-overlay.show {
    opacity: 1;
    visibility: visible;
}
.lc-modal-overlay.hidden { display: none; }

.lc-modal {
    background: var(--ds-neutral-0);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.98);
    transition: transform 0.25s ease;
    overflow: hidden;
}
.lc-modal-overlay.active .lc-modal,
.lc-modal-overlay.show .lc-modal {
    transform: translateY(0) scale(1);
}

/* 弹窗尺寸 */
.lc-modal-sm { max-width: 420px; }
.lc-modal-md { max-width: 560px; }
.lc-modal-lg { max-width: 720px; }
.lc-modal-xl { max-width: 900px; }

.lc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ds-neutral-100);
    flex-shrink: 0;
}
.lc-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ds-neutral-900);
    margin: 0;
}
.lc-modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ds-neutral-400);
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.lc-modal-close:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-600);
}

.lc-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    color: var(--ds-neutral-600);
    font-size: 14px;
    line-height: 1.6;
}

.lc-modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--ds-neutral-100);
    flex-shrink: 0;
    background: var(--ds-neutral-50);
}
.lc-modal-footer .lc-btn { min-width: 80px; }

/* =========================================
 * 统一按钮体系补充 (完整 lc-btn-*)
 * ========================================= */

/* 按钮变体补充 */
.lc-btn-secondary, .ds-btn-secondary {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-600);
}
.lc-btn-secondary:hover, .ds-btn-secondary:hover {
    background: var(--ds-neutral-200);
    color: var(--ds-neutral-900);
}

.lc-btn-outline, .ds-btn-outline {
    background: transparent;
    color: var(--lc-primary);
    border-color: var(--lc-primary);
}
.lc-btn-outline:hover, .ds-btn-outline:hover {
    background: var(--lc-primary);
    color: var(--ds-neutral-0);
}

.lc-btn-success, .ds-btn-success {
    background: var(--ds-success-500);
    color: var(--ds-neutral-0);
}
.lc-btn-success:hover, .ds-btn-success:hover {
    background: var(--ds-success-600);
    color: var(--ds-neutral-0);
}

.lc-btn-warning, .ds-btn-warning {
    background: var(--ds-warning-500);
    color: var(--ds-neutral-0);
}
.lc-btn-warning:hover, .ds-btn-warning:hover {
    background: var(--ds-warning-600);
    color: var(--ds-neutral-0);
}

.lc-btn-info, .ds-btn-info {
    background: var(--ds-info-500);
    color: var(--ds-neutral-0);
}
.lc-btn-info:hover, .ds-btn-info:hover {
    background: var(--ds-info-600);
    color: var(--ds-neutral-0);
}

/* 按钮尺寸补充 */
.lc-btn-xs, .ds-btn-xs {
    padding: 4px 10px;
    font-size:14px;
    border-radius: 6px;
}

.lc-btn-block, .ds-btn-block {
    width: 100%;
    display: flex;
}

/* 按钮禁用 */
.lc-btn:disabled, .ds-btn:disabled,
.lc-btn.disabled, .ds-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* 旧 btn 类兼容 - 同步到统一风格 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    user-select: none;
    line-height: 1.4;
}
.btn:focus { outline: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--ds-primary-500) 0%, var(--ds-primary-500) 100%);
    color: var(--ds-neutral-0);
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}
.btn-primary:hover {
    background: linear-gradient(135deg, var(--ds-primary-600) 0%, var(--ds-primary-500) 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35);
}

.btn-outline {
    background: transparent;
    color: var(--ds-neutral-500);
    border-color: var(--ds-neutral-200);
}
.btn-outline:hover {
    background: var(--ds-neutral-50);
    color: var(--ds-neutral-700);
    border-color: var(--ds-neutral-300);
}

.btn-danger {
    background: var(--ds-danger-500);
    color: var(--ds-neutral-0);
}
.btn-danger:hover {
    background: var(--ds-danger-600);
}

.btn-success {
    background: var(--ds-success-500);
    color: var(--ds-neutral-0);
}
.btn-success:hover {
    background: var(--ds-success-600);
}

.btn-sm {
    padding: 6px 14px;
    font-size:14px;
}

.btn-xs {
    padding: 4px 10px;
    font-size:14px;
    border-radius: 6px;
}

.btn-block {
    width: 100%;
    display: flex;
}

.btn:disabled, .btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* 旧弹窗类兼容（指向统一弹窗样式） */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay.hidden { display: none; }

.modal-content {
    background: var(--ds-neutral-0);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ds-neutral-100);
    flex-shrink: 0;
}
.modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ds-neutral-900);
    margin: 0;
}
.modal-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--ds-neutral-400);
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s ease;
}
.modal-close:hover {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-600);
}

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    color: var(--ds-neutral-600);
    font-size: 14px;
    line-height: 1.6;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid var(--ds-neutral-100);
    flex-shrink: 0;
    background: var(--ds-neutral-50);
}
.modal-footer .btn { min-width: 80px; }

/* === 批量优化补充工具类 === */

/* 文字截断 */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 小尺寸图标 */
.w-3_5-h-3_5 { width: 14px; height: 14px; }
.w-4_5-h-4_5 { width: 18px; height: 18px; }
.w-7_5-h-7_5 { width: 30px; height: 30px; }

/* 背景色补充 */
.bg-indigo-50 { background-color: #eef2ff; }
.bg-blue-50 { background-color: var(--ds-primary-50); }
.bg-amber-50 { background-color: var(--ds-warning-50); }
.bg-red-50 { background-color: var(--ds-danger-50); }
.bg-green-50 { background-color: var(--ds-success-50); }
.bg-teal-50 { background-color: #f0fdfa; }
.bg-purple-50 { background-color: #faf5ff; }

/* 边框色补充 */
.border-red-200 { border-color: var(--ds-danger-200); }
.border-dashed { border-style: dashed; }
.border-b-2 { border-bottom-width: 2px; }
.border-t-2 { border-top-width: 2px; }
.border-b-slate-100 { border-bottom-color: var(--ds-neutral-100); }

/* 文字颜色补充 (深色语义色) */
.text-amber-800 { color: var(--ds-warning-700); }
.text-amber-900 { color: var(--ds-warning-50); }
.text-amber-700 { color: var(--ds-warning-700); }
.text-green-800 { color: #166534; }
.text-green-700 { color: #15803d; }
.text-teal-600 { color: #0d9488; }
.text-teal-500 { color: #14b8a6; }
.text-rose-500 { color: #f43f5e; }
.text-slate-600 { color: var(--ds-neutral-600); }

/* 间距补充 */
.gap-0_75 { gap: 3px; }
.gap-3_5 { gap: 14px; }
.mt-0_75 { margin-top: 3px; }
.py-3_5 { padding-top: 14px; padding-bottom: 14px; }
.px-1_25 { padding-left: 5px; padding-right: 5px; }
.px-2_5 { padding-left: 10px; padding-right: 10px; }
.py-0_25 { padding-top: 1px; padding-bottom: 1px; }
.py-0_75 { padding-top: 3px; padding-bottom: 3px; }

/* 栅格补充 */
.col-span-full { grid-column: 1 / -1; }
.grid-auto-180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.max-w-prose { max-width: 800px; }
.max-h-screen-90 { max-height: 90vh; }

/* 透明度 */
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }

/* 过渡 */
.transition-fast { transition: all 0.15s ease; }

/* 圆角补充 */
.rounded-sm { border-radius: 3px; }

/* 标签样式 */
.tag-xs { padding: 1px 8px; border-radius: 3px; font-size:0.875rem; }
.tag-sm { padding: 3px 10px; border-radius: 4px; font-size: 0.8rem; }


/* ========================================
 * 统一空状态组件 .lc-empty
 * ======================================== */
.lc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  color: var(--ds-neutral-400);
}
.lc-empty-icon {
  font-size: 3rem;
  margin-bottom: 12px;
  opacity: 0.4;
}
.lc-empty-title {
  font-size: 0.95rem;
  color: var(--ds-neutral-500);
  margin-bottom: 4px;
  font-weight: 500;
}
.lc-empty-desc {
  font-size: 0.82rem;
  color: var(--ds-neutral-400);
  margin-bottom: 16px;
  max-width: 320px;
  line-height: 1.5;
}
.lc-empty-action {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 尺寸变体 */
.lc-empty-sm { padding: 24px 16px; }
.lc-empty-sm .lc-empty-icon { font-size: 2rem; margin-bottom: 8px; }
.lc-empty-sm .lc-empty-title { font-size: 0.85rem; }
.lc-empty-sm .lc-empty-desc { font-size:0.875rem; }

.lc-empty-lg { padding: 64px 32px; }
.lc-empty-lg .lc-empty-icon { font-size: 4rem; margin-bottom: 16px; }
.lc-empty-lg .lc-empty-title { font-size: 1.1rem; }
.lc-empty-lg .lc-empty-desc { font-size: 0.9rem; }

/* 语义色变体 */
.lc-empty-primary .lc-empty-icon { color: var(--ds-primary-500); opacity: 0.5; }
.lc-empty-success .lc-empty-icon { color: var(--ds-success-500); opacity: 0.5; }
.lc-empty-warning .lc-empty-icon { color: var(--ds-warning-500); opacity: 0.5; }
.lc-empty-info .lc-empty-icon { color: var(--ds-primary-500); opacity: 0.5; }

/* 移动端优化 */
@media (max-width: 768px) {
  .lc-empty { padding: 32px 16px; }
  .lc-empty-icon { font-size: 2.5rem; }
  .lc-empty-title { font-size: 0.88rem; }
  .lc-empty-desc { font-size: 0.78rem; }
  .lc-empty-lg { padding: 40px 20px; }
  .lc-empty-lg .lc-empty-icon { font-size: 3rem; }
  .lc-empty-sm { padding: 20px 12px; }
}


/* ========================================
 * 统一表格组件 .lc-table
 * ======================================== */
.lc-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--lc-bg-card);
  border-radius: var(--lc-radius-md);
  overflow: hidden;
  font-size: 0.875rem;
}

.lc-table thead {
  background: var(--lc-bg-page);
  border-bottom: 1px solid var(--lc-border);
}

.lc-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--lc-text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.lc-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--lc-border-light);
  color: var(--lc-text-primary);
  vertical-align: middle;
}

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

.lc-table tbody tr:hover {
  background: var(--lc-bg-hover);
}

/* 紧凑表格 */
.lc-table-compact th { padding: 8px 12px; }
.lc-table-compact td { padding: 10px 12px; }

/* 斑马纹 */
.lc-table-striped tbody tr:nth-child(even) {
  background: var(--lc-bg-page);
}
.lc-table-striped tbody tr:hover {
  background: var(--lc-bg-hover);
}

/* 表格操作列 */
.lc-table-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lc-table-actions .lc-btn {
  padding: 4px 10px;
  font-size: 0.78rem;
}

/* 移动端表格响应式 */
@media (max-width: 768px) {
  .lc-table-responsive {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lc-table th,
  .lc-table td { padding: 10px 12px; font-size: 0.8rem; }
}


/* ========================================
 * 统一表单组件 .lc-form
 * ======================================== */
.lc-form-group {
  margin-bottom: 20px;
}

.lc-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--lc-text-primary);
  margin-bottom: 6px;
}

.lc-form-label .required {
  color: var(--lc-red);
  margin-left: 2px;
}

.lc-form-control {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--lc-text-primary);
  background: var(--lc-bg-card);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  outline: none;
  box-sizing: border-box;
}

.lc-form-control:focus {
  border-color: var(--lc-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.lc-form-control::placeholder {
  color: var(--lc-text-muted);
}

.lc-form-control:disabled,
.lc-form-control[readonly] {
  background: var(--lc-bg-page);
  color: var(--lc-text-muted);
  cursor: not-allowed;
}

.lc-form-control.error {
  border-color: var(--lc-red);
}

.lc-form-help {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--lc-text-muted);
}

.lc-form-error {
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--lc-red);
}

/* 行内表单 */
.lc-form-inline {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.lc-form-inline .lc-form-group {
  margin-bottom: 0;
  flex: 1;
  min-width: 150px;
}

/* 表单行布局 */
.lc-form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.lc-form-row-3 { grid-template-columns: repeat(3, 1fr); }
.lc-form-row-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .lc-form-row,
  .lc-form-row-3,
  .lc-form-row-4 { grid-template-columns: 1fr; gap: 16px; }
}

/* select 样式增强 */
select.lc-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

/* textarea */
textarea.lc-form-control {
  resize: vertical;
  min-height: 100px;
  font-family: inherit;
}


/* ========================================
 * 统一标签/徽章组件 .lc-tag
 * ======================================== */
.lc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 9999px;
  background: var(--lc-bg-page);
  color: var(--lc-text-secondary);
  border: 1px solid transparent;
  white-space: nowrap;
}

.lc-tag i { font-size: 0.7rem; }

/* 尺寸变体 */
.lc-tag-sm { padding: 2px 8px; font-size: 0.7rem; }
.lc-tag-lg { padding: 5px 14px; font-size: 0.85rem; }

/* 语义色变体 - 浅色填充 */
.lc-tag-primary {
  background: var(--lc-primary-light);
  color: var(--lc-primary-dark);
}
.lc-tag-success {
  background: var(--lc-green-light);
  color: var(--ds-success-700);
}
.lc-tag-warning {
  background: var(--lc-amber-light);
  color: var(--ds-warning-700);
}
.lc-tag-danger {
  background: var(--lc-red-light);
  color: var(--ds-danger-700);
}
.lc-tag-purple {
  background: var(--lc-purple-light);
  color: var(--ds-accent-700);
}
.lc-tag-info {
  background: var(--ds-info-50);
  color: var(--ds-info-700);
}
.lc-tag-pink {
  background: var(--lc-pink-light);
  color: var(--ds-highlight-700);
}

/* 描边变体 */
.lc-tag-outline {
  background: transparent;
  border-color: currentColor;
}
.lc-tag-outline.lc-tag-primary { color: var(--lc-primary); }
.lc-tag-outline.lc-tag-success { color: var(--lc-green); }
.lc-tag-outline.lc-tag-warning { color: var(--lc-amber); }
.lc-tag-outline.lc-tag-danger { color: var(--lc-red); }
.lc-tag-outline.lc-tag-purple { color: var(--lc-purple); }

/* 实心变体 */
.lc-tag-solid {
  color: var(--ds-neutral-0);
}
.lc-tag-solid.lc-tag-primary { background: var(--lc-primary); }
.lc-tag-solid.lc-tag-success { background: var(--lc-green); }
.lc-tag-solid.lc-tag-warning { background: var(--lc-amber); }
.lc-tag-solid.lc-tag-danger { background: var(--lc-red); }
.lc-tag-solid.lc-tag-purple { background: var(--lc-purple); }
.lc-tag-solid.lc-tag-info { background: var(--lc-cyan); }

/* 可关闭标签 */
.lc-tag-close {
  cursor: pointer;
  margin-left: 2px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.lc-tag-close:hover { opacity: 1; }


/* ========================================
 * 统一徽章组件 .lc-badge
 * ======================================== */
.lc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ds-neutral-0);
  background: var(--lc-red);
  border-radius: 9999px;
}

.lc-badge-primary { background: var(--lc-primary); }
.lc-badge-success { background: var(--lc-green); }
.lc-badge-warning { background: var(--lc-amber); }
.lc-badge-purple { background: var(--lc-purple); }

.lc-badge-dot {
  min-width: 8px;
  height: 8px;
  padding: 0;
  border-radius: 50%;
}


/* ========================================
 * 统一分页组件 .lc-pagination
 * ======================================== */
.lc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 20px 0;
  flex-wrap: wrap;
}

.lc-pagination .page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-size: 0.875rem;
  color: var(--lc-text-secondary);
  background: var(--lc-bg-card);
  border: 1px solid var(--lc-border);
  border-radius: var(--lc-radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  text-decoration: none;
}

.lc-pagination .page-item:hover {
  color: var(--lc-primary);
  border-color: var(--lc-primary);
}

.lc-pagination .page-item.active {
  color: var(--ds-neutral-0);
  background: var(--lc-primary);
  border-color: var(--lc-primary);
}

.lc-pagination .page-item.disabled {
  color: var(--lc-text-muted);
  background: var(--lc-bg-page);
  cursor: not-allowed;
  border-color: var(--lc-border-light);
}

.lc-pagination .page-info {
  margin: 0 12px;
  font-size: 0.8rem;
  color: var(--lc-text-muted);
}

@media (max-width: 768px) {
  .lc-pagination .page-item { min-width: 32px; height: 32px; font-size: 0.8rem; padding: 0 8px; }
  .lc-pagination .page-info { display: none; }
}


/* ========================================
 * 工具类扩展 - 高频内联style替代
 * ======================================== */

/* --- 尺寸工具 --- */
.w-30px { width: 30px; }
.w-44px { width: 44px; }
.w-15 { width: 60px; }  /* 对应 w-15 = 3.75rem = 60px */
.w-90pct { width: 90%; }
.max-w-90pct { max-width: 90%; }
.h-30px { height: 30px; }
.h-45px { height: 45px; }
.max-h-90vh { max-height: 90vh; }

/* --- 间距工具 (补充设计系统中缺失的) --- */
.p-11px { padding: 11px; }
.py-14px { padding-top: 14px; padding-bottom: 14px; }
.pt-14px { padding-top: 14px; }
.pb-14px { padding-bottom: 14px; }
.px-10px { padding-left: 10px; padding-right: 10px; }
.py-3-10px { padding: 3px 10px; }
.py-1-5px { padding: 1px 5px; }
.py-1-6px { padding: 1px 6px; }
.py-1-8px { padding: 1px 8px; }
.mb--2px { margin-bottom: -2px; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* --- 圆角工具 --- */
.rounded-3px { border-radius: 3px; }

/* --- 行高工具 --- */
.leading-1_7 { line-height: 1.7; }

/* --- 字体家族 --- */
.font-inherit { font-family: inherit; }

/* --- 过渡效果 --- */
.transition-all-15 { transition: all 0.15s ease; }
.transition-all-20 { transition: all 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }

/* --- 文字截断 --- */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 渐变背景工具 --- */
.bg-gradient-purple-light {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08), rgba(236, 72, 153, 0.08));
}
.bg-gradient-indigo-light {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.08));
}
.bg-gradient-pink-light {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.08), rgba(168, 85, 247, 0.08));
}
.bg-gradient-green-light {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.08));
}
.bg-gradient-blue-light {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(139, 92, 246, 0.08));
}
.bg-gradient-red-light {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(249, 115, 22, 0.08));
}
.bg-gradient-indigo-deep {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.06), rgba(118, 75, 162, 0.06));
}

/* --- 半透明白色按钮 (hero区域用) --- */
.btn-ghost-white {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: var(--ds-neutral-0) !important;
}
.btn-ghost-white:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}
.btn-ghost-amber {
  background: rgba(255, 191, 36, 0.25) !important;
  border: 1px solid rgba(255, 191, 36, 0.4) !important;
  color: var(--ds-neutral-0) !important;
}
.btn-ghost-amber:hover {
  background: rgba(255, 191, 36, 0.35) !important;
}

/* --- 复制按钮样式 --- */
.btn-copy-ghost {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  vertical-align: middle;
}

/* --- flex 补充 --- */
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.gap-14px { gap: 14px; }
.gap-3px { gap: 3px; }

/* --- grid 补充 --- */
.col-span-full { grid-column: 1 / -1; }

/* --- 对象填充 --- */
.object-cover { object-fit: cover; }

/* --- 溢出 --- */
.overflow-hidden { overflow: hidden; }


/* ========================================
 * 统一分页组件 .lc-pagination
 * ======================================== */
.lc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.lc-pagination .page-info {
  font-size: 0.85rem;
  color: var(--lc-text-secondary, var(--ds-neutral-500));
  flex: 1;
  text-align: left;
}

.lc-pagination .page-list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.lc-pagination .page-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--lc-text-secondary, var(--ds-neutral-500));
  background: var(--lc-bg-secondary, var(--ds-neutral-100));
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
  border: none;
}

.lc-pagination .page-item:hover {
  background: var(--lc-primary, var(--ds-primary-500));
  color: var(--ds-neutral-0);
  transform: translateY(-1px);
}

.lc-pagination .page-item.active {
  background: var(--lc-primary, var(--ds-primary-500));
  color: var(--ds-neutral-0);
  font-weight: 600;
  cursor: default;
}

.lc-pagination .page-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.lc-pagination .page-item.page-ellipsis {
  background: transparent;
  color: var(--lc-text-muted, var(--ds-neutral-400));
  cursor: default;
  min-width: 24px;
  padding: 0;
}

.lc-pagination .page-item.page-ellipsis:hover {
  background: transparent;
  color: var(--lc-text-muted, var(--ds-neutral-400));
  transform: none;
}

/* 分页尺寸变体 */
.lc-pagination-sm .page-item {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  font-size: 0.8rem;
  border-radius: 6px;
}

.lc-pagination-lg .page-item {
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  font-size: 0.95rem;
  border-radius: 10px;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .lc-pagination {
    gap: 8px;
    margin-top: 16px;
  }
  .lc-pagination .page-item {
    min-width: 32px;
    height: 32px;
    font-size: 0.8rem;
    padding: 0 8px;
  }
  .lc-pagination .page-info {
    display: none;
  }
}


/* ========================================
 * 通用统计卡片 .lc-stat-card
 * ======================================== */
.lc-stat-card {
  background: var(--lc-bg-surface, var(--ds-neutral-0));
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: var(--lc-shadow-sm, 0 1px 3px rgba(0,0,0,0.08));
  border: 1px solid var(--lc-border, var(--ds-neutral-200));
  transition: all 0.2s ease;
}

.lc-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--lc-shadow-md, 0 4px 12px rgba(0,0,0,0.1));
}

.lc-stat-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

.lc-stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--lc-text-primary, var(--ds-neutral-900));
  margin-bottom: 4px;
}

.lc-stat-card-label {
  font-size: 0.8rem;
  color: var(--lc-text-secondary, var(--ds-neutral-500));
  font-weight: 500;
}

.lc-stat-card-desc {
  font-size:0.875rem;
  color: var(--lc-text-muted, var(--ds-neutral-400));
  margin-top: 6px;
}

.lc-stat-card-sm {
  padding: 12px 10px;
}
.lc-stat-card-sm .lc-stat-card-icon {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  margin-bottom: 8px;
}
.lc-stat-card-sm .lc-stat-card-value {
  font-size: 1.15rem;
}
.lc-stat-card-sm .lc-stat-card-label {
  font-size: 0.72rem;
}

/* ========================================
 * 搜索结果组件 .lc-search-result
 * ======================================== */
.lc-search-result-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lc-search-result-item {
  background: var(--lc-bg-card, var(--ds-neutral-0));
  border-radius: 12px;
  padding: 16px;
  transition: all 0.25s ease;
  border: 1px solid var(--lc-border, var(--ds-neutral-200));
}

.lc-search-result-item:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
  border-color: var(--lc-primary, var(--ds-primary-500));
}

.lc-sr-thumb {
  width: 160px;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: var(--lc-bg-hover, var(--ds-neutral-100));
}

.lc-sr-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lc-sr-thumb-small {
  width: 100px;
  height: 100px;
}

.lc-sr-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.lc-sr-type-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 6px;
}

.lc-sr-type-tag.type-resource {
  color: var(--lc-primary, var(--ds-primary-500));
  background: var(--lc-primary-light, var(--ds-primary-50));
}

.lc-sr-type-tag.type-course {
  color: var(--lc-purple, var(--ds-accent-500));
  background: var(--lc-purple-light, #f3f0ff);
}

.lc-sr-type-tag.type-magnet {
  color: var(--lc-amber, var(--ds-warning-500));
  background: var(--lc-amber-light, var(--ds-warning-50));
}

.lc-sr-type-tag.type-post {
  color: var(--lc-green, var(--ds-success-500));
  background: var(--lc-green-light, var(--ds-success-50));
}

.lc-sr-type-tag.type-forum {
  color: var(--ds-primary-500);
  background: #eef2ff;
}

.lc-sr-title {
  margin: 0 0 6px 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--lc-text-primary, var(--ds-neutral-900));
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lc-search-result-item:hover .lc-sr-title {
  color: var(--lc-primary, var(--ds-primary-500));
}

.lc-sr-desc {
  margin: 0 0 8px 0;
  font-size: 0.82rem;
  color: var(--lc-text-secondary, var(--ds-neutral-500));
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.lc-sr-meta {
  display: flex;
  gap: 14px;
  font-size:0.875rem;
  color: var(--lc-text-muted, var(--ds-neutral-400));
  margin-top: auto;
  align-items: center;
  flex-wrap: wrap;
}

.lc-sr-meta .lc-sr-price {
  color: var(--lc-red, var(--ds-danger-500));
  font-weight: 700;
  font-size: 0.9rem;
  margin-left: auto;
}

.lc-sr-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--ds-neutral-0);
}

.lc-sr-badge.badge-vip {
  background: linear-gradient(135deg, var(--ds-warning-500), var(--ds-warning-600));
}

.lc-sr-badge.badge-free {
  background: linear-gradient(135deg, var(--ds-success-500), var(--ds-success-600));
}

/* 热门关键词标签 */
.lc-hot-keyword {
  display: inline-block;
  border-radius: 9999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  color: var(--lc-text-secondary, var(--ds-neutral-500));
  background: var(--lc-bg-hover, var(--ds-neutral-100));
  text-decoration: none;
  transition: all 0.15s ease;
}

.lc-hot-keyword:hover {
  background: var(--lc-primary-lighter, var(--ds-primary-100));
  color: var(--lc-primary-dark, var(--ds-primary-600));
}

@media (max-width: 640px) {
  .lc-sr-thumb {
    width: 100px;
    height: 72px;
  }
  .lc-sr-thumb-small {
    width: 72px;
    height: 72px;
  }
  .lc-sr-title {
    font-size: 0.9rem;
  }
  .lc-sr-desc {
    font-size:0.875rem;
    -webkit-line-clamp: 1;
  }
  .lc-sr-meta {
    gap: 10px;
    font-size: 0.7rem;
  }
}

/* ========================================
 * 内联样式工具类（第二批）
 * ======================================== */

/* 文字颜色 */
.lc-text-muted { color: var(--color-text-muted, var(--ds-neutral-400)); }
.lc-text-secondary { color: var(--color-text-secondary, var(--ds-neutral-500)); }
.lc-text-primary { color: var(--color-text-primary, var(--ds-neutral-900)); }
.lc-text-sky { color: #0284c7; }
.lc-text-amber-light { color: var(--ds-warning-100); }
.lc-text-amber-dark { color: var(--ds-warning-700); }
.lc-text-brown { color: var(--ds-warning-50); }
.lc-text-pe-amber { color: var(--pe-amber, var(--ds-warning-500)); }
.lc-text-lg-primary { font-size: 1.3rem; color: var(--color-text-primary, var(--ds-neutral-900)); }

/* 图标尺寸 */
.lc-icon-14 { width: 14px; height: 14px; }
.lc-icon-18 { width: 18px; height: 18px; }
.lc-icon-44 { width: 44px; height: 44px; }

/* 文字大小 */
.lc-text-22 { font-size: 22px; }

/* 最大宽高 */
.lc-maxw-900 { max-width: 900px; }
.lc-maxw-1100 { max-width: 1100px; }
.lc-maxw-420 { max-width: 420px; }
.lc-maxh-300 { max-height: 300px; }

/* 网格布局 */
.lc-grid-auto-180 { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.lc-grid-auto-160 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.lc-grid-span-all { grid-column: 1 / -1; }

/* 定位 */
.lc-z-10000 { z-index: 10000; }
.lc-pos-left-10 { right: auto; left: 10px; }

/* 间距 */
.lc-py-14 { padding-top: 14px; padding-bottom: 14px; }
.lc-p-9-11 { padding: 9px 11px; }
.lc-p-5-12 { padding: 5px 12px; }
.lc-p-11 { padding: 11px; }
.lc-p-9-16 { padding: 9px 16px; }
.lc-gap-3 { gap: 3px; }

/* 过渡效果 */
.lc-transition-fast { transition: all 0.15s ease; }
.lc-transition-border { transition: border-color 0.15s ease; }
.lc-font-inherit { font-family: inherit; }

/* 边框 */
.lc-border-slate { border: 1px solid var(--ds-neutral-300); }
.lc-border-blue { border-color: var(--ds-primary-500); }
.lc-border-bottom-blue { border-bottom: 2px solid var(--ds-primary-100); }
.lc-shadow-border-light { box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid var(--ds-neutral-100); }

/* 背景 */
.lc-bg-dark-card { background: #121927; border: 1px solid rgba(255,255,255,0.05); }

/* ========================================
 * 内联样式原子工具类（自动生成）
 * 对应模板中的 style="..." 内联样式，按声明拆分为原子类
 * ======================================== */


/* --module-color */
.lc-modulecolor-u128 { --module-color: linear-gradient(135deg,var(--ds-primary-500),var(--ds-primary-600)); }
.lc-modulecolor-u129 { --module-color: linear-gradient(135deg,var(--ds-accent-500),var(--ds-accent-600)); }
.lc-modulecolor-u130 { --module-color: linear-gradient(135deg,var(--ds-info-500),var(--ds-info-600)); }
.lc-modulecolor-u131 { --module-color: linear-gradient(135deg,var(--ds-success-500),var(--ds-success-600)); }
.lc-modulecolor-u132 { --module-color: linear-gradient(135deg,var(--ds-warning-500),var(--ds-warning-600)); }
.lc-modulecolor-u133 { --module-color: linear-gradient(135deg,var(--ds-highlight-500),var(--ds-highlight-600)); }

/* -webkit-background-clip */
.lc-webkitbackgroundclip-text { -webkit-background-clip: text; }

/* -webkit-box-orient */
.lc-boxorient-vertical { -webkit-box-orient: vertical; }

/* -webkit-line-clamp */
.lc-clamp-2 { -webkit-line-clamp: 2; }
.lc-clamp-3 { -webkit-line-clamp: 3; }
.lc-clamp-1 { -webkit-line-clamp: 1; }

/* -webkit-text-fill-color */
.lc-webkittextfillcolor-transparent { -webkit-text-fill-color: transparent; }

/* accent-color */
.lc-accent-f59e0b { accent-color: var(--ds-warning-500); }
.lc-accent-3b82f6 { accent-color: var(--ds-primary-500); }
.lc-accent-8b5cf6 { accent-color: var(--ds-accent-500); }
.lc-accent-10b981 { accent-color: var(--ds-success-500); }
.lc-accent-4f46e5 { accent-color: var(--ds-primary-500); }
.lc-accent-f97316 { accent-color: var(--ds-warning-500); }
.lc-accent-ec4899 { accent-color: var(--ds-highlight-500); }

/* align-items */
.lc-ai-start { align-items: start; }
.lc-ai-end { align-items: end; }

/* align-self */
.lc-as-start { align-self: start; }
.lc-as-flexstart { align-self: flex-start; }

/* animation */
.lc-anim-spin08slinearinfinite { animation: spin 0.8s linear infinite; }
.lc-anim-aiSpin08slinearinfinite { animation: aiSpin 0.8s linear infinite; }
.lc-anim-none { animation: none; }
.lc-anim-spin1slinearinfinite { animation: spin 1s linear infinite; }
.lc-anim-colPulse2sinfinite { animation: colPulse 2s infinite; }
.lc-anim-pulse2sinfinite { animation: pulse 2s infinite; }

/* aspect-ratio */
.lc-ar-1 { aspect-ratio: 1; }

/* backdrop-filter */
.lc-bdf-blur2px { backdrop-filter: blur(2px); }
.lc-bdf-blur4px { backdrop-filter: blur(4px); }
.lc-bdf-blur10px { backdrop-filter: blur(10px); }
.lc-bdf-blur12px { backdrop-filter: blur(12px); }

/* background */
.lc-bg-1e293b { background: var(--ds-neutral-900); }
.lc-bg-eff6ff { background: var(--ds-primary-50); }
.lc-bg-94a3b8 { background: var(--ds-neutral-400); }
.lc-bg-eef2ff { background: #eef2ff; }
.lc-bg-c7d2fe { background: #c7d2fe; }
.lc-bg-cbd5e1 { background: var(--ds-neutral-300); }
.lc-bg-rgba00004 { background: rgba(0,0,0,0.4); }
.lc-bg-f3f0ff { background: #f3f0ff; }
.lc-bg-fee2e2 { background: var(--ds-danger-100); }
.lc-bg-u1 { background: linear-gradient(135deg,var(--ds-warning-500),var(--ds-danger-500)); }
.lc-bg-fce7f3 { background: var(--ds-highlight-100); }
.lc-bg-e0f2fe { background: #e0f2fe; }
.lc-bg-dcfce7 { background: var(--ds-success-100); }
.lc-bg-u2 { background: linear-gradient(135deg,var(--ds-primary-500),var(--ds-info-500)); }
.lc-bg-u3 { background: linear-gradient(135deg,var(--ds-highlight-500),#f43f5e); }
.lc-bg-f8fafc { background: var(--ds-neutral-50); }
.lc-bg-e0e7ff { background: #e0e7ff; }
.lc-bg-fecaca { background: var(--ds-danger-200); }
.lc-bg-u5 { background: linear-gradient(135deg,var(--ds-primary-500),var(--ds-primary-600)); }
.lc-bg-ecfdf5 { background: var(--ds-success-50); }
.lc-bg-cardbg { background: var(--card-bg,var(--ds-neutral-0)); }
.lc-bg-u10 { background: linear-gradient(135deg,#0a0e17,#121927); }
.lc-bg-rgba021725501 { background: rgba(0,217,255,0.1); }
.lc-bg-u13 { background: linear-gradient(135deg,var(--ds-accent-500),var(--ds-primary-500)); }
.lc-bg-u14 { background: linear-gradient(135deg,var(--ds-primary-500),#0ea5e9); }
.lc-bg-u15 { background: linear-gradient(135deg,var(--ds-primary-500)10,var(--ds-primary-500)20); }
.lc-bg-u16 { background: linear-gradient(135deg,var(--ds-success-500)10,var(--ds-success-500)20); }
.lc-bg-u17 { background: linear-gradient(135deg,var(--ds-primary-500)10,var(--ds-primary-500)20); }
.lc-bg-u18 { background: linear-gradient(135deg,var(--ds-warning-500)10,var(--ds-warning-500)20); }
.lc-bg-u19 { background: linear-gradient(135deg,var(--ds-primary-50),var(--ds-accent-50)); }
.lc-bg-u20 { background: linear-gradient(135deg,var(--ds-primary-500),var(--ds-accent-500)); }
.lc-bg-u21 { background: linear-gradient(135deg,var(--ds-warning-50),var(--ds-neutral-0)7ed); }
.lc-bg-u22 { background: linear-gradient(135deg,var(--ds-warning-500),var(--ds-warning-500)); }
.lc-bg-f5f3ff { background: var(--ds-accent-50); }
.lc-bg-u24 { background: linear-gradient(135deg,var(--ds-neutral-50),var(--ds-neutral-100)); }
.lc-bg-u25 { background: linear-gradient(135deg,var(--ds-warning-500) 0%,var(--ds-warning-500) 50%,var(--ds-warning-500) 100%); }
.lc-bg-u27 { background: linear-gradient(135deg,var(--ds-neutral-0)7ed,var(--ds-warning-100)); }
.lc-bg-u28 { background: linear-gradient(90deg,#faf5ff,var(--ds-accent-50)); }
.lc-bg-u29 { background: linear-gradient(135deg,var(--ds-accent-500),var(--ds-accent-300)); }
.lc-bg-u30 { background: linear-gradient(90deg,#fefce8,var(--ds-warning-100)); }
.lc-bg-u31 { background: linear-gradient(135deg,#eab308,var(--ds-warning-500)); }
.lc-bg-u32 { background: linear-gradient(90deg,var(--ds-primary-50),var(--ds-primary-100)); }
.lc-bg-u33 { background: linear-gradient(135deg,var(--ds-primary-500),var(--ds-primary-400)); }
.lc-bg-f3e8ff { background: #f3e8ff; }
.lc-bg-u34 { background: linear-gradient(90deg,var(--ds-success-50),var(--ds-success-100)); }
.lc-bg-u35 { background: linear-gradient(90deg,var(--ds-accent-50),var(--ds-accent-100)); }
.lc-bg-u36 { background: linear-gradient(135deg,var(--ds-primary-500),#818cf8); }
.lc-bg-u37 { background: linear-gradient(90deg,var(--ds-highlight-50),var(--ds-highlight-100)); }
.lc-bg-u38 { background: linear-gradient(135deg,var(--ds-highlight-500),var(--ds-highlight-400)); }
.lc-bg-rgba24515811015 { background: rgba(245,158,11,0.15); }
.lc-bg-rgba59130246015 { background: rgba(59,130,246,0.15); }
.lc-bg-rgba16185129015 { background: rgba(16,185,129,0.15); }
.lc-bg-rgba148163184015 { background: rgba(148,163,184,0.15); }
.lc-bg-rgba239686801 { background: rgba(239,68,68,0.1); }
.lc-bg-rgba13992246015 { background: rgba(139,92,246,0.15); }
.lc-bg-rgba000025 { background: rgba(0,0,0,0.25); }
.lc-bg-rgba25525525502 { background: rgba(255,255,255,0.2); }
.lc-bg-4f46e5 { background: var(--ds-primary-500); }
.lc-bg-rgba00006 { background: rgba(0,0,0,0.6); }
.lc-bg-fafbfc { background: #fafbfc; }
.lc-bg-u39 { background: linear-gradient(135deg,var(--ds-accent-50),var(--ds-accent-100)); }
.lc-bg-fff3cd { background: var(--ds-neutral-0)3cd; }
.lc-bg-u40 { background: linear-gradient(135deg,var(--ds-primary-500) 0%,#764ba2 100%); }
.lc-bg-u42 { background: linear-gradient(135deg,var(--ds-success-50),var(--ds-success-100)); }
.lc-bg-u43 { background: linear-gradient(135deg,var(--ds-danger-50),var(--ds-danger-100)); }
.lc-bg-u44 { background: linear-gradient(135deg,var(--ds-highlight-100),var(--ds-highlight-200)); }
.lc-bg-fdf2f8 { background: var(--ds-highlight-50); }
.lc-bg-fff7ed { background: var(--ds-neutral-0)7ed; }
.lc-bg-u45 { background: linear-gradient(135deg,var(--ds-primary-500),var(--ds-accent-500)); }
.lc-bg-7c3aed { background: var(--ds-accent-600); }
.lc-bg-ffedd5 { background: #ffedd5; }
.lc-bg-u46 { background: linear-gradient(135deg,var(--ds-primary-50),var(--ds-primary-100)); }
.lc-bg-u47 { background: linear-gradient(135deg,var(--ds-success-50),var(--ds-success-100)); }
.lc-bg-u48 { background: linear-gradient(135deg,#faf5ff,#f3e8ff); }
.lc-bg-u49 { background: linear-gradient(135deg,var(--ds-accent-500),var(--ds-accent-600)); }
.lc-bg-u50 { background: linear-gradient(135deg,var(--ds-warning-500),#eab308); }
.lc-bg-u51 { background: linear-gradient(135deg,var(--ds-danger-500),var(--ds-warning-500)); }
.lc-bg-u52 { background: linear-gradient(135deg,#faf5ff,var(--ds-accent-100)); }
.lc-bg-2932E1 { background: #2932E1; }
.lc-bg-u53 { background: linear-gradient(135deg,#eef2ff,#e0e7ff); }
.lc-bg-u54 { background: linear-gradient(135deg,var(--ds-warning-100),var(--ds-warning-100)); }
.lc-bg-u55 { background: linear-gradient(135deg,var(--ds-accent-100),var(--ds-accent-200)); }
.lc-bg-0f172a { background: var(--ds-neutral-900); }
.lc-bg-u56 { background: linear-gradient(135deg,var(--ds-primary-500) 0%,#764ba2 50%,#f093fb 100%); }
.lc-bg-rgba255255255006 { background: rgba(255,255,255,0.06); }
.lc-bg-rgba255255255018 { background: rgba(255,255,255,0.18); }
.lc-bg-u58 { background: linear-gradient(135deg,var(--ds-warning-500),var(--ds-warning-500)); }
.lc-bg-u59 { background: linear-gradient(135deg,var(--ds-success-500),var(--ds-success-400)); }
.lc-bg-u60 { background: linear-gradient(90deg,rgba(236,72,153,0.04),transparent); }
.lc-bg-u61 { background: linear-gradient(135deg,var(--ds-warning-50),var(--ds-warning-100)); }
.lc-bg-u62 { background: linear-gradient(135deg,var(--ds-neutral-0)1f2,#ffe4e6); }
.lc-bg-u63 { background: linear-gradient(135deg,var(--ds-danger-500),var(--ds-danger-400)); }
.lc-bg-u64 { background: linear-gradient(90deg,rgba(245,158,11,0.04),transparent); }
.lc-bg-u65 { background: linear-gradient(135deg,var(--ds-accent-500),var(--ds-accent-400)); }
.lc-bg-u66 { background: linear-gradient(135deg,var(--ds-success-50),var(--ds-success-100)); }
.lc-bg-u67 { background: linear-gradient(135deg,var(--ds-accent-50),var(--ds-accent-200)); }
.lc-bg-u68 { background: linear-gradient(90deg,rgba(59,130,246,0.04),transparent); }
.lc-bg-rgba5913024601 { background: rgba(59,130,246,0.1); }
.lc-bg-u69 { background: linear-gradient(90deg,rgba(139,92,246,0.04),transparent); }
.lc-bg-u70 { background: linear-gradient(135deg,#07c160,#06ad56); }
.lc-bg-07c160 { background: #07c160; }
.lc-bg-u71 { background: linear-gradient(135deg,var(--ds-danger-50),var(--ds-danger-200)); }
.lc-bg-u72 { background: linear-gradient(90deg,rgba(16,185,129,0.04),transparent); }
.lc-bg-u74 { background: linear-gradient(135deg,#14b8a6,#0d9488); }
.lc-bg-ccfbf1 { background: #ccfbf1; }
.lc-bg-667eea { background: var(--ds-primary-500); }
.lc-bg-f0fdfa { background: #f0fdfa; }
.lc-bg-14b8a6 { background: #14b8a6; }
.lc-bg-rgba25525525506 { background: rgba(255,255,255,0.6); }
.lc-bg-u76 { background: linear-gradient(135deg,#f0fdfa,#ccfbf1); }
.lc-bg-fafafa { background: #fafafa; }
.lc-bg-u79 { background: linear-gradient(90deg,var(--ds-warning-50),var(--ds-warning-100)); }
.lc-bg-faf5ff { background: #faf5ff; }
.lc-bg-u80 { background: linear-gradient(135deg,var(--ds-primary-500) 0%,var(--ds-primary-600) 50%,var(--ds-primary-400) 100%); }
.lc-bg-u82 { background: linear-gradient(90deg,var(--ds-danger-50),var(--ds-danger-100)); }
.lc-bg-u83 { background: linear-gradient(90deg,var(--ds-success-50),var(--ds-success-100)); }
.lc-bg-u84 { background: linear-gradient(135deg,#07c16015,#07c16008); }
.lc-bg-u85 { background: linear-gradient(135deg,var(--ds-success-50),var(--ds-success-50)); }
.lc-bg-059669 { background: var(--ds-success-600); }
.lc-bg-f0f9ff { background: #f0f9ff; }
.lc-bg-pebg3 { background: var(--pe-bg3); }
.lc-bg-u87 { background: linear-gradient(135deg, rgba(0,217,255,0.06), rgba(14,165,233,0.06)); }
.lc-bg-rgba25119136008 { background: rgba(251,191,36,0.08); }
.lc-bg-rgba0217255008 { background: rgba(0,217,255,0.08); }
.lc-bg-rgba14165233008 { background: rgba(14,165,233,0.08); }
.lc-bg-rgba6182212008 { background: rgba(6,182,212,0.08); }
.lc-bg-u88 { background: linear-gradient(135deg,var(--pe-accent),var(--pe-accent3)); }
.lc-bg-u89 { background: linear-gradient(135deg, rgba(6,182,212,0.06), rgba(0,217,255,0.06)); }
.lc-bg-u90 { background: linear-gradient(135deg,var(--pe-accent3),var(--pe-accent)); }
.lc-bg-u91 { background: linear-gradient(135deg,var(--ds-warning-600),var(--ds-warning-700)); }
.lc-bg-rgba239686809 { background: rgba(239,68,68,0.9); }
.lc-bg-lcborder { background: var(--lc-border); }
.lc-bg-lcprimarylight { background: var(--lc-primary-light); }
.lc-bg-lcbghover { background: var(--lc-bg-hover); }
.lc-bg-lcpurple { background: var(--lc-purple); }
.lc-bg-lcpurplelight { background: var(--lc-purple-light); }
.lc-bg-rgba2451581101 { background: rgba(245,158,11,0.1); }
.lc-bg-6b7280 { background: #6b7280; }
.lc-bg-rgba2396868015 { background: rgba(239,68,68,0.15); }
.lc-bg-u94 { background: linear-gradient(135deg,rgba(102,126,234,0.05),rgba(118,75,162,0.05)); }
.lc-bg-f9fafb { background: #f9fafb; }
.lc-bg-u95 { background: linear-gradient(135deg,#f0f9ff,#e0f2fe); }
.lc-bg-818cf8 { background: #818cf8; }
.lc-bg-ea580c { background: #ea580c; }
.lc-bg-u97 { background: linear-gradient(135deg,#ff2442,#e01e37); }
.lc-bg-ffe4e6 { background: #ffe4e6; }
.lc-bg-u98 { background: linear-gradient(135deg,#0084ff,#0066cc); }
.lc-bg-u99 { background: linear-gradient(135deg,var(--ds-primary-900) 0%,var(--ds-primary-500) 50%,var(--ds-info-500) 100%); }
.lc-bg-u101 { background: linear-gradient(135deg,var(--ds-info-500),var(--ds-info-400)); }
.lc-bg-0284c7 { background: #0284c7; }
.lc-bg-u103 { background: linear-gradient(90deg,rgba(34,197,94,0.04),transparent); }
.lc-bg-u104 { background: linear-gradient(90deg,rgba(6,182,212,0.04),transparent); }
.lc-bg-u105 { background: linear-gradient(135deg,var(--ds-highlight-50),var(--ds-highlight-100)); }
.lc-bg-lineargradient135deg { background: linear-gradient(135deg,; }
.lc-bg-u107 { background: linear-gradient(135deg,var(--ds-highlight-500),var(--ds-highlight-600)); }
.lc-bg-rgba59130246005 { background: rgba(59,130,246,0.05); }
.lc-bg-rgba13992246005 { background: rgba(139,92,246,0.05); }
.lc-bg-rgba24515811005 { background: rgba(245,158,11,0.05); }
.lc-bg-u108 { background: linear-gradient(135deg,var(--ds-warning-50),var(--ds-warning-100)); }
.lc-bg-u109 { background: linear-gradient(135deg,var(--ds-primary-500),var(--ds-primary-500)); }
.lc-bg-u110 { background: linear-gradient(135deg,var(--ds-accent-500),#a855f7); }
.lc-bg-u111 { background: linear-gradient(135deg,var(--ds-success-500),#14b8a6); }
.lc-bg-u112 { background: linear-gradient(135deg,var(--ds-danger-500),var(--ds-highlight-500)); }
.lc-bg-u113 { background: linear-gradient(90deg,var(--ds-primary-500),var(--ds-accent-500)); }
.lc-bg-u114 { background: linear-gradient(135deg,var(--ds-primary-500),var(--ds-primary-500)); }
.lc-bg-u115 { background: linear-gradient(135deg,var(--ds-danger-500),var(--ds-danger-600)); }
.lc-bg-u116 { background: linear-gradient(135deg,var(--ds-success-100),var(--ds-success-200)); }
.lc-bg-u117 { background: linear-gradient(135deg,var(--ds-primary-500) 0%,#764ba2 50%,var(--ds-primary-500) 100%); }
.lc-bg-u118 { background: linear-gradient(180deg,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.3) 50%,rgba(0,0,0,0.85) 100%); }
.lc-bg-fae8ff { background: #fae8ff; }
.lc-bg-u119 { background: linear-gradient(135deg,var(--ds-warning-500),var(--ds-warning-600)); }
.lc-bg-u120 { background: linear-gradient(135deg,#a855f7,#9333ea); }
.lc-bg-u121 { background: linear-gradient(135deg,#22c55e,#16a34a); }
.lc-bg-u122 { background: linear-gradient(135deg,#eef2ff,var(--ds-accent-50)); }
.lc-bg-u123 { background: linear-gradient(135deg,var(--ds-neutral-200),var(--ds-neutral-100)); }
.lc-bg-e6162d { background: #e6162d; }
.lc-bg-12b7f5 { background: #12b7f5; }
.lc-bg-u124 { background: linear-gradient(135deg,var(--ds-neutral-100),var(--ds-neutral-200)); }
.lc-bg-u125 { background: linear-gradient(135deg,var(--lc-primary),var(--lc-primary-dark)); }
.lc-bg-u126 { background: linear-gradient(135deg,var(--lc-purple),var(--ds-accent-600)); }
.lc-bg-u127 { background: linear-gradient(135deg,var(--lc-green),var(--ds-success-600)); }
.lc-bg-u134 { background: linear-gradient(135deg,var(--ds-info-500),var(--ds-info-600)); }
.lc-bg-colorsurface { background: var(--color-surface,var(--ds-neutral-0)); }
.lc-bg-u135 { background: linear-gradient(135deg,var(--ds-accent-500),var(--ds-highlight-500)); }
.lc-bg-rgba3419794025 { background: rgba(34,197,94,0.25); }
.lc-bg-4ade80 { background: #4ade80; }
.lc-bg-u136 { background: linear-gradient(135deg,#fae8ff,#f5d0fe); }
.lc-bg-u137 { background: linear-gradient(135deg,#0ea5e9,var(--ds-info-500)); }
.lc-bg-colorprimary { background: var(--color-primary,var(--ds-primary-500)); }
.lc-bg-colorsurface2 { background: var(--color-surface, var(--ds-neutral-0)); }
.lc-bg-colorbgsecondary { background: var(--color-bg-secondary, #f3f4f6); }
.lc-bg-colorbgsecondary2 { background: var(--color-bg-secondary, #f9fafb); }

/* background-clip */
.lc-backgroundclip-text { background-clip: text; }

/* border */
.lc-border-1pxsolidfef3c7 { border: 1px solid var(--ds-warning-100); }
.lc-border-1pxsolidbfdbfe { border: 1px solid var(--ds-primary-200); }
.lc-border-2pxsolid { border: 2px solid; }
.lc-border-1pxsolid6366f1 { border: 1px solid var(--ds-primary-500); }
.lc-border-1pxsolidf59e0b { border: 1px solid var(--ds-warning-500); }
.lc-border-4pxsolide2e8f0 { border: 4px solid var(--ds-neutral-200); }
.lc-border-1pxsolidddd6fe { border: 1px solid var(--ds-accent-200); }
.lc-border-1pxsolidfecaca { border: 1px solid var(--ds-danger-200); }
.lc-border-1pxsolid8b5cf6 { border: 1px solid var(--ds-accent-500); }
.lc-border-1pxdashedcbd5e1 { border: 1px dashed var(--ds-neutral-300); }
.lc-border-1pxsolid10b981 { border: 1px solid var(--ds-success-500); }
.lc-border-1pxsolidf1f5f9 { border: 1px solid var(--ds-neutral-100); }
.lc-border-1pxsolidd1fae5 { border: 1px solid var(--ds-success-100); }
.lc-border-u8 { border: 1px solid var(--border-color,#e5e7eb); }
.lc-border-1pxsolidrgba0217255015 { border: 1px solid rgba(0,217,255,0.15); }
.lc-border-1pxsolidrgba021725502 { border: 1px solid rgba(0,217,255,0.2); }
.lc-border-1pxsoliddbeafe { border: 1px solid var(--ds-primary-100); }
.lc-border-1pxsolide0e7ff { border: 1px solid #e0e7ff; }
.lc-border-1pxsolidfbcfe8 { border: 1px solid var(--ds-highlight-200); }
.lc-border-2pxsolid8b5cf6 { border: 2px solid var(--ds-accent-500); }
.lc-border-2pxsolid6366f1 { border: 2px solid var(--ds-primary-500); }
.lc-border-1pxsolidrgba239686803 { border: 1px solid rgba(239,68,68,0.3); }
.lc-border-2pxsolid3b82f6 { border: 2px solid var(--ds-primary-500); }
.lc-border-2pxsolid10b981 { border: 2px solid var(--ds-success-500); }
.lc-border-1pxsolidc7d2fe { border: 1px solid #c7d2fe; }
.lc-border-2pxdashede2e8f0 { border: 2px dashed var(--ds-neutral-200); }
.lc-border-1pxsolidc4b5fd { border: 1px solid var(--ds-accent-300); }
.lc-border-2pxdashedcbd5e1 { border: 2px dashed var(--ds-neutral-300); }
.lc-border-1pxsolida7f3d0 { border: 1px solid var(--ds-success-200); }
.lc-border-1pxsolidrgba25525525503 { border: 1px solid rgba(255,255,255,0.3); }
.lc-border-1pxsolid93c5fd { border: 1px solid var(--ds-primary-300); }
.lc-border-1pxsolid6ee7b7 { border: 1px solid var(--ds-success-300); }
.lc-border-2pxsolida78bfa { border: 2px solid var(--ds-accent-400); }
.lc-border-2pxsolidfdba74 { border: 2px solid #fdba74; }
.lc-border-2pxsolid475569 { border: 2px solid var(--ds-neutral-600); }
.lc-border-3pxsolide2e8f0 { border: 3px solid var(--ds-neutral-200); }
.lc-border-1pxsolidrgba255255255025 { border: 1px solid rgba(255,255,255,0.25); }
.lc-border-1pxsolidrgba24515811012 { border: 1px solid rgba(245,158,11,0.12); }
.lc-border-1pxsolidrgba5913024601 { border: 1px solid rgba(59,130,246,0.1); }
.lc-border-1pxsolidrgba2367215301 { border: 1px solid rgba(236,72,153,0.1); }
.lc-border-1pxsolidrgba239686801 { border: 1px solid rgba(239,68,68,0.1); }
.lc-border-1pxsolidrgba99102241015 { border: 1px solid rgba(99,102,241,0.15); }
.lc-border-1pxsolidrgba1399224601 { border: 1px solid rgba(139,92,246,0.1); }
.lc-border-1pxsolidrgba1618512901 { border: 1px solid rgba(16,185,129,0.1); }
.lc-border-1pxsolidrgba71939601 { border: 1px solid rgba(7,193,96,0.1); }
.lc-border-1pxsolidfcd34d { border: 1px solid var(--ds-warning-300); }
.lc-border-1pxsolid14b8a6 { border: 1px solid #14b8a6; }
.lc-border-1pxsolid86efac { border: 1px solid var(--ds-success-300); }
.lc-border-1pxsolid86efac50 { border: 1px solid var(--ds-success-300)50; }
.lc-border-1pxsolidbae6fd { border: 1px solid #bae6fd; }
.lc-border-1pxsolidvarperule { border: 1px solid var(--pe-rule); }
.lc-border-2pxsolidf59e0b { border: 2px solid var(--ds-warning-500); }
.lc-border-1pxsolidvarlcpurple { border: 1px solid var(--lc-purple); }
.lc-border-2pxdashedfde68a { border: 2px dashed var(--ds-warning-100); }
.lc-border-1pxsolid334155 { border: 1px solid var(--ds-neutral-700); }
.lc-border-1pxsolidfed7aa { border: 1px solid #fed7aa; }
.lc-border-2pxsolidec4899 { border: 2px solid var(--ds-highlight-500); }
.lc-border-2pxsolid3b82f633 { border: 2px solid var(--ds-primary-500)33; }
.lc-border-2pxsolidec489933 { border: 2px solid var(--ds-highlight-500)33; }
.lc-border-2pxdashedfecaca { border: 2px dashed var(--ds-danger-200); }
.lc-border-1pxsolidfce7f3 { border: 1px solid var(--ds-highlight-100); }
.lc-border-1pxdashedfbcfe8 { border: 1px dashed var(--ds-highlight-200); }
.lc-border-2pxsolid6ee7b7 { border: 2px solid var(--ds-success-300); }
.lc-border-2pxsolidvarbordercolor { border: 2px solid var(--border-color); }
.lc-border-2pxsolidf1f5f9 { border: 2px solid var(--ds-neutral-100); }
.lc-border-2pxdashed6366f1 { border: 2px dashed var(--ds-primary-500); }
.lc-border-1pxsolidtransparent { border: 1px solid transparent; }
.lc-border-1pxdashede2e8f0 { border: 1px dashed var(--ds-neutral-200); }
.lc-border-u138 { border: 1px solid var(--color-border,#e5e7eb); }
.lc-border-1pxsolidrgba25525525502 { border: 1px solid rgba(255,255,255,0.2); }
.lc-border-3pxsolidvarprimarycolor { border: 3px solid var(--primary-color); }
.lc-border-2pxsolidfff { border: 2px solid var(--ds-neutral-0); }
.lc-border-u140 { border: 1px solid var(--color-border, #d1d5db); }

/* border-bottom */
.lc-bdb-2pxsolidf1f5f9 { border-bottom: 2px solid var(--ds-neutral-100); }
.lc-bdb-2pxsolide2e8f0 { border-bottom: 2px solid var(--ds-neutral-200); }
.lc-bdb-1pxsolide2e8f0 { border-bottom: 1px solid var(--ds-neutral-200); }
.lc-bdb-2pxsolidd1fae5 { border-bottom: 2px solid var(--ds-success-100); }
.lc-bdb-2pxsolidfce7f3 { border-bottom: 2px solid var(--ds-highlight-100); }
.lc-bdb-u9 { border-bottom: 1px solid var(--border-color,#e5e7eb); }
.lc-bdb-2pxsolidede9fe { border-bottom: 2px solid var(--ds-accent-100); }
.lc-bdb-1pxdashedfde68a { border-bottom: 1px dashed var(--ds-warning-100); }
.lc-bdb-2pxsolidfef3c7 { border-bottom: 2px solid var(--ds-warning-100); }
.lc-bdb-2pxsolidfde68a { border-bottom: 2px solid var(--ds-warning-100); }
.lc-bdb-2pxsolide0e7ff { border-bottom: 2px solid #e0e7ff; }
.lc-bdb-2pxsolid3b82f6 { border-bottom: 2px solid var(--ds-primary-500); }
.lc-bdb-2pxsolidtransparent { border-bottom: 2px solid transparent; }
.lc-bdb-3pxsolid6366f1 { border-bottom: 3px solid var(--ds-primary-500); }
.lc-bdb-3pxsolidtransparent { border-bottom: 3px solid transparent; }
.lc-bdb-1pxsolid99f6e4 { border-bottom: 1px solid #99f6e4; }
.lc-bdb-1pxdashedcbd5e1 { border-bottom: 1px dashed var(--ds-neutral-300); }
.lc-bdb-1pxdashedfed7aa { border-bottom: 1px dashed #fed7aa; }
.lc-bdb-2pxsolidvarlcborder { border-bottom: 2px solid var(--lc-border); }
.lc-bdb-1pxsolid334155 { border-bottom: 1px solid var(--ds-neutral-700); }
.lc-bdb-1pxsolidfed7aa { border-bottom: 1px solid #fed7aa; }
.lc-bdb-1pxsolidf8fafc { border-bottom: 1px solid var(--ds-neutral-50); }
.lc-bdb-u139 { border-bottom: 1px solid var(--color-border, #e5e7eb); }

/* border-collapse */
.lc-bc-collapse { border-collapse: collapse; }

/* border-color */
.lc-bdc-ff6b35 { border-color: #ff6b35; }
.lc-bdc-8b5cf6 { border-color: var(--ds-accent-500); }
.lc-bdc-rgba25525525503 { border-color: rgba(255,255,255,0.3); }
.lc-bdc-c7d2fe { border-color: #c7d2fe; }
.lc-bdc-f59e0b { border-color: var(--ds-warning-500); }
.lc-bdc-ef4444 { border-color: var(--ds-danger-500); }
.lc-bdc-93c5fd { border-color: var(--ds-primary-300); }
.lc-bdc-c4b5fd { border-color: var(--ds-accent-300); }
.lc-bdc-fca5a5 { border-color: var(--ds-danger-300); }
.lc-bdc-07c160 { border-color: #07c160; }
.lc-bdc-rgba021725502 { border-color: rgba(0,217,255,0.2); }
.lc-bdc-rgba25119136025 { border-color: rgba(251,191,36,0.25); }
.lc-bdc-rgba0217255025 { border-color: rgba(0,217,255,0.25); }
.lc-bdc-rgba14165233025 { border-color: rgba(14,165,233,0.25); }
.lc-bdc-rgba6182212025 { border-color: rgba(6,182,212,0.25); }
.lc-bdc-rgba618221202 { border-color: rgba(6,182,212,0.2); }
.lc-bdc-6ee7b7 { border-color: var(--ds-success-300); }
.lc-bdc-ec4899 { border-color: var(--ds-highlight-500); }
.lc-bdc-10b981 { border-color: var(--ds-success-500); }
.lc-bdc-fecaca { border-color: var(--ds-danger-200); }

/* border-left */
.lc-bdl-3pxsolidf59e0b { border-left: 3px solid var(--ds-warning-500); }
.lc-bdl-3pxsolid07c160 { border-left: 3px solid #07c160; }
.lc-bdl-3pxsolid21759b { border-left: 3px solid #21759b; }
.lc-bdl-3pxsolid2196f3 { border-left: 3px solid #2196f3; }
.lc-bdl-4pxsolidec4899 { border-left: 4px solid var(--ds-highlight-500); }
.lc-bdl-4pxsolid3b82f6 { border-left: 4px solid var(--ds-primary-500); }
.lc-bdl-4pxsolid8b5cf6 { border-left: 4px solid var(--ds-accent-500); }
.lc-bdl-4pxsolid0ea5e9 { border-left: 4px solid #0ea5e9; }
.lc-bdl-4pxsolid10b981 { border-left: 4px solid var(--ds-success-500); }
.lc-bdl-4pxsolidf59e0b { border-left: 4px solid var(--ds-warning-500); }
.lc-bdl-3pxsolidf97316 { border-left: 3px solid var(--ds-warning-500); }
.lc-bdl-4pxsolid07c160 { border-left: 4px solid #07c160; }
.lc-bdl-3pxsolidvarpeaccent { border-left: 3px solid var(--pe-accent); }
.lc-bdl-3pxsolidvarpeaccent3 { border-left: 3px solid var(--pe-accent3); }
.lc-bdl-4pxsolid22c55e { border-left: 4px solid #22c55e; }
.lc-bdl-4pxsolid06b6d4 { border-left: 4px solid var(--ds-info-500); }
.lc-bdl-3pxsolid { border-left: 3px solid; }
.lc-bdl-3pxsolidec4899 { border-left: 3px solid var(--ds-highlight-500); }
.lc-bdl-3pxsolid3b82f6 { border-left: 3px solid var(--ds-primary-500); }
.lc-bdl-3pxsolid10b981 { border-left: 3px solid var(--ds-success-500); }

/* border-radius */
.lc-br-3px { border-radius: 3px; }
.lc-br-24px { border-radius: 24px; }
.lc-br-12px12px00 { border-radius: 12px 12px 0 0; }
.lc-br-18px { border-radius: 18px; }
.lc-br-0 { border-radius: 0; }
.lc-br-16px16px00 { border-radius: 16px 16px 0 0; }
.lc-br-0016px16px { border-radius: 0 0 16px 16px; }
.lc-br-9px { border-radius: 9px; }
.lc-br-999px { border-radius: 999px; }
.lc-br-radiuslg { border-radius: var(--radius-lg); }
.lc-br-2px { border-radius: 2px; }

/* border-right */
.lc-bdr-1pxsolide2e8f0 { border-right: 1px solid var(--ds-neutral-200); }

/* border-top */
.lc-bdt-1pxsolidrgba25525525501 { border-top: 1px solid rgba(255,255,255,0.1); }
.lc-bdt-3pxsolidec4899 { border-top: 3px solid var(--ds-highlight-500); }
.lc-bdt-3pxsolid07c160 { border-top: 3px solid #07c160; }
.lc-bdt-3pxsolid21759b { border-top: 3px solid #21759b; }
.lc-bdt-3pxsolid10b981 { border-top: 3px solid var(--ds-success-500); }
.lc-bdt-1pxsolide2e8f0 { border-top: 1px solid var(--ds-neutral-200); }
.lc-bdt-3pxsolid14b8a6 { border-top: 3px solid #14b8a6; }
.lc-bdt-1pxsolid86efac50 { border-top: 1px solid var(--ds-success-300)50; }
.lc-bdt-1pxdashed86efac50 { border-top: 1px dashed var(--ds-success-300)50; }
.lc-bdt-1pxsolidvarperule { border-top: 1px solid var(--pe-rule); }
.lc-bdt-1pxdashede2e8f0 { border-top: 1px dashed var(--ds-neutral-200); }
.lc-bdt-2pxsolide2e8f0 { border-top: 2px solid var(--ds-neutral-200); }
.lc-bdt-1pxsolide0e0e0 { border-top: 1px solid #e0e0e0; }
.lc-bdt-3pxsolid { border-top: 3px solid; }
.lc-bdt-1pxsolidvarcolorborder { border-top: 1px solid var(--color-border); }
.lc-bdt-1pxsolidf8fafc { border-top: 1px solid var(--ds-neutral-50); }
.lc-bdt-u141 { border-top: 1px solid var(--color-border, #e5e7eb); }

/* border-top-color */
.lc-bordertopcolor-ff6b35 { border-top-color: #ff6b35; }
.lc-bordertopcolor-colorprimary { border-top-color: var(--color-primary,var(--ds-primary-500)); }
.lc-bordertopcolor-8b5cf6 { border-top-color: var(--ds-accent-500); }
.lc-bordertopcolor-7c3aed { border-top-color: var(--ds-accent-600); }

/* bottom */
.lc-bottom-24px { bottom: 24px; }
.lc-bottom-60px { bottom: -60px; }
.lc-bottom-2px { bottom: -2px; }

/* box-shadow */
.lc-shadow-01px3pxrgba00001 { box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.lc-shadow-08px32pxrgba00002 { box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.lc-shadow-04px12pxrgba5913024603 { box-shadow: 0 4px 12px rgba(59,130,246,0.3); }
.lc-shadow-04px12pxrgba00001 { box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.lc-shadow-0002pxf1f5f9inset { box-shadow: 0 0 0 2px var(--ds-neutral-100) inset; }
.lc-shadow-04px12pxrgba59130246008 { box-shadow: 0 4px 12px rgba(59,130,246,0.08); }
.lc-shadow-08px20pxrgba5913024603 { box-shadow: 0 8px 20px rgba(59,130,246,0.3); }
.lc-shadow-04px12pxrgba24515811008 { box-shadow: 0 4px 12px rgba(245,158,11,0.08); }
.lc-shadow-08px20pxrgba2451581103 { box-shadow: 0 8px 20px rgba(245,158,11,0.3); }
.lc-shadow-u26 { box-shadow: 0 8px 24px -6px rgba(245,158,11,0.3); }
.lc-shadow-08px30pxrgba000018 { box-shadow: 0 8px 30px rgba(0,0,0,0.18); }
.lc-shadow-020px60pxrgba00003 { box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
.lc-shadow-08px24pxrgba000012 { box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.lc-shadow-4px024pxrgba000012 { box-shadow: -4px 0 24px rgba(0,0,0,0.12); }
.lc-shadow-04px12pxrgba10212623403 { box-shadow: 0 4px 12px rgba(102,126,234,0.3); }
.lc-shadow-04px15pxrgba9910224103 { box-shadow: 0 4px 15px rgba(99,102,241,0.3); }
.lc-shadow-02px8pxrgba00001 { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.lc-shadow-04px20pxrgba000015 { box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
.lc-shadow-u57 { box-shadow: 0 12px 32px -8px rgba(102,126,234,0.3); }
.lc-shadow-04px12pxrgba000012 { box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
.lc-shadow-04px12pxrgba2451581103 { box-shadow: 0 4px 12px rgba(245,158,11,0.3); }
.lc-shadow-04px12pxrgba2367215303 { box-shadow: 0 4px 12px rgba(236,72,153,0.3); }
.lc-shadow-04px12pxrgba239686803 { box-shadow: 0 4px 12px rgba(239,68,68,0.3); }
.lc-shadow-04px12pxrgba9910224103 { box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.lc-shadow-04px12pxrgba1399224603 { box-shadow: 0 4px 12px rgba(139,92,246,0.3); }
.lc-shadow-04px12pxrgba1618512903 { box-shadow: 0 4px 12px rgba(16,185,129,0.3); }
.lc-shadow-03px10pxrgba1399224603 { box-shadow: 0 3px 10px rgba(139,92,246,0.3); }
.lc-shadow-03px10pxrgba1618512903 { box-shadow: 0 3px 10px rgba(16,185,129,0.3); }
.lc-shadow-03px10pxrgba2367215303 { box-shadow: 0 3px 10px rgba(236,72,153,0.3); }
.lc-shadow-03px10pxrgba71939603 { box-shadow: 0 3px 10px rgba(7,193,96,0.3); }
.lc-shadow-03px10pxrgba239686803 { box-shadow: 0 3px 10px rgba(239,68,68,0.3); }
.lc-shadow-u81 { box-shadow: 0 8px 24px -6px rgba(59,130,246,0.3); }
.lc-shadow-020px60pxrgba00002 { box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.lc-shadow-02px8pxrgba71939603 { box-shadow: 0 2px 8px rgba(7,193,96,0.3); }
.lc-shadow-u100 { box-shadow: 0 12px 32px -8px rgba(59,130,246,0.3); }
.lc-shadow-04px16pxrgba5913024604 { box-shadow: 0 4px 16px rgba(59,130,246,0.4); }
.lc-shadow-04px20pxrgba000006 { box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
.lc-shadow-08px24pxrgba5913024603 { box-shadow: 0 8px 24px rgba(59,130,246,0.3); }
.lc-shadow-04px16pxrgba5913024603 { box-shadow: 0 4px 16px rgba(59,130,246,0.3); }
.lc-shadow-08px32pxrgba000012 { box-shadow: 0 8px 32px rgba(0,0,0,0.12); }
.lc-shadow-02px6pxrgba2451581103 { box-shadow: 0 2px 6px rgba(245,158,11,0.3); }
.lc-shadow-02px6pxrgba1688524703 { box-shadow: 0 2px 6px rgba(168,85,247,0.3); }
.lc-shadow-02px6pxrgba341979403 { box-shadow: 0 2px 6px rgba(34,197,94,0.3); }
.lc-shadow-04px16pxrgba9910224103 { box-shadow: 0 4px 16px rgba(99,102,241,0.3); }
.lc-shadow-04px12pxrgba000015 { box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.lc-shadow-0003pxrgba239686802 { box-shadow: 0 0 0 3px rgba(239,68,68,0.2); }
.lc-shadow-01px3pxrgba000008 { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* color */
.lc-text-aceaccent { color: var(--ace-accent); }
.lc-text-aceaccent2 { color: var(--ace-accent2); }
.lc-text-aceaccent3 { color: var(--ace-accent3); }
.lc-text-acemuted { color: var(--ace-muted); }
.lc-text-textlight { color: var(--text-light,var(--ds-neutral-500)); }
.lc-text-15803d { color: #15803d; }
.lc-text-1d4ed8 { color: var(--ds-primary-700); }
.lc-text-textlight2 { color: var(--text-light); }
.lc-text-4338ca { color: #4338ca; }
.lc-text-ff6b35 { color: #ff6b35; }
.lc-text-lcpurple { color: var(--lc-purple); }
.lc-text-5b21b6 { color: var(--ds-accent-100); }
.lc-text-991b1b { color: var(--ds-danger-800); }
.lc-text-16a34a { color: #16a34a; }
.lc-text-6d28d9 { color: var(--ds-accent-700); }
.lc-text-be185d { color: var(--ds-highlight-700); }
.lc-text-0369a1 { color: #0369a1; }
.lc-text-166534 { color: #166534; }
.lc-text-4f46e5 { color: var(--ds-primary-500); }
.lc-text-999 { color: #999; }
.lc-text-b91c1c { color: var(--ds-danger-700); }
.lc-text-21759b { color: #21759b; }
.lc-text-2196f3 { color: #2196f3; }
.lc-text-textcolor { color: var(--text-color,#1f2937); }
.lc-text-b45309 { color: var(--ds-warning-700); }
.lc-text-00d9ff { color: #00d9ff; }
.lc-text-0ea5e9 { color: #0ea5e9; }
.lc-text-eab308 { color: #eab308; }
.lc-text-rgba255255255085 { color: rgba(255,255,255,0.85); }
.lc-text-rgba25525525507 { color: rgba(255,255,255,0.7); }
.lc-text-rgba25525525509 { color: rgba(255,255,255,0.9); }
.lc-text-6b21a8 { color: #6b21a8; }
.lc-text-9d174d { color: var(--ds-highlight-100); }
.lc-text-78350f { color: var(--ds-warning-50); }
.lc-text-c2410c { color: #c2410c; }
.lc-text-ea580c { color: #ea580c; }
.lc-text-9a3412 { color: #9a3412; }
.lc-text-a16207 { color: #a16207; }
.lc-text-1e3a8a { color: var(--ds-primary-900); }
.lc-text-064e3b { color: var(--ds-success-50); }
.lc-text-4c1d95 { color: var(--ds-accent-50); }
.lc-text-2932E1 { color: #2932E1; }
.lc-text-374151 { color: #374151; }
.lc-text-fbbf24 { color: var(--ds-warning-500); }
.lc-text-rgba255255255095 { color: rgba(255,255,255,0.95); }
.lc-text-111827 { color: #111827; }
.lc-text-0d9488 { color: #0d9488; }
.lc-text-14b8a6 { color: #14b8a6; }
.lc-text-0f766e { color: #0f766e; }
.lc-text-047857 { color: var(--ds-success-700); }
.lc-text-peaccent { color: var(--pe-accent); }
.lc-text-peink { color: var(--pe-ink); }
.lc-text-peaccent2 { color: var(--pe-accent2); }
.lc-text-peaccent3 { color: var(--pe-accent3); }
.lc-text-pegreen { color: var(--pe-green); }
.lc-text-pecyan { color: var(--pe-cyan); }
.lc-text-pepink { color: var(--pe-pink); }
.lc-text-lcamber { color: var(--lc-amber); }
.lc-text-lcprimary { color: var(--lc-primary); }
.lc-text-lcgreen { color: var(--lc-green); }
.lc-text-lctextsecondary { color: var(--lc-text-secondary); }
.lc-text-lcprimarydark { color: var(--lc-primary-dark); }
.lc-text-lctextprimary { color: var(--lc-text-primary); }
.lc-text-lcborder { color: var(--lc-border); }
.lc-text-202124 { color: #202124; }
.lc-text-4d5156 { color: #4d5156; }
.lc-text-333 { color: #333; }
.lc-text-888 { color: #888; }
.lc-text-818cf8 { color: #818cf8; }
.lc-text-e11d48 { color: #e11d48; }
.lc-text-ff2442 { color: #ff2442; }
.lc-text-0084ff { color: #0084ff; }
.lc-text-0c4a6e { color: #0c4a6e; }
.lc-text-075985 { color: #075985; }
.lc-text-831843 { color: var(--ds-highlight-50); }
.lc-text-1f2937 { color: #1f2937; }
.lc-text-fecaca { color: var(--ds-danger-200); }
.lc-text-a855f7 { color: #a855f7; }
.lc-text-bordercolor { color: var(--border-color); }
.lc-text-colortextsecondary { color: var(--color-text-secondary); }
.lc-text-colortextprimary { color: var(--color-text-primary); }
.lc-text-colortextmuted { color: var(--color-text-muted); }

/* display */
.lc-d-webkitbox { display: -webkit-box; }

/* filter */
.lc-flt-blur30px { filter: blur(30px); }
.lc-flt-blur35px { filter: blur(35px); }
.lc-flt-blur45px { filter: blur(45px); }

/* flex */
.lc-flex-0044px { flex: 0 0 44px; }
.lc-flex-2 { flex: 2; }
.lc-flex-00120px { flex: 0 0 120px; }
.lc-flex-00auto { flex: 0 0 auto; }

/* font-family */
.lc-fontfamily-inherit { font-family: inherit; }
.lc-fontfamily-arialsansserif { font-family: arial,sans-serif; }

/* font-size */
.lc-fs-64px { font-size: 64px; }
.lc-fs-22px { font-size: 22px; }
.lc-fs-120px { font-size: 120px; }
.lc-fs-26px { font-size: 26px; }
.lc-fs-8px { font-size: 8px; }
.lc-fs-13rem { font-size: 1.3rem; }
.lc-fs-06rem { font-size: 0.6rem; }
.lc-fs-14rem { font-size: 1.4rem; }
.lc-fs-09em { font-size: 0.9em; }
.lc-fs-125px { font-size: 12.5px; }
.lc-fs-56px { font-size: 56px; }
.lc-fs-065rem { font-size: 0.65rem; }
.lc-fs-25rem { font-size: 2.5rem; }
.lc-fs-lctextsm { font-size: var(--lc-text-sm); }
.lc-fs-lctextxs { font-size: var(--lc-text-xs); }
.lc-fs-lctextlg { font-size: var(--lc-text-lg); }
.lc-fs-088rem { font-size: 0.88rem; }
.lc-fs-35rem { font-size: 3.5rem; }

/* font-style */
.lc-fontstyle-italic { font-style: italic; }

/* font-weight */
.lc-fw-900 { font-weight: 900; }

/* gap */
.lc-gap-0 { gap: 0; }
.lc-gap-3px { gap: 3px; }
.lc-gap-14px { gap: 14px; }
.lc-gap-5px { gap: 5px; }
.lc-gap-05rem { gap: 0.5rem; }

/* grid-column */
.lc-gc-span2 { grid-column: span 2; }
.lc-gc-span3 { grid-column: span 3; }
.lc-gc-11 { grid-column: 1/-1; }

/* grid-template-columns */
.lc-grid-u4 { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.lc-grid-u6 { grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); }
.lc-grid-u7 { grid-template-columns: repeat(auto-fill,minmax(380px,1fr)); }
.lc-grid-u11 { grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.lc-grid-u12 { grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); }
.lc-grid-2fr1fr { grid-template-columns: 2fr 1fr; }
.lc-grid-460px1fr { grid-template-columns: 460px 1fr; }
.lc-grid-u23 { grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); }
.lc-grid-1fr1fr1fr1fr1fr1fr2frauto { grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 2fr auto; }
.lc-grid-u41 { grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); }
.lc-grid-u73 { grid-template-columns: repeat(auto-fill,minmax(320px,1fr)); }
.lc-grid-u75 { grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); }
.lc-grid-u77 { grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); }
.lc-grid-u78 { grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); }
.lc-grid-1fr320px { grid-template-columns: 1fr 320px; }
.lc-grid-2fr1fr1fr { grid-template-columns: 2fr 1fr 1fr; }
.lc-grid-repeat7minmax150px1fr { grid-template-columns: repeat(7,minmax(150px,1fr)); }
.lc-grid-1fr200px { grid-template-columns: 1fr 200px; }
.lc-grid-u86 { grid-template-columns: repeat(auto-fill,minmax(60px,1fr)); }
.lc-grid-1fr140px { grid-template-columns: 1fr 140px; }
.lc-grid-u92 { grid-template-columns: repeat(auto-fill,minmax(80px,1fr)); }
.lc-grid-1fr160pxauto { grid-template-columns: 1fr 160px auto; }
.lc-grid-u93 { grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); }
.lc-grid-1fr1fr100px80pxauto { grid-template-columns: 1fr 1fr 100px 80px auto; }
.lc-grid-u96 { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.lc-grid-u102 { grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); }
.lc-grid-u106 { grid-template-columns: repeat(auto-fill,minmax(420px,1fr)); }
.lc-grid-repeat51fr { grid-template-columns: repeat(5,1fr); }
.lc-grid-280px1fr { grid-template-columns: 280px 1fr; }

/* group */
.lc-group-hover { group: hover; }

/* height */
.lc-h-0 { height: 0; }
.lc-h-18px { height: 18px; }
.lc-h-8px { height: 8px; }
.lc-h-6px { height: 6px; }
.lc-h-45px { height: 45px; }
.lc-h-30px { height: 30px; }
.lc-h-10px { height: 10px; }
.lc-h-220px { height: 220px; }
.lc-h-170px { height: 170px; }
.lc-h-72px { height: 72px; }
.lc-h-14px { height: 14px; }
.lc-h-13px { height: 13px; }
.lc-h-160px { height: 160px; }
.lc-h-12px { height: 12px; }
.lc-h-11px { height: 11px; }
.lc-h-90vh { height: 90vh; }
.lc-h-38px { height: 38px; }
.lc-h-2px { height: 2px; }
.lc-h-180px { height: 180px; }
.lc-h-42px { height: 42px; }
.lc-h-70px { height: 70px; }
.lc-h-22px { height: 22px; }
.lc-h-34px { height: 34px; }
.lc-h-4px { height: 4px; }
.lc-h-400px { height: 400px; }
.lc-h-3px { height: 3px; }
.lc-h-46px { height: 46px; }
.lc-h-260px { height: 260px; }
.lc-h-300px { height: 300px; }
.lc-h-200px { height: 200px; }
.lc-h-280px { height: 280px; }

/* inset */
.lc-inset-0 { inset: 0; }

/* left */
.lc-left-3px { left: 3px; }
.lc-left-50 { left: 50%; }
.lc-left-100 { left: 100%; }
.lc-left-10px { left: 10px; }
.lc-left-15 { left: 15%; }
.lc-left-14px { left: 14px; }

/* letter-spacing */
.lc-ls-05px { letter-spacing: -0.5px; }
.lc-ls-05px2 { letter-spacing: 0.5px; }
.lc-ls-03px { letter-spacing: -0.3px; }

/* line-height */
.lc-lh-14 { line-height: 1.4; }
.lc-lh-17 { line-height: 1.7; }
.lc-lh-12 { line-height: 1.2; }
.lc-lh-40px { line-height: 40px; }
.lc-lh-19 { line-height: 1.9; }
.lc-lh-32px { line-height: 32px; }

/* margin */
.lc-m-0auto { margin: 0 auto; }
.lc-m-40pxauto { margin: 40px auto; }
.lc-m-6px0 { margin: 6px 0; }
.lc-m-10px0 { margin: 10px 0; }
.lc-m-012px { margin: 0 12px; }
.lc-m-06px { margin: 0 6px; }
.lc-m-30px0 { margin: 30px 0; }
.lc-m-8px0 { margin: 8px 0; }

/* margin-bottom */
.lc-mb-2px { margin-bottom: -2px; }
.lc-mb-30px { margin-bottom: 30px; }
.lc-mb-05rem { margin-bottom: 0.5rem; }
.lc-mb-5px { margin-bottom: 5px; }
.lc-mb-18px { margin-bottom: 18px; }

/* margin-left */
.lc-ml-24px { margin-left: 24px; }
.lc-ml-2px { margin-left: 2px; }
.lc-ml-10px { margin-left: 10px; }
.lc-ml-52px { margin-left: 52px; }

/* margin-right */
.lc-mr-5px { margin-right: 5px; }
.lc-mr-10px { margin-right: 10px; }

/* margin-top */
.lc-mt-30px { margin-top: 30px; }
.lc-mt-1px { margin-top: 1px; }
.lc-mt-3px { margin-top: 3px; }
.lc-mt-auto { margin-top: auto; }
.lc-mt-14px { margin-top: 14px; }
.lc-mt-18px { margin-top: 18px; }
.lc-mt-1rem { margin-top: 1rem; }
.lc-mt-05rem { margin-top: 0.5rem; }
.lc-mt-025rem { margin-top: 0.25rem; }
.lc-mt-5px { margin-top: 5px; }

/* max-height */
.lc-maxh-80vh { max-height: 80vh; }
.lc-maxh-280px { max-height: 280px; }
.lc-maxh-400px { max-height: 400px; }
.lc-maxh-92vh { max-height: 92vh; }
.lc-maxh-calc100vh160px { max-height: calc(100vh - 160px); }
.lc-maxh-160px { max-height: 160px; }
.lc-maxh-200px { max-height: 200px; }
.lc-maxh-180px { max-height: 180px; }
.lc-maxh-120px { max-height: 120px; }
.lc-maxh-140px { max-height: 140px; }
.lc-maxh-80px { max-height: 80px; }
.lc-maxh-88vh { max-height: 88vh; }
.lc-maxh-420px { max-height: 420px; }
.lc-maxh-90vh { max-height: 90vh; }
.lc-maxh-60vh { max-height: 60vh; }
.lc-maxh-50vh { max-height: 50vh; }
.lc-maxh-85vh { max-height: 85vh; }
.lc-maxh-60px { max-height: 60px; }
.lc-maxh-54px { max-height: 54px; }
.lc-maxh-42px { max-height: 42px; }

/* max-width */
.lc-maxw-1000px { max-width: 1000px; }
.lc-maxw-440px { max-width: 440px; }
.lc-maxw-560px { max-width: 560px; }
.lc-maxw-800px { max-width: 800px; }
.lc-maxw-1200px { max-width: 1200px; }
.lc-maxw-100px { max-width: 100px; }
.lc-maxw-700px { max-width: 700px; }
.lc-maxw-220px { max-width: 220px; }
.lc-maxw-200px { max-width: 200px; }
.lc-maxw-95 { max-width: 95%; }
.lc-maxw-900px { max-width: 900px; }
.lc-maxw-1400px { max-width: 1400px; }
.lc-maxw-1100px { max-width: 1100px; }
.lc-maxw-420px { max-width: 420px; }
.lc-maxw-500px { max-width: 500px; }
.lc-maxw-680px { max-width: 680px; }
.lc-maxw-92vw { max-width: 92vw; }
.lc-maxw-1280px { max-width: 1280px; }
.lc-maxw-400px { max-width: 400px; }
.lc-maxw-350px { max-width: 350px; }
.lc-maxw-480px { max-width: 480px; }
.lc-maxw-250px { max-width: 250px; }
.lc-maxw-600px { max-width: 600px; }
.lc-maxw-90 { max-width: 90%; }
.lc-maxw-92 { max-width: 92%; }
.lc-maxw-580px { max-width: 580px; }
.lc-maxw-520px { max-width: 520px; }
.lc-maxw-780px { max-width: 780px; }
.lc-maxw-860px { max-width: 860px; }
.lc-maxw-960px { max-width: 960px; }
.lc-maxw-180px { max-width: 180px; }
.lc-maxw-90vw { max-width: 90vw; }
.lc-maxw-380px { max-width: 380px; }
.lc-maxw-94 { max-width: 94%; }
.lc-maxw-300px { max-width: 300px; }
.lc-maxw-760px { max-width: 760px; }
.lc-maxw-140px { max-width: 140px; }

/* min-height */
.lc-minh-120px { min-height: 120px; }
.lc-minh-60px { min-height: 60px; }
.lc-minh-50px { min-height: 50px; }
.lc-minh-40px { min-height: 40px; }
.lc-minh-100vh { min-height: 100vh; }
.lc-minh-44px { min-height: 44px; }
.lc-minh-400px { min-height: 400px; }
.lc-minh-42px { min-height: 42px; }
.lc-minh-300px { min-height: 300px; }
.lc-minh-64px { min-height: 64px; }
.lc-minh-180px { min-height: 180px; }
.lc-minh-70px { min-height: 70px; }
.lc-minh-72px { min-height: 72px; }
.lc-minh-48px { min-height: 48px; }
.lc-minh-60vh { min-height: 60vh; }

/* min-width */
.lc-minw-300px { min-width: 300px; }
.lc-minw-250px { min-width: 250px; }
.lc-minw-40px { min-width: 40px; }
.lc-minw-120px { min-width: 120px; }
.lc-minw-140px { min-width: 140px; }
.lc-minw-820px { min-width: 820px; }
.lc-minw-240px { min-width: 240px; }
.lc-minw-160px { min-width: 160px; }
.lc-minw-35px { min-width: 35px; }
.lc-minw-900px { min-width: 900px; }
.lc-minw-860px { min-width: 860px; }
.lc-minw-480px { min-width: 480px; }
.lc-minw-1000px { min-width: 1000px; }
.lc-minw-1080px { min-width: 1080px; }
.lc-minw-36px { min-width: 36px; }
.lc-minw-110px { min-width: 110px; }
.lc-minw-1100px { min-width: 1100px; }
.lc-minw-200px { min-width: 200px; }
.lc-minw-18px { min-width: 18px; }
.lc-minw-16px { min-width: 16px; }
.lc-minw-88px { min-width: 88px; }
.lc-minw-280px { min-width: 280px; }
.lc-minw-80px { min-width: 80px; }

/* opacity */
.lc-op-008 { opacity: 0.08; }
.lc-op-04 { opacity: 0.4; }
.lc-op-006 { opacity: 0.06; }

/* padding */
.lc-p-1px4px { padding: 1px 4px; }
.lc-p-1px8px { padding: 1px 8px; }
.lc-p-3px10px { padding: 3px 10px; }
.lc-p-1px5px { padding: 1px 5px; }
.lc-p-7px12px { padding: 7px 12px; }
.lc-p-1px6px { padding: 1px 6px; }
.lc-p-3px8px { padding: 3px 8px; }
.lc-p-3px6px { padding: 3px 6px; }
.lc-p-3px0 { padding: 3px 0; }
.lc-p-9px18px { padding: 9px 18px; }
.lc-p-9px16px { padding: 9px 16px; }
.lc-p-48px { padding: 48px; }
.lc-p-5px9px { padding: 5px 9px; }
.lc-p-7px0 { padding: 7px 0; }
.lc-p-11px { padding: 11px; }
.lc-p-5px10px { padding: 5px 10px; }
.lc-p-7px16px { padding: 7px 16px; }
.lc-p-22px { padding: 22px; }
.lc-p-7px10px { padding: 7px 10px; }
.lc-p-9px20px { padding: 9px 20px; }
.lc-p-9px { padding: 9px; }
.lc-p-7px { padding: 7px; }
.lc-p-2rem1rem { padding: 2rem 1rem; }
.lc-p-15rem { padding: 1.5rem; }
.lc-p-2rem { padding: 2rem; }
.lc-p-5px { padding: 5px; }
.lc-p-05px { padding: 0 5px; }
.lc-p-3px12px { padding: 3px 12px; }
.lc-p-5px14px { padding: 5px 14px; }
.lc-p-5px12px { padding: 5px 12px; }

/* padding-bottom */
.lc-pb-7px { padding-bottom: 7px; }
.lc-pb-1px { padding-bottom: 1px; }
.lc-pb-14px { padding-bottom: 14px; }
.lc-pb-5px { padding-bottom: 5px; }
.lc-pb-3px { padding-bottom: 3px; }
.lc-pb-5625 { padding-bottom: 56.25%; }

/* padding-left */
.lc-pl-18px { padding-left: 18px; }
.lc-pl-10px { padding-left: 10px; }
.lc-pl-22px { padding-left: 22px; }
.lc-pl-14px { padding-left: 14px; }
.lc-pl-28px { padding-left: 28px; }
.lc-pl-40px { padding-left: 40px; }
.lc-pl-24px { padding-left: 24px; }
.lc-pl-30px { padding-left: 30px; }

/* padding-right */
.lc-pr-18px { padding-right: 18px; }
.lc-pr-10px { padding-right: 10px; }
.lc-pr-14px { padding-right: 14px; }
.lc-pr-28px { padding-right: 28px; }

/* padding-top */
.lc-pt-7px { padding-top: 7px; }
.lc-pt-1px { padding-top: 1px; }
.lc-pt-14px { padding-top: 14px; }
.lc-pt-5px { padding-top: 5px; }
.lc-pt-3px { padding-top: 3px; }
.lc-pt-18px { padding-top: 18px; }
.lc-pt-24px { padding-top: 24px; }

/* pointer-events */
.lc-pe-none { pointer-events: none; }

/* right */
.lc-right-20px { right: -20px; }
.lc-right-12px { right: 12px; }
.lc-right-30px { right: -30px; }
.lc-right-2px { right: 2px; }
.lc-right-20px2 { right: 20px; }
.lc-right-24px { right: 24px; }
.lc-right-40px { right: -40px; }
.lc-right-10px { right: 10px; }
.lc-right-2px2 { right: -2px; }

/* text-shadow */
.lc-textshadow-02px8pxrgba00003 { text-shadow: 0 2px 8px rgba(0,0,0,0.3); }

/* top */
.lc-top-3px { top: 3px; }
.lc-top-50 { top: 50%; }
.lc-top-100 { top: 100%; }
.lc-top-20px { top: -20px; }
.lc-top-40px { top: -40px; }
.lc-top-12px { top: 12px; }
.lc-top-calc1004px { top: calc(100% + 4px); }
.lc-top-50px { top: -50px; }
.lc-top-2px { top: 2px; }
.lc-top-20px2 { top: 20px; }
.lc-top-10px { top: 10px; }

/* transform */
.lc-tf-translate5050 { transform: translate(-50%,-50%); }
.lc-tf-translateY50 { transform: translateY(-50%); }
.lc-tf-translateX50 { transform: translateX(-50%); }
.lc-tf-translateX100 { transform: translateX(100%); }
.lc-tf-translateY20px { transform: translateY(20px); }
.lc-tf-scale095 { transform: scale(0.95); }

/* transition */
.lc-tr-transform03s { transition: transform 0.3s; }
.lc-tr-03s { transition: 0.3s; }
.lc-tr-all04s { transition: all 0.4s; }
.lc-tr-all2s { transition: all .2s; }
.lc-tr-width01seaseout { transition: width 0.1s ease-out; }
.lc-tr-width03s { transition: width 0.3s; }
.lc-tr-width1slinear { transition: width 1s linear; }
.lc-tr-opacity04s { transition: opacity 0.4s; }
.lc-tr-opacity04sease { transition: opacity 0.4s ease; }
.lc-tr-all015s { transition: all 0.15s; }
.lc-tr-color015s { transition: color 0.15s; }
.lc-tr-bordercolor015s { transition: border-color 0.15s; }
.lc-tr-background02s { transition: background 0.2s; }

/* user-select */
.lc-us-none { user-select: none; }

/* vertical-align */
.lc-va-middle { vertical-align: middle; }

/* width */
.lc-w-52px { width: 52px; }
.lc-w-0 { width: 0; }
.lc-w-90 { width: 90%; }
.lc-w-44px { width: 44px; }
.lc-w-18px { width: 18px; }
.lc-w-200px { width: 200px; }
.lc-w-150px { width: 150px; }
.lc-w-130px { width: 130px; }
.lc-w-50px { width: 50px; }
.lc-w-180px { width: 180px; }
.lc-w-280px { width: 280px; }
.lc-w-680px { width: 680px; }
.lc-w-10px { width: 10px; }
.lc-w-170px { width: 170px; }
.lc-w-110px { width: 110px; }
.lc-w-72px { width: 72px; }
.lc-w-14px { width: 14px; }
.lc-w-13px { width: 13px; }
.lc-w-12px { width: 12px; }
.lc-w-11px { width: 11px; }
.lc-w-1px { width: 1px; }
.lc-w-92 { width: 92%; }
.lc-w-420px { width: 420px; }
.lc-w-30px { width: 30px; }
.lc-w-2px { width: 2px; }
.lc-w-70px { width: 70px; }
.lc-w-560px { width: 560px; }
.lc-w-700px { width: 700px; }
.lc-w-500px { width: 500px; }
.lc-w-640px { width: 640px; }
.lc-w-580px { width: 580px; }
.lc-w-520px { width: 520px; }
.lc-w-540px { width: 540px; }
.lc-w-220px { width: 220px; }
.lc-w-300px { width: 300px; }
.lc-w-480px { width: 480px; }
.lc-w-600px { width: 600px; }
.lc-w-460px { width: 460px; }
.lc-w-95 { width: 95%; }
.lc-w-22px { width: 22px; }
.lc-w-34px { width: 34px; }
.lc-w-8px { width: 8px; }
.lc-w-02 { width: 0%; }
.lc-w-46px { width: 46px; }
.lc-w-42px { width: 42px; }
.lc-w-72 { width: 72%; }
.lc-w-6px { width: 6px; }

/* word-break */
.lc-wb-breakall { word-break: break-all; }

/* z-index */
.lc-z-1100 { z-index: 1100; }
.lc-z-9997 { z-index: 9997; }
.lc-z-9998 { z-index: 9998; }
.lc-z-5 { z-index: 5; }
.lc-z-2 { z-index: 2; }
.lc-z-10001 { z-index: 10001; }
.lc-z-999 { z-index: 999; }

/* === Merged from style.css === */
/* !DEPRECATED - This file is superseded by design-tokens.css
   All variables have been consolidated into design-tokens.css
   This file is kept for backward compatibility only.
   Do not add new styles here. Use design-tokens.css instead.
   Created: 2026-09-12 */

/** 联创圈 - 全局样式 */

:root {
    --primary-color: var(--ds-primary-500);
    --primary-dark: var(--ds-primary-600);
    --secondary-color: var(--ds-accent-500);
    --success-color: var(--ds-success-500);
    --warning-color: var(--ds-warning-500);
    --danger-color: var(--ds-danger-500);
    --dark-color: #1f2937;
    --gray-color: #6b7280;
    --light-gray: #f3f4f6;
    --border-color: #e5e7eb;
    --bg-color: var(--ds-neutral-50);
    --card-bg: var(--ds-neutral-0);
    --navbar-bg: var(--ds-neutral-0);
    --text-color: #1f2937;
    --text-secondary: #6b7280;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius: 8px;
    --radius-lg: 12px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
}

/* ========== 导航栏 ========== */
.navbar {
    background: var(--navbar-bg);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.navbar-brand img {
    height: 40px;
    width: auto;
    border-radius: 6px;
}

.navbar-nav {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
}

.navbar-nav a {
    font-weight: 500;
    color: var(--dark-color);
    padding: 8px 0;
    position: relative;
}

.navbar-nav a:hover,
.navbar-nav a.active {
    color: var(--primary-color);
}

.navbar-nav a.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
    border-radius: 2px;
}

.navbar-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

.search-box {
    position: relative;
}

.search-box input {
    padding: 8px 35px 8px 15px;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    width: 220px;
    font-size: 0.9rem;
    transition: var(--transition);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    width: 280px;
}
.search-box input:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

.search-box button {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-color);
    cursor: pointer;
}

/* ========== 按钮 ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    border: none;
    transition: var(--transition);
}

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

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background: var(--secondary-color);
    color: white;
}

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

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

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

.btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--dark-color);
}

.btn-outline:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 14px 28px;
    font-size: 1.05rem;
}

/* ========== 卡片 ========== */
.card {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card-image {
    position: relative;
    padding-top: 60%;
    overflow: hidden;
    background: #eef1f5;
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition), opacity 0.3s ease;
    opacity: 0;
}

/* WebP picture 标签适配 */
.card-image picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.card-image img.loaded {
    opacity: 1;
}

.card:hover .card-image img {
    transform: scale(1.05);
}

.card-body {
    padding: 16px;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--gray-color);
    font-size: 0.85rem;
}

.card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.price-tag {
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}

.price-tag.free,
.price-tag.member-free {
    color: var(--success-color);
    font-size: 0.9rem;
}

.price-tag.paid {
    color: var(--danger-color);
}

.price-original {
    font-size: 0.8rem;
    color: var(--gray-color);
    text-decoration: line-through;
}

.card-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size:0.875rem;
    font-weight: 600;
}

.badge-hot {
    background: var(--danger-color);
    color: white;
}

.badge-vip {
    background: var(--warning-color);
    color: white;
}

.badge-free {
    background: var(--success-color);
    color: white;
}

/* ========== 布局 ========== */
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 40px 0;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.section-title {
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--primary-color);
    border-radius: 2px;
}

.grid {
    display: grid;
    gap: 20px;
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

.grid-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* ========== Hero区域 ========== */
.hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 16px;
}

.hero p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 30px;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 40px;
}

.hero-stat {
    text-align: center;
}

.hero-stat .number {
    font-size: 2rem;
    font-weight: 700;
}

.hero-stat .label {
    font-size: 0.9rem;
    opacity: 0.8;
}

/* ========== Banner轮播 ========== */
.banner-slider {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 30px;
}

.banner-slider img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* ========== 分类标签 ========== */
.category-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.category-tab {
    padding: 8px 20px;
    border-radius: 20px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--transition);
}

.category-tab:hover,
.category-tab.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ========== 表格 ========== */
.table-container {
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}

.table th {
    background: var(--light-gray);
    font-weight: 600;
    font-size: 0.9rem;
}

.table tr:hover {
    background: #f9fafb;
}

/* ========== 表单 ========== */
.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    font-size: 0.95rem;
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59,130,246, 0.1);
}
.form-control:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

textarea.form-control {
    resize: vertical;
    min-height: 100px;
}

/* ========== 分页 ========== */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 30px;
}

.pagination a,
.pagination span {
    padding: 8px 14px;
    border-radius: var(--radius);
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.pagination a:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination .current {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* ========== 消息提示 ========== */
.flash-messages {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
}

.flash-message {
    padding: 14px 20px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    box-shadow: var(--shadow-lg);
    animation: slideIn 0.3s ease;
}

.flash-success {
    background: var(--ds-success-100);
    color: var(--ds-success-100);
    border-left: 4px solid var(--success-color);
}

.flash-error {
    background: var(--ds-danger-100);
    color: var(--ds-danger-800);
    border-left: 4px solid var(--danger-color);
}

.flash-info {
    background: var(--ds-primary-100);
    color: var(--ds-primary-700);
    border-left: 4px solid var(--ds-primary-500);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ========== 后台布局 ========== */
.admin-layout {
    display: flex;
    min-height: 100vh;
}

.admin-sidebar {
    width: 260px;
    background: var(--dark-color);
    color: white;
    position: fixed;
    height: 100vh;
    overflow-y: auto;
}

.admin-sidebar-brand {
    padding: 20px;
    font-size: 1.3rem;
    font-weight: 700;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.admin-sidebar-nav {
    list-style: none;
    padding: 10px 0;
}

.admin-sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
}

.admin-sidebar-nav li a:hover,
.admin-sidebar-nav li a.active {
    background: rgba(255,255,255,0.1);
    color: white;
}

.admin-main {
    flex: 1;
    margin-left: 260px;
    padding: 20px;
    background: var(--ds-neutral-100);
    min-height: 100vh;
}

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

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card {
    background: white;
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.stat-card .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-card .stat-label {
    color: var(--gray-color);
    font-size: 0.9rem;
    margin-top: 4px;
}

/* ========== 会员等级标签 ========== */
.member-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-free-member {
    background: #e5e7eb;
    color: var(--gray-color);
}

.badge-vip-member {
    background: var(--ds-warning-100);
    color: var(--ds-warning-700);
}

.badge-svip-member {
    background: var(--ds-primary-100);
    color: var(--ds-primary-700);
}

.badge-partner-member {
    background: var(--ds-success-100);
    color: var(--ds-success-100);
}

/* ========== 广告解锁 ========== */
.ad-container {
    background: white;
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: center;
    box-shadow: var(--shadow);
}

.ad-timer {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 20px 0;
}

/* ========== 页脚 ========== */
.footer {
    background: var(--dark-color);
    color: rgba(255,255,255,0.7);
    padding: 40px 0 20px;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin-bottom: 30px;
}

.footer-section h4 {
    color: white;
    margin-bottom: 16px;
    font-size: 1rem;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a:hover {
    color: white;
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 0.85rem;
}

/* ========== 响应式设计 ========== */
@media (max-width: 1200px) {
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .grid-3, .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero h1 {
        font-size: 2rem;
    }
    .hero-stats {
        gap: 30px;
    }
    .admin-sidebar {
        width: 200px;
    }
    .admin-main {
        margin-left: 200px;
    }
}

@media (max-width: 768px) {
    .navbar-nav,
    .search-box {
        display: none;
    }
    .hero {
        padding: 30px 0;
    }
    .hero h1 {
        font-size: 1.4rem;
    }
    .hero-stats {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 16px;
    }
    .section {
        padding: 16px 0;
    }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .admin-sidebar {
        transform: translateX(-100%);
        z-index: 999;
    }
    .admin-main {
        margin-left: 0;
    }
}

/* 移动端菜单 */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--dark-color);
}

/* ========== 帖子样式 ========== */
.post-item {
    background: white;
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

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

.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.post-meta {
    flex: 1;
}

.post-author {
    font-weight: 600;
    font-size: 0.95rem;
}

.post-time {
    font-size: 0.8rem;
    color: var(--gray-color);
}

.post-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.post-content {
    color: var(--gray-color);
    line-height: 1.6;
    margin-bottom: 12px;
}

.post-stats {
    display: flex;
    gap: 20px;
    font-size: 0.85rem;
    color: var(--gray-color);
}

/* ========== 回复样式 ========== */
.reply-item {
    padding: 16px;
    border-bottom: 1px solid var(--border-color);
}

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

/* ========== 详情页 ========== */
.detail-header {
    background: white;
    border-radius: var(--radius-lg);
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.detail-body {
    background: white;
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: var(--shadow);
}

.detail-cover {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: 20px;
}

/* ========== 工具类 ========== */
.text-primary { color: var(--primary-color); }
.text-success { color: var(--success-color); }
.text-warning { color: var(--warning-color); }
.text-danger { color: var(--danger-color); }
.text-gray { color: var(--gray-color); }
.text-center { text-align: center; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 16px; }
.w-100 { width: 100%; }

/* ========== 外部链接访问器（站内窗口模式） ========== */
.ext-link-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.92);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    animation: extLinkFadeIn 0.25s ease;
}
@keyframes extLinkFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 顶部工具栏 */
.ext-link-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 56px;
    background: linear-gradient(135deg, #1a56db, var(--ds-primary-600));
    color: var(--ds-neutral-0);
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.ext-link-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}
.ext-link-info > i {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ext-link-title {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}
.ext-link-url {
    font-size: 0.8rem;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: none;
}
.ext-link-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.ext-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    text-decoration: none;
    white-space: nowrap;
}
.ext-link-btn-open {
    background: rgba(255,255,255,0.2);
    color: var(--ds-neutral-0);
}
.ext-link-btn-open:hover {
    background: rgba(255,255,255,0.35);
}
.ext-link-btn-close {
    background: var(--ds-neutral-0);
    color: #1a56db;
}
.ext-link-btn-close:hover {
    background: #f0f4ff;
}

/* iframe 容器 */
.ext-link-frame-container {
    flex: 1;
    position: relative;
    background: var(--ds-neutral-0);
    overflow: hidden;
}
#extLinkFrame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* 加载提示 */
.ext-link-loading {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ds-neutral-50);
    color: var(--ds-neutral-500);
    z-index: 2;
}
.ext-link-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ds-neutral-200);
    border-top-color: var(--ds-primary-600);
    border-radius: 50%;
    animation: extLinkSpin 0.8s linear infinite;
    margin-bottom: 16px;
}
@keyframes extLinkSpin {
    to { transform: rotate(360deg); }
}
.ext-link-loading p {
    margin: 4px 0;
    font-size: 0.9rem;
}

/* 被阻止时的提示 */
.ext-link-blocked {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--ds-neutral-50);
    text-align: center;
    padding: 40px 20px;
    z-index: 3;
}
.ext-link-blocked i {
    font-size: 3.5rem;
    color: var(--ds-warning-500);
    margin-bottom: 20px;
}
.ext-link-blocked h3 {
    font-size: 1.3rem;
    color: var(--ds-neutral-900);
    margin-bottom: 12px;
}
.ext-link-blocked p {
    color: var(--ds-neutral-500);
    margin: 6px 0;
    font-size: 0.95rem;
}
.ext-link-blocked-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--ds-primary-600), var(--ds-primary-500));
    color: var(--ds-neutral-0) !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 20px;
    transition: all 0.2s;
}
.ext-link-blocked-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37,99,235,0.4);
}

/* 底部提示栏 */
.ext-link-hint {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 8px 20px;
    background: rgba(0,0,0,0.7);
    color: var(--ds-neutral-0);
    font-size: 0.8rem;
    text-align: center;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ext-link-hint a {
    color: var(--ds-primary-300);
    text-decoration: underline;
    cursor: pointer;
}

/* === Phase 5: Utility Classes (extracted from inline styles) === */
/* Text colors */
.lc-text-success { color: var(--ds-success-500); }
.lc-text-warning { color: var(--ds-warning-500); }
.lc-text-danger { color: var(--ds-danger-500); }
.lc-text-primary { color: var(--ds-primary-500); }
.lc-text-accent { color: var(--ds-accent-500); }
.lc-text-neutral { color: var(--ds-neutral-500); }
.lc-text-neutral-400 { color: var(--ds-neutral-400); }

/* Spacing */
.lc-mb-0 { margin-bottom: 0; }
.lc-mb-sm { margin-bottom: var(--ds-space-sm); }
.lc-mb-md { margin-bottom: var(--ds-space-md); }
.lc-mb-lg { margin-bottom: var(--ds-space-lg); }
.lc-mt-md { margin-top: var(--ds-space-md); }

/* Flexbox */
.lc-flex-1 { flex: 1; }
.lc-gap-sm { gap: var(--ds-space-sm); }
.lc-flex-center-sm { gap: var(--ds-space-sm); align-items: center; }

/* Display */
.lc-hidden { display: none; }

/* Font */
.lc-text-xs { font-size: var(--ds-text-xs); }
.lc-text-xs-neutral { font-size: var(--ds-text-xs); color: var(--ds-neutral-500); }

/* === Phase 6C: Additional Utility Classes === */
.lc-hidden { display: none !important; }
.lc-m-0 { margin: 0 !important; }
.lc-mb-md { margin-bottom: var(--ds-space-md) !important; }
.lc-mt-md { margin-top: var(--ds-space-md) !important; }
.lc-mb-sm { margin-bottom: var(--ds-space-sm) !important; }
.lc-mt-sm { margin-top: var(--ds-space-sm) !important; }
.lc-mb-lg { margin-bottom: var(--ds-space-lg) !important; }
.lc-mt-lg { margin-top: var(--ds-space-lg) !important; }
.lc-text-center { text-align: center !important; }
.lc-text-right { text-align: right !important; }
.lc-text-left { text-align: left !important; }
.lc-text-xs { font-size: var(--ds-text-xs) !important; }
.lc-text-sm { font-size: var(--ds-text-sm) !important; }
.lc-text-base { font-size: var(--ds-text-base) !important; }
.lc-text-heading { font-size: var(--ds-text-heading) !important; }
.lc-text-title { font-size: var(--ds-text-title) !important; }
.lc-font-bold { font-weight: var(--ds-font-bold) !important; }
.lc-font-semibold { font-weight: var(--ds-font-semibold) !important; }
.lc-font-medium { font-weight: var(--ds-font-medium) !important; }
.lc-text-success { color: var(--ds-success-500) !important; }
.lc-text-warning { color: var(--ds-warning-500) !important; }
.lc-text-danger { color: var(--ds-danger-500) !important; }
.lc-text-primary { color: var(--ds-primary-500) !important; }
.lc-text-accent { color: var(--ds-accent-500) !important; }
.lc-text-neutral { color: var(--ds-neutral-500) !important; }
.lc-text-muted { color: var(--ds-neutral-400) !important; }
.lc-text-dark { color: var(--ds-neutral-700) !important; }
.lc-text-darkest { color: var(--ds-neutral-900) !important; }
.lc-text-inverse { color: var(--ds-text-inverse) !important; }
.lc-w-full { width: 100% !important; }
.lc-p-sm { padding: var(--ds-space-sm) !important; }
.lc-p-md { padding: var(--ds-space-md) !important; }
.lc-p-lg { padding: var(--ds-space-lg) !important; }
.lc-cursor-pointer { cursor: pointer !important; }
.lc-overflow-hidden { overflow: hidden !important; }
.lc-relative { position: relative !important; }
.lc-absolute { position: absolute !important; }
.lc-fixed { position: fixed !important; }
.lc-flex { display: flex !important; }
.lc-inline-flex { display: inline-flex !important; }
.lc-gap-sm { gap: var(--ds-space-sm) !important; }
.lc-gap-md { gap: var(--ds-space-md) !important; }
.lc-gap-lg { gap: var(--ds-space-lg) !important; }
.lc-radius-sm { border-radius: var(--ds-radius-sm) !important; }
.lc-radius-md { border-radius: var(--ds-radius-md) !important; }
.lc-radius-lg { border-radius: var(--ds-radius-lg) !important; }
.lc-radius-full { border-radius: var(--ds-radius-full) !important; }

/* === Standard Utility Classes (Tailwind mapping) === */
/* Background colors */
.lc-bg-primary-50 { background-color: var(--ds-primary-50); }
.lc-bg-primary-100 { background-color: var(--ds-primary-100); }
.lc-bg-primary-500 { background-color: var(--ds-primary-500); }
.lc-bg-primary-600 { background-color: var(--ds-primary-600); }
.lc-bg-accent-50 { background-color: var(--ds-accent-50); }
.lc-bg-accent-100 { background-color: var(--ds-accent-100); }
.lc-bg-accent-500 { background-color: var(--ds-accent-500); }
.lc-bg-success-50 { background-color: var(--ds-success-50); }
.lc-bg-success-100 { background-color: var(--ds-success-100); }
.lc-bg-success-500 { background-color: var(--ds-success-500); }
.lc-bg-warning-50 { background-color: var(--ds-warning-50); }
.lc-bg-warning-100 { background-color: var(--ds-warning-100); }
.lc-bg-warning-500 { background-color: var(--ds-warning-500); }
.lc-bg-danger-50 { background-color: var(--ds-danger-50); }
.lc-bg-danger-100 { background-color: var(--ds-danger-100); }
.lc-bg-danger-500 { background-color: var(--ds-danger-500); }
.lc-bg-highlight-50 { background-color: var(--ds-highlight-50); }
.lc-bg-highlight-100 { background-color: var(--ds-highlight-100); }
.lc-bg-highlight-500 { background-color: var(--ds-highlight-500); }
.lc-bg-info-50 { background-color: var(--ds-info-50); }
.lc-bg-info-100 { background-color: var(--ds-info-100); }
.lc-bg-info-500 { background-color: var(--ds-info-500); }
.lc-bg-neutral-50 { background-color: var(--ds-neutral-50); }
.lc-bg-neutral-100 { background-color: var(--ds-neutral-100); }
.lc-bg-neutral-200 { background-color: var(--ds-neutral-200); }

/* Text colors */
.lc-text-primary-500 { color: var(--ds-primary-500); }
.lc-text-primary-600 { color: var(--ds-primary-600); }
.lc-text-primary-700 { color: var(--ds-primary-700); }
.lc-text-primary-800 { color: var(--ds-primary-700); }
.lc-text-accent-500 { color: var(--ds-accent-500); }
.lc-text-accent-600 { color: var(--ds-accent-600); }
.lc-text-accent-700 { color: var(--ds-accent-700); }
.lc-text-success-500 { color: var(--ds-success-500); }
.lc-text-success-600 { color: var(--ds-success-600); }
.lc-text-success-700 { color: var(--ds-success-700); }
.lc-text-success-800 { color: var(--ds-success-700); }
.lc-text-warning-500 { color: var(--ds-warning-500); }
.lc-text-warning-600 { color: var(--ds-warning-600); }
.lc-text-warning-700 { color: var(--ds-warning-700); }
.lc-text-warning-800 { color: var(--ds-warning-700); }
.lc-text-danger-500 { color: var(--ds-danger-500); }
.lc-text-danger-600 { color: var(--ds-danger-600); }
.lc-text-danger-700 { color: var(--ds-danger-700); }
.lc-text-danger-800 { color: var(--ds-danger-700); }
.lc-text-highlight-500 { color: var(--ds-highlight-500); }
.lc-text-highlight-600 { color: var(--ds-highlight-600); }
.lc-text-highlight-700 { color: var(--ds-highlight-700); }
.lc-text-info-500 { color: var(--ds-info-500); }
.lc-text-info-600 { color: var(--ds-info-600); }
.lc-text-info-700 { color: var(--ds-info-700); }
.lc-text-neutral-50 { color: var(--ds-neutral-50); }
.lc-text-neutral-100 { color: var(--ds-neutral-100); }
.lc-text-neutral-200 { color: var(--ds-neutral-200); }
.lc-text-neutral-300 { color: var(--ds-neutral-300); }
.lc-text-neutral-400 { color: var(--ds-neutral-400); }
.lc-text-neutral-500 { color: var(--ds-neutral-500); }
.lc-text-neutral-600 { color: var(--ds-neutral-600); }
.lc-text-neutral-700 { color: var(--ds-neutral-700); }
.lc-text-neutral-800 { color: var(--ds-neutral-800); }
.lc-text-neutral-900 { color: var(--ds-neutral-900); }

/* Border colors */
.lc-border-primary-200 { border-color: var(--ds-primary-200); }
.lc-border-primary-500 { border-color: var(--ds-primary-500); }
.lc-border-success-200 { border-color: var(--ds-success-200, var(--ds-success-100)); }
.lc-border-success-500 { border-color: var(--ds-success-500); }
.lc-border-danger-200 { border-color: var(--ds-danger-200, var(--ds-danger-100)); }
.lc-border-danger-500 { border-color: var(--ds-danger-500); }
.lc-border-neutral-50 { border-color: var(--ds-neutral-50); }
.lc-border-neutral-100 { border-color: var(--ds-neutral-100); }
.lc-border-neutral-200 { border-color: var(--ds-neutral-200); }
.lc-border-neutral-300 { border-color: var(--ds-neutral-300); }

/* === Standard Utility Classes (inline style extraction) === */
.lc-hidden { display: none; }
.lc-flex { display: flex; }
.lc-inline-block { display: inline-block; }
.lc-text-center { text-align: center; }
.lc-text-right { text-align: right; }
.lc-text-left { text-align: left; }
.lc-font-bold { font-weight: var(--ds-font-bold, 700); }
.lc-font-semibold { font-weight: var(--ds-font-semibold, 600); }
.lc-font-medium { font-weight: var(--ds-font-medium, 500); }
.lc-text-xs { font-size: var(--ds-text-xs, 12px); }
.lc-text-sm { font-size: var(--ds-text-sm, 13px); }
.lc-text-base { font-size: var(--ds-text-base, 14px); }
.lc-text-lg { font-size: var(--ds-text-lg, 16px); }
.lc-text-xl { font-size: var(--ds-text-xl, 18px); }
.lc-m-0 { margin: 0; }
.lc-mt-sm { margin-top: var(--ds-space-sm, 8px); }
.lc-mt-md { margin-top: var(--ds-space-md, 16px); }
.lc-mb-sm { margin-bottom: var(--ds-space-sm, 8px); }
.lc-mb-md { margin-bottom: var(--ds-space-md, 16px); }
.lc-mb-lg { margin-bottom: var(--ds-space-lg, 24px); }
.lc-ml-sm { margin-left: var(--ds-space-sm, 8px); }
.lc-mr-sm { margin-right: var(--ds-space-sm, 8px); }
.lc-p-sm { padding: var(--ds-space-sm, 8px); }
.lc-p-md { padding: var(--ds-space-md, 16px); }
.lc-p-xs-sm { padding: var(--ds-space-xs, 4px) var(--ds-space-sm, 8px); }
.lc-w-full { width: 100%; }
.lc-cursor-pointer { cursor: pointer; }
.lc-gap-sm { gap: var(--ds-space-sm, 8px); }
.lc-gap-md { gap: var(--ds-space-md, 16px); }

/* ============================================================
 * Component Library (Macro-backed)
 * ============================================================
 * These styles power the Jinja2 macro components in _components/macros.html
 * ============================================================ */

/* ---- ds-card ---- */
.ds-card {
  background: var(--ds-bg-card, var(--ds-neutral-0, #ffffff));
  border: 1px solid var(--ds-border-color, var(--ds-neutral-200, #e5e7eb));
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--ds-transition-fast);
}
.ds-card:hover {
  box-shadow: var(--ds-shadow-md);
}
.ds-card--default { }
.ds-card--hoverable { cursor: pointer; }
.ds-card--primary {
  border-color: var(--ds-primary-200);
  background: linear-gradient(135deg, var(--ds-primary-50), var(--ds-neutral-0));
}
.ds-card__header {
  display: flex;
  align-items: center;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-border-color, var(--ds-neutral-100, #f3f4f6));
}
.ds-card__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  background: var(--ds-primary-50);
  color: var(--ds-primary-500);
  font-size: var(--ds-text-base);
}
.ds-card__titles { flex: 1; min-width: 0; }
.ds-card__title {
  margin: 0;
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary, var(--ds-neutral-800));
  line-height: 1.4;
}
.ds-card__subtitle {
  margin: 2px 0 0;
  font-size: var(--ds-text-xs);
  color: var(--ds-text-secondary, var(--ds-neutral-500));
}
.ds-card__body {
  padding: var(--ds-space-lg);
}

/* ---- ds-button ---- */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-xs);
  padding: 0 var(--ds-space-md);
  height: 36px;
  border: 1px solid transparent;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-sm);
  font-weight: var(--ds-font-medium);
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--ds-transition-fast);
  white-space: nowrap;
  user-select: none;
}
.ds-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--ds-primary-100); }
.ds-btn--sm { height: 28px; padding: 0 var(--ds-space-sm); font-size: var(--ds-text-xs); }
.ds-btn--md { height: 36px; }
.ds-btn--lg { height: 44px; padding: 0 var(--ds-space-lg); font-size: var(--ds-text-base); }
.ds-btn__icon { font-size: 1em; }
.ds-btn__icon--right { margin-left: 2px; }

.ds-btn--primary {
  background: var(--ds-primary-500);
  color: var(--ds-text-inverse, #fff);
  border-color: var(--ds-primary-500);
}
.ds-btn--primary:hover { background: var(--ds-primary-600); border-color: var(--ds-primary-600); }
.ds-btn--primary:active { background: var(--ds-primary-700); }

.ds-btn--secondary {
  background: var(--ds-neutral-0, #fff);
  color: var(--ds-text-primary, var(--ds-neutral-700));
  border-color: var(--ds-neutral-300, #d1d5db);
}
.ds-btn--secondary:hover { background: var(--ds-neutral-50, #f9fafb); border-color: var(--ds-neutral-400); }

.ds-btn--success {
  background: var(--ds-success-500);
  color: var(--ds-text-inverse, #fff);
  border-color: var(--ds-success-500);
}
.ds-btn--success:hover { background: var(--ds-success-600); }

.ds-btn--warning {
  background: var(--ds-warning-500);
  color: var(--ds-text-inverse, #fff);
  border-color: var(--ds-warning-500);
}
.ds-btn--warning:hover { background: var(--ds-warning-600); }

.ds-btn--danger {
  background: var(--ds-danger-500);
  color: var(--ds-text-inverse, #fff);
  border-color: var(--ds-danger-500);
}
.ds-btn--danger:hover { background: var(--ds-danger-600); }

.ds-btn--ghost {
  background: transparent;
  color: var(--ds-primary-500);
  border-color: transparent;
}
.ds-btn--ghost:hover { background: var(--ds-primary-50); }

.ds-btn--disabled, .ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- ds-badge ---- */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--ds-radius-full);
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  line-height: 1.5;
  white-space: nowrap;
}
.ds-badge--sm { padding: 1px 6px; font-size: 11px; }
.ds-badge--md { padding: 3px 10px; font-size: var(--ds-text-sm); }
.ds-badge__icon { font-size: 0.9em; }

.ds-badge--default {
  background: var(--ds-neutral-100, #f3f4f6);
  color: var(--ds-neutral-600, #4b5563);
}
.ds-badge--primary {
  background: var(--ds-primary-50);
  color: var(--ds-primary-600);
}
.ds-badge--success {
  background: var(--ds-success-50);
  color: var(--ds-success-600);
}
.ds-badge--warning {
  background: var(--ds-warning-50);
  color: var(--ds-warning-600);
}
.ds-badge--danger {
  background: var(--ds-danger-50);
  color: var(--ds-danger-600);
}
.ds-badge--info {
  background: var(--ds-info-50);
  color: var(--ds-info-600);
}
.ds-badge--accent {
  background: var(--ds-accent-50);
  color: var(--ds-accent-600);
}

/* ---- ds-alert ---- */
.ds-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-space-sm);
  padding: var(--ds-space-md);
  border-radius: var(--ds-radius-md);
  border: 1px solid transparent;
}
.ds-alert__icon {
  flex-shrink: 0;
  font-size: var(--ds-text-lg);
  margin-top: 1px;
}
.ds-alert__message {
  flex: 1;
  font-size: var(--ds-text-sm);
  line-height: 1.5;
}
.ds-alert__close {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  padding: 2px;
  color: inherit;
}
.ds-alert__close:hover { opacity: 1; }

.ds-alert--info {
  background: var(--ds-info-50);
  border-color: var(--ds-info-200);
  color: var(--ds-info-700);
}
.ds-alert--success {
  background: var(--ds-success-50);
  border-color: var(--ds-success-200);
  color: var(--ds-success-700);
}
.ds-alert--warning {
  background: var(--ds-warning-50);
  border-color: var(--ds-warning-200);
  color: var(--ds-warning-700);
}
.ds-alert--danger {
  background: var(--ds-danger-50);
  border-color: var(--ds-danger-200);
  color: var(--ds-danger-700);
}

/* ---- ds-stat-card ---- */
.ds-stat-card {
  display: flex;
  align-items: center;
  gap: var(--ds-space-md);
  padding: var(--ds-space-md) var(--ds-space-lg);
  background: var(--ds-bg-card, var(--ds-neutral-0));
  border: 1px solid var(--ds-border-color, var(--ds-neutral-200));
  border-radius: var(--ds-radius-lg);
  transition: all var(--ds-transition-fast);
}
.ds-stat-card:hover {
  box-shadow: var(--ds-shadow-md);
  transform: translateY(-1px);
}
.ds-stat-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-md);
  font-size: var(--ds-text-xl);
  background: var(--ds-primary-50);
  color: var(--ds-primary-500);
}
.ds-stat-card--primary .ds-stat-card__icon { background: var(--ds-primary-50); color: var(--ds-primary-500); }
.ds-stat-card--success .ds-stat-card__icon { background: var(--ds-success-50); color: var(--ds-success-500); }
.ds-stat-card--warning .ds-stat-card__icon { background: var(--ds-warning-50); color: var(--ds-warning-500); }
.ds-stat-card--danger .ds-stat-card__icon { background: var(--ds-danger-50); color: var(--ds-danger-500); }
.ds-stat-card--info .ds-stat-card__icon { background: var(--ds-info-50); color: var(--ds-info-500); }
.ds-stat-card--accent .ds-stat-card__icon { background: var(--ds-accent-50); color: var(--ds-accent-500); }

.ds-stat-card__body { flex: 1; min-width: 0; }
.ds-stat-card__value {
  font-size: var(--ds-text-xl);
  font-weight: var(--ds-font-bold);
  color: var(--ds-text-primary, var(--ds-neutral-800));
  line-height: 1.2;
}
.ds-stat-card__label {
  font-size: var(--ds-text-xs);
  color: var(--ds-text-secondary, var(--ds-neutral-500));
  margin-top: 2px;
}
.ds-stat-card__trend {
  font-size: var(--ds-text-xs);
  font-weight: var(--ds-font-medium);
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.ds-stat-card__trend--up { color: var(--ds-success-500); }
.ds-stat-card__trend--down { color: var(--ds-danger-500); }
.ds-stat-card__subtitle {
  font-size: 11px;
  color: var(--ds-text-muted, var(--ds-neutral-400));
  margin-top: 2px;
}

/* ---- ds-empty ---- */
.ds-empty {
  text-align: center;
  padding: var(--ds-space-2xl) var(--ds-space-lg);
  color: var(--ds-text-secondary, var(--ds-neutral-500));
}
.ds-empty__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--ds-space-md);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ds-neutral-100);
  font-size: 28px;
  color: var(--ds-neutral-400);
}
.ds-empty__title {
  margin: 0 0 var(--ds-space-xs);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary, var(--ds-neutral-700));
}
.ds-empty__description {
  margin: 0 0 var(--ds-space-md);
  font-size: var(--ds-text-sm);
}
.ds-empty__action { margin-top: var(--ds-space-sm); }

/* ---- ds-modal ---- */
.ds-modal {
  position: fixed;
  inset: 0;
  z-index: var(--ds-z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--ds-space-md);
}
.ds-modal__dialog {
  background: var(--ds-bg-card, var(--ds-neutral-0));
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-xl);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.ds-modal--sm .ds-modal__dialog { max-width: 400px; }
.ds-modal--md .ds-modal__dialog { max-width: 560px; }
.ds-modal--lg .ds-modal__dialog { max-width: 800px; }
.ds-modal--xl .ds-modal__dialog { max-width: 1000px; }

.ds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-bottom: 1px solid var(--ds-border-color, var(--ds-neutral-200));
}
.ds-modal__title {
  margin: 0;
  font-size: var(--ds-text-base);
  font-weight: var(--ds-font-semibold);
  color: var(--ds-text-primary, var(--ds-neutral-800));
}
.ds-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--ds-text-muted, var(--ds-neutral-400));
  border-radius: var(--ds-radius-sm);
}
.ds-modal__close:hover {
  background: var(--ds-neutral-100);
  color: var(--ds-text-primary);
}
.ds-modal__body {
  padding: var(--ds-space-lg);
  overflow-y: auto;
  flex: 1;
}
.ds-modal__footer {
  padding: var(--ds-space-md) var(--ds-space-lg);
  border-top: 1px solid var(--ds-border-color, var(--ds-neutral-200));
  display: flex;
  justify-content: flex-end;
  gap: var(--ds-space-sm);
}

/* ============================================================
 * 标准化页面宽度系统 (2026-09-13)
 * 3档标准宽度，所有页面统一使用
 * 窄页面(表单/登录): lc-page-narrow 680px
 * 标准页面(列表/详情): lc-page-standard 1200px  
 * 宽页面(学习/后台): lc-page-wide 1400px
 * ============================================================ */
.lc-page-narrow { max-width: 680px; margin-left: auto; margin-right: auto; }
.lc-page-standard { max-width: 1200px; margin-left: auto; margin-right: auto; }
.lc-page-wide { max-width: 1400px; margin-left: auto; margin-right: auto; }

/* 桌面端 padding 标准 */
@media (min-width: 769px) {
  .lc-page-narrow, .lc-page-standard, .lc-page-wide {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================================
 * 标准化颜色别名 (2026-09-13)
 * 统一直接颜色名为 Design Token
 * ============================================================ */
.text-accent { color: var(--ds-accent-500) !important; }
.bg-accent { background-color: var(--ds-accent-500) !important; }
.bg-primary { background-color: var(--ds-primary-500) !important; }
.bg-success { background-color: var(--ds-success-500) !important; }
.bg-warning { background-color: var(--ds-warning-500) !important; }
.bg-danger { background-color: var(--ds-danger-500) !important; }
.bg-info { background-color: var(--ds-info-500) !important; }

/* 兼容旧颜色名 → 映射到标准 Token */
.text-indigo { color: var(--ds-primary-500) !important; }
.text-purple { color: var(--ds-accent-500) !important; }
.text-pink { color: var(--ds-accent-500) !important; }
.text-cyan { color: var(--ds-primary-400) !important; }
.text-green-2, .text-green-3 { color: var(--ds-success-500) !important; }
.bg-indigo { background-color: var(--ds-primary-500) !important; }
.bg-purple { background-color: var(--ds-accent-500) !important; }
.bg-pink { background-color: var(--ds-accent-500) !important; }
.bg-amber { background-color: var(--ds-warning-500) !important; }
.bg-cyan { background-color: var(--ds-primary-400) !important; }
.bg-teal { background-color: var(--ds-success-500) !important; }

/* ============================================================
 * Legacy Variable Compatibility Layer (merged from design-system.css)
 * Maps all legacy CSS variable names to new --ds-* design tokens.
 * ============================================================ */
:root {
    /* Primary */
    --primary-color: var(--ds-primary-500);
    --primary: var(--ds-primary-500);
    --primary-light: var(--ds-primary-100);
    --primary-lighter: var(--ds-primary-50);
    --primary-dark: var(--ds-primary-700);
    --primary-darker: var(--ds-primary-900);
    --color-primary: var(--ds-primary-500);

    /* Secondary / Accent */
    --secondary-color: var(--ds-accent-500);
    --secondary: var(--ds-accent-500);
    --accent-color: var(--ds-accent-500);

    /* Success / Warning / Danger / Info */
    --success-color: var(--ds-success-500);
    --success: var(--ds-success-500);
    --color-success: var(--ds-success-500);
    --warning-color: var(--ds-warning-500);
    --warning: var(--ds-warning-500);
    --color-warning: var(--ds-warning-500);
    --danger-color: var(--ds-danger-500);
    --danger: var(--ds-danger-500);
    --color-danger: var(--ds-danger-500);
    --info-color: var(--ds-info-500);
    --info: var(--ds-info-500);
    --color-info: var(--ds-info-500);

    /* Highlight */
    --highlight-color: var(--ds-highlight-500);
    --highlight: var(--ds-highlight-500);

    /* Neutral / Gray */
    --gray-color: var(--ds-neutral-500);
    --gray: var(--ds-neutral-500);
    --light-gray: var(--ds-neutral-300);
    --dark-gray: var(--ds-neutral-700);
    --text-color: var(--ds-neutral-700);
    --text-muted: var(--ds-neutral-400);
    --text-light: var(--ds-neutral-300);
    --text-secondary: var(--ds-neutral-500);
    --heading-color: var(--ds-neutral-900);

    /* Background */
    --bg-color: var(--ds-neutral-50);
    --bg: var(--ds-neutral-50);
    --background-color: var(--ds-neutral-50);
    --body-bg: var(--ds-neutral-50);

    /* Card / Navbar / Border */
    --card-bg: var(--ds-neutral-0);
    --card-background: var(--ds-neutral-0);
    --navbar-bg: var(--ds-neutral-0);
    --border-color: var(--ds-neutral-200);
    --border-light: var(--ds-neutral-100);
    --input-border: var(--ds-neutral-300);

    /* Lianchuangquan (lc-) variables */
    --lc-primary: var(--ds-primary-500);
    --lc-primary-light: var(--ds-primary-100);
    --lc-primary-lighter: var(--ds-primary-50);
    --lc-primary-dark: var(--ds-primary-700);
    --lc-primary-darker: var(--ds-primary-900);
    --lc-secondary: var(--ds-accent-500);
    --lc-amber: var(--ds-warning-500);
    --lc-amber-light: var(--ds-warning-100);
    --lc-green: var(--ds-success-500);
    --lc-green-light: var(--ds-success-100);
    --lc-pink: var(--ds-highlight-500);
    --lc-red: var(--ds-danger-500);
    --lc-purple: var(--ds-accent-500);
    --lc-bg: var(--ds-neutral-50);
    --lc-card-bg: var(--ds-neutral-0);
    --lc-text: var(--ds-neutral-700);
    --lc-text-muted: var(--ds-neutral-400);
    --lc-border: var(--ds-neutral-200);
    --lc-bg-card: var(--ds-neutral-0);
    --lc-bg-secondary: var(--ds-neutral-100);
    --lc-bg-surface: var(--ds-neutral-0);
    --lc-bg-hover: var(--ds-neutral-100);
    --lc-bg-page: var(--ds-neutral-50);
    --lc-border-light: var(--ds-neutral-100);
    --lc-cyan: var(--ds-info-500);
    --lc-purple-light: var(--ds-accent-100);
    --lc-green-light: var(--ds-success-100);
    --lc-amber-light: var(--ds-warning-100);
    --lc-pink-light: var(--ds-highlight-100);
    --lc-red-light: var(--ds-danger-100);
    --lc-font-normal: var(--ds-font-regular);
    --lc-font-medium: var(--ds-font-medium);
    --lc-font-semibold: var(--ds-font-semibold);
    --lc-font-bold: var(--ds-font-bold);
    --lc-font-extrabold: 800;
    --lc-leading-tight: var(--ds-line-height-tight);
    --lc-leading-normal: var(--ds-line-height-normal);
    --lc-radius-xs: var(--ds-radius-xs);
    --lc-radius-sm: var(--ds-radius-sm);
    --lc-radius-md: var(--ds-radius-md);
    --lc-radius-lg: var(--ds-radius-lg);
    --lc-radius-full: var(--ds-radius-full);
    --lc-shadow-xs: var(--ds-shadow-xs);
    --lc-shadow-sm: var(--ds-shadow-sm);
    --lc-shadow-md: var(--ds-shadow-md);
    --lc-shadow-lg: var(--ds-shadow-lg);
    --lc-space-xs: var(--ds-space-xs);
    --lc-space-sm: var(--ds-space-sm);
    --lc-space-md: var(--ds-space-md);
    --lc-space-lg: var(--ds-space-lg);
    --lc-text-xs: var(--ds-text-xs);
    --lc-text-sm: var(--ds-text-sm);
    --lc-text-base: var(--ds-text-base);
    --lc-text-lg: var(--ds-text-lg);
    --lc-text-xl: var(--ds-text-xl);
    --lc-text-primary: var(--ds-text-primary);
    --lc-text-secondary: var(--ds-text-secondary);
    --lc-text-muted: var(--ds-text-muted);
    --lc-transition-fast: all 0.15s ease;
    --lc-z-overlay: 1000;
    --lc-z-toast: 9999;

    /* Mobile (m-) variables */
    --m-primary: var(--ds-primary-500);
    --m-primary-light: var(--ds-primary-300);
    --m-secondary: var(--ds-accent-500);
    --m-success: var(--ds-success-500);
    --m-warning: var(--ds-warning-500);
    --m-danger: var(--ds-danger-500);
    --m-text: var(--ds-neutral-700);
    --m-text-secondary: var(--ds-neutral-500);
    --m-bg: var(--ds-neutral-50);
    --m-card-bg: var(--ds-neutral-0);
    --m-border: var(--ds-neutral-200);
    --m-card-radius: var(--ds-radius-lg);
    --m-gap-sm: var(--ds-space-sm);
    --m-gap-md: var(--ds-space-md);
    --m-gap-lg: var(--ds-space-lg);
    --m-gap-xs: var(--ds-space-xs);
    --m-touch-min: 44px;
    --m-topbar-height: 52px;
    --m-tab-height: 56px;
    --m-tab-safe-bottom: env(safe-area-inset-bottom, 0px);
    --m-tabbar-bg: var(--ds-neutral-0);
    --m-topbar-bg: var(--ds-neutral-0);

    /* Admin (am-) variables */
    --am-primary: var(--ds-primary-500);
    --am-success: var(--ds-success-500);
    --am-warning: var(--ds-warning-500);
    --am-danger: var(--ds-danger-500);
    --am-bg: var(--ds-neutral-50);
    --am-card-bg: var(--ds-neutral-0);
    --am-border: var(--ds-neutral-200);
    --am-text: var(--ds-neutral-700);
    --am-radius: var(--ds-radius-md);
    --am-safe-bottom: env(safe-area-inset-bottom, 0px);
    --am-safe-top: env(safe-area-inset-top, 0px);
    --am-topbar-h: 52px;
    --am-touch: 44px;

    /* Legacy font/spacing aliases */
    --font-size-xs: var(--ds-text-xs);
    --font-size-sm: var(--ds-text-sm);
    --font-size-base: var(--ds-text-base);
    --font-size-lg: var(--ds-text-lg);
    --font-size-xl: var(--ds-text-xl);
    --font-size-2xl: var(--ds-text-2xl);
    --font-normal: var(--ds-font-regular);
    --font-medium: var(--ds-font-medium);
    --font-semibold: var(--ds-font-semibold);
    --font-bold: var(--ds-font-bold);
    --leading-tight: var(--ds-line-height-tight);
    --leading-normal: var(--ds-line-height-normal);
    --leading-relaxed: var(--ds-line-height-relaxed);
    --radius-sm: var(--ds-radius-sm);
    --radius-md: var(--ds-radius-md);
    --radius-lg: var(--ds-radius-lg);
    --shadow-sm: var(--ds-shadow-sm);
    --shadow-md: var(--ds-shadow-md);
    --shadow-lg: var(--ds-shadow-lg);

    /* ACE editor / code component */
    --ace-accent: var(--ds-accent-500);
    --ace-bg: var(--ds-neutral-900);
    --ace-green: var(--ds-success-500);
    --ace-ink: var(--ds-neutral-100);
    --ace-muted: var(--ds-neutral-500);
    --ace-red: var(--ds-danger-500);
    --ace-rule: var(--ds-neutral-700);
    --ace-accent2: var(--ds-accent-300);
    --ace-accent3: var(--ds-accent-100);
    --ace-bg2: var(--ds-neutral-800);
    --ace-bg3: var(--ds-neutral-700);

    /* Badge */
    --badge-bg: var(--ds-primary-100);
    --badge-color: var(--ds-primary-700);

    /* Extended color aliases */
    --color-amber: var(--ds-warning-500);
    --color-bg-card: var(--ds-neutral-0);
    --color-bg-page: var(--ds-neutral-50);
    --color-bg-secondary: var(--ds-neutral-100);
    --color-border: var(--ds-neutral-200);
    --color-green: var(--ds-success-500);
    --color-pink: var(--ds-highlight-500);
    --color-primary-dark: var(--ds-primary-700);
    --color-primary-light: var(--ds-primary-100);
    --color-purple: var(--ds-accent-500);
    --color-surface: var(--ds-neutral-0);
    --color-text-muted: var(--ds-neutral-400);
    --color-text-primary: var(--ds-neutral-700);
    --color-text-secondary: var(--ds-neutral-500);
    --dark-color: var(--ds-neutral-900);
    --health: var(--ds-success-500);
    --lvp: var(--ds-primary-500);
    --mkt-nav-hover: var(--ds-primary-50);
    --module-color: var(--ds-primary-500);

    /* Persona editor (pe-) */
    --pe-accent: var(--ds-accent-500);
    --pe-amber: var(--ds-warning-500);
    --pe-bg: var(--ds-neutral-50);
    --pe-cyan: var(--ds-info-500);
    --pe-green: var(--ds-success-500);
    --pe-ink: var(--ds-neutral-900);
    --pe-muted: var(--ds-neutral-400);
    --pe-orange: #ea580c;
    --pe-pink: var(--ds-highlight-500);
    --pe-red: var(--ds-danger-500);
    --pe-rule: var(--ds-neutral-200);
    --pe-accent2: var(--ds-accent-300);
    --pe-accent3: var(--ds-accent-100);
    --pe-bg2: var(--ds-neutral-100);
    --pe-bg3: var(--ds-neutral-200);

    /* Generic aliases */
    --radius: var(--ds-radius-md);
    --shadow: var(--ds-shadow-md);
    --space-lg: var(--ds-space-lg);
    --space-md: var(--ds-space-md);
    --space-sm: var(--ds-space-sm);
    --space-xs: var(--ds-space-xs);
    --transition: all 0.2s ease;

    /* Writing module */
    --wm-card-color: var(--ds-neutral-700);
    --wm-card-color-light: var(--ds-neutral-500);
    --wm-card-color-lighter: var(--ds-neutral-300);
}

/* Dark theme compatibility */
[data-theme="dark"] {
    --primary-color: var(--ds-primary-500);
    --secondary-color: var(--ds-accent-500);
    --success-color: var(--ds-success-500);
    --warning-color: var(--ds-warning-500);
    --danger-color: var(--ds-danger-500);
    --info-color: var(--ds-info-500);
    --bg-color: var(--ds-neutral-900);
    --bg: var(--ds-neutral-900);
    --background-color: var(--ds-neutral-900);
    --body-bg: var(--ds-neutral-900);
    --card-bg: var(--ds-neutral-800);
    --card-background: var(--ds-neutral-800);
    --navbar-bg: var(--ds-neutral-900);
    --border-color: var(--ds-neutral-700);
    --border-light: var(--ds-neutral-800);
    --input-border: var(--ds-neutral-600);
    --text-color: var(--ds-neutral-50);
    --text-muted: var(--ds-neutral-400);
    --text-light: var(--ds-neutral-500);
    --text-secondary: var(--ds-neutral-300);
    --heading-color: var(--ds-neutral-50);
    --gray-color: var(--ds-neutral-400);
    --light-gray: var(--ds-neutral-600);
    --dark-gray: var(--ds-neutral-300);

    --m-primary: var(--ds-primary-500);
    --m-text: var(--ds-neutral-50);
    --m-text-secondary: var(--ds-neutral-400);
    --m-bg: var(--ds-neutral-900);
    --m-card-bg: var(--ds-neutral-800);
    --m-border: var(--ds-neutral-700);
    --m-tabbar-bg: var(--ds-neutral-900);
    --m-topbar-bg: var(--ds-neutral-900);

    --lc-bg: var(--ds-neutral-900);
    --lc-card-bg: var(--ds-neutral-800);
    --lc-text: var(--ds-neutral-50);
    --lc-text-muted: var(--ds-neutral-400);
    --lc-border: var(--ds-neutral-700);
    --lc-bg-card: var(--ds-neutral-800);
    --lc-bg-secondary: var(--ds-neutral-700);
    --lc-bg-surface: var(--ds-neutral-800);
    --lc-bg-hover: var(--ds-neutral-700);
    --lc-bg-page: var(--ds-neutral-900);
    --lc-border-light: var(--ds-neutral-800);

    --am-bg: var(--ds-neutral-900);
    --am-card-bg: var(--ds-neutral-800);
    --am-text: var(--ds-neutral-50);
    --am-border: var(--ds-neutral-700);

    --ace-bg: var(--ds-neutral-900);
    --ace-ink: var(--ds-neutral-100);
    --ace-muted: var(--ds-neutral-500);
    --ace-rule: var(--ds-neutral-700);
    --ace-bg2: var(--ds-neutral-700);
    --ace-bg3: var(--ds-neutral-600);

    --badge-bg: var(--ds-primary-900);
    --badge-color: var(--ds-primary-200);

    --color-bg-card: var(--ds-neutral-800);
    --color-bg-page: var(--ds-neutral-900);
    --color-bg-secondary: var(--ds-neutral-800);
    --color-border: var(--ds-neutral-700);
    --color-surface: var(--ds-neutral-800);
    --color-text-muted: var(--ds-neutral-400);
    --color-text-primary: var(--ds-neutral-50);
    --color-text-secondary: var(--ds-neutral-300);
    --dark-color: var(--ds-neutral-50);

    --mkt-nav-hover: var(--ds-neutral-800);

    --pe-bg: var(--ds-neutral-900);
    --pe-ink: var(--ds-neutral-50);
    --pe-muted: var(--ds-neutral-400);
    --pe-rule: var(--ds-neutral-700);
    --pe-bg2: var(--ds-neutral-700);
    --pe-bg3: var(--ds-neutral-600);

    --wm-card-color: var(--ds-neutral-50);
    --wm-card-color-light: var(--ds-neutral-300);
    --wm-card-color-lighter: var(--ds-neutral-500);
}


/* ============================================================
 * Design System Extension v1.0 (2026-09-16)
 * 新增标准组件：徽章、标签、提示框、面包屑、空状态、加载、分割线
 * 全部基于设计令牌 (--ds-*)，支持暗色模式
 * ============================================================ */

/* ============================================================
 * 1. 徽章 Badge (.ds-badge)
 *    变体: primary / success / warning / danger / info / neutral
 *    尺寸: sm / md (默认)
 * ============================================================ */
.ds-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    font-size: var(--ds-text-xs);
    font-weight: var(--ds-font-medium);
    line-height: 1.5;
    border-radius: var(--ds-radius-full);
    white-space: nowrap;
    vertical-align: middle;
    transition: var(--ds-transition-fast);
}

.ds-badge-primary {
    background: var(--ds-primary-100);
    color: var(--ds-primary-700);
}
.ds-badge-success {
    background: var(--ds-success-100);
    color: var(--ds-success-700);
}
.ds-badge-warning {
    background: var(--ds-warning-100);
    color: var(--ds-warning-700);
}
.ds-badge-danger {
    background: var(--ds-danger-100);
    color: var(--ds-danger-700);
}
.ds-badge-info {
    background: var(--ds-info-100);
    color: var(--ds-info-700);
}
.ds-badge-neutral {
    background: var(--ds-neutral-100);
    color: var(--ds-neutral-600);
}
.ds-badge-accent {
    background: var(--ds-accent-100);
    color: var(--ds-accent-700);
}
.ds-badge-highlight {
    background: var(--ds-highlight-100);
    color: var(--ds-highlight-700);
}

/* 实心徽章 */
.ds-badge-solid {
    color: var(--ds-neutral-0);
}
.ds-badge-solid.ds-badge-primary { background: var(--ds-primary-500); }
.ds-badge-solid.ds-badge-success { background: var(--ds-success-500); }
.ds-badge-solid.ds-badge-warning { background: var(--ds-warning-500); }
.ds-badge-solid.ds-badge-danger { background: var(--ds-danger-500); }
.ds-badge-solid.ds-badge-info { background: var(--ds-info-500); }
.ds-badge-solid.ds-badge-neutral { background: var(--ds-neutral-500); }

/* 小尺寸 */
.ds-badge-sm {
    padding: 1px 6px;
    font-size: 11px;
}

/* ============================================================
 * 2. 标签 Tag (.ds-tag)
 *    变体: 与徽章相同
 *    带关闭按钮: .ds-tag-closeable
 * ============================================================ */
.ds-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: var(--ds-text-sm);
    line-height: 1.4;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-sm);
    background: var(--ds-neutral-0);
    color: var(--ds-text-secondary);
    transition: var(--ds-transition-fast);
    cursor: default;
}
.ds-tag:hover {
    border-color: var(--ds-border-hover);
    background: var(--ds-bg-hover);
}

.ds-tag-primary {
    background: var(--ds-primary-50);
    border-color: var(--ds-primary-200);
    color: var(--ds-primary-700);
}
.ds-tag-success {
    background: var(--ds-success-50);
    border-color: var(--ds-success-200);
    color: var(--ds-success-700);
}
.ds-tag-warning {
    background: var(--ds-warning-50);
    border-color: var(--ds-warning-200);
    color: var(--ds-warning-700);
}
.ds-tag-danger {
    background: var(--ds-danger-50);
    border-color: var(--ds-danger-200);
    color: var(--ds-danger-700);
}
.ds-tag-info {
    background: var(--ds-info-50);
    border-color: var(--ds-info-200);
    color: var(--ds-info-700);
}
.ds-tag-accent {
    background: var(--ds-accent-50);
    border-color: var(--ds-accent-200);
    color: var(--ds-accent-700);
}

.ds-tag-closeable .ds-tag-close {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--ds-transition-fast);
}
.ds-tag-closeable .ds-tag-close:hover {
    opacity: 1;
}

/* ============================================================
 * 3. 提示框 Alert (.ds-alert)
 *    变体: info / success / warning / error
 * ============================================================ */
.ds-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--ds-space-sm);
    padding: var(--ds-space-md) var(--ds-space-md);
    border-radius: var(--ds-radius-md);
    border: 1px solid;
    font-size: var(--ds-text-sm);
    line-height: var(--ds-line-height-normal);
    margin-bottom: var(--ds-space-md);
}
.ds-alert-icon {
    flex-shrink: 0;
    font-size: 18px;
    line-height: 1.4;
}
.ds-alert-content {
    flex: 1;
}
.ds-alert-title {
    font-weight: var(--ds-font-semibold);
    margin-bottom: 2px;
}

.ds-alert-info {
    background: var(--ds-info-50);
    border-color: var(--ds-info-200);
    color: var(--ds-info-800);
}
.ds-alert-info .ds-alert-icon { color: var(--ds-info-500); }

.ds-alert-success {
    background: var(--ds-success-50);
    border-color: var(--ds-success-200);
    color: var(--ds-success-800);
}
.ds-alert-success .ds-alert-icon { color: var(--ds-success-500); }

.ds-alert-warning {
    background: var(--ds-warning-50);
    border-color: var(--ds-warning-200);
    color: var(--ds-warning-800);
}
.ds-alert-warning .ds-alert-icon { color: var(--ds-warning-500); }

.ds-alert-error {
    background: var(--ds-danger-50);
    border-color: var(--ds-danger-200);
    color: var(--ds-danger-800);
}
.ds-alert-error .ds-alert-icon { color: var(--ds-danger-500); }

/* ============================================================
 * 4. 面包屑 Breadcrumb (.ds-breadcrumb)
 * ============================================================ */
.ds-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ds-space-xs);
    font-size: var(--ds-text-sm);
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-md);
}
.ds-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-xs);
}
.ds-breadcrumb-item a {
    color: var(--ds-text-muted);
    text-decoration: none;
    transition: color var(--ds-transition-fast);
}
.ds-breadcrumb-item a:hover {
    color: var(--ds-text-link-hover);
}
.ds-breadcrumb-item.ds-breadcrumb-current {
    color: var(--ds-text-primary);
    font-weight: var(--ds-font-medium);
}
.ds-breadcrumb-separator {
    color: var(--ds-neutral-300);
    user-select: none;
}

/* ============================================================
 * 5. 空状态 Empty (.ds-empty)
 * ============================================================ */
.ds-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--ds-space-xl) var(--ds-space-lg);
    text-align: center;
    color: var(--ds-text-muted);
}
.ds-empty-icon {
    font-size: 48px;
    margin-bottom: var(--ds-space-md);
    opacity: 0.3;
}
.ds-empty-title {
    font-size: var(--ds-text-base);
    color: var(--ds-text-secondary);
    margin-bottom: var(--ds-space-xs);
}
.ds-empty-desc {
    font-size: var(--ds-text-sm);
    color: var(--ds-text-muted);
    margin-bottom: var(--ds-space-md);
}

/* ============================================================
 * 6. 加载状态 Loading (.ds-loading)
 * ============================================================ */
.ds-loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--ds-neutral-200);
    border-top-color: var(--ds-primary-500);
    border-radius: 50%;
    animation: ds-spin 0.8s linear infinite;
}
.ds-loading-sm { width: 14px; height: 14px; border-width: 2px; }
.ds-loading-lg { width: 32px; height: 32px; border-width: 3px; }

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

/* 加载遮罩 */
.ds-loading-mask {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(2px);
    z-index: var(--ds-z-overlay);
    border-radius: inherit;
}

/* ============================================================
 * 7. 分割线 Divider (.ds-divider)
 * ============================================================ */
.ds-divider {
    height: 1px;
    background: var(--ds-border);
    margin: var(--ds-space-md) 0;
    border: none;
}
.ds-divider-vertical {
    width: 1px;
    height: auto;
    min-height: 1em;
    margin: 0 var(--ds-space-sm);
    background: var(--ds-border);
}
.ds-divider-with-text {
    display: flex;
    align-items: center;
    gap: var(--ds-space-sm);
    color: var(--ds-text-muted);
    font-size: var(--ds-text-sm);
    white-space: nowrap;
}
.ds-divider-with-text::before,
.ds-divider-with-text::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--ds-border);
}

/* ============================================================
 * 8. 工具类 Utilities (间距、文字、布局)
 * ============================================================ */

/* 间距 */
.ds-m-0 { margin: 0 !important; }
.ds-mt-xs { margin-top: var(--ds-space-xs) !important; }
.ds-mt-sm { margin-top: var(--ds-space-sm) !important; }
.ds-mt-md { margin-top: var(--ds-space-md) !important; }
.ds-mt-lg { margin-top: var(--ds-space-lg) !important; }
.ds-mb-xs { margin-bottom: var(--ds-space-xs) !important; }
.ds-mb-sm { margin-bottom: var(--ds-space-sm) !important; }
.ds-mb-md { margin-bottom: var(--ds-space-md) !important; }
.ds-mb-lg { margin-bottom: var(--ds-space-lg) !important; }
.ds-ml-auto { margin-left: auto !important; }
.ds-mr-auto { margin-right: auto !important; }
.ds-mx-auto { margin-left: auto !important; margin-right: auto !important; }

.ds-p-0 { padding: 0 !important; }
.ds-pt-xs { padding-top: var(--ds-space-xs) !important; }
.ds-pt-sm { padding-top: var(--ds-space-sm) !important; }
.ds-pt-md { padding-top: var(--ds-space-md) !important; }
.ds-pb-xs { padding-bottom: var(--ds-space-xs) !important; }
.ds-pb-sm { padding-bottom: var(--ds-space-sm) !important; }
.ds-pb-md { padding-bottom: var(--ds-space-md) !important; }
.ds-px-sm { padding-left: var(--ds-space-sm) !important; padding-right: var(--ds-space-sm) !important; }
.ds-px-md { padding-left: var(--ds-space-md) !important; padding-right: var(--ds-space-md) !important; }
.ds-py-sm { padding-top: var(--ds-space-sm) !important; padding-bottom: var(--ds-space-sm) !important; }
.ds-py-md { padding-top: var(--ds-space-md) !important; padding-bottom: var(--ds-space-md) !important; }

/* 文字 */
.ds-text-primary { color: var(--ds-text-primary) !important; }
.ds-text-secondary { color: var(--ds-text-secondary) !important; }
.ds-text-muted { color: var(--ds-text-muted) !important; }
.ds-text-inverse { color: var(--ds-text-inverse) !important; }
.ds-text-success { color: var(--ds-success-500) !important; }
.ds-text-danger { color: var(--ds-danger-500) !important; }
.ds-text-warning { color: var(--ds-warning-500) !important; }
.ds-text-info { color: var(--ds-info-500) !important; }
.ds-text-primary-color { color: var(--ds-primary-500) !important; }

.ds-text-xs { font-size: var(--ds-text-xs) !important; }
.ds-text-sm { font-size: var(--ds-text-sm) !important; }
.ds-text-base { font-size: var(--ds-text-base) !important; }
.ds-text-lg { font-size: var(--ds-text-heading) !important; }
.ds-text-xl { font-size: var(--ds-text-title) !important; }
.ds-text-display { font-size: var(--ds-text-display) !important; }

.ds-font-normal { font-weight: var(--ds-font-normal) !important; }
.ds-font-medium { font-weight: var(--ds-font-medium) !important; }
.ds-font-semibold { font-weight: var(--ds-font-semibold) !important; }
.ds-font-bold { font-weight: var(--ds-font-bold) !important; }

.ds-text-left { text-align: left !important; }
.ds-text-center { text-align: center !important; }
.ds-text-right { text-align: right !important; }

.ds-truncate {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
.ds-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ds-line-clamp-3 {
    display: -webkit-box !important;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 布局 */
.ds-flex { display: flex !important; }
.ds-inline-flex { display: inline-flex !important; }
.ds-block { display: block !important; }
.ds-inline-block { display: inline-block !important; }
.ds-none { display: none !important; }

.ds-flex-col { flex-direction: column !important; }
.ds-flex-row { flex-direction: row !important; }
.ds-flex-wrap { flex-wrap: wrap !important; }

.ds-items-start { align-items: flex-start !important; }
.ds-items-center { align-items: center !important; }
.ds-items-end { align-items: flex-end !important; }

.ds-justify-start { justify-content: flex-start !important; }
.ds-justify-center { justify-content: center !important; }
.ds-justify-end { justify-content: flex-end !important; }
.ds-justify-between { justify-content: space-between !important; }
.ds-justify-around { justify-content: space-around !important; }

.ds-gap-xs { gap: var(--ds-space-xs) !important; }
.ds-gap-sm { gap: var(--ds-space-sm) !important; }
.ds-gap-md { gap: var(--ds-space-md) !important; }
.ds-gap-lg { gap: var(--ds-space-lg) !important; }

.ds-flex-1 { flex: 1 !important; }
.ds-shrink-0 { flex-shrink: 0 !important; }

.ds-w-full { width: 100% !important; }
.ds-h-full { height: 100% !important; }
.ds-min-h-0 { min-height: 0 !important; }

/* 位置 */
.ds-relative { position: relative !important; }
.ds-absolute { position: absolute !important; }
.ds-fixed { position: fixed !important; }
.ds-sticky { position: sticky !important; }

/* 其他 */
.ds-rounded { border-radius: var(--ds-radius-md) !important; }
.ds-rounded-lg { border-radius: var(--ds-radius-lg) !important; }
.ds-rounded-full { border-radius: var(--ds-radius-full) !important; }

.ds-shadow-sm { box-shadow: var(--ds-shadow-sm) !important; }
.ds-shadow-md { box-shadow: var(--ds-shadow-md) !important; }
.ds-shadow-lg { box-shadow: var(--ds-shadow-lg) !important; }

.ds-pointer-none { pointer-events: none !important; }
.ds-cursor-pointer { cursor: pointer !important; }
.ds-overflow-hidden { overflow: hidden !important; }

/* ============================================================
 * 9. 微交互动效
 * ============================================================ */

/* 悬浮上浮 */
.ds-hover-lift {
    transition: transform var(--ds-transition-normal), box-shadow var(--ds-transition-normal);
}
.ds-hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-shadow-md);
}

/* 悬浮缩放 */
.ds-hover-scale {
    transition: transform var(--ds-transition-normal);
}
.ds-hover-scale:hover {
    transform: scale(1.02);
}

/* 渐入 */
.ds-fade-in {
    animation: ds-fadeIn 0.3s ease-out;
}
@keyframes ds-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 上滑渐入 */
.ds-slide-up {
    animation: ds-slideUp 0.3s ease-out;
}
@keyframes ds-slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 脉冲（用于提示） */
.ds-pulse {
    animation: ds-pulse 2s infinite;
}
@keyframes ds-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
 * 10. 暗色模式适配 - 新增组件
 * ============================================================ */
@media (prefers-color-scheme: dark) {
    .ds-tag {
        background: var(--ds-neutral-800);
        border-color: var(--ds-neutral-700);
    }
    .ds-tag:hover {
        background: var(--ds-neutral-700);
    }
    
    .ds-tag-primary { background: var(--ds-primary-900); border-color: var(--ds-primary-700); color: var(--ds-primary-300); }
    .ds-tag-success { background: var(--ds-success-900); border-color: var(--ds-success-700); color: var(--ds-success-300); }
    .ds-tag-warning { background: var(--ds-warning-900); border-color: var(--ds-warning-700); color: var(--ds-warning-300); }
    .ds-tag-danger { background: var(--ds-danger-900); border-color: var(--ds-danger-700); color: var(--ds-danger-300); }
    .ds-tag-info { background: var(--ds-info-900); border-color: var(--ds-info-700); color: var(--ds-info-300); }
    .ds-tag-accent { background: var(--ds-accent-900); border-color: var(--ds-accent-700); color: var(--ds-accent-300); }
    
    .ds-badge-primary { background: var(--ds-primary-900); color: var(--ds-primary-300); }
    .ds-badge-success { background: var(--ds-success-900); color: var(--ds-success-300); }
    .ds-badge-warning { background: var(--ds-warning-900); color: var(--ds-warning-300); }
    .ds-badge-danger { background: var(--ds-danger-900); color: var(--ds-danger-300); }
    .ds-badge-info { background: var(--ds-info-900); color: var(--ds-info-300); }
    .ds-badge-neutral { background: var(--ds-neutral-700); color: var(--ds-neutral-200); }
    .ds-badge-accent { background: var(--ds-accent-900); color: var(--ds-accent-300); }
    .ds-badge-highlight { background: var(--ds-highlight-900); color: var(--ds-highlight-300); }
    
    .ds-alert-info { background: var(--ds-info-900); border-color: var(--ds-info-700); color: var(--ds-info-200); }
    .ds-alert-success { background: var(--ds-success-900); border-color: var(--ds-success-700); color: var(--ds-success-200); }
    .ds-alert-warning { background: var(--ds-warning-900); border-color: var(--ds-warning-700); color: var(--ds-warning-200); }
    .ds-alert-error { background: var(--ds-danger-900); border-color: var(--ds-danger-700); color: var(--ds-danger-200); }
    
    .ds-loading-mask {
        background: rgba(15, 23, 42, 0.8);
    }
}

/* ============================================================
 * End of Design System Extension
 * ============================================================ */
/* ============================================================
 * Accessibility (a11y) - WCAG 2.1 AA 基础改造
 * ============================================================ */

/* Skip to content link (键盘导航跳转) */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--ds-primary-500);
    color: var(--ds-neutral-0) !important;
    padding: var(--ds-space-sm) var(--ds-space-md);
    z-index: calc(var(--ds-z-tooltip) + 100);
    border-radius: 0 0 var(--ds-radius-md) 0;
    font-weight: var(--ds-font-medium);
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-to-content:focus {
    top: 0;
    outline: none;
}

/* 增强焦点可见性 (WCAG 2.4.7 Focus Visible) */
:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

/* 按钮焦点 */
.ds-btn:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--ds-primary-100);
}

/* 输入框焦点增强 */
.ds-input:focus-visible {
    outline: none;
    border-color: var(--ds-border-focus);
    box-shadow: 0 0 0 3px var(--ds-primary-100);
}

/* 链接焦点 */
a:focus-visible {
    outline: 2px solid var(--ds-primary-500);
    outline-offset: 2px;
    border-radius: var(--ds-radius-sm);
}

/* 减少动画偏好 (WCAG 2.3.3 Motion Animation) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .ds-hover-lift:hover,
    .ds-hover-scale:hover {
        transform: none !important;
    }
    
    .ds-fade-in,
    .ds-slide-up {
        animation: none !important;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: more) {
    :root {
        --ds-border: var(--ds-neutral-500);
        --ds-border-light: var(--ds-neutral-400);
        --ds-text-secondary: var(--ds-neutral-700);
        --ds-text-muted: var(--ds-neutral-600);
    }
    
    .ds-btn {
        border-width: 2px;
    }
    
    .ds-input {
        border-width: 2px;
    }
}

/* 屏幕阅读器专用文本 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* 文字选中样式 */
::selection {
    background: var(--ds-primary-200);
    color: var(--ds-neutral-900);
}

/* 滚动条样式（可选，不影响可访问性） */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--ds-neutral-100);
}
::-webkit-scrollbar-thumb {
    background: var(--ds-neutral-300);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--ds-neutral-400);
}