/* =====================================================================
* 全站统一主题层（single source of truth）
* 改这里即可换全站主色：
* --brand 主蓝（界面框架主色，换色核心）
* --brand-2 辅青（渐变副色，换色核心）
* --brand-deep 深蓝（按钮/渐变深端）
* --brand-gold 金（重点关注/收藏，统一保留）
* --blue / --cyan / --blue-deep / --blue-dark 为兼容别名，
* 仅供 content.css 等沿用 var(--blue)/var(--cyan) 的历史写法，
* 值与 --brand 系列对齐，避免大范围改 content.css。
*
* 【防首屏闪蓝（FOUC）架构说明】
* 历史上各主题拆成独立文件（theme-red.css 等），由 theme-init.js 在
* 内 document.write 注入 ，再由 member.js/checkin.js 运行时
* 追加 。该 是页面解析后动态插入的
* 外部样式表，浏览器不阻塞首帧去等它，先默认蓝渲染、下载完再切主题
* → 闪一下蓝。
* 现把 12 套主题（变量层 + 元素级覆盖）全部并入本文件（本文件由 HTML
* 静态引入，阻塞首帧），主题类改挂 上
* （theme-init.js 同步设 class，零网络等待）。首帧即正确色、零闪烁。
* 旧的独立主题文件已删除，勿再引用。
* ===================================================================== */
:root {
/* ===== 字号 Token（中文排版统一规范，见 docs/typography-spec.md）=====
全站只允许从这些档位取字号，禁止再写 11/12.5/13(含)/15/17/19/21/23/25/27px 等零散值。
7 档高频：12 极辅助 / 14 辅助 / 16 正文 / 18 卡片标题 / 20 区块标题 / 24 大区块 / 28-32 页面标题。
基准：html{font-size:16px}，故 1rem = 16px。 */
--font-12: 0.75rem; /* 12px 极辅助：Badge、时间戳、极弱提示 */
--font-13: 0.8125rem; /* 13px 仅高密度表格辅助字段，其余场景优先 14px */
--font-14: 0.875rem; /* 14px 辅助信息：次要说明、状态、表单 label、次级按钮 */
--font-16: 1rem; /* 16px 系统正文：正文、输入内容、主操作按钮、主导航 */
--font-18: 1.125rem; /* 18px 卡片标题 / 强调正文 */
--font-20: 1.25rem; /* 20px 区块标题 */
--font-24: 1.5rem; /* 24px 大区块标题（移动端页面标题） */
--font-28: 1.75rem; /* 28px 页面标题 */
--font-32: 2rem; /* 32px 页面主标题（桌面） */
--font-40: 2.5rem; /* 40px 仅 Dashboard 大数字 / Hero，勿在后台滥用 */
--ink: #10213f;
--muted: #64748d;
--line: rgba(72, 116, 177, .16);
--paper: rgba(247, 251, 255, .78);
--shadow: 0 32px 80px rgba(40, 91, 158, .16), 0 8px 24px rgba(52, 94, 151, .08);
--sidebar: 267px; /* 桌面初始侧栏宽度（>1180px 档，2026-08-28 由 307 收窄 40px）；≤1180 档 250px / ≤900 抽屉 278px 在 workspace.css 覆盖 */
--blue: #2676f3;
--blue-deep: #1254c7;
--blue-dark: #114caf;
--cyan: #5bd6e8;
--brand: #2676f3;
--brand-2: #5bd6e8;
--brand-deep: #1254c7;
--brand-gold: #d4a84b;
color-scheme: light;
}
/* 主题：蓝色（默认） */
:root.theme-blue {
--brand: #2676f3;
--brand-2: #5bd6e8;
--brand-deep: #1254c7;
--brand-gold: #d4a84b;
--blue: #2676f3;
--blue-deep: #1254c7;
--blue-dark: #114caf;
--cyan: #5bd6e8;
color-scheme: light;
}
/* ═══ 主题：抹茶绿 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-green {
--ink: #29351f;
--muted: #657257;
--line: rgba(113, 137, 87, .22);
--paper: rgba(250, 251, 246, .84);
--shadow: 0 32px 80px rgba(91, 111, 69, .14), 0 8px 24px rgba(91, 111, 69, .08);
--blue: #819b66;
--blue-deep: #5d7547;
--blue-dark: #455a34;
--cyan: #a9bb8f;
--brand: #819b66;
--brand-2: #a9bb8f;
--brand-deep: #5d7547;
--brand-gold: #b98d49;
color-scheme: light;
}
/* 背景 */
.theme-green .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(169, 187, 143, .38), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(205, 216, 187, .28), transparent 35%),
linear-gradient(135deg, #f6f8f1 0%, #e7eddc 44%, #f5f7ef 100%);
}
/* 侧边栏 */
.theme-green .sidebar {
border-right-color: rgba(113, 137, 87, .22);
background: linear-gradient(180deg, rgba(248, 250, 244, .96), rgba(229, 236, 218, .88));
}
.theme-green .sidebar-brand strong { color: var(--ink); }
.theme-green .sidebar-brand small { color: var(--muted); }
.theme-green .nav-label { color: var(--muted); }
.theme-green .nav-item { color: var(--ink); }
.theme-green .nav-item:hover,
.theme-green .nav-item.active {
color: #455a34;
background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(226, 234, 213, .76));
box-shadow: 0 8px 22px rgba(91, 111, 69, .12);
}
/* 顶栏 */
.theme-green .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(226, 234, 213, .64));
border-bottom-color: var(--line);
}
.theme-green .topbar h1 { color: var(--ink); }
.theme-green .topbar span { color: var(--muted); }
/* 内容卡片 */
.theme-green .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(226, 234, 213, .58));
border-color: rgba(113, 137, 87, .18);
}
.theme-green .content-card h3 { color: var(--ink); }
.theme-green .content-card p { color: var(--muted); }
.theme-green .content-card:hover {
border-color: rgba(113, 137, 87, .52);
box-shadow: 0 18px 48px rgba(91, 111, 69, .16);
}
/* 设置页 */
.theme-green .profile-banner {
border-color: rgba(113, 137, 87, .18);
background: linear-gradient(120deg, rgba(255, 255, 255, .84), rgba(226, 234, 213, .72));
}
.theme-green .profile-copy > span { color: var(--muted); }
.theme-green .profile-copy h2 { color: var(--ink); }
.theme-green .profile-copy p { color: var(--muted); }
.theme-green .profile-copy p strong { color: var(--ink); }
.theme-green .settings-card,
.theme-green .security-score-card,
.theme-green .session-card,
.theme-green .need-help-card {
background: var(--paper);
border-color: rgba(113, 137, 87, .16);
}
.theme-green .settings-card-heading h2 { color: var(--ink); }
.theme-green .settings-card-heading p { color: var(--muted); }
.theme-green .profile-fields dt { color: var(--muted); }
.theme-green .profile-fields dd { color: var(--ink); }
/* 迷你会员卡 */
.theme-green .mini-membership {
background: rgba(255, 255, 255, .58);
border-color: rgba(113, 137, 87, .22);
}
.theme-green .mini-membership span { color: var(--ink); }
.theme-green .mini-membership small { color: var(--muted); }
/* ═══ 主题：浪漫紫 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-purple {
--ink: #31245e;
--muted: #7a6b9e;
--line: rgba(139, 92, 246, .18);
--paper: rgba(250, 248, 255, .78);
--shadow: 0 32px 80px rgba(124, 58, 237, .15), 0 8px 24px rgba(124, 58, 237, .08);
--blue: #8b5cf6;
--blue-deep: #7c3aed;
--blue-dark: #6d28d9;
--cyan: #a78bfa;
--brand: #8b5cf6;
--brand-2: #a78bfa;
--brand-deep: #7c3aed;
--brand-gold: #ec4899;
color-scheme: light;
}
/* 背景 */
.theme-purple .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(167, 139, 250, .38), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(196, 181, 253, .25), transparent 35%),
linear-gradient(135deg, #f5f3ff 0%, #ede9fe 44%, #f5f3ff 100%);
}
/* 侧边栏 */
.theme-purple .sidebar {
border-right-color: rgba(139, 92, 246, .18);
background: linear-gradient(180deg, rgba(245, 243, 255, .94), rgba(237, 233, 254, .84));
}
.theme-purple .sidebar-brand strong { color: var(--ink); }
.theme-purple .sidebar-brand small { color: var(--muted); }
.theme-purple .nav-label { color: var(--muted); }
.theme-purple .nav-item { color: var(--ink); }
.theme-purple .nav-item:hover,
.theme-purple .nav-item.active {
color: #6d28d9;
background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(237, 233, 254, .7));
box-shadow: 0 8px 22px rgba(124, 58, 237, .10);
}
/* 顶栏 */
.theme-purple .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(237, 233, 254, .58));
border-bottom-color: var(--line);
}
.theme-purple .topbar h1 { color: var(--ink); }
.theme-purple .topbar span { color: var(--muted); }
/* 内容卡片 */
.theme-purple .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(237, 233, 254, .52));
border-color: rgba(139, 92, 246, .16);
}
.theme-purple .content-card h3 { color: var(--ink); }
.theme-purple .content-card p { color: var(--muted); }
.theme-purple .content-card:hover {
border-color: rgba(139, 92, 246, .5);
box-shadow: 0 18px 48px rgba(124, 58, 237, .15);
}
/* 设置页 */
.theme-purple .profile-banner {
border-color: rgba(139, 92, 246, .16);
background: linear-gradient(120deg, rgba(255, 255, 255, .82), rgba(237, 233, 254, .66));
}
.theme-purple .profile-copy > span { color: var(--muted); }
.theme-purple .profile-copy h2 { color: var(--ink); }
.theme-purple .profile-copy p { color: var(--muted); }
.theme-purple .profile-copy p strong { color: var(--ink); }
.theme-purple .settings-card,
.theme-purple .security-score-card,
.theme-purple .session-card,
.theme-purple .need-help-card {
background: var(--paper);
border-color: rgba(139, 92, 246, .14);
}
.theme-purple .settings-card-heading h2 { color: var(--ink); }
.theme-purple .settings-card-heading p { color: var(--muted); }
.theme-purple .profile-fields dt { color: var(--muted); }
.theme-purple .profile-fields dd { color: var(--ink); }
/* 迷你会员卡 */
.theme-purple .mini-membership {
background: rgba(255, 255, 255, .58);
border-color: rgba(139, 92, 246, .2);
}
.theme-purple .mini-membership span { color: var(--ink); }
.theme-purple .mini-membership small { color: var(--muted); }
/* ═══ 主题：温暖金 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-gold {
--ink: #5b3a0a;
--muted: #94794f;
--line: rgba(245, 158, 11, .2);
--paper: rgba(255, 252, 245, .78);
--shadow: 0 32px 80px rgba(217, 119, 6, .15), 0 8px 24px rgba(217, 119, 6, .08);
--blue: #f59e0b;
--blue-deep: #d97706;
--blue-dark: #b45309;
--cyan: #fbbf24;
--brand: #f59e0b;
--brand-2: #fbbf24;
--brand-deep: #d97706;
--brand-gold: #b45309;
color-scheme: light;
}
/* 背景 */
.theme-gold .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(251, 191, 36, .4), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(253, 230, 138, .3), transparent 35%),
linear-gradient(135deg, #fffbeb 0%, #fef3c7 44%, #fffbeb 100%);
}
/* 侧边栏 */
.theme-gold .sidebar {
border-right-color: rgba(245, 158, 11, .2);
background: linear-gradient(180deg, rgba(255, 251, 235, .94), rgba(254, 243, 199, .84));
}
.theme-gold .sidebar-brand strong { color: var(--ink); }
.theme-gold .sidebar-brand small { color: var(--muted); }
.theme-gold .nav-label { color: var(--muted); }
.theme-gold .nav-item { color: var(--ink); }
.theme-gold .nav-item:hover,
.theme-gold .nav-item.active {
color: #b45309;
background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(254, 243, 199, .74));
box-shadow: 0 8px 22px rgba(217, 119, 6, .10);
}
/* 顶栏 */
.theme-gold .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(254, 243, 199, .62));
border-bottom-color: var(--line);
}
.theme-gold .topbar h1 { color: var(--ink); }
.theme-gold .topbar span { color: var(--muted); }
/* 内容卡片 */
.theme-gold .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(254, 243, 199, .58));
border-color: rgba(245, 158, 11, .18);
}
.theme-gold .content-card h3 { color: var(--ink); }
.theme-gold .content-card p { color: var(--muted); }
.theme-gold .content-card:hover {
border-color: rgba(245, 158, 11, .5);
box-shadow: 0 18px 48px rgba(217, 119, 6, .16);
}
/* 设置页 */
.theme-gold .profile-banner {
border-color: rgba(245, 158, 11, .18);
background: linear-gradient(120deg, rgba(255, 255, 255, .82), rgba(254, 243, 199, .72));
}
.theme-gold .profile-copy > span { color: var(--muted); }
.theme-gold .profile-copy h2 { color: var(--ink); }
.theme-gold .profile-copy p { color: var(--muted); }
.theme-gold .profile-copy p strong { color: var(--ink); }
.theme-gold .settings-card,
.theme-gold .security-score-card,
.theme-gold .session-card,
.theme-gold .need-help-card {
background: var(--paper);
border-color: rgba(245, 158, 11, .16);
}
.theme-gold .settings-card-heading h2 { color: var(--ink); }
.theme-gold .settings-card-heading p { color: var(--muted); }
.theme-gold .profile-fields dt { color: var(--muted); }
.theme-gold .profile-fields dd { color: var(--ink); }
/* 迷你会员卡 */
.theme-gold .mini-membership {
background: rgba(255, 255, 255, .58);
border-color: rgba(245, 158, 11, .22);
}
.theme-gold .mini-membership span { color: var(--ink); }
.theme-gold .mini-membership small { color: var(--muted); }
/* ═══ 主题：中国红 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-red {
--ink: #4c0d16;
--muted: #925f66;
--line: rgba(220, 38, 38, .18);
--paper: rgba(255, 250, 250, .78);
--shadow: 0 32px 80px rgba(185, 28, 28, .14), 0 8px 24px rgba(185, 28, 28, .08);
--blue: #ef4444;
--blue-deep: #dc2626;
--blue-dark: #b91c1c;
--cyan: #f87171;
--brand: #ef4444;
--brand-2: #f87171;
--brand-deep: #dc2626;
--brand-gold: #f59e0b;
color-scheme: light;
}
/* 背景 */
.theme-red .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(248, 113, 113, .32), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(254, 202, 202, .3), transparent 35%),
linear-gradient(135deg, #fef2f2 0%, #fee2e2 44%, #fef2f2 100%);
}
/* 侧边栏 */
.theme-red .sidebar {
border-right-color: rgba(220, 38, 38, .16);
background: linear-gradient(180deg, rgba(254, 242, 242, .94), rgba(254, 226, 226, .84));
}
.theme-red .sidebar-brand strong { color: var(--ink); }
.theme-red .sidebar-brand small { color: var(--muted); }
.theme-red .nav-label { color: var(--muted); }
.theme-red .nav-item { color: var(--ink); }
.theme-red .nav-item:hover,
.theme-red .nav-item.active {
color: #b91c1c;
background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(254, 226, 226, .7));
box-shadow: 0 8px 22px rgba(220, 38, 38, .10);
}
/* 顶栏 */
.theme-red .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(254, 226, 226, .58));
border-bottom-color: var(--line);
}
.theme-red .topbar h1 { color: var(--ink); }
.theme-red .topbar span { color: var(--muted); }
/* 内容卡片 */
.theme-red .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(254, 226, 226, .52));
border-color: rgba(220, 38, 38, .16);
}
.theme-red .content-card h3 { color: var(--ink); }
.theme-red .content-card p { color: var(--muted); }
.theme-red .content-card:hover {
border-color: rgba(220, 38, 38, .5);
box-shadow: 0 18px 48px rgba(185, 28, 28, .14);
}
/* 设置页 */
.theme-red .profile-banner {
border-color: rgba(220, 38, 38, .16);
background: linear-gradient(120deg, rgba(255, 255, 255, .82), rgba(254, 226, 226, .66));
}
.theme-red .profile-copy > span { color: var(--muted); }
.theme-red .profile-copy h2 { color: var(--ink); }
.theme-red .profile-copy p { color: var(--muted); }
.theme-red .profile-copy p strong { color: var(--ink); }
.theme-red .settings-card,
.theme-red .security-score-card,
.theme-red .session-card,
.theme-red .need-help-card {
background: var(--paper);
border-color: rgba(220, 38, 38, .14);
}
.theme-red .settings-card-heading h2 { color: var(--ink); }
.theme-red .settings-card-heading p { color: var(--muted); }
.theme-red .profile-fields dt { color: var(--muted); }
.theme-red .profile-fields dd { color: var(--ink); }
/* 迷你会员卡 */
.theme-red .mini-membership {
background: rgba(255, 255, 255, .58);
border-color: rgba(220, 38, 38, .2);
}
.theme-red .mini-membership span { color: var(--ink); }
.theme-red .mini-membership small { color: var(--muted); }
/* ═══ 主题：活力橙 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-orange {
--ink: #431407;
--muted: #9a6a50;
--line: rgba(249, 115, 22, .2);
--paper: rgba(255, 250, 247, .78);
--shadow: 0 32px 80px rgba(234, 88, 12, .15), 0 8px 24px rgba(234, 88, 12, .08);
--blue: #f97316;
--blue-deep: #ea580c;
--blue-dark: #c2410c;
--cyan: #fb923c;
--brand: #f97316;
--brand-2: #fb923c;
--brand-deep: #ea580c;
--brand-gold: #d97706;
color-scheme: light;
}
/* 背景 */
.theme-orange .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(251, 146, 60, .38), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(254, 215, 170, .35), transparent 35%),
linear-gradient(135deg, #fff7ed 0%, #ffedd5 44%, #fff7ed 100%);
}
/* 侧边栏 */
.theme-orange .sidebar {
border-right-color: rgba(249, 115, 22, .18);
background: linear-gradient(180deg, rgba(255, 247, 237, .94), rgba(255, 237, 213, .84));
}
.theme-orange .sidebar-brand strong { color: var(--ink); }
.theme-orange .sidebar-brand small { color: var(--muted); }
.theme-orange .nav-label { color: var(--muted); }
.theme-orange .nav-item { color: var(--ink); }
.theme-orange .nav-item:hover,
.theme-orange .nav-item.active {
color: #c2410c;
background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 237, 213, .7));
box-shadow: 0 8px 22px rgba(234, 88, 12, .10);
}
/* 顶栏 */
.theme-orange .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(255, 237, 213, .6));
border-bottom-color: var(--line);
}
.theme-orange .topbar h1 { color: var(--ink); }
.theme-orange .topbar span { color: var(--muted); }
/* 内容卡片 */
.theme-orange .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(255, 237, 213, .56));
border-color: rgba(249, 115, 22, .18);
}
.theme-orange .content-card h3 { color: var(--ink); }
.theme-orange .content-card p { color: var(--muted); }
.theme-orange .content-card:hover {
border-color: rgba(249, 115, 22, .5);
box-shadow: 0 18px 48px rgba(234, 88, 12, .15);
}
/* 设置页 */
.theme-orange .profile-banner {
border-color: rgba(249, 115, 22, .18);
background: linear-gradient(120deg, rgba(255, 255, 255, .82), rgba(255, 237, 213, .7));
}
.theme-orange .profile-copy > span { color: var(--muted); }
.theme-orange .profile-copy h2 { color: var(--ink); }
.theme-orange .profile-copy p { color: var(--muted); }
.theme-orange .profile-copy p strong { color: var(--ink); }
.theme-orange .settings-card,
.theme-orange .security-score-card,
.theme-orange .session-card,
.theme-orange .need-help-card {
background: var(--paper);
border-color: rgba(249, 115, 22, .16);
}
.theme-orange .settings-card-heading h2 { color: var(--ink); }
.theme-orange .settings-card-heading p { color: var(--muted); }
.theme-orange .profile-fields dt { color: var(--muted); }
.theme-orange .profile-fields dd { color: var(--ink); }
/* 迷你会员卡 */
.theme-orange .mini-membership {
background: rgba(255, 255, 255, .58);
border-color: rgba(249, 115, 22, .22);
}
.theme-orange .mini-membership span { color: var(--ink); }
.theme-orange .mini-membership small { color: var(--muted); }
/* ═══ 主题：商务灰 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-gray {
--ink: #1e293b;
--muted: #64748b;
--line: rgba(100, 116, 139, .18);
--paper: rgba(248, 250, 252, .8);
--shadow: 0 32px 80px rgba(51, 65, 85, .14), 0 8px 24px rgba(51, 65, 85, .08);
--blue: #64748b;
--blue-deep: #475569;
--blue-dark: #334155;
--cyan: #94a3b8;
--brand: #64748b;
--brand-2: #94a3b8;
--brand-deep: #475569;
--brand-gold: #b45309;
color-scheme: light;
}
/* 背景 */
.theme-gray .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(148, 163, 184, .3), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(203, 213, 225, .35), transparent 35%),
linear-gradient(135deg, #f8fafc 0%, #eef2f6 44%, #f8fafc 100%);
}
/* 侧边栏 */
.theme-gray .sidebar {
border-right-color: rgba(100, 116, 139, .16);
background: linear-gradient(180deg, rgba(248, 250, 252, .94), rgba(226, 232, 240, .84));
}
.theme-gray .sidebar-brand strong { color: var(--ink); }
.theme-gray .sidebar-brand small { color: var(--muted); }
.theme-gray .nav-label { color: var(--muted); }
.theme-gray .nav-item { color: var(--ink); }
.theme-gray .nav-item:hover,
.theme-gray .nav-item.active {
color: #334155;
background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(226, 232, 240, .7));
box-shadow: 0 8px 22px rgba(51, 65, 85, .10);
}
/* 顶栏 */
.theme-gray .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(226, 232, 240, .58));
border-bottom-color: var(--line);
}
.theme-gray .topbar h1 { color: var(--ink); }
.theme-gray .topbar span { color: var(--muted); }
/* 内容卡片 */
.theme-gray .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(226, 232, 240, .52));
border-color: rgba(100, 116, 139, .16);
}
.theme-gray .content-card h3 { color: var(--ink); }
.theme-gray .content-card p { color: var(--muted); }
.theme-gray .content-card:hover {
border-color: rgba(71, 85, 105, .45);
box-shadow: 0 18px 48px rgba(51, 65, 85, .12);
}
/* 设置页 */
.theme-gray .profile-banner {
border-color: rgba(100, 116, 139, .16);
background: linear-gradient(120deg, rgba(255, 255, 255, .84), rgba(226, 232, 240, .66));
}
.theme-gray .profile-copy > span { color: var(--muted); }
.theme-gray .profile-copy h2 { color: var(--ink); }
.theme-gray .profile-copy p { color: var(--muted); }
.theme-gray .profile-copy p strong { color: var(--ink); }
.theme-gray .settings-card,
.theme-gray .security-score-card,
.theme-gray .session-card,
.theme-gray .need-help-card {
background: var(--paper);
border-color: rgba(100, 116, 139, .14);
}
.theme-gray .settings-card-heading h2 { color: var(--ink); }
.theme-gray .settings-card-heading p { color: var(--muted); }
.theme-gray .profile-fields dt { color: var(--muted); }
.theme-gray .profile-fields dd { color: var(--ink); }
/* 迷你会员卡 */
.theme-gray .mini-membership {
background: rgba(255, 255, 255, .58);
border-color: rgba(100, 116, 139, .2);
}
.theme-gray .mini-membership span { color: var(--ink); }
.theme-gray .mini-membership small { color: var(--muted); }
/* ═══ 主题：星球蓝 ═══
* 以深蓝星空/地球为背景的深色玻璃拟态主题。
* 背景图：/wxgc-member/wx.jpg（cover 居中），卡片半透明深底 + 背景模糊，
* 保证背景图透出的同时白/浅色文字可读。
* ============================ */
:root.theme-planet {
--ink: #f1f5f9;
--muted: #cbd5e1;
--line: rgba(147, 197, 253, .25);
--paper: rgba(15, 23, 42, .55);
--shadow: 0 32px 80px rgba(2, 6, 23, .55), 0 8px 24px rgba(2, 6, 23, .35);
--blue: #93c5fd;
--blue-deep: #60a5fa;
--blue-dark: #3b82f6;
--cyan: #bae6fd;
--brand: #93c5fd;
--brand-2: #bae6fd;
--brand-deep: #60a5fa;
--brand-gold: #fbbf24;
color-scheme: dark;
}
/* 背景：覆盖 .workspace-bg 渐变，使用背景图 */
.theme-planet .workspace-bg {
background:
radial-gradient(ellipse at 50% 90%, rgba(96, 165, 250, .18), transparent 60%),
url('/wxgc-member/wx.jpg') center 40% / cover no-repeat;
}
.theme-planet .workspace-bg::after {
/* 隐藏原网格叠加，避免与背景图冲突 */
display: none;
}
/* 侧边栏：半透明深色玻璃 */
.theme-planet .sidebar,
.theme-planet .workspace-page {
background: rgba(15, 23, 42, .55);
color: #f1f5f9;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.theme-planet .sidebar {
border-right-color: rgba(147, 197, 253, .25);
}
.theme-planet .sidebar-brand strong { color: #f1f5f9; }
.theme-planet .sidebar-brand small { color: #cbd5e1; }
.theme-planet .nav-label { color: #cbd5e1; }
.theme-planet .sidebar-brand,
.theme-planet .nav-item { color: #f1f5f9; }
.theme-planet .nav-item:hover,
.theme-planet .nav-item.active {
color: #93c5fd;
background: rgba(147, 197, 253, .15);
box-shadow: 0 8px 22px rgba(2, 6, 23, .35);
}
/* 顶栏 */
.theme-planet .topbar {
background: rgba(15, 23, 42, .55);
border-bottom-color: var(--line);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.theme-planet .topbar h1 { color: #f1f5f9; }
.theme-planet .topbar span { color: #cbd5e1; }
/* 内容卡片：半透明深底玻璃 */
.theme-planet .content-card {
background: linear-gradient(160deg, rgba(15, 23, 42, .6), rgba(30, 58, 138, .5));
border-color: rgba(147, 197, 253, .25);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.theme-planet .content-card h3 { color: #f1f5f9; }
.theme-planet .content-card p { color: #cbd5e1; }
.theme-planet .content-card:hover {
border-color: rgba(147, 197, 253, .6);
box-shadow: 0 18px 48px rgba(96, 165, 250, .25);
}
/* 设置页 */
.theme-planet .profile-banner {
border-color: rgba(147, 197, 253, .25);
background: linear-gradient(120deg, rgba(15, 23, 42, .65), rgba(30, 58, 138, .55));
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.theme-planet .profile-copy > span { color: #cbd5e1; }
.theme-planet .profile-copy h2 { color: #f1f5f9; }
.theme-planet .profile-copy p { color: #cbd5e1; }
.theme-planet .profile-copy p strong { color: #f1f5f9; }
.theme-planet .settings-card,
.theme-planet .security-score-card,
.theme-planet .session-card,
.theme-planet .need-help-card,
.theme-planet .version-card {
background: linear-gradient(160deg, rgba(15, 23, 42, .6), rgba(30, 58, 138, .5));
border-color: rgba(147, 197, 253, .22);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.theme-planet .settings-card-heading h2 { color: #f1f5f9; }
.theme-planet .settings-card-heading p { color: #cbd5e1; }
.theme-planet .profile-fields dt { color: #cbd5e1; }
.theme-planet .profile-fields dd { color: #f1f5f9; }
.theme-planet .version-card-heading h3 { color: #f1f5f9; }
.theme-planet .version-card dd { color: #f1f5f9; }
/* 迷你会员卡 */
.theme-planet .mini-membership {
background: linear-gradient(160deg, rgba(15, 23, 42, .65), rgba(30, 58, 138, .5));
border-color: rgba(147, 197, 253, .3);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.theme-planet .mini-membership span { color: #f1f5f9; }
.theme-planet .mini-membership small { color: #cbd5e1; }
/* 文字可读性：把硬编码灰色统一提亮为银白 */
.theme-planet .library-head p,
.theme-planet .detail-summary,
.theme-planet .featured-card p,
.theme-planet .benefit-card p,
.theme-planet .detail-meta,
.theme-planet .doc-image-placeholder figcaption,
.theme-planet .validity-note,
.theme-planet .dashboard-empty,
.theme-planet .wechat-binding-row p,
.theme-planet .password-rules,
.theme-planet .version-card-heading p,
.theme-planet .notify-table th,
.theme-planet .notify-loading,
.theme-planet .notify-status,
.theme-planet .notify-resend-hint,
.theme-planet .coupon-empty,
.theme-planet .coupon-uses,
.theme-planet .coupon-expires,
.theme-planet .resource-copy small,
.theme-planet .resource-list em,
.theme-planet .resource-number {
color: #cbd5e1;
}
/* 标签 / 图标底 */
.theme-planet .tag-list span {
color: #dbeafe;
background: rgba(147, 197, 253, .2);
}
.theme-planet .resource-icon,
.theme-planet .heading-icon,
.theme-planet .heading-icon.blue,
.theme-planet .heading-icon.navy,
.theme-planet .heading-icon.green {
color: #bfdbfe;
background: rgba(147, 197, 253, .18);
}
/* 内容正文 */
.theme-planet .doc-content,
.theme-planet .article-body,
.theme-planet .detail-content {
color: #f1f5f9;
}
/* ═══ 主题：微信绿 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-wechat {
--ink: #0c3b2a;
--muted: #5c7d6f;
--line: rgba(7, 193, 96, .18);
--paper: rgba(247, 253, 250, .78);
--shadow: 0 32px 80px rgba(6, 173, 86, .14), 0 8px 24px rgba(6, 173, 86, .08);
--blue: #07c160;
--blue-deep: #06ad56;
--blue-dark: #059448;
--cyan: #4dd97f;
--brand: #07c160;
--brand-2: #4dd97f;
--brand-deep: #06ad56;
--brand-gold: #f59e0b;
color-scheme: light;
}
/* 背景 */
.theme-wechat .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(77, 217, 127, .32), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(180, 240, 205, .3), transparent 35%),
linear-gradient(135deg, #f2fdf7 0%, #d9f7e6 44%, #f2fdf7 100%);
}
/* 侧边栏 */
.theme-wechat .sidebar {
border-right-color: rgba(7, 193, 96, .16);
background: linear-gradient(180deg, rgba(242, 253, 247, .94), rgba(217, 247, 230, .84));
}
.theme-wechat .sidebar-brand strong { color: var(--ink); }
.theme-wechat .sidebar-brand small { color: var(--muted); }
.theme-wechat .nav-label { color: var(--muted); }
.theme-wechat .nav-item { color: var(--ink); }
.theme-wechat .nav-item:hover,
.theme-wechat .nav-item.active {
color: #059448;
background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(217, 247, 230, .7));
box-shadow: 0 8px 22px rgba(6, 173, 86, .10);
}
/* 顶栏 */
.theme-wechat .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(217, 247, 230, .58));
border-bottom-color: var(--line);
}
.theme-wechat .topbar h1 { color: var(--ink); }
.theme-wechat .topbar span { color: var(--muted); }
/* 内容卡片 */
.theme-wechat .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .94), rgba(217, 247, 230, .52));
border-color: rgba(7, 193, 96, .16);
}
.theme-wechat .content-card h3 { color: var(--ink); }
.theme-wechat .content-card p { color: var(--muted); }
.theme-wechat .content-card:hover {
border-color: rgba(7, 193, 96, .5);
box-shadow: 0 18px 48px rgba(6, 173, 86, .14);
}
/* 设置页 */
.theme-wechat .profile-banner {
border-color: rgba(7, 193, 96, .16);
background: linear-gradient(120deg, rgba(255, 255, 255, .82), rgba(217, 247, 230, .66));
}
.theme-wechat .profile-copy > span { color: var(--muted); }
.theme-wechat .profile-copy h2 { color: var(--ink); }
.theme-wechat .profile-copy p { color: var(--muted); }
.theme-wechat .profile-copy p strong { color: var(--ink); }
.theme-wechat .settings-card,
.theme-wechat .security-score-card,
.theme-wechat .session-card,
.theme-wechat .need-help-card {
background: var(--paper);
border-color: rgba(7, 193, 96, .14);
}
.theme-wechat .settings-card-heading h2 { color: var(--ink); }
.theme-wechat .settings-card-heading p { color: var(--muted); }
.theme-wechat .profile-fields dt { color: var(--muted); }
.theme-wechat .profile-fields dd { color: var(--ink); }
/* 迷你会员卡 */
.theme-wechat .mini-membership {
background: rgba(255, 255, 255, .58);
border-color: rgba(7, 193, 96, .2);
}
.theme-wechat .mini-membership span { color: var(--ink); }
.theme-wechat .mini-membership small { color: var(--muted); }
/* ═══ 主题：暗夜黑 ═══
* 变量层 + 元素级覆盖，保证文字/边框/背景整体协调。
* ============================ */
:root.theme-dark {
--ink: #f1f5f9;
--muted: #cbd5e1;
--line: rgba(96, 165, 250, .25);
--paper: rgba(30, 41, 59, .92);
--shadow: 0 32px 80px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .3);
--blue: #60a5fa;
--blue-deep: #3b82f6;
--blue-dark: #2563eb;
--cyan: #22d3ee;
--brand: #60a5fa;
--brand-2: #22d3ee;
--brand-deep: #3b82f6;
--brand-gold: #fbbf24;
color-scheme: dark;
}
/* 背景 */
.theme-dark .workspace-bg {
background:
radial-gradient(circle at 85% -15%, rgba(59, 130, 246, .22), transparent 38%),
radial-gradient(circle at 30% 80%, rgba(34, 211, 238, .12), transparent 35%),
linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
/* 侧边栏 */
.theme-dark .sidebar,
.theme-dark .workspace-page {
background: #1e293b;
color: #e2e8f0;
}
.theme-dark .sidebar {
border-right-color: #334155;
}
.theme-dark .sidebar-brand strong { color: #e2e8f0; }
.theme-dark .sidebar-brand small { color: #cbd5e1; }
.theme-dark .nav-label { color: #cbd5e1; }
.theme-dark .sidebar-brand,
.theme-dark .nav-item { color: #f1f5f9; }
.theme-dark .nav-item:hover,
.theme-dark .nav-item.active {
background: rgba(96, 165, 250, .15);
color: #60a5fa;
}
/* 顶栏 */
.theme-dark .topbar {
background: #1e293b;
border-bottom-color: #334155;
}
.theme-dark .topbar h1 { color: #f1f5f9; }
.theme-dark .topbar span { color: #cbd5e1; }
/* 内容卡片：黑→灰过渡底，文字提亮为白 */
.theme-dark .content-card {
background: linear-gradient(160deg, #2b3648 0%, #1e293b 100%);
border-color: #475569;
}
.theme-dark .content-card h3 { color: #f1f5f9; }
.theme-dark .content-card p { color: #cbd5e1; }
.theme-dark .content-card:hover {
border-color: #60a5fa;
box-shadow: 0 8px 30px rgba(96, 165, 250, .2);
}
/* 设置页卡片：黑→灰过渡底，标题/正文提亮为白 */
.theme-dark .profile-banner {
border-color: #475569;
background: linear-gradient(120deg, #2b3648 0%, #1e293b 100%);
}
.theme-dark .profile-copy > span { color: #94a3b8; }
.theme-dark .profile-copy h2 { color: #f1f5f9; }
.theme-dark .profile-copy p { color: #cbd5e1; }
.theme-dark .profile-copy p strong { color: #f1f5f9; }
.theme-dark .settings-card,
.theme-dark .security-score-card,
.theme-dark .session-card,
.theme-dark .need-help-card,
.theme-dark .version-card {
background: linear-gradient(160deg, #2b3648 0%, #1e293b 100%);
border-color: #334155;
}
.theme-dark .settings-card-heading h2 { color: #f1f5f9; }
.theme-dark .settings-card-heading p { color: #cbd5e1; }
.theme-dark .profile-fields dt { color: #94a3b8; }
.theme-dark .profile-fields dd { color: #f1f5f9; }
.theme-dark .version-card-heading h3 { color: #f1f5f9; }
.theme-dark .version-card dd { color: #f1f5f9; }
/* 迷你会员卡：黑→灰过渡底，文字提亮 */
.theme-dark .mini-membership {
background: linear-gradient(160deg, #2b3648 0%, #1e293b 100%);
border-color: #475569;
}
.theme-dark .mini-membership span { color: #f1f5f9; }
.theme-dark .mini-membership small { color: #cbd5e1; }
/* ═══ 暗夜黑文字可读性：把框架/内容里的灰色文字统一调亮为银白 ═══ */
.theme-dark .library-head p,
.theme-dark .detail-summary,
.theme-dark .content-card p,
.theme-dark .featured-card p,
.theme-dark .benefit-card p,
.theme-dark .detail-meta,
.theme-dark .doc-image-placeholder figcaption,
.theme-dark .validity-note,
.theme-dark .dashboard-empty,
.theme-dark .settings-card-heading p,
.theme-dark .wechat-binding-row p,
.theme-dark .password-rules,
.theme-dark .version-card-heading p,
.theme-dark .notify-table th,
.theme-dark .notify-loading,
.theme-dark .notify-status,
.theme-dark .notify-resend-hint,
.theme-dark .coupon-empty,
.theme-dark .coupon-uses,
.theme-dark .coupon-expires,
.theme-dark .resource-copy small,
.theme-dark .resource-list em,
.theme-dark .resource-number,
.theme-dark .profile-copy > span,
.theme-dark .profile-fields dt,
.theme-dark .version-card dt,
.theme-dark .version-card-heading p {
color: #cbd5e1;
}
/* 标签 / 图标底：深色底浅色字，避免浅蓝底刺眼 */
.theme-dark .tag-list span {
color: #dbeafe;
background: rgba(96, 165, 250, .18);
}
.theme-dark .resource-icon,
.theme-dark .heading-icon,
.theme-dark .heading-icon.blue,
.theme-dark .heading-icon.navy,
.theme-dark .heading-icon.green {
color: #bfdbfe;
background: rgba(96, 165, 250, .15);
}
/* 空状态 / 加载占位 */
.theme-dark .empty-state p,
.theme-dark .library-head span,
.theme-dark .topbar span,
.theme-dark .back-dashboard span,
.theme-dark .help-button span {
color: #cbd5e1;
}
/* 内容正文：浅色文字保证深色底可读 */
.theme-dark .doc-content,
.theme-dark .article-body,
.theme-dark .detail-content {
color: #f1f5f9;
}
/* ═══ 主题：雅致玫瑰 / 奶油摩卡 ═══
* 面向偏好温柔、耐看配色的会员；两套主题都坚持“浅背景 + 深文字”，
* 避免主题色铺满后造成正文、提示卡和操作入口对比度不足。
* ===================================== */
:root.theme-rose {
--ink: #522433;
--muted: #765965;
--line: rgba(184, 92, 114, .22);
--paper: rgba(255, 250, 252, .88);
--shadow: 0 32px 80px rgba(121, 59, 77, .14), 0 8px 24px rgba(121, 59, 77, .08);
--blue: #b85c72;
--blue-deep: #793b4d;
--blue-dark: #65303f;
--cyan: #d99aaf;
--brand: #b85c72;
--brand-2: #d99aaf;
--brand-deep: #793b4d;
--brand-gold: #c8945c;
color-scheme: light;
}
:root.theme-mocha {
--ink: #49352d;
--muted: #705c52;
--line: rgba(152, 116, 94, .22);
--paper: rgba(255, 252, 247, .9);
--shadow: 0 32px 80px rgba(89, 66, 56, .14), 0 8px 24px rgba(89, 66, 56, .08);
--blue: #98745e;
--blue-deep: #594238;
--blue-dark: #49352d;
--cyan: #c89a62;
--brand: #98745e;
--brand-2: #c89a62;
--brand-deep: #594238;
--brand-gold: #c89a62;
color-scheme: light;
}
.theme-rose .workspace-bg {
background:
radial-gradient(circle at 86% -12%, rgba(216, 154, 175, .36), transparent 38%),
radial-gradient(circle at 28% 82%, rgba(244, 205, 216, .3), transparent 35%),
linear-gradient(135deg, #fff9fb 0%, #faf0f3 46%, #fffafa 100%);
}
.theme-mocha .workspace-bg {
background:
radial-gradient(circle at 86% -12%, rgba(200, 154, 98, .27), transparent 38%),
radial-gradient(circle at 28% 82%, rgba(222, 202, 184, .34), transparent 35%),
linear-gradient(135deg, #fffdf9 0%, #faf5ee 46%, #fdfaf6 100%);
}
.theme-rose .sidebar {
border-right-color: rgba(184, 92, 114, .18);
background: linear-gradient(180deg, rgba(255, 249, 251, .95), rgba(250, 240, 243, .88));
}
.theme-mocha .sidebar {
border-right-color: rgba(152, 116, 94, .18);
background: linear-gradient(180deg, rgba(255, 253, 249, .95), rgba(250, 245, 238, .9));
}
:is(.theme-rose, .theme-mocha) .sidebar-brand strong,
:is(.theme-rose, .theme-mocha) .nav-item { color: var(--ink); }
:is(.theme-rose, .theme-mocha) .sidebar-brand small,
:is(.theme-rose, .theme-mocha) .nav-label { color: var(--muted); }
:is(.theme-rose, .theme-mocha) .nav-item:hover,
:is(.theme-rose, .theme-mocha) .nav-item.active {
color: var(--brand-deep);
background: linear-gradient(90deg, rgba(255, 255, 255, .97), var(--paper));
box-shadow: 0 8px 22px rgba(89, 66, 56, .1);
}
.theme-rose .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .93), rgba(250, 240, 243, .68));
border-bottom-color: var(--line);
}
.theme-mocha .topbar {
background: linear-gradient(90deg, rgba(255, 255, 255, .93), rgba(250, 245, 238, .72));
border-bottom-color: var(--line);
}
:is(.theme-rose, .theme-mocha) .topbar h1 { color: var(--ink); }
:is(.theme-rose, .theme-mocha) .topbar span { color: var(--muted); }
.theme-rose .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(250, 240, 243, .66));
border-color: rgba(184, 92, 114, .18);
}
.theme-mocha .content-card {
background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(250, 245, 238, .72));
border-color: rgba(152, 116, 94, .18);
}
:is(.theme-rose, .theme-mocha) .content-card h3 { color: var(--ink); }
:is(.theme-rose, .theme-mocha) .content-card p { color: var(--muted); }
:is(.theme-rose, .theme-mocha) .content-card:hover {
border-color: var(--brand);
box-shadow: 0 18px 48px rgba(89, 66, 56, .14);
}
.theme-rose .profile-banner {
border-color: rgba(184, 92, 114, .18);
background: linear-gradient(120deg, rgba(255, 255, 255, .88), rgba(250, 240, 243, .76));
}
.theme-mocha .profile-banner {
border-color: rgba(152, 116, 94, .18);
background: linear-gradient(120deg, rgba(255, 255, 255, .88), rgba(250, 245, 238, .8));
}
:is(.theme-rose, .theme-mocha) .profile-copy > span,
:is(.theme-rose, .theme-mocha) .profile-copy p { color: var(--muted); }
:is(.theme-rose, .theme-mocha) .profile-copy h2,
:is(.theme-rose, .theme-mocha) .profile-copy p strong { color: var(--ink); }
:is(.theme-rose, .theme-mocha) .settings-card,
:is(.theme-rose, .theme-mocha) .security-score-card,
:is(.theme-rose, .theme-mocha) .session-card,
:is(.theme-rose, .theme-mocha) .need-help-card,
:is(.theme-rose, .theme-mocha) .version-card {
background: var(--paper);
border-color: var(--line);
}
:is(.theme-rose, .theme-mocha) .settings-card-heading h2,
:is(.theme-rose, .theme-mocha) .profile-fields dd,
:is(.theme-rose, .theme-mocha) .version-card-heading h3,
:is(.theme-rose, .theme-mocha) .version-card dd { color: var(--ink); }
:is(.theme-rose, .theme-mocha) .settings-card-heading p,
:is(.theme-rose, .theme-mocha) .profile-fields dt,
:is(.theme-rose, .theme-mocha) .version-card-heading p,
:is(.theme-rose, .theme-mocha) .version-card dt { color: var(--muted); }
:is(.theme-rose, .theme-mocha) .mini-membership {
background: rgba(255, 255, 255, .64);
border-color: var(--line);
}
:is(.theme-rose, .theme-mocha) .mini-membership span { color: var(--ink); }
:is(.theme-rose, .theme-mocha) .mini-membership small { color: var(--muted); }
/* 帮助卡片统一使用主题化浅底和深色文字，修复浅色主题下白字不可读。 */
:root .need-help-card {
border-color: var(--line);
background: var(--paper);
color: var(--ink);
}
:root .need-help-card > span { color: var(--ink); }
:root .need-help-card p { color: var(--ink); }
:root .need-help-card button,
:root .need-help-card a { color: var(--brand-deep); }