/* ═══════════════════════════════════════════════ 碎片宇宙 主題系統 theme.css ─────────────────────────────────────────────── 全站共用色票（所有頁面 第一支） 暗色 = :root 預設（現行視覺） 亮色 = 覆寫 切換 = theme.js（localStorage 'theme'，管理介面按鈕） 調色 = 只改這支檔的色票，頁面 CSS 全部引用 var() ═══════════════════════════════════════════════ */ :root{ /* ── 表面色 ── */ --bg:#0A0D18; /* 頁面背景 */ --bg2:#0D0D1A; /* 次要背景（漸層底） */ --panel:#10141F; /* 面板/卡片背景 */ --card:#1A2133; /* 卡片（較亮面板） */ --panel2:#1D2B4A; /* 強調面板（深藍塊：狀態徽章底/圓鈕） */ --input-bg:#0D1327; /* 輸入框背景 */ --border:rgba(255,255,255,.08); /* 一般邊框 */ --border-strong:#2C3850; /* 強調邊框（tab/按鈕邊） */ --top-bg:rgba(10,13,24,.6); /* 頂欄/底部導航半透明底 */ --float-bg:rgba(16,20,31,.95); /* 浮層背景（key-banner/modal 遮罩上層） */ --overlay:rgba(5,8,16,.88); /* 全屏遮罩（modal/lightbox 背景） */ --card-bg:rgba(18,24,48,.92); /* 半透明卡片底（hero/section/plot） */ --bg-glow:#202952; /* body 角落漸層光 */ --star:rgba(255,255,255,.35); /* 星空點點 */ --glow:rgba(124,156,245,.45); /* logo/按鈕主題光暈 */ /* ── 文字色 ── */ --text:#F0F3FA; /* 主文字 */ --text-2:#C9CED9; /* 次主文字（nav-link） */ --muted:#9AA4B2; /* 次要文字/說明 */ --dim:#565D75; /* 弱文字 */ /* ── 功能色 ── */ --gold:#F5C842; --orange:#E8935A; --green:#65D391; --teal:#4ECDC4; --blue:#79A9FF; --purple:#A78BFA; --pink:#C98A9C; --red:#FF6B6B; --danger:#FF8290; /* ── 效果 ── */ --shadow:0 24px 80px rgba(0,0,0,.5); } /* ═══════════════ 亮色主題 ═══════════════ */ :root[data-theme="light"]{ --bg:#F4F6FA; --bg2:#EAEEF5; --panel:#FFFFFF; --card:#FFFFFF; --panel2:#E2E9F4; --input-bg:#FFFFFF; --border:rgba(20,30,50,.12); --border-strong:#C8D0DE; --top-bg:rgba(255,255,255,.72); --float-bg:rgba(255,255,255,.96); --overlay:rgba(15,22,38,.55); --card-bg:rgba(255,255,255,.92); --bg-glow:#DCE4F5; --star:rgba(30,50,90,.16); --glow:rgba(124,156,245,.25); --text:#1B2233; --text-2:#2E3A52; --muted:#5C6880; --dim:#8B95AB; --gold:#C9A227; --orange:#C25E1A; --green:#2F8F5B; --teal:#0F8F87; --blue:#3B6FE0; --purple:#7A5CD0; --pink:#B4597A; --red:#D64545; --danger:#D64545; --shadow:0 24px 60px rgba(30,40,80,.12); } /* ═══════════════ 通用元件 ═══════════════ */ /* 亮暗主題切換鈕（管理介面/頂欄用） */ .theme-btn{ display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:12px;flex-shrink:0; background:var(--panel);border:1px solid var(--border);color:var(--text); font-size:17px;cursor:pointer;transition:all .3s; } .theme-btn:hover{border-color:var(--border-strong);transform:translateY(-1px)}