/* 现代浅色主题 — 全部设计变量 */
:root[data-theme='ModernLight'] {
  /* 主色调 */
  --primary: #a78bfa;
  --primary-hover: #9580fa;
  --primary-light: rgba(167, 139, 250, 0.1);
  --primary-border: rgba(167, 139, 250, 0.2);
  /* 控件强调色（与 --primary 一致，供 accent-color 使用） */
  --accent-color: #a78bfa;
  /* 主色光晕（供阴影 glow 使用） */
  --primary-glow: rgba(167, 139, 250, 0.07);
  --primary-glow-5: rgba(167, 139, 250, 0.03);
  --primary-glow-10: rgba(167, 139, 250, 0.06);
  --primary-glow-20: rgba(167, 139, 250, 0.12);
  --primary-glow-40: rgba(167, 139, 250, 0.25);
  /* 成功色光晕 */
  --success-glow: rgba(52, 211, 153, 0.07);
  --success-glow-5: rgba(52, 211, 153, 0.03);
  --success-glow-10: rgba(52, 211, 153, 0.06);
  --success-glow-20: rgba(52, 211, 153, 0.12);
  /* 警告色光晕 */
  --warning-glow: rgba(251, 191, 36, 0.07);
  --warning-glow-5: rgba(251, 191, 36, 0.03);
  --warning-glow-10: rgba(251, 191, 36, 0.06);
  --warning-glow-20: rgba(251, 191, 36, 0.12);
  /* 错误色光晕 */
  --error-glow: rgba(248, 113, 113, 0.07);
  --error-glow-5: rgba(248, 113, 113, 0.03);
  --error-glow-10: rgba(248, 113, 113, 0.06);
  --error-glow-20: rgba(248, 113, 113, 0.12);
  /* 成功色 */
  --success: #34d399;
  --success-hover: #10b981;
  --success-light: rgba(52, 211, 153, 0.1);
  --success-border: rgba(52, 211, 153, 0.18);
  /* 警告色 */
  --warning: #fbbf24;
  --warning-hover: #f59e0b;
  --warning-light: rgba(251, 191, 36, 0.1);
  --warning-border: rgba(251, 191, 36, 0.18);
  /* 错误色 */
  --error: #f87171;
  --error-hover: #ef4444;
  --error-light: rgba(248, 113, 113, 0.1);
  --error-border: rgba(248, 113, 113, 0.18);
  /* 信息色光晕 */
  --info: #38bdf8;
  --info-hover: #0ea5e9;
  --info-light: rgba(56, 189, 248, 0.1);
  --info-border: rgba(56, 189, 248, 0.18);
  /* 信息色光晕（蓝色系，与 info 品牌色一致） */
  --info-glow: rgba(56, 189, 248, 0.07);
  --info-glow-5: rgba(56, 189, 248, 0.03);
  --info-glow-10: rgba(56, 189, 248, 0.06);
  --info-glow-20: rgba(56, 189, 248, 0.12);
  /* 背景色 */
  --bg-primary: #fcfcfa;
  --bg-secondary: #f9f8f5;
  --bg-tertiary: #f3f2ee;
  --bg-quaternary: #edeae5;
  --bg-hover: #f7f6f2;
  /* 文字颜色 */
  --text-primary: #333338;
  --text-secondary: #7a7a8a;
  --text-tertiary: #9a9aa8;
  --text-quaternary: #adadb8;
  --text-disabled: #d0d0d5;
  /* 边框颜色 */
  --border-primary: #eae8ef;
  --border-secondary: #e2dfea;
  --border-tertiary: #d4d0df;
  --border-quaternary: #b9b5c9;
  --border-color: var(--border-tertiary);
  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(167, 139, 250, 0.02);
  --shadow-md: 0 2px 6px rgba(167, 139, 250, 0.03);
  --shadow-lg: 0 8px 20px rgba(167, 139, 250, 0.05);
  --shadow-xl: 0 12px 28px rgba(167, 139, 250, 0.07);
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  /* 字体大小 */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  /* 字体粗细 */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  /* 过渡动画 */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;
  /* Z-index层级 */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-app-loader: 9000;
  /* 特殊状态颜色 */
  --status-pending: #fbbf24;
  --status-pending-light: rgba(251, 191, 36, 0.1);
  --status-approved: #34d399;
  --status-approved-light: rgba(52, 211, 153, 0.1);
  --status-played: #aeaeb8;
  --status-played-light: rgba(174, 174, 184, 0.1);
  /* 投票相关颜色 */
  --vote-heart: #f87171;
  --vote-heart-hover: #ef4444;
  --vote-count: var(--text-tertiary);
  /* 拖拽状态颜色 */
  --drag-over: var(--primary-light);
  --drag-over-border: var(--primary);
  --dragging-opacity: 0.5;
  /* 表格颜色 */
  --table-header-bg: var(--bg-tertiary);
  --table-row-hover: var(--bg-hover);
  --table-border: var(--border-secondary);
  --table-selected: var(--primary-light);
  /* 卡片颜色 */
  --card-bg: var(--bg-secondary);
  --card-border: var(--border-secondary);
  --card-hover-border: var(--border-tertiary);
  --card-shadow: var(--shadow-md);
  /* 按钮颜色 */
  --btn-primary-bg: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-text: #ffffff;
  --btn-primary-border: var(--primary-border);

  --btn-secondary-bg: #f9f8f5;
  --btn-secondary-hover: #f3f2ee;
  --btn-secondary-text: var(--text-primary);
  --btn-secondary-border: #d4d0df;

  --btn-success-bg: var(--success);
  --btn-success-hover: var(--success-hover);
  --btn-success-text: #ffffff;
  --btn-success-border: var(--success-border);

  --btn-warning-bg: var(--warning);
  --btn-warning-hover: var(--warning-hover);
  --btn-warning-text: #ffffff;
  --btn-warning-border: var(--warning-border);

  --btn-error-bg: var(--error);
  --btn-error-hover: var(--error-hover);
  --btn-error-text: #ffffff;
  --btn-error-border: var(--error-border);

  --btn-disabled-bg: var(--bg-tertiary);
  --btn-disabled-text: var(--text-disabled);
  /* 输入框颜色 */
  --input-bg: var(--bg-tertiary);
  --input-border: var(--border-tertiary);
  --input-border-focus: var(--primary);
  --input-text: var(--text-primary);
  --input-placeholder: var(--text-quaternary);
  --input-shadow-focus: 0 0 0 3px var(--primary-light);
  /* 模态框颜色 */
  --modal-backdrop: rgba(0, 0, 0, 0.3);
  --modal-bg: var(--bg-secondary);
  --modal-border: var(--border-secondary);
  --modal-header-border: var(--border-secondary);
  --modal-footer-border: var(--border-secondary);
  /* 通知颜色 */
  --notification-success-bg: var(--success-light);
  --notification-success-border: var(--success-border);
  --notification-success-text: var(--success);

  --notification-warning-bg: var(--warning-light);
  --notification-warning-border: var(--warning-border);
  --notification-warning-text: var(--warning);

  --notification-error-bg: var(--error-light);
  --notification-error-border: var(--error-border);
  --notification-error-text: var(--error);

  --notification-info-bg: var(--info-light);
  --notification-info-border: var(--info-border);
  --notification-info-text: var(--info);
  /* 加载动画颜色 */
  --spinner-primary: var(--primary);
  --spinner-secondary: var(--bg-tertiary);
  /* 滚动条颜色 */
  --scrollbar-track: var(--bg-tertiary);
  --scrollbar-thumb: var(--bg-quaternary);
  --scrollbar-thumb-hover: #b0b0b0;
  /* 用途化变量 — 品牌色（已语义化：blue=通用强调色, red=错误, green=成功, yellow=警告） */
  --color-accent: #a78bfa;
  --color-accent-light: #c4b5fd;
  --color-accent-hover: #9580fa;
  --color-accent-light-hover: #8b68fa;
  --color-accent-lighter: #ddd6fe;
  --color-accent-glow: rgba(167, 139, 250, 0.25);
  --color-error: #f87171;
  --color-error-light: #fca5a5;
  --color-error-hover: #ef4444;
  --color-error-glow: rgba(248, 113, 113, 0.25);
  --color-success: #34d399;
  --color-success-light: #6ee7b7;
  --color-success-hover: #22c55e;
  --color-success-glow: rgba(52, 211, 153, 0.25);
  --color-warning: #fbbf24;
  --color-warning-light: #fde047;
  --color-warning-hover: #f59e0b;
  --color-warning-glow: rgba(251, 191, 36, 0.25);
  /* --color-warning 透明度变体 */
  --color-warning-alpha-14: rgba(251, 191, 36, 0.14);
  --color-warning-alpha-24: rgba(251, 191, 36, 0.24);
  --color-warning-alpha-48: rgba(251, 191, 36, 0.48);
  --color-orange: #fdba74;
  --color-orange-light: #fed7aa;
  --color-orange-hover: #fb923c;
  --color-orange-glow: rgba(251, 146, 60, 0.25);

  /* === Alpha (--color-accent) ===
   以下为 --color-accent 的各透明度变体（alpha-前缀 + 透明度百分比）===
   --color-accent-alpha-10 ~ --color-accent-alpha-80 对应原 --color-accent-* 系列 === */
  --color-accent-alpha-10: rgba(167, 139, 250, 0.07);
  --color-accent-alpha-12: rgba(167, 139, 250, 0.1);
  --color-accent-alpha-15: rgba(167, 139, 250, 0.12);
  --color-accent-alpha-18: rgba(167, 139, 250, 0.14);
  --color-accent-alpha-20: rgba(167, 139, 250, 0.13);
  --color-accent-alpha-22: rgba(167, 139, 250, 0.22);
  --color-accent-alpha-25: rgba(167, 139, 250, 0.2);
  --color-accent-alpha-30: rgba(167, 139, 250, 0.2);
  --color-accent-alpha-40: rgba(167, 139, 250, 0.25);
  --color-accent-alpha-50: rgba(167, 139, 250, 0.32);
  --color-accent-alpha-60: rgba(167, 139, 250, 0.4);
  --color-accent-alpha-65: rgba(167, 139, 250, 0.5);
  --color-accent-alpha-80: rgba(167, 139, 250, 0.48);

  /* 用途化变量 — 通知/状态/场景语义色（用途命名，替代原 --color-brand-* 颜色命名）
   ═══════════════════════════════════════════════════════════════
   新增 --color-accent-alpha-* / --color-collab / --color-indigo 等语义变量后，
   以下变量供全局 CSS / Vue 组件统一引用，避免直接在业务代码中硬写颜色值。 === */

  /* ─── 通知图标颜色（index.vue 通知列表） ─── */
  --color-notif-info: var(--color-accent);
  --color-notif-success: var(--color-success);
  --color-notif-error: var(--color-error);
  --color-notif-warning: var(--color-warning);
  --color-notif-checked: var(--color-accent);
  --color-notif-collab: var(--color-collab);
  --color-notif-indigo: var(--color-indigo);
  /* ─── 通知容器/Toast 语义色（Notification.vue / NotificationContainer.vue） ─── */
  --color-toast-success: var(--color-success);
  --color-toast-error: var(--color-error);
  --color-toast-info-bg: var(--color-accent-alpha-20);
  --color-toast-info-text: var(--color-accent);
  /* ─── 通用 UI 组件语义色 ─── */
  --color-checked: var(--color-accent);
  /* 勾选框选中颜色 */
  --color-search-focus: var(--color-accent);
  /* 搜索框 focus 边框 */
  --color-search-btn-bg: var(--color-accent);
  /* 搜索按钮背景 */
  --color-progress-fill: var(--color-accent);
  /* 进度条填充色 */
  --color-spinner-border: var(--color-accent);
  /* 加载指示器边框 */
  --color-tab-active: var(--color-accent);
  /* Tab 激活下边框 */
  --color-page-btn-active: var(--color-accent);
  /* 分页按钮激活态 */
  --color-checkbox-checked: var(--color-accent-light);
  /* 勾选框选中态背景 */
  --color-checkbox-checked-border: var(--color-accent-light);
  --color-mobile-page-input: var(--color-accent);
  /* 移动端页码输入框 focus */
  --color-page-nav-hover: var(--color-accent-light);
  /* 翻页按钮 hover 边框 */
  --color-visibility-public: var(--color-accent-light);
  /* 歌曲可见性"公开"标签 */
  --color-text-cover-bg: var(--color-accent);
  /* 文字封面背景 */
  --color-like-btn-bg: var(--color-accent);
  /* 点赞按钮背景 */
  --color-replay-cancel-bg: var(--color-accent);
  /* 重播取消按钮背景 */
  --color-semester-toggle: var(--color-accent);
  /* 学期切换按钮文字 */
  --color-admin-badge: var(--color-accent-light);
  /* 管理员徽章文字 */
  --color-error-text: var(--color-error);
  /* 错误文本 */
  --color-pending-tag: var(--color-warning-light);
  /* 等待中标签 */
  /* 首页标题分隔线 */
  --title-divider-bg: #c4b5fd;
  --like-btn-bg: #ffffff;
  --like-btn-hover-bg: rgba(167, 139, 250, 0.08);
  --like-btn-border: rgba(167, 139, 250, 0.55);
  --song-card-border: #d7d3e2;
  --song-card-bg: #ffffff;
  --song-card-footer-bg: #ffffff;
  --song-card-divider: var(--panel-border-subtle);
  --chip-bg: #ffffff;
  --chip-bg-hover: var(--bg-hover);
  --chip-border: var(--panel-border-highlight);
  --like-btn-bg-mobile: #ffffff;
  --like-btn-border-mobile: rgba(167, 139, 250, 0.55);
  --withdraw-btn-bg-mobile: var(--error-light);
  --section-tab-bg: #ffffff;
  --section-tab-border: var(--song-card-border);
  --surface-subtle: #ffffff;
  --surface-card-bg: var(--mask-5);
  --surface-card-bg-medium: var(--mask-30);
  --surface-card-bg-soft: var(--mask-20);
  /* ─── OAuth 第三方平台独立品牌色（用途命名 --oauth-*，不再复用通用语义色）───
   每个平台有专属颜色变量，语义清晰，互不干扰。
   旧 --color-oauth-* 保留向后兼容，但新增 --oauth-* 系列为主用。 === */
  --oauth-qq: #67e8f9;
  --oauth-wx: #34d399;
  --oauth-alipay: #93c5fd;
  --oauth-sina: #fca5a5;
  --oauth-baidu: #c4b5fd;
  --oauth-douyin: #fda4af;
  --oauth-huawei: #fca5a5;
  --oauth-xiaomi: #fed7aa;
  --oauth-gitee: #fca5a5;
  --oauth-bilibili: #22d3ee;
  --oauth-kuaishou: #fd8c6a;
  --oauth-kuaishou-orange: var(--oauth-kuaishou);
  --oauth-google-blue: #93c5fd;
  --oauth-google-red: #fca5a5;
  --oauth-google-yellow: #fde047;
  --oauth-google-green: #86efac;
  --oauth-casdoor: #a3e635;
  --oauth-casdoor-green: var(--oauth-casdoor);
  /* Gitea 品牌路径的镂空色（供 Icon.vue SVG path 使用） */
  --gitea-cutout: var(--panel-bg-dialog);
  /* ─── Auth/OAuth 品牌色（旧命名，向后兼容，指向新 --oauth-* 系列）─── */
  --color-oauth-qq: var(--oauth-qq);
  --color-oauth-wx: var(--oauth-wx);
  --color-oauth-alipay: var(--oauth-alipay);
  --color-oauth-sina: var(--oauth-sina);
  --color-oauth-baidu: var(--oauth-baidu);
  --color-oauth-douyin: var(--oauth-douyin);
  --color-oauth-huawei: var(--oauth-huawei);
  --color-oauth-xiaomi: var(--oauth-xiaomi);
  --color-oauth-gitee: var(--oauth-gitee);
  --color-oauth-bilibili: var(--oauth-bilibili);
  --color-oauth-kuaishou: var(--oauth-kuaishou);
  --requestform-audio-match-hover-border: rgba(167, 139, 250, 0.25);
  --requestform-audio-match-hover-border-light: rgba(167, 139, 250, 0.15);
  --requestform-qq-login-shadow: rgba(34, 211, 238, 0.1);
  --requestform-qq-login-shadow-hover: rgba(34, 211, 238, 0.18);
  --requestform-user-icon-bg: rgba(34, 211, 238, 0.1);
  --requestform-user-icon-border: rgba(34, 211, 238, 0.18);
  --requestform-login-btn-hover-shadow: rgba(167, 139, 250, 0.28);
  --requestform-login-btn-hover-shadow-lg: rgba(167, 139, 250, 0.35);
  --requestform-like-btn-hover-shadow: rgba(248, 113, 113, 0.28);
  --requestform-like-btn-hover-shadow-lg: rgba(248, 113, 113, 0.35);
  --requestform-source-healthy-bg: rgba(52, 211, 153, 0.12);
  --requestform-source-healthy-border: rgba(52, 211, 153, 0.25);
  --requestform-source-healthy-glow: rgba(52, 211, 153, 0.48);
  --requestform-source-checking-bg: rgba(251, 191, 36, 0.12);
  --requestform-source-checking-border: rgba(251, 191, 36, 0.25);
  --requestform-source-checking-glow: rgba(251, 191, 36, 0.48);
  --requestform-modal-overlay-bg: rgba(30, 30, 35, 0.95);
  --requestform-submit-btn-hover-shadow: rgba(167, 139, 250, 0.3);
  --requestform-delete-btn-hover-shadow: rgba(248, 113, 113, 0.4);
  --requestform-delete-btn-hover-shadow-sm: rgba(248, 113, 113, 0.24);
  --requestform-replay-btn-bg: rgba(167, 139, 250, 0.08);
  --requestform-replay-btn-bg-hover: rgba(167, 139, 250, 0.15);
  --requestform-replay-btn-border: rgba(167, 139, 250, 0.24);
  --requestform-replay-btn-border-hover: rgba(167, 139, 250, 0.4);
  --requestform-mobile-chip-border: rgba(160, 160, 160, 0.38);
  --requestform-mobile-chip-border-sm: rgba(160, 160, 160, 0.32);
  --requestform-mobile-chip-bg: rgba(243, 243, 243, 0.6);
  --requestform-mobile-chip-text: rgba(30, 30, 30, 0.75);
  --requestform-mobile-button-text: rgba(30, 30, 30, 0.75);
  --requestform-chip-required-bg: rgba(251, 191, 36, 0.08);
  --requestform-chip-required-border: rgba(251, 191, 36, 0.28);
  --requestform-chip-required-border-sm: rgba(251, 191, 36, 0.24);
  --requestform-chip-valid-border: rgba(52, 211, 153, 0.28);
  --requestform-chip-invalid-bg: rgba(248, 113, 113, 0.08);
  --requestform-chip-invalid-border: rgba(248, 113, 113, 0.28);
  /* 用途化变量 — 音频播放器（AudioPlayer） */
  --audio-player-bar-bg: rgba(30, 30, 35, 0.75);
  --audio-player-progress-track-bg: rgba(160, 160, 160, 0.25);
  --audio-player-quality-active-bg-start: rgba(167, 139, 250, 0.2);
  --audio-player-quality-active-bg-mid: rgba(167, 139, 250, 0.12);
  --audio-player-quality-active-bg-end: rgba(167, 139, 250, 0.08);
  --audio-player-quality-active-border: rgba(167, 139, 250, 0.48);
  --audio-player-quality-active-shadow-lg: rgba(167, 139, 250, 0.32);
  --audio-player-quality-active-shadow: rgba(167, 139, 250, 0.24);
  --audio-player-quality-active-ring: rgba(167, 139, 250, 0.16);
  /* 用途化变量 — 音量控制（VolumeControl） */
  --volume-control-panel-bg: rgba(245, 245, 245, 0.7);
  --volume-control-muted-color: rgba(255, 100, 100, 0.7);
  /* 用途化变量 — 备份管理器（BackupManager） */
  --backup-manager-danger-bg: rgba(248, 113, 113, 0.08);
  --backup-manager-file-remove-bg: rgba(248, 113, 113, 0.15);
  --backup-manager-file-remove-bg-hover: rgba(248, 113, 113, 0.24);
  --backup-manager-warning-box-bg: rgba(253, 186, 116, 0.1);
  /* 用途化变量 — 用户歌曲模态框滚动条（UserSongsModal） */
  --usersongs-scroll-thumb: rgba(160, 160, 160, 0.24);
  --usersongs-scroll-thumb-hover: rgba(160, 160, 160, 0.4);
  /* 用途化变量 — 用户管理器（UserManager） */
  --user-manager-tree-line: rgba(160, 160, 160, 0.44);
  --user-manager-tree-active-bg: rgba(167, 139, 250, 0.1);
  /* 用途化变量 — 数据分析面板滚动条（DataAnalysisPanel） */
  --data-analysis-scroll-thumb: rgba(167, 139, 250, 0.24);
  --data-analysis-scroll-thumb-hover: rgba(167, 139, 250, 0.4);
  /* 用途化变量 — 歌曲列表（ScheduleList/SongList） */
  --schedule-list-divider: rgba(160, 160, 160, 0.4);
  --schedule-list-title-shadow: rgba(167, 139, 250, 0.24);
  --schedule-list-title-shadow-sm: rgba(167, 139, 250, 0.16);
  /* 用途化变量 — 点歌券标识（CardCodeTag） */
  --card-code-bg: rgba(251, 191, 36, 0.08);
  --card-code-border: rgba(251, 191, 36, 0.2);
  --card-code-text: #f59e0b;
  /* 用途化变量 — 认证模块（Auth） */
  --auth-error-input-shadow: rgba(248, 113, 113, 0.08);
  /* 用途化变量 — 面板背景色（亮色模式） */
  --panel-bg: #fcfcfa;
  --panel-bg-alt: #f9f8f5;
  --panel-bg-hover: #f3f2ee;
  --panel-bg-deep: #f0eef5;
  --panel-bg-deepest: #f9f8f5;
  --panel-bg-overlay: #f9f8f5;
  --panel-bg-elevated: #ffffff;
  --panel-bg-dialog: #ffffff;
  --panel-bg-subtle: #f9f8f5;
  --panel-bg-tier-tertiary: #edeae5;
  --panel-bg-quaternary: #f7f6f2;
  --panel-bg-contrast: #f9f8f5;
  --panel-bg-dark: #f0eef5;
  --panel-bg-darker: #f7f6f2;
  --panel-bg-darkest: #edeae5;
  --panel-bg-compact: #f9f8f5;
  --panel-bg-flat: #ffffff;
  --panel-bg-raised: #ffffff;
  --panel-bg-inset: #f7f6f2;
  /* 面板背景色 alpha 变体 */
  --panel-bg-dark-40: rgba(240, 238, 245, 0.4);
  --panel-bg-dark-50: rgba(240, 238, 245, 0.5);
  --panel-bg-dark-80: rgba(240, 238, 245, 0.8);
  --panel-bg-darkest-20: rgba(237, 234, 229, 0.2);
  --panel-bg-darkest-30: rgba(237, 234, 229, 0.3);
  --panel-bg-darkest-40: rgba(237, 234, 229, 0.4);
  --panel-bg-darkest-50: rgba(237, 234, 229, 0.5);
  --panel-bg-darkest-60: rgba(237, 234, 229, 0.6);
  --panel-bg-darkest-80: rgba(237, 234, 229, 0.8);
  --panel-bg-darkest-95: rgba(237, 234, 229, 0.95);
  --panel-bg-deepest-30: rgba(249, 248, 245, 0.3);
  --panel-bg-deepest-40: rgba(249, 248, 245, 0.4);
  --panel-bg-deepest-50: rgba(249, 248, 245, 0.5);
  --panel-bg-deepest-80: rgba(249, 248, 245, 0.8);
  --panel-bg-deepest-95: rgba(249, 248, 245, 0.95);
  --panel-bg-hover-50: rgba(243, 242, 238, 0.5);
  /* 通用表面色（无 panel 前缀） */
  --panel-bg-secondary: #f3f2ee;
  --panel-bg-tertiary: #edeae5;
  --table-row-bg: #fcfcfa;
  /* 用途化变量 — 文字灰度（亮色模式） */
  --text-muted: #9a9aa8;
  --text-muted-light: #adadb8;
  --text-muted-dark: #7a7a8a;
  --text-tertiary-hover: #7a7a8a;
  --text-primary-light: #333338;
  --text-primary-lighter: #4a4a5e;
  --text-link: #a78bfa;
  --text-link-hover: #9580fa;
  --text-highlight: #92400e;
  /* 用途化变量 — 边框与分割线（亮色模式） */
  --panel-border: #e2dfea;
  --panel-border-active: #a78bfa;
  --panel-border-subtle: #edeaf2;
  --panel-border-10: rgba(243, 242, 238, 0.1);
  --panel-border-light: #e2dfea;
  --panel-border-dark: #b9b5c9;
  --panel-border-highlight: #d4d0df;
  --panel-border-brand: #a78bfa;
  --panel-border-error: #f87171;
  /* 用途化变量 — 状态色（亮色模式） */
  --status-info-bg: #f0f9ff;
  --status-info-border: #38bdf8;
  --status-info-glow: rgba(56, 189, 248, 0.1);
  --status-info-icon: #38bdf8;
  --status-success-icon: #34d399;
  --status-warning-icon: #fde047;
  --status-error-icon: #f87171;
  --status-error-deep: #f87171;

  /* 用途化变量 — 通知/状态语义色与场景渐变辅助色（替代原 --color-collab/pink/cyan/teal/indigo）
   collab=协作, pink=年度回顾装饰, cyan=QQ/抖音, teal=QQ登录按钮, indigo=选中通知 === */
  --color-collab: #a78bfa;
  --color-collab-hover: #9580fa;
  --color-collab-light: #c4b5fd;
  --color-collab-lighter: #ede9fe;
  --color-collab-glow: rgba(167, 139, 250, 0.24);
  --color-collab-10: rgba(167, 139, 250, 0.1);
  --color-pink: #f9a8d4;
  --color-pink-alpha-10: rgba(249, 168, 212, 0.08);
  --color-pink-alpha-20: rgba(249, 168, 212, 0.15);

  /* === 语义化视觉覆盖层变量 ===
   --shadow-color / --shadow-color-deep : 卡片悬浮阴影
   --modal-overlay                    : 全屏弹窗遮罩
   --shimmer-overlay                  : 加载 shimmer 光效 */
  --shadow-color: rgba(0, 0, 0, 0.2);
  --shadow-color-deep: rgba(0, 0, 0, 0.4);
  --modal-overlay: rgba(0, 0, 0, 0.8);
  --shimmer-overlay: rgba(255, 255, 255, 0.2);

  --color-cyan: #67e8f9;
  --color-teal: #22d3ee;
  --color-indigo: #a78bfa;
  --color-indigo-rgb: 167 139 250;
  --color-indigo-hover: #c4b5fd;
  /* 选中文本背景色（供 ::selection 使用） */
  --selection-bg: rgba(167, 139, 250, 0.25);

  /* === WarpCanvas 星空配色（用途命名，替代原 --color-collab/indigo 语义歧义） ===
   以下变量别名指向 --color-collab / --color-indigo，保持视觉一致性的同时语义更清晰 === */
  --warp-canvas-primary: var(--color-collab);
  --warp-canvas-primary-light: var(--color-collab-light);
  --warp-canvas-indigo: var(--color-indigo);
  /* 用途化变量 — 滚动条与轨道 */
  --scrollbar-track-dark: #f3f2ee;
  --scrollbar-track-hover: #fcfcfa;
  /* === Alpha (--primary) === */
  --primary-5: rgba(167, 139, 250, 0.04);
  --primary-10: rgba(167, 139, 250, 0.08);
  --primary-15: rgba(167, 139, 250, 0.12);
  --primary-18: rgba(167, 139, 250, 0.14);
  --primary-20: rgba(167, 139, 250, 0.16);
  --primary-25: rgba(167, 139, 250, 0.2);
  --primary-30: rgba(167, 139, 250, 0.24);
  --primary-35: rgba(167, 139, 250, 0.28);
  --primary-40: rgba(167, 139, 250, 0.32);
  --primary-60: rgba(167, 139, 250, 0.48);
  --primary-80: rgba(167, 139, 250, 0.64);
  --primary-50: rgba(167, 139, 250, 0.4);
  /* === Alpha (--primary-hover) === */
  --primary-hover-5: rgba(149, 128, 250, 0.04);
  --primary-hover-10: rgba(149, 128, 250, 0.08);
  --primary-hover-20: rgba(149, 128, 250, 0.16);
  --primary-hover-30: rgba(149, 128, 250, 0.24);
  /* === Alpha (--success) === */
  --success-5: rgba(52, 211, 153, 0.04);
  --success-10: rgba(52, 211, 153, 0.08);
  --success-20: rgba(52, 211, 153, 0.16);
  --success-40: rgba(52, 211, 153, 0.32);
  --success-50: rgba(52, 211, 153, 0.4);
  --success-70: rgba(52, 211, 153, 0.56);
  --success-80: rgba(52, 211, 153, 0.64);
  --success-30: rgba(52, 211, 153, 0.24);
  /* === Alpha (--success-hover) === */
  --success-hover-5: rgba(16, 185, 129, 0.04);
  --success-hover-10: rgba(16, 185, 129, 0.08);
  --success-hover-20: rgba(16, 185, 129, 0.16);
  /* === Alpha (--warning) === */
  --warning-5: rgba(251, 191, 36, 0.04);
  --warning-10: rgba(251, 191, 36, 0.08);
  --warning-15: rgba(251, 191, 36, 0.1);
  --warning-20: rgba(251, 191, 36, 0.16);
  --warning-25: rgba(251, 191, 36, 0.2);
  --warning-30: rgba(251, 191, 36, 0.24);
  --warning-40: rgba(251, 191, 36, 0.32);
  --warning-50: rgba(251, 191, 36, 0.4);
  --warning-80: rgba(251, 191, 36, 0.64);
  --warning-200: rgba(251, 191, 36, 0.16);
  --warning-300: rgba(251, 191, 36, 0.24);
  /* === Alpha (--warning-hover) === */
  --warning-hover-5: rgba(245, 158, 11, 0.04);
  --warning-hover-10: rgba(245, 158, 11, 0.08);
  --warning-hover-15: rgba(245, 158, 11, 0.12);
  --warning-hover-20: rgba(245, 158, 11, 0.16);
  --warning-hover-25: rgba(245, 158, 11, 0.2);
  --warning-hover-30: rgba(245, 158, 11, 0.24);
  --warning-hover-40: rgba(245, 158, 11, 0.32);
  --warning-hover-50: rgba(245, 158, 11, 0.4);
  /* === Alpha (--error) === */
  --error-5: rgba(248, 113, 113, 0.04);
  --error-10: rgba(248, 113, 113, 0.08);
  --error-15: rgba(248, 113, 113, 0.12);
  --error-20: rgba(248, 113, 113, 0.16);
  --error-30: rgba(248, 113, 113, 0.24);
  --error-40: rgba(248, 113, 113, 0.32);
  --error-50: rgba(248, 113, 113, 0.4);
  --error-60: rgba(248, 113, 113, 0.48);
  --error-70: rgba(248, 113, 113, 0.56);
  --error-80: rgba(248, 113, 113, 0.64);
  /* === Alpha (--error-hover) === */
  --error-hover-5: rgba(239, 68, 68, 0.04);
  --error-hover-10: rgba(239, 68, 68, 0.08);
  --error-hover-15: rgba(239, 68, 68, 0.12);
  --error-hover-20: rgba(239, 68, 68, 0.16);
  --error-hover-30: rgba(239, 68, 68, 0.24);
  /* === Alpha (--info) === */
  --info-5: rgba(56, 189, 248, 0.04);
  --info-10: rgba(56, 189, 248, 0.08);
  --info-20: rgba(56, 189, 248, 0.16);
  --info-30: rgba(56, 189, 248, 0.24);
  --info-40: rgba(56, 189, 248, 0.32);
  --info-50: rgba(56, 189, 248, 0.4);
  /* === Alpha (--info-hover) === */
  --info-hover-5: rgba(14, 165, 233, 0.04);
  --info-hover-10: rgba(14, 165, 233, 0.08);
  --info-hover-20: rgba(14, 165, 233, 0.16);
  --info-hover-30: rgba(2, 132, 199, 0.3);
  --info-hover-40: rgba(2, 132, 199, 0.4);
  --info-hover-50: rgba(2, 132, 199, 0.5);
  /* === Alpha (--bg-primary) === */
  --bg-primary-5: rgba(252, 252, 250, 0.04);
  --bg-primary-10: rgba(252, 252, 250, 0.08);
  --bg-primary-20: rgba(252, 252, 250, 0.16);
  --bg-primary-25: rgba(252, 252, 250, 0.2);
  --bg-primary-30: rgba(252, 252, 250, 0.24);
  --bg-primary-40: rgba(252, 252, 250, 0.32);
  --bg-primary-45: rgba(252, 252, 250, 0.36);
  --bg-primary-50: rgba(252, 252, 250, 0.4);
  --bg-primary-60: rgba(252, 252, 250, 0.48);
  --bg-primary-70: rgba(252, 252, 250, 0.56);
  --bg-primary-80: rgba(252, 252, 250, 0.64);
  --bg-primary-85: rgba(252, 252, 250, 0.68);
  --bg-primary-90: rgba(252, 252, 250, 0.72);
  --bg-primary-95: rgba(252, 252, 250, 0.76);
  /* === Alpha (--bg-secondary) === */
  --bg-secondary-5: rgba(249, 248, 245, 0.04);
  --bg-secondary-10: rgba(249, 248, 245, 0.08);
  --bg-secondary-15: rgba(249, 248, 245, 0.12);
  --bg-secondary-20: rgba(249, 248, 245, 0.16);
  --bg-secondary-30: rgba(249, 248, 245, 0.24);
  --bg-secondary-40: rgba(249, 248, 245, 0.32);
  --bg-secondary-50: rgba(249, 248, 245, 0.4);
  --bg-secondary-60: rgba(249, 248, 245, 0.48);
  --bg-secondary-70: rgba(249, 248, 245, 0.56);
  --bg-secondary-80: rgba(249, 248, 245, 0.64);
  --bg-secondary-90: rgba(249, 248, 245, 0.72);
  --bg-secondary-95: rgba(249, 248, 245, 0.76);
  /* === Alpha (--bg-tertiary) === */
  --bg-tertiary-5: rgba(243, 242, 238, 0.04);
  --bg-tertiary-10: rgba(243, 242, 238, 0.08);
  --bg-tertiary-20: rgba(243, 242, 238, 0.16);
  --bg-tertiary-30: rgba(243, 242, 238, 0.24);
  --bg-tertiary-40: rgba(243, 242, 238, 0.32);
  --bg-tertiary-50: rgba(243, 242, 238, 0.4);
  --bg-tertiary-60: rgba(243, 242, 238, 0.48);
  --bg-tertiary-70: rgba(243, 242, 238, 0.56);
  --bg-tertiary-80: rgba(243, 242, 238, 0.64);
  /* === Alpha (--bg-quaternary) === */
  --bg-quaternary-10: rgba(237, 234, 229, 0.1);
  --bg-quaternary-50: rgba(237, 234, 229, 0.4);
  /* === Alpha (--border-secondary) === */
  --border-secondary-30: rgba(226, 223, 234, 0.24);
  --border-secondary-40: rgba(226, 223, 234, 0.32);
  --border-secondary-50: rgba(226, 223, 234, 0.4);
  --border-secondary-60: rgba(226, 223, 234, 0.48);
  --border-secondary-70: rgba(226, 223, 234, 0.56);
  --border-secondary-80: rgba(226, 223, 234, 0.64);
  /* === Alpha (--border-tertiary) === */
  --border-tertiary-20: rgba(212, 208, 223, 0.16);
  --border-tertiary-30: rgba(212, 208, 223, 0.24);
  --border-tertiary-50: rgba(212, 208, 223, 0.4);
  /* === Alpha (--text-primary) === */
  --text-primary-10: rgba(51, 51, 56, 0.08);
  --text-primary-20: rgba(51, 51, 56, 0.16);
  --text-primary-30: rgba(51, 51, 56, 0.24);
  --text-primary-40: rgba(51, 51, 56, 0.32);
  --text-primary-50: rgba(51, 51, 56, 0.4);
  --text-primary-60: rgba(51, 51, 56, 0.48);
  --text-primary-70: rgba(51, 51, 56, 0.56);
  --text-primary-80: rgba(51, 51, 56, 0.64);
  --text-primary-90: rgba(51, 51, 56, 0.72);
  /* === Alpha (--text-error) === */
  --text-error-20: rgba(248, 113, 113, 0.16);
  --text-error-50: rgba(248, 113, 113, 0.4);
  --text-error-60: rgba(248, 113, 113, 0.48);
  --text-error-70: rgba(248, 113, 113, 0.56);
  --text-error-80: rgba(248, 113, 113, 0.64);
  /* === 通用浅色文字（亮色模式） === */
  --light: rgba(30, 30, 30, 0.76);
  /* === Alpha (--text-success) === */
  --text-success-50: rgba(52, 211, 153, 0.4);
  --text-success-70: rgba(52, 211, 153, 0.56);
  --text-success-80: rgba(52, 211, 153, 0.64);
  /* === Alpha (--text-warning) === */
  --text-warning-80: rgba(251, 191, 36, 0.64);
  /* 用途化变量 — 首页（index） */
  --index-footer-bg: rgba(249, 248, 245, 0.72);
  --index-visualizer-bg: rgba(243, 242, 238, 0.4);
  --index-card-glow: rgba(167, 139, 250, 0.12);
  --index-brand-badge-bg: rgba(167, 139, 250, 0.08);
  --index-brand-badge-border: rgba(167, 139, 250, 0.16);
  --index-main-icon-shadow: rgba(167, 139, 250, 0.4);
  --index-pulsing-ring-shadow: rgba(167, 139, 250, 0.32);
  /* 用途化变量 — 年度回顾（year-review） */
  --year-review-home-btn-shadow: rgba(167, 139, 250, 0.16);
  --year-review-blob-1-bg: rgba(167, 139, 250, 0.32);
  --year-review-blob-2-bg: rgba(249, 168, 212, 0.15);
  --year-review-gradient-overlay-end: rgba(249, 168, 212, 0.12);
  --year-review-stat-number-shadow: rgba(167, 139, 250, 0.4);
  --year-review-artist-label-border: rgba(196, 181, 253, 0.24);
  --year-review-artist-bg-blur: rgba(196, 181, 253, 0.16);
  --year-review-stats-bg-gradient: rgba(167, 139, 250, 0.32);
  --app-loading-brand-primary: #a78bfa;
  --app-loading-brand-secondary: #c4b5fd;
  --app-loading-primary-glow: rgba(167, 139, 250, 0.16);
  --app-loading-primary-glow-accelerating: rgba(167, 139, 250, 0.52);
  --app-loading-secondary-glow: rgba(196, 181, 253, 0.14);
  --app-loading-text-color: rgba(167, 139, 250, 0.72);
  /* 用途化变量 — 模态框通用（Modal shared） */
  --lyrics-modal-enter-shadow: rgba(0, 0, 0, 0.32);
  --lyrics-modal-bg-accent-blue: rgba(167, 139, 250, 0.26);
  --lyrics-modal-bg-accent-pink: rgba(255, 88, 126, 0.2);
  --lyrics-modal-badge-menu-bg: rgba(252, 252, 250, 0.9);
  /* 全屏播放页：背景恒为模糊暗化封面，文字/图标统一高对比暖亮色 */
  --lyrics-modal-text: #fdfcfa;
  --lyrics-modal-text-secondary: rgba(253, 252, 248, 0.88);
  --lyrics-modal-text-muted: rgba(253, 252, 248, 0.68);
  --lyrics-modal-surface: rgba(255, 255, 255, 0.1);
  --lyrics-modal-surface-strong: rgba(255, 255, 255, 0.2);
  --lyrics-modal-surface-border: rgba(255, 255, 255, 0.14);
  --lyrics-modal-track: rgba(255, 255, 255, 0.22);
  /* 无封面时的渐变兜底底色（暖调深色，保留主题暖色气质） */
  --lyrics-modal-bg-base-start: #1f1a14;
  --lyrics-modal-bg-base-end: #0d0b08;
  /* 音质菜单为浅色底，文字需固定深色 */
  --lyrics-modal-badge-menu-text: #333338;
  --lyrics-modal-badge-menu-active-bg: #ffffff;
  --audio-player-dropdown-bg-fallback: rgba(128, 128, 128, 0.7);
  --audio-player-liquid-glass-bg-fallback: rgba(128, 128, 128, 0.2);
  /* === Overlay / 遮罩层半透明色（浅色模式 = 黑色半透明） === */
  --overlay-1: rgba(0, 0, 0, 0.01);
  --overlay-2: rgba(0, 0, 0, 0.02);
  --overlay-3: rgba(0, 0, 0, 0.03);
  --overlay-4: rgba(0, 0, 0, 0.04);
  --overlay-5: rgba(0, 0, 0, 0.05);
  --overlay-6: rgba(0, 0, 0, 0.06);
  --overlay-7: rgba(0, 0, 0, 0.07);
  --overlay-8: rgba(0, 0, 0, 0.08);
  --overlay-9: rgba(0, 0, 0, 0.09);
  --overlay-10: rgba(0, 0, 0, 0.1);
  --overlay-12: rgba(0, 0, 0, 0.12);
  --overlay-14: rgba(0, 0, 0, 0.14);
  --overlay-15: rgba(0, 0, 0, 0.15);
  --overlay-16: rgba(0, 0, 0, 0.16);
  --overlay-18: rgba(0, 0, 0, 0.18);
  --overlay-20: rgba(0, 0, 0, 0.2);
  --overlay-22: rgba(0, 0, 0, 0.22);
  --overlay-25: rgba(0, 0, 0, 0.25);
  --overlay-30: rgba(0, 0, 0, 0.3);
  --overlay-35: rgba(0, 0, 0, 0.35);
  --overlay-40: rgba(0, 0, 0, 0.4);
  --overlay-42: rgba(0, 0, 0, 0.42);
  --overlay-45: rgba(0, 0, 0, 0.45);
  --overlay-50: rgba(0, 0, 0, 0.5);
  --overlay-52: rgba(0, 0, 0, 0.52);
  --overlay-55: rgba(0, 0, 0, 0.55);
  --overlay-58: rgba(0, 0, 0, 0.58);
  --overlay-60: rgba(0, 0, 0, 0.6);
  --overlay-62: rgba(0, 0, 0, 0.62);
  --overlay-70: rgba(0, 0, 0, 0.7);
  --overlay-78: rgba(0, 0, 0, 0.78);
  --overlay-80: rgba(0, 0, 0, 0.8);
  --overlay-85: rgba(0, 0, 0, 0.85);
  --overlay-86: rgba(0, 0, 0, 0.86);
  --overlay-88: rgba(0, 0, 0, 0.88);
  --overlay-90: rgba(0, 0, 0, 0.9);
  --overlay-92: rgba(0, 0, 0, 0.92);
  --overlay-95: rgba(0, 0, 0, 0.95);
  /* === Mask / 暗色遮罩（浅色模式 = 更淡） === */
  --mask-2: rgba(0, 0, 0, 0.01);
  --mask-4: rgba(0, 0, 0, 0.02);
  --mask-5: rgba(0, 0, 0, 0.03);
  --mask-6: rgba(0, 0, 0, 0.04);
  --mask-8: rgba(0, 0, 0, 0.05);
  --mask-10: rgba(0, 0, 0, 0.06);
  --mask-15: rgba(0, 0, 0, 0.08);
  --mask-18: rgba(0, 0, 0, 0.09);
  --mask-20: rgba(0, 0, 0, 0.1);
  --mask-25: rgba(0, 0, 0, 0.12);
  --mask-30: rgba(0, 0, 0, 0.15);
  --mask-35: rgba(0, 0, 0, 0.17);
  --mask-40: rgba(0, 0, 0, 0.2);
  --mask-45: rgba(0, 0, 0, 0.22);
  --mask-50: rgba(0, 0, 0, 0.25);
  --mask-60: rgba(0, 0, 0, 0.3);
  --mask-70: rgba(0, 0, 0, 0.35);
  --mask-75: rgba(0, 0, 0, 0.4);
  --mask-80: rgba(0, 0, 0, 0.5);
  --mask-85: rgba(0, 0, 0, 0.6);
  --mask-95: rgba(0, 0, 0, 0.7);
  /* 打印专用变量（覆盖主题配色，白底黑字） */
  --print-bg: #ffffff;
  --print-bg-subtle: #fafafa;
  --print-bg-subtler: #f5f5f5;
  --print-bg-deep: #f0f0f0;
  --print-bg-darker: #f5f5f5;
  --print-text-primary: #262626;
  --print-text-secondary: #404040;
  --print-text-tertiary: #5c5c5c;
  --print-border: #e5e5e5;
  --print-border-light: #f0f0f0;
  --print-muted: #737373;
  /* Year Review 专用变量 */
  --year-review-text-tertiary: #737373;
  --year-review-text-yellow: #fde047;
  --year-review-text-cyan: #67e8f9;
  /* OAuth 第三方平台品牌色（--oauth-casdoor-green / --oauth-kuaishou-orange 已在独立变量区定义，此处省略） */
  /* === 用途化变量 — 背景纹理光晕（body::before） === */
  --bg-texture-warm-glow: rgba(243, 242, 238, 0.016);
  /* === 用途化变量 — 按钮阴影 === */
  --btn-primary-shadow: rgba(167, 139, 250, 0.16);
  /* === 用途化变量 — Canvas 动画背景叠加色 === */
  --canvas-bg-overlay: rgba(252, 252, 250, 0.74);
  /* === 用途化变量 — Canvas 动画光晕遮罩末端 === */
  --canvas-glow-overlay-end: rgba(249, 248, 245, 0.56);
  /* === 用途化变量 — 歌词消息 fallback === */
  --lyric-msg-fallback-text: #333338;
  /* === 用途化变量 — 模态框阴影 === */
  --modal-hover-shadow: rgba(167, 139, 250, 0.06);
  /* === 用途化变量 — 移动端表格阴影 === */
  --mobile-table-shadow: rgba(0, 0, 0, 0.4);
}