/* 顶部导航 N2c 的浮层、推荐卡、手机菜单与小插画配色（站长 2026-10-28 晚选定，样稿 outputs/ui-skillry-2026-10-28/N/N2c-合成开始学.html）。
   顶层五项与右侧按钮的版式随顶栏内联（build/site_nav.py 的 NAV_CSS，课页在 trader/trader.css 的 lesson-shell 块）；这里是点开以后才看得到的部分，
   脚本 assets/nav.js。版本号是文件内容的 sha256 前 12 位（build/site_nav_mega.py 的 css_href），改了要重新生成页面。
   颜色只用 ui.css 的令牌（带兜底）；浅色主题浮层是浅米白底，不出深色区块；深色主题浮层用卡片色。 */
:root{--nx-pop:#fdfcf9;--nx-pop-line:rgba(23,21,15,.08);--nx-pop-shadow:0 18px 50px rgba(23,21,15,.13),0 2px 6px rgba(23,21,15,.04);--nx-it-hover:rgba(135,92,0,.065);--nx-veil:rgba(250,249,246,.55);
 --il-bg:#fff;--il-line:rgba(23,21,15,.1);--il-ink:#2f2a21;--il-paper:#fdfaf2;--il-gold:#ebb942;--il-gold2:#c08a10;--il-golds:#f6e6b8;--il-up:#12916a;--il-down:#d4404b;--il-tile:#f7f2e6}
:root[data-theme="dark"]{--nx-pop:var(--card,#141417);--nx-pop-line:rgba(255,255,255,.1);--nx-pop-shadow:0 18px 50px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);--nx-it-hover:rgba(242,193,78,.075);--nx-veil:rgba(9,9,11,.5);
 --il-bg:#1d1d22;--il-line:rgba(255,255,255,.1);--il-ink:#dcd8cf;--il-paper:#2a2822;--il-gold:#f2c14e;--il-gold2:#f2c14e;--il-golds:#4d3f1b;--il-up:#3ecf8e;--il-down:#f87171;--il-tile:#1f1d18}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--nx-pop:var(--card,#141417);--nx-pop-line:rgba(255,255,255,.1);--nx-pop-shadow:0 18px 50px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);--nx-it-hover:rgba(242,193,78,.075);--nx-veil:rgba(9,9,11,.5);
 --il-bg:#1d1d22;--il-line:rgba(255,255,255,.1);--il-ink:#dcd8cf;--il-paper:#2a2822;--il-gold:#f2c14e;--il-gold2:#f2c14e;--il-golds:#4d3f1b;--il-up:#3ecf8e;--il-down:#f87171;--il-tile:#1f1d18}}

/* ---------- 浮层（共用） ---------- */
.nx-pop{position:absolute;z-index:60;top:calc(100% + 8px);left:0;box-sizing:border-box;background:var(--nx-pop);border:1px solid var(--nx-pop-line);border-radius:22px;box-shadow:var(--nx-pop-shadow);padding:10px;
 color:var(--text,#17150f);font-family:var(--font,inherit);font-size:15px;line-height:1.5;text-align:left;white-space:normal;letter-spacing:0}
.nx-pop[hidden]{display:none!important}
.nx-pop.is-in{animation:nx-in .16s var(--ease,ease-out)}
@keyframes nx-in{from{opacity:0;transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.nx-pop.is-in{animation:none}}
.nx-pop a{color:inherit;text-decoration:none}
.nx-pop a:focus-visible,.nx-sheet a:focus-visible,.nx-sheet button:focus-visible{outline:2px solid var(--accent,#875c00);outline-offset:2px}
.nx-il{display:block}
.nx-it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:14px;color:var(--text,#17150f)}
.nx-it:hover{background:var(--nx-it-hover)}
.nx-ic{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--il-bg);border:1px solid var(--il-line)}
.nx-ic .nx-il{width:32px;height:32px}
.nx-tx{min-width:0;display:grid;gap:1px}
.nx-tx b{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;line-height:1.45}
.nx-tx>span{font-size:13px;color:var(--sub,#57534c);line-height:1.5}
.nx-chip{font-style:normal;display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:999px;font-size:11px;font-weight:600;line-height:1;background:var(--free-soft,rgba(3,108,79,.085));color:var(--free,#036c4f);white-space:nowrap}
.nx-chip.up{background:var(--warn-soft,rgba(168,72,10,.085));color:var(--warn,#a8480a)}
.nx-chip.gd{background:var(--accent-soft2,rgba(135,92,0,.12));color:var(--accent,#875c00)}
.nx-gl{margin:0;padding:6px 10px 4px;font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--mute,#6d6860)}
.nx-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 2px 0;padding:11px 10px 3px;border-top:1px solid var(--line,rgba(23,21,15,.09));font-size:14px}
.nx-foot a{display:inline-flex;align-items:center;gap:4px;color:var(--accent,#875c00);font-weight:600}
.nx-foot a.s{color:var(--sub,#57534c);font-weight:500}
.nx-foot a:hover{text-decoration:underline;text-underline-offset:3px}
.nx-ar{flex:none}

/* ---------- 课程大浮层 ---------- */
.nx-mega{left:max(16px,calc((100% - var(--max,1280px)) / 2));right:max(16px,calc((100% - var(--max,1280px)) / 2));padding:14px 14px 8px;border-radius:24px}
.nx-cols{display:grid;grid-template-columns:1fr 1fr 1fr 272px;gap:4px}
.nx-col{min-width:0;padding-right:4px}
.nx-col+.nx-col{border-left:1px solid var(--line,rgba(23,21,15,.09));padding-left:6px}
.nx-chs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:6px 2px 0;padding:10px 10px 2px;border-top:1px solid var(--line,rgba(23,21,15,.09));font-size:14px}
.nx-chs span{color:var(--mute,#6d6860);font-size:12px;font-weight:600;letter-spacing:.06em}
.nx-chs a{font-weight:600}.nx-chs a:hover{color:var(--accent,#875c00)}
/* 推荐卡 */
.nx-rec{display:flex;flex-direction:column;margin-left:8px;padding:18px;border-radius:18px;background:linear-gradient(160deg,var(--accent-soft2,rgba(135,92,0,.12)),var(--accent-soft,rgba(135,92,0,.07)) 55%,transparent);border:1px solid var(--accent-line,rgba(135,92,0,.45))}
.nx-rec-g,.nx-rec-m{display:flex;flex-direction:column;gap:8px}
.nx-rec-m[hidden],.nx-rec-g[hidden]{display:none}
.nx-rec-h{display:flex;align-items:flex-start;justify-content:space-between}
.nx-rec-il{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:var(--il-bg);border:1px solid var(--il-line)}
.nx-rec-il .nx-il{width:44px;height:44px}
.nx-rec-k{font-size:11px;font-weight:700;letter-spacing:.08em;padding:3px 9px;border-radius:999px;background:var(--fill,#ebb942);color:var(--on-fill,#16130b)}
.nx-rec-t{font-size:17px;font-weight:700;margin-top:4px}
.nx-rec-s{font-size:13px;color:var(--sub,#57534c);line-height:1.55}
.nx-rec-tags{display:flex;flex-wrap:wrap;gap:5px}
.nx-rec-tags i{font-style:normal;font-size:11.5px;padding:2px 8px;border-radius:999px;background:var(--card,#fff);border:1px solid var(--line2,rgba(23,21,15,.15));color:var(--sub,#57534c)}
.nx-rec-p{display:flex;align-items:baseline;gap:5px;margin-top:4px}
.nx-rec-p small{font-size:12px;color:var(--sub,#57534c)}
.nx-rec-p strong{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--accent-big,#a8760c);font-variant-numeric:tabular-nums}
.nx-rec-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;margin-top:2px;padding:0 16px;border-radius:999px;border:1px solid var(--fill-edge,transparent);background:var(--fill,#ebb942);color:var(--on-fill,#16130b)!important;font-size:14px;font-weight:600}
.nx-rec-btn:hover{background:var(--fill-hover,#f0c45a)}
.nx-rec-btn.ghost{background:var(--card,#fff);border-color:var(--line2,rgba(23,21,15,.15));color:var(--text,#17150f)!important}
.nx-rec-btn.ghost:hover{border-color:var(--accent-line,rgba(135,92,0,.45));background:var(--card,#fff)}
.nx-rec-u{display:block;font-size:12px;color:var(--sub,#57534c);line-height:1.5}
.nx-rec-u .nx-ar{display:inline;vertical-align:-3px;margin-left:3px;width:13px;height:13px}
.nx-rec-u:hover{color:var(--accent,#875c00)}
/* 登录后：继续学 */
.nx-cont{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:14px;background:var(--card,#fff);border:1px solid var(--line,rgba(23,21,15,.09))}
.nx-cont:hover{border-color:var(--accent-line,rgba(135,92,0,.45))}
.nx-cont small{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mute,#6d6860)}
.nx-cont b{font-size:15px;font-weight:600;line-height:1.45}
.nx-cont span{font-size:13px;color:var(--sub,#57534c);line-height:1.5}
.nx-cont em{display:inline-flex;align-items:center;gap:4px;margin-top:2px;font-style:normal;font-size:13px;font-weight:600;color:var(--accent,#875c00)}
.nx-tier{display:inline-flex;align-self:flex-start;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;border:1px solid var(--accent-line,rgba(135,92,0,.45));color:var(--accent,#875c00);font-size:12px;font-weight:600}
@media (max-width:1180px){.nx-cols{grid-template-columns:1fr 1fr 1fr}.nx-cols .nx-rec{grid-column:1 / -1;margin:6px 0 0;flex-direction:row}.nx-cols .nx-rec .nx-rec-g,.nx-cols .nx-rec .nx-rec-m{flex:1}}

/* ---------- 怎么学 ---------- */
.nx-start{width:630px;max-width:calc(100vw - 32px);padding:12px}
.nx-sh{display:grid;gap:2px;padding:4px 6px 12px}
.nx-sh b{font-size:17px;font-weight:700;line-height:1.4}
.nx-sh span{font-size:13px;color:var(--sub,#57534c);line-height:1.5}
.nx-bigs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nx-bg{display:flex;flex-direction:column;gap:10px;padding:12px 12px 14px;border-radius:18px;border:1px solid var(--line,rgba(23,21,15,.09));background:var(--card,#fff)}
:root[data-theme="dark"] .nx-bg{background:rgba(255,255,255,.025)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .nx-bg{background:rgba(255,255,255,.025)}}
.nx-bg:hover{border-color:var(--accent-line,rgba(135,92,0,.45));background:var(--nx-it-hover)}
.nx-bg-tile{display:grid;place-items:center;height:96px;border-radius:14px;background:var(--il-tile)}
.nx-bg-tile .nx-il{width:72px;height:72px}
.nx-bg-tx{display:grid;gap:4px}
.nx-bg-tx b{display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:16px;font-weight:700}
.nx-bg-tx>span{font-size:13px;color:var(--sub,#57534c);line-height:1.6}
.nx-bg-tx small{font-size:12px;color:var(--mute,#6d6860)}
.nx-bg-tx .nx-bg-pg{display:inline-flex;justify-self:start;align-items:center;gap:6px;margin-top:2px;padding:3px 9px;border-radius:999px;background:var(--accent-soft2,rgba(135,92,0,.12));color:var(--accent,#875c00);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.nx-bg-tx .nx-bg-pg[hidden]{display:none}
.nx-bg-go{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--accent,#875c00)}
.nx-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line,rgba(23,21,15,.09))}
.nx-mini a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:12px;font-size:14px;font-weight:600;white-space:nowrap}
.nx-mini a:hover{background:var(--nx-it-hover)}
.nx-mic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--il-bg);border:1px solid var(--il-line)}
.nx-mic .nx-il{width:22px;height:22px}

/* 课程浮层打开时背后的页面浅色模糊（脚本把 .nx-veil 放在 body 末尾，层级在顶栏下面） */
.nx-veil{position:fixed;inset:0;z-index:44;background:var(--nx-veil);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.nx-veil.on{opacity:1;visibility:visible}
template.nx-more{display:none}

/* ---------- 手机菜单（≤ 860，assets/nav.js 拼出来放在 body 末尾） ---------- */
.nx-sheet{position:fixed;left:0;right:0;bottom:0;z-index:9000;display:flex;flex-direction:column;background:var(--bg,#faf9f6);color:var(--text,#17150f);border-top:1px solid var(--line,rgba(23,21,15,.09));font-family:var(--font,inherit);font-size:15px;line-height:1.5;text-align:left}
.nx-sheet[hidden]{display:none!important}
.nx-sheet a{color:inherit;text-decoration:none}
.nx-sh-top{flex:none;padding:10px 12px 0;background:var(--bg,#faf9f6);border-bottom:1px solid var(--line,rgba(23,21,15,.09))}
.nx-tools{display:flex;gap:8px;padding:0 0 8px}
.nx-tools button,.nx-tools a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;margin:0;padding:0 12px;border-radius:999px;border:1px solid var(--line2,rgba(23,21,15,.15));background:var(--card,#fff);color:var(--text,#17150f);font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:none}
.nx-tools .wish{background:var(--fill,#ebb942);border-color:var(--fill,#ebb942);color:var(--on-fill,#16130b)}
.nx-tools svg{width:17px;height:17px;flex:none}
.nx-tools .moon,.nx-tools.is-dark .sun{display:none}.nx-tools.is-dark .moon{display:block}
.nx-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:0 0 10px}
.nx-tabs button{height:38px;margin:0;border:1px solid var(--line2,rgba(23,21,15,.15));border-radius:999px;background:var(--card,#fff);color:var(--sub,#57534c);font:inherit;font-size:14px;font-weight:500;cursor:pointer;box-shadow:none}
.nx-tabs button[aria-selected="true"]{background:var(--accent-soft2,rgba(135,92,0,.12));border-color:var(--accent-line,rgba(135,92,0,.45));color:var(--text,#17150f);font-weight:600}
.nx-sh-body{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:6px 12px 24px}
.nx-sh-body [hidden]{display:none!important}
.nx-sheet .nx-gl{padding:16px 6px 4px}
.nx-sheet .nx-it{padding:10px 6px}
.nx-sheet .nx-ic{width:40px;height:40px}.nx-sheet .nx-ic .nx-il{width:30px;height:30px}
.nx-sheet .nx-tx{flex:1}
.nx-sheet .nx-rec{margin:10px 0 6px;flex-direction:column}
.nx-sheet .nx-foot{margin:8px 0 0;padding:12px 6px 0}
.nx-sheet .nx-chs{margin:8px 0 0;padding:12px 6px 0}
.nx-sheet .nx-sh{padding:12px 4px 6px}
.nx-sheet .nx-bigs{grid-template-columns:1fr;padding:6px 0}
.nx-sheet .nx-bg-tile{height:84px}.nx-sheet .nx-bg-tile .nx-il{width:62px;height:62px}
.nx-sheet .nx-mini{grid-template-columns:1fr 1fr;border-top:0;margin-top:4px;padding-top:4px}
.nx-sheet .nx-mini a{padding:10px;border-radius:14px;border:1px solid var(--line,rgba(23,21,15,.09));background:var(--card,#fff)}
button.nx-lookb{width:100%;margin:0;border:0;background:none;box-shadow:none;font:inherit;text-align:left;cursor:pointer}
.nx-lookb .nx-ic{color:var(--sub,#57534c)}
.nx-look{padding:6px 6px 14px}
.nx-sh-foot{flex:none;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 12px max(12px,env(safe-area-inset-bottom));background:var(--bg,#faf9f6);border-top:1px solid var(--line,rgba(23,21,15,.09))}
.nx-sh-foot[hidden]{display:none}
.nx-sh-foot a{display:inline-flex;align-items:center;justify-content:center;height:44px;border-radius:999px;font-size:15px;font-weight:600}
.nx-sh-foot .ghost{border:1px solid var(--line2,rgba(23,21,15,.15));background:var(--card,#fff)}
.nx-sh-foot .gold{border:1px solid var(--fill-edge,transparent);background:var(--fill,#ebb942);color:var(--on-fill,#16130b)}
html.nx-lock,html.nx-lock body{overflow:hidden}
.tl-app-ios .nx-sheet .hv-ios-x,.tl-app-ios .nx-pop .hv-ios-x{display:none!important}
@media print{.nx-pop,.nx-sheet,.nx-veil{display:none!important}}