/* ⚠️ 由 tools/split_pages.py::write_nav_css() 从 mvp-prototype-live.html 的 <style>
   抽取生成，请勿手改。要改导航样式请改源头并重跑：python tools/split_pages.py。
   内容站（guides / calculators / terms / privacy）与应用的导航因此不可能再漂移。 */
:root{--ink:#1c2430;--mut:#5f6b7a;--line:#e5e9ef;--bg:#eef2f6;--card:#fff;
    --teal:#0f766e;--teal-d:#0b4f4a;--soft:#e7f5f3;--good:#0b7a45;--bad:#c0392b;--gold:#d49a1f;
    
    --uifont:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 14px;}.brand{font-weight:800;font-size:19px;color:var(--teal-d);text-decoration:none;}.brand b{color:var(--teal);}.brandsub{font-size:11px;font-weight:600;color:#5f6b7a;margin-left:10px;letter-spacing:.1px;}.topnav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap;}.topnav button,.topnav a{border:0;background:none;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--mut);font-size:14px;font-weight:600;white-space:nowrap;text-decoration:none;line-height:normal;font-family:var(--uifont);}.topnav button.active,.topnav a.active{background:var(--soft);color:var(--teal-d);}.topnav .lbl-sm{display:none;}body.pw-phone .topnav .lbl-sm,body.pw-tab .topnav .lbl-sm{display:inline;}body.pw-phone .topnav .lbl-lg,body.pw-tab .topnav .lbl-lg{display:none;}.navdd{position:relative;display:inline-flex;}.navdd .navdd-btn{border:0;background:none;padding:7px 12px;border-radius:8px;cursor:pointer;color:var(--mut);font-size:14px;font-weight:600;}.navdd .navdd-btn.active{background:var(--soft);color:var(--teal-d);}.navdd-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:196px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(15,40,60,.14);padding:6px;z-index:80;}.navdd-menu button,.navdd-menu a{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;font-size:13.5px;cursor:pointer;color:var(--ink);font-weight:600;text-decoration:none;line-height:normal;font-family:var(--uifont);}.navdd-menu button:hover,.navdd-menu a:hover{background:var(--soft);color:var(--teal-d);}#savedNavBtn.active{background:var(--soft);color:var(--teal-d);}@media (max-width:640px){.topnav{flex-wrap:wrap;overflow:visible;}.topnav button,.topnav a,.topnav .navdd-btn{font-size:12px;padding:6px 6px;}.topnav .lbl-lg{display:none;}.topnav .lbl-sm{display:inline;}.brandsub{display:none;}.topbar{padding:8px 12px;gap:6px;}.gsbox{margin-left:auto;}#savedNavBtn{margin-left:0;}.brand{font-size:17px;}.navdd-menu button,.navdd-menu a{padding:12px 12px;font-size:14px;}.navdd{position:static;}.topbar{position:relative;}.navdd-menu{left:8px;right:8px;width:auto;min-width:0;top:calc(100% + 4px);}}@media (max-width:360px){.brand{font-size:16px;}#savedNavBtn,#signBtn,#acctArea .btn{font-size:12px!important;padding:5px 7px!important;}}body.pw-phone .brandsub{display:none;}body.pw-phone .topbar{padding:8px 8px;gap:4px;position:relative;}body.pw-phone .gsbox{margin:0 2px 0 auto;}body.pw-phone #savedNavBtn{margin-left:0;}body.pw-phone .brand{font-size:16px;}body.pw-phone #savedNavBtn,body.pw-phone #acctArea .btn{font-size:12.5px!important;padding:5px 6px!important;margin-right:0!important;}body.pw-phone #signBtn{font-size:12.5px!important;padding:5px 7px!important;}body.pw-phone .topnav{flex-wrap:wrap;overflow:visible;}body.pw-phone .topnav button,body.pw-phone .topnav a,
  body.pw-phone .navdd .navdd-btn{font-size:12px;padding:6px 6px;}body.pw-phone .navdd{position:static;}body.pw-phone .navdd-menu{left:8px;right:8px;width:auto;min-width:0;top:calc(100% + 4px);}body.pw-phone .navdd-menu button,body.pw-phone .navdd-menu a{padding:12px 12px;font-size:14px;}.devbar{display:flex;gap:6px;margin:8px 0;}body:not(.sf-dev) .devbar{display:none !important;}.devbar button{border:1px solid var(--line);background:var(--card);padding:4px 12px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--mut);}.devbar button.active{background:var(--teal);color:#fff;border-color:var(--teal);}body.pw-tab .topbar{max-width:820px;margin:0 auto;}body.pw-phone .topbar{max-width:400px;margin:0 auto;}body.pw-phone .topnav{margin-left:0;width:100%;order:3;justify-content:flex-start;}body.pw-phone .topnav button,body.pw-phone .topnav a{font-size:12px;padding:5px 7px;}.btn:focus-visible,.chip:focus-visible,.topnav button:focus-visible,.devbar button:focus-visible,.arrow:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}.btn{display:inline-block;border:0;border-radius:10px;padding:10px 17px;font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;}.btn-primary{background:var(--teal);color:#fff;}.btn-primary:hover{background:var(--teal-d);}.btn-ghost{background:#fff;color:var(--teal-d);border:1px solid var(--teal);}.btn-gold{background:linear-gradient(120deg,#b8860b,#d49a1f);color:#2f2306;}@media (max-width:640px){.topnav{margin-left:0;width:100%;order:3;justify-content:flex-start;}}@media (max-width:640px){.topnav button,.topnav a,.topnav .navdd-btn{min-height:44px;display:inline-flex;align-items:center;}.chip,.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}}body.pw-phone .topnav button,body.pw-phone .topnav a,body.pw-phone .topnav .navdd-btn,
  body.pw-phone .chip,body.pw-phone .btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}.gsbox{position:relative;display:flex;align-items:center;margin:0 8px 0 2px;}#gsQ{width:196px;border:1px solid var(--line);border-radius:9px;padding:7px 10px 7px 29px;font-size:13.5px;background:#fff;}.gsic{position:absolute;left:9px;font-size:12.5px;color:#8a94a3;pointer-events:none;}.gsdrop{display:none;position:absolute;top:calc(100% + 6px);right:0;width:min(352px,88vw);max-height:346px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(15,40,60,.16);z-index:95;padding:6px;}.gsdrop.on{display:block;}.gsrow{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--ink);}.gsrow:hover,.gsrow.cur{background:var(--soft);}.gsrow b{color:var(--teal-d);}.gsrow span{display:block;color:var(--mut);font-size:11.5px;line-height:1.35;}.gsrow i{font-style:normal;font-size:10px;font-weight:700;color:var(--teal-d);background:var(--soft);border-radius:5px;padding:1px 5px;margin-left:6px;}.gsmsg{padding:9px 10px;font-size:12.5px;color:var(--mut);line-height:1.5;}.gsmsg b{color:var(--ink);}.gsh{display:none!important;border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 9px;font-size:13px;cursor:pointer;line-height:1;}.topbar .btn{height:34px;box-sizing:border-box;border-radius:9px;display:inline-flex;
    align-items:center;justify-content:center;line-height:1;font-size:13.5px;padding:0 12px;font-family:var(--uifont);}.topbar #gsQ{display:block;height:34px;box-sizing:border-box;border-radius:9px;
    padding:0 10px 0 29px;line-height:32px;font-size:13.5px;}.topbar #acctArea .btn{padding:0 11px;}@media (max-width:900px){.topbar .btn{height:30px;font-size:12.5px;}#gsQ{width:min(142px,34vw);height:34px;padding:0 9px 0 26px;line-height:32px;font-size:13px;}.gsh{display:none!important;}}body.pw-phone .topbar .btn,body.pw-tab .topbar .btn{height:30px;font-size:12.5px;}body.pw-phone #gsQ,body.pw-tab #gsQ{width:min(140px,36vw);height:34px;
    padding:0 9px 0 26px;line-height:32px;font-size:13px;}body.pw-phone .gsh,body.pw-tab .gsh{display:none!important;}body.pw-phone .gsbox,body.pw-tab .gsbox{margin:0 6px 0 auto;}body.pw-phone #savedNavBtn,body.pw-tab #savedNavBtn{margin-left:0;}body.pw-phone .gsbox,body.pw-tab .gsbox{margin:0 6px 0 auto;}body.pw-phone #savedNavBtn,body.pw-tab #savedNavBtn{margin-left:0;}@media (max-width:640px){.topbar{padding:8px 8px;gap:4px;}#savedNavBtn,#signBtn,#acctArea .btn{position:relative;height:34px;min-height:34px!important;}#savedNavBtn::before,#signBtn::before,#acctArea .btn::before{
      content:'';position:absolute;left:0;right:0;top:-5px;bottom:-5px;}.gsbox{margin:0 2px 0 auto;}.brand{font-size:16px;}#savedNavBtn{font-size:12.5px!important;padding:5px 6px!important;margin-right:0!important;}#signBtn{font-size:12.5px!important;padding:5px 7px!important;}}@media (max-width:400px){.topbar{gap:3px;}.brand{font-size:15px;}#savedNavBtn{font-size:12px!important;padding:5px 5px!important;}#signBtn{font-size:12px!important;padding:5px 6px!important;}}body.pw-phone .topbar{padding:8px 8px;gap:4px;}body.pw-phone #savedNavBtn,body.pw-phone #signBtn,body.pw-phone #acctArea .btn,
  body.pw-tab #savedNavBtn,body.pw-tab #signBtn,body.pw-tab #acctArea .btn{
    position:relative;height:34px;min-height:34px!important;}body.pw-phone #savedNavBtn::before,body.pw-phone #signBtn::before,body.pw-phone #acctArea .btn::before,
  body.pw-tab #savedNavBtn::before,body.pw-tab #signBtn::before,body.pw-tab #acctArea .btn::before{
    content:'';position:absolute;left:0;right:0;top:-5px;bottom:-5px;}body.pw-phone .gsbox{margin:0 2px 0 auto;}body.pw-phone .brand{font-size:15px;}body.pw-phone #savedNavBtn{font-size:12px!important;padding:5px 5px!important;margin-right:0!important;}body.pw-phone #signBtn{font-size:12px!important;padding:5px 6px!important;}
/* —— 以下为内容站专用，应用里没有（应用靠 go() 切屏，不需要）——
   ① .sitebar：内容页正文是阅读栏（820px），导航条要和应用一样占 1240px，
      否则 6 项在窄栏里挤成两行 —— 这就是“导航栏变了”的主因。
   ② .navdd 展开：内容页没有应用的 JS 开关，这里补 hover / 键盘 focus-within 兜底，
      保证禁用 JS 也能打开 Guides 与 Calculators（JS 在时用 .open，见页尾脚本）。 */
.sitebar{max-width:1240px;margin:0 auto;padding:16px 20px 0}
.sitebar .topbar{margin-bottom:0}
.navdd.open .navdd-menu,.navdd:hover .navdd-menu,.navdd:focus-within .navdd-menu{display:block}
/* ③ 设备预览（devbar）用的限宽：应用里是 #stage，内容页对应的是 .sitebar 与正文栏 .wrap。
      预览是 CSS 类模拟，视口不变，所以要自己把宽度收窄。 */
body.pw-tab .sitebar{padding:8px 12px 0}
body.pw-phone .sitebar{padding:8px 12px 0}
/* ⚠️ 外壳本身也必须收窄并居中：只收 .topbar/.wrap 时，.sitebar 仍是 1240 宽且左对齐，
   里面的 devbar 就贴在左边、而顶栏与正文卡居中 → 上下错开成"T 形"（用户截图：「看起来像 T 字」）。 */
body.pw-tab .sitebar{margin-left:auto;margin-right:auto;max-width:820px}
body.pw-phone .sitebar{margin-left:auto;margin-right:auto;max-width:400px}
/* 左右内边距必须与 .sitebar 一致（都是 12px）：否则顶栏会比正文卡左右各宽 8px，
   上下边缘错开一档（用户截图：「上下宽度不一致，看起来像 T 字」）。 */
body.pw-tab .wrap,body.pw-phone .wrap{max-width:820px;margin:0 auto;padding-left:12px;padding-right:12px}
body.pw-phone .wrap{max-width:400px}
/* 真窄屏（非预览）：顶栏也要跟着收，否则顶栏与卡片左右不齐 */
@media (max-width:640px){.sitebar{padding:12px 12px 0}}