/* Fingarden 主题系统
* 用法: 。默认暗色。
* CSS 变量供各页面使用;太阳/月亮背景与切换按钮样式在此定义。
*/
/* ── 暗色主题(默认) ── */
:root[data-theme="dark"] {
--bg: #0a0a0f;
--bg-orb-1: #1e3a8a;
--bg-orb-2: #4c1d95;
--bg-orb-3: #064e3b;
--card: rgba(255, 255, 255, 0.065);
--card-dense: rgba(255, 255, 255, 0.05);
--card-border: rgba(255, 255, 255, 0.11);
--card-border-subtle: rgba(255, 255, 255, 0.08);
--text: #e2e8f0;
--text-muted: rgba(226, 232, 240, 0.45);
--text-dim: rgba(226, 232, 240, 0.55);
--topbar-bg: rgba(10, 10, 15, 0.75);
--input-bg: rgba(255, 255, 255, 0.06);
--input-border: rgba(255, 255, 255, 0.1);
--up: #f87171;
--down: #34d399;
--accent: #a78bfa;
--accent-soft: rgba(167, 139, 250, 0.2);
--accent-border: rgba(167, 139, 250, 0.35);
--chip-bg: rgba(167, 139, 250, 0.1);
--chip-border: rgba(167, 139, 250, 0.2);
--chip-text: #c4b5fd;
--sun-moon-opacity: 0.22;
--star: #fbbf24;
--star-soft: rgba(251, 191, 36, 0.1);
--star-border: rgba(251, 191, 36, 0.2);
--green-soft: rgba(52, 211, 153, 0.1);
--green-border: rgba(52, 211, 153, 0.2);
--green-text: #6ee7b7;
--red-soft: rgba(248, 113, 113, 0.1);
--red-border: rgba(248, 113, 113, 0.2);
--red-text: #fca5a5;
--blue-soft: rgba(59, 130, 246, 0.12);
--blue-border: rgba(59, 130, 246, 0.28);
--blue-text: #93c5fd;
--header-underline: rgba(255, 255, 255, 0.05);
--tag-hot-bg: rgba(248, 113, 113, 0.14);
--tag-hot-text: #f87171;
--tag-warm-bg: rgba(251, 191, 36, 0.13);
--tag-warm-text: #fbbf24;
--tag-cold-bg: rgba(59, 130, 246, 0.13);
--tag-cold-text: #93c5fd;
--tag-extreme-bg: rgba(244, 63, 94, 0.18);
--tag-extreme-text: #fb7185;
--tag-neutral-bg: rgba(251, 191, 36, 0.12);
--tag-neutral-text: #fbbf24;
--tag-panic-bg: rgba(96, 165, 250, 0.16);
--tag-panic-text: #60a5fa;
}
/* ── 亮色主题(清新明亮) ── */
:root[data-theme="light"] {
--bg: #eef2f7;
--bg-orb-1: #ffd166;
--bg-orb-2: #ffb3c1;
--bg-orb-3: #9ad9db;
--card: rgba(255, 255, 255, 0.7);
--card-dense: rgba(255, 255, 255, 0.6);
--card-border: rgba(15, 23, 42, 0.1);
--card-border-subtle: rgba(15, 23, 42, 0.07);
--text: #1e293b;
--text-muted: rgba(30, 41, 59, 0.45);
--text-dim: rgba(30, 41, 59, 0.55);
--topbar-bg: rgba(238, 242, 247, 0.8);
--input-bg: rgba(255, 255, 255, 0.7);
--input-border: rgba(15, 23, 42, 0.12);
--up: #dc2626;
--down: #059669;
--accent: #7c3aed;
--accent-soft: rgba(124, 58, 237, 0.12);
--accent-border: rgba(124, 58, 237, 0.3);
--chip-bg: rgba(124, 58, 237, 0.08);
--chip-border: rgba(124, 58, 237, 0.18);
--chip-text: #6d28d9;
--sun-moon-opacity: 0.5;
--star: #d97706;
--star-soft: rgba(217, 119, 6, 0.12);
--star-border: rgba(217, 119, 6, 0.25);
--green-soft: rgba(5, 150, 105, 0.1);
--green-border: rgba(5, 150, 105, 0.22);
--green-text: #047857;
--red-soft: rgba(220, 38, 38, 0.1);
--red-border: rgba(220, 38, 38, 0.22);
--red-text: #b91c1c;
--blue-soft: rgba(37, 99, 235, 0.1);
--blue-border: rgba(37, 99, 235, 0.25);
--blue-text: #1d4ed8;
--header-underline: rgba(15, 23, 42, 0.06);
--tag-hot-bg: rgba(220, 38, 38, 0.12);
--tag-hot-text: #dc2626;
--tag-warm-bg: rgba(217, 119, 6, 0.12);
--tag-warm-text: #b45309;
--tag-cold-bg: rgba(37, 99, 235, 0.1);
--tag-cold-text: #1d4ed8;
--tag-extreme-bg: rgba(225, 29, 72, 0.14);
--tag-extreme-text: #be123c;
--tag-neutral-bg: rgba(217, 119, 6, 0.12);
--tag-neutral-text: #b45309;
--tag-panic-bg: rgba(37, 99, 235, 0.12);
--tag-panic-text: #1d4ed8;
}
/* ── 基础 ── */
[data-theme] {
background-color: var(--bg);
color: var(--text);
}
/* ── 玻璃卡片 ── */
.glass {
background: var(--card);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid var(--card-border);
border-radius: 18px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.glass-dense {
background: var(--card-dense);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--card-border-subtle);
border-radius: 11px;
}
/* ── 顶栏 ── */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
background: var(--topbar-bg);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--header-underline);
height: 54px; display: flex; align-items: center; padding: 0 24px; gap: 12px;
}
/* ── 太阳 / 月亮切换按钮 ── */
.theme-toggle {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer; border: 1px solid var(--card-border);
background: var(--card);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
font-size: 18px;
}
.theme-toggle:hover { transform: rotate(15deg) scale(1.08); }
.theme-toggle:active { transform: scale(0.9); }
/* ── 背景天体(太阳/月亮) ── */
.celestial {
position: fixed; pointer-events: none; z-index: 0;
border-radius: 50%;
transition: opacity 0.8s ease, transform 1.2s ease;
}
.celestial-sun {
top: 10%; right: 12%;
width: 180px; height: 180px;
background: radial-gradient(circle at 35% 35%, #fff7cc, #ffd166 60%, #ffb347);
box-shadow: 0 0 80px 30px rgba(255, 209, 102, 0.35);
opacity: var(--sun-moon-opacity);
animation: celestial-float 14s ease-in-out infinite alternate;
}
.celestial-moon {
top: 12%; right: 14%;
width: 140px; height: 140px;
background: radial-gradient(circle at 35% 35%, #f1f5f9, #cbd5e1 70%, #94a3b8);
box-shadow: 0 0 60px 20px rgba(203, 213, 225, 0.25);
opacity: var(--sun-moon-opacity);
animation: celestial-float 18s ease-in-out infinite alternate;
}
.celestial-moon::after {
content: ""; position: absolute;
width: 120px; height: 120px; border-radius: 50%;
background: var(--bg);
top: -12px; right: -16px;
}
@keyframes celestial-float {
0% { transform: translate(0, 0) rotate(0deg); }
100% { transform: translate(30px, 20px) rotate(8deg); }
}
/* 暗色显示月亮,亮色显示太阳 */
[data-theme="dark"] .celestial-sun { display: none; }
[data-theme="light"] .celestial-moon { display: none; }
/* ── 通用文字色 ── */
.text-up { color: var(--up); }
.text-down { color: var(--down); }
.text-muted { color: var(--text-muted); }
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.chip {
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 20px;
font-size: 11px; font-weight: 600;
background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--chip-text);
}
.tag-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.tag-hot { background: var(--tag-hot-bg); color: var(--tag-hot-text); border: 1px solid var(--tag-hot-text); }
.tag-warm { background: var(--tag-warm-bg); color: var(--tag-warm-text); border: 1px solid var(--tag-warm-text); }
.tag-cold { background: var(--tag-cold-bg); color: var(--tag-cold-text); border: 1px solid var(--tag-cold-text); }
.tag-extreme { background: var(--tag-extreme-bg); color: var(--tag-extreme-text); border: 1px solid var(--tag-extreme-text); }
.tag-neutral { background: var(--tag-neutral-bg); color: var(--tag-neutral-text); border: 1px solid var(--tag-neutral-text); }
.tag-panic { background: var(--tag-panic-bg); color: var(--tag-panic-text); border: 1px solid var(--tag-panic-text); }
/* 滚动条 */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: var(--input-border); border-radius: 2px; }
/* 内容层级:玻璃卡片在背景之上 */
.fg-content { position: relative; z-index: 1; }