/* eodpick 站点外壳 —— 各页面 (/, /watchlist, /market, /analysis, /theme, /range) 共用这一份:
 *   ① 全站配色 token(亮/暗两套)  ② 顶部菜单栏  ③ 主题切换按钮  ④ Markdown 正文(.md, 配 md.js)
 *
 * 用法: 页面 <head> 里
 *   <link rel="stylesheet" href="/static/site.css">
 *   <script src="/static/site.js"></script>      ← 必须在 <head>, 早于首次绘制, 否则闪白
 * 页面自身样式里**只用 var(--x)**, 不要再写颜色字面量, 否则切主题时那块不跟随。
 *
 * 主题状态写在 <html data-theme="dark|light">, 由 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);
  /* 菜单项比一屏宽时(手机上很容易)**自己横滚**, 不许去撑 body —— 撑了的话整个页面
     跟着变宽, 内容被挤成窄窄一条、右边一大片空白。滚动条藏掉, 免得占掉 44px 里的几px。 */
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
}
.topnav::-webkit-scrollbar{display:none}
.topnav .nav-brand{
  font-size:13px;font-weight:700;color:var(--accent);flex:none;
  margin-right:14px;white-space:nowrap;letter-spacing:.3px;
}
.topnav a{
  position:relative;display:inline-flex;align-items:center;height:100%;flex:none;
  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:0;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}
  /* 菜单横滚时主题按钮钉在右端(否则要一路滚到底才点得到), 自带底色盖住从下面滚过的菜单 */
  .topnav #themeBtn{position:sticky;right:0;flex:none;background:var(--card);
    padding-left:6px;box-shadow:-7px 0 7px -4px var(--card)}
}

/* ── 主题切换按钮(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}
}

/* ── 弹窗打开时锁住背景滚动(.modal-lock 由 site.js 挂到 <html>) ─────────────
 * 全站弹窗都是「position:fixed 的遮罩 + 内部自己滚的内容」这一套: 各页面的 .modal
 * (K线/五维解读/自选板块/持仓截图), 加 kline.js 的 .kl-modal、stockinfo.js 的 .si-modal。
 * 不锁的话滚动会漏给背景页 —— 在遮罩上滚滚轮、或弹窗内容滚到头再继续滚, 背后的榜单跟着
 * 一起跑, 关掉弹窗就找不回原来看的那一行了。三道一起上:
 *   ① <html>{overflow:hidden} —— 只锁根元素, **不要**连 body 一起锁: body 一旦变成滚动
 *      容器, position:sticky 的顶栏和表头会改以(未滚动的)body 为参照而跳位。根元素的滚动
 *      偏移会保留, 所以背景稳稳停在原处, 关掉弹窗接着看。
 *   ② scrollbar-gutter:stable —— 实体滚动条的系统(Win/Linux)上, 滚动条一藏整页会横向跳
 *      ~15px; 预留这条槽就不跳了(macOS 是覆盖式滚动条, 本来不占位, 加了也没副作用)。
 *   ③ overscroll-behavior:contain —— 从根上掐断滚动链(触屏/触控板的惯性滚动尤其明显)。
 */
html{scrollbar-gutter:stable}
html.modal-lock{overflow:hidden}
.modal,.kl-modal,.si-modal,
.modal *,.kl-modal *,.si-modal *{overscroll-behavior:contain}

/* ── Markdown 正文(md.js 渲染出的结构; 大盘分析 / 主题研究 共用) ──────────── */
.md{font-size:14px;line-height:1.85}
.md h1{font-size:19px;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.md h2{font-size:16px;margin:24px 0 8px;color:var(--accent)}
.md h3{font-size:14px;margin:18px 0 6px}
.md h1:first-child,.md h2:first-child,.md h3:first-child{margin-top:0}
.md p{margin:0 0 10px}
.md ul,.md ol{margin:0 0 10px;padding-left:22px}
.md li{margin:0 0 4px}
.md b,.md strong{color:var(--accent);font-weight:600}
.md code{background:var(--barbg);padding:1px 5px;border-radius:4px;font-size:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.md hr{border:0;border-top:1px dashed var(--line);margin:20px 0}
.md blockquote{margin:0 0 10px;padding:6px 12px;border-left:3px solid var(--line);
  color:var(--sub);background:var(--card);border-radius:0 6px 6px 0}
.md blockquote p:last-child{margin:0}
.md .tw{overflow-x:auto;margin:0 0 12px}          /* 宽表格自身横向滚动, 页面不横滚 */
.md table{border-collapse:collapse;font-size:13px;min-width:100%}
.md table.tt{width:100%}                          /* 含长文本列的表: 撑满容器, 不足时由 .tw 横滚 */
.md th,.md td{padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap;
  text-align:right;vertical-align:top;font-variant-numeric:tabular-nums}
.md th{color:var(--sub);font-weight:500;font-size:12px;background:var(--card)}
.md th:first-child,.md td:first-child{text-align:left}
/* 长文本列留足阅读宽度再折行; 宽表横滚, 避免数字列把说明挤窄、整行撑得过高 */
.md th.wrap,.md td.wrap{white-space:normal;text-align:left;overflow-wrap:break-word;
  min-width:20em;line-height:1.7;font-variant-numeric:normal}
/* 手机上略收窄说明列, 数字和短标签仍保持一行, 表格在自身区域横滚 */
@media (max-width:640px){
  .md th.wrap,.md td.wrap{min-width:18em}
}
.md tbody tr:hover td{background:var(--rowhover)}

/* ── 手机窄屏: 宽表格自己横滚 ────────────────────────────────────────────────
 * 榜单/自选/持仓/区间统计那几张表有十几列, 在手机上比屏幕宽得多。它们直接躺在
 * 页面里, 于是**把 body 整个撑宽** —— 页面内容被挤成窄窄一条、右边一大片空白,
 * 横滚才看得到。给它们挂 class="wide" 后, 窄屏下改成自己横滚的块, body 不再被撑。
 *   · display:block 是让 table 变成可滚容器的老办法, thead/tbody 仍按表格排列,
 *     列宽照样对齐;
 *   · 这些表的表头本来 sticky 在菜单底下(top:44px), 一旦外面有了滚动容器, sticky
 *     就改以这个容器为参照、钉不住页面了 —— 窄屏索性关掉, 免得表头错位跑到行中间。
 * 桌面宽屏不进这个媒体查询, 表头照旧钉住。 */
@media (max-width:640px){
  table.wide{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
  table.wide thead th{position:static}
  table.wide th,table.wide td{padding-left:8px;padding-right:8px}   /* 列挤一点, 一屏多看两列 */
}