/* eodpick 站点外壳 —— 四个页面 (/, /market, /analysis, /range) 共用这一份:
* ① 全站配色 token(亮/暗两套) ② 顶部菜单栏 ③ 主题切换按钮
*
* 用法: 页面 里
*
* ← 必须在 , 早于首次绘制, 否则闪白
* 页面自身样式里**只用 var(--x)**, 不要再写颜色字面量, 否则切主题时那块不跟随。
*
* 主题状态写在 , 由 site.js 落 localStorage。
* 缺省 dark —— 保持本项目一贯的深色观感, 不跟随系统, 免得老用户被动变脸。
* JS 里要取色(K线/stance 等)用 site.js 的 Theme.cssVar('--up'), 别硬编码。
*/
:root,
:root[data-theme="dark"]{
/* ── 底色 / 结构 ── */
--bg:#0f1216; /* 页面底 */
--card:#171b21; /* 卡片、页头底 */
--deep:#12161c; /* 比 card 更沉的块底(板块条目/解读维度块) */
--line:#252b33; /* 分隔线、边框 */
--barbg:#222833; /* 小标签/进度条底 */
--inp:#1e242c; /* 输入框、按钮底 */
--hover:#3a4450; /* hover 边框 */
--rowhover:#1a1f26; /* 表格行 hover 底 */
--overlay:rgba(0,0,0,.6); /* 弹窗遮罩 */
/* ── 文字 ── */
--txt:#e6e9ee; /* 正文 */
--txt2:#d3d8e0; /* 正文稍弱(解读维度正文) */
--sub:#9aa4b2; /* 次要 */
--muted:#7f8a99; /* 更弱(表头副标、板块代码) */
--note:#6b7686; /* 图表脚注 */
--faint:#5a6472; /* 最弱(未产生的收益) */
--star-off:#4a5261; /* 未精选的星 */
/* ── 语义色 ── */
--up:#f14c4c; /* 涨(红) */
--down:#1fae5a; /* 跌(绿) */
--accent:#e8b339; /* 强调(金) */
--onaccent:#111; /* 强调底上的文字 */
/* ── 半透明叠色 ── */
--markbg:rgba(232,179,57,.07); --markbg-h:rgba(232,179,57,.12); /* ★精选行 */
--asum-bg:rgba(232,179,57,.06); --asum-bd:rgba(232,179,57,.3); /* 解读·综合结论 */
--arisk-bg:rgba(31,174,90,.05); --arisk-bd:rgba(31,174,90,.25); /* 解读·风险 */
--posev:rgba(241,76,76,.08); --posev-h:rgba(241,76,76,.13); /* 正 EV 行 */
--fwdbg:rgba(255,255,255,.02); /* 前瞻收益列底 */
/* ── K 线图表(theme.js cssVar 读取, 不写死在 JS) ── */
--chart-bg:#0f1216;
--grid:#1a1f28;
--tipbg:rgba(15,18,22,.55); /* 图例浮层底 */
--ma5:#dfe3ea; --ma21:#f5a623; --ma55:#a06bff; /* 均线 */
--dea:#5b9cf6; /* MACD DEA (DIF 用 --accent) */
--vol-up:rgba(241,76,76,.5); --vol-dn:rgba(31,174,90,.5); /* 成交量柱 */
--macd-up:rgba(241,76,76,.7); --macd-dn:rgba(31,174,90,.7); /* MACD 柱 */
/* ── 解读倾向 看多→看空 ── */
--st2:#f14c4c; --st1:#f1804c; --st0:#9aa4b2; --stm1:#3fa36b; --stm2:#1fae5a;
--st2-bg:rgba(241,76,76,.10); --st2-bd:rgba(241,76,76,.5);
--st1-bg:rgba(241,76,76,.06); --st1-bd:rgba(241,76,76,.35);
--stm1-bg:rgba(31,174,90,.06); --stm1-bd:rgba(31,174,90,.35);
--stm2-bg:rgba(31,174,90,.10); --stm2-bd:rgba(31,174,90,.5);
color-scheme:dark;
}
/* 亮色: 白底上红/绿/金都要压深才够对比度(金 #e8b339 在白底几乎不可读 → 换金棕)。 */
:root[data-theme="light"]{
--bg:#f4f6f8;
--card:#ffffff;
--deep:#f0f3f7;
--line:#dfe4ea;
--barbg:#eaeef3;
--inp:#ffffff;
--hover:#a9b4c2;
--rowhover:#eef2f7;
--overlay:rgba(20,26,34,.45);
--txt:#1a1f27;
--txt2:#2b323c;
--sub:#5c6675;
--muted:#78828f;
--note:#8a94a1;
--faint:#98a1ad;
--star-off:#c2c9d2;
--up:#d31c1c;
--down:#0d8a4a;
--accent:#9a6b0f;
--onaccent:#ffffff;
--markbg:rgba(154,107,15,.10); --markbg-h:rgba(154,107,15,.16);
--asum-bg:rgba(154,107,15,.07); --asum-bd:rgba(154,107,15,.35);
--arisk-bg:rgba(13,138,74,.06); --arisk-bd:rgba(13,138,74,.28);
--posev:rgba(211,28,28,.07); --posev-h:rgba(211,28,28,.12);
--fwdbg:rgba(0,0,0,.02);
--chart-bg:#ffffff;
--grid:#eceff3;
--tipbg:rgba(255,255,255,.8);
--ma5:#3c4553; --ma21:#c47800; --ma55:#7a3fd6;
--dea:#1f6fd0;
--vol-up:rgba(211,28,28,.45); --vol-dn:rgba(13,138,74,.45);
--macd-up:rgba(211,28,28,.65); --macd-dn:rgba(13,138,74,.65);
--st2:#d31c1c; --st1:#c2601a; --st0:#5c6675; --stm1:#2f8f5f; --stm2:#0d8a4a;
--st2-bg:rgba(211,28,28,.10); --st2-bd:rgba(211,28,28,.45);
--st1-bg:rgba(211,28,28,.06); --st1-bd:rgba(211,28,28,.3);
--stm1-bg:rgba(13,138,74,.07); --stm1-bd:rgba(13,138,74,.3);
--stm2-bg:rgba(13,138,74,.12); --stm2-bd:rgba(13,138,74,.45);
color-scheme:light;
}
/* ── 顶部菜单栏(site.js 注入, 三页共用; 当前页高亮) ─────────────────────── */
.topnav{
position:sticky;top:0;z-index:40; /* < .modal 的 50, 保证弹窗遮罩能盖住菜单 */
display:flex;align-items:center;gap:4px;
padding:0 20px;height:44px;
background:var(--card);border-bottom:1px solid var(--line);
}
.topnav .nav-brand{
font-size:13px;font-weight:700;color:var(--accent);
margin-right:14px;white-space:nowrap;letter-spacing:.3px;
}
.topnav a{
position:relative;display:inline-flex;align-items:center;height:100%;
padding:0 14px;font-size:13px;color:var(--sub);text-decoration:none;white-space:nowrap;
}
.topnav a:hover{color:var(--txt);background:var(--rowhover)}
.topnav a.on{color:var(--accent);font-weight:600}
.topnav a.on::after{ /* 当前页: 底部一条金线 */
content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;
background:var(--accent);border-radius:2px 2px 0 0;
}
.topnav .nav-sp{flex:1}
@media (max-width:640px){
.topnav{padding:0 10px;gap:0}
.topnav .nav-brand{display:none}
.topnav a{padding:0 10px;font-size:12px}
}
/* ── 主题切换按钮(site.js 注入到 #themeBtn 占位) ── */
#themeBtn{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;padding:0;border-radius:6px;line-height:0;
background:var(--inp);color:var(--sub);border:1px solid var(--line);
cursor:pointer;flex:none;
}
#themeBtn:hover{color:var(--accent);border-color:var(--hover)}
#themeBtn svg{width:16px;height:16px;display:block}
/* 切换时给整页一个短过渡, 避免生硬跳变; 图表自身重绘不受影响。
prefers-reduced-motion 下直接关掉。 */
:root.theme-anim body,
:root.theme-anim body *{transition:background-color .18s ease, border-color .18s ease, color .18s ease}
@media (prefers-reduced-motion:reduce){
:root.theme-anim body,:root.theme-anim body *{transition:none}
}