*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; } body { font-family: var(--font-sans); font-size: var(--type-body); line-height: var(--leading-ui); background: var(--bg); color: #1c1b1f; overflow: hidden; height: 100vh; display: flex; -webkit-font-smoothing: antialiased; } button, input, textarea, select { font-family: inherit; } :root { /* @tokens 全局设计变量 — 移植到 React 时对应 theme/tokens.css */ --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif; /* 全站排版层级：只按文本角色取值，图标和展示数字可保留独立视觉尺寸。 */ --type-caption: 12px; --type-ui: 14px; --type-body: 16px; --type-title-sm: 18px; --type-title: 20px; --type-heading: 24px; --type-display: 32px; --leading-tight: 1.35; --leading-title: 1.45; --leading-ui: 1.5; --leading-body: 1.75; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --bg: #f8f9fa; /* 页面底色 */ --white: #ffffff; --on-surface: #1c1b1f; --on-surface-variant: #49454f; --primary: #6750a4; --on-primary: #ffffff; --primary-container: #eaddff; --outline: #79747e; --border: #e8e8ed; --hover-bg: #f3f4f6; --error: #b3261e; /* === 紫色皮肤变量（默认）=== */ --primary-rgb: 103, 80, 164; --primary-dark: #5a3f9a; /* hover/active 加深 */ --primary-light: #9c7cec; /* 渐变终点/浅色强调 */ --primary-muted: #b39ddb; /* 更柔和的浅紫 */ --primary-soft: #7e6ab2; /* 主色浅一档：选中/激活态深色显示 */ /* === 语义化透明度色阶（全部从 --primary-rgb 派生）=== */ --alpha-03: rgba(var(--primary-rgb), 0.03); --alpha-04: rgba(var(--primary-rgb), 0.04); --alpha-05: rgba(var(--primary-rgb), 0.05); --alpha-06: rgba(var(--primary-rgb), 0.06); --alpha-08: rgba(var(--primary-rgb), 0.08); --alpha-10: rgba(var(--primary-rgb), 0.10); --alpha-12: rgba(var(--primary-rgb), 0.12); --alpha-18: rgba(var(--primary-rgb), 0.18); --alpha-20: rgba(var(--primary-rgb), 0.20); --alpha-25: rgba(var(--primary-rgb), 0.25); --alpha-30: rgba(var(--primary-rgb), 0.30); --alpha-35: rgba(var(--primary-rgb), 0.35); --alpha-40: rgba(var(--primary-rgb), 0.40); --alpha-55: rgba(var(--primary-rgb), 0.55); } /* ═══════════════════════════════════════════════════ 皮肤系统 — 通过 切换 ═══════════════════════════════════════════════════ */ /* 典雅紫（默认）— 淡紫灰底，宁静典雅 */ [data-theme="purple"] { --primary: #6750a4; --primary-rgb: 103,80,164; --primary-dark: #5a3f9a; --primary-light: #9c7cec; --primary-muted: #b39ddb; --primary-soft: #7e6ab2; --primary-container: #eaddff; --bg: #f8f6fc; --hover-bg: #f2eef8; } /* 天空蓝 — 清冷淡蓝底，如晴空 */ [data-theme="blue"] { --primary: #1976d2; --primary-rgb: 25,118,210; --primary-dark: #1565c0; --primary-light: #64b5f6; --primary-muted: #90caf9; --primary-soft: #3c8bd9; --primary-container: #d1e4ff; --bg: #f2f6fb; --hover-bg: #e8eef7; } /* 森林绿 — 微绿底，自然舒适 */ [data-theme="green"] { --primary: #2e7d32; --primary-rgb: 46,125,50; --primary-dark: #1b5e20; --primary-light: #81c784; --primary-muted: #a5d6a7; --primary-soft: #4d9151; --primary-container: #dcedc8; --bg: #f2f7f2; --hover-bg: #e8f0e8; } /* 活力橙 — 暖杏底，温暖有活力 */ [data-theme="orange"] { --primary: #e65100; --primary-rgb: 230,81,0; --primary-dark: #bf360c; --primary-light: #ffb74d; --primary-muted: #ffcc80; --primary-soft: #ee854c; --primary-container: #ffe0b2; --bg: #fef8f3; --hover-bg: #faf0e8; } /* 樱花粉 — 浅粉底，柔美浪漫 */ [data-theme="pink"] { --primary: #c2185b; --primary-rgb: 194,24,91; --primary-dark: #880e4f; --primary-light: #f48fb1; --primary-muted: #f8bbd0; --primary-soft: #d45d8c; --primary-container: #f8bbd0; --bg: #fef9fb; --hover-bg: #fcf0f4; } /* 暗夜黑 — 深黑底，护眼沉静 */ [data-theme="dark"] { --primary: #bb86fc; --primary-rgb: 187,134,252; --primary-dark: #9c64e5; --primary-light: #d4b8ff; --primary-muted: #b39ddb; --primary-soft: #c598fc; --primary-container: #332940; --bg: #121212; --hover-bg: #2a2a2a; --white: #1e1e1e; --on-surface: #e0e0e0; --on-surface-variant: #b0b0b0; --border: #3a3a3a; --hover-bg: #2a2a2a; --outline: #666666; --error: #cf6679; } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 4px; } .svg-icon { width: 20px; height: 20px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; } .svg-icon svg { width: 100%; height: 100%; }