/* ========================================================================== 共享样式：变量、按钮、卡片、动画、底部导航所有页面（前台/后台）共用 ========================================================================== */ :root { --bg-0: #020617; --bg-1: #050b1f; --bg-2: #071025; --bg-card: rgba(15, 23, 42, 0.55); --bg-card-strong: rgba(15, 23, 42, 0.85); --border: rgba(99, 102, 241, 0.18); --border-strong: rgba(124, 58, 237, 0.45); --c-cyan: #22d3ee; --c-purple: #7c3aed; --c-purple-light: #8b5cf6; --c-blue: #2563eb; --c-green: #22c55e; --c-orange: #f59e0b; --c-red: #ef4444; --text-1: #f8fafc; --text-2: #94a3b8; --text-3: #64748b; --grad-1: linear-gradient(135deg, #22d3ee 0%, #7c3aed 100%); --grad-2: linear-gradient(135deg, #2563eb 0%, #8b5cf6 100%); --grad-3: linear-gradient(135deg, #22c55e 0%, #22d3ee 100%); --shadow-glow: 0 0 24px rgba(124, 58, 237, 0.35), 0 0 48px rgba(34, 211, 238, 0.15); --shadow-card: 0 10px 30px rgba(2, 6, 23, 0.55), 0 0 0 1px rgba(99, 102, 241, 0.12); --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; } /* ========================================================================== 明亮主题（前台 light 模式）—— 通过切换 ========================================================================== */ body.light { --bg-0: #f6f8ff; --bg-1: #eef2ff; --bg-2: #e2e8ff; --bg-card: rgba(255, 255, 255, 0.78); --bg-card-strong: rgba(255, 255, 255, 0.96); --border: rgba(99, 102, 241, 0.22); --border-strong: rgba(124, 58, 237, 0.45); --c-cyan: #0891b2; --c-purple: #7c3aed; --c-purple-light: #8b5cf6; --c-blue: #2563eb; --c-green: #16a34a; --c-orange: #d97706; --c-red: #dc2626; --text-1: #0f172a; --text-2: #475569; --text-3: #64748b; --grad-1: linear-gradient(135deg, #06b6d4 0%, #7c3aed 100%); --grad-2: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); --grad-3: linear-gradient(135deg, #16a34a 0%, #06b6d4 100%); --shadow-glow: 0 0 24px rgba(124, 58, 237, 0.22), 0 0 48px rgba(34, 211, 238, 0.12); --shadow-card: 0 8px 22px rgba(99, 102, 241, 0.18), 0 0 0 1px rgba(99, 102, 241, 0.12); } body.light { background: var(--bg-0); color: var(--text-1); } body.light::before { background: radial-gradient(1200px 600px at 20% -10%, rgba(124, 58, 237, 0.18), transparent 60%), radial-gradient(900px 500px at 110% 30%, rgba(34, 211, 238, 0.20), transparent 60%), radial-gradient(800px 500px at 50% 120%, rgba(37, 99, 235, 0.18), transparent 60%), linear-gradient(180deg, #f6f8ff 0%, #eef2ff 50%, #f6f8ff 100%); } body.light::after { opacity: 0.08; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg-0); color: var(--text-1); font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } button { font-family: inherit; cursor: pointer; } /* 全局背景：星空 + 极光 */ body::before { content: ""; position: fixed; inset: 0; background: radial-gradient(1200px 600px at 20% -10%, rgba(124, 58, 237, 0.35), transparent 60%), radial-gradient(900px 500px at 110% 30%, rgba(34, 211, 238, 0.22), transparent 60%), radial-gradient(800px 500px at 50% 120%, rgba(37, 99, 235, 0.28), transparent 60%), linear-gradient(180deg, #020617 0%, #050b1f 50%, #020617 100%); z-index: -2; } body::after { content: ""; position: fixed; inset: 0; background-image: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.6) 50%, transparent 51%), radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,0.5) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 40% 80%, rgba(255,255,255,0.4) 50%, transparent 51%), radial-gradient(1px 1px at 85% 15%, rgba(255,255,255,0.6) 50%, transparent 51%), radial-gradient(1px 1px at 10% 70%, rgba(255,255,255,0.5) 50%, transparent 51%); background-size: 600px 600px; opacity: 0.4; z-index: -1; pointer-events: none; } /* 通用工具 */ .text-grad { background: var(--grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; } .muted { color: var(--text-2); } .small { font-size: 12px; } /* 通用按钮 */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-md); border: 1px solid var(--border); background: rgba(15, 23, 42, 0.6); color: var(--text-1); font-size: 14px; transition: all 0.25s ease; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .btn:hover { border-color: var(--border-strong); transform: translateY(-1px); } .btn-primary { background: var(--grad-1); border: none; box-shadow: 0 6px 20px rgba(124, 58, 237, 0.45), 0 0 0 1px rgba(34, 211, 238, 0.4) inset; color: #fff; font-weight: 600; } .btn-primary:hover { box-shadow: 0 10px 28px rgba(124, 58, 237, 0.6); transform: translateY(-2px); } .btn-ghost { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); } .btn-ghost:hover { background: rgba(255,255,255,0.08); } .btn-block { width: 100%; } .btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; } /* 通用卡片 */ .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-card); transition: all 0.3s ease; position: relative; overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(34, 211, 238, 0.4), rgba(124, 58, 237, 0.4)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.5; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-glow); } .card:hover::before { opacity: 1; } /* 标签 */ .tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(34, 211, 238, 0.12); color: var(--c-cyan); border: 1px solid rgba(34, 211, 238, 0.3); } .tag.tag-purple { background: rgba(124, 58, 237, 0.15); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.4); } .tag.tag-green { background: rgba(34, 197, 94, 0.12); color: #86efac; border-color: rgba(34, 197, 94, 0.35); } .tag.tag-orange { background: rgba(245, 158, 11, 0.12); color: #fcd34d; border-color: rgba(245, 158, 11, 0.35); } .tag.tag-red { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border-color: rgba(239, 68, 68, 0.35); } /* 淡入动画 */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fadeUp 0.6s ease both; } .fade-up-1 { animation: fadeUp 0.6s 0.05s ease both; } .fade-up-2 { animation: fadeUp 0.6s 0.15s ease both; } .fade-up-3 { animation: fadeUp 0.6s 0.25s ease both; } .fade-up-4 { animation: fadeUp 0.6s 0.35s ease both; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, 0.5); } 50% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); } } .pulse { animation: pulseGlow 2.2s infinite; } @keyframes spinSlow { to { transform: rotate(360deg); } } .spin-slow { animation: spinSlow 18s linear infinite; } /* Toast */ .toast { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%) translateY(20px); background: rgba(15, 23, 42, 0.95); border: 1px solid var(--border-strong); color: var(--text-1); padding: 12px 20px; border-radius: var(--radius-md); font-size: 13px; opacity: 0; transition: all 0.3s ease; z-index: 9999; pointer-events: none; box-shadow: var(--shadow-glow); backdrop-filter: blur(20px); max-width: 90%; text-align: center; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Modal */ .modal-mask { position: fixed; inset: 0; background: rgba(2, 6, 23, 0.7); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .modal-mask.show { display: flex; } .modal { width: 100%; max-width: 440px; background: rgba(15, 23, 42, 0.95); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-glow); animation: fadeUp 0.25s ease both; max-height: 85vh; overflow-y: auto; } .modal-title { font-size: 16px; font-weight: 600; background: var(--grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; } .modal-meta { font-size: 12px; color: var(--text-2); margin-bottom: 14px; } .modal-body { color: var(--text-1); font-size: 14px; line-height: 1.7; white-space: pre-wrap; } .modal-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 8px; } /* 滚动条 */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { background: rgba(124, 58, 237, 0.35); border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; } /* ========================================================================== 前台 light 模式 - 组件细调（白底卡片、文字色、按钮等） ========================================================================== */ body.light .btn:not(.btn-primary):not(.btn-ghost) { background: rgba(255, 255, 255, 0.85); color: var(--text-1); border: 1px solid var(--border); } body.light .btn-ghost { background: rgba(99, 102, 241, 0.06); border: 1px solid var(--border); } body.light .btn-ghost:hover { background: rgba(99, 102, 241, 0.12); } body.light .tag.tag-purple { color: #6d28d9; } body.light .tag.tag-green { color: #15803d; } body.light .tag.tag-orange { color: #b45309; } body.light .tag.tag-red { color: #b91c1c; } body.light .toast { background: rgba(255, 255, 255, 0.96); color: var(--text-1); box-shadow: var(--shadow-card); } body.light .modal-mask { background: rgba(15, 23, 53, 0.4); } body.light .modal { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-card); } body.light input.input, body.light textarea.textarea, body.light select.select { background: rgba(255, 255, 255, 0.9); color: var(--text-1); border-color: var(--border); } body.light .glass-card, body.light .topbar, body.light .bottom-nav { background: rgba(255, 255, 255, 0.78) !important; color: var(--text-1); border-color: var(--border); } body.light .line-card { background: rgba(255, 255, 255, 0.86); } body.light .notice-bar { background: rgba(255, 255, 255, 0.86); } body.light .topbar-title, body.light .tab-text { color: var(--text-1); }