/* ============================================================ 前台多主题 · 行业预设（由 includes/front_theme.php 生成，单一数据源） 使用：在 上设置 data-theme="xxx" ============================================================ */ :root[data-theme="cosmos"] { --bg-cosmos: #0A0E1A; --bg-secondary: #111827; --bg-elevated: #161E2E; --c-cyan: #40B8F0; --c-cyan-soft: #22D3EE; --c-blue: #3B82F6; --c-blue-soft: #60A5FA; --c-purple: #8B5CF6; --c-purple-soft: #A78BFA; --c-orange: #FB923C; --c-green: #10B981; --c-contrast: hsl(22 90% 62%); --text-primary: #E5E7EB; --text-secondary: #9CA3AF; --text-dim: #6B7280; --border-glass: rgba(255,255,255,0.10); --border-glow: rgba(64,184,240,0.35); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #40B8F0 12%, transparent); --surface-active: color-mix(in srgb, #40B8F0 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #0A0E1A; --intro-sky-bottom: rgb(0,0,0); --intro-glow: rgba(64,184,240,0.12); --intro-star-1: #40B8F0; --intro-star-2: #8B5CF6; --intro-star-3: #FB923C; --intro-fg: #E5E7EB; --intro-fg-soft: #9CA3AF; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="cosmos"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(64,184,240,0.10), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(139,92,246,0.10), transparent 60%), var(--bg-cosmos); } :root[data-theme="citrus"] { --bg-cosmos: #0A0E1A; --bg-secondary: #15110A; --bg-elevated: #1B140C; --c-cyan: #F97316; --c-cyan-soft: #FB923C; --c-blue: #EA580C; --c-blue-soft: #FDBA74; --c-purple: #F59E0B; --c-purple-soft: #FCD34D; --c-orange: #FB923C; --c-green: #10B981; --c-contrast: hsl(22 90% 62%); --text-primary: #FBF1E6; --text-secondary: #D8B894; --text-dim: #9C8B73; --border-glass: rgba(251,146,60,0.16); --border-glow: rgba(249,115,22,0.35); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #F97316 12%, transparent); --surface-active: color-mix(in srgb, #F97316 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #0A0E1A; --intro-sky-bottom: rgb(0,0,0); --intro-glow: rgba(249,115,22,0.12); --intro-star-1: #F97316; --intro-star-2: #F59E0B; --intro-star-3: #FB923C; --intro-fg: #FBF1E6; --intro-fg-soft: #D8B894; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="citrus"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(251,146,60,0.14), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(245,158,11,0.10), transparent 60%), var(--bg-cosmos); } :root[data-theme="finance"] { --bg-cosmos: #0B1020; --bg-secondary: #121A30; --bg-elevated: #16203A; --c-cyan: #D4AF37; --c-cyan-soft: #E6C75A; --c-blue: #14B8A6; --c-blue-soft: #5EEAD4; --c-purple: #B8860B; --c-purple-soft: #E9C46A; --c-orange: #E8833A; --c-green: #10B981; --c-contrast: #D4AF37; --text-primary: #F1E9D2; --text-secondary: #A9B4C7; --text-dim: #7C87A1; --border-glass: rgba(212,175,55,0.18); --border-glow: rgba(212,175,55,0.35); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #D4AF37 12%, transparent); --surface-active: color-mix(in srgb, #D4AF37 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #0B1020; --intro-sky-bottom: rgb(0,0,1); --intro-glow: rgba(212,175,55,0.12); --intro-star-1: #D4AF37; --intro-star-2: #B8860B; --intro-star-3: #E8833A; --intro-fg: #F1E9D2; --intro-fg-soft: #A9B4C7; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="finance"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(212,175,55,0.12), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(20,184,166,0.10), transparent 60%), var(--bg-cosmos); } :root[data-theme="blue"] { --bg-cosmos: #F4F8FF; --bg-secondary: #E7EFFB; --bg-elevated: #FFFFFF; --c-cyan: #2563EB; --c-cyan-soft: #3B82F6; --c-blue: #1D4ED8; --c-blue-soft: #60A5FA; --c-purple: #6366F1; --c-purple-soft: #A5B4FC; --c-orange: #EA8C2A; --c-green: #059669; --c-contrast: #1D4ED8; --text-primary: #0F1B33; --text-secondary: #3A4A66; --text-dim: #5B6B86; --border-glass: rgba(37,99,235,0.14); --border-glow: rgba(37,99,235,0.30); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #2563EB 10%, transparent); --surface-active: color-mix(in srgb, #2563EB 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #2563EB 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #F4F8FF; --intro-sky-bottom: rgb(245,248,255); --intro-glow: rgba(37,99,235,0.12); --intro-star-1: rgb(13,23,44); --intro-star-2: rgb(65,67,159); --intro-star-3: rgb(168,101,30); --intro-fg: #0F1B33; --intro-fg-soft: #3A4A66; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="blue"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,0.08), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(96,165,250,0.07), transparent 60%), var(--bg-cosmos); } :root[data-theme="gov-red"] { --bg-cosmos: #FBF5F3; --bg-secondary: #F4E6E1; --bg-elevated: #FFFFFF; --c-cyan: #C8102E; --c-cyan-soft: #D83A3A; --c-blue: #9E0B22; --c-blue-soft: #D96B6B; --c-purple: #B8860B; --c-purple-soft: #C9A227; --c-orange: #D9762E; --c-green: #2E7D32; --c-contrast: #C8102E; --text-primary: #2A0F10; --text-secondary: #5E3A36; --text-dim: #7A5853; --border-glass: rgba(200,16,46,0.14); --border-glow: rgba(200,16,46,0.30); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #C8102E 10%, transparent); --surface-active: color-mix(in srgb, #C8102E 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #C8102E 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #FBF5F3; --intro-sky-bottom: rgb(251,246,244); --intro-glow: rgba(200,16,46,0.12); --intro-star-1: rgb(36,13,14); --intro-star-2: rgb(121,88,7); --intro-star-3: rgb(156,85,33); --intro-fg: #2A0F10; --intro-fg-soft: #5E3A36; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="gov-red"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(200,16,46,0.07), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(184,134,11,0.07), transparent 60%), var(--bg-cosmos); } :root[data-theme="medical"] { --bg-cosmos: #F1FBF7; --bg-secondary: #E2F4EC; --bg-elevated: #FFFFFF; --c-cyan: #0E7C8B; --c-cyan-soft: #06B6D4; --c-blue: #0D9488; --c-blue-soft: #2DD4BF; --c-purple: #0D9488; --c-purple-soft: #5EEAD4; --c-orange: #D98324; --c-green: #059669; --c-contrast: #0E7C8B; --text-primary: #07251F; --text-secondary: #2F5C52; --text-dim: #4E7268; --border-glass: rgba(8,145,178,0.14); --border-glow: rgba(13,148,136,0.30); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #0E7C8B 10%, transparent); --surface-active: color-mix(in srgb, #0E7C8B 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #0E7C8B 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #F1FBF7; --intro-sky-bottom: rgb(242,251,247); --intro-glow: rgba(14,124,139,0.12); --intro-star-1: rgb(6,32,27); --intro-star-2: rgb(9,98,90); --intro-star-3: rgb(156,94,26); --intro-fg: #07251F; --intro-fg-soft: #2F5C52; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="medical"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(8,145,178,0.07), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(13,148,136,0.07), transparent 60%), var(--bg-cosmos); } :root[data-theme="midnight"] { --bg-cosmos: #0B0E1F; --bg-secondary: #141833; --bg-elevated: #1B2042; --c-cyan: #8B95F5; --c-cyan-soft: #A5B4FC; --c-blue: #6366F1; --c-blue-soft: #A5B4FC; --c-purple: #A855F7; --c-purple-soft: #C4B5FD; --c-orange: #FB923C; --c-green: #34D399; --c-contrast: #A5B4FC; --text-primary: #EAEDFF; --text-secondary: #AEB4D8; --text-dim: #7C84B0; --border-glass: rgba(255,255,255,0.10); --border-glow: rgba(129,140,248,0.35); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #8B95F5 12%, transparent); --surface-active: color-mix(in srgb, #8B95F5 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #0B0E1F; --intro-sky-bottom: rgb(0,0,0); --intro-glow: rgba(139,149,245,0.12); --intro-star-1: #8B95F5; --intro-star-2: #A855F7; --intro-star-3: #FB923C; --intro-fg: #EAEDFF; --intro-fg-soft: #AEB4D8; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="midnight"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(129,140,248,0.12), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(168,85,247,0.10), transparent 60%), var(--bg-cosmos); } :root[data-theme="emerald"] { --bg-cosmos: #07140F; --bg-secondary: #0C1F17; --bg-elevated: #102A20; --c-cyan: #34D399; --c-cyan-soft: #6EE7B7; --c-blue: #10B981; --c-blue-soft: #5EEAD4; --c-purple: #2DD4BF; --c-purple-soft: #5EEAD4; --c-orange: #F59E0B; --c-green: #34D399; --c-contrast: #6EE7B7; --text-primary: #E7FBF1; --text-secondary: #A7C7B8; --text-dim: #6E9485; --border-glass: rgba(255,255,255,0.10); --border-glow: rgba(52,211,153,0.35); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #34D399 12%, transparent); --surface-active: color-mix(in srgb, #34D399 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #07140F; --intro-sky-bottom: rgb(0,0,0); --intro-glow: rgba(52,211,153,0.12); --intro-star-1: #34D399; --intro-star-2: #2DD4BF; --intro-star-3: #F59E0B; --intro-fg: #E7FBF1; --intro-fg-soft: #A7C7B8; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="emerald"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(52,211,153,0.12), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(16,185,129,0.10), transparent 60%), var(--bg-cosmos); } :root[data-theme="rose"] { --bg-cosmos: #160A12; --bg-secondary: #241019; --bg-elevated: #2E1420; --c-cyan: #FB7185; --c-cyan-soft: #FDA4AF; --c-blue: #F43F5E; --c-blue-soft: #FB7185; --c-purple: #C084FC; --c-purple-soft: #E9D5FF; --c-orange: #FB923C; --c-green: #34D399; --c-contrast: #FDA4AF; --text-primary: #FCE7EF; --text-secondary: #D6AEBB; --text-dim: #A37C8C; --border-glass: rgba(255,255,255,0.10); --border-glow: rgba(251,113,133,0.35); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #FB7185 12%, transparent); --surface-active: color-mix(in srgb, #FB7185 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #160A12; --intro-sky-bottom: rgb(0,0,0); --intro-glow: rgba(251,113,133,0.12); --intro-star-1: #FB7185; --intro-star-2: #C084FC; --intro-star-3: #FB923C; --intro-fg: #FCE7EF; --intro-fg-soft: #D6AEBB; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="rose"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(251,113,133,0.12), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(192,132,252,0.10), transparent 60%), var(--bg-cosmos); } :root[data-theme="graphite"] { --bg-cosmos: #0E0F12; --bg-secondary: #17191E; --bg-elevated: #1E2128; --c-cyan: #7DB4FF; --c-cyan-soft: #93C5FD; --c-blue: #4F8EF7; --c-blue-soft: #93C5FD; --c-purple: #8B95A7; --c-purple-soft: #B6BECE; --c-orange: #E08A3C; --c-green: #4FB286; --c-contrast: #93C5FD; --text-primary: #E8EBF0; --text-secondary: #A6ADBA; --text-dim: #828B9B; --border-glass: rgba(255,255,255,0.09); --border-glow: rgba(107,168,255,0.32); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #7DB4FF 12%, transparent); --surface-active: color-mix(in srgb, #7DB4FF 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #0E0F12; --intro-sky-bottom: rgb(0,0,0); --intro-glow: rgba(125,180,255,0.12); --intro-star-1: #7DB4FF; --intro-star-2: #8B95A7; --intro-star-3: #E08A3C; --intro-fg: #E8EBF0; --intro-fg-soft: #A6ADBA; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="graphite"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(107,168,255,0.10), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(139,149,167,0.08), transparent 60%), var(--bg-cosmos); } :root[data-theme="aurora"] { --bg-cosmos: #07131A; --bg-secondary: #0C1F2A; --bg-elevated: #102A38; --c-cyan: #2DD4BF; --c-cyan-soft: #5EEAD4; --c-blue: #38BDF8; --c-blue-soft: #7DD3FC; --c-purple: #818CF8; --c-purple-soft: #A5B4FC; --c-orange: #FBBF24; --c-green: #34D399; --c-contrast: #5EEAD4; --text-primary: #E6F7F7; --text-secondary: #A6C8CC; --text-dim: #6E9298; --border-glass: rgba(255,255,255,0.10); --border-glow: rgba(45,212,191,0.35); --bg-drawer: rgba(16,22,36,0.97); --surface-hover: color-mix(in srgb, #2DD4BF 12%, transparent); --surface-active: color-mix(in srgb, #2DD4BF 20%, transparent); --glass-bg: rgba(255,255,255,0.04); --glass-border: rgba(255,255,255,0.08); --drawer-shadow: rgba(0,0,0,0.40); --hairline: rgba(255,255,255,0.10); --intro-sky-top: #07131A; --intro-sky-bottom: rgb(0,0,0); --intro-glow: rgba(45,212,191,0.12); --intro-star-1: #2DD4BF; --intro-star-2: #818CF8; --intro-star-3: #FBBF24; --intro-fg: #E6F7F7; --intro-fg-soft: #A6C8CC; --intro-twinkle: 1; --intro-clear-a: 0.34; } body[data-theme="aurora"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(45,212,191,0.12), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(56,189,248,0.10), transparent 60%), var(--bg-cosmos); } :root[data-theme="snow"] { --bg-cosmos: #FAFBFD; --bg-secondary: #EEF2F8; --bg-elevated: #FFFFFF; --c-cyan: #2563EB; --c-cyan-soft: #4F86F7; --c-blue: #1E40AF; --c-blue-soft: #60A5FA; --c-purple: #7C3AED; --c-purple-soft: #A78BFA; --c-orange: #E08A2C; --c-green: #0E9F6E; --c-contrast: #1E40AF; --text-primary: #10182B; --text-secondary: #3C4861; --text-dim: #58657E; --border-glass: rgba(37,99,235,0.12); --border-glow: rgba(37,99,235,0.28); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #2563EB 10%, transparent); --surface-active: color-mix(in srgb, #2563EB 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #2563EB 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #FAFBFD; --intro-sky-bottom: rgb(250,251,253); --intro-glow: rgba(37,99,235,0.12); --intro-star-1: rgb(14,21,37); --intro-star-2: rgb(82,38,156); --intro-star-3: rgb(161,99,32); --intro-fg: #10182B; --intro-fg-soft: #3C4861; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="snow"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,0.06), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(124,58,237,0.05), transparent 60%), var(--bg-cosmos); } :root[data-theme="sand"] { --bg-cosmos: #FBF6EF; --bg-secondary: #F2E8DA; --bg-elevated: #FFFFFF; --c-cyan: #C2410C; --c-cyan-soft: #EA580C; --c-blue: #B45309; --c-blue-soft: #D97706; --c-purple: #92734A; --c-purple-soft: #B89968; --c-orange: #EA9A3C; --c-green: #4D7C4F; --c-contrast: #C2410C; --text-primary: #2A1E14; --text-secondary: #5C4733; --text-dim: #7A6450; --border-glass: rgba(194,65,12,0.14); --border-glow: rgba(194,65,12,0.28); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #C2410C 10%, transparent); --surface-active: color-mix(in srgb, #C2410C 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #C2410C 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #FBF6EF; --intro-sky-bottom: rgb(251,247,240); --intro-glow: rgba(194,65,12,0.12); --intro-star-1: rgb(36,26,17); --intro-star-2: rgb(96,76,49); --intro-star-3: rgb(168,111,43); --intro-fg: #2A1E14; --intro-fg-soft: #5C4733; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="sand"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(194,65,12,0.06), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(217,119,6,0.05), transparent 60%), var(--bg-cosmos); } :root[data-theme="mint"] { --bg-cosmos: #EEFBF6; --bg-secondary: #DCF4EA; --bg-elevated: #FFFFFF; --c-cyan: #0B7D73; --c-cyan-soft: #14B8A6; --c-blue: #0E7490; --c-blue-soft: #22D3EE; --c-purple: #0D9488; --c-purple-soft: #5EEAD4; --c-orange: #D98324; --c-green: #059669; --c-contrast: #0B7D73; --text-primary: #07261F; --text-secondary: #2E5A50; --text-dim: #43695F; --border-glass: rgba(13,148,136,0.14); --border-glow: rgba(20,184,166,0.30); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #0B7D73 10%, transparent); --surface-active: color-mix(in srgb, #0B7D73 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #0B7D73 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #EEFBF6; --intro-sky-bottom: rgb(239,251,247); --intro-glow: rgba(11,125,115,0.12); --intro-star-1: rgb(6,33,27); --intro-star-2: rgb(9,98,90); --intro-star-3: rgb(156,94,26); --intro-fg: #07261F; --intro-fg-soft: #2E5A50; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="mint"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(13,148,136,0.06), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(20,184,166,0.05), transparent 60%), var(--bg-cosmos); } :root[data-theme="lavender"] { --bg-cosmos: #F7F5FC; --bg-secondary: #ECE7F7; --bg-elevated: #FFFFFF; --c-cyan: #7C3AED; --c-cyan-soft: #8B5CF6; --c-blue: #6D28D9; --c-blue-soft: #A78BFA; --c-purple: #9333EA; --c-purple-soft: #C4B5FD; --c-orange: #D97706; --c-green: #059669; --c-contrast: #6D28D9; --text-primary: #1C1430; --text-secondary: #44375F; --text-dim: #5E5378; --border-glass: rgba(124,58,237,0.13); --border-glow: rgba(124,58,237,0.28); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #7C3AED 10%, transparent); --surface-active: color-mix(in srgb, #7C3AED 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #7C3AED 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #F7F5FC; --intro-sky-bottom: rgb(247,246,252); --intro-glow: rgba(124,58,237,0.12); --intro-star-1: rgb(24,17,41); --intro-star-2: rgb(97,34,154); --intro-star-3: rgb(156,86,4); --intro-fg: #1C1430; --intro-fg-soft: #44375F; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="lavender"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,0.06), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(168,85,247,0.05), transparent 60%), var(--bg-cosmos); } :root[data-theme="ocean"] { --bg-cosmos: #EEF5FB; --bg-secondary: #DCEAF6; --bg-elevated: #FFFFFF; --c-cyan: #0B6FA8; --c-cyan-soft: #0EA5E9; --c-blue: #0369A1; --c-blue-soft: #38BDF8; --c-purple: #7C3AED; --c-purple-soft: #A78BFA; --c-orange: #EA8C2A; --c-green: #0E9F6E; --c-contrast: #0B6FA8; --text-primary: #082235; --text-secondary: #2C4A60; --text-dim: #486A82; --border-glass: rgba(2,132,199,0.14); --border-glow: rgba(14,165,233,0.30); --bg-drawer: #FFFFFF; --surface-hover: color-mix(in srgb, #0B6FA8 10%, transparent); --surface-active: color-mix(in srgb, #0B6FA8 16%, transparent); --glass-bg: #FFFFFF; --glass-border: color-mix(in srgb, #0B6FA8 16%, transparent); --drawer-shadow: rgba(15,23,42,0.16); --hairline: rgba(15,23,42,0.12); --intro-sky-top: #EEF5FB; --intro-sky-bottom: rgb(239,246,251); --intro-glow: rgba(11,111,168,0.12); --intro-star-1: rgb(7,29,46); --intro-star-2: rgb(82,38,156); --intro-star-3: rgb(168,101,30); --intro-fg: #082235; --intro-fg-soft: #2C4A60; --intro-twinkle: 1.25; --intro-clear-a: 0.55; } body[data-theme="ocean"]::before { background: radial-gradient(1200px 600px at 80% -10%, rgba(2,132,199,0.06), transparent 60%), radial-gradient(900px 500px at 10% 10%, rgba(14,165,233,0.05), transparent 60%), var(--bg-cosmos); } /* 主题平滑过渡（切换时由 .theme-anim 临时类触发，尊重 reduced-motion） */ html.theme-anim, html.theme-anim body, html.theme-anim body * { transition: background-color .45s var(--ease-smooth, ease), color .45s var(--ease-smooth, ease), border-color .45s var(--ease-smooth, ease), box-shadow .45s var(--ease-smooth, ease) !important; } @media (prefers-reduced-motion: reduce) { html.theme-anim, html.theme-anim body, html.theme-anim body * { transition: none !important; } }