/* ============================================================ * theme.css — 多主题引擎（爱学习网络 · 学习工具站） * 四套美术风格：深空蓝 / 国风水墨 / 赛博霓虹 / 森林晨光 * 通过 切换，所有使用下列通用类的页面即时换肤。 * 仅定义变量与通用组件，不覆盖页面布局，保证低风险接入。 * ============================================================ */ /* ---------- 1. 深空蓝（默认，沿用既有深空全息科技风） ---------- */ :root, [data-theme="space"] { --bg: radial-gradient(ellipse at 20% 30%, rgba(0, 180, 216, 0.15) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(0, 119, 182, 0.2) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(3, 4, 94, 0.3) 0%, transparent 70%), linear-gradient(135deg, #0a0e27 0%, #0d1b2a 50%, #1b263b 100%); --deco: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.8), transparent), radial-gradient(1px 1px at 90px 40px, rgba(255,255,255,0.6), transparent), radial-gradient(2px 2px at 200px 50px, rgba(0, 180, 216, 0.6), transparent), radial-gradient(1px 1px at 300px 90px, rgba(255,255,255,0.7), transparent); --deco-size: 350px 200px; --deco-opacity: 0.5; --panel-bg: rgba(255, 255, 255, 0.05); --panel-border: rgba(0, 180, 216, 0.25); --accent: #00d4ff; --accent-2: #48e0ff; --accent-soft: rgba(0, 180, 216, 0.1); --text: #e0f7fa; --muted: rgba(186, 230, 253, 0.6); --success: #00ffa3; --error: #ff6b6b; --glow: rgba(0, 180, 216, 0.5); --font: 'Segoe UI', 'PingFang SC', sans-serif; } /* ---------- 2. 国风水墨（宣纸暖色 + 朱砂红 + 衬线） ---------- */ [data-theme="ink"] { --bg: radial-gradient(160deg, #f5efe2 0%, #ece1cc 55%, #f1e8d6 100%); --deco: radial-gradient(220px 220px at 12% 18%, rgba(120, 72, 40, 0.06), transparent), radial-gradient(260px 260px at 86% 78%, rgba(120, 72, 40, 0.05), transparent), radial-gradient(180px 180px at 60% 42%, rgba(80, 50, 30, 0.04), transparent); --deco-size: 760px 760px; --deco-opacity: 0.9; --panel-bg: rgba(255, 255, 255, 0.5); --panel-border: rgba(120, 72, 40, 0.3); --accent: #b03a2e; --accent-2: #c0392b; --accent-soft: rgba(176, 58, 46, 0.1); --text: #36281b; --muted: rgba(96, 74, 54, 0.7); --success: #2e7d54; --error: #c0392b; --glow: rgba(176, 58, 46, 0.32); --font: 'STKaiti', 'KaiTi', 'Songti SC', 'SimSun', serif; } /* ---------- 3. 赛博霓虹（近黑 + 品红/青 霓虹） ---------- */ [data-theme="cyber"] { --bg: radial-gradient(ellipse at 20% 20%, rgba(255, 43, 214, 0.12) 0%, transparent 55%), radial-gradient(ellipse at 80% 80%, rgba(0, 240, 255, 0.1) 0%, transparent 55%), linear-gradient(135deg, #07070f 0%, #0d0d1a 50%, #140a20 100%); --deco: linear-gradient(rgba(255, 43, 214, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.06) 1px, transparent 1px); --deco-size: 42px 42px; --deco-opacity: 0.7; --panel-bg: rgba(255, 255, 255, 0.03); --panel-border: rgba(255, 43, 214, 0.4); --accent: #ff2bd6; --accent-2: #00f0ff; --accent-soft: rgba(255, 43, 214, 0.1); --text: #eaeaff; --muted: rgba(184, 184, 224, 0.6); --success: #39ff14; --error: #ff3b6b; --glow: rgba(255, 43, 214, 0.5); --font: 'Consolas', 'Courier New', monospace; } /* ---------- 4. 森林晨光（浅绿 + 深绿 清新） ---------- */ [data-theme="forest"] { --bg: radial-gradient(160deg, #eaf6ef 0%, #dcefe3 55%, #eef8f1 100%); --deco: radial-gradient(200px 200px at 15% 22%, rgba(46, 158, 99, 0.08), transparent), radial-gradient(240px 240px at 82% 72%, rgba(27, 122, 75, 0.06), transparent); --deco-size: 700px 700px; --deco-opacity: 0.9; --panel-bg: rgba(255, 255, 255, 0.55); --panel-border: rgba(27, 122, 75, 0.3); --accent: #1b7a4b; --accent-2: #2e9e63; --accent-soft: rgba(27, 122, 75, 0.1); --text: #1c3a2a; --muted: rgba(40, 80, 60, 0.7); --success: #2e9e63; --error: #d1495b; --glow: rgba(27, 122, 75, 0.32); --font: 'Segoe UI', 'PingFang SC', sans-serif; } /* ============================================================ * 付费主题（AI 生图背景，积分商城解锁） * 通过暗色叠加层保证浅色文字可读，同时透出精美原图。 * ============================================================ */ /* 5. 星河琉璃 — 深邃星云 + 玻璃光效 */ [data-theme="cosmic"] { --bg: linear-gradient(rgba(8, 12, 40, 0.60), rgba(13, 27, 42, 0.82)), url('theme-imgs/A_breathtaking_deep_space_nebu_2026-07-22T10-41-46.png') center/cover fixed no-repeat; --deco: radial-gradient(2px 2px at 30px 40px, rgba(0, 229, 255, 0.5), transparent), radial-gradient(2px 2px at 120px 90px, rgba(167, 139, 250, 0.5), transparent); --deco-size: 420px 320px; --deco-opacity: 0.45; --panel-bg: rgba(8, 16, 40, 0.45); --panel-border: rgba(0, 229, 255, 0.3); --accent: #00e5ff; --accent-2: #a78bfa; --accent-soft: rgba(0, 229, 255, 0.12); --text: #e6fbff; --muted: rgba(190, 225, 255, 0.7); --success: #2bffb0; --error: #ff6b9d; --glow: rgba(0, 229, 255, 0.5); --font: 'Segoe UI', 'PingFang SC', sans-serif; } /* 6. 青绿千里 — 水墨青山远黛 */ [data-theme="emerald"] { --bg: linear-gradient(rgba(6, 26, 20, 0.66), rgba(10, 30, 24, 0.84)), url('theme-imgs/Traditional_Chinese_ink_wash_p_2026-07-22T10-41-46.png') center/cover fixed no-repeat; --deco: radial-gradient(180px 180px at 20% 25%, rgba(52, 211, 153, 0.18), transparent), radial-gradient(220px 220px at 80% 75%, rgba(163, 230, 53, 0.14), transparent); --deco-size: 700px 700px; --deco-opacity: 0.5; --panel-bg: rgba(6, 28, 22, 0.5); --panel-border: rgba(52, 211, 153, 0.32); --accent: #34d399; --accent-2: #a3e635; --accent-soft: rgba(52, 211, 153, 0.14); --text: #eafff4; --muted: rgba(200, 240, 220, 0.7); --success: #34d399; --error: #ff7a9c; --glow: rgba(52, 211, 153, 0.5); --font: 'STKaiti', 'KaiTi', 'Songti SC', 'SimSun', serif; } /* 7. 霓虹夜都 — 赛博都市霓虹 */ [data-theme="neon2"] { --bg: linear-gradient(rgba(12, 6, 28, 0.62), rgba(18, 8, 32, 0.84)), url('theme-imgs/Cyberpunk_futuristic_city_skyl_2026-07-22T10-41-46.png') center/cover fixed no-repeat; --deco: linear-gradient(rgba(255, 43, 214, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.07) 1px, transparent 1px); --deco-size: 46px 46px; --deco-opacity: 0.6; --panel-bg: rgba(16, 8, 34, 0.5); --panel-border: rgba(255, 43, 214, 0.35); --accent: #ff2bd6; --accent-2: #00f0ff; --accent-soft: rgba(255, 43, 214, 0.12); --text: #f3e9ff; --muted: rgba(200, 190, 235, 0.7); --success: #39ff14; --error: #ff3b6b; --glow: rgba(255, 43, 214, 0.5); --font: 'Consolas', 'Courier New', monospace; } /* 8. 樱落秘境 — 粉色樱花治愈 */ [data-theme="sakura"] { --bg: linear-gradient(rgba(40, 14, 34, 0.58), rgba(54, 18, 44, 0.80)), url('theme-imgs/Dreamy_pink_sakura_forest_sanc_2026-07-22T10-41-46.png') center/cover fixed no-repeat; --deco: radial-gradient(160px 160px at 22% 28%, rgba(255, 143, 199, 0.16), transparent), radial-gradient(200px 200px at 78% 72%, rgba(255, 214, 236, 0.14), transparent); --deco-size: 640px 640px; --deco-opacity: 0.55; --panel-bg: rgba(46, 16, 38, 0.5); --panel-border: rgba(255, 143, 199, 0.32); --accent: #ff8fc7; --accent-2: #ffd6ec; --accent-soft: rgba(255, 143, 199, 0.14); --text: #fff0f7; --muted: rgba(255, 215, 235, 0.72); --success: #7dffb0; --error: #ff6b8a; --glow: rgba(255, 143, 199, 0.5); --font: 'Segoe UI', 'PingFang SC', sans-serif; } /* 9. 极光之境 — 北极光夜空 */ [data-theme="aurora"] { --bg: linear-gradient(rgba(6, 18, 40, 0.58), rgba(10, 24, 48, 0.82)), url('theme-imgs/aurora.png') center/cover fixed no-repeat; --deco: radial-gradient(2px 2px at 30px 40px, rgba(80, 255, 200, 0.5), transparent), radial-gradient(2px 2px at 120px 90px, rgba(140, 120, 255, 0.5), transparent); --deco-size: 420px 320px; --deco-opacity: 0.4; --panel-bg: rgba(8, 20, 44, 0.45); --panel-border: rgba(80, 255, 200, 0.3); --accent: #50ffc8; --accent-2: #8c78ff; --accent-soft: rgba(80, 255, 200, 0.12); --text: #e8fff6; --muted: rgba(190, 230, 225, 0.7); --success: #50ffc8; --error: #ff7aa8; --glow: rgba(80, 255, 200, 0.5); --font: 'Segoe UI', 'PingFang SC', sans-serif; } /* 10. 深海幽境 — 深海光影 */ [data-theme="abyss"] { --bg: linear-gradient(rgba(3, 16, 38, 0.60), rgba(6, 22, 46, 0.84)), url('theme-imgs/abyss.png') center/cover fixed no-repeat; --deco: radial-gradient(180px 180px at 20% 25%, rgba(40, 160, 255, 0.18), transparent), radial-gradient(220px 220px at 80% 75%, rgba(0, 220, 255, 0.14), transparent); --deco-size: 700px 700px; --deco-opacity: 0.5; --panel-bg: rgba(4, 18, 42, 0.5); --panel-border: rgba(40, 160, 255, 0.32); --accent: #28a0ff; --accent-2: #00dcff; --accent-soft: rgba(40, 160, 255, 0.14); --text: #e6f5ff; --muted: rgba(190, 220, 245, 0.7); --success: #00ffc8; --error: #ff6b8a; --glow: rgba(40, 160, 255, 0.5); --font: 'Segoe UI', 'PingFang SC', sans-serif; } /* 11. 敦煌壁画 — 千年壁画风 */ [data-theme="dunhuang"] { --bg: linear-gradient(rgba(28, 14, 6, 0.62), rgba(40, 20, 8, 0.84)), url('theme-imgs/dunhuang.png') center/cover fixed no-repeat; --deco: radial-gradient(160px 160px at 22% 28%, rgba(255, 178, 102, 0.16), transparent), radial-gradient(200px 200px at 78% 72%, rgba(214, 140, 69, 0.14), transparent); --deco-size: 640px 640px; --deco-opacity: 0.5; --panel-bg: rgba(34, 18, 8, 0.5); --panel-border: rgba(255, 178, 102, 0.32); --accent: #ffb266; --accent-2: #d68c45; --accent-soft: rgba(255, 178, 102, 0.14); --text: #fff1e0; --muted: rgba(245, 220, 190, 0.72); --success: #ffd28a; --error: #ff8a6b; --glow: rgba(255, 178, 102, 0.5); --font: 'STKaiti', 'KaiTi', 'Songti SC', 'SimSun', serif; } /* ============================================================ * 动态主题（CSS 动画背景，装备后背景会真正"动"起来：流动/旋转/呼吸/漂移） * 积分价更高；与付费主题同理强制全站换肤并隐藏静态星点。 * 动效通过 JS 注入的真实 DOM 层 .theme-fx（z-index:0，置于内容之下） * 实现，不依赖伪元素与图片加载，确保任意页面都能稳定播放动画。 * ============================================================ */ .theme-fx { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* 12. 流光极光 — 流动极光丝带（明显可感的流动，约 14s 一轮） */ [data-theme="auroraFlow"] { --bg: linear-gradient(115deg, #0a1730 0%, #0d2747 40%, #122a52 60%, #0a1730 100%); --deco: none; --deco-size: auto; --deco-opacity: 0; --panel-bg: rgba(8, 20, 44, 0.45); --panel-border: rgba(80, 255, 200, 0.32); --accent: #50ffc8; --accent-2: #8c78ff; --accent-soft: rgba(80, 255, 200, 0.12); --text: #e8fff6; --muted: rgba(190, 230, 225, 0.7); --success: #50ffc8; --error: #ff7aa8; --glow: rgba(80, 255, 200, 0.72); --font: 'Segoe UI', 'PingFang SC', sans-serif; } html[data-theme="auroraFlow"] .theme-fx { background: radial-gradient(42% 58% at 20% 28%, rgba(80, 255, 200, 0.72), transparent 60%), radial-gradient(48% 52% at 74% 38%, rgba(140, 120, 255, 0.64), transparent 60%), radial-gradient(52% 58% at 46% 78%, rgba(0, 229, 255, 0.56), transparent 60%); background-size: 170% 170%; filter: blur(15px); mix-blend-mode: screen; animation: auroraShift 12s ease-in-out infinite alternate; } html[data-theme="auroraFlow"] .theme-fx::before { content: ''; position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 40%, rgba(130, 255, 220, 0.6) 50%, transparent 60%); filter: blur(10px); mix-blend-mode: screen; animation: sweepDiag 9s ease-in-out infinite; } @keyframes auroraShift { 0% { background-position: 0% 50%; transform: translate(-2%, -1%) scale(1.06); } 100% { background-position: 100% 50%; transform: translate(2%, 1%) scale(1.14); } } @keyframes sweepDiag { 0% { transform: translate(-45%, -45%) rotate(0deg); opacity: 0; } 35% { opacity: 1; } 65% { opacity: 1; } 100% { transform: translate(45%, 45%) rotate(8deg); opacity: 0; } } /* 13. 星轨漩涡 — 旋转星轨银河（约 22s 一圈，明显可见） */ [data-theme="galaxyVortex"] { --bg: linear-gradient(135deg, #05010f 0%, #0a0420 50%, #05010f 100%); --deco: none; --deco-size: auto; --deco-opacity: 0; --panel-bg: rgba(10, 4, 32, 0.5); --panel-border: rgba(140, 120, 255, 0.34); --accent: #8c78ff; --accent-2: #00e5ff; --accent-soft: rgba(140, 120, 255, 0.14); --text: #efeaff; --muted: rgba(200, 190, 240, 0.7); --success: #7dffb0; --error: #ff7aa8; --glow: rgba(140, 120, 255, 0.72); --font: 'Segoe UI', 'PingFang SC', sans-serif; } html[data-theme="galaxyVortex"] .theme-fx { background: conic-gradient(from 0deg at 50% 50%, rgba(140, 120, 255, 0) 0deg, rgba(80, 255, 200, 0.48) 60deg, rgba(0, 229, 255, 0) 140deg, rgba(255, 143, 199, 0.44) 210deg, rgba(0, 0, 0, 0) 320deg, rgba(140, 120, 255, 0) 360deg); filter: blur(24px); mix-blend-mode: screen; animation: galaxySpin 18s linear infinite; } html[data-theme="galaxyVortex"] .theme-fx::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(190, 170, 255, 0.55), transparent 20%); mix-blend-mode: screen; animation: corePulse 4s ease-in-out infinite; } @keyframes galaxySpin { to { transform: rotate(360deg); } } @keyframes corePulse { 0%, 100% { opacity: 0.45; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.15); } } /* 14. 霓虹脉冲 — 呼吸霓虹网格（约 3.2s 一呼，叠加缓慢漂移） */ [data-theme="neonPulse"] { --bg: linear-gradient(135deg, #07070f 0%, #0c0a18 50%, #07070f 100%); --deco: none; --deco-size: auto; --deco-opacity: 0; --panel-bg: rgba(14, 8, 30, 0.5); --panel-border: rgba(255, 43, 214, 0.36); --accent: #ff2bd6; --accent-2: #00f0ff; --accent-soft: rgba(255, 43, 214, 0.14); --text: #f3e9ff; --muted: rgba(200, 190, 235, 0.7); --success: #39ff14; --error: #ff3b6b; --glow: rgba(255, 43, 214, 0.5); --font: 'Consolas', 'Courier New', monospace; } html[data-theme="neonPulse"] .theme-fx { background-image: linear-gradient(rgba(255, 43, 214, 0.30) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.26) 1px, transparent 1px); background-size: 44px 44px; mix-blend-mode: screen; animation: neonBreathe 2.6s ease-in-out infinite, neonDrift 16s linear infinite; } html[data-theme="neonPulse"] .theme-fx::before { content: ''; position: absolute; inset: -30%; background: linear-gradient(120deg, transparent 42%, rgba(0, 240, 255, 0.65) 50%, transparent 58%); filter: blur(8px); mix-blend-mode: screen; animation: sweepDiag 7s ease-in-out infinite; } @keyframes neonBreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } } @keyframes neonDrift { to { background-position: 44px 44px; } } /* 15. 流沙鎏金 — 流动金沙（约 16s 一轮明显流动） */ [data-theme="goldFlow"] { --bg: linear-gradient(135deg, #1a1206 0%, #2a1c08 50%, #1a1206 100%); --deco: none; --deco-size: auto; --deco-opacity: 0; --panel-bg: rgba(26, 18, 6, 0.5); --panel-border: rgba(255, 209, 102, 0.34); --accent: #ffd166; --accent-2: #ffb347; --accent-soft: rgba(255, 209, 102, 0.14); --text: #fff3da; --muted: rgba(245, 225, 190, 0.72); --success: #ffd28a; --error: #ff8a6b; --glow: rgba(255, 209, 102, 0.72); --font: 'STKaiti', 'KaiTi', 'Songti SC', 'SimSun', serif; } html[data-theme="goldFlow"] .theme-fx { background: radial-gradient(38% 48% at 24% 28%, rgba(255, 205, 100, 0.74), transparent 60%), radial-gradient(42% 52% at 72% 50%, rgba(255, 175, 65, 0.62), transparent 60%), radial-gradient(46% 46% at 50% 82%, rgba(255, 225, 150, 0.56), transparent 60%); background-size: 170% 170%; filter: blur(14px); mix-blend-mode: screen; animation: goldFlowMove 13s ease-in-out infinite alternate; } html[data-theme="goldFlow"] .theme-fx::before { content: ''; position: absolute; inset: -25%; background: conic-gradient(from 0deg at 50% 50%, rgba(255, 210, 120, 0) 0deg, rgba(255, 232, 175, 0.55) 40deg, rgba(255, 180, 80, 0) 95deg, rgba(255, 210, 120, 0) 360deg); filter: blur(18px); mix-blend-mode: screen; animation: galaxySpin 24s linear infinite; } @keyframes goldFlowMove { 0% { background-position: 0% 0%; transform: translate(-2%, -2%) scale(1.06); } 100% { background-position: 100% 100%; transform: translate(2%, 2%) scale(1.16); } } /* ============================================================ * 动态主题"全站辉光"：装备动态皮肤时，面板与卡片随强调色脉动发光， * 让"炫"观感贯穿界面。仅对 4 套动态主题生效；静态/免费主题保持平静。 * ============================================================ */ html[data-theme="auroraFlow"] .ui-panel, html[data-theme="galaxyVortex"] .ui-panel, html[data-theme="neonPulse"] .ui-panel, html[data-theme="goldFlow"] .ui-panel, html[data-theme="auroraFlow"] .module-card, html[data-theme="galaxyVortex"] .module-card, html[data-theme="neonPulse"] .module-card, html[data-theme="goldFlow"] .module-card { animation: panelGlow 6s ease-in-out infinite; } @keyframes panelGlow { 0%, 100% { box-shadow: 0 0 14px var(--accent-soft), 0 0 4px var(--accent-soft); } 50% { box-shadow: 0 0 34px var(--glow), 0 0 12px var(--accent-soft); } } /* ============================================================ * 付费主题「全站统一换肤」强制规则 * 无论页面是否接入主题变量，已购买的暗色付费主题都会强制把 body * 背景替换为 AI 精美原图，并隐藏页面自带星点，实现"全站一处换肤"。 * 仅作用于暗色付费主题；浅色免费主题（水墨/森林）保留页面原生呈现， * 避免浅底白字导致不可读。 * ============================================================ */ html[data-theme="cosmic"] body, html[data-theme="emerald"] body, html[data-theme="neon2"] body, html[data-theme="sakura"] body, html[data-theme="aurora"] body, html[data-theme="abyss"] body, html[data-theme="dunhuang"] body, html[data-theme="auroraFlow"] body, html[data-theme="galaxyVortex"] body, html[data-theme="neonPulse"] body, html[data-theme="goldFlow"] body { background: var(--bg) !important; background-attachment: fixed !important; } html[data-theme="cosmic"] body::before, html[data-theme="emerald"] body::before, html[data-theme="neon2"] body::before, html[data-theme="sakura"] body::before, html[data-theme="aurora"] body::before, html[data-theme="abyss"] body::before, html[data-theme="dunhuang"] body::before, html[data-theme="auroraFlow"] body::before, html[data-theme="galaxyVortex"] body::before, html[data-theme="neonPulse"] body::before, html[data-theme="goldFlow"] body::before { display: none !important; } /* 主题切换器：付费未解锁态 */ .ui-theme-chip.locked { opacity: 0.95; } .ui-theme-chip .lock { margin-left: 2px; font-size: 11px; } .ui-theme-chip .price { margin-left: 3px; font-size: 11px; color: var(--success); font-weight: 600; } /* ============================================================ * 通用组件类（全部基于变量，切换主题即时变色） * ============================================================ */ body { font-family: var(--font); min-height: 100vh; color: var(--text); background: var(--bg); background-attachment: fixed; padding: 26px 18px 48px; position: relative; overflow-x: hidden; } body::before { content: ''; position: fixed; inset: 0; background-image: var(--deco); background-size: var(--deco-size); background-repeat: repeat; opacity: var(--deco-opacity); pointer-events: none; animation: themeTwinkle 5s ease-in-out infinite alternate; z-index: 0; } @keyframes themeTwinkle { from { opacity: calc(var(--deco-opacity) * 0.7); } to { opacity: var(--deco-opacity); } } .ui-wrap { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; } .ui-topbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; position: relative; z-index: 1; } .ui-back { color: var(--accent); text-decoration: none; font-size: 14px; letter-spacing: 1px; opacity: 0.85; } .ui-back:hover { opacity: 1; text-shadow: 0 0 10px var(--glow); } .ui-user { font-size: 13px; color: var(--muted); letter-spacing: 1px; } .ui-user b { color: var(--accent); font-weight: 700; } .ui-panel { background: var(--panel-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--panel-border); border-radius: 16px; padding: 22px 20px; box-shadow: 0 0 40px var(--accent-soft), 0 20px 60px rgba(0,0,0,0.35); margin-bottom: 18px; position: relative; z-index: 1; } .ui-panel h3 { font-size: 15px; font-weight: 400; letter-spacing: 2px; color: var(--muted); margin-bottom: 14px; } .ui-hero { text-align: center; } .ui-hero .score { font-size: 56px; font-weight: 700; color: var(--accent); text-shadow: 0 0 28px var(--glow); line-height: 1.1; } .ui-hero .level { font-size: 18px; color: var(--text); letter-spacing: 2px; margin-top: 6px; } .ui-hero .level b { color: var(--accent-2); } .ui-track { height: 10px; border-radius: 10px; background: rgba(128,128,128,0.18); overflow: hidden; margin: 16px 0 8px; } .ui-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px var(--glow); border-radius: 10px; transition: width 0.5s ease; } .ui-hint { text-align: center; font-size: 12px; color: var(--muted); letter-spacing: 1px; } .ui-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; } .ui-mini { text-align: center; padding: 14px 8px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--panel-border); } .ui-mini .num { font-size: 24px; font-weight: 700; color: var(--accent); } .ui-mini .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; letter-spacing: 1px; } .ui-rows { display: flex; flex-direction: column; gap: 10px; } .ui-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--panel-border); } .ui-row .name { font-size: 14px; color: var(--text); } .ui-row .desc { font-size: 12px; color: var(--muted); margin-top: 3px; } .ui-row .pts { font-size: 14px; color: var(--success); font-weight: 600; white-space: nowrap; } .ui-tag { font-size: 11px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--panel-border); color: var(--accent); margin-left: 8px; } .ui-tag.soon { color: var(--muted); border-color: rgba(128,128,128,0.3); } .ui-list { display: flex; flex-direction: column; gap: 8px; } .ui-item { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--panel-border); } .ui-item.me { background: rgba(0, 184, 148, 0.14); border-color: rgba(0, 184, 148, 0.45); } .ui-item .rank { width: 28px; font-size: 16px; font-weight: 700; color: var(--muted); text-align: center; } .ui-item.me .rank { color: var(--success); } .ui-item .who { flex: 1; font-size: 15px; color: var(--text); padding-left: 10px; } .ui-item .sc { font-size: 15px; font-weight: 700; color: var(--accent); } .ui-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 12px; } .ui-btn { display: inline-block; padding: 10px 18px; border-radius: 12px; border: 1px solid var(--panel-border); background: var(--accent-soft); color: var(--text); font-size: 14px; cursor: pointer; text-decoration: none; transition: all 0.2s; font-family: var(--font); } .ui-btn:hover { border-color: var(--accent); } .ui-btn.primary { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; border: none; box-shadow: 0 0 18px var(--glow); } .ui-btn.primary:hover { filter: brightness(1.08); } /* 主题切换器 */ .ui-theme-switch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ui-theme-switch .label { font-size: 12px; color: var(--muted); margin-right: 4px; letter-spacing: 1px; } .ui-theme-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; cursor: pointer; border: 1px solid var(--panel-border); background: var(--accent-soft); color: var(--text); font-size: 12px; transition: all 0.2s; font-family: var(--font); } .ui-theme-chip:hover { border-color: var(--accent); } .ui-theme-chip.active { background: linear-gradient(90deg, var(--accent), var(--accent-2)); color: #fff; border: none; box-shadow: 0 0 14px var(--glow); } .ui-theme-chip .dots { display: inline-flex; gap: 3px; } .ui-theme-chip .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* 管理员无限积分徽章 */ .ui-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 20px; background: linear-gradient(90deg, #f1c40f, #e67e22); color: #2a1a00; font-size: 13px; font-weight: 700; letter-spacing: 1px; box-shadow: 0 0 18px rgba(241, 196, 15, 0.5); } /* 浮动积分提示 */ .ui-toast { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%) translateY(20px); background: var(--panel-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--accent); color: var(--accent); padding: 10px 22px; border-radius: 24px; font-size: 15px; font-weight: 600; letter-spacing: 1px; box-shadow: 0 0 24px var(--glow); opacity: 0; z-index: 999; transition: opacity 0.3s, transform 0.3s; pointer-events: none; font-family: var(--font); } .ui-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 560px) { .ui-mini-grid { gap: 8px; } .ui-mini .num { font-size: 20px; } .ui-hero .score { font-size: 46px; } }