#mt-bar{position:fixed;left:0;right:0;top:0;z-index:99999;display:none;
        align-items:center;gap:8px;padding:9px 12px;padding-top:calc(9px + env(safe-area-inset-top));
        font:12.5px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
        color:#171513;background:linear-gradient(135deg,rgba(166, 31, 36, .22),rgba(170, 130, 70, .22)),#efe9de;
        border-bottom:1px solid rgba(166, 31, 36, .45);backdrop-filter:blur(8px);}
      #mt-bar.on{display:flex}
      #mt-bar b{color:#a61f24;white-space:nowrap}
      #mt-bar span{flex:1;min-width:0}
      #mt-bar i{font-style:normal;cursor:pointer;opacity:.7;padding:0 4px;font-size:16px;line-height:1}

      /* ===== 内容修复：阵容行窄屏换行（HEADFIX:v1｜自动注入，勿与源文件混淆） =====
         源页面的 .comp-row 是单行 flex，且 .comp-left/.comp-tier/.comp-factions/.comp-arrow
         全部 flex-shrink:0，合计约 676px。视口 <=800px 时右侧被挤出屏幕：
         实测 700px 视口溢出 65px、750px 溢出 15px、390px 溢出 375px，
         强度标(S+/S/A)、阵营标签、跳转箭头都看不到。
         这里在窄屏改为两行布局（第一行：头像+名称+装备+阵容码+强度标；
         第二行：阵营标签+英雄头像+箭头）。
         用 #compGrid 提高特异性，不依赖本样式表与源样式的先后顺序。
         断点取 820px：实测单行布局需 >=800px 才不溢出，留 20px 余量。 */
      @media (max-width: 820px){
        #compGrid .comp-row{flex-wrap:wrap;align-items:center;gap:10px 12px;padding:13px 15px;border-radius:16px}
        #compGrid .comp-left{width:100%;gap:12px}
        #compGrid .comp-chess-avatar img{width:58px;height:58px}
        #compGrid .comp-info{width:auto;flex:0 1 auto;min-width:0}
        #compGrid .comp-info .nm{font-size:17px;margin-bottom:2px;word-break:break-word}
        #compGrid .comp-eq{margin-top:5px;gap:3px}
        #compGrid .comp-eq img{width:26px;height:26px;border-radius:7px}
        #compGrid .comp-tier{width:44px;height:44px;border-radius:10px}
        #compGrid .comp-tier span{font-size:17px}
        #compGrid .comp-factions{margin-left:0}
        #compGrid .comp-factions .fi{height:32px;padding:0 10px;border-radius:10px;font-size:13px}
        #compGrid .comp-heroes{flex:1 1 0;min-width:0;padding:0}
        #compGrid .comp-heroes .hi{width:44px;height:44px}
        #compGrid .hiwrap .core-mark{width:18px;height:18px;font-size:10px;top:-3px;right:-3px}
        #compGrid .comp-arrow{font-size:24px}
        #compGrid .code-badge{font-size:11px;padding:2px 8px}
      }

      /* ===== 弹层关闭交互修复（UXFIX:v3｜自动注入，勿与源文件混淆）=====
         覆盖源文件里全部 4 个 overlay：#modal / #diy-detail-modal /
         #diy-add-modal / #diy-rename-modal。

         iPhone 实测（390×844）：原 .close-btn 命中区只有 15.19×26px
         （iOS HIG 44×44 的 20%）、padding 0、无底色、向左容错仅 7~8px；
         且它是 absolute 定位在内容卡片内，而 overlay 本身是滚动容器，
         长卡片一滚按钮就跟着跑出视口（实测滚 25% → top −358px）。

         做法：让原按钮退役，改用「移出卡片 + fixed」的 48×48 按钮。
         位置用 calc(max(...)) 跟随卡片：窄屏贴边、宽屏跟着卡片右上角，不用 JS 算。 */

      /* --- 原关闭按钮退役（两个「高卡片」弹层） --- */
      #modal .close-btn,
      #diy-detail-modal .close-btn { display: none !important; }

      /* --- 悬浮关闭按钮：热区是完整 48×48 矩形，圆只画在 ::before --- */
      .wzq-close-x {
        display: none;
        position: fixed;
        z-index: 1002;
        /* 卡片顶部 = overlay 的 padding-top 28px；按钮再内缩 8px。
           加上安全区，避免灵动岛/刘海屏把按钮顶到状态栏下面。 */
        top: calc(36px + env(safe-area-inset-top, 0px));
        width: 48px; height: 48px;      /* 超出 iOS HIG 的 44×44 最小触摸目标 */
        margin: 0; padding: 0;
        /* 关键：按钮本身不带圆角、不带底色 —— 命中区是完整的 48×48 矩形。
           圆形只画在 ::before 上。若把 border-radius 放在按钮上，
           圆形四角（对角约 25.5px > 半径 24px）会变成死区点不到。 */
        border: none; background: none; border-radius: 0;
        color: var(--text);
        font: 400 26px/1 -apple-system, BlinkMacSystemFont, "PingFang SC",
              "Microsoft YaHei", sans-serif;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        /* iOS：去掉双击缩放判定与点击高亮，避免按下后延迟/闪一下 */
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        -webkit-user-select: none; user-select: none;
      }
      /* 卡片水平居中的右边缘距屏幕右边 = max(16px, (100vw - 卡片max-width)/2)，再内缩 8px。
         先给静态兜底值，再用 calc(max()) 覆盖 —— 不支持 max() 的老浏览器仍有定位。 */
      #wzq-close-x-modal { right: 24px; right: calc(max(16px, (100vw - 560px) / 2) + 8px); }
      #wzq-close-x-diy   { right: 24px; right: calc(max(16px, (100vw - 620px) / 2) + 8px); }

      /* 视觉层：直径 44px 的圆，比 48×48 的热区小一圈（热区 > 视觉 = 更好点）。
         z-index:-1 让它落在文字下方；按钮自身 fixed + z-index 已建层叠上下文，安全。 */
      .wzq-close-x::before {
        content: '';
        position: absolute;
        inset: 2px;
        z-index: -1;
        border-radius: 50%;
        border: 1px solid var(--border-strong);
        background: rgba(0, 0, 0, .60);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
        transition: transform .12s ease, background .12s ease;
      }
      /* 各自跟随对应 overlay 的开关状态，纯 CSS 同步，不依赖 JS 时序 */
      #modal.show ~ #wzq-close-x-modal { display: flex; }
      #diy-detail-modal.show ~ #wzq-close-x-diy { display: flex; }
      .wzq-close-x:active::before { transform: scale(.9); background: rgba(0, 0, 0, .78); }
      /* 键盘 Tab 的用户也要看得出焦点在哪 */
      .wzq-close-x:focus-visible { outline: 2px solid var(--neon-blue); outline-offset: 2px; }

      /* --- 下拉关闭时的跟手反馈：给卡片一个位移，松手后回弹（详见脚本里的 touch 逻辑） --- */
      #modal.wzq-pulling .modal-content,
      #diy-detail-modal.wzq-pulling .diy-detail-content {
        transition: none;
        transform: translateY(var(--wzq-pull, 0px));
      }

      /* --- 居中表单弹层：内容再高也不会把「取消/确认」挤出屏幕 ---
         .diy-modal-overlay 原本是 align-items:center + overflow:visible：
         表单一旦高于视口，上下都会被裁掉且无法滚动到底部的按钮。
         改成「可滚动 + 子元素 margin:auto」——矮时居中、高时可滚，两种情形都对。 */
      .diy-modal-overlay { overflow-y: auto; align-items: flex-start; }
      .diy-modal-overlay > .diy-modal-content { margin: auto; }