/* 批15 收敛：引入单一权威 Token 层，本文件冲突 token 定义已移除 */
@import url('./tokens-authoritative.css');

/* ============================================================
   众泰云 Design System — Design Tokens (variables.css)
   All colors, fonts, spacing, shadows, borders, transitions.
   ============================================================ */

:root {
  /* ── Brand Colors ─────────────────────────────────────── */
  --primary:          #0E7C7B;
  --primary-light:    #12a3a2;
  --primary-dark:     #0a6362;
  --primary-50:       #e6f7f7;
  --primary-100:      #ccf0ef;
  --primary-200:      #99e2e1;

  --secondary:        #7c3aed;
  --secondary-light:  #8b5cf6;
  --secondary-dark:   #6d28d9;
  --secondary-50:     #f5f3ff;
  --secondary-100:    #ede9fe;

  /* ── Semantic Colors ──────────────────────────────────── */
  --success:          #10b981;
  --success-light:    #34d399;
  --success-dark:     #059669;
  --success-50:       #ecfdf5;

  --warning:          #f59e0b;
  --warning-light:    #fbbf24;
  --warning-dark:     #d97706;
  --warning-50:       #fffbeb;

  --error:            #ef4444;
  --error-light:      #f87171;
  --error-dark:       #dc2626;
  --error-50:         #fef2f2;

  /* ── Gold Accent (Premium / CTA) ─────────────────────── */
  --gold:             #f59e0b;
  --gold-light:       #fbbf24;
  --gold-dark:        #d97706;
  --gold-gradient:    linear-gradient(135deg, #f59e0b 0%, #f97316 100%);

  /* ── Neutral / Gray Scale ─────────────────────────────── */
  --gray-50:          #f9fafb;
  --gray-100:         #f3f4f6;
  --gray-200:         #e5e7eb;
  --gray-300:         #d1d5db;
  --gray-400:         #9ca3af;
  --gray-500:         #6b7280;
  --gray-600:         #4b5563;
  --gray-700:         #374151;
  --gray-800:         #1f2937;
  --gray-900:         #111827;

  /* ── Surface / Background ─────────────────────────────── */
  --bg-body:          #f8fafc;
  --bg-surface:       #ffffff;
  --bg-surface-alt:   #f1f5f9;
  --bg-overlay:       rgba(0, 0, 0, 0.5);

  /* ── Text Colors ──────────────────────────────────────── */
  --text-primary:     #1f2937;
  --text-secondary:   #4b5563;
  --text-muted:       #9ca3af;
  --text-inverse:     #ffffff;
  --text-link:        var(--primary);

  /* ── Glass Effect ────────────────────────────────────── */
  --glass-bg:         rgba(255, 255, 255, 0.72);
  --glass-blur:       blur(16px);
  --glass-border:     rgba(255, 255, 255, 0.5);
  --glass-shadow:     0 8px 32px rgba(31, 41, 55, 0.08);

  /* ── Typography ───────────────────────────────────────── */
  --font-family:      "PingFang SC", "Microsoft YaHei", "Noto Sans SC", -apple-system, BlinkMacSystemFont, sans-serif;

  /* 完整字体回退链 — 覆盖所有平台 */
  /* 中文/日文/韩文优先，回退到系统原生字体 */
  --font-sans:        "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR",
                      -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", "Hiragino Sans GB",
                      "WenQuanYi Micro Hei", Arial, sans-serif;

  /* 展示字体 — 用于标题/大号文字 */
  --font-display:     "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
                      -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
                      "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;

  /* 等宽字体 — 代码/数字 */
  --font-mono:        "SF Mono", "Fira Code", "Cascadia Code", "JetBrains Mono",
                      "Consolas", "Courier New", "Source Code Pro", monospace;

  /* 系统字体降级（仅用于UI组件，不含中文字体） */
  --font-system:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
                      Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  --text-xs:          0.75rem;    /* 12px */
  --text-sm:          0.875rem;   /* 14px */
  --text-base:        1rem;       /* 16px */
  --text-lg:          1.125rem;   /* 18px */
  --text-xl:          1.25rem;    /* 20px */
  --text-2xl:         1.5rem;     /* 24px */
  --text-3xl:         1.875rem;   /* 30px */
  --text-4xl:         2.25rem;    /* 36px */
  --text-5xl:         3rem;       /* 48px */

  --font-normal:      400;
  --font-medium:      500;
  --font-semibold:    600;
  --font-bold:        700;

  --leading-tight:    1.25;
  --leading-snug:     1.375;
  --leading-normal:   1.7;
  --leading-relaxed:  1.875;

  /* ── Spacing Scale ───────────────────────────────────── */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-7:          32px;
  --space-8:          40px;
  --space-9:          48px;
  --space-10:         64px;

  /* ── Border Radius ──────────────────────────────────────
     批15 收敛：radius 定义统一收敛至 tokens-authoritative.css
     （单一事实源），本文件不再重复定义。 */

  /* ── Borders ─────────────────────────────────────────── */
  --border-color:     var(--gray-200);
  --border-width:     1px;
  --border-style:     solid;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:        0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl:        0 16px 48px rgba(0, 0, 0, 0.16);
  --shadow-glass:     0 8px 32px rgba(31, 41, 55, 0.08);
  --shadow-button:    0 4px 14px rgba(14, 124, 123, 0.3);
  --shadow-dropdown:  0 12px 36px rgba(0, 0, 0, 0.12);
  --shadow-gold:      0 4px 14px rgba(245, 158, 11, 0.35);

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:  150ms ease;
  --transition-base:  250ms ease;
  --transition-slow:  350ms ease;
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index Scale ────────────────────────────────────── */
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-overlay:        300;
  --z-modal:          400;
  --z-toast:          500;
  --z-tooltip:        600;

  /* ── Container Widths ────────────────────────────────── */
  --container-sm:     640px;
  --container-md:     768px;
  --container-lg:     1024px;
  --container-xl:     1280px;
  --container-max:    1440px;

  /* ── Breakpoints (for reference in JS / comments) ────── */
  /* xs: 375px | sm: 480px | mobile: 768px | tablet: 1024px | desktop: 1280px */

  /* ── 375px Breakpoint Custom Properties ──────────────── */
  --breakpoint-xs:     375px;
  --breakpoint-xs-padding: 12px;
  --breakpoint-xs-font-size: 13px;
  --breakpoint-xs-gap: 8px;

  /* ── 768px Tablet Breakpoint Custom Properties ──────── */
  --breakpoint-sm:     768px;
  --breakpoint-sm-padding: 20px;
  --breakpoint-sm-font-size: 15px;
  --breakpoint-sm-gap: 12px;
  --breakpoint-sm-sidebar-width: 200px;
  --breakpoint-sm-card-padding: 16px;
  --breakpoint-sm-heading-scale: 0.95;

  /* ── 1024px Tablet Landscape Breakpoint ─────────────── */
  --breakpoint-md:     1024px;
  --breakpoint-md-padding: 24px;
  --breakpoint-md-font-size: 15.5px;
  --breakpoint-md-gap: 16px;
  --breakpoint-md-sidebar-width: 220px;
  --breakpoint-md-card-padding: 20px;

  /* ── 2026 科幻视觉语言 — 霓虹色系 ──────────────────── */
  --neon-blue:        #00d4ff;
  --neon-purple:      #a855f7;
  --neon-pink:        #f472b6;
  --cosmic-dark:      #0a0e1a;

  /* ── 2026 科幻视觉语言 — 光效变量 ──────────────────── */
  --glow-blue:        0 0 20px rgba(0, 212, 255, 0.3);
  --glow-purple:      0 0 20px rgba(168, 85, 247, 0.3);
  --glow-pink:        0 0 20px rgba(244, 114, 182, 0.3);

  /* ── 2026 科幻视觉语言 — 渐变 ──────────────────────── */
  --gradient-cosmic:  linear-gradient(135deg, #0a0e1a 0%, #1a1040 50%, #0a0e1a 100%);
  --gradient-neon:    linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
  --gradient-neon-pink: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-pink) 100%);
  --gradient-aurora:  linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 50%, var(--neon-pink) 100%);

  /* ── 2026 科幻视觉语言 — 边框流光 ──────────────────── */
  --border-glow:      1px solid rgba(0, 212, 255, 0.15);
  --border-glow-hover: 1px solid rgba(0, 212, 255, 0.35);
  --border-glow-purple: 1px solid rgba(168, 85, 247, 0.15);
  --border-glow-purple-hover: 1px solid rgba(168, 85, 247, 0.35);

  /* ── 2026 科幻视觉语言 — 液态玻璃 ──────────────────── */
  --liquid-glass-bg:       rgba(255, 255, 255, 0.05);
  --liquid-glass-border:   rgba(255, 255, 255, 0.1);
  --liquid-glass-blur:     blur(24px);
  --liquid-glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.2);

  /* ── 2026 科幻视觉语言 — 动画时长 ──────────────────── */
  --animation-glow:    2s ease-in-out infinite;
  --animation-float:    6s ease-in-out infinite;
  --animation-shimmer:  2.5s linear infinite;
  --animation-border:   3s linear infinite;
  --animation-gradient: 8s ease infinite;

  /* ============================================================
     Admin 后台尺寸变量（提取自 admin.css 重复硬编码尺寸）
     ============================================================ */
  --admin-sidebar-width:        260px;
  --admin-main-padding-x:       32px;
  --admin-main-padding-y:       24px;
  --admin-card-padding:         24px;
  --admin-card-radius:          16px;
  --admin-card-gap:             20px;   /* 卡片间距 margin-bottom */
  --admin-section-gap:          32px;   /* 标题/顶栏 margin-bottom */
  --admin-form-gap:             16px;   /* 表单组间距 */
  --admin-grid-gap:             16px;   /* 网格 gap */
  --admin-nav-link-padding:     8px 12px;
  --admin-nav-title-padding:    10px 12px;
  --admin-btn-padding:          8px 16px;
  --admin-btn-radius:           8px;
  --admin-input-padding:        10px 12px;
  --admin-input-radius:         8px;
  --admin-table-cell-padding:   12px 14px;
  --admin-badge-padding:        3px 10px;
  --admin-badge-radius:         20px;
  --admin-tab-padding:          10px 20px;
  --admin-plugin-card-padding:  24px 20px;
  --admin-plugin-card-radius:   14px;
  --admin-icon-btn-size:        38px;
  --admin-icon-btn-radius:      10px;
  /* Admin 间距变量 */
  --admin-space-xxs:            4px;
  --admin-space-xs:             8px;
  --admin-space-sm:             12px;
  --admin-space-md:             16px;
  /* Admin 导航变量 */
  --admin-nav-radius:           10px;
  --admin-nav-max-height:       500px;
  --admin-sidebar-padding:      24px 16px;
  /* Admin 开关组件尺寸 */
  --admin-toggle-width:         44px;
  --admin-toggle-height:        24px;
  --admin-toggle-thumb-size:    18px;
  --admin-toggle-offset:        3px;
  --admin-toggle-translate:     20px;
  /* Admin Banner */
  --admin-banner-padding:       28px 32px;
  /* Admin 移动端 */
  --admin-mobile-sidebar-height: 55px;
  /* Admin 开关组件颜色（暗色模式需覆盖） */
  --admin-toggle-track:         #cbd5e1;
  --admin-toggle-thumb:         #ffffff;

  /* ============================================================
     AI 助手语义颜色变量（提取自 ai-assistant.css 非品牌色硬编码）
     品牌色 #0E7C7B / #D4944A 不在此列；此组为 AI 界面专用语义色
     ============================================================ */
  /* ── AI 强调色（靛蓝系，AI 助手标识色） ─────────────── */
  --ai-accent:           #4f46e5;
  --ai-accent-2:         #7c3aed;
  --ai-accent-light:     #818cf8;
  --ai-accent-soft:      #a78bfa;
  --ai-accent-pale:      #c4b5fd;
  --ai-accent-border:    #c7d2fe;
  --ai-accent-tint:      #eef2ff;
  --ai-accent-tint-2:    #ede9fe;
  /* ── AI 表面 / 背景 ─────────────────────────────────── */
  --ai-bg-chat:          #f8fafc;   /* 对话区背景 */
  --ai-bg-card:          #ffffff;   /* 白色卡片/气泡/输入框 */
  --ai-bg-surface-alt:   #f1f5f9;   /* 次级表面/悬停/代码 */
  --ai-bg-dark:          #1e293b;   /* 深色表面（Toast 等） */
  --ai-bg-darker:        #0f172a;   /* 更深背景 */
  /* ── AI 文本 ────────────────────────────────────────── */
  --ai-text-dark:        #0f172a;   /* 最深文本（标题/加粗） */
  --ai-text-heading:     #1e293b;   /* 标题文本 */
  --ai-text-body:        #334155;   /* 正文文本 */
  --ai-text-slate:       #64748b;   /* 次要/slate 文本 */
  --ai-text-faint:       #94a3b8;   /* 更淡文本 */
  --ai-text-action:      #475569;   /* 操作按钮文本 */
  --ai-text-on-accent:   #ffffff;   /* 强调色上的文字 */
  /* ── AI 边框 ────────────────────────────────────────── */
  --ai-border-default:   #e2e8f0;   /* 默认边框 */
  --ai-border-soft:      #f1f5f9;   /* 柔和边框 */
  /* ── AI 状态色 ──────────────────────────────────────── */
  --ai-success:          #16a34a;
  --ai-success-bg:       #dcfce7;
  --ai-online:           #10b981;   /* 在线/完成指示 */
  --ai-error:            #dc2626;
  --ai-error-soft:       #fca5a5;
  /* ── AI 启动界面（Launcher）专用色 ──────────────────── */
  --ai-launcher-bg-start:   #0d0820;
  --ai-launcher-bg-mid:     #060312;
  --ai-launcher-bg-end:     #020108;
  --ai-launcher-desc:       #8b8ba8;
}

/* ============================================================
   Dark Mode Variables
   ============================================================ */
[data-theme="dark"] {
  /* ── Brand Colors ─────────────────────────────────────── */
  --primary-light:    #2dd4d3;
  --primary-dark:     #0a6362;
  --primary-50:       rgba(14, 124, 123, 0.15);
  --primary-100:      rgba(14, 124, 123, 0.25);
  --primary-200:      rgba(14, 124, 123, 0.35);

  --secondary:        #8b5cf6;
  --secondary-light:  #a78bfa;
  --secondary-dark:   #6d28d9;
  --secondary-50:     rgba(124, 58, 237, 0.15);
  --secondary-100:    rgba(124, 58, 237, 0.25);

  /* ── Semantic Colors ──────────────────────────────────── */
  --success-light:    #34d399;
  --success-dark:     #059669;
  --success-50:       rgba(16, 185, 129, 0.15);

  --warning-light:    #fbbf24;
  --warning-dark:     #d97706;
  --warning-50:       rgba(245, 158, 11, 0.15);

  --error-light:      #f87171;
  --error-dark:       #dc2626;
  --error-50:         rgba(239, 68, 68, 0.15);

  /* ── Gold Accent ──────────────────────────────────────── */
  --gold:             #f59e0b;
  --gold-light:       #fbbf24;
  --gold-dark:        #d97706;
  --gold-gradient:    linear-gradient(135deg, #f59e0b 0%, #f97316 100%);

  /* ── Neutral / Gray Scale (暗色反转) ──────────────────── */
  --gray-50:          #1e293b;
  --gray-100:         #334155;
  --gray-200:         #475569;
  --gray-300:         #64748b;
  --gray-400:         #94a3b8;
  --gray-500:         #cbd5e1;
  --gray-600:         #e2e8f0;
  --gray-700:         #f1f5f9;
  --gray-800:         #f8fafc;
  --gray-900:         #ffffff;

  /* ── Surface / Background ─────────────────────────────── */
  --bg-body:          #0f172a;
  --bg-surface:       #1e293b;
  --bg-surface-alt:   #334155;
  --bg-overlay:       rgba(0, 0, 0, 0.7);

  /* ── Text Colors ──────────────────────────────────────── */
  --text-primary:     #f1f5f9;
  --text-secondary:   #cbd5e1;
  --text-muted:       #64748b;
  --text-inverse:     #0f172a;
  --text-link:        var(--primary-light);

  /* ── Glass Effect ────────────────────────────────────── */
  --glass-bg:         rgba(30, 41, 59, 0.72);
  --glass-border:     rgba(148, 163, 184, 0.15);
  --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.3);

  /* ── Borders ─────────────────────────────────────────── */
  --border-color:     rgba(148, 163, 184, 0.2);

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:        0 2px 4px rgba(0, 0, 0, 0.25);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-xl:        0 16px 48px rgba(0, 0, 0, 0.45);
  --shadow-glass:     0 8px 32px rgba(0, 0, 0, 0.3);
  --shadow-button:    0 4px 14px rgba(14, 124, 123, 0.4);
  --shadow-dropdown:  0 12px 36px rgba(0, 0, 0, 0.4);
  --shadow-gold:      0 4px 14px rgba(245, 158, 11, 0.4);

  /* ── 科幻视觉语言 — 霓虹色系 ────────────────────────── */
  --neon-blue:        #00d4ff;
  --neon-purple:      #c084fc;
  --neon-pink:        #f9a8d4;
  --cosmic-dark:      #020617;

  /* ── 科幻视觉语言 — 光效变量 ────────────────────────── */
  --glow-blue:        0 0 20px rgba(0, 212, 255, 0.4);
  --glow-purple:      0 0 20px rgba(168, 85, 247, 0.4);
  --glow-pink:        0 0 20px rgba(244, 114, 182, 0.4);

  /* ── 科幻视觉语言 — 渐变 ────────────────────────────── */
  --gradient-cosmic:  linear-gradient(135deg, #020617 0%, #1a1040 50%, #020617 100%);
  --gradient-neon:    linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
  --gradient-neon-pink: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-pink) 100%);
  --gradient-aurora:  linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 50%, var(--neon-pink) 100%);

  /* ── 科幻视觉语言 — 边框流光 ────────────────────────── */
  --border-glow:            1px solid rgba(0, 212, 255, 0.25);
  --border-glow-hover:      1px solid rgba(0, 212, 255, 0.45);
  --border-glow-purple:     1px solid rgba(168, 85, 247, 0.25);
  --border-glow-purple-hover: 1px solid rgba(168, 85, 247, 0.45);

  /* ── 科幻视觉语言 — 液态玻璃 ────────────────────────── */
  --liquid-glass-bg:       rgba(255, 255, 255, 0.03);
  --liquid-glass-border:   rgba(255, 255, 255, 0.08);
  --liquid-glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.4);

  /* ============================================================
     Admin 开关组件暗色覆盖（补全 admin.css 未覆盖硬编码色）
     ============================================================ */
  --admin-toggle-track:    #475569;
  --admin-toggle-thumb:    #e2e8f0;

  /* ============================================================
     AI 助手语义颜色暗色覆盖（补全 ai-assistant.css 缺失的
     [data-theme="dark"] 覆盖，原先仅依赖 prefers-color-scheme）
     ============================================================ */
  /* ── AI 强调色（暗色提亮以保持对比度） ───────────────── */
  --ai-accent:           #6366f1;
  --ai-accent-2:         #8b5cf6;
  --ai-accent-light:     #a5b4fc;
  --ai-accent-soft:      #c4b5fd;
  --ai-accent-pale:      #ddd6fe;
  --ai-accent-border:    rgba(129, 140, 248, 0.35);
  --ai-accent-tint:      rgba(99, 102, 241, 0.14);
  --ai-accent-tint-2:    rgba(124, 58, 237, 0.18);
  /* ── AI 表面 / 背景（暗色反转） ─────────────────────── */
  --ai-bg-chat:          #0f172a;
  --ai-bg-card:          #1e293b;
  --ai-bg-surface-alt:   #334155;
  --ai-bg-dark:          #0f172a;
  --ai-bg-darker:        #020617;
  /* ── AI 文本（暗色提亮） ────────────────────────────── */
  --ai-text-dark:        #e2e8f0;
  --ai-text-heading:     #f1f5f9;
  --ai-text-body:        #cbd5e1;
  --ai-text-slate:       #94a3b8;
  --ai-text-faint:       #64748b;
  --ai-text-action:      #94a3b8;
  --ai-text-on-accent:   #ffffff;
  /* ── AI 边框（暗色反转） ────────────────────────────── */
  --ai-border-default:   #334155;
  --ai-border-soft:      #1e293b;
  /* ── AI 状态色（暗色提亮） ──────────────────────────── */
  --ai-success:          #4ade80;
  --ai-success-bg:       rgba(22, 163, 74, 0.18);
  --ai-online:           #34d399;
  --ai-error:            #f87171;
  --ai-error-soft:       #fca5a5;
  /* ── AI 启动界面（Launcher）暗色保持 ────────────────── */
  --ai-launcher-bg-start:   #0d0820;
  --ai-launcher-bg-mid:     #060312;
  --ai-launcher-bg-end:     #020108;
  --ai-launcher-desc:       #6b6b8a;
}

/* Fallback: respect system preference when no data-theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary-light:    #2dd4d3;
    --primary-dark:     #0a6362;
    --primary-50:       rgba(14, 124, 123, 0.15);
    --primary-100:      rgba(14, 124, 123, 0.25);
    --primary-200:      rgba(14, 124, 123, 0.35);

    --secondary:        #8b5cf6;
    --secondary-light:  #a78bfa;
    --secondary-dark:   #6d28d9;
    --secondary-50:     rgba(124, 58, 237, 0.15);
    --secondary-100:    rgba(124, 58, 237, 0.25);

    --success-light:    #34d399;
    --success-dark:     #059669;
    --success-50:       rgba(16, 185, 129, 0.15);

    --warning-light:    #fbbf24;
    --warning-dark:     #d97706;
    --warning-50:       rgba(245, 158, 11, 0.15);

    --error-light:      #f87171;
    --error-dark:       #dc2626;
    --error-50:         rgba(239, 68, 68, 0.15);

    --gold:             #f59e0b;
    --gold-light:       #fbbf24;
    --gold-dark:        #d97706;
    --gold-gradient:    linear-gradient(135deg, #f59e0b 0%, #f97316 100%);

    --gray-50:          #1e293b;
    --gray-100:         #334155;
    --gray-200:         #475569;
    --gray-300:         #64748b;
    --gray-400:         #94a3b8;
    --gray-500:         #cbd5e1;
    --gray-600:         #e2e8f0;
    --gray-700:         #f1f5f9;
    --gray-800:         #f8fafc;
    --gray-900:         #ffffff;

    --bg-body:          #0f172a;
    --bg-surface:       #1e293b;
    --bg-surface-alt:   #334155;
    --bg-overlay:       rgba(0, 0, 0, 0.7);

    --text-primary:     #f1f5f9;
    --text-secondary:   #cbd5e1;
    --text-muted:       #64748b;
    --text-inverse:     #0f172a;
    --text-link:        var(--primary-light);

    --glass-bg:         rgba(30, 41, 59, 0.72);
    --glass-border:     rgba(148, 163, 184, 0.15);
    --glass-shadow:     0 8px 32px rgba(0, 0, 0, 0.3);

    --border-color:     rgba(148, 163, 184, 0.2);

    --shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm:        0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg:        0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-xl:        0 16px 48px rgba(0, 0, 0, 0.45);
    --shadow-glass:     0 8px 32px rgba(0, 0, 0, 0.3);
    --shadow-button:    0 4px 14px rgba(14, 124, 123, 0.4);
    --shadow-dropdown:  0 12px 36px rgba(0, 0, 0, 0.4);
    --shadow-gold:      0 4px 14px rgba(245, 158, 11, 0.4);

    --neon-blue:        #00d4ff;
    --neon-purple:      #c084fc;
    --neon-pink:        #f9a8d4;
    --cosmic-dark:      #020617;

    --glow-blue:        0 0 20px rgba(0, 212, 255, 0.4);
    --glow-purple:      0 0 20px rgba(168, 85, 247, 0.4);
    --glow-pink:        0 0 20px rgba(244, 114, 182, 0.4);

    --gradient-cosmic:  linear-gradient(135deg, #020617 0%, #1a1040 50%, #020617 100%);
    --gradient-neon:    linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 100%);
    --gradient-neon-pink: linear-gradient(135deg, var(--neon-purple) 0%, var(--neon-pink) 100%);
    --gradient-aurora:  linear-gradient(135deg, var(--neon-blue) 0%, var(--neon-purple) 50%, var(--neon-pink) 100%);

    --border-glow:            1px solid rgba(0, 212, 255, 0.25);
    --border-glow-hover:      1px solid rgba(0, 212, 255, 0.45);
    --border-glow-purple:     1px solid rgba(168, 85, 247, 0.25);
    --border-glow-purple-hover: 1px solid rgba(168, 85, 247, 0.45);

    --liquid-glass-bg:       rgba(255, 255, 255, 0.03);
    --liquid-glass-border:   rgba(255, 255, 255, 0.08);
    --liquid-glass-shadow:   0 8px 32px rgba(0, 0, 0, 0.4);
  }
}

/* ============================================================
   tiance-* Utility Classes — Design System Standardization
   Auto-generated from high-frequency inline style patterns.
   ============================================================ */

/* ── Flexbox 布局 ─────────────────────────────────────── */
.tiance-flex                { display: flex; }
.tiance-inline-flex        { display: inline-flex; }
.tiance-flex-col           { flex-direction: column; }
.tiance-flex-center        { display: flex; align-items: center; justify-content: center; }
.tiance-flex-between       { display: flex; align-items: center; justify-content: space-between; }
.tiance-flex-between-wrap  { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.tiance-flex-wrap          { display: flex; flex-wrap: wrap; }
.tiance-flex-col-gap-4     { display: flex; flex-direction: column; gap: 4px; }
.tiance-flex-col-gap-sm    { display: flex; flex-direction: column; gap: 8px; }
.tiance-flex-col-gap-md    { display: flex; flex-direction: column; gap: 12px; }
.tiance-flex-gap-sm        { display: flex; gap: 8px; }
.tiance-flex-gap-md        { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ── Flex 属性 ─────────────────────────────────────────── */
.tiance-flex-1             { flex: 1; }

/* ── Gap ───────────────────────────────────────────────── */
.tiance-gap-4              { gap: 4px; }
.tiance-gap-sm             { gap: 8px; }
.tiance-gap-md             { gap: 12px; }
.tiance-gap-lg             { gap: 16px; }

/* ── Padding ───────────────────────────────────────────── */
.tiance-p-8                { padding: 8px; }
.tiance-p-10               { padding: 10px; }
.tiance-p-12               { padding: 12px; }
.tiance-p-20               { padding: 20px; }
.tiance-p-24               { padding: 24px; }
.tiance-p-space4           { padding: var(--space-4); }
.tiance-p-space8           { padding: var(--space-8); }
.tiance-px-20              { padding-left: 20px; padding-right: 20px; }

/* ── Padding 组合 ───────────────────────────────────────── */
.tiance-p-10-20             { padding: 10px 20px; }
.tiance-p-8-12              { padding: 8px 12px; }
.tiance-p-10-12             { padding: 10px 12px; }
.tiance-p-6-12              { padding: 6px 12px; }
.tiance-p-20-0-bottom       { padding: 0 20px 20px; }

/* ── Margin Bottom ─────────────────────────────────────── */
.tiance-mb-4               { margin-bottom: 4px; }
.tiance-mb-8               { margin-bottom: 8px; }
.tiance-mb-12              { margin-bottom: 12px; }
.tiance-mb-16              { margin-bottom: 16px; }
.tiance-mb-20              { margin-bottom: 20px; }
.tiance-mb-24              { margin-bottom: 24px; }
.tiance-mb-28              { margin-bottom: 28px; }
.tiance-mb-space2           { margin-bottom: var(--space-2); }
.tiance-mb-space3           { margin-bottom: var(--space-3); }
.tiance-mb-space4           { margin-bottom: var(--space-4); }
.tiance-mb-space6           { margin-bottom: var(--space-6); }
.tiance-mb-space8           { margin-bottom: var(--space-8); }
.tiance-mb-space12          { margin-bottom: var(--space-12); }
.tiance-mb-space16          { margin-bottom: var(--space-16); }

/* ── Margin 通用 ───────────────────────────────────────── */
.tiance-m-0                { margin: 0; }
.tiance-mt-0               { margin-top: 0; }

/* ── Text ─────────────────────────────────────────────── */
.tiance-text-muted         { color: var(--tiance-text-muted); }
.tiance-text-sec           { color: var(--tiance-text-sec); }
.tiance-text-sm            { font-size: 0.85rem; }
.tiance-text-xs            { font-size: 0.75rem; }
.tiance-text-080           { font-size: 0.8rem; }
.tiance-text-090           { font-size: 0.9rem; }
.tiance-text-faint         { color: #94a3b8; }
.tiance-text-slate         { color: #64748b; }
.tiance-text-bold          { font-weight: 700; }
.tiance-text-semibold      { font-weight: 600; }
.tiance-text-medium        { font-weight: 500; }

/* ── Text 对齐 ───────────────────────────────────────── */
.tiance-text-center        { text-align: center; }
.tiance-text-left          { text-align: left; }
.tiance-text-right         { text-align: right; }

/* ── Text 组合（标签+值）──────────────────────────────── */
.tiance-label-sm           { font-size: 0.8rem; color: var(--tiance-text-sec); margin-bottom: 8px; }
.tiance-label-muted-sm     { font-size: 0.8rem; color: var(--tiance-text-muted); }
.tiance-desc-muted         { font-size: 0.85rem; color: var(--tiance-text-muted); }
.tiance-desc-muted-margin  { font-size: 0.85rem; color: var(--tiance-text-muted); margin: 0 0 4px; }
.tiance-desc-muted-spaced  { font-size: 0.85rem; color: var(--tiance-text-muted); margin-bottom: 24px; }
.tiance-desc-muted-narrow  { font-size: 0.85rem; color: var(--tiance-text-muted); margin: 0 0 6px; }
.tiance-desc-slate-mb      { color: #64748b; margin-bottom: 8px; }
.tiance-desc-faint-sm      { color: #94a3b8; font-size: 0.85rem; }
.tiance-label-muted-desc   { color: var(--tiance-text-muted); margin-bottom: 8px; }

/* ── Heading ───────────────────────────────────────────── */
.tiance-h2                 { font-size: 1.5rem; font-weight: 700; color: var(--tiance-text); margin: 0; }
.tiance-h3                 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.tiance-h3-heading-lg      { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.tiance-h4-heading         { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.tiance-h5-heading         { font-size: var(--text-lg); margin-bottom: var(--space-4); }

/* ── Big Number (KPI) ──────────────────────────────────── */
.tiance-big-number         { font-size: 3rem; margin-bottom: 16px; opacity: 0.4; }
.tiance-big-number-space  { font-size: 3rem; margin-bottom: var(--space-4); opacity: 0.4; }

/* ── Heading + margin-bottom ───────────────────────────── */
.tiance-heading-mb16       { font-size: 1.1rem; font-weight: 600; margin: 0; margin-bottom: 16px; }

/* ── Width ────────────────────────────────────────────── */
.tiance-w-full             { width: 100%; }

/* ── Display ──────────────────────────────────────────── */
.tiance-block              { display: block; }
.tiance-inline             { display: inline; }
.tiance-inline-block       { display: inline-block; }
.tiance-none               { display: none; }

/* ── Overflow ──────────────────────────────────────────── */
.tiance-overflow-x         { overflow-x: auto; }
.tiance-overflow-hidden    { overflow: hidden; }
.tiance-overflow-y         { overflow-y: auto; }

/* ── Border Radius ─────────────────────────────────────── */
.tiance-rounded            { border-radius: 8px; }
.tiance-rounded-sm         { border-radius: 6px; }
.tiance-rounded-md         { border-radius: 8px; }
.tiance-rounded-lg         { border-radius: 12px; }
.tiance-rounded-full       { border-radius: 4px; }

/* ── Border ─────────────────────────────────────────────── */
.tiance-border             { border: 1px solid var(--tiance-border); }
.tiance-border-light       { border-bottom: 1px solid var(--tiance-border-light); }
.tiance-border-gray        { border: 1px solid #e2e8f0; }
.tiance-border-bottom-2    { border-bottom: 2px solid var(--tiance-border); text-align: left; }

/* ── Table ────────────────────────────────────────────── */
.tiance-table              { width: 100%; border-collapse: collapse; }
.tiance-table-sm           { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tiance-table-090          { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

/* ── Table Cell ────────────────────────────────────────── */
.tiance-td-right           { padding: 12px; text-align: right; border-bottom: 2px solid #e9ecef; }
.tiance-td-center          { padding: 12px; text-align: center; border-bottom: 2px solid #e9ecef; }
.tiance-td-left            { padding: 12px; text-align: left; border-bottom: 2px solid #e9ecef; }
.tiance-td-right-noborder  { padding: 12px; text-align: right; }
.tiance-td-center-noborder { padding: 12px; text-align: center; }

/* ── Table header (th) ─────────────────────────────────── */
.tiance-th-right           { padding: 12px; text-align: right; }
.tiance-th-center          { padding: 12px; text-align: center; }
.tiance-th-left            { padding: 12px; text-align: left; }

/* ── Cursor ────────────────────────────────────────────── */
.tiance-cursor             { cursor: pointer; }

/* ── Opacity ───────────────────────────────────────────── */
.tiance-opacity-40         { opacity: 0.4; }

/* ── Sidebar (layout structural - 高频) ────────────────── */
.tiance-sidebar            { width: 220px; background: #1e293b; color: #fff; padding: 20px 0; position: fixed; left: 0; top: 0; bottom: 0; overflow-y: auto; }
.tiance-main               { margin-left: 220px; flex: 1; padding: 24px; background: var(--tiance-bg); min-height: 100vh; }

/* ── Sidebar Nav Link ──────────────────────────────────── */
.tiance-nav-link           { padding: 10px 20px; color: #e2e8f0; text-decoration: none; font-size: 0.9rem; }

/* ── Page Section Header ────────────────────────────────── */
.tiance-section-header     { padding: 0 20px 20px; font-size: 1.1rem; font-weight: 700; border-bottom: 1px solid #334155; margin-bottom: 20px; }

/* ── Empty State ───────────────────────────────────────── */
.tiance-empty-center       { text-align: center; padding: var(--space-8); }
.tiance-empty-large       { text-align: center; padding: 80px 20px; }
.tiance-empty-center-mb   { text-align: center; margin-bottom: var(--space-8); }
.tiance-empty-center-lgp  { text-align: center; padding: var(--space-12) 0 var(--space-8); }
.tiance-empty-center-smp  { text-align: center; padding: var(--space-6); }
.tiance-empty-gray         { text-align: center; padding: 48px; color: #aaa; }

/* ── Card padding text ─────────────────────────────────── */
.tiance-card-p10           { padding: 10px; }
.tiance-card-p10-center    { padding: 10px; text-align: center; }
.tiance-card-p10-muted     { padding: 10px; color: var(--tiance-text-sec); }
.tiance-card-p10-center-muted { text-align: center; padding: 10px; color: var(--tiance-text-sec); }

/* ── Flex + margin-bottom (page header patterns) ──────── */
.tiance-flex-between-mb16 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.tiance-flex-between-mb24 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.tiance-flex-between-mb24-wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }

/* ── Page layout ───────────────────────────────────────── */
.tiance-page-flex          { display: flex; min-height: 100vh; }

/* ── Block label ──────────────────────────────────────── */
.tiance-block-label        { display: block; font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-2); }

/* ── Background ─────────────────────────────────────────── */
.tiance-bg-gray            { background: #f8f9fa; }
.tiance-bg-tiance          { background: var(--tiance-bg); }

/* ── Border bottom ─────────────────────────────────────── */
.tiance-border-bottom-gray { border-bottom: 1px solid #f0f0f0; }

/* ── Code Inline ───────────────────────────────────────── */
.tiance-code-inline        { font-size: 0.78em; background: var(--tiance-bg); padding: 2px 6px; border-radius: 4px; }

/* ── Padding + font weight ─────────────────────────────── */
.tiance-p10-medium         { padding: 10px; font-weight: 500; }
.tiance-p12-semibold       { padding: 12px; font-weight: 600; }

/* ── Line Height ───────────────────────────────────────── */
.tiance-leading-relaxed    { line-height: var(--leading-relaxed); }

/* ── Text decoration ─────────────────────────────────── */
.tiance-no-underline       { text-decoration: none; }

/* ── Padding + text-center + top ──────────────────────── */
.tiance-p-space4-center-pt60 { padding: var(--space-4); text-align: center; padding-top: 60px; }

/* ── Section heading margin bottom 2 ──────────────────── */
.tiance-mb-space2-text     { margin-bottom: var(--space-2); color: var(--color-text-primary); }

/* ── Text secondary sm ─────────────────────────────────── */
.tiance-text-sec-sm        { color: var(--color-text-secondary); font-size: var(--text-sm); }

/* ── Margin reset + heading ────────────────────────────── */
.tiance-m0-heading         { margin: 0 0 16px; color: #333; }

/* ============================================================
   tiance-* Utility Classes — Round 2
   Second pass high-frequency inline style replacements.
   ============================================================ */

/* ── Table Cell 组合 ──────────────────────────────────── */
.tiance-td-left-muted       { text-align: left; padding: 10px; color: var(--tiance-text-sec); }
.tiance-td-right-p10        { padding: 10px; text-align: right; }
.tiance-td-right-p8-4       { text-align: right; padding: 8px 4px; }

/* ── Padding 组合 ────────────────────────────────────── */
.tiance-p-10-8              { padding: 10px 8px; }
.tiance-p-10-muted-sm       { padding: 10px; color: var(--tiance-text-muted); font-size: 0.85rem; }
.tiance-p-8-center-muted    { text-align: center; padding: 8px; color: var(--tiance-text-sec); }
.tiance-p-8-left            { padding: 8px; text-align: left; }
.tiance-p-6-12-sm           { padding: 6px 12px; font-size: 0.85rem; }

/* ── Color 单独 ──────────────────────────────────────── */
.tiance-color-muted         { color: var(--tiance-text-muted); }
.tiance-color-sec           { color: var(--tiance-text-sec); }
.tiance-color-teal          { color: var(--primary); }
.tiance-color-text3         { color: var(--text3); }
.tiance-color-slate         { color: #64748b; }
.tiance-color-gray-666     { color: #666; }
.tiance-color-gray-475      { color: #475569; }

/* ── Heading + color ──────────────────────────────────── */
.tiance-h-teal-28           { color: var(--primary); font-size: 28px; margin: 0; }
.tiance-h-admin-700-mb16    { font-size: 1rem; font-weight: 700; margin-bottom: 16px; color: var(--admin-text); }
.tiance-h-13-mb4            { font-size: 1.3rem; margin-bottom: 4px; }

/* ── Desc 组合 ────────────────────────────────────────── */
.tiance-desc-gray666-mt     { color: #666; margin: 8px 0 0; }
.tiance-desc-gray666-mb     { display: block; font-size: 13px; color: #666; margin-bottom: 6px; }
.tiance-desc-slate-sm       { color: #64748b; font-size: 0.85rem; }

/* ── Block label variants ──────────────────────────────── */
.tiance-block-label-gray    { display: block; font-size: 0.8rem; color: #475569; margin-bottom: 4px; }
.tiance-block-label-sec     { display: block; font-size: 0.85rem; color: var(--tiance-text-sec); margin-bottom: 4px; }

/* ── Border variants ────────────────────────────────────── */
.tiance-border-left-teal    { border-left: 4px solid var(--primary); }
.tiance-border-bottom-f1     { border-bottom: 1px solid #f1f5f9; }

/* ── Main variant (gray bg) ──────────────────────────── */
.tiance-main-gray           { margin-left: 220px; flex: 1; padding: 24px; background: #f0f2f5; min-height: 100vh; }

/* ── Margin top + bottom ──────────────────────────────── */
.tiance-mt8-mb4             { margin-top: var(--space-8); margin-bottom: var(--space-4); }

/* ── Empty center + bg ────────────────────────────────── */
.tiance-empty-center-lgp-bg { text-align: center; padding: var(--space-12) 0; background: var(--color-bg-secondary); border-radius: var(--radius-xl); }

/* ── Heading size + mb ────────────────────────────────── */
.tiance-h2xl-mb2            { font-size: var(--text-2xl); margin-bottom: var(--space-2); }

/* ============================================================
   tiance-* Utility Classes — Round 3
   Third pass: remaining 10+ frequency patterns.
   ============================================================ */

/* ── Margin Top ────────────────────────────────────────── */
.tiance-mt-16               { margin-top: 16px; }

/* ── Font Size single ─────────────────────────────────── */
.tiance-text-1rem           { font-size: 1rem; }
.tiance-text-078            { font-size: 0.78rem; }
.tiance-text-08             { font-size: 0.8rem; }
.tiance-text-16             { font-size: 1.6rem; }

/* ── Color single ─────────────────────────────────────── */
.tiance-color-teal          { color: var(--primary); }

/* ── Heading combinations ──────────────────────────────── */
.tiance-h3-mb16             { font-size: 1.1rem; font-weight: 600; margin: 0 0 16px; }
.tiance-h-teal-16           { font-size: 1.6rem; color: var(--primary); }

/* ── Block label variants ─────────────────────────────── */
.tiance-block-label-sec-b   { font-size: 0.8rem; color: var(--tiance-text-sec); display: block; margin-bottom: 4px; }
.tiance-block-label-slate-b { display: block; font-size: 0.8rem; color: #64748b; margin-bottom: 4px; font-weight: 600; }
.tiance-block-label-teal-b  { border-left: 4px solid #10b981; }
.tiance-block-label-semibold { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; }
.tiance-block-label-dark     { display: block; font-size: 0.85rem; color: #374151; margin-bottom: 6px; }

/* ── Text center + extras ─────────────────────────────── */
.tiance-text-center-xs      { text-align: center; font-size: var(--text-xs); }
.tiance-text-center-nolink  { text-decoration: none; text-align: center; }
.tiance-empty-center-admin  { text-align: center; padding: 48px; color: var(--admin-text3); }

/* ── Heading 3xl + mb4 ───────────────────────────────── */
.tiance-h3xl-mb4            { font-size: var(--text-3xl); margin-bottom: var(--space-4); }

/* ============================================================
   Responsive Breakpoints — Tablet (768px–1023px)
   确保关键模板在 iPad 等平板设备上正常显示
   ============================================================ */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --container-padding: 32px;
  }

  /* ── 网格布局缩减为2列 ─────────────────────────────── */
  .tiance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── 侧边栏自适应 ───────────────────────────────────── */
  .tiance-sidebar {
    width: 200px;
  }

  .tiance-main,
  .tiance-main-gray {
    margin-left: 200px;
    padding: 20px;
  }

  /* ── 页面布局缩减 ───────────────────────────────────── */
  .tiance-container {
    padding: 20px;
  }

  /* ── 3列布局 → 2列 ──────────────────────────────────── */
  .tiance-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── 4列布局 → 2列 ──────────────────────────────────── */
  .tiance-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* ── 表格横向滚动 ───────────────────────────────────── */
  .tiance-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 卡片间距调整 ───────────────────────────────────── */
  .tiance-card {
    padding: 16px;
  }

  /* ── 按钮组不换行时缩小间距 ─────────────────────────── */
  .tiance-btn-group {
    gap: 8px;
  }

  /* ── 模态框宽度适配 ─────────────────────────────────── */
  .tiance-modal-content {
    max-width: 90vw;
    max-height: 85vh;
  }
}

/* ============================================================
   Responsive Breakpoints — Mobile (<768px)
   小屏设备基础适配
   ============================================================ */
@media (max-width: 767px) {
  :root {
    --container-padding: 16px;
  }

  /* ── 网格布局单列 ───────────────────────────────────── */
  .tiance-grid {
    grid-template-columns: 1fr;
  }

  .tiance-grid-3,
  .tiance-grid-4 {
    grid-template-columns: 1fr;
  }

  /* ── 侧边栏隐藏（移动端用汉堡菜单） ────────────────── */
  .tiance-sidebar {
    display: none;
  }

  .tiance-main,
  .tiance-main-gray {
    margin-left: 0;
    padding: 16px;
  }

  /* ── 页面布局 ───────────────────────────────────────── */
  .tiance-container {
    padding: 12px;
  }

  .tiance-page-flex {
    flex-direction: column;
  }

  /* ── Flex 布局折叠 ──────────────────────────────────── */
  .tiance-flex-between,
  .tiance-flex-between-mb16,
  .tiance-flex-between-mb24,
  .tiance-flex-between-mb24-wrap {
    flex-direction: column;
    align-items: flex-start;
  }

  /* ── 表格横向滚动 ───────────────────────────────────── */
  .tiance-table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 模态框全屏 ─────────────────────────────────────── */
  .tiance-modal-content {
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
}

/* ============================================================
   Responsive Breakpoints — Ultra Small Mobile (≤375px)
   iPhone SE / Galaxy Fold 等超小屏设备专用适配
   ============================================================ */
@media (max-width: 375px) {
  :root {
    --container-padding: var(--breakpoint-xs-padding, 12px);
    font-size: var(--breakpoint-xs-font-size, 13px);
  }

  /* ── 容器内边距最小化 ───────────────────────────────── */
  .tiance-container,
  .tiance-main,
  .tiance-main-gray {
    padding: var(--breakpoint-xs-padding, 12px);
  }

  /* ── 卡片内边距缩减 ─────────────────────────────────── */
  .tiance-card,
  .tiance-p-20,
  .tiance-p-24 {
    padding: 12px;
  }

  /* ── 间距压缩 ───────────────────────────────────────── */
  .tiance-mb-20,
  .tiance-mb-24,
  .tiance-mb-28 {
    margin-bottom: 12px;
  }

  .tiance-mb-space8,
  .tiance-mb-space12,
  .tiance-mb-space16 {
    margin-bottom: 16px;
  }

  /* ── 标题缩小 ───────────────────────────────────────── */
  .tiance-h2,
  .tiance-h3-heading-lg,
  .tiance-h4-heading {
    font-size: 1.1rem;
  }

  .tiance-h3,
  .tiance-heading-mb16,
  .tiance-h3-mb16,
  .tiance-section-header {
    font-size: 0.95rem;
  }

  /* ── 大数字 KPI 缩小 ────────────────────────────────── */
  .tiance-big-number,
  .tiance-big-number-space {
    font-size: 1.8rem;
  }

  /* ── 表格紧凑模式 ───────────────────────────────────── */
  .tiance-table,
  .tiance-table-sm,
  .tiance-table-090 {
    font-size: 0.75rem;
  }

  .tiance-td-right,
  .tiance-td-center,
  .tiance-td-left,
  .tiance-th-right,
  .tiance-th-center,
  .tiance-th-left {
    padding: 6px 4px;
  }

  /* ── Flex 间距最小化 ────────────────────────────────── */
  .tiance-flex-between-wrap {
    gap: var(--breakpoint-xs-gap, 8px);
  }

  .tiance-flex-gap-sm,
  .tiance-flex-gap-md {
    gap: var(--breakpoint-xs-gap, 8px);
  }

  /* ── 页面区块间距压缩 ───────────────────────────────── */
  .tiance-empty-large {
    padding: 40px 12px;
  }

  .tiance-empty-gray {
    padding: 24px;
  }

  /* ── 按钮全宽 ───────────────────────────────────────── */
  .tiance-btn-group {
    flex-direction: column;
    width: 100%;
  }

  .tiance-btn-group > * {
    width: 100%;
  }

  /* ── 侧边栏节标题缩小 ───────────────────────────────── */
  .tiance-section-header {
    padding: 0 12px 12px;
    margin-bottom: 12px;
  }

  /* ── 表单元素紧凑 ───────────────────────────────────── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px; /* 防止 iOS 自动缩放 */
  }
}