/* ★丁火智库 · 七政四余 前端样式（静态 ✓ 放 139 ✓）
   老八 2026-10-03 · ★配色与 .form-row 逐字照抄五运六气 index.html 原文 ✗ 不再自己发明 ✓★ */
:root{--bg:#0A1628;--card:#141d2e;--line:#1E3A5F;--line2:#2A3F5E;--txt:#E8EDF2;
      --mut:#94A3B8;--blue:#3B82F6;--blue2:#60A5FA;--gold:#F0C060}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);
     font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',KaiTi,serif}
.wrap{max-width:760px;margin:0 auto;padding:14px}
.brand{display:flex;align-items:baseline;gap:10px;padding:12px 0 2px}
.brand b{font-size:21px;color:var(--gold);letter-spacing:1.5px}
.brand span{font-size:12px;color:var(--mut)}
.slogan{font-size:12px;color:#6c7a91;margin:4px 0 14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:14px}
h3{font-size:15px;color:var(--blue2);margin:4px 0 10px;font-weight:600}
h3 i{color:var(--gold);font-style:normal;font-size:12px;margin-left:8px}

/* ★★ 以下四条逐字照抄五运六气（index.html 第 156/676/678 行 ✓）★★ */
.input-dark,select,textarea{background-color:#0F1A2A;border:1px solid #2A3F5E;border-radius:8px;
     padding:10px 14px;color:#F1F5F9;width:100%;outline:none}
.form-row{display:grid;grid-template-columns:100px 1fr;gap:12px;align-items:center;margin-bottom:16px}
.form-label{font-size:14px;color:#94A3B8}
@media (max-width:768px){.form-row{grid-template-columns:1fr;gap:4px}}

.two{display:flex;gap:8px;min-width:0}
/* ★★ 2026-10-23 老七：七政出生/流年时间选择框【宽度复刻五运】★★
     病根：`.four` 原来是 repeat(4,1fr) 等宽，五运是 `2fr 1fr 1fr 1.5fr`
     （年框宽、时框 1.5fr、月日 1fr），所以七政跟五运看起来完全不一样。
     现在照五运 index.html 移动端口径改（师傅强迫症：比到箍箍买鸭蛋）*/
.four{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:8px}
/* 时间选择器：隐藏原生箭头 + 文字靠左 + 左右 padding 收窄（照五运同款） */
.four select{-webkit-appearance:none;-moz-appearance:none;appearance:none;
     text-align:left;padding-left:8px;padding-right:4px}
.radios{display:flex;gap:16px;align-items:center;font-size:14px}
.radios label{display:inline-flex;align-items:center;gap:4px;color:#e2e8f0;cursor:pointer;
     white-space:nowrap}          /* ★不换行 ✗ 师傅点名 ✓ */
.hint{font-size:12px;color:#6c7a91;margin-top:6px}
.btns{display:flex;gap:10px;margin:18px 0 4px}
button{flex:1;padding:14px;font-size:17px;border:0;border-radius:10px;background:var(--blue);
     color:#fff;font-weight:600;cursor:pointer}
button.g{background:transparent;border:1px solid var(--line2);color:var(--mut);font-weight:400}
button:disabled{opacity:.6;cursor:default}
table{border-collapse:collapse;width:100%;font-size:14px}
td,th{border-bottom:1px solid var(--line);padding:8px 4px;text-align:left}
th{color:var(--mut);font-weight:400;font-size:12px}
td.k{color:var(--mut);width:32%}
svg{max-width:100%;height:auto;display:block;margin:0 auto}
.warn{color:var(--gold);font-size:13px;line-height:1.8}
.foot{color:#6c7a91;font-size:12px;line-height:1.9}
.badge{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;
     border:1px solid var(--line2);color:var(--gold);margin-left:6px}
a{color:var(--blue2);text-decoration:none;display:inline-block;padding:9px 12px;
     border:1px solid var(--line2);border-radius:8px;margin:4px 6px 0 0;font-size:13px}
.wm{color:#33415c;font-size:11px;text-align:center;padding:8px 0 22px}

/* ★★ 基础数据存档（2026-10-03 师傅点名 ✓ 老八加 ✓）★★ */
.ar-btns{display:flex;gap:6px;flex-wrap:nowrap;margin:2px 0 8px}
button.sm{flex:1 1 0;min-width:0;padding:7px 4px;font-size:12px;border-radius:9px;height:34px;white-space:nowrap}
.ar-list a{padding:5px 9px;font-size:12px;margin:2px 5px 2px 0}
#arList table{font-size:13px}
#arList td,#arList th{padding:6px 4px}
.toast{position:fixed;left:50%;bottom:38px;transform:translateX(-50%);z-index:100000;
     background:#12305a;border:1px solid var(--blue2);color:#fff;font-size:14px;
     padding:11px 18px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.45);max-width:88%}
.modal{position:fixed;inset:0;z-index:100;background:rgba(4,10,20,.86);padding:18px;
     display:flex;flex-direction:column;gap:10px}
.modal h4{color:var(--gold);font-size:15px;margin:0}
.modal textarea{flex:1;font-size:12px;line-height:1.6;font-family:monospace;
     white-space:pre;overflow:auto}
.modal .mb{display:flex;gap:8px}

/* ══════════════════════════════════════════════════════════════════════
   ★★AI 报告区（★变更 387 ✗ **像素级对齐五运六气** ✓ 老七方案第一步 ✓）★★
   ★来源★：`E:\1网站-五运六气\网站代码备份\index.html`
     ★421553 字节 ✗ sha256 前 16 `2929245085359DA6` ✓
   ★★下面这些都是**从参考件现取**的（★大括号配对 ✗ **一个字都没改** ✓）★★
   ★★纪律★：★师傅原话「五运整一个样式 ✗ 七政整一个样式 ✗ 那要得个屁」
     ⇒ ★**一个值都不许自己改** ✓ ✗ 要改先改五运六气那边 ✓★★
   ★来源证明★：`scripts/R_check_qz_ui_align.py`（★拿参考件**逐字对撞** ✓）
   ══════════════════════════════════════════════════════════════════════ */
.result-section { background: #1a2436; border-radius: 12px; padding: 16px; margin-bottom: 20px; border: 1px solid #2a3f5e; }
.report-text { font-size: 14px; line-height: 1.9; color: #e2e8f0; word-break: break-word; overflow-wrap: break-word; margin-bottom: 12px; }
.btn-ai { background: linear-gradient(180deg, #F5CE74 0%, #D4A030 52%, #A8790F 100%); color: #1A1206; border: 1px solid #8B6914; padding: 14px 30px; border-radius: 12px; font-size: 16px; font-weight: bold; letter-spacing: .5px; cursor: pointer; white-space: nowrap; max-width: 100%; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, filter .15s ease; box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 1px 0 rgba(255,255,255,.28); }
.btn-ai-tip { text-align: center; font-size: 12px; color: #F0C060; letter-spacing: .5px; margin-bottom: 8px; opacity: .92; }
.btn-pdf { background: #334155; color: #e2e8f0; border: 1px solid #475569; padding: 10px 20px; border-radius: 8px; font-size: 15px; cursor: pointer; transition: all 0.2s; white-space: nowrap; }
.pay-btn {background:linear-gradient(180deg,#60A5FA 0%,#3B82F6 52%,#1D4ED8 100%);color:#fff;border:1px solid #1E40AF;padding:12px 24px;border-radius:12px;cursor:pointer;font-size:15px;width:100%;margin-top:12px;font-weight:bold;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,filter .15s ease;box-shadow:0 2px 6px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.32);text-shadow:0 1px 1px rgba(0,0,0,.22)}

/* ★★手机端（★参考件 640px 那一段 ✗ 逐字搬 ✓）★★ */
@media (max-width: 640px) {
  .result-section { padding: 12px 8px; }
  .btn-pdf { padding: 8px 12px; font-size: 13px; }
  .btn-ai { padding: 12px 16px; font-size: 14px; letter-spacing: 0; }
  .btn-ai-tip { font-size: 11px; margin-bottom: 6px; }
  .pay-btn { padding: 11px 16px; font-size: 14px; border-radius: 10px; }
}

/* ★★变更 414（★师傅 2026-10-15 ✓）：★★底部备案号页脚 —— **逐字照抄**五运六气★★
   （★五运六气线上 `.beian-footer` 就这一条 ✓ 为了让链接也是同款灰色小字 ✗ 补一条 `a` ✓）★ */
.beian-footer { margin-top: 48px; text-align: center; border-top: 1px solid #1f2a3e; padding-top: 24px; font-size: 12px; color: #6c7a91; }
.beian-footer a { color: #6c7a91; text-decoration: none; }
.beian-footer a:hover { text-decoration: underline; }

/* ★★变更 416（★师傅口述清单第 6 条 ✓）：★★「我的报告」弹层用的 3 条 CSS ★★
   ★★从哪来★：★施工图 §4.4（★`docs/设计_我的报告_本机存档_老八_20261014.md` L119–121 ✓）
     ＝ ★五运六气那份 `index.html` 的**原文**（★路径见本文件**头部**注释 ✓）✓
   ★★为什么必须补★：★我们 `app.css` **一条都没有**（★`.pay-btn` ／ `.btn-pdf` ／
     `.result-section` 是**已有的** ✗ 不用搬 ✓）⇒ ★不补 ⇒ 弹层**铺满全屏**✗ 不是浮窗 ✓★
   ★★纪律★：★**逐字照抄** ✗ 一个值都不许自己改 ✓（★判据 `tests/test_my_reports.py`
     拿**施工图那三行**现取自检 ✓）★ */
.pay-modal-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
.pay-modal-close{position:absolute;top:12px;right:16px;color:#94A3B8;font-size:24px;cursor:pointer;background:none;border:none}
.pay-modal{background:#1A2436;border:1px solid #2A3F5E;border-radius:16px;max-width:420px;width:100%;max-height:90vh;overflow-y:auto;padding:24px;position:relative}

/* ══════════════════════════════════════════════════════════════════════
   ★★变更 428（★师傅 2026-10-16 ✓ 老七已核五运六气实现 ✓）：★★6 键功能按键**吸顶栏**★★
   ★参照件★：★五运六气那份 `index.html`（★路径见本文件**头部**注释 ✓ 427774 字节 ✓）
     ⇒ ★它那条吸顶栏目条 `#mobileNavBar.mn-on` ＋ `.mn-item`（★在 `@media (max-width:640px)` 里 ✓）
   ★★逐条照抄（★一个值都不自己改 ✓ 纪律同变更 387／416 ✓）★★
     · `position:sticky` ＋ `top:0` ＋ `z-index:40`  ← ★★吸顶核心★★
     · `border:1px solid #2A3F5E` ＋ `border-radius:12px`  ← ★圆角边框★
     · `background:rgba(10,22,40,.95)`  ← ★半透明深色底★
     · `-webkit-backdrop-filter:blur(8px)` ＋ `backdrop-filter:blur(8px)`  ← ★毛玻璃★
     · `box-shadow:0 3px 12px rgba(0,0,0,.45)`  ← ★阴影★
     · `display:grid` ＋ `grid-template-columns:repeat(4,1fr)` ＋ `gap:6px` ＋ `padding:6px`
       ＋ `margin:0 0 12px 0`  ← ★网格排布★（★本栏 6 键 ⇒ 宽屏 **6 列** ✓）
     · 按键：`height:34px` ✗ `border-radius:9px` ✗ `font-size:12px` ✗ `color:#94A3B8`
       ✗ `border:1px solid #2A3F5E` ✗ 上亮下暗渐变 ✗ `white-space:nowrap`
       ✗ `-webkit-tap-highlight-color:transparent`  ← ★**34px 高** ✗ **9px 圆角** ✓★
     · 激活态：`color:#E8EDF2` ＋ `font-weight:600` ＋ `border-color:#3B82F6` ＋ 深一档渐变
       ← ★**激活高亮**（★边框变蓝 ＋ 亮字 ✓）★
     · `:active{transform:translateY(1px)}`  ← ★按下下沉★
   ★★与参照件**不同的一处**（★如实交代 ✗ 不藏着 ✓）★★
     ★五运六气那条**只在 640px 以下才显示**（★桌面端靠 `#mobileNavBar{display:none}` 硬关 ✓）
       ✗ 而本产品 ★师傅要的是「**页面下滑 ⇒ 按键始终固定在顶部**」✗ 与屏幕宽窄无关 ✓★
       ⇒ ★本栏**不做桌面隐藏** ✗ 只做**列数降级**★：
         ★宽屏 6 列 ✗ `≤640px` ⇒ **3 列 × 2 行**（★375px 手机宽 ⇒ 不换行 ✗ 不错位 ✓）★
   ★★不许越界★：★一律用 `#qzFuncBar` 前缀 ✗ **不动**全局 `button`
     （★免得碰到「排 盘／重 置」与存档卡那几颗**老键**的既有样式 ✓）★
   ══════════════════════════════════════════════════════════════════════ */
#qzFuncBar{position:sticky;top:0;z-index:40;display:grid;
     grid-template-columns:repeat(6,1fr);gap:6px;margin:0 0 12px 0;padding:6px;
     border:1px solid #2A3F5E;border-radius:12px;background:rgba(10,22,40,.95);
     -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
     box-shadow:0 3px 12px rgba(0,0,0,.45)}
#qzFuncBar button.qz-fb{flex:0 0 auto;margin:0;padding:0;height:34px;border-radius:9px;
     font-size:12px;font-weight:400;color:#94A3B8;border:1px solid #2A3F5E;
     background:linear-gradient(180deg,#1E2B40 0%,#161F30 100%);cursor:pointer;
     display:flex;align-items:center;justify-content:center;overflow:hidden;
     -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
     white-space:nowrap}
#qzFuncBar button.qz-fb:active{transform:translateY(1px)}
#qzFuncBar button.qz-fb.active{color:#E8EDF2;font-weight:600;border-color:#3B82F6;
     background:linear-gradient(180deg,#22304A 0%,#1A2436 100%)}
/* ★窄屏降级：★375px 手机宽 ⇒ 3 列 2 行（★不换行 ✗ 不错位 ✓ 见 `tests/test_sticky_bar.py` ✓）★ */
/* ★变更 578：★手机专用栏★ —— 桌面藏掉它；手机藏掉原来那栏
   ★★变更 579（师傅 2026-10-21）★★：原来只写了 display:grid ⇒ 容器样式（间距/内边距/圆角/边框/底/投影）一条都没有
     ⇒ 8 颗挤成一片、和五运完全不像。
     现在★容器数值全部照抄五运 `#mobileNavBar.mn-on`★：
       grid 4 列 · gap 6px · padding 6px · radius 12px · 边框 #2A3F5E · 底 rgba(10,22,40,.95) · 投影 0 3px 12px
     ★键本身也照抄五运 `.mn-item`★：高 34px · 圆角 9px · 字号 12px · 字色 #94A3B8 · 渐变底 · 边框 #2A3F5E
     桌面端 #qzFuncBarM 仍 display:none ⇒ 电脑一个像素不动 */
#qzFuncBarM{display:none;grid-template-columns:repeat(4,1fr);gap:6px;position:sticky;top:0;z-index:40;
     margin:0 0 12px 0;padding:6px;border:1px solid #2A3F5E;border-radius:12px;
     background:rgba(10,22,40,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
     box-shadow:0 3px 12px rgba(0,0,0,.45)}
#qzFuncBarM button.qz-fb{flex:0 0 auto;margin:0;padding:0;height:34px;border-radius:9px;
     font-size:12px;font-weight:400;color:#94A3B8;border:1px solid #2A3F5E;
     background:linear-gradient(180deg,#1E2B40 0%,#161F30 100%);cursor:pointer;
     display:flex;align-items:center;justify-content:center;overflow:hidden;
     -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;
     white-space:nowrap}
#qzFuncBarM button.qz-fb:active{transform:translateY(1px)}
@media (max-width:640px){
  #qzFuncBar{display:none}
  #qzFuncBarM{display:grid}
}

/* ══════════════════════════════════════════════════════════════════════
   ★★变更 430（★师傅 2026-10-16 ✓）：★★吸顶键的**图标与文字**协调★★
   ★师傅原话★：「★按键内的**文字与图标配搭不协调** ✗ 你仔细参考**五运六气置顶按键的设计** ✗
     力求**美观协调**」✓
   ★参照件★：★同一份五运六气 `index.html` 的 `#mobileNavBar .mn-item`（★427774 字节 ✓）
   ★病（★两边**当场量出来的** ✗ 不是"感觉" ✓）★
     ★① 图标**有没有**不一致★：★参照件 8 颗键**颗颗都有**「emoji ＋ 半角空格 ＋ 词」
       ✗ 我们这条 6 颗里，「排盘」✗「重置」**两颗压根没有图标** ✓（★已改在 HTML ✓）
     ★② 图标**大小**不一致★：★参照件 8 颗图标实测字宽 **15～16px**（★极差 1px ✓）
       ✗ 我们「导出TXT」写的是 **U+2B07**（★单码点 ✗ 不带 U+FE0F ✓）⇒ ★浏览器按**文本呈现**
       画成**单色小箭头** ✗ 实测 **7px** ✗ 只有隔壁 💾（16px ✓）的**不到一半** ✓
       ✗「复制全文」📋 实测 **14px** ⇒ ★一排里 **7／14／16 三种宽度** ✓（★已改在 HTML ✓）
     ★③ `overflow` 不一致★：★参照件 `.mn-item` **没写** overflow ⇒ 初始值 `visible`
       ✗ 我们 428 那条写了 `overflow:hidden` ✓
       ★影响★：★12px 字号下 emoji 的行盒 15px ✗ 高字形（★如 🌐 类 ✓）会被**裁掉上下沿** ✓
   ★治法★：★**纯追加**一条**同选择器**（★特异性相同 ✗ 在后面 ⇒ 后写的赢 ✓）★
     ⇒ ★`overflow` 归 `visible`（★＝参照件 ✓）✗ 并把**图标／文字排版那一套逐条写全**
       （★`font-size` ✗ `font-weight` ✗ `line-height` ✗ `letter-spacing` ✗ `display` ✗
         `align-items` ✗ `justify-content` ✗ `gap` ✗ `white-space` —— 与参照件**逐条同值** ✓）★
     ★★字号 ✗ 字重 ✗ 对齐 ✗ 不换行 ✗ 行高 ✗ 字距：428 那一段**本来就是参照件那一套**
       ⇒ ★本次**一个值都没动** ✗ 这里只是把同一套**再写一遍**（★好让判据逐条现算对撞 ✓）★★
   ★★为什么**纯追加**✗ 不去改 428 那一段★：★判据 `tests/test_sticky_bar.py` ⑥ 要证
     「app.css ＝ 备份 ＋ 追加块」（★前缀**逐字节相同** ✓）⇒ ★碰了旧字节 ⇒ 那条判据**假红** ✓★
   ★★本段**每一条选择器**都带 `#qzFuncBar`★（★判据 ⑦：不越界 ✗ 不碰老键／全局 ✓）★★
   ★判据★：`tests/test_sticky_bar_style.py`（★现算 ✗ 逐条对撞 ✗ 含红证 ✓）★
   ══════════════════════════════════════════════════════════════════════ */
#qzFuncBar button.qz-fb{font-size:12px;font-weight:400;line-height:normal;letter-spacing:normal;
     display:flex;align-items:center;justify-content:center;gap:normal;
     white-space:nowrap;overflow:visible}

/* ══════════════════════════════════════════════════════════════════════
   ★★变更 434（★2026-10-16 ✗ 师傅收尾批 ✓ 老八）：★★吸顶那颗「排盘」"不能点"要**看得见**★★
   ★病（★432 的拦法 ＝ **静默忽略** ✓）★：★排盘进行中再点吸顶那颗 ⇒ **不重复提交**了 ✓
     ✗ 但**屏幕上一点反应都没有** ⇒ ★师傅会以为"**这键坏了**" ✓
   ★治法（★**纯追加** ✗ 一个旧字节都不碰 ✓）★：★`app.js` 在**吸顶栏容器**上临时加一个类
     `qz-go-busy` ⇒ ★本段**两条规则只认那个类**：
       ★① 那一颗**变灰**（★变暗 ＋ 去色 ＋ 禁止光标 ✓ ✗ 其余 5 颗**一点不动** ✓）
       ★② 栏子下沿**就地**出一句「⏳ 排盘中… 请稍候」（★弹层／toast 会被盖住 ⇒ **就地** ✓
         ＝ 五运六气那条"就地反馈"的思路 ✓）★
   ★★为什么不改那颗键的**文字**★：★6 个键名**判据逐字钉死** ✓ ✗ 更要紧的是
     ★`index.html` 里那条**激活高亮**每点一次都把 6 颗键的 `className` **整条重写**
       （★`all[i].className = 'qz-fb'` ✓）⇒ ★类挂在**键**上会被**当场抹掉** ✓
     ⇒ ★只能挂**容器**（★容器那条 `className` 没人碰 ✓）★★
   ★★"结束后自动恢复"★：★`app.js` 那个 `MutationObserver` 盯 `#btn` ⇒ ★它一恢复
     ⇒ 这个类**当场撤掉** ⇒ ★灰 ✗ 提示一起消失 ✗ 绝不是"一次之后永久灰" ✓★★
   ★★本段每一条选择器都带 `#qzFuncBar`★（★判据 ⑦：不越界 ✗ 不碰老键／全局 ✓）★
   ★★本段**不写** `font-size` ✗ `line-height` ✗ `letter-spacing`★（★判据 ⑦：那三条
     只有基线那条选择器能写 ✓）⇒ ★提示那行**继承**吸顶栏的字号 ✓★
   ══════════════════════════════════════════════════════════════════════ */
#qzFuncBar.qz-go-busy button.qz-fb[type="submit"]{opacity:.35;filter:grayscale(1);
     cursor:not-allowed;color:#5B6B80;border-color:#22303F;
     background:linear-gradient(180deg,#151E2C 0%,#111823 100%)}
#qzFuncBar.qz-go-busy::after{content:"⏳ 排盘中… 请稍候";position:absolute;
     left:8px;top:calc(100% + 6px);padding:3px 10px;border-radius:999px;
     border:1px solid #3B82F6;background:rgba(10,22,40,.98);color:#93C5FD;
     white-space:nowrap;pointer-events:none;box-shadow:0 3px 12px rgba(0,0,0,.5)}

/* ══════════════════════════════════════════════════════════════════════
   ★★变更 435（★2026-10-16 ✗ 提示**不遮邻键** ✓ 老八）：★★「排盘中」那句提示**一颗键都不许盖**★★
   ★病（★434 那条 `position:absolute` ＋ `top:calc(100% + 6px)` ✓）★：
     ★胶囊**钉在吸顶栏下沿外 6px** ⇒ ★栏子一吸顶 ✗ 它就**悬在「此刻滚到那儿的内容」上面** ✓
     ★★434 记录里写的是「压在栏子正下方那张卡片的**上沿**」✗★
       ★老八**看渲图**（★`tmp_view/变更434/375px_排盘进行中_再点吸顶排盘_看得见不能点.png` ✓）
         当场发现**更糟**★：★它盖住的是**栏子正下方那张「基础数据存档」卡第二行左边那颗
         「📃 复制全文」** —— ★一颗**真能点的键** ✗ 不是「卡片上沿」那么轻 ✓★★
       ★（★归属更正★：★那颗键在**下方那张卡**里 ✗ 不在吸顶栏自己的第二行 ✓
          ★任务单里「吸顶栏自己第二行」那句**归属说岔了** ✗ 「键被盖」这件事实**是真的** ✓）★
     ★★而且**不止那一处**★：★胶囊**跟着栏子走** ⇒ ★滚到哪一档就盖住那一档的内容 ✓
       ★实测（★375px ✗ 滚 0 ⇒ 底每 25px 一档 ✓ 共 300 档 ✓）：★滚 0 ⇒ 盖表单卡「姓名」那一行 ✓
         ★滚 600～650 ⇒ 盖表单区那颗「排盘」键 ✓ ★滚 725～750 ⇒ 盖存档卡「💾 一键存档」✓
         ★滚 775～825 ⇒ 盖存档卡「📃 复制全文」（★434 那张渲图正是这一档 ✓）✓
         ★300 档里 **250 档**盖住有用内容 ✗ **8 档**盖住**键** ✓★
   ★治法（★**纯追加** ✗ 一个旧字节都不碰 ✓）★：★把胶囊**从「浮在栏外」改成「排进栏内」**★：
     ★`position:static` ⇒ ★它当场成了**栅格项**（★`::after` 在栅格容器里**就是栅格项** ✓）
     ✗ `grid-column:1/-1` ⇒ ★它**独占一整行**（★排在 6 颗键**后面** ⇒ 第三行 ✓）
     ✗ `top`／`left` 归 `auto` ⇒ ★434 那两个「浮出去」的偏移**当场失效** ✓
     ✗ `box-shadow:none` ⇒ ★434 那个阴影会**漏到栏外**（★模糊 12px ✓）⇒ 撤掉 ✓★
   ★★为什么这样就不遮了（★三条硬道理 ✓）★★
     ★① 胶囊**整个落在栏子的框里**（★`tip ⊆ bar` ✗ 实测 300／300 ✓）⇒ ★一个像素都不往栏外多伸 ✓★
     ★② 栏子**临时多一行**（★高 88 ⇒ 118 ✓）⇒ ★下面的内容**被挤下去** ✗ 不是被盖住 ✓
        ★实测佐证★：★卡片相对栏底的距离**两态一模一样** ⇒ ★相对原来**一点内容都没多盖** ✓★
     ★③ 6 颗键在第 1／2 行 ✗ 胶囊在**它们下面一行** ⇒ ★几何上**不可能相交** ✓
        （★而且滚遍 300 档**逐颗求交**实测过一遍 ✓）★
   ★★「就地反馈」保住了★：★提示**还在栏子上**（★就在那 6 颗键**下面一行** ✓）✗ 不是 toast 一闪 ✓
     ✗ 文案 `⏳ 排盘中… 请稍候` **一字未改** ✓ ✗ 那颗「排盘」**照旧变灰**（★434 那条不动 ✓）★
   ★★不忙时一切照旧★：★本段**只认 `.qz-go-busy`**（★没这个类 ⇒ **一条都不生效** ✓）
     ⇒ ★空闲 ⇒ `::after` **根本不生成**（★`content:none` ✗ 实测 ✓）✗
       栏高 88 ／ 6 颗键位置**与 434 逐字节相同** ✓★
   ★★必须补的那条（★实测逼出来的 ✓ 共**两条** ✓）★★
     ★病（★实测 ✓）★：★栏子一长高 35px ✗ Chrome／Edge 的**滚动锚定**（★scroll anchoring ✓）
       会**把 `scrollY` 自动 +35** 顶回来 ⇒ ★想「把内容**挤下去**」✗ 实际变成
       「★栏子**多盖住 35px 内容**」✓ ✗ ★实测：★滚 800 ⇒ `scrollY` 800 ⇒ **835** ✗
         存档卡那颗「📃 复制全文」**视口位置一动不动** ⇒ ★它的上沿被栏子吃掉 30px ✓★★
     ★治法①★：★**忙时**把栏子后面那两块（★`#f` 表单 ✗ `#out` 结果区 ✓）
       从"锚定候选"里摘出去（★`overflow-anchor:none` ✓）⇒ ★没有候选 ⇒ **不顶回来**
         ⇒ ★内容**真被挤下去 35px**（★实测 `scrollY` **一动不动** ✗ 内容文档坐标 +35 ✓）
           ⇒ ★两态下"元素相对栏底的距离"**逐档一模一样**（★0 ⇒ 底全扫 ✓ 299 档 0 条不等 ✓）★★
     ★★治法②（★同一件病的**后半截** ✗ 也是实测逼出来的 ✓）★★
       ★病★：★"松手"那一下（★`#btn` 一恢复 ✓）⇒ 那个类一撤 ⇒ 栏子缩回 88 ✗
         ★**这一刻**锚定又开着 ⇒ 它把 `scrollY` **再扳 35px** ✓
         ★实测（★375px ✗ 点 3 次 ✓）：`scrollY` **800 ⇒ 765 ⇒ 730 ⇒ 695** ✗
           存档卡那颗键的视口位置 **93 ⇒ 128 ⇒ 163 ⇒ 198**（★一回偏 35px ✗ 会越点越偏 ✓）★★
       ★治法★：★`app.js` 再挂一个 `MutationObserver`（★盯同一个 `#btn.disabled` ✓）★：
         ★434 那个先撤"忙" ⇒ ★本观察者随后 ✗ **在排版之前**给栏子补一个类 `qz-go-hold`
           （★＝"锚定豁免"**再撑一帧** ✓）⇒ ★栏子缩回去的那次排版 ⇒ 内容**往上退 35px**
             （★回到原位 ✓ 实测 `scrollY` **一动不动** ✓）⇒ ★`requestAnimationFrame` 里撤掉 ✓★★
       ⇒ ★★所以下面那条规则**认两个类**★：★`qz-go-busy`（★长高那一帧 ✓）
         ＋ `qz-go-hold`（★缩回去那一帧 ✓）★ ✗ ★两个类都**只在这几百毫秒里**存在 ✓★★
   ★★空闲时**一个字都不生效**★（★两个类都只在忙的窗口里 ✓）⇒ ★滚动行为不变 ✓★★
   ★★本段每一条选择器都带 `#qzFuncBar`★（★判据 `test_sticky_bar_style.py` ⑦：不越界 ✓）★
   ★★本段**不写**字号／行高／字距那三条属性★（★同上 ⑦：那三条只有基线条能写 ✓）
     ⇒ ★提示那行**继承吸顶栏的 12px** ✓★
   ★判据★：`tests/test_sticky_bar_tip_place.py`（★现算有效声明 ✗ 含红证 3 条 ✓）
     ✗ 几何取证：`tmp_view/变更435/measure_tip.py`（★0 ⇒ 底全扫 ✗ 逐步求交 ✓）★
   ══════════════════════════════════════════════════════════════════════ */
#qzFuncBar.qz-go-busy::after{position:static;left:auto;top:auto;grid-column:1/-1;
     text-align:center;box-shadow:none}
#qzFuncBar.qz-go-busy ~ #f, #qzFuncBar.qz-go-busy ~ #out, #qzFuncBar.qz-go-hold ~ #f, #qzFuncBar.qz-go-hold ~ #out{overflow-anchor:none}