/**
 * 声壬配音平台 - 简约设计系统
 * 
 * 统一管理色彩、字体、间距、圆角、阴影等设计变量
 * 所有组件样式应优先使用这些变量，保持视觉一致性
 * 
 * 设计理念：LibTV 式中性分层 + 声壬青绿品牌；卡片靠细边与中性影，悬停才点睛。
 */

/* ========================================
   色彩系统 - 精简到最少
   ======================================== */

:root {
    --color-primary: #0d9488;
    --color-primary-hover: #0f766e;
    --color-primary-active: #115e59;
    --color-primary-light: #f0fdfa;
    --color-primary-muted: rgba(13, 148, 136, 0.07);
    
    --color-accent: #0284c7;
    --color-accent-hover: #0369a1;
    --color-accent-light: #f0f9ff;
    
    --gradient-primary: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    --gradient-accent: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
    --gradient-warm: linear-gradient(135deg, #b45309 0%, #b91c1c 100%);
    --gradient-subtle: linear-gradient(180deg, #fafafa 0%, #fcfcfc 50%, #ffffff 100%);
    
    --color-text-primary: #171717;
    --color-text-secondary: #525252;
    --color-text-tertiary: #737373;
    --color-text-disabled: #a3a3a3;
    
    --color-bg-page: #ffffff;
    --color-bg-base: #ffffff;
    --color-bg-gray: #f5f5f5;
    --color-bg-hover: #f0f0f0;
    --color-bg-elevated: #ffffff;
    
    --color-border: #ebebeb;
    --color-border-hover: #d4d4d4;
    --color-border-light: #f5f5f5;
    
    --card-surface-panel: transparent;
    --card-surface-panel-hover: transparent;
    /* 明亮模式：透明底 + 极细描边（与暗黑透明底对称） */
    --card-surface-outline: rgba(129, 140, 248, 0.45);
    --card-surface-outline-hover: #818cf8;
    /* 明亮模式：静止无阴影，悬停轻抬 */
    --card-shadow-rest: none;
    --card-shadow-hover-lift: 0 4px 14px rgba(15, 23, 42, 0.06);
    --card-hover-lift-y: -1px;
    --card-hover-duration: 0.2s;
    --card-hover-easing: cubic-bezier(0.25, 0.72, 0.38, 1);
    --card-player-bg: #eaeaec;
    --card-player-border: transparent;
    --card-player-radius: 10px;
    
    --card-border: var(--card-surface-outline);
    --card-border-hover: var(--card-surface-outline-hover);
    
    --color-success: #0d9488;
    --color-warning: #b45309;
    --color-error: #b91c1c;
    --color-info: #0284c7;
    
    /* ========================================
       字体系统 - 更清晰的层级
       ======================================== */
    
    --font-size-2xl: 24px;
    --font-size-xl: 20px;
    --font-size-lg: 15px;
    --font-size-md: 13px;
    --font-size-sm: 12px;
    --font-size-xs: 11px;
    --font-size-xxs: 10px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 600;

    /* 与 Master.css :root 一致；组件可统一用 var(--font-family-sans) */
    --font-family-sans: var(--font-sans);
    /* 仅局部组件需要「方圆」轴时再写；全站正文勿绑，见 Master.css 说明 */
    --font-vf-medium-square: "wght" 500, "BEVL" 1;
    
    --line-height-tight: 1.35;
    --line-height-normal: 1.55;
    --line-height-loose: 1.75;
    
    /* ========================================
       间距系统 - 8px基准
       ======================================== */
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 24px;
    --spacing-xxl: 32px;

    /* 布局：顶栏 / 页脚 / 内容与页脚间距（全站统一） */
    --nav-height: 60px;
    --footer-height: 44px;
    --content-footer-gap: 20px;
    
    /* ========================================
       圆角系统
       ======================================== */
    
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;
    
    /* ========================================
       阴影系统 - 专业分层
       ======================================== */
    
    --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-sm: 0 1px 4px rgba(28, 25, 23, 0.06), 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 14px rgba(28, 25, 23, 0.07), 0 2px 4px rgba(28, 25, 23, 0.04);
    --shadow-hover: 0 12px 36px rgba(28, 25, 23, 0.1), 0 4px 10px rgba(28, 25, 23, 0.05);
    --shadow-lg: 0 20px 48px rgba(28, 25, 23, 0.11), 0 8px 16px rgba(28, 25, 23, 0.05);
    --shadow-glow: 0 0 28px rgba(15, 118, 110, 0.08);
    
    /* ========================================
       动画系统 - 统一过渡
       ======================================== */
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* ========================================
       尺寸系统
       ======================================== */
    
    --avatar-sm: 36px;
    --avatar-md: 48px;
    --avatar-lg: 60px;
    
    --button-height-sm: 32px;
    --button-height-md: 36px;
    --button-height-lg: 42px;
    
    --input-height: 38px;
    
    /* ========================================
       布局系统
       ======================================== */
    
    --container-max-width: 1300px;
    --content-padding: 20px;
    --card-gap: 14px;

    /* ========================================
       水平筛选组件 filter_horizontal（浅色默认）
       深色在 body.dark-mode 中覆盖
       ======================================== */
    --filter-btn-bg: #fff;
    --filter-btn-border-color: var(--color-border);
    /* 与 teacher_list / sound_list / 老师主页筛选条统一（原仅 .teacher-list-page 覆盖） */
    --filter-btn-color: #000000;
    --filter-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    --filter-btn-hover-bg: #f5f5f4;
    --filter-btn-hover-border-color: #a0a0a0;
    --filter-btn-hover-shadow: 0 6px 16px rgba(17, 24, 39, 0.08);
    --filter-btn-chevron: #3f3f46;
    --filter-btn-chevron-hover: #27272a;
    --filter-btn-chevron-open: #3F51B5;
    --filter-btn-chevron-selection: #3F51B5;
    --filter-icon-color: #000000;
    --filter-icon-hover: #27272a;
    --filter-icon-accent: #2c5aa0;
    --filter-btn-active-bg: #f0f7ff;
    --filter-btn-active-border-color: #4a90e2;
    --filter-btn-active-color: #2c5aa0;
    --filter-btn-active-shadow: 0 2px 6px rgba(74, 144, 226, 0.15);
    --filter-btn-selection-bg: #ddf0ff;
    --filter-btn-selection-hover-bg: #c8e6ff;
    --filter-btn-selection-border-color: #4a90e2;
    --filter-btn-selection-color: #2c5aa0;
    --filter-menu-bg: #ffffff;
    --filter-menu-border-color: rgba(16, 24, 40, 0.06);
    --filter-menu-outline-color: rgba(255, 255, 255, 0.6);
    --filter-menu-shadow: 0 12px 30px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.06);
    --filter-scrollbar-thumb: rgba(17, 24, 39, 0.18);
    --filter-scrollbar-thumb-hover: rgba(17, 24, 39, 0.28);
    --filter-option-color: #1D2939;
    --filter-option-hover-bg: rgba(13, 148, 136, 0.06);
    --filter-option-hover-color: #1D2939;
    --filter-option-active-bg: #f4f4f5;
    --filter-option-checkbox-border: #d4d4d8;
    --filter-option-checkbox-bg: #ffffff;
    --filter-option-checkbox-hover-border: #a1a1aa;
    --filter-option-checkmark-fg: #000000;
    --filter-option-checkmark-mask-bg: #ffffff;
    --filter-accordion-header-color: #1D2939;
    --filter-accordion-header-hover-bg: rgba(13, 148, 136, 0.06);
    --filter-accordion-header-active-bg: rgba(13, 148, 136, 0.1);
    --filter-accordion-group-bg: #f8fafc;
    --filter-accordion-group-border: rgba(16, 24, 40, 0.06);
    --filter-accordion-content-bg: #ffffff;
    --filter-accordion-content-hover-bg: #f4f4f5;
    --filter-search-input-border: #e4e4e7;
    --filter-search-input-bg: #ffffff;
    --filter-search-input-color: #18181b;
    --filter-search-placeholder-color: #71717a;
    --filter-search-input-focus-border: #0d9488;
    --filter-search-input-focus-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15);
    --filter-search-icon-color: #000000;
    --filter-search-icon-hover: #52525b;
    --filter-layout-bar-bg: #ffffff;
    --filter-layout-bar-border: none;
    --filter-layout-btn-hover-bg: transparent;
    --filter-layout-btn-active-bg: #fff;
    --filter-layout-btn-active-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --filter-layout-btn-active-hover-bg: #fff;
    --filter-selected-tags-border: transparent;
    --filter-tag-color: #0f0f0f;
    --filter-tag-box-border: none;
    --filter-tag-bottom-border: 1px solid rgba(17, 24, 39, 0.18);
    --filter-tag-hover-color: #0d9488;
    --filter-tag-hover-border: rgba(13, 148, 136, 0.4);
    --filter-tag-clear-color: #171717;
    --filter-tag-clear-border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    --filter-tag-clear-hover-color: #0d9488;
    --filter-tag-clear-hover-border: #0d9488;
    --filter-tag-close-color: #D92D20;
    --filter-tag-close-bg: rgba(217, 45, 32, 0.08);
    --filter-tag-close-hover-bg: rgba(217, 45, 32, 0.14);
    --filter-tag-close-hover-shadow: 0 6px 14px rgba(17, 24, 39, 0.10);
}

/* 浅色画布：与 body 同色，避免变量已生效但 html 仍露白 */
html:not(.dark-mode) {
    background-color: var(--color-bg-page, #ffffff);
}

/* 明亮模式：主内容区与页面同白底（氛围页/列表页除外，需透出 Hero 渐变） */
html:not(.dark-mode) body:not(.dark-mode):not(.hero-ambient-page):not(.index-page) .Whole,
html:not(.dark-mode) body:not(.dark-mode):not(.hero-ambient-page):not(.index-page) .Content {
    background-color: var(--color-bg-base, #ffffff);
}

/* 氛围页 / 列表页：主内容区透明，让渐变背景贯穿筛选区与卡片列表 */
html:not(.dark-mode) body.hero-ambient-page .Whole,
html:not(.dark-mode) body.hero-ambient-page .Content,
html:not(.dark-mode) body.index-page .Whole,
html:not(.dark-mode) body.index-page .Content {
    background: transparent !important;
    background-color: transparent !important;
}

/* 氛围页：主内容区仍透明，下拉菜单保留实底避免二级选项与背景混在一起 */
html:not(.dark-mode) body.hero-ambient-page {
    --filter-menu-bg: #ffffff;
    --filter-menu-border-color: rgba(16, 24, 40, 0.08);
    --filter-menu-outline-color: transparent;
    --filter-menu-shadow: 0 12px 30px rgba(17, 24, 39, 0.12), 0 2px 8px rgba(17, 24, 39, 0.06);
    --filter-accordion-group-bg: #f8fafc;
    --filter-accordion-group-border: rgba(16, 24, 40, 0.06);
    --filter-accordion-content-bg: #ffffff;
    --filter-search-input-bg: transparent;
    --filter-search-input-border: var(--card-surface-outline, rgba(0, 0, 0, 0.08));
    --filter-layout-bar-bg: transparent;
    --filter-layout-bar-border: 1px solid var(--card-surface-outline, rgba(0, 0, 0, 0.08));
    --filter-layout-btn-active-bg: rgba(255, 255, 255, 0.42);
    --filter-layout-btn-active-hover-bg: rgba(255, 255, 255, 0.55);
    --filter-option-checkbox-bg: transparent;
    --filter-btn-shadow: none;
}

/* 明亮模式：样音/老师等卡片透明底 + 极细描边（与暗黑模式对称） */
html:not(.dark-mode) body:not(.dark-mode) .sample-item,
html:not(.dark-mode) body:not(.dark-mode) .sample-card-item,
html:not(.dark-mode) body:not(.dark-mode) .Sound,
html:not(.dark-mode) body:not(.dark-mode) .index-sample-item,
html:not(.dark-mode) body:not(.dark-mode) .Teacher,
html:not(.dark-mode) body:not(.dark-mode) .voice-card-inner,
html:not(.dark-mode) body:not(.dark-mode) .discount-teacher-inner,
html:not(.dark-mode) body:not(.dark-mode) .discount-teacher-card .discount-teacher-inner {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--card-surface-outline, rgba(0, 0, 0, 0.08)) !important;
    box-shadow: none !important;
}

/* 老师主页左侧信息区：不参与全站卡片描边，使用 TeacherHome.css 浅底面板 */
html:not(.dark-mode) body:not(.dark-mode).teacher-home-page .TeacherHome .TeacherBanner-left,
html:not(.dark-mode) body:not(.dark-mode).teacher-home-page .TeacherHome .teacher-profile-card {
    background: #e9eef4 !important;
    background-color: #e9eef4 !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 4px 14px rgba(15, 23, 42, 0.04) !important;
}

@media (hover: hover) and (pointer: fine) {
    html:not(.dark-mode) body:not(.dark-mode) .sample-item:hover,
    html:not(.dark-mode) body:not(.dark-mode) .sample-card-item:hover,
    html:not(.dark-mode) body:not(.dark-mode) .Sound:hover,
    html:not(.dark-mode) body:not(.dark-mode) .index-sample-item:hover,
    html:not(.dark-mode) body:not(.dark-mode) .Teacher:hover,
    html:not(.dark-mode) body:not(.dark-mode) .voice-card-inner:hover,
    html:not(.dark-mode) body:not(.dark-mode) .discount-teacher-inner:hover,
    html:not(.dark-mode) body:not(.dark-mode) .discount-teacher-card:hover .discount-teacher-inner {
        background: transparent !important;
        background-color: transparent !important;
        border-color: var(--card-surface-outline-hover, rgba(0, 0, 0, 0.14)) !important;
        box-shadow: var(--card-shadow-hover-lift, 0 4px 14px rgba(15, 23, 42, 0.06)) !important;
    }
}

/* 暗黑模式：全站卡片透明底 + 极细中性描边（无发光） */
body.dark-mode .sample-item,
body.dark-mode .sample-card-item,
body.dark-mode .Sound,
body.dark-mode .index-sample-item,
body.dark-mode .Teacher,
body.dark-mode .voice-card-inner,
body.dark-mode .discount-teacher-inner,
body.dark-mode .discount-teacher-card .discount-teacher-inner,
body.dark-mode .Newest {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--card-surface-outline, rgba(255, 255, 255, 0.07)) !important;
    box-shadow: none !important;
}

@media (hover: hover) and (pointer: fine) {
    body.dark-mode .sample-item:hover,
    body.dark-mode .sample-card-item:hover,
    body.dark-mode .Sound:hover,
    body.dark-mode .index-sample-item:hover,
    body.dark-mode .Teacher:hover,
    body.dark-mode .voice-card-inner:hover,
    body.dark-mode .discount-teacher-inner:hover,
    body.dark-mode .discount-teacher-card:hover .discount-teacher-inner,
    body.dark-mode .Newest:hover {
        background: transparent !important;
        background-color: transparent !important;
        border-color: var(--card-surface-outline-hover, rgba(255, 255, 255, 0.12)) !important;
        box-shadow: none !important;
    }
}

/* ========================================
   深色模式变量
   ======================================== */

body.dark-mode {
    --color-primary: #2dd4bf;
    --color-primary-hover: #5eead4;
    --color-primary-active: #14b8a6;
    --color-primary-light: rgba(45, 212, 191, 0.1);
    --color-primary-muted: rgba(45, 212, 191, 0.12);

    --color-text-primary: #f5f5f5;
    --color-text-secondary: #a3a3a3;
    --color-text-tertiary: #737373;
    --color-text-disabled: #525252;
    
    --color-bg-page: #111111;
    --color-bg-base: #1a1a1a;
    --color-bg-gray: #1a1a1a;
    --color-bg-hover: #262626;
    --color-bg-elevated: #222222;
    
    --color-border: #2e2e2e;
    --color-border-hover: #404040;
    --color-border-light: #262626;

    --card-surface-panel: transparent;
    --card-surface-panel-hover: transparent;
    --card-surface-outline: var(--dm-card-list-border, rgba(255, 255, 255, 0.07));
    --card-surface-outline-hover: var(--dm-card-list-border-hover, rgba(255, 255, 255, 0.12));
    --card-player-bg: transparent;
    --card-player-border: rgba(255, 255, 255, 0.06);
    --card-border: var(--card-surface-outline);
    --card-border-hover: var(--card-surface-outline-hover);
    --card-border-glow-hover: none;
    
    /* 深色模式阴影 */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-hover: 0 8px 28px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 0, 0, 0.15);

    /* 水平筛选组件（深色） */
    --filter-btn-bg: #1f2937;
    --filter-btn-border-color: rgba(255, 255, 255, 0.1);
    --filter-btn-color: #f9fafb;
    --filter-btn-hover-bg: #334155;
    --filter-btn-hover-border-color: rgba(255, 255, 255, 0.14);
    --filter-btn-chevron: #b0adb3;
    --filter-btn-chevron-hover: #e5e7eb;
    --filter-btn-chevron-open: #ffffff;
    --filter-btn-chevron-selection: #b0adb3;
    --filter-icon-color: #b0adb3;
    --filter-icon-hover: #e5e7eb;
    --filter-icon-accent: #ffffff;
    --filter-btn-active-bg: #0d9488;
    --filter-btn-active-border-color: #0d9488;
    --filter-btn-active-color: #ffffff;
    --filter-btn-selection-bg: #1e3a56;
    --filter-btn-selection-hover-bg: #2a4a6a;
    --filter-btn-selection-border-color: #4a90e2;
    --filter-btn-selection-color: #81c0ff;
    --filter-menu-bg: #141924;
    --filter-menu-border-color: rgba(255, 255, 255, 0.10);
    --filter-menu-outline-color: transparent;
    --filter-menu-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    --filter-scrollbar-thumb: rgba(255, 255, 255, 0.18);
    --filter-scrollbar-thumb-hover: rgba(255, 255, 255, 0.28);
    --filter-option-color: #E5E7EB;
    --filter-option-hover-bg: rgba(255, 255, 255, 0.06);
    --filter-option-hover-color: #FFFFFF;
    --filter-option-active-bg: rgba(255, 255, 255, 0.08);
    --filter-option-checkbox-border: #52525b;
    --filter-option-checkbox-bg: transparent;
    --filter-option-checkbox-hover-border: #71717a;
    --filter-option-checkmark-fg: #ffffff;
    --filter-option-checkmark-mask-bg: #000000;
    --filter-accordion-header-color: #FFFFFF;
    --filter-accordion-header-hover-bg: rgba(255, 255, 255, 0.06);
    --filter-accordion-header-active-bg: rgba(255, 255, 255, 0.08);
    --filter-accordion-group-bg: rgba(255, 255, 255, 0.04);
    --filter-accordion-group-border: rgba(255, 255, 255, 0.08);
    --filter-accordion-content-bg: rgba(0, 0, 0, 0.22);
    --filter-accordion-content-hover-bg: rgba(255, 255, 255, 0.06);
    --filter-search-input-border: rgba(255, 255, 255, 0.1);
    --filter-search-input-bg: #1f2937;
    --filter-search-input-color: #f9fafb;
    --filter-search-placeholder-color: #9ca3af;
    --filter-search-input-focus-border: #3d9d91;
    --filter-search-input-focus-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
    --filter-search-icon-color: #b0adb3;
    --filter-search-icon-hover: #3d9d91;
    --filter-layout-bar-bg: #1f2937;
    --filter-layout-bar-border: 1px solid rgba(255, 255, 255, 0.1);
    --filter-layout-btn-hover-bg: rgba(255, 255, 255, 0.08);
    --filter-layout-btn-active-bg: #0d9488;
    --filter-layout-btn-active-shadow: none;
    --filter-layout-btn-active-hover-bg: #0d9488;
    --filter-selected-tags-border: #3a3a3a;
    --filter-tag-color: #81c0ff;
    --filter-tag-box-border: 1px solid rgba(74, 144, 226, 0.45);
    --filter-tag-bottom-border: 1px solid rgba(74, 144, 226, 0.45);
    --filter-tag-hover-color: #a5b4fc;
    --filter-tag-hover-border: #a5b4fc;
    --filter-tag-clear-color: #81c0ff;
    --filter-tag-clear-border-bottom: 2px solid #4a90e2;
    --filter-tag-clear-hover-color: #a5b4fc;
    --filter-tag-clear-hover-border: #a5b4fc;
    --filter-tag-close-color: #F97066;
    --filter-tag-close-bg: rgba(249, 112, 102, 0.14);
    --filter-tag-close-hover-bg: rgba(249, 112, 102, 0.22);
}

/* 氛围页暗黑：下拉菜单与二级手风琴保持实底 */
body.dark-mode.hero-ambient-page {
    --filter-menu-bg: #141924;
    --filter-menu-border-color: rgba(255, 255, 255, 0.10);
    --filter-menu-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
    --filter-accordion-group-bg: rgba(255, 255, 255, 0.04);
    --filter-accordion-group-border: rgba(255, 255, 255, 0.08);
    --filter-accordion-content-bg: rgba(0, 0, 0, 0.28);
}

/* ========================================
   工具类 - 基于设计系统
   ======================================== */

/* 文字大小 */
.text-xl { font-size: var(--font-size-xl) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-md { font-size: var(--font-size-md) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-xs { font-size: var(--font-size-xs) !important; }

/* 文字颜色 */
.text-primary { color: var(--color-text-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-tertiary { color: var(--color-text-tertiary) !important; }

/* 文字重量 */
.font-normal { font-weight: var(--font-weight-normal) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* 间距 */
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }

.p-xs { padding: var(--spacing-xs) !important; }
.p-sm { padding: var(--spacing-sm) !important; }
.p-md { padding: var(--spacing-md) !important; }
.p-lg { padding: var(--spacing-lg) !important; }

.gap-xs { gap: var(--spacing-xs) !important; }
.gap-sm { gap: var(--spacing-sm) !important; }
.gap-md { gap: var(--spacing-md) !important; }
.gap-lg { gap: var(--spacing-lg) !important; }

/* 圆角 */
.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }
.radius-round { border-radius: var(--radius-round) !important; }

/* 阴影 */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-none { box-shadow: none !important; }

/* ========================================
   使用指南
   ======================================== */

/**
 * 示例：使用设计系统变量
 * 
 * .my-card {
 *     background: var(--color-bg-base);
 *     border: 1px solid var(--color-border);
 *     border-radius: var(--radius-lg);
 *     box-shadow: var(--shadow-sm);
 *     padding: var(--spacing-lg);
 *     transition: var(--transition-smooth);
 * }
 * 
 * .my-title {
 *     font-size: var(--font-size-lg);
 *     font-weight: var(--font-weight-bold);
 *     color: var(--color-text-primary);
 *     margin-bottom: var(--spacing-md);
 * }
 * 
 * .my-description {
 *     font-size: var(--font-size-sm);
 *     color: var(--color-text-secondary);
 *     line-height: var(--line-height-normal);
 * }
 */