/* ============================================================ theme.css — EngFlow 双主题系统 引入顺序：必须在 animal.css 之后。 通过 切换； island = 云端课堂（天空渐变+白云卡片，覆盖动森默认） space = 夜晚太空舱（深空底色+霓虹发光，形状语言不变） ============================================================ */ /* ── 全站公共层：字体统一 + 旧装饰层清理 ── */ body { font-family: 'Nunito', 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif; } .bg-mesh, .star-field, .noise-overlay, .noise { display: none !important; } /* top-bar 页（plan/lianliankan）：按钮排到最右 */ .top-bar .theme-toggle { order: 99; } .top-bar .top-stats { margin-left: auto; } /* 浮动变体：无导航栏页面 */ .theme-toggle-float { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 14px; z-index: 900; } /* ── 切换时的全局过渡（由 theme.js 短暂挂上 html.theme-fading） ── */ html.theme-fading *, html.theme-fading *::before, html.theme-fading *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important; } /* ════════════════════════════════════════ 主题切换按钮（导航栏胶囊，三态图标） ════════════════════════════════════════ */ .theme-toggle { width: 40px; height: 40px; padding: 0; flex-shrink: 0; border-radius: 50%; background: rgb(247, 243, 223); border: 2px solid #d4c4a8; box-shadow: 0 3px 0 0 #d4c9b4; color: #794f27; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); } .theme-toggle:hover { transform: translateY(-1px); box-shadow: 0 4px 0 0 #c4b89e; border-color: #19c8b9; } .theme-toggle:active { transform: translateY(2px); box-shadow: 0 1px 0 0 #d4c9b4; } .theme-toggle svg { width: 20px; height: 20px; display: none; } [data-theme-mode="island"] .theme-toggle .tt-sun { display: block; } [data-theme-mode="space"] .theme-toggle .tt-moon { display: block; } [data-theme-mode="auto"] .theme-toggle .tt-auto-i { display: block; } /* ════════════════════════════════════════ 星空画布（theme.js 按需创建，仅太空模式显示） ════════════════════════════════════════ */ #ef-stars { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; pointer-events: none; display: none; } [data-theme="space"] #ef-stars { display: block; } /* ════════════════════════════════════════ 云端课堂主题（白天）：token 重映射 暖棕羊皮纸 → 天空蓝 + 白云卡片 + 海军蓝文字 ════════════════════════════════════════ */ [data-theme="island"] { --animal-primary-bg: #e6f7ff; --animal-text: #2b4a66; --animal-text-body: #3e5f7a; --animal-text-secondary: #7391ab; --animal-text-muted: #8aa5bb; --animal-text-disabled: #bcd2e2; --animal-bg: #eaf6ff; --animal-bg-content: #ffffff; --animal-bg-secondary: #eaf5fd; --animal-bg-panel: #f4fafe; --animal-border: #7fb3d8; --animal-border-hover: #19c8b9; --animal-border-light: #dceefb; --animal-border-pattern: #b9dcf2; --animal-shadow-btn: #a8d4ee; --animal-shadow-input: #cfe6f5; --animal-success: #35b24a; --bg-primary: #eaf6ff; --glass: rgba(255, 255, 255, 0.88); --glass-solid: #ffffff; --glass-border: #b9dcf2; --text-primary: #2b4a66; --text-secondary: #7391ab; --text-muted: #8aa5bb; --navbar-bg: rgba(255, 255, 255, 0.82); --track: rgba(43, 74, 102, 0.12); } /* 天空渐变背景：顶部阳光光晕 + 三段天蓝过渡 */ [data-theme="island"] body { background: radial-gradient(560px 380px at 86% -6%, rgba(255, 214, 120, 0.5), transparent 68%), linear-gradient(180deg, #b9e2ff 0%, #d8f0ff 34%, #eff8ff 62%, #fdfef6 100%); animation: none; } /* 四层云：尺寸/高度/速度各不相同，错位平铺形成随机感 */ [data-theme="island"] body::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: 100%; pointer-events: none; background-repeat: repeat-x; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1150' height='150' viewBox='0 0 1150 150'%3E%3Cg fill='%23ffffff' fill-opacity='0.92'%3E%3Cellipse cx='320' cy='92' rx='75' ry='32'/%3E%3Cellipse cx='400' cy='66' rx='80' ry='40'/%3E%3Cellipse cx='490' cy='88' rx='72' ry='34'/%3E%3Crect x='250' y='92' width='300' height='30' rx='15'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='820' height='110' viewBox='0 0 820 110'%3E%3Cg fill='%23ffffff' fill-opacity='0.7'%3E%3Cellipse cx='550' cy='64' rx='52' ry='22'/%3E%3Cellipse cx='608' cy='48' rx='56' ry='27'/%3E%3Cellipse cx='666' cy='60' rx='48' ry='22'/%3E%3Crect x='500' y='58' width='212' height='24' rx='12'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='650' height='84' viewBox='0 0 650 84'%3E%3Cg fill='%23ffffff' fill-opacity='0.6'%3E%3Cellipse cx='120' cy='58' rx='36' ry='16'/%3E%3Cellipse cx='160' cy='46' rx='40' ry='19'/%3E%3Crect x='86' y='54' width='148' height='14' rx='7'/%3E%3Cellipse cx='480' cy='44' rx='28' ry='12'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1300' height='96' viewBox='0 0 1300 96'%3E%3Cg fill='%23ffffff' fill-opacity='0.5'%3E%3Cellipse cx='300' cy='60' rx='110' ry='20'/%3E%3Cellipse cx='430' cy='50' rx='120' ry='24'/%3E%3Cellipse cx='560' cy='62' rx='105' ry='19'/%3E%3Crect x='200' y='58' width='460' height='20' rx='10'/%3E%3C/g%3E%3C/svg%3E"); background-size: 1150px 150px, 820px 110px, 650px 84px, 1300px 96px; background-position: 0 9%, 0 27%, 0 42%, 0 60%; opacity: 0.95; animation: ef-cloud-drift 240s linear infinite; } /* 右上角慢速旋转的卡通太阳（背景天空已有暖色光晕作外圈光） */ [data-theme="island"] body::after { content: ''; position: fixed; top: -34px; right: -34px; width: clamp(150px, 22vw, 220px); height: clamp(150px, 22vw, 220px); border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle at 50% 50%, #fff3c4 0 18%, #ffdf6e 30%, #ffd166 41%, rgba(255, 209, 102, 0.95) 43%, rgba(255, 209, 102, 0) 44.5%), repeating-conic-gradient(from 8deg, #ffd166 0deg 6deg, rgba(255, 209, 102, 0) 6deg 18deg); -webkit-mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); mask: radial-gradient(circle at 50% 50%, #000 58%, transparent 71%); animation: ef-sun-spin 90s linear infinite; } @keyframes ef-cloud-drift { to { background-position-x: -2300px, -3280px, -3900px, -2600px; } } @keyframes ef-sun-spin { to { transform: rotate(360deg); } } /* ── 云端课堂：组件覆盖 ── */ /* 导航与切换按钮 */ [data-theme="island"] .nav-brand-icon { background: linear-gradient(135deg, #19c8b9, #4aa8f0); } [data-theme="island"] .theme-toggle { background: #ffffff; border-color: #b9dcf2; box-shadow: 0 3px 0 0 #cfe6f5; color: #2b4a66; } [data-theme="island"] .theme-toggle:hover { box-shadow: 0 4px 0 0 #a8d4ee; border-color: #19c8b9; } [data-theme="island"] .theme-toggle:active { box-shadow: 0 1px 0 0 #cfe6f5; } /* 打卡横幅：晴空阳光卡 */ [data-theme="island"] .streak-banner { background: radial-gradient(circle, rgba(255, 209, 102, 0.22) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(255, 228, 156, 0.16) 1px, transparent 1px), #fffef8; border-color: #ffd166; } [data-theme="island"] .streak-info h3 { color: #2b4a66; } [data-theme="island"] .streak-info p { color: #8aa5bb; } [data-theme="island"] .streak-dot { background: rgba(255, 255, 255, 0.9); border-color: #d8e9f5; } [data-theme="island"] .streak-dot.active { background: #ffd166; border-color: #eab54c; color: #6b5310; } /* 生词提醒 */ [data-theme="island"] .vocab-due { border-color: #b9dcf2; box-shadow: 0 3px 0 0 #cfe6f5; } [data-theme="island"] .vocab-due:hover { border-color: #19c8b9; box-shadow: 0 4px 0 0 #a8d4ee; } [data-theme="island"] .vocab-due:active { box-shadow: 0 2px 0 0 #cfe6f5; } /* 区块链接 */ [data-theme="island"] .section-link { background: #ffffff; border-color: #b9dcf2; box-shadow: 0 3px 0 0 #cfe6f5; } [data-theme="island"] .section-link:hover { box-shadow: 0 4px 0 0 #a8d4ee; } /* 继续学习卡：白云 + 薄荷波点 */ [data-theme="island"] .continue-card { background: radial-gradient(circle, rgba(25, 200, 185, 0.14) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(74, 168, 240, 0.10) 1px, transparent 1px), #ffffff; border-color: #19c8b9; color: #0e6e63; } [data-theme="island"] .continue-label, [data-theme="island"] .continue-course-name { color: #0e6e63; } [data-theme="island"] .continue-lesson, [data-theme="island"] .continue-progress-text { color: #45969f; } [data-theme="island"] .continue-btn { background: #f4fafe; border-color: #b9dcf2; color: #2b4a66; box-shadow: 0 5px 0 0 #a8d4ee; } [data-theme="island"] .continue-btn:hover { border-color: #19c8b9; } [data-theme="island"] .continue-progress-bar { background: rgba(14, 110, 99, 0.10); border-color: rgba(14, 110, 99, 0.16); } /* 课程卡片：纯白云卡 */ [data-theme="island"] .course-card { background: #ffffff; border-color: #b9dcf2; } [data-theme="island"] .course-cover, [data-theme="island"] .course-cover-placeholder { border-bottom-color: #dceefb; } [data-theme="island"] .course-progress { border-top-color: #b9dcf2; } [data-theme="island"] .course-progress-bar { background: rgba(43, 74, 102, 0.07); border-color: rgba(43, 74, 102, 0.10); } /* 加载状态 */ [data-theme="island"] .loading-state { background: #ffffff; border-color: #b9dcf2; } [data-theme="island"] .loading-spinner { border-color: rgba(43, 74, 102, 0.12); border-top-color: #19c8b9; border-right-color: #4aa8f0; } /* 学习方法卡 */ [data-theme="island"] .tip-card { background: #ffffff; border-color: #b9dcf2; } [data-theme="island"] .tip-number { box-shadow: 0 3px 0 0 rgba(143, 195, 228, 0.7); } /* 页脚 */ [data-theme="island"] .footer { background: rgba(255, 255, 255, 0.88); border-top-color: #b9dcf2; } [data-theme="island"] .footer-link { background: #ffffff; border-color: #b9dcf2; box-shadow: 0 3px 0 0 #cfe6f5; } [data-theme="island"] .footer-link:hover { box-shadow: 0 4px 0 0 #a8d4ee; } /* 弹窗 */ [data-theme="island"] .modal-overlay { background: rgba(23, 68, 108, 0.28); } [data-theme="island"] .modal { background: #ffffff; } [data-theme="island"] .modal-close:hover { background: rgba(43, 74, 102, 0.08); } /* 统计与数据管理面板 */ [data-theme="island"] .stat-card { background: #f4fafe; border-color: #b9dcf2; } [data-theme="island"] .data-btn { background: #f4fafe; border-color: #b9dcf2; box-shadow: 0 3px 0 0 #cfe6f5; } [data-theme="island"] .data-btn:hover { box-shadow: 0 4px 0 0 #a8d4ee; } [data-theme="island"] .data-preview { background: #f4fafe; border-color: #b9dcf2; } [data-theme="island"] .data-preview-head { background: #eaf5fd; border-bottom-color: #b9dcf2; } [data-theme="island"] .data-preview-row { border-bottom-color: #dceefb; } [data-theme="island"] .data-mode-btn { background: #f4fafe; border-color: #b9dcf2; box-shadow: 0 3px 0 0 #cfe6f5; } [data-theme="island"] .data-mode-btn.active { background: rgba(25, 200, 185, 0.12); border-color: #19c8b9; box-shadow: 0 3px 0 0 #9adbd2; } [data-theme="island"] .data-primary-btn { background: #19c8b9; border-color: #19c8b9; color: #04332d; box-shadow: 0 5px 0 0 #12867c; } [data-theme="island"] .data-primary-btn:hover { background: #3dd4c6; border-color: #3dd4c6; box-shadow: 0 6px 0 0 #12867c; } [data-theme="island"] .tip-detail { background: #f4fafe; border-color: #b9dcf2; } /* 卡片柔光阴影换晴空气泡版 */ [data-theme="island"] .vocab-due, [data-theme="island"] .continue-card, [data-theme="island"] .course-card, [data-theme="island"] .tip-card, [data-theme="island"] .footer, [data-theme="island"] .loading-state { box-shadow: 0 8px 20px rgba(64, 140, 200, 0.14), 0 2px 6px rgba(64, 140, 200, 0.08); } [data-theme="island"] .streak-banner { box-shadow: 0 3px 0 0 rgba(214, 158, 46, 0.4), 0 8px 20px rgba(64, 140, 200, 0.12); } @media (prefers-reduced-motion: reduce) { [data-theme="island"] body::before, [data-theme="island"] body::after { animation: none; } } /* ════════════════════════════════════════ 太空舱主题：变量重映射（先改 token，组件自动跟随） ════════════════════════════════════════ */ [data-theme="space"] { /* 主色保持薄荷青，作为霓虹光源 */ --animal-primary: #19c8b9; --animal-primary-hover: #3dd4c6; --animal-primary-active: #50b9ab; --animal-primary-bg: rgba(25, 200, 185, 0.14); /* 文本：星白系 */ --animal-text: #e9edff; --animal-text-body: #c3cdf2; --animal-text-secondary: #97a3d4; --animal-text-muted: #8089b8; --animal-text-disabled: #5a6390; /* 背景：深空面板 */ --animal-bg: #131a33; --animal-bg-content: #20294a; --animal-bg-secondary: #1b2342; --animal-bg-panel: #253056; /* 边框 */ --animal-border: #4a5590; --animal-border-hover: #6a78c8; --animal-border-light: #2c3763; --animal-border-pattern: #35406b; /* 3D 阴影基座换成夜色 */ --animal-shadow-btn: #10162e; --animal-shadow-input: #2a345e; --animal-shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.3); --animal-shadow-base: 0 3px 10px 0 rgba(0, 0, 0, 0.35); /* 状态色提亮保证暗底可读 */ --animal-success: #8fd45a; --animal-warning: #ffd166; --animal-error: #ff7b7b; --animal-focus-yellow: #ffcc00; /* 兼容旧变量（JS 内联样式仍引用） */ --bg-primary: #131a33; --glass: rgba(32, 41, 74, 0.9); --glass-solid: #20294a; --glass-border: #35406b; --text-primary: #e9edff; --text-secondary: #97a3d4; --text-muted: #8089b8; --accent-blue: #889df0; --accent-purple: #b77dee; --accent-green: #8ac68a; --accent-amber: #ffd166; --accent-rose: #fc736d; --accent-cyan: #82d5bb; --accent-pink: #f8a6b2; --accent-orange: #e59266; --accent-yellow: #f7cd67; --navbar-bg: rgba(17, 23, 46, 0.88); --track: rgba(150, 165, 230, 0.16); } /* ════════════════════════════════════════ 太空舱主题：背景与整体 ════════════════════════════════════════ */ [data-theme="space"] body { background: radial-gradient(1100px 700px at 12% -8%, rgba(25, 200, 185, 0.10), transparent 60%), radial-gradient(900px 620px at 108% 108%, rgba(183, 125, 238, 0.13), transparent 60%), radial-gradient(700px 500px at 85% 8%, rgba(136, 157, 240, 0.08), transparent 60%), #131a33; background-attachment: fixed; animation: none; /* 夜间专属火箭光标（data-URI，无需图片资源） */ cursor: url("data:image/svg+xml;utf8,") 14 3, auto; } /* ════════════════════════════════════════ 太空舱主题：组件逐个覆盖（animal.css 中硬编码色的部分） ════════════════════════════════════════ */ /* 导航栏 */ [data-theme="space"] .nav-brand-icon { border-color: rgba(255, 255, 255, 0.88); box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.4), 0 0 12px rgba(25, 200, 185, 0.45); } [data-theme="space"] .nav-stat { color: #c3cdf2; } [data-theme="space"] .nav-stat .val { color: #3dd4c6; text-shadow: 0 0 10px rgba(25, 200, 185, 0.5); } [data-theme="space"] .theme-toggle { background: #20294a; border-color: #3a4680; box-shadow: 0 3px 0 0 #10162e, 0 0 12px rgba(25, 200, 185, 0.2); color: #bcd2ff; } [data-theme="space"] .theme-toggle:hover { box-shadow: 0 4px 0 0 #10162e, 0 0 16px rgba(25, 200, 185, 0.35); border-color: #19c8b9; } /* 飘带标题：投影换成星辉 */ [data-theme="space"] .ac-ribbon { filter: drop-shadow(0 0 12px rgba(136, 157, 240, 0.35)); } /* 打卡横幅：星尘金 */ [data-theme="space"] .streak-banner { background: radial-gradient(circle, rgba(247, 205, 103, 0.10) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(255, 230, 160, 0.07) 1px, transparent 1px), #232042; border-color: #d4a030; color: #f0dc9a; box-shadow: 0 3px 0 0 rgba(212, 160, 48, 0.35), 0 0 18px rgba(212, 160, 48, 0.15); } [data-theme="space"] .streak-info h3 { color: #f0dc9a; } [data-theme="space"] .streak-info p { color: #b9ab77; } [data-theme="space"] .streak-dot { background: rgba(255, 255, 255, 0.07); border-color: rgba(154, 131, 90, 0.5); color: #8089b8; } [data-theme="space"] .streak-dot.active { background: var(--animal-warning); border-color: #e0a800; color: #4a3406; box-shadow: 0 3px 0 0 rgba(212, 160, 48, 0.45), 0 0 12px rgba(255, 209, 102, 0.4); } [data-theme="space"] .streak-dot.today { border-color: #19c8b9; color: #3dd4c6; box-shadow: 0 0 0 2px rgba(25, 200, 185, 0.25), 0 0 10px rgba(25, 200, 185, 0.3); } /* 生词提醒 */ [data-theme="space"] .vocab-due { border-color: #3a4680; box-shadow: 0 3px 0 0 #161d38, 0 0 14px rgba(25, 200, 185, 0.1); } [data-theme="space"] .vocab-due:hover { border-color: #19c8b9; box-shadow: 0 4px 0 0 #161d38, 0 0 18px rgba(25, 200, 185, 0.22); } [data-theme="space"] .vocab-due:active { box-shadow: 0 2px 0 0 #161d38; } [data-theme="space"] .vocab-due-arrow { color: #3dd4c6; } /* 路径卡片：彩色瓷砖在暗底上自然发光，补一圈细描边 */ [data-theme="space"] .path-action, [data-theme="space"] .quick-action { outline: 1px solid rgba(255, 255, 255, 0.14); outline-offset: -1px; } [data-theme="space"] .path-action:hover, [data-theme="space"] .quick-action:hover { box-shadow: 0 7px 0 0 var(--ps, #161d38), 0 0 20px rgba(25, 200, 185, 0.25); } [data-theme="space"] .quick-action:hover { box-shadow: 0 6px 0 0 var(--qs, #161d38), 0 0 20px rgba(25, 200, 185, 0.25); } /* 区块链接按钮 */ [data-theme="space"] .section-link { background: #20294a; border-color: #3a4680; color: #c3cdf2; box-shadow: 0 3px 0 0 #161d38; } [data-theme="space"] .section-link:hover { border-color: #19c8b9; color: #3dd4c6; box-shadow: 0 4px 0 0 #161d38, 0 0 12px rgba(25, 200, 185, 0.2); } /* 继续学习卡：深海薄荷 */ [data-theme="space"] .continue-card { background: radial-gradient(circle, rgba(130, 213, 187, 0.12) 1.5px, transparent 1.5px), radial-gradient(circle, rgba(170, 235, 210, 0.08) 1px, transparent 1px), #173344; border-color: #48ab92; color: #a9ecd9; box-shadow: 0 3px 0 0 #10263a, 0 0 16px rgba(72, 171, 146, 0.18); } [data-theme="space"] .continue-label, [data-theme="space"] .continue-course-name { color: #bff0e2; } [data-theme="space"] .continue-lesson, [data-theme="space"] .continue-progress-text { color: #7ccbb4; } [data-theme="space"] .continue-btn { background: #f8f8f0; border-color: #f8f8f0; color: #794f27; } [data-theme="space"] .continue-progress-bar { background: rgba(130, 213, 187, 0.14); border-color: rgba(130, 213, 187, 0.28); } /* 课程卡片：星图面板 */ [data-theme="space"] .course-card { background: #20294a; border-color: #35406b; } [data-theme="space"] .course-card:hover { border-color: #19c8b9; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4), 0 0 16px rgba(25, 200, 185, 0.18); } [data-theme="space"] .course-cover, [data-theme="space"] .course-cover-placeholder { border-bottom-color: #35406b; } [data-theme="space"] .course-name { color: #e9edff; } [data-theme="space"] .course-subtitle, [data-theme="space"] .course-meta, [data-theme="space"] .course-progress-text { color: #8089b8; } [data-theme="space"] .course-desc { color: #c3cdf2; } [data-theme="space"] .course-progress { border-top-color: #35406b; } [data-theme="space"] .course-progress-bar { background: rgba(120, 140, 220, 0.14); border-color: rgba(120, 140, 220, 0.2); } /* 加载状态 */ [data-theme="space"] .loading-state { background: #20294a; border-color: #35406b; } [data-theme="space"] .loading-spinner { border-color: rgba(150, 170, 255, 0.16); border-top-color: #19c8b9; border-right-color: #b77dee; } [data-theme="space"] .loading-text { color: #8089b8; } /* 学习方法卡 */ [data-theme="space"] .tip-card { background: #20294a; border-color: #35406b; } [data-theme="space"] .tip-card:hover { border-color: #19c8b9; } [data-theme="space"] .tip-number { box-shadow: 0 3px 0 0 rgba(16, 22, 46, 0.75), 0 0 10px rgba(25, 200, 185, 0.15); } [data-theme="space"] .tip-name { color: #e9edff; } [data-theme="space"] .tip-desc { color: #c3cdf2; } /* 页脚 */ [data-theme="space"] .footer { background: rgba(17, 23, 46, 0.85); border-top-color: #35406b; } [data-theme="space"] .footer-link { background: #20294a; border-color: #3a4680; color: #c3cdf2; box-shadow: 0 3px 0 0 #161d38; } [data-theme="space"] .footer-link:hover { border-color: #19c8b9; color: #3dd4c6; box-shadow: 0 4px 0 0 #161d38, 0 0 12px rgba(25, 200, 185, 0.2); } /* 弹窗 */ [data-theme="space"] .modal-overlay { background: rgba(4, 8, 22, 0.62); } [data-theme="space"] .modal { background: #20294a; color: #c3cdf2; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(25, 200, 185, 0.12); } [data-theme="space"] .modal-title { color: #e9edff; } [data-theme="space"] .modal-close { color: rgba(195, 205, 242, 0.6); } [data-theme="space"] .modal-close:hover { background: rgba(255, 255, 255, 0.08); color: #e9edff; } /* 统计卡片 */ [data-theme="space"] .stat-card { background: #253056; border-color: #3a4680; } [data-theme="space"] .stat-card-value { text-shadow: 0 0 14px rgba(136, 157, 240, 0.35); } /* 数据管理 */ [data-theme="space"] .data-desc { color: #c3cdf2; } [data-theme="space"] .data-btn { background: #253056; border-color: #3a4680; color: #e9edff; box-shadow: 0 3px 0 0 #161d38; } [data-theme="space"] .data-btn:hover { border-color: #19c8b9; box-shadow: 0 4px 0 0 #161d38, 0 0 14px rgba(25, 200, 185, 0.18); } [data-theme="space"] .data-btn-title { color: #e9edff; } [data-theme="space"] .data-btn-sub, [data-theme="space"] .data-import-hint { color: #8089b8; } [data-theme="space"] .data-preview { border-color: #3a4680; background: #1b2342; } [data-theme="space"] .data-preview-head { background: #253056; border-bottom-color: #3a4680; } [data-theme="space"] .data-preview-title { color: #e9edff; } [data-theme="space"] .data-preview-row { color: #c3cdf2; border-bottom-color: #35406b; } [data-theme="space"] .data-mode-btn { background: #253056; border-color: #3a4680; color: #c3cdf2; box-shadow: 0 3px 0 0 #161d38; } [data-theme="space"] .data-mode-btn.active { background: rgba(25, 200, 185, 0.14); border-color: #19c8b9; color: #3dd4c6; box-shadow: 0 3px 0 0 rgba(25, 200, 185, 0.35); } [data-theme="space"] .data-primary-btn { background: #19c8b9; border-color: #19c8b9; color: #04332d; box-shadow: 0 5px 0 0 #10877c; } [data-theme="space"] .data-primary-btn:hover { background: #3dd4c6; border-color: #3dd4c6; box-shadow: 0 6px 0 0 #10877c, 0 0 16px rgba(25, 200, 185, 0.35); } [data-theme="space"] .data-ghost-btn { color: #c3cdf2; } /* 学习方法详情 */ [data-theme="space"] .tip-detail { background: #253056; border-color: #3a4680; } [data-theme="space"] .tip-detail-name { color: #e9edff; } [data-theme="space"] .tip-detail-desc { color: #c3cdf2; } /* 卡片柔光阴影替换为夜色版 */ [data-theme="space"] .vocab-due, [data-theme="space"] .continue-card, [data-theme="space"] .course-card, [data-theme="space"] .tip-card, [data-theme="space"] .footer, [data-theme="space"] .loading-state { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(25, 200, 185, 0.07); } /* 减少动态偏好：停用背景动画 */ @media (prefers-reduced-motion: reduce) { [data-theme="space"] body { animation: none !important; } }